轨道设计系统
用于轨道应用的可主题,有域-意识组件库. 生成客户特定设计系统 .orb 计划.
特征
- CSS 变量主题: 所有组件都使用 CSS 变量, 方便主题切换
- 域检测: 从计划自动检测域(花园、保健、金融等)
- 构成部分建议: 根据计划分析建议特定域的组件
- 故事书集成: 带有主题切换的视觉组件文档
- 静态导出: 导出用于客户端发送的静态 HTML 设计系统
快速启动
# Install dependencies
npm install
# Start Storybook for development
npm run storybook
# Generate a client-specific design system
npm run generate path/to/schema.orb
可用主题
| 主题 | 说明 | 最佳服务 |
|---|---|---|
wireframe | 高对比度,尖锐的边缘 | 原型制作 |
minimalist | 柔软,优雅,微妙 | 公司应用程序 |
almadar | 特定品牌的样式 | Al-Madar项目 |
winning-11 | 花园/有机主题 | 农业、自然 |
脚本
npm run storybook
在端口6006上启动故事本开发服务器.
npm run build-storybook
构建静态故事书文档.
npm run generate <schema.orb> [options]
生成完整的客户特定设计系统.
选项 :
--output <dir>- 输出目录(默认:./导出)--name <name>- 客户名覆盖--no-storybook- 跳过故事书构建--no-components- 跳过组件生成
示例
npm run generate ../architecture/winning-11.orb --output ./clients
npm run generate:theme <schema.orb> [output.css]
仅从计划生成主题 CSS .
npm run suggest:components <schema.orb> [--generate <dir>]
分析计划并推荐特定域的组件.
构成部分库结构
components/
├── atoms/ # Basic building blocks
│ ├── Button
│ ├── Input
│ ├── Badge
│ ├── Card
│ └── ...
├── molecules/ # Composite components
│ ├── Alert
│ ├── Modal
│ ├── Tabs
│ └── ...
├── organisms/ # Complex components
│ ├── DataTable
│ ├── Header
│ ├── Sidebar
│ └── ...
└── templates/ # Page layouts
├── AuthLayout
├── FormTemplate
└── ...
他们
使用主题
通过设置应用主题 data-design-theme 属性 :
<html data-design-theme="winning-11">
...
</html>
或者在反应中:
<div data-design-theme="winning-11">
<Button>Themed Button</Button>
</div>
CSS 变量
所有组件都使用CSS变量进行主题:
/* Colors */
--color-primary
--color-primary-hover
--color-primary-foreground
--color-secondary
--color-secondary-foreground
--color-accent
--color-muted
--color-muted-foreground
--color-background
--color-foreground
--color-border
/* Shadows */
--shadow-sm
--shadow-main
--shadow-lg
--shadow-hover
/* Border Radius */
--radius-sm
--radius-md
--radius-lg
--radius-xl
/* Transitions */
--transition-fast
--transition-normal
--transition-slow
创建自定义主题
- 在其中创建 CSS 文件
themes/数字 :
[data-design-theme="my-theme"] {
--color-primary: #your-color;
--color-secondary: #your-color;
/* ... other variables */
}
- 导入
themes/index.css数字 :
@import './my-theme.css';
- 添加到故事本预览( E)
.storybook/preview.tsx:
themes: {
// ...existing themes
'my-theme': 'my-theme',
}
特定域组件
生成器根据计划分析提出了特定域的组件:
花园/农业领域
GardenView- 视觉花园布局PlantCard- 有护理指标的植物展示GrowthMeter- 增长进度指标TrustMeter- 信托/关系指标CareIndicator- 水/太阳/营养需要
保健领域
PatientCard- 病人信息显示VitalsDisplay- 重要标志紧凑视图AppointmentSlot- 时间安排部分
电子商务领域
ProductCard- 有价格和推车动作的产品CartSummary- 计算机概览PriceTag- 格式价格显示
游戏域
CharacterStats- 火箭筒式Stat显示器QuestTracker- 积极探索面板
与提案文件合并
生成的设计系统可以包含在客户建议书中:
-
生成设计系统 :
npm run generate ../architecture/winning-11.orb --output ./exports -
出口包括:
- 主题 CSS 文件
- 组件根( 如果检测到域)
- 故事书文档
- 用元数据表示
-
在提案文件中提及或作为单独一揽子交付.
客户端特定组件
客户特有组件在以客户端命名的专用文件夹中直播. 这些组成部分:
- 扩展核心库 - 使用现有的原子/分子,不要重现它们
- 跟随原子设计 - 分为原子、分子、生物、模板
- 包含故事书故事 - 每个部件必须有一个
.stories.tsx文件 - 可重复使用 - 可用于同一客户的未来项目
目录结构
orbital-shared/design-system/
├── components/ # Core component library (shared across all clients)
│ ├── atoms/
│ ├── molecules/
│ ├── organisms/
│ └── templates/
├── clients/ # Client-specific components
│ ├── winning-11/ # Winning-11 client
│ │ ├── atoms/ # Client-specific atoms (rare)
│ │ ├── molecules/ # Client-specific molecules
│ │ ├── organisms/ # Client-specific organisms
│ │ ├── templates/ # Client page templates/showcases
│ │ └── index.ts # Barrel export
│ └── [other-client]/ # Another client folder
└── ...
何时创建客户端特定组件
| 假设 | 何处添加 |
|---|---|
| 对任何项目有用的通用组件 | components/ (核心图书馆) |
| 现有组件的特定域型 | 有组成的客户文件夹 |
| 独特的业务逻辑组件 | 客户端文件夹 |
| 页面模板/显示 | clients/[name]/templates/ |
创建客户端特定组件
-
在客户端文件夹中创建数字 :
clients/winning-11/organisms/GardenLayout.tsx clients/winning-11/organisms/GardenLayout.stories.tsx -
从核心库导入数字 :
import { Card, Badge } from '../../../components/atoms'; import { Grid } from '../../../components/molecules'; -
从客户端索引导出数字 :
// clients/winning-11/index.ts export * from './organisms/GardenLayout'; -
创建故事本故事数字 :
// GardenLayout.stories.tsx import type { Meta, StoryObj } from '@storybook/react'; import { GardenLayout } from './GardenLayout'; const meta: Meta<typeof GardenLayout> = { title: 'Clients/Winning-11/Organisms/GardenLayout', component: GardenLayout, }; export default meta;
客户端模板
模板显示针对客户端的完整页面布局. 它们表明:
- 组件如何组合
- 现实数据模式
- 特定品牌的样式
// clients/winning-11/templates/GardenDashboard.tsx
export const GardenDashboard = () => (
<PageLayout>
<Header />
<GardenStats />
<PlantGrid plants={mockPlants} />
</PageLayout>
);
同步到项目
生成客户端项目时, 将特定客户端组件复制 :
npm run generate schema.orb --client winning-11 --output ../projects/winning-11
此副本:
- 核心
components/图书馆 - 客户专用
clients/winning-11/文件夹 - 主题和钩子
发展
添加新组件
- 在适当类别中创建组件( E)
atoms/, (中文(简体) ),molecules/, (中文(简体) ),organisms/(中文(简体) ) - 创建相应的
.stories.tsx文件 - 从类别中导出
index.ts - 在故事书中校验
添加新主题
- 创建主题 CSS 在
themes/ - 遵循 CSS 变量的现有主题结构
- 添加导入到
themes/index.css - 添加到故事书主题选择器
添加特定域组件
- 添加域配置到
scripts/suggest-components.ts - 定义关键词和组件建议
- 用此域的图谋进行测试