Skip to content

Commit e26f600

Browse files
sonofmagicsonofmagic
committed
chore: add storybook for @weapp-tailwindcss/ui
1 parent 89f551e commit e26f600

23 files changed

+2746
-33
lines changed

‎.qoder/quests/storybook-integration.md‎

Lines changed: 590 additions & 0 deletions
Large diffs are not rendered by default.

‎benchmark/app/data/2025-12-23.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"native-webpack": {
3+
"babel": [
4+
256.08429199999955,
5+
454.72762499999953
6+
]
7+
},
8+
"mpx": {
9+
"babel": [
10+
143.9389999999985,
11+
234.47299999999814,
12+
39.48941600000035,
13+
70.16595799999777,
14+
295.8419170000052,
15+
63.499541999997746,
16+
4861.104916000004
17+
]
18+
},
19+
"uni-app-webpack-vue2": {
20+
"babel": [
21+
1834.483874999998
22+
]
23+
},
24+
"taro-react": {
25+
"babel": [
26+
4268.139624999996,
27+
4302.068457999994,
28+
5261.896667000001
29+
]
30+
},
31+
"rax": {
32+
"babel": [
33+
456.9909169999992,
34+
493.1847080000007,
35+
349.6304999999993,
36+
130.26416699999754,
37+
67.52441700000054,
38+
113.09358399999837,
39+
373.7474169999987
40+
]
41+
},
42+
"taro-vue3": {
43+
"babel": [
44+
905.6489580000052
45+
]
46+
},
47+
"uni-app-webpack5-vue2": {
48+
"babel": [
49+
509.88066700000127
50+
]
51+
}
52+
}

‎packages-runtime/ui/.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
types
1+
types
2+
storybook-static

‎packages-runtime/ui/.storybook/main.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/**
2+
* Storybook 主配置文件
3+
* @author ice breaker <[email protected]>
4+
*/
5+
import type { StorybookConfig } from '@storybook/react-vite'
6+
import { mergeConfig } from 'vite'
7+
8+
const config: StorybookConfig = {
9+
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
10+
11+
addons: [
12+
'@storybook/addon-essentials',
13+
'@storybook/addon-interactions',
14+
'@storybook/addon-a11y',
15+
],
16+
17+
framework: {
18+
name: '@storybook/react-vite',
19+
options: {},
20+
},
21+
22+
docs: {},
23+
24+
typescript: {
25+
reactDocgen: 'react-docgen-typescript',
26+
reactDocgenTypescriptOptions: {
27+
shouldExtractLiteralValuesFromEnum: true,
28+
shouldRemoveUndefinedFromOptional: true,
29+
propFilter: (prop) => {
30+
if (prop.parent) {
31+
return !prop.parent.fileName.includes('node_modules')
32+
}
33+
return true
34+
},
35+
},
36+
},
37+
38+
async viteFinal(config) {
39+
return mergeConfig(config, {
40+
resolve: {
41+
alias: {
42+
'@': '/src',
43+
},
44+
},
45+
})
46+
},
47+
}
48+
49+
export default config

‎packages-runtime/ui/.storybook/preview.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* Storybook 预览配置
3+
* @author ice breaker <[email protected]>
4+
*/
5+
import type { Preview } from '@storybook/react'
6+
/* eslint-disable antfu/no-import-dist */
7+
import '../dist/index.css'
8+
/* eslint-enable antfu/no-import-dist */
9+
10+
const preview: Preview = {
11+
parameters: {
12+
controls: {
13+
matchers: {
14+
color: /(background|color)$/i,
15+
date: /Date$/i,
16+
},
17+
},
18+
backgrounds: {
19+
default: 'light',
20+
values: [
21+
{
22+
name: 'light',
23+
value: '#ffffff',
24+
},
25+
{
26+
name: 'dark',
27+
value: '#1a1a1a',
28+
},
29+
],
30+
},
31+
viewport: {
32+
viewports: {
33+
mobile: {
34+
name: 'Mobile',
35+
styles: {
36+
width: '375px',
37+
height: '667px',
38+
},
39+
},
40+
tablet: {
41+
name: 'Tablet',
42+
styles: {
43+
width: '768px',
44+
height: '1024px',
45+
},
46+
},
47+
desktop: {
48+
name: 'Desktop',
49+
styles: {
50+
width: '1280px',
51+
height: '800px',
52+
},
53+
},
54+
},
55+
},
56+
},
57+
}
58+
59+
export default preview

‎packages-runtime/ui/STORYBOOK.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# Storybook 集成文档
2+
3+
## 概述
4+
5+
已成功在 `packages-runtime/ui` 中集成 Storybook 8.x，用于展示和测试 UI 组件库的所有组件。
6+
7+
## 快速开始
8+
9+
### 启动 Storybook 开发服务器
10+
11+
```bash
12+
cd packages-runtime/ui
13+
pnpm storybook
14+
```
15+
16+
访问: http://localhost:6006
17+
18+
### 构建静态站点
19+
20+
```bash
21+
pnpm storybook:build
22+
```
23+
24+
构建产物位于 `storybook-static/` 目录。
25+
26+
## 已实现的 Stories
27+
28+
### Core 核心组件 (6个)
29+
- ✅ Button - 按钮组件（8+ Stories）
30+
- ✅ Input - 输入框组件
31+
- ✅ Textarea - 多行文本框
32+
- ✅ Checkbox - 复选框
33+
- ✅ Radio - 单选框
34+
- ✅ Switch - 开关
35+
36+
### Data Display 数据展示 (4个)
37+
- ✅ Badge - 徽章
38+
- ✅ Card - 卡片
39+
- ✅ Tag - 标签
40+
- ✅ Avatar - 头像
41+
42+
### Feedback 反馈组件 (2个)
43+
- ✅ Toast - 轻提示
44+
- ✅ Loading - 加载中
45+
46+
### Layout 布局组件 (1个)
47+
- ✅ Divider - 分割线
48+
49+
### Navigation 导航组件 (1个)
50+
- ✅ Tabs - 标签页
51+
52+
## Story 覆盖内容
53+
54+
每个组件的 Story 包含：
55+
56+
1. **Default** - 默认用法展示
57+
2. **Variants** - 所有变体（tone、appearance、size等）
58+
3. **States** - 所有状态（disabled、loading、error等）
59+
4. **Interactive** - 交互示例（如适用）
60+
5. **Playground** - 自由参数组合测试
61+
62+
## 配置文件
63+
64+
- `.storybook/main.ts` - Storybook 主配置
65+
- `.storybook/preview.tsx` - 全局预览配置
66+
- `stories/Introduction.mdx` - 首页文档
67+
- `stories/*/*.stories.tsx` - 组件 Story 文件
68+
69+
## 技术栈
70+
71+
- **Storybook**: 8.6.15
72+
- **Framework**: @storybook/react-vite
73+
- **Addons**:
74+
- essentials (Controls, Actions, Docs等)
75+
- interactions (交互测试)
76+
- a11y (无障碍检查)
77+
78+
## 样式集成
79+
80+
样式文件从 `dist/index.css` 导入，确保与构建产物保持一致。
81+
82+
## 扩展 Stories
83+
84+
参考 `stories/core/Button.stories.tsx` 作为模板，为新组件创建 Story：
85+
86+
```typescript
87+
import type { Meta, StoryObj } from '@storybook/react'
88+
import React from 'react'
89+
90+
const YourComponent: React.FC = () => <div>Your Component</div>
91+
92+
const meta: Meta<typeof YourComponent> = {
93+
title: 'Category/ComponentName',
94+
component: YourComponent,
95+
tags: ['autodocs'],
96+
}
97+
98+
export default meta
99+
type Story = StoryObj<typeof YourComponent>
100+
101+
export const Default: Story = {}
102+
```
103+
104+
## 部署
105+
106+
构建后的静态站点可部署到：
107+
- Chromatic
108+
- Netlify
109+
- Vercel
110+
- GitHub Pages
111+
112+
## 注意事项
113+
114+
1. 运行 Storybook 前需先构建 UI 包（`pnpm build`）以生成样式文件
115+
2. Story 中展示的是 Web 版本的组件，实际项目使用 Taro/uni-app 版本
116+
3. 部分组件可能需要补充更多 Story 实例以覆盖所有用法

‎packages-runtime/ui/package.json‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,10 @@
7474
"test:dev": "vitest",
7575
"lint": "eslint .",
7676
"lint:fix": "eslint . --fix",
77-
"gen:component": "tsx scripts/generate-component.ts"
77+
"gen:component": "tsx scripts/generate-component.ts",
78+
"storybook": "storybook dev -p 6006",
79+
"storybook:build": "storybook build",
80+
"storybook:test": "test-storybook"
7881
},
7982
"publishConfig": {
8083
"exports": {
@@ -130,8 +133,18 @@
130133
"tailwind-variants": "^3.2.2"
131134
},
132135
"devDependencies": {
136+
"@storybook/addon-a11y": "^8.5.0",
137+
"@storybook/addon-essentials": "^8.5.0",
138+
"@storybook/addon-interactions": "^8.5.0",
139+
"@storybook/react": "^8.5.0",
140+
"@storybook/react-vite": "^8.5.0",
141+
"@storybook/test": "^8.5.0",
133142
"@tailwindcss/vite": "catalog:tailwindcss4",
134143
"@types/react": "^19.0.0",
144+
"@types/react-dom": "^19.0.0",
145+
"react": "^18.3.1",
146+
"react-dom": "^18.3.1",
147+
"storybook": "^8.5.0",
135148
"tailwindcss": "catalog:tailwindcss4",
136149
"typescript": "catalog:typescript59",
137150
"vite": "^7.3.0",

0 commit comments

Comments
 (0)