vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat: add react api and shadcn foundation

Browse source
This commit is contained in:
vince 2026-06-19 23:35:46 +02:00
parent f6d6d39a7b
commit a71d66b1b8
21 changed files with 1524 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

28
docs/superpowers/specs/2026-06-19-react-runtime-migration-design.md
View file

@ -18,7 +18,10 @@ state is a React runtime and React component library.
Use Vite React for the browser app and a small Bun HTTP server for production
runtime. This keeps the existing Bun SQLite persistence model and avoids adding
a heavier React framework where the current route/API surface is small.
a heavier React framework where the current route/API surface is small. Use
Tailwind CSS v4 and shadcn/ui as the reusable primitive layer for React
components, but do not vendor the full shadcn registry. Add only primitives
that map to the dashboard surface.
The migrated app will have these boundaries:
@ -36,6 +39,10 @@ The migrated app will have these boundaries:
TypeScript business logic with minimal import-path updates.
- `src/lib/ui/components/*.tsx` contains the reusable React component library.
- `src/lib/ui/stories/*.stories.tsx` contains React Storybook stories.
- `src/lib/components/ui/*.tsx` contains shadcn/ui primitives used by the
dashboard component library.
- `components.json` records the shadcn configuration with Vite, Radix, the Nova
preset, and `$lib` import aliases.
## Component Migration
@ -76,10 +83,12 @@ data-model identifiers, severity attributes, focusable links, reduced-motion
behavior, and screenshot-tested dashboard layout must stay equivalent to the
current Svelte implementation.
CSS will remain in `src/lib/ui/tokens.css` and component-specific CSS files.
React components should import their own CSS modules or regular CSS files in a
consistent local pattern. Shared UI types and `dashboardDocumentToUiDashboard`
remain framework-agnostic TypeScript.
CSS will keep the existing design tokens in `src/lib/ui/tokens.css`.
`src/app.css` imports Tailwind, shadcn CSS, font assets, and the existing
Dimension Lab token file. shadcn semantic variables must be mapped to the dark
console palette so generated primitives fit the dashboard instead of resetting
the app to a light generic theme. Shared UI types and
`dashboardDocumentToUiDashboard` remain framework-agnostic TypeScript.
## Runtime And API Behavior
@ -101,8 +110,11 @@ owned by `src/lib/server/agent-config/index.ts`.
`package.json` will move from Svelte/SvelteKit dependencies to React tooling:
- Runtime dependencies include `@vitejs/plugin-react`, `react`, `react-dom`,
`@iconify/react`, and existing non-Svelte libraries that still apply.
- Runtime dependencies include `react`, `react-dom`, `@iconify/react`,
selected shadcn primitive dependencies, Tailwind merge helpers, and existing
non-Svelte libraries that still apply.
- Dev dependencies include `@vitejs/plugin-react`, `@tailwindcss/vite`,
`tailwindcss`, and the shadcn package needed by the generated CSS import.
- Storybook moves from `@storybook/sveltekit` and Svelte CSF to
`@storybook/react-vite`.
- `svelte.config.js`, `src/app.html`, `src/routes/**`, and `.svelte` files are
@ -139,6 +151,8 @@ The migration is complete only when current evidence proves all of these:
- There are no `.svelte` app, component, route, or story files left.
- `package.json` has no Svelte, SvelteKit, or Svelte Storybook dependencies.
- shadcn is configured for Vite/Radix with `$lib` aliases and only selected
primitives, not the full registry.
- `bun run check` passes.
- `bun run test:unit` passes.
- `bun run build` produces the React client build and Bun server entry.