Radix UI 设计系统项目教程

Radix UI 设计系统项目教程

design-systemAn extensive design system for building high-quality websites and web apps. Maintained and used by @WorkOS.项目地址:https://gitcode.com/gh_mirrors/des/design-system

项目的目录结构及介绍

Radix UI 设计系统项目的目录结构如下：

radix-ui/
├── .github/
├── .storybook/
├── docs/
├── packages/
│   ├── radix-ui/
│   │   ├── components/
│   │   ├── icons/
│   │   ├── styles/
│   │   ├── utils/
│   │   └── index.ts
│   └── ...
├── scripts/
├── .gitignore
├── .prettierrc
├── lerna.json
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

• .github/: 包含 GitHub 相关的配置文件，如 GitHub Actions 的工作流配置。
• .storybook/: 包含 Storybook 的配置文件，用于组件的文档和演示。
• docs/: 包含项目的文档文件，通常是 Markdown 格式。
• packages/: 包含项目的各个子包，每个子包都有自己的组件、图标、样式和工具函数。
  • radix-ui/: 核心包，包含组件、图标、样式和工具函数。
    • components/: 包含各个 UI 组件的实现。
    • icons/: 包含图标组件的实现。
    • styles/: 包含全局样式和主题配置。
    • utils/: 包含工具函数和辅助方法。
    • index.ts: 导出所有组件和工具函数的入口文件。
• scripts/: 包含项目的脚本文件，如构建、测试和发布脚本。
• .gitignore: 指定 Git 忽略的文件和目录。
• .prettierrc: 指定 Prettier 代码格式化的配置。
• lerna.json: 指定 Lerna 多包管理的配置。
• package.json: 项目的依赖和脚本配置。
• README.md: 项目的介绍和使用说明。
• tsconfig.json: TypeScript 的配置文件。

项目的启动文件介绍

Radix UI 设计系统的启动文件主要是 package.json 中的脚本配置。以下是一些常用的启动脚本：

{
  "scripts": {
    "start": "lerna run start --stream",
    "build": "lerna run build --stream",
    "test": "lerna run test --stream",
    "lint": "lerna run lint --stream",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

启动脚本介绍

• start: 启动所有子包的开发服务器。
• build: 构建所有子包的发布版本。
• test: 运行所有子包的测试脚本。
• lint: 运行所有子包的代码风格检查。
• storybook: 启动 Storybook 服务器，用于组件的文档和演示。
• build-storybook: 构建 Storybook 的静态站点。

项目的配置文件介绍

Radix UI 设计系统的主要配置文件包括 lerna.json、tsconfig.json 和 .prettierrc。

lerna.json

lerna.json 文件用于配置 Lerna 多包管理工具，以下是一个示例配置：

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译选项，以下是一个示例配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [
    "src/**/*"
  ]
}

.prettierrc

.prettierrc 文件用于配置 Prettier 代码格式化

design-systemAn extensive design system for building high-quality websites and web apps. Maintained and used by @WorkOS.项目地址:https://gitcode.com/gh_mirrors/des/design-system