sright-ui v1.9.6

欢迎来到 Sright-UI 组件库

用途

该组件库目前主要服务于三个目标：视然产品线；耦合视然后台业务；当做普通组件库使用。

开发须知

1. 技术栈：该组件库采用的技术栈为：React + TypeScript + Hock + StoryBook + Jest。
2. 依赖库：axios、Lodash、moment。
3. 开发组件库做本地调试时，建议使用 yarn link 方式。该方式可以方便组件库在迭代过程中快速反应到开发环境；无需打包；
4. 该库会依赖于Ant Design中的组件，引用的项目中需安装Ant Design 和 ; 组件库中已经采用tree-shaking的方式。对用到的ant组件进行了按需引用和打包;
5. Sright-UI 的JS代码默认支持基于ES modules 的 tree shaking。支持按需引用和全局引用两种模式

开发模式下的具体步骤

1. 本地调试组件库步骤，（也可以直接拷贝组件库包到项目中）
   • 在组件库（打包后的sright-ui内）执行 yarn link 生成link链接。
   • 在项目中执行 yarn link sright-ui
   • 在项目中的package.json; 进行 sright-ui 的引用
2. 如遇到3.0+ Hock版本不一致的问题，需要在本地组件库的位置执行yarn link应用路径/node_models/react。
3. yarn link引入js方式;
   • 支持按需引用 import AntInput from "sright-ui/ant-components/AntInput/index";
   • 引入全局库 import {Button} from "sright-ui"
4. yarn link引入css方式;
   • 引入CSS。 import "sright-ui/index.css"
   • 或者引入less import "sright-ui/styles/index.less"
5. 每次本地组件库有更新需要先执行build命令，相应的项目才能及时生效。

线上引入库的方式

yarn add sright-ui antd react-scrollbars-custom

1. Upload from "sright-ui/components/Upload/index";
2. import "sright-ui/styles/index.less"

代码风格与单元测试

• 代码风格已经配置在项目中的eslint中，采用eslint（react-app）+ prettier（默认）的方式。
• 单元测试采用jest为基础；可引用@testing-library/react库，来对React进行测试。

组件划分方式以及目录约定

组件库目前分为3种组件，基于ant的二次封装组件(ant-components)，纯业务组件(bs-components)，自研组件（components支持业务模式,需要二次封装到业务组件中）。

• 二次封装组件: 在通过二次封装能满足UI组件的情况下，优先选择二次封装。二次封装主要的实现模式采取高阶组件，反向继承，渲染劫持，装饰器设计模式。
• 自研组件: 在无法满足UI设计的情况下，需要自行开发。优先选用函数组件组合功能Hock模式（tools目录）。
• 业务组件: 是基于上两种UI组件的模式上封装出来的组件，内置业务接口。主要实现模式采用函数组件+业务Hock。
• Hock: 分为功能型和业务型。功能型主要服务于DOM，业务型主要内置后台业务逻辑。

业务组件token规范

1. 组件库中的写死token 相当于开发环境的万能token; 供前端组件库调试用；时效性为一个月；失效后需要及时更换；
2. 该 token 与后台约定：数字云项目线只要是。不同的token就要新起二级域名； 2.1 保证不同域名下，组件库获取到的token都是该域名下项目通用的； 2.2 保证每个项目中的组件库请求的都是一个token，不会出现同一个项目，不同组件具有不同token; 2.3 应灵伟签字画押 2020年8月4日；
3. 前端调用项目需要统一将 token 写入到 localStorage中 key 为 x-token;

图标库规范

• 该图标库依赖 iconfront，项目中所需要的图标必须入 iconfront。
• 规范:
  1. 默认图片库里定义了 lg md base sm 4种类型的大小；当个别组件对图标要求不满足的情况下，需要自己在该组件作用域下复写size
  2. 默认库里并不定义图标颜色，需要在各自组件里，重写颜色例如 .input { .srIcon { color:red } }
  3. 一些通用的图标，比如关闭按钮的size等, 动态旋转箭头等。会在icon组件中声明通用类，进行样式定义; 还有一种情况，ant design 内部有的组件 通过渲染劫持，把你覆盖上去的ClassNames重新赋值，比如 input.password 就需要在通用类手动覆盖一下；
• 使用步骤:
  1. 登录iconfront 找寻图标的名称；（需要先和UI管理者要权限，点击图标下方的复制代码）
  2. 引入SrIcon组件 按照props 进行传递
  3. iconfront地址

字体库规范

• 非常规字体，UI会从iconfront挑选在线字体。根据用到的文字生成在线引用代码，进行css样式引用。iconfront在线字体

换肤规则

目前换肤规则一共分为两种方式，组件库直接输出自定义颜色皮肤包，项目中通过less-loader进行样式覆盖.

1. 颜色介绍: 目前组件库分为三种颜色的定义，品牌色（@primary），中性色(@neutral-gray-x)，基础色盘(_colors.less)。
2. 皮肤的设定由UI决定，控制的粒度也由UI来决定。通常只需要设置@primary品牌颜色即可。
3. 组件库换肤配置,通过定义多套_colors或者直接修改_variables.less中的颜色粒度即可。
4. 项目换肤配置 umi : 只需要在 .umirc.ts 中设置theme 属性即可
5. 项目换肤配置 react create app: 需要项目执行eject，然后开启less配置，通过 modifyVars配置，在编译阶段进行换肤替换。具体配置实力可参考StoryBook中的换肤模式(main.js文件)。
6. 运行时换肤目前仅提供路由式换肤。

plop模板

目前提供4种快速创建组件的模板: ant，ant-size，bs-components，components. 在创建带有尺寸的二次封装ant组件情况下使用ant-size模板。其余都对应相应的组件模板。
运行命令:___npm run plop___   
名称:需要和ant中的名称一致比如ant中的switch组件，在模板中输入的名称就是ant switch

输出模块

1. 采用esmoudle模式进行组件库输出，支持tree-shaking;
2. 不提供umd模式组件库引用方式。

主要命令

yarn storybook

运行StoryBook开发模式，所有组件库内的调试都在此模式中。

yarn build

打包库。

yarn build-storybook

打包storybook静态资源。

npm publish

上传到Npm。

特别鸣谢:文野、郑骋、余乾。