@caspeo/casper-ui-图书馆
卡斯克的UI组件库,建于顶部 查克拉乌伊。 。 。 .
👉 使用量文档可见于 https://caspeco.github.io/casper-ui-library * 互联网档案馆的存檔,存档日期2013-12-22* 联合国
地方发展
为了建造这个项目,你需要 节点.js 已安装.
图标
所有命令都从工程的根部,从终端运行.
| 命令 | 说明 |
|---|---|
npm install | 安装依赖关系 . |
npm run dev | 构建整个库的本地开发版本,编译为单一的.js文件来改进HMR. 当文件内容发生变化时自动重建. |
npm run build | 在 npm 上运出时构建库 。 在文件更改时不自动重建, 但是您仍然可以使用此构建输出来验证您在文档网站或其他工程中的更改 . |
cd ../docs && npm run dev | 启动文档网站。 通常您想要在 Dev 模式下运行此同时运行库, 所以为此打开一个新的终端 。 见 /文档 需要更多信息. |
npm run test | 运行单元测试. |
npm run test:visual | 在多克使用 Playwright 进行视觉回归测试. 自动开始/停止 Docker 容器 . |
npm run test:visual:ui | 打开 HTML 报告查看器以获取视觉测试结果. |
npm run test:visual:update | 更新视觉回归基线截图 。 故意修改用户界面后运行此功能 . |
npm run lint | 运行嵌入 @ caspeco/ slint- config。如果您使用推荐的 ESLint VSCode 扩展 您可以直接在编辑器中看到您的 eslint 错误, 而无需运行此操作 . |
npm run prettier:fix | 重写所有文件 @ caspeco/ prettier- config。如果您使用推荐的 Pretier VSCode 扩展 您可以在文件保存中自动格式化您的文件. |
npm run chakra:types | 为主题生成 Chakra UI 类型定义 。 如果您修改了组件变体, 想要消除 TS 错误, 例如, 请运行此功能 。 自动发生 npm install。 。 。 . |
npm run test:all | 按顺序运行 CI 任务运行的每个检查 : prettier, (中文(简体) ), lint, (中文(简体) ), tsc, (中文(简体) ), knip 财务报告和审定财务报表 test。在第一次失败时停止。 需要 Playwright 浏览器(npm exec -- playwright install chromium用于单位测试. |
在另一个工程中本地预览
- 构建本地开发版(见上文).
- 在消耗的应用,运行
npm install --no-save ./relative/path/to/this/directory(没有后面的斜线).- 例如:
npm install --no-save ../../casper-ui-library/packages/casper-ui-library
- 例如:
现在,当您在组件库中进行更改时,它应该自动重建,消耗的app的HMR应该踢入并重新加载页面(由于整个库被重建,保存状态是不可能的).
要再次解开链接,你只需要运行 npm install 在消费应用。 如果失败, 您可能需要删除 node_modules 先说.
如果您得到关于重复反应版本的错误, 请确定这是在 vite.config.ts 在消费应用程序中:
import path from "node:path";
export default defineConfig({
// ...
resolve: {
alias: {
react: path.resolve("./node_modules/react"),
},
},
});
视觉回归测试
视觉回归测试通过将组件变体的截图与承诺的基线进行比较,捕获无意的UI变化 __screenshots__/。它们与Playwright在多克运行,以确保在不同的开发环境和CI之间一致的渲染.
所需资源:必须安装并运行多克.
正在测试数字 :
npm run test:visual- 进行所有视觉测试npm run test:visual:ui- 打开 HTML 报告查看器npm run test:visual:update- 在有意UI变化后更新基线截图
[TIP] CI失败了,但是本地通行证?
- 转到
visual-testsgitHub 动作中的任务- 下载并提取 HTML 文物
Upload visual test report步骤- 运行
npx vite preview --outDir .在提取目录中查看 CI 的 diff 报告
你可能需要调整 像素匹配比较器选项 如果您看到假阳性是由于反异形或子像素渲染差异。 例子见现有测试.
捐款
- 确保您的存储器是最新的.
git pull - 创建新分支, 并在此进行更改 。 最好使用包含任何相关的Jira问题和一些简短的描述性名称的分支名称.
git checkout -b UTF-837-add-checkbox-component - 做你的改变。 别碰
version输入package.json,CI处理它. - 打开 a 拉动请求 使用模板并指定一个审查者.
- 如果更改应予放行,请添加 一个 标签
bump-patch, (中文(简体) ),bump-minor或者说bump-major(随后) 语义版本) (中文(简体) ). 该版本只反映API的改变(例如去除道具 → MAJOR,再加道具 → MINOR,没有公共API的改变 → PATCH). 用户界面更改为 没有 API改变. - 如果 PR 对 UI 进行了重大修改(例如更改所有按钮的大小),则在 最关键频道。 。 。 .
- 经批准后,合并PR. 如果它有一个凸起的标签,CI 撞出版本,承诺它
main并出版到npm.@caspeco/casper-ui-css以同样的方式释放bump-css-*标签。 文件网站总是被重建.
如何添加新图标
-
从图像导出 在那个 图像图标文档选择 文件 — 导出 图标导出为 特别工作组。 。 。 .
-
清洁图标资产 从寄存器根运行
npm run clean:icons删除在lib/components/icon/assets和生成的 React 图标组件lib/components/icon/icons。 。 。 . -
更新资产 丢入输出的 SVG 。 验证更改
git diff。 。 。 . -
生成组件 从寄存器根运行
npm run generate:icons生成每个图标的 React 组件. -
格式生成反应图标组件 生成的图标组件初始格式可能不正确 。 如果这样的话,就快跑
npm run prettier:fix。 。 。 .