@arbor-education/design-system. 组件
用于Arbor设计系统的React组件库. 组件用TypeScript来建造,用Sass来作风格,在"故事书"中被开发出,并用Vitest来测试. 该图书馆为联合王国各地数百万学生和教育工作者服务——小心处理.
释放
可供安装的设计系统的最新版本是:
故事书
该组件库在"故事书"中被记录并预览.
制作故事书 (在每次推力上建造) main:
https://main--6aad454d6baef787355e085a.chromatic.com/ (中文(中国大陆) )
每分钟 故事书预览:每个拉出请求都会自动触发一个色素构建. 一旦完成,一个bot会评论你的PR,同时链接到故事本预览和该分支的Chromatic视觉diff.
在端口6006启动开发服务器:
yarn storybook
要运行的故事测试:
yarn test:storybook
正在完成软件包
如果你要把图书馆整合到一个消费项目中,请查看"聚合"指南:
本地设置
先决条件
步骤
nvm use
yarn install
yarn storybook
故事书将在您的浏览器中构建并打开, 热重装可开发 .
图标
发展
| 命令 | 说明 |
|---|---|
yarn storybook | 在端口启动 Storybook dev 服务器 6006 |
yarn watch | 监视模式——在变化中重建并推向雅尔克消费者 |
大楼
| 命令 | 说明 |
|---|---|
yarn build | 全面生产建设 (TypeScript + tsc-alias + Sass) |
yarn tsc | 只有脚本编译类型 |
yarn check-types | 类型检查而不排放文件 |
测试
| 命令 | 说明 |
|---|---|
yarn test | 以监视模式运行维特 |
yarn test:coverage | 使用覆盖报告进行测试 |
线性
| 命令 | 说明 |
|---|---|
yarn style-lint | 有样式的 Lint SCSS 文件 |
ESLint在已上演的TypeScript文件上通过git承诺上的lint-staged自动运行.
创建新组件
使用脚手架脚本生成新组件所需的全部文件 :
yarn create-component <ComponentName>
这创造了 Component.tsx, (中文(简体) ), Component.test.tsx, (中文(简体) ), Component.stories.tsx,以及 component.scss,并自动添加导出到 src/index.ts 财务报告和审定财务报表 src/index.scss。 。 。 .
具有消费项目的地方发展
此库使用 雅尔克语 用于本地链接.
第一次设置 在全球安装Yalc:
npm i yalc -g
将图书馆连接到一个消费者项目:
# In this repo — build and publish to the local Yalc store
yarn build
yalc publish
# In the consumer project — add the local package
yalc add @arbor-education/design-system.components
以热更新进行积极开发中,使用监视模式代替:
# In this repo — automatically rebuilds and pushes to Yalc on file changes
yarn watch
版本管理
此库使用 更改 用于版本和更改日志生成.
如果您的更改会影响公共 API( 新组件, 更改道具, 删除导出), 在打开您的 PR 之前创建一个更改器 :
yarn changeset
捐款
在打开公关前,请阅读 捐款额。要点:
- 一个公关,一个事情——如果标题需要"和"或"还有",就把它分开
- 将有意义的代码 diff 保留在400行以下
- 所有测试都必须通过(
yarn test:coverage(中文(简体) ) - 所有类型检查都必须通过( A)
yarn check-types(中文(简体) ) - 使用 PR 模板—— 填写每个部分