# EnOS DPL

## Features
- 提供基本功能组件和通用业务组件
- 多语言功能支持
- 使用less编写样式

## Installation

```bash
npm install @enos/dpl --save
```

## Usage

直接引入使用，更多使用说明可参见[DPL主站点](http://dpl-7.apaas-beta1.eniot.io/)

```js
import { Input } from '@enos/dpl';

ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);
```

## Development

- Fork DPL的master分支
- 在项目根目录下的`components`目录中，以组件名建立组件目录，命名建议简短清晰，能清楚描述组件功能
- 在组件目录下增加组件主入口文件，命名为`index.js`，在此export组件；增加`style`文件夹统一放置样式文件，并在其下新增`index.js`，在此引入组件涉及的样式文件，同时在此建立`index.less`，作为组件的主样式入口
- 在组件目录下增加文件`index.zh-CN.md`和`index.en-US.md`，分别填写组件的中英文说明，可参考已有格式。文件最上方需要填写组件文档的描述字段，如需新增`category`或`type`类型，需要在站点配置中增加额外配置，请联系DPL的Owner

示例：

```
---
category: Components // 说明文档的大分类，对组件而言都填写'Components'
subtitle: 输入框 // 组件在站点中的补充说明副标题，一般中文文档中需要填写
type: Data Entry // 组件的分类
title: Input // 组件在站点中显示的主名称
---
```

- 在组件目录下建立`demo`文件夹，在此编写组件的示例代码，可参考已有格式。文件最上方需要填写Demo的基本属性和中英文说明

示例：

```
---
order: 0 // Demo在文档中的顺序，按从小至大排序
title: // Demo的标题
  zh-CN: 基本
  en-US: basic
---

## zh-CN // Demo的中文简介

最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。

## en-US // Demo的英文简介

The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
```

- 可在项目根目录下的`demo`目录中，以组件名建立开发调试用demo，并在`root.js`中引入该demo，以`Input`组件为例，引入方式如下：

```js
const demoMap = {
  ...
  Input: asyncComponent(() => import('./input')),
  ...
};
```

- 可启动开发调试服务，用于开发组件

```bash
npm start
```

- antd组件样式的修改规范

1. 首先引入已有组件的样式，可用`~`表示`node_modules`目录，如：

```
@import'~antd/lib/input/style/index.less';
```

2. 涉及颜色，大小等参数变更，统一提取变量至`components/style/themes/default.less`，具体用到的地方引入主题文件，如：

```
@import "../../style/themes/default";
```

3. 如需使用其他组件中的mixin，需要单独引入，如：

```
@import '../../input/style/dpl-mixin.less';
```

- 开发完成后，可编写测试用例，放置于组件目录下的`__tests__`目录下，并运行测试，测试通过后方可提交PR

```bash
npm test
```

- 组件开发和测试完成后，发起PR，等待DPL的Owner进行Merge

## Release

### 登录npm

如未登录过，使用指定账号登录公司内部npm

```bash
npm login
```

### 修改版本号和编写更新说明

发布前务必填填写好版本号和更新说明

- 提升`package.json`中的版本号`version`，版本号遵循[Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/)语义化版本规范。

- 更新说明填入项目根目录下的`CHANGELOG.zh-CN.md`和`CHANGELOG.en-US.md`，具体可参考已有格式。

### 编译代码，生成各组件独立代码和整体打包代码

```bash
npm run build
```

### 发布至npm

```bash
npm run pub
```

## DPL Site

### 站点开发

站点代码位于项目根目录下的`site`文件夹，同样基于DPL的组件开发，可在项目内通过如下指令启动站点的开发调试

```bash
npm run site-start
```

### 站点发布

通过如下指令构建站点代码，将输出至根目录下的`_site`目录，发布此目录即可

```bash
npm run site-build
```