@farm-junction/设计-图书馆
农场枢纽 反应设计系统——设计代号,组件,"故事书"docs,以及用于消费应用的Tailwind 4预设.
堆栈
- 反应 19 + 类型脚本 5
- 尾风 CSS 4 (
@theme符号) - 故事本 第8册 (Vite)
- 虚拟库构建(ESM+类型+CSS)
脚本
| 命令 | 说明 |
|---|---|
npm run dev | 在端口启动故事书 6006 |
npm run build | 类型检查和构建 dist/ |
npm run build-storybook | 静态故事书构建 |
npm run lint | ESLint 语录 |
发展
npm install
npm run dev
打开 http://localhost:6006 (英语) 浏览组件和符号表.
软件包出口
| 导入路径 | 说明 |
|---|---|
@farm-junction/design-library | 反应组件, cn, (中文(简体) ), tokens |
@farm-junction/design-library/styles.css | 编译组件样式 |
@farm-junction/design-library/tailwind-preset | Tailwind 4主题+应用集成基础 |
Next.js 应用程序中的使用
1. 安装
或公布到您的注册簿上,并按常规安装.
npm install @farm-junction/design-library
` , `
2. 在您的应用 CSS 中扩展尾风 4
单位 app/globals.css (或您的主要CSS条目):
@import 'tailwindcss';
@source "../node_modules/@farm-junction/design-library/dist";
@import '@farm-junction/design-library/theme.css';
调整 @source 路径,如果您的应用程序生活在单列或使用不同的 node_modules 设置.
3. 使用组件
import { Button } from '@farm-junction/design-library';
export default function Page() {
return <Button variant="primary">Get started</Button>;
}
项目结构
src/
├── tokens/ # @theme CSS + TS token mirror
├── styles/ # Tailwind entry (dev + build)
├── components/ # React components + stories
├── lib/utils.ts # cn() helper
├── tailwind-preset.css
└── index.ts # Public API
添加组件
- 创建
src/components/MyComponent/MyComponent.tsx - 添加
MyComponent.stories.tsx故事书 - 导出自
src/components/index.ts财务报告和审定财务报表src/index.ts - 使用引用的 Tailwind 工具
@theme标志(例如:.bg-primary(中文(简体) )