凯桥 UI

使用

$ yarn add @kqinfo/ui

按需加载

安装babel-plugin-import插件

$ yarn add babel-plugin-import -D

修改babel.config.js文件

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

定制主题

修改remax.config.js文件

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

修改app.tsx文件

+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

开发

安装依赖

$ yarn

启动服务

$ 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

启动调试

$ yarn dev

本地发布到 yalc

$ yalc publish

在本地项目中添加依赖

$ yalc add @kqinfo/ui

修改后更新到本地项目

$ yalc push

版本发布

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

编写测试

• 相关库 jest 、testing-library
• 如何编写测试

开发注意项

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