@digitalc/dxp-ui 0.0.5-alpha.7 → 0.0.5-alpha.9

package/README.md

@@ -4,12 +4,15 @@ React Component.
 
 ## Feature
 
-- React life cycle support @digitalc/dxp-ui component
+- React life cycle support [@digitalc/dxp-ui](https://www.npmjs.com/package/@digitalc/dxp-ui) component
+目前计划是提供基于antd5的基础组件库，分别 支持 TM、esales、GOMO 不同风格，后续提供全量定业务组件库。即可不用使用第三方组件，快速切换组件风格，同时支持业务组件库，方便业务组件二次开发。
 
 ## Install
 
 ```bash | pure
 npm install @digitalc/dxp-ui
+//  目前版本不稳定，推荐用官方源安装，如果其他源安装失败，可以设置 npm 的镜像源。
+npm config set registry https://registry.npmjs.org/
 ```
 
 ## Usage
@@ -17,40 +20,44 @@ npm install @digitalc/dxp-ui
 <!-- prettier-ignore -->
 ```tsx | pure
 import { Button } from '@digitalc/dxp-ui';
-// 后续完善打包工具后，会自动引入样式，无需手动引入，目前如果样式不对的情况下，需要手动引入样式
+// 后续完善打包工具后，会自动引入样式，目前如果样式不对的情况下，需要手动引入样式。
 import "@digitalc/dxp-ui/umd/dxp-ui.min.css"
 
 const Demo = () => {
-
     return (
-        <div style={{ margin: 20 }}>
-            <div>
-                <Button>
-                    Create Button
-                </Button>
-              </div>
-
-            <div style={{ height: 200 }} />
-        </div>
+        <>
+          <Button type="primary" className="abac">
+            Primary Button
+          </Button>
+
+          <Button>Default Button</Button>
+
+          <Button disabled>Disabled Button</Button>
+
+          <Button inverse type="primary">
+            inverse  Button
+          </Button>
+        </>
     );
 };
 
 export default Demo;
 ```
+
 注意：
 如果是使用的 Umi4、Vite 5 和 Turbopack 将原生支持智能样式编译的（：内置各种语言预处理工具），可以直接引用即可。
 
 但如果是 使用的 webpack 或 umi3 脚手架的前端项目，需要在内部的 webpack 配置less编译。（因为包是esm格式，并支持了按需加载，所以没编译less文件），具体是通过 webpack-chain 添加指定的包，并进行构建。
 
-
 ```
   chainWebpack(memo, { webpack, env }) {
+    // 额外 处理 dxp-ui-less...  需要安装 less-loader： npm install less-loader --save-dev
+
+     代码在下面，第4条。
 
   }
 ```
 
-
-
 ## 兼容 @digitalc/dxp-ui 组件库
 
 dxp-ui 使用了 antd5 做二次开发，但在"umi": "^3.x"项目中，已有组件库版本是 antd 4.x。
@@ -58,74 +65,88 @@ dxp-ui 使用了 antd5 做二次开发，但在"umi": "^3.x"项目中，已有
 
 整体兼容方案如下：
 
-1、安装两个版本npm(如果必须需要用到 antd4 版本,可以看这篇文章： antd 多版本共存)
+### 1、安装两个版本npm
 
-https://ant-design.antgroup.com/docs/react/migration-v5-cn#%E5%A4%9A%E7%89%88%E6%9C%AC%E5%85%B1%E5%AD%98
+如果必须需要用到 antd4 版本,可以看这篇 antd 多版本共存：
+https://ant-design.antgroup.com/docs/react/migration-v5-cn
 
 5.0 有哪些不兼容的变化: https://ant-design.antgroup.com/docs/react/migration-v5-cn
 
 ```bash
-    "@digitalc/dxp-ui": "^0.0.5-alpha.6",
-    "antd": "^5.24.5",
-    "antd4": "npm:antd@4.24.16", // 兼容 antd4 ，但需要把 antd 前缀让出来。
+在 package.json 文件，添加以下内容，并执行 npm install ：
+"@digitalc/dxp-ui": "^0.0.5-alpha.6",
+"antd": "^5.24.5",
+"antd4": "npm:antd@4.24.16", // 兼容 antd4 ，但需要把 antd 前缀让出来。
 ```
 
-2、在 umi.config.ts 中配置以下代码：
-
-替换压缩器为 esbuild，先安装依赖:
+### 2、在 umi.config.ts 中配置以下代码：
 
-```bash
-$ yarn add @umijs/plugin-esbuild
+```js
+export default {
+  antd: false, // 关闭 antd 的默认载入
+  esbuild: {},
+  // nodeModulesTransform: {
+  //   type: 'none',
+  // },
+};
 ```
 
-然后在配置里开启 esbuild 插件(比 webpack 快,非强制)：
+替换压缩器为 esbuild这一步是因为比 webpack 快,非强制，如果开启，需要安装依赖。
 
 ```bash
-export default {
-  esbuild: {},
-}
-
+$ yarn add @umijs/plugin-esbuild
 ```
 
 默认会处理 node_modules 中的代码，这个打开后就不会处理 node_modules 中的代码，导致打包格式不对。 Umi 以下配置不要打开（必须关闭）)。
 
-```bash
-  // nodeModulesTransform: {
-  //   type: 'none',
-  // },
-
+```js
+// nodeModulesTransform: {
+//   type: 'none',
+// },
 ```
 
-3、在 根 BaseLayout.jsx 中，引入 ConfigProvider
+### 3、在 根 BaseLayout.jsx 中，引入 ConfigProvider，将 children 用 ConfigProvider 包裹。
 
 ```js
-
 import { ConfigProvider as Antd5ConfigProvider } from 'antd';
 
 // antd5 配置前缀，防止与 antd4 css 冲突
- <Antd5ConfigProvider
-    prefixCls={'ant5'}
-    theme={{
-      cssVar: true,
-      hashed: false,
-    }}
-  >
-    {children}
-</Antd5ConfigProvider>
+<Antd5ConfigProvider
+  prefixCls={'ant5'}
+  theme={{
+    cssVar: true,
+    hashed: false,
+  }}
+>
+  {children}
+</Antd5ConfigProvider>;
 ```
 
+### 4、正常情况下，已经可用了，不需要配置额外操作（也不需要将之前的antd，改成antd4，直接用5覆盖，具体修改内容：看下v4 to v5 升级指南）。
 
-
-4、正常情况下，已经可用了，不需要配置额外操作（也不需要将之前的antd，改成antd4，直接用5覆盖，具体看下v4 to v5 升级指南）。
-
+```js
 import { Button as AntdBtn4 } from 'antd4';
 import { Button as AntdBtn5 } from 'antd';
 import { Button, IconButton, IconButtonGroup, Toast, Stepper } from '@digitalc/dxp-ui';
 
-如果出现 less 格式不对，则需要:
+
+<Button type="primary">Primary Button</Button>
+<AntdBtn4>antd4 Button</AntdBtn4>
+<AntdBtn5>antd5 Button</AntdBtn5>
+
+
+```
+
+示例图：
+
+![image.png](https://p.ipic.vip/xa5nz7.png)
+
+改完后，尽量对项目做全量测试。
+如果出现 less 格式不对，则需要做额外处理。
+
 原因是使用的 Umi4、Vite 5 和 Turbopack 将原生支持智能样式编译的（：内置各种语言预处理工具），可以直接引用即可。
 
-但如果是 使用的 webpack 或 umi3 脚手架的前端项目，需要在内部的 webpack 配置less编译。（因为包是esm格式，并支持了按需加载，所以没编译less文件），具体是通过 webpack-chain 添加指定的包，并进行构建。
+但如果是使用的 webpack 或 umi3 脚手架的前端项目，需要在内部的 webpack 配置less编译。（因为包是esm格式，并支持了按需加载，所以没编译less文件），具体是通过 webpack-chain 添加指定的包，并进行构建。
 
 ```bash
   chainWebpack(memo, { webpack, env }) {
@@ -149,3 +170,7 @@ import { Button, IconButton, IconButtonGroup, Toast, Stepper } from '@digitalc/d
       });
   }
 ```
+
+end。
+
+<img src="https://p.ipic.vip/xa5nz7.png" width="880" />

package/es/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>