tailwind + figmatoken + storybook

Author: ppaann

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/experimental-nextjs-vite";
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/experimental-addon-test",
+    "@storybook/addon-styling-webpack"
+  ],
+  "framework": {
+    "name": "@storybook/experimental-nextjs-vite",
+    "options": {}
+  },
+  "staticDirs": [
+    "../public"
+  ]
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+import '../src/app/globals.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

design-tokens/tokens.json

@@ -0,0 +1,28 @@
+{
+  "colors": {
+    "primary": {
+      "500": {
+        "value": "#3B82F6",
+        "type": "color"
+      },
+      "600": {
+        "value": "#2563EB",
+        "type": "color"
+      }
+    }
+  },
+  "spacing": {
+    "sm": {
+      "value": "8px",
+      "type": "dimension"
+    },
+    "md": {
+      "value": "16px",
+      "type": "dimension"
+    },
+    "lg": {
+      "value": "24px",
+      "type": "dimension"
+    }
+  }
+}

docs/design/design-system.fig

@@ -0,0 +1,10 @@
+# Figma 设计文件链接
+
+- 主设计系统: [DesignSystem.fig](https://www.figma.com/design/ZuZWPWcPLSqaX8d1p9uTpX/DesignSystem)
+- 按钮组件节点 ID: 3-1377
+
+### 核心组件
+
+| 组件名称 | 节点 ID | 最后更新   |
+| -------- | ------- | ---------- |
+| 主按钮   | 3-1377  | 2025-03-13 |