ProComponents 3.0 开发

.dumirc.ts

@@ -212,7 +212,7 @@ export default defineConfig({
             },
             {
               title: 'ProFormList',
-              link: '/en-US/components/group',
+              link: '/en-US/components/list',
             },
             {
               title: 'ProFormDependency',
@@ -335,7 +335,7 @@ export default defineConfig({
             },
             {
               title: 'ProFormList - 数据结构化',
-              link: '/components/group',
+              link: '/components/list',
             },
             {
               title: 'ProFormDependency - 数据联动',

.fatherrc.base.ts

@@ -5,9 +5,8 @@ export default defineConfig({
   esm: {
     input: 'src', // 默认编译目录
     output: 'es',
-    extraBabelPlugins: [[require.resolve('./scripts/replaceLib'), {}]],
     platform: 'browser', // 默认构建为 Browser 环境的产物
-    transformer: 'babel', // 默认使用 babel 以提供更好的兼容性
+    transformer: 'esbuild', // 默认使用 babel 以提供更好的兼容性
   },
   // 以下为 cjs 配置项启用时的默认值，有自定义需求时才需配置
   cjs: {
@@ -18,6 +17,6 @@ export default defineConfig({
     input: 'src', // 默认编译目录
     output: 'lib',
     platform: 'browser', // 默认构建为 Node.js 环境的产物
-    transformer: 'babel', // 默认使用 esbuild 以获得更快的构建速度
+    transformer: 'esbuild', // 默认使用 esbuild 以获得更快的构建速度
   },
 });

docs/components.en-US.md

@@ -140,7 +140,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    * @name Customize the edit schema
    * @description returns a node that will automatically wrap value and onChange
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

docs/components/customization-value-type.tsx

@@ -160,7 +160,7 @@ export default () => {
       valueTypeMap={{
         link: {
           render: (text) => <a>{text}</a>,
-          renderFormItem: (text, props) => (
+          formItemRender: (text, props) => (
             <Input placeholder="请输入链接" {...props?.fieldProps} />
           ),
         },
@@ -174,7 +174,7 @@ export default () => {
               </>
             );
           },
-          renderFormItem: (text, props) => (
+          formItemRender: (text, props) => (
             <TagList {...props} {...props?.fieldProps} />
           ),
         },

docs/components/schema.en-US.md

@@ -19,8 +19,8 @@ In the `ProComponents`, we have used the same definition as tables for component
 | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | Props passed to the rendering component. They are also passed when customizing |
 | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | Configuration passed to Form.Item |
 | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | The modified data is consumed by the rendering component defined by valueType |
-| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | Custom DOM for read-only mode. The `render` method only manages read-only mode, while the editing mode should use `renderFormItem` |
-| `renderFormItem` | `(schema,config,form) => React.ReactNode` | Custom editing mode that returns a ReactNode, automatically wrapping value and onChange |
+| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | Custom DOM for read-only mode. The `render` method only manages read-only mode, while the editing mode should use `formItemRender` |
+| `formItemRender` | `(schema,config,form) => React.ReactNode` | Custom editing mode that returns a ReactNode, automatically wrapping value and onChange |
 | `request` | `(params,props) => Promise<{label,value}[]>` | Requests network data remotely, usually used for selection-type components |
 | `params` | `Record<string, any>` | Additional parameters passed to `request`. The component does not process them, but changes will trigger a new data request in `request` |
 | `hideInForm` | `boolean` | Hidden in the form |
@@ -77,7 +77,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    *
    * @name Custom edit mode
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

docs/components/schema.md

@@ -19,8 +19,8 @@ apiHeader:false
 | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | 传给渲染的组件的 props，自定义的时候也会传递 |
 | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | 传递给 Form.Item 的配置 |
 | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | 修改的数据是会被 valueType 定义的渲染组件消费 |
-| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `renderFormItem` |
-| `renderFormItem` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange |
+| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `formItemRender` |
+| `formItemRender` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange |
 | `request` | `(params,props) => Promise<{label,value}[]>` | 从远程请求网络数据，一般用于选择类组件 |
 | `params` | `Record<string, any>` | 额外传递给 `request` 的参数，组件不做处理，但是变化会引起`request` 重新请求数据 |
 | `hideInForm` | `boolean` | 在 Form 中隐藏 |
@@ -77,7 +77,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    *
    * @name 自定义编辑模式
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

docs/components/valueType.tsx

@@ -6,7 +6,7 @@ const valueEnum = {
   all: { text: '全部', status: 'Default' },
   open: {
     text: '未解决',
-    status: 'Error',
+    status: 'Warning',
   },
   closed: {
     text: '已解决',

docs/playground/pro-form.en-US.md

@@ -15,4 +15,4 @@ ProForm 的主要功能是预设了很多 layout，如果需要切换只需要
 
 ## FormList
 
-<code src="../../packages/form/src/components/Group/demos/customize.tsx" title="ProForm.List" ></code>
+<code src="../../packages/form/src/components/FormItem/Group/demos/customize.tsx" title="ProForm.List" ></code>

docs/playground/pro-form.md

@@ -16,4 +16,4 @@ ProForm 的主要功能是预设了很多 layout，如果需要切换只需要
 
 ## FormList
 
-<code src="../../packages/form/src/components/Group/demos/customize.tsx" title="ProForm.List" ></code>
+<code src="../../packages/form/src/components/FormItem/Group/demos/customize.tsx" title="ProForm.List" ></code>

docs/playground/pro-layout.en-US.md

@@ -10,7 +10,3 @@ nav:
 ## Layout 自定义
 
 <code src="../../packages/layout/src/demos/dynamic-settings.tsx"  background="var(--main-bg-color)" title="属性展示"></code>
-
-## 水印自定义
-
-<code src="../../packages/layout/src/components/WaterMark/demos/custom.tsx" background="var(--main-bg-color)"></code>

docs/playground/pro-layout.md

@@ -11,7 +11,3 @@ nav:
 ## Layout 自定义
 
 <code src="../../packages/layout/src/demos/dynamic-settings.tsx"  background="var(--main-bg-color)" iframe="500" title="属性展示"></code>
-
-## 水印自定义
-
-<code src="../../packages/layout/src/components/WaterMark/demos/custom.tsx" background="var(--main-bg-color)" iframe="500"></code>

package.json

@@ -28,8 +28,9 @@
     "site": "npm run build && cross-env SITE_DEPLOY='TRUE' dumi build",
     "start": "npm run version && dumi dev",
     "sync:tnpm": "node -e 'require(\"./scripts/syncTNPM\")()'",
+    "test:ui": "npm run version && cross-env TZ=UTC vitest --ui",
     "test": "npm run version && cross-env TZ=UTC vitest --run",
-    "test:coverage": "npm run version && cross-env TZ=UTC TEST_LOG=none vitest  --coverage",
+    "test:coverage": "npm run version && pnpm --filter \"@ant-design/**\" build && cross-env TZ=UTC TEST_LOG=none vitest  --coverage",
     "test:update": "npm run version && cross-env TZ=UTC  vitest -u",
     "tsc": "tsc --noEmit",
     "tsc:duplicate": "tsc -p ./tests/tsconfig.duplicate.json",
@@ -68,7 +69,7 @@
     "@octokit/rest": "^18.12.0",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/chroma-js": "^2.4.4",
@@ -88,10 +89,12 @@
     "@umijs/doctor": "^1.2.1",
     "@umijs/fabric": "^4.0.1",
     "@umijs/plugin-analytics": "^0.2.4",
-    "@umijs/test": "^3.5.43",
-    "@umijs/test-utils": "^3.5.43",
-    "@umijs/utils": "^4.3.27",
+    "@umijs/test": "^3.5.42",
+    "@umijs/test-utils": "^3.5.42",
+    "@umijs/utils": "^4.3.10",
+    "@vitest/browser": "^2.0.4",
     "@vitest/coverage-istanbul": "^0.34.6",
+    "@vitest/ui": "^2.0.4",
     "animated-scroll-to": "^2.3.0",
     "antd": "^5.21.4",
     "antd-style": "^3.7.0",
@@ -116,6 +119,7 @@
     "father": "^4.5.0",
     "gh-pages": "^5.0.0",
     "glob": "^8.1.0",
+    "happy-dom": "^14.12.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^8.2.6",
     "jest-canvas-mock": "^2.5.2",
@@ -131,6 +135,7 @@
     "np": "^6.5.0",
     "nprogress": "^0.2.0",
     "octokit": "^1.8.1",
+    "playwright": "^1.45.3",
     "polished": "^4.3.1",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.4",
@@ -164,7 +169,7 @@
     "umi-request": "^1.4.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "vitest": "^1.6.0",
+    "vitest": "^2.0.4",
     "write-pkg": "^4.0.0",
     "xhr-mock": "^2.5.1",
     "yorkie": "^2.0.0",

packages/card/package.json

@@ -19,13 +19,6 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "es/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "types": "./es/index.d.ts"
-    }
-  },
   "files": [
     "lib",
     "es",
@@ -55,7 +48,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "antd": "^4.24.15 || ^5.11.2",
+    "antd": "^5.11.2",
     "react": ">=17.0.0"
   },
   "publishConfig": {

packages/card/src/components/Card/index.tsx

@@ -5,7 +5,7 @@ import { ConfigProvider, Tabs } from 'antd';
 import useBreakpoint from 'antd/es/grid/hooks/useBreakpoint';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
 import React, { useContext } from 'react';
 import type { Breakpoint, CardProps, Gutter } from '../../typing';
 import Actions from '../Actions';

packages/card/src/components/StatisticCard/index.tsx

@@ -9,9 +9,6 @@ import type { StatisticProps } from '../Statistic';
 import Statistic from '../Statistic';
 import { useStyle } from './style';
 
-import 'antd/lib/divider/style';
-import 'antd/lib/statistic/style';
-
 export type StatisticCardProps = {
   /** 图表配置 */
   chart?: React.ReactNode;

packages/card/src/components/TabPane/index.tsx

@@ -1,8 +1,8 @@
 import type { TabPaneProps, TabsProps } from 'antd';
 import { ConfigProvider, Tabs, version } from 'antd';
 import classNames from 'classnames';
-import toArray from 'rc-util/lib/Children/toArray';
-import { noteOnce } from 'rc-util/lib/warning';
+import toArray from 'rc-util/es/Children/toArray';
+import { noteOnce } from 'rc-util/es/warning';
 import React, { useContext } from 'react';
 import type { ProCardTabPaneProps, ProCardTabsProps } from '../../typing';
 import Card from '../Card';

packages/card/src/index.tsx

@@ -14,8 +14,6 @@ import type { ProCardProps } from './ProCard';
 import ProCard from './ProCard';
 import type { ProCardTabsProps } from './typing';
 
-import 'antd/lib/card/style';
-
 export { CheckCard, ProCard, Statistic, StatisticCard };
 export type {
   CheckCardGroupProps,

packages/card/src/typing.ts

@@ -1,5 +1,5 @@
 import type { TabPaneProps, TabsProps } from 'antd';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
+import type { LabelTooltipType } from 'antd/es/form/FormItemLabel';
 import type { ReactNode } from 'react';
 
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';

packages/components/package.json

@@ -20,13 +20,6 @@
   "unpkg": "dist/pro-components.min.js",
   "module": "es/index.js",
   "types": "es/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "types": "./es/index.d.ts"
-    }
-  },
   "files": [
     "dist",
     "lib",
@@ -55,7 +48,7 @@
     "@babel/runtime": "^7.16.3"
   },
   "peerDependencies": {
-    "antd": "^4.24.15 || ^5.11.2",
+    "antd": "^5.11.2",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },

packages/descriptions/package.json

@@ -19,13 +19,6 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "es/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "types": "./es/index.d.ts"
-    }
-  },
   "files": [
     "es",
     "dist",
@@ -54,7 +47,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "antd": "^4.24.15 || ^5.11.2",
+    "antd": "^5.11.2",
     "react": ">=17.0.0"
   },
   "publishConfig": {

packages/descriptions/src/demos/customization-value-type.tsx

@@ -102,7 +102,7 @@ export default () => {
         valueTypeMap: {
           link: {
             render: (text) => <a>{text}</a>,
-            renderFormItem: (text, props) => (
+            formItemRender: (text, props) => (
               <Input placeholder="请输入链接" {...props?.fieldProps} />
             ),
           },
@@ -116,7 +116,7 @@ export default () => {
                 </>
               );
             },
-            renderFormItem: (text, props) => (
+            formItemRender: (text, props) => (
               <TagList {...props} {...props?.fieldProps} />
             ),
           },

packages/descriptions/src/demos/editable.tsx

@@ -56,7 +56,7 @@ export default () => {
           title: '状态2',
           key: 'state2',
           dataIndex: 'state2',
-          renderFormItem: () => {
+          formItemRender: () => {
             return <Input placeholder="输入 Success 切换分值" />;
           },
         },