adder-components 组件库

快速上手

安装依赖

npm i

启动服务

npm start

部署站点

npm run docs:build

测试用例

npm test

发布组件

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，更多类型和注解的用法可参考 它的文档。 组件 md 文档编写

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

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

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

其他 组件库搭建配置文档