融合故事书
一个用现代技术堆栈建造的组件库,用于多个项目的最大可重复性.
电话字段在数据状态下被作为仅可读取的位数值处理,格式化时仅用于仅可读取的视图和输入.
技术堆栈
- 下一个.js 16 - 使用 App 路由器的响应框架
- 类型脚本 - 类型安全 JavaScript
- 尾风 CSS v4 - 功能第一CSS框架
- 沙克纳UI - 在Radix UI上建造的无障碍组件库
- 故事集 10 - 构成部分发展和文件编制
- ESLint 语录 - 暗号与下个规则同线
- 高级 - 以 Tailwind 类排序格式化代码
- 胡斯基 - 质量执法的金钩
- 阶段 - 在已显示的文件上运行插件
- 承诺 - 执行常规承诺信息
- 欢乐 - 单位和综合测试
- 剧作家 - 端到端浏览器测试
开始
先决条件
- 节点.js 20+
- npm 10+ (韩语)
安装
npm install
发展
npm run dev
打开 http://localhost:3:00 (英语) 以查看应用程序.
故事书
npm run storybook
打开 http://localhost:6006 (英语) 阅读故事书.
脚本
| 脚本 | 说明 |
|---|---|
npm run dev | 启动 Next.js 开发服务器 |
npm run build | 生产建筑 |
npm run start | 启动生产服务器 |
npm run lint | 运行 ESLint |
npm run lint:fix | 使用自动修正运行 ESLint |
npm run format | 用 Pretier 格式化所有文件 |
npm run format:check | 检查格式而不写入 |
npm run storybook | 启动 Storybook dev 服务器 |
npm run build-storybook | 制作故事书 |
npm run test | 运行 Jest 单元测试 |
npm run test:watch | 以监视模式运行游戏 |
npm run test:ci | 运行覆盖的 Jest( CI 模式) |
npm run test:e2e | 运行 Playwright e2e 测试 |
npm run test:e2e:ui | 使用 UI 运行 Playwright |
npm run test:e2e:report | 打开 Playwright HTML 报告 |
Git 工作流程
这个工程通过Husky git hooks执行代码质量:
承诺前
- 运行
lint-staged仅用于显示文件的提示和格式
提交信件
- 强制执行 常规武器委员会 格式通过承诺
- 实例:
feat: add new button componentfix: resolve responsive layout issuedocs: update READMEtest: add unit tests for button
预推
- 在推前运行完整的 Jest 测试套件
项目结构
fusion-storybook/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── globals.css # Global styles with ShadcnUI CSS variables
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Home page
│ ├── components/
│ │ └── ui/ # ShadcnUI components
│ │ └── button.tsx
│ ├── lib/
│ │ └── utils.ts # Utility functions (cn helper)
│ ├── hooks/ # Custom React hooks
│ ├── stories/ # Storybook stories
│ └── __tests__/ # Jest unit tests
├── tests/
│ └── e2e/ # Playwright e2e tests
├── .husky/ # Husky git hooks
├── .storybook/ # Storybook configuration
├── .vscode/ # VS Code settings
├── components.json # ShadcnUI configuration
├── jest.config.ts # Jest configuration
├── jest.setup.ts # Jest setup (testing-library/jest-dom)
├── playwright.config.ts # Playwright configuration
├── commitlint.config.ts # Commitlint configuration
└── .prettierrc # Prettier configuration
添加 ShadcnUI 组件
一旦 shadcn CLI可以到达注册,使用:
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
VS 代码整合
为最佳发展经验安装建议的扩展:
- 高级 - 代码格式化
- ESLint 语录 - 密码闪烁
- 尾风 CSS 智能 - 尾风课的提示
- 故事书 - 故事集成
- 剧作家 - 试验跑道集成
默认情况下通过 .vscode/settings.json。 。 。 .
代码质量
- ESLint 语录 执行 Next.js 和 TypeScript 最佳做法
- 高级 与
prettier-plugin-tailwindcss尾风类 - 阶段 只在已显示的文件上运行 linters (快 !)
- 承诺 确保消息格式一致