ts-com-ui

Welcome to ts-com-ui 👋

💬前言

一个 Ts-React 应用的基础组件库，参考 ant-design 和慕课网张轩老师的 Typescript + React 高仿 Antd 从零到一打造自己的组件库，提供一整套开箱即用的组件，也是自己学习路上的一个实践，高度可定制化，对于像我一样的刚入门的小白是一个很好的参考项目。

本项目自行构思得出，由个人独立编写程序研究。

注：此项目纯属个人瞎搞，正常使用请选择ant-design官方客户端。

💪 项目目标

基本实现 ant-design 常用组件的开发

项目还在编写完善中

🚀 如何运行

node 版本 [12.13.0]

✨ 开发过程

# 克隆
git clone https://github.com/powerdong/react-ts-component-library.git

# 打开项目目录
cd react-ts-component-library

# 安装依赖
yarn

# 开启本地服务运行项目
yarn start

# 常用命令
yarn start // 运行项目

yarn test // 测试用例

yarn storybook // 运行在线文档

yarn build-story // 生成静态文档

yarn build // 项目打包

欢迎 star，欢迎 issue

👀 项目进度

上一次更新(2020-06-09)： 增加 Pagination 分页组件

最近一次更新(2020-06-13)： 增加 Select 选择组件

使用中有任何问题或建议，欢迎 Issue！

本项目在不断完善中，请大家拭目以待~

技术栈

👉 主要依赖

• React
• ES6
• TypeScript
• jest
• Sass
• ESLint
• storybook
• Travis CI/CD

👏 项目文档

文档地址

📣 目标功能

• [x] Button按钮
• [x] Icon图标
• [ ] Divider分割线
• [ ] Grid栅格
• [ ] Layout布局
• [ ] Space间距
• [ ] Affix固钉
• [ ] Breadcrumb面包屑
• [ ] Dropdown下拉菜单
• [x] Menu导航菜单
• [x] Pagination分页
• [ ] PageHeader页头
• [ ] Steps步骤条
• [x] AutoComplete自动完成
• [ ] Checkbox多选框
• [ ] Cascader级联选择
• [ ] DatePicker日期选择框
• [ ] Form表单
• [ ] InputNumber数字输入框
• [x] Input输入框
• [ ] Mentions提及
• [ ] Rate评分
• [ ] Radio单选框
• [ ] Switch开关
• [ ] Slider滑动输入条
• [ ] Select选择器
• [ ] TreeSelect树选择
• [ ] Transfer穿梭框
• [ ] TimePicker时间选择框
• [x] Upload上传
• [ ] Avatar头像
• [ ] Badge徽标数
• [ ] Comment评论
• [ ] Collapse折叠面板
• [ ] Carousel走马灯
• [ ] Card卡片
• [ ] Calendar日历
• [ ] Descriptions描述列表
• [ ] Empty空状态
• [ ] List列表
• [ ] Popover气泡卡片
• [ ] Statistic统计数值
• [ ] Tree树形控件
• [ ] Tooltip文字提示
• [ ] Timeline时间轴
• [ ] Tag标签
• [ ] Tabs标签页
• [ ] Table表格
• [ ] Alert警告提示
• [ ] Drawer抽屉
• [ ] Modal对话框
• [ ] Message全局提示
• [ ] Notification通知提醒框
• [ ] Progress进度条
• [ ] Popconfirm气泡确认框
• [ ] Result结果
• [ ] Spin加载中
• [ ] Skeleton骨架屏
• [ ] Anchor锚点
• [ ] BackTop回到顶部
• [ ] ConfigProvider全局化配置

📃 项目布局

.src
+-- components // 存放组件
+-- hooks // 自定义 hooks
+-- styles // 样式相关
+-- index.ts // 组件导出

本项目会长期更新，欢迎大家指出问题，共同学习

作者

👤 Lambda