# 凯桥 UI

[![NPM version][npm-image]][npm-url] [![Test coverage][codecov-image]][codecov-url] [![npm download][download-image]][download-url]

[npm-image]: https://img.shields.io/npm/v/@kqinfo/ui.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@kqinfo/ui
[codecov-image]: https://codecov.io/gh/cqkqinfo/ui/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/cqkqinfo/ui
[download-image]: https://img.shields.io/npm/dm/@kqinfo/ui.svg?style=flat-square
[download-url]: https://www.npmjs.com/package/@kqinfo/ui

## 使用

```bash
$ yarn add @kqinfo/ui
```

## 按需加载

安装`babel-plugin-import`插件

```bash
$ yarn add babel-plugin-import -D
```

修改`babel.config.js`文件

```diff
// babel.config.js
module.exports = {
  plugins: [
+    [
+      'import',
+      {
+        libraryDirectory: 'es',
+        libraryName: '@kqinfo/ui'
+      },
+      '@kqinfo/ui'
+    ]
  ]
};

```

## 定制主题

修改`remax.config.js`文件

```diff
module.exports = {
  ...
-  plugins: [less()],
+  plugins: [
+   less({
+     lessOptions: {
+       modifyVars: { '@brand-primary': '#2780d9', '@brand-attract': '#ff9d46' },
+       javascriptEnabled: true
+     }
+   })
+ ]
  ...
};
```

修改`app.tsx`文件

```diff
+import { ConfigProvider } from '@kqinfo/ui';

const App = (props) => {
-  return props.children;
+  return <ConfigProvider brandAttract={'#ff9d46'} brandPrimary={'#2780d9'}>{props.children}</ConfigProvider>;
};
```

## Icon 更新

更新 ali 图标库后，将其地址复制到根目录下 iconfont 相关的 json 中替换。然后执行 yarn icon

## 使用源安装

在项目根目录添加`.npmrc`文件

```
canvas_binary_host_mirror=https://npm.taobao.org/mirrors/canvas/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver/
sentrycli_cdnurl=https://cdn.npm.taobao.org/dist/sentry-cli
cypress_download_mirror=https://npm.taobao.org/mirrors/cypress/
```

用`yarn`安装的话添加`.yarnrc`文件

```
canvas_binary_host_mirror: https://npm.taobao.org/mirrors/canvas
registry: https://registry.npm.taobao.org
ENTRYCLI_CDNURL: https://cdn.npm.taobao.org/dist/sentry-cli
sentrycli_cdnurl: https://cdn.npm.taobao.org/dist/sentry-cli
```

## 开发

安装依赖

```bash
$ yarn
```

启动服务

```bash
$ yarn start
```

## 本地调试

建议使用 yalc 进行本地调试

### yalc 说明

- 简介：`yalc` 是用于本地包调试的轻量“私有仓库”，相比 `yarn link`/`npm link` 更稳定，避免符号链接带来的解析问题
- 安装：使用`npx yalc` 或全局安装 `npm i -g yalc` 或 `yarn global add yalc`
- 常用命令：
  - 在组件库中：`yalc publish` 将当前包发布到本地存储
  - 在业务项目中：`yalc add @kqinfo/ui` 添加依赖到当前项目
  - 组件库修改后：`yalc push` 将最新变更推送到所有已添加依赖的项目
  - 业务项目移除：`yalc remove @kqinfo/ui` 从当前项目中移除本地依赖
  - 业务项目更新：`yalc update` 拉取最近一次发布的版本
- 注意：
  - `yalc` 会在使用项目创建 `.yalc` 目录并维护 `yalc.lock` 用于版本跟踪
  - 可以在`.gitignore`中添加`.yalc`目录，避免提交到版本控制
  - 如需恢复到远程 npm 版本，先在业务项目执行 `yalc remove @kqinfo/ui`，再通过正常的包管理器安装所需版本
  - 如果遇到不生效的情况，尝试先执行`yalc remove @kqinfo/ui`，再重新添加依赖，或者`rm -rf node_modules/.cache`

启动调试

```bash
$ yarn dev
```

本地发布到 yalc

```bash
$ yalc publish
```

在本地项目中添加依赖

```bash
$ yalc add @kqinfo/ui
```

修改后更新到本地项目

```bash
$ yalc push
```

## 版本发布

- 组件库版本发布基于`release-it`，配置在`.release-it.json`中，通过 git-cliff 自动生成`CHANGELOG.md`
- 执行`yarn release`发布版本，会自动更新`CHANGELOG.md`和`package.json`版本号并创建版本号 tag
- 创建 tag 后，会触发 gitlab-ci 自动发布到 npm registry 并更新文档站

## 编写测试

- 相关库 [jest](https://jestjs.io/zh-Hans/docs/getting-started) 、[testing-library](https://testing-library.com/docs/react-testing-library/intro)
- [如何编写测试](https://segmentfault.com/a/1190000022054307)

## 开发注意项

- 先`fork`到自己名下，再提`merge request`
- 样式不要嵌套
- 样式用`less-modules`
- 表单组件暴露`value`和`onChange`
- 不要用图片当`icon`
- 尽量暴露节点的`class`，缩写用`cls`，比如暴露子项类名就用`itemCls`
- 例子尽量写多点