docs: update docs

Author: zhiwen.zhao

.eslintignore

@@ -1,3 +1,4 @@
 template/
 *.js
-**/demo
+**/demo/
+**/__tests__/

.gitignore

@@ -16,7 +16,6 @@
 /dist
 /lib
 /esm
-/.docz
 /doc-site
 /types
 

.umirc.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'dumi';
 let base = '/react-ui-library-tutorial';
 let publicPath = '/react-ui-library-tutorial/';
 
-if (process.env.DOC_BUILD_ENV === 'local') {
+if (process.env.SITE_BUILD_ENV === 'PREVIEW') {
   base = undefined;
   publicPath = undefined;
 }

README.md

@@ -14,7 +14,7 @@
 
 于是在部门内搭了一个简单的组件库，组件不多，但在搭建过程中掌握了很多知识，再看 antd 等热门组件库，对其中的一些设计也有了更深的感悟，故记录下来，希望能帮助到其他的同学。
 
-[🚀 在线预览](https://happy-ui.now.sh)
+[🚀 在线预览](https://worldzhao.github.io/react-ui-library-tutorial)
 
 🚆 本地预览
 
@@ -27,15 +27,15 @@ yarn start
 
 按顺序执行完命令后，即可在 localhost:3000 端口看到以下内容：
 
-![preview](https://raw.githubusercontent.com/worldzhao/blog/master/images/rc-lib-1.jpg)
+![preview](https://raw.githubusercontent.com/worldzhao/blog/master/images/rc-lib-v1-1.jpg)
 
 ## 概览
 
 本系列文章主要包含以下内容：
 
 - 项目初始化: 组件库前期开发准备工作。`eslint`/`commit lint`/`typescript`等等；
-- 开发阶段: 使用[docz](https://github.com/doczjs/docz)进行开发调试以及文档编写；
+- 开发阶段: 使用[dumi](https://d.umijs.org/zh-CN)进行开发调试以及文档编写；
 - 打包阶段: 输出~~`umd`~~/`cjs`/`esm`产物并支持按需加载；
 - 组件测试: 使用`@testing-library/react`及其相关生态进行组件测试；
-- 发布 npm: 编写脚本完成自动化发布；
-- 部署文档站点: 使用[now](https://zeit.co/home)部署文档站点。
+- 发布 npm: 编写脚本完成发布或直接使用 [np](https://www.npmjs.com/package/np) 发布；
+- 部署文档站点: 使用 Github Pages 以及 Github Actions 完成文档站点自动部署。

docs/getting-started.md

@@ -11,7 +11,7 @@ nav:
 **使用 npm 或 yarn 安装**
 
 ```shell
-$ npm install @zzzzw/happy-ui --save
+npm install @zzzzw/happy-ui
 ```
 
 ```shell

package.json

@@ -22,7 +22,7 @@
     "dev": "dumi dev",
     "start": "npm run dev",
     "build:site": "rimraf doc-site && dumi build",
-    "preview:site": "cross-env DOC_BUILD_ENV=local npm run build:site && serve doc-site",
+    "preview:site": "cross-env SITE_BUILD_ENV=PREVIEW npm run build:site && serve doc-site",
     "deploy:site": "npm run build:site && gh-pages -d doc-site",
     "clean": "rimraf lib esm dist",
     "build:types": "tsc -p tsconfig.build.json && cpr lib esm",

src/alert/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Alert from '../alert';
+import Alert from '..';
 
 describe('<Alert />', () => {
   test('should render default', () => {

src/alert/demo/basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Alert from '../alert';
+import Alert from '../';
 import '../style';
 
 export default () => <Alert kind="warning">这是一条警告提示</Alert>;

src/alert/index.md

@@ -8,4 +8,14 @@ group:
   order: 1
 ---
 
+# Alert 警告提示
+
+警告提示，展现需要关注的信息。
+
+## 代码演示
+
+### 基本用法
+
 <code src="./demo/basic.tsx"></code>
+
+<API src="./index.tsx"></API>

src/alert/index.ts

@@ -1,7 +1,15 @@
 import React from 'react';
 import t from 'prop-types';
 
-import { AlertProps, KindMap } from './interface';
+export interface AlertProps {
+  /**
+   * @description       Alert 的类型
+   * @default           'info'
+   */
+  kind?: 'info' | 'positive' | 'negative' | 'warning';
+}
+
+export type KindMap = Record<Required<AlertProps>['kind'], string>;
 
 const prefixCls = 'happy-alert';