反应器
开源反应组件由多伊斯特制作.
看看我们的现场演示. 它包括目前实施的所有组件,外加一个现场游乐场,以便在不同州与它们互动.
如何使用反应器
您可以通过从 npm 安装来为您的项目添加反应器 :
npm install @doist/reactist
要导入代码中的组件 :
import { Loading } from '@doist/reactist'
//OR
import Loading from '@doist/reactist/dist/Loading'
您还需要在您的应用程序中装入反应器的 CSS 文件 。 例如:
<link rel="stylesheet" type="text/css" href="./node_modules/@doist/reactist/styles/Loading.css" />
如果您喜欢包含静态文件 抓取 从 dist 文件夹中修改构建。 。 。 .
<script src="./node_modules/@doist/reactist/dist/reactist.cjs.production.min.js"></script>
<link rel="stylesheet" type="text/css" href="./node_modules/@doist/reactist/styles/reactist.css" />
他们
反应师烤出一个光调色板(@doist/product-libraries-tokens改为: reactist.css。要使用阴暗或口音主题,请加载主题文件之一 Reactist再导出并切换其类于根元素:
<link rel="stylesheet" href="./node_modules/@doist/reactist/styles/tokens/<theme_name>.css" />
import '@doist/reactist/styles/tokens/<theme_name>.css'
然后设置匹配类 :root。每个主题文件设置自己的 color-scheme,所以你不需要自己宣布——下面一栏是得到的,而不是你设定的.
| 主题/ 文件名 | 颜色方案 | 类 |
|---|---|---|
td-light | light | 无 |
td-dark | dark | theme_dark |
td-blueberry | light | theme_blueberry |
td-blueberry-dark | dark | theme_blueberry_dark |
td-gold | light | theme_gold |
td-gold-dark | dark | theme_gold_dark |
td-kale | light | theme_kale |
td-kale-dark | dark | theme_kale_dark |
td-lavender | light | theme_lavender |
td-lavender-dark | dark | theme_lavender_dark |
td-moonstone | light | theme_moonstone |
td-moonstone-dark | dark | theme_moonstone_dark |
td-raspberry | light | theme_raspberry |
td-raspberry-dark | dark | theme_raspberry_dark |
td-tangerine | light | theme_tangerine |
td-tangerine-dark | dark | theme_tangerine_dark |
更改日志
你可以找到我们的更衣室 这里。 。 。 .
发展
我们利用 package.json是因为 engines 字段指定开发时要使用的节点/npm版本。 快速切换的最简单方法是通过 fnm 时。 。 。 .
值得注意的是,fnm可以在项目遇到一个时自动切换到指定的节点版本 .nvmrc 文档。 要做到这一点,使用 --use-on-cd 旗帜时 生成您的外壳配置脚本 fnm env。 。 。 .
Fnm安装后,克隆寄存器. 然后,切换到所需的节点版本,并运行它的设置任务:
git clone https://github.com/doist/reactist.git
cd reactist
fnm install
fnm use
npm run setup
设置任务将安装依赖性,并运行各种验证(linting,type check,测试).
我们为反应论者确定了两大发展模式。 首先,运行一个互动的故事本,并看到您在孤立环境中对一个组件所做的改变. 这对于开发新的组件尤其有帮助。 第二,改进现实应用中的现有组件.
创建新组件
利用新的组件模板生成能力简化了新组件的开发 弹出数字 :
npm run plop component
此命令将提示您提供创建新组件模板所需的全部信息 。 需要的最重要的信息是组件名称,即使作为短语也可以提供(例如"下拉选择"将生成一个 DropdownSelect 组件模板).
生成的源文件包括带有样本道具和样式的组件执行,外加一个小测试文件和故事本源文件.
您还需要通过在 顶级索引文件。 。 。 .
故事书
第一个开发模式运行 :
npm run storybook
在http://localhost:6006上, 你可以在现存故事的组件上脚踏实地,或者添加一个全新的.
在你的申请中
对于第二个开发模式,你可以杠杆 npm start:yalc首先,确保你有 yalc 全球安装:
npm install -g yalc
然后,在反应论寄存器中运行:
npm run start:yalc
这将发布反应器到 yalc 并观察变化.
在您的主机应用程序中, 您可以链接到您的本地反应器版本 :
cd ~/your-app
yalc add @doist/reactist
要取消修改,并从 npm 切换回反应器版本,请做以下操作:
cd ~/your-app
# restore the original reactist version
yalc remove @doist/reactist
# re-install reactist from npm
npm install
为了方便,你可以加一个 dev:reactist 您主机应用程序中的脚本可以自动添加并删除本地反应器版本的进程 :
{
// ...
scripts: {
// ...
'predev:reactist': 'yalc add @doist/reactist',
'dev:reactist': 'npm run dev', // or whatever your development script is
'postdev:reactist': 'yalc remove @doist/reactist && npm i',
},
}
然后,为了发展反反应主义者,只是运行:
npm run dev:reactist
发展技巧和技巧
独立于您运行以生产新建筑的开发( 如在提交 PR 之前) 运行 :
npm run build
说明: 这个会 没有 更新文件。 如果您想要更新您需要运行的文件 :
npm run build:storybook
测试
测试通过运行执行 :
npm run test
在开发过程中,您可能会发现持续进行测试是有益的。 此操作可运行 :
npm run test -- --watch
MacOS的用户可能需要更新监视器 brew install watchman 当遇到手表模式的麻烦时。 详情见此: https://github.com/facebook/jest/issues/1767 (中文(简体) )
色谱视觉回归测试
反应师依赖 色谱 在GitHub的CI步骤中 对我们组件进行视觉回归测试.
启用测试
为了进行这种测试,只需添加 chromatic: { disableSnapshot: false } 作为故事中的故事参数. 示例
<Canvas>
<Story
name="Main demo"
parameters={{
docs: { source: { type: 'code' } },
chromatic: { disableSnapshot: false },
}}
>
<BannerExamples theme="light" />
</Story>
</Canvas>
我们建议你让这些测试 在那些故事故事中, 有几种不同的变体 正在测试。 多数情况下.
审查测试
当你打开了GitHub PR,你会注意到"UI Review"和"UI Tests"的CI步骤.
- 点击"Details"将带入Chromatic UI(如果你还没有Chromatic账户,请使用您的GitHub账户注册).
- 现在您可以检讨并接受您的修改(或者回去修改您的代码).
- 乐取所取之变化时,须将所取之变化作"经".
释放
这个项目使用 语义释放 实现版本管理和软件包出版的自动化.
如何运作
-
使用 常规武器委员会数字 :
- 以下任何类型加上
!后缀(例如:.feat!:, (中文(简体) ),fix!:或一个BREAKING CHANGE:断开更改的页脚( 主要版本出错) feat:用于新特性(小版本起伏)fix:对于错误修正( patch 版本出错)perf:用于改进性能(patch版本起伏)refactor:用于重构代码test:用于添加/更新测试build:建筑物/依赖性变化docs:文件更改ci:cI 修改revert:退还先前的承付款chore:用于维护任务(注:这些未列入更改日志)
任何类型都可以带有可选范围,例如.
feat(button):或者说perf(tooltip)!:。 。 。 . - 以下任何类型加上
-
当公关合并为
main,则 软件包发布 工作流程运行和语义发布:- 读取合并承诺的常规承诺类型以确定版本的凸起
- 更新
CHANGELOG.md, (中文(简体) ),package.json,以及package-lock.json,并让他们回到main - 创建新标签和 GitHub 发布
- 将软件包发布到 npm 和 GitHub 软件包
合并只有在包含一个上面标有版本凸起的类型时才会触发发行;否则将不发布.
在 GitHub 页面上主持的故事书,每次推到 main如果有问题,请尝试手动操作 动作设置。 。 。 .
谢谢
感谢 色谱 提供视觉测试平台 帮助我们审查UI的变化 并捕捉视觉回归.