[git 使用文档](./README.git.md) | 组件库使用文档

## 组件库使用文档

### 项目结构

```
sdk/
 |-.husky
 |-.storybook
 |-dist/
 |-example/
   |-App.tsx
   |-main.tsx
 |-node_modules/
 |-packages/
   |-api/
     |-common
       |-base.api.ts
       |-base.model.ts
     |-panorama
       |-index.ts
       |-model.ts
     |-index.ts
   |-react-biz-components/
     |-PanoramaMap
       |-index.ts
       |-style.less
   |-react-components/
     |-Button
       |-index.ts
       |-style.less
   |-index.tsx
 |-public/
 |-stories/
   |-Button/
     |-Button.stories.tsx
 |-package.json
 |-index.html
 |-vite.config
```

| 目录/文件  | 作用介绍                    |
| ---------- | --------------------------- |
| .storybook | 文档预览服务的配置文件      |
| dist       | 打包文件，上传到 npm 上的包 |
| example    | 开发组件挂在在 root         |
| packages   | 需要开发的组件              |
| stories    | 需要生成预览文档的组件      |

#### 组件开发

1、项目启动： `npm run dev`

2、预览：`http://localhost:3000`

3、App.tsx 中引入 packages 中开发的组件，example 中示例如下：

```
import React from 'react';
import { Button } from '../packages/index';
const Test = () => {
  return (
    <div>
      <Button label="按钮" primary></Button>
    </div>
  );
};

export default Test;
```

### 组件发布

1、执行`npm run build`打包文件

2、命令行使用`npm login`登录 npm

3、使用`npm publish`发布

package.json 上定义的基础入口信息和类型声明

```
  {
	  "name": "aiot-panorama-jssdk",
	  "private": false,
	  "version": "0.0.2",
	  "description": "React components",
	  "type": "module",
	  "keywords": [
		"react",
		"react-component"
	  ],
	  "files": [
		"dist"
	  ],
	  "main": "./dist/aiot-panorama-jssdk.umd.cjs",
	  "module": "./dist/aiot-panorama-jssdk.js",
	  "typings": "./dist/index.d.ts",
	  "exports": {
		".": {
		  "import": "./dist/aiot-panorama-jssdk.js",
		  "require": "./dist/aiot-panorama-jssdk.umd.cjs"
		},
		"./style.css": "./dist/style.css"
	  },
	  "repository": "",
	  "author": "gspace",
	  "license": "MIT"
  }
```

### 组件使用

#### 安装

```bash
yarn add aiot-panorama-jssdk
```

#### 使用

```
import { Button } from 'aiot-panorama-jssdk';
import "aiot-panorama-jssdk/style.css"

<Button label="按钮" primary></Button>

```

附：

[storybook 中文使用文档](https://storybook.js.org/tutorials/design-systems-for-developers/react/zh-CN/document/)

[storybook 英文使用文档](https://storybook.js.org/docs/react/get-started/introduction)