- README.md 应该包含业务组件的源信息、使用说明以及 API，示例如下：

`package.json` 中包含了一些依赖信息和配置信息，示例如下：

}

包含组件的出口文件，示例如下：

import Button, { Group } form '@scope/button';

}

demo 目录存放的是组件的文档，无文档的业务组件无法带来任何价值，因此 demo 是必选项。demo 目录下的文件采取 markdown 的写法，可以是多个文件，示例（demo/basic.md）如下：

demo/basic.md

API 是组件的属性解释，给开发者作为组件属性配置的参考。为了保持 API 的一致性，我们制定这个 API 命名规范。对于业界通用的，约定俗成的命名，我们遵循社区的约定。对于业界有多种规则难以确定的，我们确定其中一种，大家共同遵守。

- 所有的 API 采用小驼峰的书写规则，如 `onChange`、`direction`、`defaultVisible`。

- 标签名采用大驼峰书写规则，如 `Menu`、`Slider`、`DatePicker`。

| API 名称 | 类型 | 描述 | 常见变量 |

| :------------- | :------------- | :----------------------------------------------------------- | :---------------------------------------------------- |

| has+'属性' | boolean | 拥有某个属性 | 例如 `hasArrow`， `hasHeader`， `hasClose` 等等 |

当某个 API 的接口，允许用户指定多个枚举值的时候，我们把这个接口定义为多选枚举。一个很典型的例子是某个弹层组件的 `closable` 属性，我们会允许：键盘 esc 按键、点击 mask、点击 close 按钮、点击组件以外的任何区域进行关闭。

- `<Dialog closable={false} />`，任何情况下都不关闭，只能通过受控设置 visible

- `<Dialog closable closeMode={['close', 'esc']} />`，用户按 esc 或者点击关闭按钮会关闭

- 标准事件或者自定义的符合 w3c 标准的事件，命名必须 on 开头， 即 `on` + 事件名，如 onExpand。

- 支持[受控模式](https://reactjs.org/docs/forms.html#controlled-components)(value + onChange) （A)

- value 控制组件数据展现

- onChange 组件发生变化时候的回调函数（第一个参数可以给到 value)

- `value={undefined}`的时候清空数据，field 的 reset 函数会给所有组件下发 undefined 数据 (AA))

- 一次完整操作抛一次 onChange 事件 `建议` 比如有 Process 表示进展中的状态，建议增加 API `onProcess`；如果有 Start 表示启动状态，建议增加 API `onStart`  (AA)

**1. 原子组件（Atomic Component）**

文件命名采取 [bcp47](https://tools.ietf.org/html/bcp47) 规范

在 `src` 目录新增 `locale` 目录用于管理不同语言的文案。

};

}

配合 ConfigProvider 支持全局替换国际化文案。

业务组件中如果有自定义的需要跟随主题色的 UI，一定要引入变量的形式，增加组件的流通性。

无障碍需要符合 [WCAG 2.1 A 级标准](https://www.w3.org/TR/WCAG21/)，可参考 [W3C 无障碍最佳实践](https://www.w3.org/TR/wai-aria-practices-1.1/)、[Fusion 无障碍指引 2.3.1](https://alibaba-fusion.github.io/next/part1/basics.html) 章节等。

必须借助 API 才能完成无障碍工作的组件必须为开发者提供无障碍的使用文档，请[参考](https://fusion.design/pc/component/select?themeid=2#accessibility-container)组件 API 中 `ARIA and Keyboard` ，建议在 `demo` 目录新增 `a11y.md` 文件用于演示组件的无障碍使用。

详细指引查看无障碍开发指南 [https://alibaba-fusion.github.io/next/part1/basics.html](https://alibaba-fusion.github.io/next/part1/basics.html)。

一般键盘事件有 Up Arrow/Down Arrow/Enter/Esc/Tab

| Esc | 关闭列表 |

- 对于组件，我们为开发者内置 `role` 和特定 `aria-_属性`，开发者也可以对非组件 API 属性都可以透传至 DOM 元素，进行修改 `role` 和 `aria-_参数`，但是要注意对应关系，请[参考](https://alibaba-fusion.github.io/next/part1/WAI-ARIA.html)。

- 对一些特殊的组件传递参数才能支持无障碍，设置 `id`，`autoFocus` 和传参数，如下：

|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: SettingTarget) => NodeData[]);|

|getResizingHandlers| 用于配置设计器中组件 resize 操作工具的样式和内容 | Function| (currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> / ReactElement[];

|callbacks| 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 | Callback| -

|callbacks.onResize| 调整容器尺寸时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义

|callbacks.onResizeStart| 调整容器尺寸开始时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义

|callbacks.onResizeEnd| 调整容器尺寸结束时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义

|callbacks.onMoveHook| 节点被拖动回调 | Function| (currentNode: any) => boolean;

|callbacks.onHoverHook| 节点被 hover 回调 | Function| (currentNode: any) => boolean;

描述举例：

(/src/index.jsx)

ReactDOM.render(<App />, document.getElementById(pkg.config && pkg.config.targetRootID || 'root'));

(/src/config/app.js)

}

(/src/utils/index.js)

}

(/src/config/constants.js)

}

(/src/global.scss)