open-index/open-npm huggingface dataset:
npm package: @sudofe/cli
Description: CLI for sudo fe group.
Latest version: 0.5.6

# @sudofe/cli

## Usage

```shell
npm install @sudofe/cli -g # 全局安装

sudo-cli watch # 监听文件变化并执行 npm run build
sudo-cli build:lib # 打包npm lib的通用方法
sudo-cli test # use jest for test
sudo-cli create:project my-app # 创建一个名为my-app的前端项目
```

## Notice

目前仅支持在 project 根目录执行

## TODO

- [ ] watch 支持任意后续命令
- [ ] start:lib 命令
- [ ] start 命令 (需要统一前端项目技术栈)
npm package: @sudofe/components
Description: Components for sudo fe group.
Latest version: 0.5.44

# @sudofe/components

| FE components for sudo fe group.

## how to start

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

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

- 项目结构
  - 基础组件 都放在 `src/SUDO/XX` 下, `XX` 下至少包含 `index.tsx` 与 `index.less` 两个文件, 用于封装组件, 其他该组件相关的功能也放统一文件夹下
    - export 时 组件名为 `SudoXxx`
    - 主要按照 [UI 规范](https://lanhuapp.com/web/#/item/project/stage?pid=71c08c46-f949-432a-ac92-e53722e8940e&image_id=3fd7ca08-c8c1-47d7-aa0f-b9e401382e07&tid=2bb2bdcb-3625-4156-85ae-918ed3caedd4) 中的内容实现
    - 优先考虑基于 antd 进行特化
      - 注意封装后尽量保持 antd 原有的 feature
    - SUDO 下的组件需要在 `<project_path>/test` 中添加样例, 方便查看组件效果与使用方式.
  - 一些与特定业务逻辑绑定更深的组件, 直接放 src 下, 还是用文件夹来包含, 不推荐直接创建 `XX.tsx` 来封装组件
- 公共部分

  - 我们目前使用 less 变量来统一主题, 如遇到颜色相关的 css 变量, 优先使用 `src/style/variables.less` 中的变量处理, eg:
  - ```less
    // less file
    @import url('../../style/variables.less') .demo {
      color: @primary-color;
    }
    ```
  - ```typescript
    // 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 ()` 的冒号后面加上一个空格