along-components v0.5.33

@sudofe/components

| FE components for sudo fe group.

how to start

npm i
npm start # use vite for dev, visit <your_ip>:3000

封装组件的一些基本规则(欢迎讨论)

• 项目结构
  • 基础组件 都放在 src/SUDO/XX 下, XX 下至少包含 index.tsx 与 index.less 两个文件, 用于封装组件, 其他该组件相关的功能也放统一文件夹下
    • export 时 组件名为 SudoXxx
    • 主要按照 UI 规范 中的内容实现
    • 优先考虑基于 antd 进行特化
      • 注意封装后尽量保持 antd 原有的 feature
    • SUDO 下的组件需要在 <project_path>/test 中添加样例, 方便查看组件效果与使用方式.
  • 一些与特定业务逻辑绑定更深的组件, 直接放 src 下, 还是用文件夹来包含, 不推荐直接创建 XX.tsx 来封装组件

• 公共部分

  • 我们目前使用 less 变量来统一主题, 如遇到颜色相关的 css 变量, 优先使用 src/style/variables.less 中的变量处理, eg:

  • // less file
    @import url('../../style/variables.less') .demo {
      color: @primary-color;
    }

  • // ts file
    import Variables from '../../style/variables.less'
    
    const color = Variables['primary-color']

  • 注意: src/style/style.less 是之前记录 less 变量的文件, 将会在之后的版本中去掉, 请不要使用

• how to test

  • 支持基于 jest + enzyme 的 UT, 在 __tests__ 文件夹下创建 XX.test.tsx 进行编写
  • 在 <project_path>/test/App.tsx 中添加对应的 test, 在当前目录启动 npm start 之后查看 3000 端口浏览组件效果

life saver

• vite : variable xxx is not defined
  • less 解析问题, 查看变量是否形如 rgba (1,1,1,1) , 删掉 rgba 后的空格即可识别, 如果 prettier format 之后还原了, 可以在 XX:rgba () 的冒号后面加上一个空格