介绍
Raaghu 设计系统是一个全面、可扩展且高度文档化的基于 React 的组件库。它提供统一的 UI 组件、设计令牌和主题功能，用于构建一致、无障碍且高性能的 Web 应用程序。
主要特性
- 组件库： 可重用、可自定义的 React 组件（按钮、图表、选择器、工具栏等），组织在
raaghu-components和raaghu-elements下。 - 设计令牌和主题： 用于颜色、间距、排版等的集中式 SCSS 变量和 CSS 自定义属性。支持轻松的主题切换（浅色、深色等）。
- 性能： 内置性能监控、包分析和优化（tree-shaking、代码分割、记忆化、虚拟化）。
- 无障碍性： 符合 WCAG 2.1 AA 标准，支持键盘导航、ARIA 支持、颜色对比度和焦点管理。
- 本地化 (i18n)： 支持多种语言的国际化，RTL、复数化和上下文感知的翻译。
- 文档： 关于架构、CSS、主题、本地化、性能和测试的广泛指南。
- 自动化工具： 用于生成 SCSS、更新主题变量和维护一致性的脚本。
项目结构
- raaghu-components 和 raaghu-elements： 所有 UI 组件的源代码。
- public： 静态资源。
- utils： 实用函数和辅助工具。
- package.json, tsconfig.json, vite.config.ts： 项目配置文件。
开发工作流
- 组件独立开发，使用 Storybook 记录，并测试无障碍性和性能。
- SCSS 文件对所有样式使用设计令牌，确保一致性和轻松的主题化。
- 自动化脚本有助于高效维护和扩展系统。
开发者快速开始
- 阅读 docs 文件夹中的架构概述和 CSS 指南。
- 遵循组件结构和命名约定。
- 对所有样式使用设计令牌和主题变量。
- 在构建时测试无障碍性和性能。