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

文档

安装

按需使用

交流与反馈

计划

正在开发的组件列表：

• [x] CopyToClipboard 复制
• [x] Description 数据项展示
• [x] QRCodeViewer 二维码展示
• [x] SearchSelect 查询输入
• [x] StateTag 状态标签
• [x] XSelect 下拉选择器
• [x] XTable 扩展的 Table
• [x] SearchForm 查询表单
• [x] BgImg 背景图
• [x] 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