Skip to content

Commit

Permalink
chore(*): update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
youluna committed Jan 2, 2019
1 parent 352e5ae commit f1b932c
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 14 deletions.
2 changes: 1 addition & 1 deletion .fusion
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"engine": "sass",
"publish-template": "@alifd/next-theme-template@0.2.3",
"publish-template": "@alifd/next-theme-template@2x",
"class-prefix": ".next",
"icon": {
"iconfont-project-id": "544230",
Expand Down
85 changes: 84 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,93 @@
[![Build Status](https://travis-ci.com/alibaba-fusion/next.svg?token=KAYresHL1UPaaLzUYyx6&branch=master)](https://travis-ci.com/alibaba-fusion/next)
[![codecov](https://codecov.io/gh/alibaba-fusion/next/branch/master/graph/badge.svg?token=FSufKVDhmT)](https://codecov.io/gh/alibaba-fusion/next)

- [Quick Start](./site/en-us/quick-start.md)
# Quick Start

## Install

### 1.Use NPM ( Recommend )

```
npm install @alifd/next --save
```

### 2.Import in Browser

Use the script and link tags in the browser to directly import the file and use the global variable Next. We provide files such as next.js/next.min.js and next.css/next.min.css in the `@alifd/next/dist` directory in the npm package, or via [unpkg](https:/ /unpkg.com/@alifd/next/dist/) Download it.

``` html
<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css">

<script src="https://unpkg.com/@alifd/next/dist/next.js"></script>

// The above ways import latest @alifd/next, we recommend you specify version.
<script src="https://unpkg.com/@alifd/[email protected]/dist/next.min.js"></script>

// Or import as your own static resource
<script src="../build/public/@alifd/next.js"></script>
```

## Dependencies

* `@alifd/next` is based on `react@16` development and is currently not compatible with versions below `react@16`. react/react-dom is used as peerDependencies, which requires the user to manually install or import it.
* `@alifd/next` use [moment](https://github.com/moment/moment) library to implement date-time related component. moment is also used as peerDependencies, which requires the user to manually install or import it.

## Import

### Import All


``` js
import '@alifd/next/dist/next.css';
// import '@alifd/next/index.scss';

import { Button, Input } from '@alifd/next';
```

### Import module with plugin


#### 1. Import module manually

``` js
import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';
```

#### 2. Use with [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) ( Recommend )

``` js
// webpack babel loader option or .babelrc
{
// ...
plugins: [
['babel-plugin-import', {
libraryName: '@alifd/next',
style: true
}]
]
}
```

It will transform code as below

``` js
import { Button } from '@alifd/next';
```

To

``` js
import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';
```

## Advanced
- [Use with Theme Package](./site/en-us/theme.md)
- [Internationalization](./site/en-us/i18n.md)
- [Deploy Font File](./site/en-us/font-deploy.md)

## Contributing
- [Contributing](./site/en-us/contributing.md)

## Join Group
Expand Down
88 changes: 87 additions & 1 deletion README.zh-cn.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,96 @@
[![Build Status](https://travis-ci.com/alibaba-fusion/next.svg?token=KAYresHL1UPaaLzUYyx6&branch=master)](https://travis-ci.com/alibaba-fusion/next)
[![codecov](https://codecov.io/gh/alibaba-fusion/next/branch/master/graph/badge.svg?token=FSufKVDhmT)](https://codecov.io/gh/alibaba-fusion/next)

- [快速开始](./site/zh-cn/quick-start.md)
# 快速开始

## 安装

### 1.使用 npm 安装(推荐)

```
npm install @alifd/next --save
```

### 2.浏览器直接引用

在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 Next。我们在 npm 包中提供了 `@alifd/next/dist` 目录下的 next.js/next.min.js 和 next.css/next.min.css 等文件,也可以通过 [unpkg](https://unpkg.com/@alifd/next/dist/) 进行下载。

``` html
<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css">

<script src="https://unpkg.com/@alifd/next/dist/next.js"></script>

// 以上引入都是引入的最新版本 @alifd/next ,但我们推荐引入固定版本的next组件,以保证代码稳定
<script src="https://unpkg.com/@alifd/[email protected]/dist/next.min.js"></script>

// 或作为自己的静态资源引入
<script src="../build/public/@alifd/next.js"></script>
```

## 依赖

* `@alifd/next` 基于 `react@16` 开发,目前并不兼容 `react@16` 以下的版本,且将 react/react-dom 作为 peerDependencies,需要用户手动提前安装或引入。
* `@alifd/next` 在处理日期时间相关组件逻辑时,使用了 [moment](https://github.com/moment/moment) 库,且将 moment 作为 peerDependencies,需要用户手动提前安装或引入。

## 引入

### 全量引入


``` js
import '@alifd/next/dist/next.css';
// import '@alifd/next/index.scss';

import { Button, Input } from '@alifd/next';
```

### 按需引入


#### 1.手动引入

``` js
import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';
```

#### 2.使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)

但大多数人更习惯的写法如下:

``` js
import { Button } from '@alifd/next';
```

通过 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件,可以将上述代码转化为类似下面的代码:

``` js
import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';
```

babel配置:
``` js
// webpack babel loader option or .babelrc
{
// ...
plugins: [
['babel-plugin-import', {
libraryName: '@alifd/next',
style: true
}]
]
}
```



## 高级用法
- [使用主题包](./site/zh-cn/theme.md)
- [国际化](./site/zh-cn/i18n.md)
- [字体文件私有化部署](./site/zh-cn/font-deploy.md)

## 贡献代码
- [贡献代码](./site/zh-cn/contributing.md)

## 加入社区
Expand Down
24 changes: 18 additions & 6 deletions site/en-us/contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ All development work takes place on Github, and whether it's a core team member

## Create Issue

We use [GitHub Issues] (https://github.com/alibaba-fusion/next/issues) to track bugs and features. When creating an issue, please select Bug report or Feature request [https://github.com/alibaba-fusion/next/issues/new/choose] template and fill in the necessary information to help us quickly locate and resolve the problem.
We use [GitHub Issues] (https://github.com/alibaba-fusion/next/issues) to track bugs and features. When creating an issue, please select Bug report or Feature request [https://fusion.design/feedback] template and fill in the necessary information to help us quickly locate and resolve the problem.

Also, before you report a bug or submit a feature, make sure you have already searched for an existing issue.

Expand All @@ -27,9 +27,9 @@ Before you send a Pull Request, please make sure you follow the steps below:

2. Run `npm install` in the project root directory to install all development dependencies.

3. If you want to update the code of the Button component, run `npm run dev -- button` in the project root directory, it will automatically launch the browser for you and open the demo page.
3. If you want to update the code of the Button component, run `npm run dev button` in the project root directory, it will automatically launch the browser for you and open the demo page.

4. If you fix a bug or add a new feature, be sure to write the test case. You can start all the components test case by running `npm run test` in the root directory, and you can also use `npm run test -- button` to run the test case for the specified component during development.
4. If you fix a bug or add a new feature, be sure to write the test case. You can start all the components test case by running `npm run test` in the root directory, and you can also use `npm run test button` to run the test case for the specified component during development.

5. Make sure that the code you've modified passes the eslint and stylelint checks, and we'll automate the lint on the code files you've added to the git cache during the precommit phase.

Expand All @@ -41,14 +41,26 @@ Chore|ci|docs|feat|fix|perf|refactor|revert|style|test|temp; `scope` is required
## Development Workflow
After you clone the `@alifd/next` and install the dependencies with `npm install`, you can also run the following commands:

* `npm run dev -- component` start the debug page of the specified component
* `npm run dev component` start the debug page of the specified component

* `npm run test -- component` start the test case of the specified component
* `npm run test component` start the test case of the specified component

* `npm run api -- component` update the Chinese API documentation for the specified component automatically based on the code and comments
* `npm run api component` update the Chinese API documentation for the specified component automatically based on the code and comments

* `npm run test` start test case of all components

* `npm run build` compile es2015+ code to es5 and generate lib and es directories

* `npm run pack` package the file and generate the dist directory


## Release Schedule

Follow [Semantic Versioning 2.0.0](https://semver.org/) Semantic Version Strategy.

Patch Version: Every Wednesday release of a bugfix version(anytime for urgent bugfix).

Minor Version: Monthly release of a backward compatible version with new features.

Major version: contains some break changes, usually one to two years release of a version.

21 changes: 16 additions & 5 deletions site/zh-cn/contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

## 创建 Issue

我们使用 [GitHub Issues](https://github.com/alibaba-fusion/next/issues) 来做 bug 和 feature 的追踪。在提交 Issue 时请选择 Bug report 或 Feature request [对应的模版](https://github.com/alibaba-fusion/next/issues/new/choose),填入必要信息,以帮助我们快速定位以及解决问题。
我们使用 [GitHub Issues](https://github.com/alibaba-fusion/next/issues) 来做 bug 和 feature 的追踪。在提交 Issue 时请选择 Bug report 或 Feature request [对应的模版](https://fusion.design/feedback),填入必要信息,以帮助我们快速定位以及解决问题。

另外,在你报告一个 bug 或提交一个 feature 之前,请先确保已经搜索过已有的 issue。

Expand All @@ -27,7 +27,7 @@

2. 在项目根目录执行 `npm install`,安装所有开发依赖

3. 如果你想修改 Button 组件的代码,在项目根目录执行 `npm run dev -- button`,会自动为你启动浏览器并打开 demo 页面
3. 如果你想修改 Button 组件的代码,在项目根目录执行 `npm run dev button`,会自动为你启动浏览器并打开 demo 页面

4. 如果你修复了一个 bug 或者新增了一个功能,请确保写了相应的测试,可以通过在根目录执行 `npm run test` 来启动所有组件的测试,在开发过程中可以用 `npm run test -- button` 来运行指定组件的测试。

Expand All @@ -41,14 +41,25 @@ chore|ci|docs|feat|fix|perf|refactor|revert|style|test|temp;`scope` 必填,
## 开发流程
在你 clone 了 `@alifd/next` 的代码仓库并且使用 `npm install` 安装完依赖后,你还可以运行下面几个常用的命令:

* `npm run dev -- component` 启动指定组件的调试页面
* `npm run dev component` 启动指定组件的调试页面

* `npm run test -- component` 启动指定组件的测试
* `npm run test component` 启动指定组件的测试

* `npm run api -- component` 根据代码和注释,自动更新指定组件的中文 API 文档
* `npm run api component` 根据代码和注释,自动更新指定组件的中文 API 文档

* `npm run test` 启动所有组件的测试

* `npm run build` 编译 es2015+ 代码生成 lib 和 es 目录

* `npm run pack` 打包文件,生成 dist 目录


## 发布周期

遵循 [Semantic Versioning 2.0.0](https://semver.org/) 语义化版本管理策略:

z 位:每周三会进行日常 bug 修复版本的更新,紧急问题不受此限制,可以随时发布

y 位:每月发布一个带有新特性的向下兼容的版本

x 位:包含有 break change 变更的大版本,一般周期一到两年

0 comments on commit f1b932c

Please sign in to comment.