Commit Graph

27 Commits

Author SHA1 Message Date
d02d64b61c SdcTopBar: move app-directory grid to the left of the app name
Some checks failed
Publish package to GitHub Packages / publish (push) Has been cancelled
Grid (suite menu) now sits left of the app name; optional hamburger before it
(new onMenuClick prop) for apps with side nav; API-settings cog + no-key badge
stay on the right. Bump to 0.2.1.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
v0.2.1
2026-06-09 14:25:03 +10:00
ce1efd1c13 Add shared SDC app shell (SdcTopBar + ApiSettings + unified credentials)
Some checks failed
Publish package to GitHub Packages / publish (push) Has been cancelled
Workstream D: a shared top bar for the SDC tool suite — app name (left), API
settings cog, and the suite app directory (grid) — composed on the existing
TopBar. Adds an ApiSettings dialog and sdc_api_key/sdc_api_endpoint credential
helpers (shared once across all tools, with legacy-key migration). lucide-react
becomes a peer dependency. Bump to 0.2.0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
v0.2.0
2026-06-09 08:44:00 +10:00
58a67dfc75 Update architecture: package distribution supersedes forks
Record the move from a fork-based downstream model to versioned npm-package
consumption (GitHub Packages, @richiesnitch/ads3-design-system).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-05 13:34:09 +10:00
6d3331f802 Configure GitHub Packages publishing
Some checks failed
Publish package to GitHub Packages / publish (push) Has been cancelled
Scope the package as @richiesnitch/ads3-design-system, add repository +
publishConfig (GitHub Packages registry), and a publish-on-tag GitHub Actions
workflow. Add react/react-dom as devDependencies so the library build runs in
CI (they remain peerDependencies for consumers).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
v0.1.0
2026-06-05 12:59:34 +10:00
69751eb6f2 Add library build for package distribution
Add a separate Vite library build (vite.lib.config.ts + `build:lib`) that
bundles src/index.ts to ESM with React/react-dom externalised and the 97
internal `@/` imports resolved at build time, plus type declarations and
copies of tokens.css / typography.css into dist. Point package.json
exports/main/types at dist and make react a peer dependency, so ADS can be
consumed as an installed package (@geljic/ads3-design-system) rather than a
file: + `@/` alias dependency.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-05 12:44:26 +10:00
1c87e23e5d Add library entry point and package exports for consumption
Add src/index.ts barrel export re-exporting all components, types, and
utilities. Configure package.json with main, exports (root, tokens,
utils), peerDependencies for react/react-dom, and bump to 0.1.0.
Consumers can now install via local path and import directly:

  import { Button, AppShell, cn } from 'ads3-design-system'
  import 'ads3-design-system/tokens'

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-03 16:02:44 +10:00
d36330084a Add CenteredPage template and fix SideNav collapse animation
Add CenteredPage template for no-sidebar, centered-content layouts
(login, error, onboarding). Fix SideNav collapse animation where items
slid right — removed nav-level items-center (each item already handles
its own centering) and added overflow-hidden to clip text during the
width transition.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-03 15:38:03 +10:00
b8fb8c63c6 Use NSW logo SVG asset from public/ instead of inline SVG
Move the official NSW Government logo to public/nsw-logo.svg and
reference it as an img in TopBar stories and template story helpers,
replacing the large inline SVG blocks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-03 15:30:38 +10:00
df7bbba915 Genericise template stories, fix TopBar icons, and add DetailPage
Replace domain-specific (education/PDP) recipe stories with generic
content. Fix TopBar action buttons using properly styled light-on-dark
buttons instead of invisible IconButton tertiary. Use the real NSW
waratah SVG logo. Add shared _story-helpers for TopBar actions and logo.
Add DetailPage template for single-record/profile/document views with
constrained width and tab support.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-03 15:22:18 +10:00
95f72407f8 Add page templates, overhaul DESIGN.md, and fix SideNav text alignment
Introduce AppShell, DashboardPage, ListPage, and FormPage template
components with Storybook recipe stories for AI agent consumption.
Thoroughly update DESIGN.md with all missing components, corrected
token values, and page layout conventions. Fix SideNav button items
defaulting to centered text.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-03 15:11:01 +10:00
d915443b8c Align design system with ADS 3.0 and add new components
Token foundation: fix 16 palette colours to match official ADS_COLORS,
add 5 new palettes (teal, brown, purple, fuchsia, yellow), realign
semantic tokens (primary=navy, info=bright blue), fix border radii to
8px base, add responsive heading typography.

Component migration: swap primary/info references across all existing
components, update Button (44px/semibold), Switch (green/compact),
Chip (30px/8px radius + colour variants), SideNav (80px rail), Tag
(11 colours).

New components: SideNav, TopBar, Avatar, Tabs, PageHeader, Slider,
RangeSlider, FileInput, DataTable, List, Autocomplete.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-03 14:24:23 +10:00
f4fd1fc04b Rebrand to ADS 3.0 Design System and add DESIGN.md component reference
Convert from Research Synthesiser-specific project to general-purpose ADS 3.0
design system intended to be forked for downstream applications. Add DESIGN.md
following Google Labs spec as machine-readable reference for AI coding agents.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-22 09:59:02 +10:00
722475215d Reorganise components into atoms/molecules/organisms and fix Input icon colours
Moved all 17 components from ui/ into atomic design tiers: atoms (Button,
IconButton, Input, Textarea, Select, Checkbox, Radio, Switch, Badge, Tag,
Chip, Tooltip) and molecules (Alert, Accordion, Card, Dialog, Popover).
Updated all Storybook titles and cross-component imports. Changed Input
icons to primary-dark and replaced palette token references with semantic
tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-22 09:10:12 +10:00
d696619e4e Add Dialog, Tag, Tooltip, Popover, and Alert components; fix Button icon sizes
New primitives completing the ui/ component tier: Dialog (native <dialog>
with focus trapping), Tag (6 colours × 3 variants), Tooltip and Popover
(using @floating-ui/react for positioning), and Alert (5 status variants
with icons, close, and action slot). Reduced Button icon sizes to better
match label text. Added Tag and Alert token layers to tokens.css.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 22:31:52 +10:00
4be996789e Add Accordion, Textarea, Select, and Card components; fix Input focus shift
New components:
- Accordion: compound component with single/multiple mode, grid-rows animation
- Textarea: multi-line input with auto-resize, character count, outlined/stacked variants
- Select: custom dropdown with keyboard navigation, combobox/listbox ARIA pattern
- Card: 4 variants (surface/outlined/elevated/filled) with header action support

Changes:
- Fix Input/Textarea focus ring layout shift (ring-1 instead of border-2)
- Add small/xsmall sizes to IconButton for card action contexts
- Add --radius-xl token (16px) for larger container corners

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 17:10:11 +10:00
e025c0eb34 Add Badge, Chip, and IconButton components with token layers
- Badge: 11 solid-colour variants (navy, info, success, error, warning + light variants, neutral, white) with icon slots
- Chip: bordered interactive element with selected, dismissible, and disabled states
- IconButton: circle/square shapes, 3 variants × 3 intents × 3 sizes, uses lucide-react icons
- Add badge and chip domain token layers to tokens.css
- Configure extendTailwindMerge in cn() to recognise custom font-size utilities (text-small, text-body, etc.)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 16:01:06 +10:00
c00335ef84 Refactor Button to semantic tokens and intent prop, fix error focus rings
Replace palette token references (blue-01, red-02, grey-01) with dedicated
button domain tokens. Rename `color` prop to `intent` with semantic values
(default, danger, subtle, neutral). Add loading state with spinner and
aria-busy. Fix Checkbox and Radio error states leaking teal focus ring.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 14:19:36 +10:00
3e7de78721 Remove internal project files from tracking and update .gitignore
Stop tracking .claude/, CLAUDE.md, ARCHITECTURE.md, and plans/ — these are
local-only working files for Claude Code and should not be on the shared
Gitea remote. Files remain on disk, only removed from git index.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 14:05:36 +10:00
07be9d7314 Add Input, Checkbox, Radio, and Switch form components with semantic token layer
Build four form primitives from Figma references with brand-aligned creative
decisions: restrained press states (scale-95 instead of highlight splashes),
clean iconless Switch, and consistent error states with inline warning icons.

Introduce form-control semantic tokens (--color-control-*) in tokens.css so
all form components share a single source for borders, checked states, focus
rings, labels, and errors. Retrofit Input to use these tokens instead of
direct palette references.

Update CLAUDE.md and ARCHITECTURE.md with token layer documentation, token
discipline rule (no palette references in components), and component tier
decision criteria.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 14:00:56 +10:00
0e1b06b376 Add project plans for brand colours, typography, workflow, and Figma migration
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 11:56:10 +10:00
40d53f86dd Add Button component with NSW DS variants, colours, sizes, and icons
Pill-shaped button with three variants (primary/secondary/tertiary),
four colour schemes (navy/red/light/surface), three sizes, and optional
left/right icon slots. 17 Storybook stories cover all combinations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 11:56:03 +10:00
ba796fb247 Update grey-01 to NSW DS value and add semantic colour aliases
Grey-01 updated from #3D3D3D to #22272B to match the NSW Design System.
Semantic aliases (primary, error, success, warning, text, surface, etc.)
now reference palette variables as the single layer of indirection.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 11:55:59 +10:00
2205862c2f Add workflow tooling: claude2figma skills, Storybook addons, Figma permissions
Install @storybook/addon-designs for embedding Figma frames in stories
and claude2figma skills (preflight, component-rules, style-binding,
reference-interpreter) for enforcing design token compliance when
writing to Figma. Add PostToolUse hook for use_figma QA reminders and
pre-allow Figma MCP + Code Connect tools in settings.json.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 11:28:15 +10:00
b57aab01aa Add typography system with Public Sans and 16 type styles
Self-host Public Sans via @fontsource-variable (weights 100-900, normal
+ italic). Add 6 composed @utility classes in typography.css for styles
that combine multiple properties (body-strong, small-strong, label,
overline, body-link, small-link). Matching text styles created in the
Figma design file via MCP for designer use.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 10:05:34 +10:00
afba95fbaf Migrate from Penpot to Figma and add NSW brand colour palette
Replace self-hosted Penpot MCP references with the official Figma Remote
MCP server (OAuth, HTTP transport). Swap placeholder semantic colours in
tokens.css for the NSW Design System brand palette extracted from Figma
(blues, reds, oranges, greens, greys) and add typography size tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-21 10:05:25 +10:00
592635e7ce Fix TypeScript baseUrl deprecation and clean up Storybook story pattern
Remove deprecated baseUrl from tsconfig.app.json (paths work without it
in modern TS). Remove unused .mdx pattern from Storybook story glob.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-20 14:36:01 +10:00
dbf6a5870d Initial scaffold: React 19 + Vite + TypeScript + Tailwind CSS v4 + Storybook 10
Design system and component library for the Research Synthesiser. Includes:
- Tailwind CSS v4 with @theme-based design tokens from the existing synthesiser
- Storybook 10.4 with MCP, a11y, docs, and vitest addons
- ESLint + Prettier with Tailwind class sorting
- Button component as pipeline validation
- CLAUDE.md with project principles and conventions
- ARCHITECTURE.md as living architecture document
- Penpot and Storybook MCP server configuration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-20 14:30:41 +10:00