仿Antd组件库

TypeScript + React + Sass + Jest + Storybook/

组件开发流程

主体代码

样式文件

storys文件

test文件

组件库样式变量分类

基础颜色系统

字体系统

表单

按钮

边框和阴影

可配置开关

添加Normalize.css

改为scss样式 styles/_reboots.scss

将原有的变量替换为新定义的变量

添加classnames工具

图标解决方案

SVG： 完全可控 即取既用 Bug少

使用fontawesome组件库

安装： yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/free-solid-svg-icons yarn add @fortawesome/react-fontawesome

使用： // 引入图标库 import { library } from '@fortawesome/fontawesome-svg-core' // 引入全部图标 import { fas } from '@fortawesome/free-solid-svg-icons' // 在库里添所有图标 就可以引用了 library.add(fas)

动画效果

一般的动画：css简单 性能好 但是一些复杂动画无法实现

react动画库：react transition group

安装： yarn add react-transition-group

实现过程

enter => (添加动画效果 force a reflow) enter-active => (自定义timeout) => enter-done

exit => (添加动画效果 force a reflow) exit-active => (自定义timeout) => exit-done

动画效果封装成组件库

  <CSSTransition
        in={open}
        timeout={300}
        classNames="my-node"
        appear
        unmountOnExit
  >
        {node}
  </CSSTransition>

组件化封装成：

  <Transition
        in={open}
        timeout={300}
        <!-- 字符串自变量 (可被className覆盖) -->
        animation="zoom-in-top"
  >
        {node}
  </Transition> 

组件开发展示工具

分开展示各个组件不同属性下的状态

能追踪组件的行为并且具有属性调试功能

可以为组件自动生成文档和属性列表

安装storybook： cd my-project-directory npx -p @storybook/cli sb init

添加addon-info装饰器 用来自动生成源码展示等 yarn add @storybook/addon-info yarn add @type ...

自动生成文档

  yarn add react-docgen-typescript-loader

Autocompeleted和Input组件

Autocompeleted要有搜索框自动补全功能

input样式

基本input

不同大小

disabled

右侧带图标

带前缀(http://)后缀(@qq.com)

自动补全功能

需求分析： <Input disabled size="lg|sm" icon="fontawesome支持的图标" prepand="input 前缀, string 或者 ReactElement" append="input 后缀, string 或者 ReactElement" {...restProps} 支持其他所有的HTMLInput属性 />