@qiejs/rui v0.0.16

rui

基于 React、Antd 扩展的 UI 组件库

在线文档

简介

@qiejs/rui 是依据业务发展，扩展出来的 UI 组件库，有在 antd 基础上扩展的组件，也有基于一些开源插件封装的组件，组件类型偏见业务场景。

特性

• 支持 TypeScript
• 支持 单元测试 Jest + @testing-library/react
• 支持 less
• 支持 eslint & prettier
• 支持 react-app-rewired
• 基于 umijs/father 完成打包，可使用 cjs、esm 和 umd 三种格式的引用
• 支持 mdx 文档

依赖库的版本

• react: 16.x
• antd: 3.16.16

文档

安装

按需使用

交流与反馈

计划

正在开发的组件列表：

• CopyToClipboard 复制
• Description 数据项展示
• QRCodeViewer 二维码展示
• SearchSelect 查询输入
• StateTag 状态标签
• XSelect 下拉选择器
• XTable 扩展的 Table
• SearchForm 查询表单
• BgImg 背景图
• XUpload 文件上传
• NumberCounter 数字滚动
• Countdown 倒计时
• VideoUpload 视频上传(点播视频分片上传)
• VideoPlayer 视频播放
• AudioPlayer 音频播放
• BraftEditor 富文本编辑器
• TextEllipsis 文本省略

License

MIT

参考

xu_ui dantd

几个要注意的地方

组件内不要引用 less 或 css 文件

1. 测试框架不支持样式引入
2. 不便于管理样式的依赖

UI 组件在实际项目使用时，组件 js 与样式分开引用，可使用 babel-plugin-import 插件

import { Alert } from '@qiejs/rui';

// =>
import Alert from '@qiejs/rui/es/alert';
import '@qiejs/rui/es/alert/style';

项目配置

.eslintrc.js

.prettierrc.js

.stylelintrc.js

.commitlintrc.js

.fatherrc.js

.umirc.js

tsconfig.json

• JS 编码规范 使用 @umijs/fabric 中的 eslint 与 prettier
• 样式书写规范 使用 @umijs/fabric 中的 stylelint
• Commit 规范 husky 提交之前的勾子，lint-staged 对暂存中的代码进行检查
• Changelog 日志生成
• Doc 生成 dumi
• Test 组件测试
• 组件打包 father
• 发布到 gh-pages
• 发布流程标准化
• 快速生成组件模板

限制 commit 信息格式

yarn add @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog --dev