feat: add token system and ui contracts

2026-03-19 14:21:13 +08:00
parent 937855362b
commit 3960e0a0e7
14 changed files with 1389 additions and 32 deletions
@@ -0,0 +1,23 @@
+import tailwindcss from "@tailwindcss/vite";
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [
+    "@storybook/addon-a11y",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [tailwindcss()]
+    });
+  }
+};
+
+export default config;
@@ -0,0 +1,75 @@
+import "../src/preview.css";
+
+import type { Preview } from "@storybook/react";
+import {
+  defaultMotionMode,
+  defaultTheme,
+  motionModeNames,
+  setMotionMode,
+  setTheme,
+  themeDetails,
+  themeNames
+} from "@ai-ui/tokens";
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: "Preview theme",
+      toolbar: {
+        icon: "paintbrush",
+        dynamicTitle: true,
+        items: themeNames.map((themeName) => ({
+          value: themeName,
+          title: themeDetails[themeName].label
+        }))
+      }
+    },
+    motion: {
+      description: "Preview motion mode",
+      toolbar: {
+        icon: "transfer",
+        dynamicTitle: true,
+        items: motionModeNames.map((modeName) => ({
+          value: modeName,
+          title: modeName === "system" ? "Motion / System" : "Motion / Reduced"
+        }))
+      }
+    }
+  },
+  initialGlobals: {
+    motion: defaultMotionMode,
+    theme: defaultTheme
+  },
+  parameters: {
+    a11y: {
+      test: "todo"
+    },
+    backgrounds: {
+      default: "canvas",
+      values: [
+        {
+          name: "canvas",
+          value: "var(--color-background)"
+        }
+      ]
+    },
+    controls: {
+      expanded: true
+    },
+    layout: "fullscreen"
+  },
+  decorators: [
+    (Story, context) => {
+      if (typeof document !== "undefined") {
+        setTheme(context.globals.theme ?? defaultTheme);
+        setMotionMode(context.globals.motion ?? defaultMotionMode);
+
+        document.body.dataset.theme = context.globals.theme ?? defaultTheme;
+      }
+
+      return Story();
+    }
+  ]
+};
+
+export default preview;