npm package: @nefficiency/component
Description: ## Feature
Latest version: 0.0.8

# docs

## Feature

- `npm start`：本地开发环境
- `npm run start:ep`：本地开发环境
- `npm run build`：构建用于发布到 npm 的包
- `npm run test`：组件测试
- `npm publish`：发布 npm 包

### TODO

- 统一的构建环境（Docker）;
- 自动化的 CI/CD 流程及能力提供（静态代码扫描、单元测试、构建、发布 npm 包）；

## 业务中使用

```tsx
import React from 'react';
import '@nefficiency/component/dist/style/ned.css'; // 一般在业务顶层引入，避免重复引入
import { Button, ConfigProvider } from '@nefficiency/component';

const App: React.FC = () => {
  return (
    <ConfigProvider>
      <Button>点击按钮</Button>
    </ConfigProvider>
  );
};

export default App;
```

## 工程规范

### 目录约定

```bash
.
├── src # 组件所在目录
...
├──── Component ## 组件
├────── index.tsx
├—————— style
├———————— index.less
├—————— index.md
├—————— demo
├——————── *.tsx
├── lessvars
├──── om.js
├──── ep.js
```

### 样式（less）

#### 层级关系

<img src="https://overmind-test.nos-jd.163yun.com/%E8%A7%86%E8%A7%89%E6%A0%B7%E5%BC%8F%E5%B1%82%E6%AC%A1.svg" />

| 文件                     | 作用                                                                                                                                                                               |
| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `./lessvars/{om\|ep}.js` | 必选，overmind/ep 主题的样式变量定义。<br>1. 通常针对颜色、主次色、布局大小等视觉层面的抽象元素进行变量定义；<br>2. 用于对引入样式变量（ant 样式变量）的覆盖。                     |
| `style/index.less`       | 必选，组件的样式定义。<br>1. 声明依赖的 less 文件（内部依赖和外部依赖）； <br> 2. 组件的样式定义，尽量使用颜色、主次色、布局等视觉定义的基础变量；<br> 3. 对引入的外部样式的覆盖。 |

#### 不同类型组件的样式

| 类型                           | 样式说明                                                                       |
| :----------------------------- | :----------------------------------------------------------------------------- |
| 基于 antd 组件二次开发的组件   | 由于 antd 内的样式 className 结构较为复杂，一般会引用 antd 为该组件定义的 less |
| 基于较为简单组件二次开发的组件 | 摒弃其自定义样式，为其定义新样式                                               |
| 直接开发新组件                 | 无历史包袱，直接定义新样式                                                     |

#### 样式名命名规范

采用`前缀+组件名`的形式

```less
.ned-button
.ned-button-primary
.ned-button-primary-danger
```

### git 分支约定

#### 分支命名和使用

`master`：主分支，与 npm 上的发布的资源，保持完全一致。

`develop`：开发分支，feature 和 bugfix 分支从该分支创建。

`feature/*`：特性分支，用于开发新功能/组件，合入 develop 后删除。

`bugfix/*`：bug 修复分支，用于非紧急 bug 修复，合入 develop 后删除。

`hotfix/*`：紧急修复分支，从 master 创建，修复后合并至 master 上线，同时再合并至 develop 以保证 master 和 develop 同步。

#### commit message 规范

💥 Added(compiler): Added 'comments' option\n 新增功能

🐛 Fixed(compiler): Fixed some bug\n 修复 bug

📝 docs(compiler): add some docs\n 新增文档说明

💄 UI(compilery): better styles\n UI 样式调整

🎨 chore(compiler): do something\n 其他

正则说明：

```
/^(((\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]) )?(revert: )?(feat|Added|Fixed|fix|docs|UI|refactor|⚡perf|workflow|build|CI|typos|chore|tests|types|wip|release|dep)(\(.+\))?: .{1,50}/
```

## 组件开发流程

```
组件开发需求  ——>  交互视觉设计  ——>  交互视觉评审  ——>  技术评审（API设计）
                                                        |
                                                        ∨
发布NPM包    <——  交互视觉验收  <——  代码Review  <——  组件开发与测试
```

## 其他建议

- 社区开源组件有很多值得学习的地方
- 不要过早抽象，可以先实现，再抽象