feat: 完善文档和提高性能 (#3)

- 完善文档
- 修复 options bug

.github/workflows/ci.yml

@@ -0,0 +1,11 @@
+name: Node CI
+
+on: pull_request
+
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - run: yarn
+      - run: yarn ci

.gitignore

@@ -19,7 +19,6 @@
 .env.local
 
 # ide
-/.vscode
 /.idea
 coverage
 .eslintcache

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "vscode.typescript-language-features",
+  "prettier.embeddedLanguageFormatting": "off"
+}

README.md

@@ -7,9 +7,7 @@
 
 </div>
 
-`super-antd` 是一个简单且数据驱动友好的 React 组件库。
-
-它基于 [ant design](https://ant.design/) 和 [pro-components](https://procomponents.ant.design/) 。
+`super-antd` 是一个简单且数据驱动友好的 React 组件库。它基于 [ant design](https://ant.design/) 和 [pro-components](https://procomponents.ant.design/) 。
 
 ## 📖 Document
 
@@ -19,7 +17,7 @@
 
 - 简单：通过对大量业务场景的提炼和抽象，使得其十分简单；
 - 数据驱动友好：在组件层级解决了动态渲染、通信、联动等难题；
-- 稳定：Typescript 编写 + 高测试覆盖率；
+- 稳定：Typescript 编写 + 90% 以上的测试覆盖率；
 
 ## 🤔 Why？
 
@@ -35,7 +33,7 @@
 
 而且 `super-antd` 本身其实就是一个普通的 `antd` 组件库，当低代码编辑器真的无法满足需求而需要重构，导出的代码也和程序员真实开发时写的一样，这样就极大的降低重构的风险和成本，这就是为什么要写 `super-antd`。
 
-## 🎯 Roadmap
+## 🎯 RoadMap
 
 - [x] 0.1 alpha 版
   - [x] [数据模板](https://dream2023.github.io/super-antd/guide/concept/template)
@@ -45,10 +43,10 @@
   - [x] [表单组件](https://dream2023.github.io/super-antd/components/form)
   - [x] [表单项组件](https://dream2023.github.io/super-antd/components/form/form-item)
   - [x] [内置表单组件](https://dream2023.github.io/super-antd/components/form/form-components)
-- [ ] 0.1 正式版
-  - [ ] 测试覆盖率 80% 以上
-  - [ ] 完成 100% 文档
-  - [ ] 0️⃣ issue
+- [x] 0.1 正式版
+  - [x] 测试覆盖率 90% 以上
+  - [x] 完成 100% 文档
+  - [x] 0️⃣ issue
 - [ ] 1.0 版
   - [ ] 模板组件
   - [ ] 富文本组件

cspell.json

@@ -0,0 +1,26 @@
+{
+  "version": "0.1",
+  "language": "en",
+  "words": [
+    "rfdc",
+    "ahooks",
+    "antd",
+    "Btns",
+    "btns",
+    "ahooksjs",
+    "hoverable",
+    "typeof",
+    "classname",
+    "cnpm",
+    "tyarn",
+    "testid",
+    "rerender",
+    "dumi",
+    "umijs",
+    "globby",
+    "gitee",
+    "Codecov",
+    "browserslist"
+  ],
+  "ignorePaths": ["node_modules/**", "**/*.snap", "coverage/**", "src/.umi/**"]
+}

docs/components/common/__demos__/provider.tsx

@@ -0,0 +1,49 @@
+import React, { FC } from 'react';
+import type { ComponentType } from 'react';
+import type { ComponentDecoratorType, SchemaParserType } from 'react-schema-render';
+
+/**
+ * Error 的类型
+ *
+ * 既支持 Error 对象，也支持 { message: 'xx', errors: {} } 用于表单回显
+ */
+export type ErrorData = Error & { message?: string; errors?: Record<string, any> };
+
+export interface ISuperProviderProps {
+  /** 组件默认属性 */
+  componentProps?: Record<string, Record<any, any>>;
+  /** 分隔符 */
+  delimiters?: [string, string];
+  /** 自定义过滤器 */
+  filters?: Record<string, Function>;
+
+  /** Axios 实例 */
+  axios?: (options: any) => Promise<any>;
+  /** 自定义错误通知 */
+  errorNotify?: (msg?: string, error?: ErrorData, params?: any) => void;
+  /** 自定义请求成功通知 */
+  successNotify?: (msg?: string, data?: any, params?: any) => void;
+
+  /**
+   * 组件映射列表，同 react-schema-render
+   *
+   * @see https://dream2023.gitee.io/react-schema-render/
+   */
+  components?: Record<string, ComponentType<any>>;
+  /**
+   * 自定义装饰器
+   *
+   * @see https://dream2023.gitee.io/react-schema-render/decorator
+   */
+  componentDecorator?: ComponentDecoratorType;
+  /**
+   * 自定义解析器
+   *
+   * @see https://dream2023.gitee.io/react-schema-render/parser
+   */
+  parsers?: SchemaParserType[];
+}
+
+const Demo: FC<ISuperProviderProps> = () => <>Demo!</>;
+
+export default Demo;

docs/components/common/__demos__/render.tsx

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import React from 'react';
+
+export interface ISchemaRenderProps {
+  /** Schema 对象。可以为数组或者对象。 例如 { component: 'input', name: 'foo', label: 'bar' } */
+  schema?: Record<any, any> | Record<any, any>[];
+}
+
+const Demo: FC<ISchemaRenderProps> = () => <>Demo!</>;
+
+export default Demo;

docs/components/common/provider.md

@@ -0,0 +1,16 @@
+---
+order: 1
+group:
+  path: /common
+  title: 基础组件
+nav:
+  title: 组件
+  path: /components
+  order: 1
+---
+
+# SuperProvider 全局配置
+
+SuperProvider 用法在指南 [全局配置](/guide/concept/config) 章节已有详细描述。
+
+<API src="./__demos__/provider.tsx"></API>

docs/components/common/render.md

@@ -0,0 +1,16 @@
+---
+order: 2
+group:
+  path: /common
+  title: 基础组件
+nav:
+  title: 组件
+  path: /components
+  order: 1
+---
+
+# SuperRender 动态渲染
+
+SuperRender 用法在指南 [数据驱动](/guide/concept/schema) 章节已有详细描述。
+
+<API src="./__demos__/render.tsx"></API>

docs/components/__demos__/form/schema.tsx → docs/components/form/__demos__/form/schema.tsx

@@ -23,7 +23,7 @@ const Demo = () => {
         component: 'email',
         name: 'email',
         label: '邮箱',
-        key: 'emial',
+        key: 'email',
       },
       {
         component: 'checkbox',

docs/components/form-components.md → docs/components/form/form-components.md

@@ -2,7 +2,7 @@
 order: 2
 group:
   path: /form
-  title: 表单
+  title: 表单组件
 nav:
   title: 组件
   path: /components

docs/components/form-item.md → docs/components/form/form-item.md

@@ -2,7 +2,7 @@
 order: 1
 group:
   path: /form
-  title: 表单
+  title: 表单组件
 nav:
   title: 组件
   path: /components

docs/components/form.md → docs/components/form/form.md

@@ -2,7 +2,7 @@
 order: 0
 group:
   path: /form
-  title: 表单
+  title: 表单组件
 nav:
   title: 组件
   path: /components

docs/components/options.md → docs/components/form/options.md

@@ -2,7 +2,7 @@
 order: 2
 group:
   path: /form
-  title: 表单
+  title: 表单组件
 nav:
   title: 组件
   path: /components

docs/guide/concept/__demos__/schema/attrs.tsx

@@ -34,7 +34,7 @@ const App = () => {
 
   // 组件默认属性
   const componentProps = {
-    numer: {
+    number: {
       min: 0,
     },
   };

docs/guide/concept/api.md

@@ -163,7 +163,7 @@ import { getUser } from 'path/to/api';
 
 ### url 映射
 
-api 为 string 类型或者对象时的 url 属性支持参数映射，例如：`/city?provice={{data.provice}}` 就会将 `{{data.provice}}` 替换成真正的数据，例如：
+api 为 string 类型或者对象时的 url 属性支持参数映射，例如：`/city?province={{data.province}}` 就会将 `{{data.province}}` 替换成真正的数据，例如：
 
 <code src="./__demos__/api/url_template.tsx" />
 

docs/guide/concept/schema.md

@@ -33,7 +33,7 @@ nav:
 
 因为在数据驱动的场景下，通常需要将这些数据存储到数据库，而函数类型的值并不利于存储和应用，而且大多数情况下是通过界面配置实现组件的功能，这就要求了如果想要做好，做灵活，就需要尽可能实现上述三者。
 
-例如 `SuperForm` 组件，在点击 **请求数据** 成功后需要进行 **跳转** 页面的操作，这里的 **请求数据** 和 **跳转页面**，在我们使用其他组件库时，就需要书写不少代码，但是在 `SuperForm` 中我们仅需要执行 `api` 属性和 `rediect` 属性即可：
+例如 `SuperForm` 组件，在点击 **请求数据** 成功后需要进行 **跳转** 页面的操作，这里的 **请求数据** 和 **跳转页面**，在我们使用其他组件库时，就需要书写不少代码，但是在 `SuperForm` 中我们仅需要执行 `api` 属性和 `redirect` 属性即可：
 
 <code src="./__demos__/schema/schema.tsx" />
 

docs/guide/concept/template.md

@@ -59,21 +59,21 @@ nav:
 
 ### JS 全局函数
 
-数据模板可以使用到 JS 的全局函数，例如 `JSON.stringify` 或者 `parsetInt` 等函数，例如：
+数据模板可以使用到 JS 的全局函数，例如 `JSON.stringify` 或者 `parseInt` 等函数，例如：
 
 <code src="./__demos__/template/filters_global.tsx" />
 
 ### 串联使用多个过滤器
 
-<code src="./__demos__/template/filters_muti.tsx" />
+<code src="./__demos__/template/filters_multi.tsx" />
 
 ### 自定义过滤器
 
 <code src="./__demos__/template/filters_custom.tsx" />
 
 ## 内置过滤器
 
-suepr-antd 为了方便用户内置了一些过滤器，以下是内置过滤器的介绍：
+super-antd 为了方便用户内置了一些过滤器，以下是内置过滤器的介绍：
 
 ### json
 
@@ -307,7 +307,7 @@ export default App;
 import React from 'react';
 import { SuperTpl } from 'super-antd';
 const App = () => {
-  return <SuperTpl value="{{data.nums | sum }}" data={{ nums: [1, 4, 3] }}></SuperTpl>;
+  return <SuperTpl value="{{data.numbers | sum }}" data={{ numbers: [1, 4, 3] }}></SuperTpl>;
 };
 export default App;
 ```

docs/guide/index.md

@@ -58,7 +58,7 @@ nav:
 - 极大减少代码复杂度；
 - 能够作为数据驱动框架和低代码平台的基础库。
 
-## Roadmap 开发规划
+## RoadMap 开发规划
 
 - [x] 0.1 alpha 版
   - [x] [数据模板](https://dream2023.github.io/super-antd/guide/concept/template)

package.json

@@ -3,7 +3,7 @@
   "name": "super-antd",
   "description": "super-antd 是一个简单且数据驱动友好的 React 组件库。",
   "license": "MIT",
-  "version": "0.0.1-alpha",
+  "version": "0.1.0",
   "author": {
     "name": "dream2023",
     "email": "[email protected]"
@@ -14,10 +14,13 @@
     "build": "father-build && node scripts/replaceDeclaration.js && webpack-cli",
     "release": "npm run build && npm publish",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx --fix --format=pretty ./src && npm run lint:prettier",
+    "lint:all": "yarn eslint --ext .js,.jsx,.ts,.tsx  --format=pretty ./src ",
     "lint:prettier": "npm run prettier && git diff && prettier --version && prettier --check \"packages/**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
     "prettier": "prettier --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
     "test": "umi-test --watch",
     "test:coverage": "umi-test --coverage",
+    "spell-check:all": "cspell \"**/*.{txt,ts,tsx,js,json,md}\"",
+    "ci": "yarn tsc && yarn lint:all && yarn spell-check:all && umi-test --all",
     "tsc": "tsc --noEmit",
     "update:deps": "yarn upgrade-interactive --latest"
   },
@@ -51,12 +54,13 @@
     "dist"
   ],
   "gitHooks": {
-    "pre-commit": "npm run tsc && lint-staged && npm run umi-test",
+    "pre-commit": "npm run tsc && yarn umi-test --onlyChanged && lint-staged",
     "commit-msg": "node scripts/verifyCommit.js"
   },
   "lint-staged": {
     "*.{js,jsx,less,md,json}": [
-      "prettier --write"
+      "prettier --write",
+      "cspell"
     ],
     "*.ts?(x)": [
       "prettier --parser=typescript --write"
@@ -84,6 +88,8 @@
     "map-obj": "^4.2.1",
     "react-router-dom": "^5.2.0",
     "react-schema-render": "^0.0.5",
+    "react-use": "^17.2.4",
+    "rfdc": "^1.3.0",
     "tiny-warning": "^1.0.3"
   },
   "browserslist": [
@@ -93,7 +99,7 @@
     "ie >= 11"
   ],
   "devDependencies": {
-    "@ant-design/pro-form": "^1.22.1",
+    "@ant-design/pro-form": "^1.28.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.1.0",
@@ -107,6 +113,7 @@
     "axios": "^0.21.1",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-module-resolver": "^4.1.0",
+    "cspell": "^5.6.0",
     "css-loader": "^5.2.4",
     "dumi": "^1.0.13",
     "father-build": "^1.19.4",

src/form-item/src/components/Color.tsx

@@ -1,17 +1,11 @@
 import { ProFormColorPicker } from '@ant-design/pro-form';
-import type { ProFormItemProps } from '@ant-design/pro-form/lib/interface';
-import type { InputNumberProps } from 'antd/lib/input-number';
+import type { ProFormColorPickerProps } from '@ant-design/pro-form/lib/components/ColorPicker';
 
 import type { CreateSuperFormItemProps } from '../createSuperFormItem';
 import { createSuperFormItem } from '../createSuperFormItem';
 
-type ProFormColorProps = ProFormItemProps<InputNumberProps> & {
-  min?: InputNumberProps['min'];
-  max?: InputNumberProps['max'];
-};
-
-export type SuperColorProps = CreateSuperFormItemProps<ProFormColorProps>;
-export const SuperColor = createSuperFormItem<ProFormColorProps>(ProFormColorPicker);
+export type SuperColorProps = CreateSuperFormItemProps<ProFormColorPickerProps>;
+export const SuperColor = createSuperFormItem<ProFormColorPickerProps>(ProFormColorPicker);
 SuperColor.displayName = 'SuperColor';
 
 export default SuperColor;