tntd 2.7.28 → 2.7.29-beta.1

package/package.json

@@ -1,107 +1,106 @@
 {
-  "name": "tntd",
-  "version": "2.7.28",
-  "license": "MIT",
-  "dependencies": {
-    "@icon-park/react": "^1.3.5",
-    "@stellaris/hooks": "~0.4.6",
-    "classnames": "~2.3.1",
-    "@tntx/logo-icon": "~1.0.4",
-    "delete-all-cookies": "~0.3.0",
-    "styled-components": "^5.3.0",
-    "rc-util": "^5.25.2",
-    "rc-motion": "^2.6.1",
-    "array-tree-filter": "^2.1.0",
-    "rc-select": "~14.2.0",
-    "rc-tree": "~5.7.0",
-    "rc-overflow": "^1.0.0",
-    "rc-trigger": "^5.0.4",
-    "rc-virtual-list": "^3.4.13",
-    "rc-align": "^4.0.0",
-    "react-color": "^2.17.2",
-    "lodash": "~4.17.21",
-    "color-alpha": "~1.1.3",
-    "rc-segmented": "~2.2.2",
-    "rc-field-form": "~1.34.0",
-    "scroll-into-view-if-needed": "^2.2.25"
-  },
-  "devDependencies": {
-    "@react-types/shared": "^3.10.1",
-    "@types/react": "~16.14.23",
-    "@types/react-dom": "~16.9.14",
-    "@types/styled-components": "~5.1.26",
-    "@rushstack/eslint-config": "~2.5.1",
-    "@rushstack/heft": "~0.44.2",
-    "@rushstack/heft-storybook-plugin": "~0.1.91",
-    "@types/jest": "~28.1.6",
-    "@tntd/heft-rig": "0.1.0",
-    "@tntd/storybook-react-storykit": "0.0.0",
-    "antd": "^3.26.19",
-    "react": "~16.14.0",
-    "react-dom": "~16.14.0",
-    "jest": "~28.1.0",
-    "eslint-plugin-react-hooks": "~4.3.0",
-    "eslint": "~8.11.0",
-    "eslint-plugin-import": "~2.25.4",
-    "typescript": "~4.6.2",
-    "@types/lodash-es": "~4.17.6",
-    "@types/lodash": "~4.14.191",
-    "babel-plugin-lodash": "~3.3.4",
-    "@babel/cli": "~7.21.0",
-    "@babel/core": "~7.21.0",
-    "@babel/preset-env": "~7.20.2",
-    "moment": "~2.29.4"
-  },
-  "peerDependencies": {
-    "antd": "^3.0.0 || ^4.0.0",
-    "react": "^16.0.0 || ^17.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0"
-  },
-  "svgr": {
-    "typescript": true,
-    "memo": true,
-    "dimensions": false,
-    "filenameCase": "kebab",
-    "replaceAttrValues": {
-      "#126bfb": "currentColor"
+    "name": "tntd",
+    "version": "2.7.29-beta.1",
+    "license": "MIT",
+    "scripts": {
+        "start": "heft start --storybook",
+        "build": "heft build --clean && npm run build:es && npm run build:cjs && npm run post:build",
+        "build:es": "ES_MODULE=true babel es --out-dir es",
+        "build:cjs": "babel es --presets @babel/preset-env --out-dir lib",
+        "post:build": "node ./scripts/postbuild.js",
+        "build:watch": "heft build --clean --watch",
+        "watch": "rush build:watch --changed-projects-only --to-except tntd",
+        "svgr": "npx svgr ./svg --out-dir ./src/svg-components",
+        "test": "heft test",
+        "test:watch": "heft test --watch --clean"
     },
-    "ref": true
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.tongdun.cn:app/tntd.git"
-  },
-  "keywords": [
-    "react",
-    "component",
-    "components",
-    "framework",
-    "frontend",
-    "react-component",
-    "react-ui",
-    "tntd"
-  ],
-  "files": [
-    "lib",
-    "es",
-    "themes",
-    "LICENSE",
-    "README.md"
-  ],
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "typings": "lib/index.d.ts",
-  "scripts": {
-    "start": "heft start --storybook",
-    "build": "heft build --clean && npm run build:es && npm run build:cjs && npm run post:build",
-    "build:es": "ES_MODULE=true babel es --out-dir es",
-    "build:cjs": "babel es --presets @babel/preset-env --out-dir lib",
-    "post:build": "node ./scripts/postbuild.js",
-    "build:watch": "heft build --clean --watch",
-    "watch": "rush build:watch --changed-projects-only --to-except tntd",
-    "svgr": "npx svgr ./svg --out-dir ./src/svg-components",
-    "test": "heft test",
-    "test:watch": "heft test --watch --clean"
-  },
-  "readme": "# 组件介绍\ntntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。\n\n\n## 如何从 `tntd v1.0` 迁移到 `tntd v2.0`  \n\n### 安装 `tntd` 最新版本\n\n```\nnpm install tntd\n```\n\n### 更改配置\n\n1. 添加 .babelrc 中的 import 插件配置，实现按需引入\n\n```diff title=\".babelrc\"\n+  [\n+    \"import\",\n+    {\n+      \"libraryName\": \"tntd\",\n+      libraryDirectory: 'es',\n+    },\n+    \"tntd\"\n+  ],\n```\n\n2. 更改 webpack.config.js 中的主题配置\n\n```diff title=\"webpack.config.js\"\n{\n  loader: \"less-loader\",\n  options: {\n    javascriptEnabled: true,\n    ...\n    modifyVars: {\n-      hack: \"true; @import \\\"~@tntd/antd-cover/tnt.less\\\";\"\n+      hack: \"true; @import \\\"~tntd/themes/default/variables.less\\\";\"\n    }\n  }\n}\n```\n\n3. 修改导入名称\n\nLayout, Icon, Select 等 tntd 1.0 组件和 antd 组件名称存在冲突，请按下方例子进行重命名：\n\n```diff\n- import { Layout, Icon, Select } from 'tntd'\n+ import { TntdLayout, TntdIcon, TntdSelect } from 'tntd'\n```\n\n4. 更改配置\n\n```jsx\n// 使用全新的空状态插画\nimport { renderEmpty } from 'tntd'\n// 使用内置语言包替换 antd\n// 英文语言包\nconst enUS = import 'tntd/es/locale/en_US'\n// 中文语言包\nconst zhCN = import 'tntd/es/locale/zh_CN'\n\nexport const App = () => {\n  return (\n    // 使用空状态插画及语言包\n    <ConfigProvider locale={zhCN} renderEmpty={renderEmpty}>\n      ...\n    </ConfigProvider>\n  )\n}\n```\n"
-}
+    "dependencies": {
+        "@icon-park/react": "^1.3.5",
+        "@stellaris/hooks": "~0.4.6",
+        "classnames": "~2.3.1",
+        "@tntx/logo-icon": "~1.0.4",
+        "delete-all-cookies": "~0.3.0",
+        "styled-components": "^5.3.0",
+        "rc-util": "^5.25.2",
+        "rc-motion": "^2.6.1",
+        "array-tree-filter": "^2.1.0",
+        "rc-select": "~14.2.0",
+        "rc-tree": "~5.7.0",
+        "rc-overflow": "^1.0.0",
+        "rc-trigger": "^5.0.4",
+        "rc-virtual-list": "^3.4.13",
+        "rc-align": "^4.0.0",
+        "react-color": "^2.17.2",
+        "lodash": "~4.17.21",
+        "color-alpha": "~1.1.3",
+        "rc-segmented": "~2.2.2",
+        "rc-field-form": "~1.34.0",
+        "scroll-into-view-if-needed": "^2.2.25"
+    },
+    "devDependencies": {
+        "@react-types/shared": "^3.10.1",
+        "@types/react": "~16.14.23",
+        "@types/react-dom": "~16.9.14",
+        "@types/styled-components": "~5.1.26",
+        "@rushstack/eslint-config": "~2.5.1",
+        "@rushstack/heft": "~0.44.2",
+        "@rushstack/heft-storybook-plugin": "~0.1.91",
+        "@types/jest": "~28.1.6",
+        "@tntd/heft-rig": "workspace:*",
+        "@tntd/storybook-react-storykit": "workspace:*",
+        "antd": "^3.26.19",
+        "react": "~16.14.0",
+        "react-dom": "~16.14.0",
+        "jest": "~28.1.0",
+        "eslint-plugin-react-hooks": "~4.3.0",
+        "eslint": "~8.11.0",
+        "eslint-plugin-import": "~2.25.4",
+        "typescript": "~4.6.2",
+        "@types/lodash-es": "~4.17.6",
+        "@types/lodash": "~4.14.191",
+        "babel-plugin-lodash": "~3.3.4",
+        "@babel/cli": "~7.21.0",
+        "@babel/core": "~7.21.0",
+        "@babel/preset-env": "~7.20.2",
+        "moment": "~2.29.4"
+    },
+    "peerDependencies": {
+        "antd": "^3.0.0 || ^4.0.0",
+        "react": "^16.0.0 || ^17.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0"
+    },
+    "svgr": {
+        "typescript": true,
+        "memo": true,
+        "dimensions": false,
+        "filenameCase": "kebab",
+        "replaceAttrValues": {
+            "#126bfb": "currentColor"
+        },
+        "ref": true
+    },
+    "repository": {
+        "type": "git",
+        "url": "git@gitlab.tongdun.cn:app/tntd.git"
+    },
+    "keywords": [
+        "react",
+        "component",
+        "components",
+        "framework",
+        "frontend",
+        "react-component",
+        "react-ui",
+        "tntd"
+    ],
+    "files": [
+        "lib",
+        "es",
+        "themes",
+        "LICENSE",
+        "README.md"
+    ],
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "typings": "lib/index.d.ts"
+}

package/themes/default/variables.less

@@ -8,17 +8,134 @@
 @html-selector: html;
 
 // -------- Colors -----------
-@primary-color: @blue-6;
-@info-color: @blue-6;
-@success-color: @green-6;
-@processing-color: @blue-6;
-@error-color: @red-6;
-@highlight-color: @red-6;
-@warning-color: @gold-6;
+@primary-color: var(--blue-6);
+@info-color: var(--blue-6);
+@success-color: var(--green-6);
+@processing-color: var(--blue-6);
+@error-color: var(--red-6);
+@highlight-color: var(--red-6);
+@warning-color: var(--gold-6);
 @normal-color: #d9d9d9;
 @white: #fff;
 @black: #000;
 
+@blue-1: var(--blue-1);
+@blue-2: var(--blue-2);
+@blue-3: var(--blue-3);
+@blue-4: var(--blue-4);
+@blue-5: var(--blue-5);
+@blue-7: var(--blue-7);
+@blue-8: var(--blue-8);
+@blue-9: var(--blue-9);
+@blue-10: var(--blue-10);
+@purple-1: var(--purple-1);
+@purple-2: var(--purple-2);
+@purple-3: var(--purple-3);
+@purple-4: var(--purple-4);
+@purple-5: var(--purple-5);
+@purple-7: var(--purple-7);
+@purple-8: var(--purple-8);
+@purple-9: var(--purple-9);
+@purple-10: var(--purple-10);
+@cyan-1: var(--cyan-1);
+@cyan-2: var(--cyan-2);
+@cyan-3: var(--cyan-3);
+@cyan-4: var(--cyan-4);
+@cyan-5: var(--cyan-5);
+@cyan-7: var(--cyan-7);
+@cyan-8: var(--cyan-8);
+@cyan-9: var(--cyan-9);
+@cyan-10: var(--cyan-10);
+@green-1: var(--green-1);
+@green-2: var(--green-2);
+@green-3: var(--green-3);
+@green-4: var(--green-4);
+@green-5: var(--green-5);
+@green-7: var(--green-7);
+@green-8: var(--green-8);
+@green-9: var(--green-9);
+@green-10: var(--green-10);
+@magenta-1: var(--magenta-1);
+@magenta-2: var(--magenta-2);
+@magenta-3: var(--magenta-3);
+@magenta-4: var(--magenta-4);
+@magenta-5: var(--magenta-5);
+@magenta-7: var(--magenta-7);
+@magenta-8: var(--magenta-8);
+@magenta-9: var(--magenta-9);
+@magenta-10: var(--magenta-10);
+@pink-1: var(--pink-1);
+@pink-2: var(--pink-2);
+@pink-3: var(--pink-3);
+@pink-4: var(--pink-4);
+@pink-5: var(--pink-5);
+@pink-7: var(--pink-7);
+@pink-8: var(--pink-8);
+@pink-9: var(--pink-9);
+@pink-10: var(--pink-10);
+@red-1: var(--red-1);
+@red-2: var(--red-2);
+@red-3: var(--red-3);
+@red-4: var(--red-4);
+@red-5: var(--red-5);
+@red-7: var(--red-7);
+@red-8: var(--red-8);
+@red-9: var(--red-9);
+@red-10: var(--red-10);
+@orange-1: var(--orange-1);
+@orange-2: var(--orange-2);
+@orange-3: var(--orange-3);
+@orange-4: var(--orange-4);
+@orange-5: var(--orange-5);
+@orange-7: var(--orange-7);
+@orange-8: var(--orange-8);
+@orange-9: var(--orange-9);
+@orange-10: var(--orange-10);
+@yellow-1: var(--yellow-1);
+@yellow-2: var(--yellow-2);
+@yellow-3: var(--yellow-3);
+@yellow-4: var(--yellow-4);
+@yellow-5: var(--yellow-5);
+@yellow-7: var(--yellow-7);
+@yellow-8: var(--yellow-8);
+@yellow-9: var(--yellow-9);
+@yellow-10: var(--yellow-10);
+@volcano-1: var(--volcano-1);
+@volcano-2: var(--volcano-2);
+@volcano-3: var(--volcano-3);
+@volcano-4: var(--volcano-4);
+@volcano-5: var(--volcano-5);
+@volcano-7: var(--volcano-7);
+@volcano-8: var(--volcano-8);
+@volcano-9: var(--volcano-9);
+@volcano-10: var(--volcano-10);
+@geekblue-1: var(--geekblue-1);
+@geekblue-2: var(--geekblue-2);
+@geekblue-3: var(--geekblue-3);
+@geekblue-4: var(--geekblue-4);
+@geekblue-5: var(--geekblue-5);
+@geekblue-7: var(--geekblue-7);
+@geekblue-8: var(--geekblue-8);
+@geekblue-9: var(--geekblue-9);
+@geekblue-10: var(--geekblue-10);
+@lime-1: var(--lime-1);
+@lime-2: var(--lime-2);
+@lime-3: var(--lime-3);
+@lime-4: var(--lime-4);
+@lime-5: var(--lime-5);
+@lime-7: var(--lime-7);
+@lime-8: var(--lime-8);
+@lime-9: var(--lime-9);
+@lime-10: var(--lime-10);
+@gold-1: var(--gold-1);
+@gold-2: var(--gold-2);
+@gold-3: var(--gold-3);
+@gold-4: var(--gold-4);
+@gold-5: var(--gold-5);
+@gold-7: var(--gold-7);
+@gold-8: var(--gold-8);
+@gold-9: var(--gold-9);
+@gold-10: var(--gold-10);
 
 // Color used by default to control hover and active backgrounds and for
 // alert info backgrounds.

package/themes/utils/colorPalette.less

@@ -58,6 +58,18 @@
   };
 
   this.colorPalette = function(color, index) {
+    // 对antd 组件的 colorPalette()样式进行覆盖
+    if(color.startsWith('var')) {
+      const regex = /var\(--\w+-(\d+)\)/;
+      const match = color.match(regex);
+      const num = match[1];
+
+      if(num) {
+          return color.replace(num, index)
+      }
+      return color;
+    }
+
     var isLight = index <= 6;
     var hsv = tinycolor(color).toHsv();
     var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;