feat(web): Storybook for offline UI design + light theme + brand spinner

Stand up Storybook so the management console can be designed without a running host, plus the design-system work that surfaced along the way. Storybook (@storybook/react-vite): - Slim Start/Nitro-free vite config; the preview imports the app's real src/styles.css directly so the design tokens stay single-sourced (no mirror). - Stories for the @unom/ui primitives (Button/Card/Inputs/Badge), brand marks, the AppShell (throwaway in-memory TanStack router), and every data-driven page (Dashboard/Host/Clients/Library/Settings) rendered offline via a window.fetch stub + typed fixtures. The route page components are exported so stories can render them. Light theme: - styles.css now carries a light :root (lavender, from the docs palette) with the existing violet chrome moved to .dark; the live console still pins html.dark by default, so this only adds the option (Storybook's toolbar toggles it). - Fixes a stray `*/` inside a comment that prematurely closed it and silently broke Tailwind's @theme processing. Spinner: - The punktfunk lens recreated with motion/react: two circles surge through one another in depth (JS perspective scale + z-index — robust where mix-blend-mode flattens CSS preserve-3d) with a screen-blend lens highlight. Replaces the skeleton loading state in QueryState; removes ui/skeleton.tsx. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-25 21:58:36 +00:00
parent 0255a8289c
commit 75ee53d1dd
30 changed files with 1164 additions and 246 deletions
@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // Use the slim, Start/Nitro-free Vite config (see vite.storybook.config.ts).
+      builder: { viteConfigPath: './vite.storybook.config.ts' },
+    },
+  },
+}
+
+export default config
@@ -0,0 +1,69 @@
+// Import the console's REAL stylesheet directly (rememed-style) — the @theme
+// blocks process because this is the literal entry Storybook's Vite pipeline sees.
+import '../src/styles.css'
+// The console loads its brand typeface separately (in __root.tsx); do the same
+// here or every story falls back to system-ui and looks off.
+import '@fontsource-variable/geist'
+import { useEffect } from 'react'
+import { definePreview } from '@storybook/react-vite'
+import { MaterialProvider, defaultMaterialTheme } from '@unom/ui/material'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+// React Query is present so any query-backed component mounts without a real
+// host. Stories should feed mock data rather than fetch — retries are off so a
+// stray request fails fast instead of hanging the canvas.
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+})
+
+export default definePreview({
+  addons: [],
+  // The live console pins dark; default the canvas to dark too, with a toolbar
+  // switch to preview the light theme while designing.
+  initialGlobals: { theme: 'dark' },
+  globalTypes: {
+    theme: {
+      description: 'Light/dark color scheme',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: [
+          { value: 'dark', icon: 'moon', title: 'Dark' },
+          { value: 'light', icon: 'sun', title: 'Light' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const dark = (context.globals.theme as string) !== 'light'
+      // `layout: 'fullscreen'` stories (e.g. the AppShell) own their own padding;
+      // everything else gets a comfortable inset.
+      const fullscreen = context.parameters.layout === 'fullscreen'
+      // Mirror `.dark` onto <html> so the body's token-driven background AND any
+      // portal-mounted content (radix dialogs, popovers) pick up the right
+      // palette — the console keys its whole token set off `html.dark`.
+      useEffect(() => {
+        document.documentElement.classList.toggle('dark', dark)
+      }, [dark])
+      return (
+        <QueryClientProvider client={queryClient}>
+          <MaterialProvider theme={defaultMaterialTheme}>
+            <div className={dark ? 'dark' : ''}>
+              <div
+                className={`min-h-screen bg-background text-foreground ${fullscreen ? '' : 'p-6'}`}
+              >
+                <Story />
+              </div>
+            </div>
+          </MaterialProvider>
+        </QueryClientProvider>
+      )
+    },
+  ],
+  parameters: {
+    controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } },
+    layout: 'padded',
+  },
+})