@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/docs/docs/faq.md

@@ -0,0 +1,75 @@
+---
+title: FAQ
+order: 3
+
+nav:
+  title: FAQ
+  path: /docs
+---
+
+## FAQ
+
+以下整理了一些 ProComponents 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。此外我们也维护了一个反馈较多 [how to use 标签](https://github.com/ant-design/pro-components/issues?q=is%3Aissue+label%3A%22%F0%9F%A4%B7%F0%9F%8F%BC+How+to+use%22+) 亦可参考。
+
+### ProTable request 返回的数据格式可以自定义吗？
+
+不行的，你可以在 request 中转化一下，或者写个拦截器。
+
+[示例](https://beta-pro.ant.design/docs/request-cn)
+
+### 如何隐藏 ProTable 生成的搜索的 label？
+
+columns 的 title 支持 function 的，你可以这样写：
+
+```typescript
+title: (_, type) => {
+  if (type === 'table') {
+    return '标题';
+  }
+  return null;
+};
+```
+
+### 我没法安装 `ProComponents` 和 `ProComponents` 的依赖，顺便提一句，我在中国大陆。
+
+那啥，试试 [cnpm](http://npm.taobao.org/)和[yarn](https://www.npmjs.com/package/yarn)。
+
+### `Form` 当中的 `initialValues`
+
+`ProComponents` 底层也是封装的 [antd](https://ant.design/index-cn) ，所以用法也和 [antd](https://ant.design/index-cn) 相同。注意 `initialValues` 不能被 `setState` 动态更新，所以你需要用 `setFieldsValue` 来更新。 `initialValues` 只在 `form` 初始化时生效且只生效一次，如果你需要异步加载，推荐使用 `request`，或者 `initialValues ? <Form/> : null`
+
+### Chrome88 以下浏览器兼容问题
+
+因为 `ProComponent` 使用了较新的 css 属性，会导致在低版本浏览器无法达到预设的兼容效果（即使项目配置了 polyfill）。
+
+因此，需要进行一些额外的兼容性配置：
+
+1. 按这个文档配置 <https://ant.design/docs/react/compatible-style-cn>
+
+2. 如果是 umi 项目，可以在 app.ts 中配置：
+
+```typescript
+import {
+  StyleProvider,
+  legacyLogicalPropertiesTransformer,
+} from '@ant-design/cssinjs';
+
+export function rootContainer(container: React.ReactElement) {
+  return React.createElement(
+    StyleProvider,
+    {
+      hashPriority: 'high',
+      transformers: [legacyLogicalPropertiesTransformer],
+    },
+    container,
+  );
+}
+```
+
+## 错误和警告
+
+这里是一些你在使用 ProComponents 的过程中可能会遇到的错误和警告，但是其中一些并不是 ProComponents 的 bug。
+
+### Cannot read property 'Provider' of undefined
+
+请确保 antd 的版本 >= `4.11.1`

package/docs/docs/index.en-US.md

@@ -0,0 +1,53 @@
+---
+title: Quick Start
+order: 2
+
+nav:
+  title: Documentation
+  path: /docs
+---
+
+## ProComponents
+
+ProComponents is a template component based on Ant Design that provides a higher level of abstraction support out of the box. It can significantly improve the efficiency of creating CRUD pages and focus more on them.
+
+- [ProLayout](/components/layout) solves layout problems, provides out-of-the-box menu and breadcrumb functionality
+- [ProTable](/components/table) Form template component, abstracting web requests and form formatting
+- [ProForm](/components/form) Form template component, presets common layouts and behaviors
+- [ProCard](/components/card) provides card slicing and raster layout capabilities
+- [ProDescriptions](/components/descriptions) Definition list template component, a companion component to ProTable
+- [ProSkeleton](/components/skeleton) Page level skeleton screen
+
+ProComponents is focused on middle and backend CRUD and has a lot of pre-defined styles and behaviors. These behaviors and styles can be difficult to change, so if your business requires rich customization it is recommended to use Ant Design directly.
+
+## Installation
+
+Currently each component of ProComponents is a separate package, you need to install the corresponding npm package in your project and use it.
+
+```shell
+$ npm i @ant-design/pro-components --save
+```
+
+Current ProComponents provides the following components for direct use.
+
+- `npm i @ant-design/pro-components --save`
+
+## Using in a project
+
+Each package is a separate component package, and is used in the following example.
+
+```tsx | pure
+import { ProForm, ProFormText } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <ProForm
+      onFinish={async (values) => {
+        console.log(values);
+      }}
+    >
+      <ProFormText name="name" label="姓名" />
+    </ProForm>
+  );
+};
+```

package/docs/docs/index.md

@@ -0,0 +1,56 @@
+---
+title: 快速开始
+order: 2
+
+nav:
+  title: 文档
+  path: /docs
+---
+
+## ProComponents
+
+ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著地提升制作 CRUD 页面的效率，更加专注于页面。
+
+- [ProLayout](/components/layout) 解决布局的问题，提供开箱即用的菜单和面包屑功能
+- [ProTable](/components/table) 表格模板组件，抽象网络请求和表格格式化
+- [ProForm](/components/form) 表单模板组件，预设常见布局和行为
+- [ProCard](/components/card) 提供卡片切分以及栅格布局能力
+- [ProDescriptions](/components/descriptions) 定义列表模板组件，ProTable 的配套组件
+- [ProSkeleton](/components/skeleton) 页面级别的骨架屏
+
+在使用之前可以查看一下典型的 Demo 来判断组件是否适合你们的业务。ProComponents 专注于中后台的 CRUD, 预设了相当多的样式和行为。这些行为和样式更改起来会比较困难，如果你的业务需要丰富的自定义建议直接使用 Ant Design。
+
+## 安装
+
+当前 ProComponents 每一个组件都是一个独立的包，你需要在你的项目中安装对应的 npm 包并使用。
+
+```shell
+$ npm i @ant-design/pro-components --save
+```
+
+当前 ProComponents 提供了如下组件可直接使用：
+
+- `npm i @ant-design/pro-components --save`
+
+## 在项目中使用
+
+每一个包都是一个独立的组件包，使用示例如下 ：
+
+```jsx
+import React from 'react';
+import { ProForm, ProFormText } from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <ProForm
+      onFinish={async (values) => {
+        console.log(values);
+      }}
+    >
+      <ProFormText name="name" label="姓名" />
+    </ProForm>
+  );
+};
+```
+
+我们所有的包都使用 CSS-in-JS 管理样式，只需引入 js 即可。

package/docs/docs/intro.en-US.md

@@ -0,0 +1,125 @@
+---
+title: Introduction
+order: 1
+
+nav:
+  title: Documentation
+  order: 1
+  path: /docs
+---
+
+![banner](https://gw.alipayobjects.com/zos/antfincdn/7VBnGHwjaW/bianzu%2525202.svg)
+
+## The concept of #ProComponents
+
+Ant Design defines the basic design specification and provides a large number of basic components. However, for middle and backend applications, we want to provide a higher level of abstraction, provide higher level design specifications, and provide corresponding components so that developers can quickly build high quality pages.
+
+In ProComponents, we have a series of built-in design specifications and pre-defined common logic. For example, you can use ProTable as an Ant Design Table, and ProForm as a base component of Ant Design or as a custom component. We hope to further extend the capabilities of Ant Design by providing the ability to build high quality middle and backend applications quickly and efficiently with the Pro series components.
+
+## Design Ideas
+
+For almost any business, what we do is actually define a series of behaviors based on a state, take the table above as an example, first we need a state `dataSource` for storing the data requested from the server, and for optimizing the experience, we also need a `loading`. So we have a series of behaviors, we need to set `loading=true` first, then launch a network request, after the network request is completed, set `dataSource` for the requested data, `loading=false`, a network request is completed, although very simple, but a business system has a considerable number of tables, and each table is defined so once, the workload is very large.
+
+If you want to re-request the network, we need to encapsulate the behavior, the above behavior into a method, click to reload the data, if you have paging, then you need a new variable page, we need to go before the re-request according to the need to determine whether to reset the page to the first page, which introduces another variable. If your form also has to control the number of pages per page, then it will be even more cumbersome. This kind of repetitive work can waste a lot of our time.
+
+### One state plus a series of behaviors
+
+The above logic exists in almost all middle and backend development, each added state requires a series of behaviors to manage, and each behavior can be complex if coupled with too many states.
+
+Based on the same idea, ProTable wants to abstract a layer to solve the problem of complex state. The most common states in table are `loading` and `dataSource`, including the extended `page`, `pageSize`, which are actually So table abstracts a `request` api that encapsulates the loading and dataSource states and all their behaviors, such as previous page, next page, refresh, modify per-page size, and so on.
+
+This wrapping pattern allows the front-end to get away from all kinds of state management and focus on business development, and is more intuitive without the need for data flow solutions like dva, redux, etc. The developer only needs to define a state and the heavy component will automatically generate a set of behaviors.
+
+> For incremental use we also provide the same api as Ant Design, which can be completely downgraded to an Ant Design table.
+
+### A component ≈ a page
+
+Heavy components differ from traditional components in that they are abstracted as a page, so ProTable supports network requests and automatic query form generation, while ProLayout supports automatic menu generation, both based on the same idea of providing page-level abstraction.
+
+A list page should be done with ProLayout + ProTable, an edit page should be done with ProLayout + ProForm, and a detail page can be done with ProLayout + ProDescriptions. A page only needs to focus on a few heavy components in the development project, reducing the mental load and focusing on the more core business logic.
+
+### Design and style
+
+In actual development we often encounter design issues, such as whether the classic button should be placed on the left or right, how to layout the query form, how to format the date, and how to align the numbers, all of which are abstracted in the heavy component. For various behaviors and styles we have discussed and designed by designers, the default looks good and works well.
+
+## Contribute
+
+We welcome your contributions, and you can build with us by in the following ways 😊 :
+
+- Using Ant Design Pro, umi and ProComponents in your company or personal projects.
+- Report bugs or make inquiries via [Issue](http://github.com/ant-design/pro-components/issues).
+- Submit a [Pull Request](http://github.com/ant-design/pro-components/pulls) to improve the code of ProComponents.
+
+### Scaffolding overview
+
+When we clone the project we will see the following directory structure.
+
+```bash
+- .dumi             * Configuration for dumi, mainly themes, etc.
+- .github           * github actions and related issue configuration
+- docs              * the public documentation
+- packages          * The packages we maintain, if you want to contribute code, this is where you need to focus most
+- README.md         * The code that is displayed on the github homepage
+- tests             * The place to write test cases
+- public            * static files used to deploy the website
+- scripts           * scripts used for development or deployment
+- .prettierrc.js    * Configuration for prettier
+- .eslintrc.js      * configuration for eslint
+- .fatherrc.ts      * configuration for compile scaffolding
+- .umirc.js         * core configuration for dumi
+- webpack.config.js * configuration file for compiling the umd package
+- vitest.config.js    * configuration for the test environment
+- lerna.json        * configuration for multiple packages
+- package.json      * configuration for the project
+- tsconfig.json     * configuration for typescript
+- pnpm-lock.yaml    * dependency lock file
+
+```
+
+The `coverage` and `.umi` folders are special in that `coverage` is a test coverage file that appears after running test coverage, and `.umi` is some temporary files at runtime that are generated when `npm run start` is executed.
+
+### Source code overview
+
+The packages folder contains all our components, each of which generally has a `src`, `package.json` and `README.md`. `package.json` and `README.md` can be generated by running `npm run bootstrap` after creating a new folder.
+
+The real source code is in `src`, and we have agreed that the demos folder under `src` will store all the demos, and the `${package name}.md` file will be used to introduce the component and introduce the demos and API documentation.
+
+> We use the dumi syntax and require all external components to be introduced in code, which makes debugging easier.
+
+### Style Guide
+
+We use the automated code formatting software [`Prettier`](https://prettier.io/). After making changes to the code, run `npm run prettier`. Of course we recommend the prettier plugin to format the code whenever you want.
+
+> Our CI will check if the code is prettier, so it's a good idea to run `npm run prettier` before committing the code.
+
+After that, `linter` will catch most of the problems that may occur in the code. You can run `npm run lint` to check the code style status.
+
+However, there are some styles that `linter` can't handle. If you're not sure about something, check out [Airbnb's Style Guide](https://github.com/airbnb/javascript) to guide yourself.
+
+### Developing workflows
+
+We use [monorepo](https://danluu.com/monorepo/) to manage our repository in a way that the repository contains multiple separate packages so that changes can be co-located together, so that we can run test cases together, and if there is a problem with a change, we can quickly pinpoint the problem.
+
+The [`pnpm-workspace.yaml`](https://pnpm.io/pnpm-workspace_yaml) can help us share dependencies across multiple packages.
+
+After the installation is complete you can use the following command.
+
+- `pnpm start` to preview your changes
+- `pnpm lint` to check the code style
+- `pnpm tsc` to check if TypeScript conforms to the specification
+- `pnpm test` Test if the code passes the test case
+- `pnpm test:coverage` Test the test coverage of the repository
+- `pnpm build` Compile the current component library
+
+We recommend running `pnpm test` or the aforementioned linter to make sure that your code changes do not affect the original functionality and that every line of code you write is tested correctly, which will improve the overall quality of the component library anyway.
+
+If you add a new feature, please add tests before committing pr, so we can make sure your code doesn't have problems in the future.
+
+### Some conventions
+
+ProComponents is developed on top of antd. In order to maintain compatibility with antd's ecosystem, we require that styles that override antd must use `. @{ant-prefix}` variable to generate class names, which is configured in the js with the following code.
+
+```tsx | pure
+const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+const prefixCls = getPrefixCls('pro-${package name}');
+```

package/docs/docs/intro.md

@@ -0,0 +1,126 @@
+---
+title: 简介
+order: 1
+
+nav:
+  title: 文档
+  order: 1
+  path: /docs
+---
+
+![banner](https://gw.alipayobjects.com/zos/antfincdn/7VBnGHwjaW/bianzu%2525202.svg)
+
+## ProComponents 的理念
+
+Ant Design 定义了基础的设计规范，对应也提供了大量的基础组件。但是对于中后台类应用，我们希望提供更高程度的抽象，提供更上层的设计规范，并且提供相应的组件使得开发者可以快速搭建出高质量的页面。
+
+在 ProComponents 中我们内置了一系列的设计规范，预设了常用的逻辑。在这个基础上我们同样提供了灵活的支持，比如对于 ProTable 来说你也可以把它完全当做 Ant Design 的 Table 来用，对于 ProForm 来说你也可以直接使用 Ant Design 的基础组件或者你的自定义组件。我们希望通过 Pro 系列组件提供快速高效搭建高质量中后台应用的能力，进一步扩展 Ant Design 的能力，欢迎使用并提出宝贵的意见。
+
+## 设计思路
+
+对于几乎所有的业务来说，我们做的其实就是根据一个状态定义一系列的行为，以上面的 table 为例，首先我们需要一个状态 `dataSource` 用于存储从服务器请求的数据，为了优化体验，我们还需要一个 `loading`。于是我们就有了一系列的行为，我们需要先设置 `loading=true`，然后发起网络请求，网络请求完成之后就设置 `dataSource` 为请求回来的数据，`loading=false`，一个网络请求就完成了，虽然非常简单，但是一个业务系统有相当多的表格，每个表格都定义这么一次，这个工作量就非常大了。
+
+如果要重新请求网络，我们就需要封装一下行为，将以上的行为封装成一个方法，点击一下重新加载数据，如果你有分页，那么就需要新的变量 page，我们在重新请求之前需要去根据需要来判断一下是否将页面重置为第一页，这又引入了一个变量。如果你的表格还要控制每页的数量，那么将会更加繁杂。这种重复性的劳动会浪费掉我们的很多时间。
+
+### 一个状态加一系列行为
+
+以上的逻辑几乎存在于所有中后台开发中，每增加一个状态我们就需要一系列的行为来进行管理，每个行为如果耦合了太多的状态也会复杂到无以复加。
+
+碰上这种情况，几乎所有程序员都会想办法进行分层，基于同样的思路，ProTable 希望抽象出一层来解决掉复杂状态的问题，table 中最常用的状态就是 `loading` 和 `dataSource`，包括扩展的 `page`,`pageSize` 其实都是服务于网络状态，于是 table 抽象出了一个 `request` 的 api，在其中封装了 `loading` 和 `dataSource` 状态以及他们所有的行为，如上一页、下一页、重新刷新、修改每页大小等。
+
+这种封装模式可以让前端从各种状态管理中脱身出来，专注于业务开发，也不需要 dva，redux 等数据流的方案，更加符合直觉。开发者只需要定义一个状态，重型组件会自动生成一系列行为。
+
+> 为了渐进式使用我们也提供了与 Ant Design 相同的 api，完全可以降级成为一个 Ant Design 的 table 使用。
+
+### 一个组件 ≈ 一个页面
+
+重型组件区别于传统组件有个很大的不同，重型组件在抽象时是将其当成一个页面来进行处理，所以 ProTable 会支持网络请求和自动生成查询表单，而 ProLayout 会支持自动生成菜单，两者都基于同样的思想也就是提供页面级别的抽象。
+
+一个列表页应该可以用 ProLayout + ProTable 完成，一个编辑页应该使用 ProLayout + ProForm 完成，详情页可以用 ProLayout + ProDescriptions 完成。 一个页面在开发过程中只需要关注几个重型组件，降低心智负担，专注于更核心的业务逻辑。
+
+### 设计与样式
+
+在实际开发中我们也经常会碰到一些设计问题，比如经典的按钮应该放在左面还是右面，查询表单怎么布局，日期怎么格式化，数字的对齐问题，在重型组件中都进行了抽象，对于各种行为与样式我们都经过了设计师的讨论与设计，可以达到默认好看及好用。
+
+如果你还是想自定义相关渲染，可以通过自定义 valueType 的方式来实现。默认的不一定是最好的，但是一定不差。如果你要自定义，最好考虑一下投入产出比，毛坯房里雕花真的好吗？
+
+## 参与贡献
+
+我们非常欢迎你的贡献，你可以通过以下方式和我们一起共建 😊 ：
+
+- 在你的公司或个人项目中使用 Ant Design Pro，umi 和 ProComponents。
+- 通过 [Issue](http://github.com/ant-design/pro-components/issues) 报告 bug 或进行咨询。
+- 提交 [Pull Request](http://github.com/ant-design/pro-components/pulls) 改进 ProComponents 的代码。
+
+### 脚手架概览
+
+当我们 clone 完项目之后会看到如下的目录结构。
+
+```bash
+- .dumi              * dumi 的相关配置，主要是主题等
+- .github            * github 的 action 和相关的 issue 配置
+- docs               * 存放公用的文档
+- packages           * 我们维护的包, 如果你想贡献代码，这里是你最需要关注的
+- README.md          * 展示在 github 主页的代码
+- tests              * 编写测试用例的地方
+- public             * 部署官网所用的静态文件
+- scripts            * 开发或者部署所用的脚本
+- .prettierrc.js     * prettier 的相关配置
+- .eslintrc.js       * eslint 的配置
+- .fatherrc.ts       * 编译脚手架的配置
+- .umirc.js          * dumi 的核心配置
+- webpack.config.js  * 编译 umd 包的配置文件
+- vitest.config.js     * 测试环境的配置
+- lerna.json         * 多包的配置
+- package.json       * 项目的配置
+- tsconfig.json      * typescript 的配置
+- pnpm-lock.yaml     * 依赖 lock 文件
+```
+
+`coverage` 和 `.umi` 这两个文件夹比较特殊，`coverage` 是测试覆盖率文件，在跑完测试覆盖率后才会出现，`.umi` 是运行时的一些临时文件，在执行 `npm run start` 时生成。
+
+### 源码概览
+
+在 packages 文件夹中包含了我们所有的组件，每个组件一般都有一个 `src`，`package.json` 和 `README.md`。`package.json` 和 `README.md` 可以在新建文件夹后通过执行 `npm run bootstrap` 来生成。
+
+`src` 中就是我们真正的源码，我们约定 `src` 下会有 demos 文件夹里面会存储所有的 demo，并且 `${包名}.md` 的文件用于介绍这个组件，同时引入 demo 和 API 文档。
+
+> 我们使用了 dumi 的语法，要求全部使用外置组件，用 code 引入，调试起来会更加方便。
+
+### 风格指南
+
+我们使用自动化代码格式化软件 [`Prettier`](https://prettier.io/)。 对代码做出更改后，运行 `npm run prettier`。当然我们更推荐 prettier 的插件，随时格式化代码。
+
+> 我们的 CI 会检查代码是否被 prettier，在提交代码前最好执行一下 `npm run prettier`。
+
+之后，`linter` 会捕获代码中可能出现的多数问题。 你可以运行 `npm run lint` 来检查代码风格状态。
+
+不过，`linter` 也有不能搞定的一些风格。如果有些东西不确定，请查看 [Airbnb’s Style Guide](https://github.com/airbnb/javascript) 来指导自己。
+
+### 开发工作流
+
+我们使用了 [monorepo](https://danluu.com/monorepo/) 的方式来管理我们的仓库，仓库中包含多个独立的包，以便于更改可以一起联调，这样可以一起跑测试用例，如果变更出现问题，我们可以很快地定位到问题。
+
+[`pnpm-workspace.yaml`](https://pnpm.io/zh/pnpm-workspace_yaml) 可以帮助我们在多个包中共享依赖。
+
+安装完成后你可以使用以下命令：
+
+- `pnpm start` 预览你的改动
+- `pnpm lint` 检查代码风格
+- `pnpm tsc` 检查 TypeScript 是否符合规范
+- `pnpm test` 测试代码是否可以通过测试用例
+- `pnpm test:coverage` 测试仓库的测试覆盖率
+- `pnpm build` 编译当前组件库
+
+我们建议运行 `pnpm test` 或前文提及的 linter 以确保你的代码变更有没有影响原有功能，同时保证你写的每行代码都被正确地测试到，不管怎样这样都会提升组件库的整体质量。
+
+如果你增加了一个新功能，请添加测试后再提交 pr，这样我们能确保以后你的代码不出问题。
+
+### 一些约定
+
+ProComponents 基于 Ant Design 来开发，为了与 Ant Design 的生态保持兼容性，我们要求覆盖 Ant Design 的样式必须要使用 `${token.antCls}` 变量来生成类名，在 js 中使用如下代码来配置实现。
+
+```tsx | pure
+const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+const prefixCls = getPrefixCls('pro-${包名}');
+```

package/docs/index.en-US.md

@@ -0,0 +1,87 @@
+---
+title: ProComponents - Front-end components at page level
+hero:
+  title: ProComponents
+  description: 🏆  Make the development of middle and back office easier
+  actions:
+    - text: 🏮🏮 Introduction →
+      link: /en-US/docs
+
+features:
+  - image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr
+    title: Easy to use
+    description: It has its own packaging on Ant Design, which is easier to use
+
+  - image: https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg
+    title: Ant Design
+    description: It is in the same line with Ant Design design system and seamlessly connects with ant project
+
+  - image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr
+    title: Internationalization
+    description: Provide complete internationalization and connect with Ant Design system
+
+  - image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr
+    title: Preset Style
+    description: The style and style are in one continuous line with ant d, without magic modification, and naturally
+
+  - image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr
+    title: Preset behavior
+    description: Less code, fewer bugs
+
+  - image: https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg
+    title: TypeScript
+    description: Use TypeScript development to provide a complete type definition file
+
+footer: Open-source MIT Licensed | © 2017-present
+---
+
+ProComponents is a UI component library designed for enterprise-level applications using React. Some of the advantages of ProComponents include:
+
+- Rich component library: ProComponents provides a vast set of UI components, including tables, forms, charts, maps, tree views, and more, capable of meeting most of the requirements for enterprise applications.
+
+- Powerful features: ProComponents' components not only provide basic UI display functions but also have complex data manipulation and business logic processing capabilities, allowing rapid development of robust enterprise applications.
+
+- Easy to use: ProComponents has a simple, user-friendly API and comprehensive documentation, enabling developers to quickly learn and use the components.
+
+- Visual configuration support: ProComponents provides visual configuration tools for some components, making it easier for developers to complete simple component configuration work.
+
+- Highly customizable: ProComponents' components support multiple configurations and custom styles to meet the needs of different projects.
+
+In summary, ProComponents is a powerful, easy-to-use, customizable, and enterprise-level UI component library suitable for applications of all scales and types.
+
+### shortcoming
+
+ProComponents is a UI component library based on React and designed for enterprise-level applications. Although ProComponents has many advantages, there are also some disadvantages to consider:
+
+-Limited customization: ProComponents provides a rich set of components, but the customization options are relatively limited. It may be challenging to customize the components to meet specific project requirements.
+
+-Steep learning curve: ProComponents has a complex API and documentation, which can be challenging for beginners to understand and use. The learning curve may be steep, and it may take some time to become proficient in using the library.
+
+-Limited browser compatibility: ProComponents relies on modern browser features and may not work correctly on older browsers. This can limit the reach of the application and require additional development time to ensure cross-browser compatibility.
+
+-Heavy codebase: ProComponents has a large codebase, which can slow down the development process and make it more challenging to maintain the codebase over time.
+
+In summary, ProComponents is a powerful UI component library for enterprise applications, but it also has some limitations, such as limited customization, a steep learning curve, limited browser compatibility, and a heavy codebase. Developers should carefully evaluate their project requirements and constraints before choosing to use ProComponents.
+
+## Component Kanban
+
+| Components | Downloads | Versions |
+| --- | --- | --- |
+| pro-components | [![layout](https://img.shields.io/npm/dw/@ant-design/pro-components.svg)](https://www.npmjs.com/package/@ant-design/pro-components) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-components.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-components) |
+| pro-layout | [![layout](https://img.shields.io/npm/dw/@ant-design/pro-layout.svg)](https://www.npmjs.com/package/@ant-design/pro-layout) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-layout.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-layout) |
+| pro-table | [![table](https://img.shields.io/npm/dw/@ant-design/pro-table.svg)](https://www.npmjs.com/package/@ant-design/pro-table) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-table.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-table) |
+| pro-field | [![field](https://img.shields.io/npm/dw/@ant-design/pro-field.svg)](https://www.npmjs.com/package/@ant-design/pro-field) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-field.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-field) |
+| pro-form | [![form](https://img.shields.io/npm/dw/@ant-design/pro-form.svg)](https://www.npmjs.com/package/@ant-design/pro-form) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-form.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-form) |
+| pro-skeleton | [![skeleton](https://img.shields.io/npm/dw/@ant-design/pro-skeleton.svg)](https://www.npmjs.com/package/@ant-design/pro-skeleton) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-skeleton.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-skeleton) |
+| pro-list | [![list](https://img.shields.io/npm/dw/@ant-design/pro-list.svg)](https://www.npmjs.com/package/@ant-design/pro-list) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-list.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-list) |
+| pro-card | [![card](https://img.shields.io/npm/dw/@ant-design/pro-card.svg)](https://www.npmjs.com/package/@ant-design/pro-card) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-card.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-card) |
+| pro-descriptions | [![descriptions](https://img.shields.io/npm/dw/@ant-design/pro-card.svg)](https://www.npmjs.com/package/@ant-design/pro-descriptions) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-descriptions.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-descriptions) |
+
+## 🖥 Browser Compatibility
+
+- Modern browsers and Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11))
+- [Electron](https://www.electronjs.org/)
+
+| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) |
+| --- | --- | --- | --- | --- |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

package/docs/index.md

@@ -0,0 +1,56 @@
+---
+title: ProComponents - 页面级别的前端组件
+hero:
+  title: ProComponents
+  description: 🏆 让中后台开发更简单
+  actions:
+    - text: 🏮🏮 快速开始 →
+      link: /docs/intro
+
+footer: Open-source MIT Licensed | © 2017-present
+---
+
+ProComponents 是一个基于 React 的企业级 UI 组件库，它具有以下优点：
+
+- 丰富的组件库：ProComponents 提供了大量的 UI 组件，包括表格、表单、图表、地图、树形控件等，能够满足大多数企业应用的需求。
+
+- 功能强大：ProComponents 的组件不仅提供了基本的 UI 展示功能，还具备了复杂的数据操作和业务逻辑处理能力，能够快速构建出功能强大的企业应用。
+
+- 易于使用：ProComponents 提供了简单易用的 API 和完善的文档，使得开发者能够快速上手并使用其中的组件。
+
+- 支持可视化配置：ProComponents 提供了一些组件的可视化配置工具，能够使开发者更快速地完成一些简单的组件配置工作。
+
+- 高度可定制：ProComponents 的组件支持多种配置和样式自定义，能够满足不同项目的需求。
+
+总之，ProComponents 是一个功能丰富、易于使用、支持可视化配置和高度可定制的企业级 UI 组件库，适用于各种规模和类型的企业应用开发。
+
+### 缺点
+
+ProComponents 是一个基于 React 和 Ant Design 的组件库，它提供了很多常用的 UI 组件和业务组件，可以方便地帮助开发者快速搭建前端页面。虽然 ProComponents 具有很多优点，但是也有以下一些缺点：
+
+- 学习成本高：ProComponents 的组件库非常庞大，学习所有组件可能需要花费较长时间。因此，对于新手开发者来说，学习成本可能会比较高。
+
+- 样式定制难度大：ProComponents 组件库提供了很多可定制的属性，但是如果需要修改样式的话，可能需要较高的 CSS 技能水平，因为 Ant Design 的样式风格非常复杂，需要深入了解其样式系统才能进行定制。
+
+- 依赖项过多：ProComponents 依赖了很多第三方库和组件，这可能会增加项目的体积和加载时间。
+
+- 不支持 IE8 及以下浏览器：由于 ProComponents 采用了现代化的技术栈，所以不支持 IE8 及以下的浏览器，这可能会影响一些用户的体验。
+
+- 组件更新不够及时：虽然 ProComponents 提供了很多常用组件，但是一些新的 UI 组件可能不会及时添加到组件库中。
+
+总之，ProComponents 是一个非常优秀的组件库，但是也有一些缺点，开发者需要根据自己的具体情况权衡其利弊。
+
+## 组件看板
+
+| 组件 | 下载量 | 版本 |
+| --- | --- | --- |
+| pro-components | [![layout](https://img.shields.io/npm/dw/@ant-design/pro-components.svg)](https://www.npmjs.com/package/@ant-design/pro-components) | [![npm package](https://img.shields.io/npm/v/@ant-design/pro-components.svg?style=flat-square?style=flat-square)](https://www.npmjs.com/package/@ant-design/pro-components) |
+
+## 🖥 浏览器兼容性
+
+- 现代浏览器
+- [Electron](https://www.electronjs.org/)
+
+| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) |
+| --- | --- | --- | --- | --- |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

package/docs/playground/index.en-US.md

@@ -0,0 +1,14 @@
+---
+title: CRUD
+nav:
+  title: Playground
+  path: /playground
+---
+
+# CRUD
+
+ProTable，ProDescriptions，ProForm 都是基于 ProField 来进行封装。ProTable 和 ProDescriptions 根据 valueType 来渲染不同的 ProField，Form 则是通过不同的 FormField 来实现封装。
+
+使用同样的底层实现为 ProTable，ProDescriptions，ProForm 打通带来了便利。ProForm 可以很方便的实现只读模式，ProTable 可以快速实现查询表单和可编辑表格。ProDescriptions 可以实现节点编辑，以下有个例子可以切换三个组件。
+
+<code src="../../packages/table/src/demos/crud.tsx" iframe="650"></code>

package/docs/playground/index.md

@@ -0,0 +1,14 @@
+---
+title: CRUD
+nav:
+  title: Playground
+  path: /playground
+---
+
+# CRUD
+
+ProTable，ProDescriptions，ProForm 都是基于 ProField 来进行封装。ProTable 和 ProDescriptions 根据 valueType 来渲染不同的 ProField，Form 则是通过不同的 FormField 来实现封装。
+
+使用同样的底层实现为 ProTable，ProDescriptions，ProForm 打通带来了便利。ProForm 可以很方便的实现只读模式，ProTable 可以快速实现查询表单和可编辑表格。ProDescriptions 可以实现节点编辑，以下有个例子可以切换三个组件。
+
+<code src="../../packages/table/src/demos/crud.tsx" iframe="650"></code>

package/docs/playground/pro-descriptions.en-US.md

@@ -0,0 +1,10 @@
+---
+title: ProDescriptions
+nav:
+  title: Playground
+  path: /playground
+---
+
+# ProDescriptions Playground
+
+<code src="../../packages/descriptions/src/demos/dynamic-descriptions.tsx"  background="var(--main-bg-color)" title="属性展示"></code>

package/docs/playground/pro-descriptions.md

@@ -0,0 +1,10 @@
+---
+title: ProDescriptions
+nav:
+  title: Playground
+  path: /playground
+---
+
+# ProDescriptions Playground
+
+<code src="../../packages/descriptions/src/demos/dynamic-descriptions.tsx"  background="var(--main-bg-color)" title="属性展示"></code>