@kqinfo/ui

凯桥 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

本地调试

启动调试

$ yarn dev

本地连接

$ yarn link

本地项目调试

$ yarn link @kqinfo/ui

编写测试

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

开发注意项

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