# adder-components 组件库

### 快速上手

安装依赖

```bash
npm i
```

启动服务

```bash
npm start
```

部署站点

```bash
npm run docs:build
```

测试用例

```bash
npm test
```

发布组件

```bash
npm publish
```

### 开发组件

创建组件文件

```
src
  components
     Foo
        index.tsx      // 组件文件
        index.md       // 组件库文件
        index.test.tsx // 组件用例
        index.scss     // 组件样式（或使用styled-components）
```

组件编写

在 markdown 代码块中编写代码会失去类型提示和校验，不能像直接在 tsx 中那样丝滑，因此我们推荐使用 VSCode 插件 ts-in-markdown

```
import React, {FC} from 'react';
import { Button } from 'antd'


interface FooProps {
}

const Foo: FC<FooProps> = () => {
  return  <Button>测试</Button>
}

export default  Foo
```

组件导出

```
export { default as Foo } from './components/Foo'
```

API 生成

组件 API 自动生成的前提是，确保 dumi 能够通过 TypeScript 类型定义 + 注解推导出 API 的内容

```
import React, {FC} from 'react';
import { Button } from 'antd'

interface FooProps {
    /**
   * 可以这样写属性描述
   * @description       也可以显式加上描述名
   * @description.zh-CN 还支持不同的 locale 后缀来实现多语言描述，使用 description 兜底
   * @default           支持定义默认值
   */
   className?: string; // 支持识别 TypeScript 可选类型为非必选属性
}

const FooPro: FC<FooProps> = () => {
  return  <Button>测试</Button>
}

export default  FooPro
```

dumi 背后的类型解析工具是 react-docgen-typescript，更多类型和注解的用法可参考 [它的文档](https://github.com/styleguidist/react-docgen-typescript#example)。
组件 md 文档编写

````
---
nav:
  title: 基础组件
  path: /components
  group:
    title: Foo
---

```tsx
import { Foo } from 'adder-components';
import 'antd/dist/antd.css'

export default () => <Foo />;
```
````

其他
[组件库搭建配置文档](https://wiki.bizseer.com/pages/viewpage.action?pageId=57134424)