设计系统

这个项目是克劳德·伯纳德工具上使用的设计系统

如何通过国家预防机制安装?

安装软件包

npm install @claudebernard/design-system

导入组件

导入组件有两种方法:

• 您可以同时导入所有组件, 这意味着您将导入您工程中的所有设计系统 .

import '@claudebernard/design-system';

• 您只能导入所需的组件, 例如 :

import '@claudebernard/design-system/button';

然后可以在您的工程中使用组件

进口CSS公用事业

设计系统提供一套CSS的实用类(类似于"靴子"),用于间隔,显示,弹性盒,文本和间隙. 导入独立样式表 :

import '@claudebernard/design-system/style/utilities.css';

公用设施也在设计系统组件内自动提供.

发展

开发服务器

运行 npm run storybook 要运行故事书。 导航到 http://localhost:6006/。如果您更改了任何源文件,应用程序将自动重新加载.

林特项目

运行 npm run lint 管理埃斯林特.

如何创建一个新的组件?

1. 在 src/components 带有组件名称
2. 创建三个文件 : src/components/your-component/your-component.ts, (中文(简体) ), src/components/your-component/your-component.spec.ts 财务报告和审定财务报表 src/components/your-component/your-component.scss 在此文件夹中
3. 创建新文件 src/components/your-component/index.ts 在此文件夹中导出您的组件
4. 添加组件导出到 src/index.ts 允许导入独有组件
5. 在 vite.config.ts
6. 添加组件导出到 package.json 允许导入独有组件

怎样创造新故事?

1. 创建新文件 src/components/your-component/your-component.stories.ts 包含您组件的故事, 并将自动导入到故事本

如何添加新图标 ?

1. 添加您的 svg 图标 src/icons/svg 文件夹
2. 填写 src/icons/index.ts 带有新图标信息的文件

如何添加新主题?

1. 添加您的新主题 src/themes 带有主题名称的文件夹(例如). src/themes/${your-theme-name}.scss(中文(简体) )
2. 将主题添加到 package.json 以允许导入独有的主题(例如). "./style/${your-theme-name}": "./dist/style/${your-theme-name}.css"(中文(简体) )
3. 将主题添加到 vite.config.ts 允许 vite 构建您的主题
4. 在故事书中添加您的主题 preview.js 允许故事书使用您的主题

版本、发行、出版

版本和放出在CI中以语义放出管理.

为了释放, 合并您的承诺 master 树枝.