@oceanbase/codemod 0.2.5 → 0.2.7

package/README.md

@@ -1,8 +1,12 @@
 # OceanBase Codemod
 
-A collection of codemod scripts that help migrate to OceanBase Design using [jscodeshift](https://github.com/facebook/jscodeshift) and [postcss](https://github.com/postcss/postcss).(Inspired by [@oceanbase/codemod](https://github.com/ant-design/codemod-v5))
+A collection of codemod scripts that help migrate from `antd`, `@alipay/ob-ui`, `@alipay/tech-ui`, `@ant-design/pro-components` and `@ant-design/charts` to OceanBase Design System by using [jscodeshift](https://github.com/facebook/jscodeshift) and [postcss](https://github.com/postcss/postcss). (Inspired by [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5))
 
-[![NPM version](https://img.shields.io/npm/v/@oceanbase/codemod.svg?style=flat)](https://npmjs.org/package/@oceanbase/codemod) [![NPM downloads](http://img.shields.io/npm/dm/@oceanbase/codemod.svg?style=flat)](https://npmjs.org/package/@oceanbase/codemod) [![Github Action](https://github.com/oceanbase/design/actions/workflows/ci.yml/badge.svg)](https://github.com/oceanbase/design/actions/workflows/ci.yml)
+[![NPM version](https://img.shields.io/npm/v/@oceanbase/codemod.svg?style=flat)](https://npmjs.org/package/@oceanbase/codemod) [![NPM downloads](http://img.shields.io/npm/dm/@oceanbase/codemod.svg?style=flat)](https://npmjs.org/package/@oceanbase/codemod) [![Github Action](https://github.com/oceanbase/oceanbase-design/actions/workflows/ci.yml/badge.svg)](https://github.com/oceanbase/oceanbase-design/actions/workflows/ci.yml)
+
+## Prerequisite
+
+- `antd v5` is the prerequisite. If you are using `antd v4`, please refer to [Upgrade Guideline](https://ant-design.antgroup.com/docs/react/migration-v5).
 
 ## Usage
 
@@ -133,3 +137,137 @@ import utils and hooks from `@alipay/ob-util` to `@oceanbase/util`. Additionally
 
   export default Demo;
 ```
+
+### `style-to-token`
+
+transform fixed style to antd v5 design token.
+
+- React function components:
+
+```diff
+  import React from 'react';
+- import { Alert, Button } from '@oceanbase/design';
++ import { Alert, Button, theme } from '@oceanbase/design';
+
+  const Demo = () => {
++   const { token } = theme.useToken();
+    return (
+-     <div>
+-       <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
+-       <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+-     </div>
++     (<div>
++       <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
++       <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
++     </div>)
+    );
+  };
+
+export default Demo;
+```
+
+- React class components:
+
+```diff
+  import React from 'react';
+- import { Alert, Button } from '@oceanbase/design';
++ import { Alert, Button, token } from '@oceanbase/design';
+
+  class Demo extends React.PureComponent {
+    constructor(props) {
+      super(props);
+      this.state = {};
+    }
+
+    render() {
+      return (
+-       <div>
+-         <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '#d9d9d9' }} />
+-         <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+-       </div>
++       (<div>
++         <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBgLayout}` }} />
++         <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
++       </div>)
+      );
+    }
+  }
+
+  export default Demo;
+```
+
+- Static file (not react components):
+
+```diff
++ import { token } from '@oceanbase/design';
+  const colorMap = {
+-   info: '#1890ff',
+-   success: '#52c41a',
+-   warning: '#faad14',
+-   error: '#ff4D4F',
+-   border: '1px solid #d9d9d9',
++   info: token.colorInfo,
++   success: token.colorSuccess,
++   warning: token.colorWarning,
++   error: token.colorError,
++   border: `1px solid ${token.colorBorder}`,
+  };
+
+  function getColorList() {
+    return [
+      {
+        type: 'info',
+-       color: '#1890ff',
++       color: token.colorInfo,
+      },
+      {
+        type: 'success',
+-       color: '#52c41a',
++       color: token.colorSuccess,
+      },
+      {
+        type: 'warning',
+-       color: '#faad14',
++       color: token.colorWarning,
+      },
+      {
+        type: 'error',
+-       color: '#ff4D4F',
++       color: token.colorError,
+      },
+      {
+        type: 'border',
+-       color: '1px solid #d9d9d9',
++       color: `1px solid ${token.colorBorder}`,
+      },
+    ];
+  }
+```
+
+### `less-to-token`
+
+transform fixed less style to antd v5 design token.
+
+```diff
++ @import '~@oceanbase/design/es/theme/index.less';
+  .container {
+-   color: #1890ff;
+-   background: #52c41a;
+-   background-color: #faad14;
+-   border-color: #ff4D4F;
++   color: @colorInfo;
++   background: @colorSuccess;
++   background-color: @colorWarning;
++   border-color: @colorError;
+    .content {
+-     color: rgba(0, 0, 0, 0.85);
+-     background: rgba(0, 0, 0,0.65);
+-     background-color: rgba(0,0,0,0.45);
+-     border: 1px solid #d9d9d9;
++     color: @colorText;
++     background: @colorTextSecondary;
++     background-color: @colorTextTertiary;
++     border: 1px solid @colorBorder;
+    }
+  }
+```

package/bin/cli.js

@@ -8,7 +8,6 @@ const _ = require('lodash');
 const chalk = require('chalk');
 const isGitClean = require('is-git-clean');
 const updateCheck = require('update-check');
-const findUp = require('find-up');
 const semver = require('semver');
 const { run: jscodeshift } = require('jscodeshift/src/Runner');
 const execa = require('execa');
@@ -18,6 +17,7 @@ const commandExistsSync = require('command-exists').sync;
 const pkg = require('../package.json');
 const pkgUpgradeList = require('./upgrade-list');
 const { getDependencies } = require('../transforms/utils/marker');
+const { lessToToken } = require('../transforms/less-to-token');
 
 // jscodeshift codemod scripts dir
 const transformersDir = path.join(__dirname, '../transforms');
@@ -31,6 +31,8 @@ const transformers = [
   'obui-to-oceanbase-design-and-ui',
   'obutil-to-oceanbase-util',
   'page-container-to-oceanbase-ui',
+  'style-to-token',
+  'less-to-token',
 ];
 
 const dependencyProperties = [
@@ -113,12 +115,15 @@ async function transform(transformer, parser, filePath, options) {
   });
 
   try {
-    if (process.env.NODE_ENV === 'local') {
-      console.log(`Running jscodeshift with: ${JSON.stringify(args)}`);
+    if (transformer === 'less-to-token') {
+      await lessToToken(filePath);
+    } else {
+      if (process.env.NODE_ENV === 'local') {
+        console.log(`Running jscodeshift with: ${JSON.stringify(args)}`);
+      }
+      // js part
+      await jscodeshift(transformerPath, [filePath], args);
     }
-
-    // js part
-    await jscodeshift(transformerPath, [filePath], args);
     console.log();
   } catch (err) {
     console.error(err);
@@ -286,7 +291,7 @@ async function bootstrap() {
     console.log('[Prettier] format files running...');
     try {
       const isDir = isDirectory.sync(dir);
-      const path = isDir ? '**/*.{js,jsx,tsx,ts,d.ts}' : dir;
+      const path = isDir ? path.join(dir, '**/*.{js,jsx,ts,tsx,d.ts}') : dir;
       const npxCommand = commandExistsSync('tnpx') ? 'tnpx' : 'npx';
       await execa(npxCommand, ['prettier', '--write', path], { stdio: 'inherit' });
       console.log('\n[Prettier] format files completed!\n');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -10,7 +10,7 @@
   "homepage": "https://github.com/oceanbase/oceanbase-design/packages/codemod",
   "repository": {
     "type": "git",
-    "url": "git@github.com:oceanbase/design.git"
+    "url": "git@github.com:oceanbase/oceanbase-design.git"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -32,8 +32,10 @@
     "is-git-clean": "^1.1.0",
     "jscodeshift": "^0.15.0",
     "lodash": "^4.17.21",
+    "postcss": "^8.4.31",
+    "postcss-less": "^6.0.0",
     "prettier": "^3.0.3",
-    "read-pkg-up": "^9.1.0",
+    "read-pkg-up": "^10.1.0",
     "semver": "^7.5.4",
     "update-check": "^1.5.4",
     "yargs-parser": "^21.1.1"
@@ -44,5 +46,5 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2"
   },
-  "gitHead": "265c33e6cc878f7b00c14518850c93c91749353b"
+  "gitHead": "641619d79cb7980279179b21905141950c604c54"
 }

package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less

@@ -0,0 +1,12 @@
+.container {
+  color: #1890ff;
+  background: #52c41a;
+  background-color: #faad14;
+  border-color: #ff4D4F;
+  .content {
+    color: rgba(0, 0, 0, 0.85);
+    background: rgba(0, 0, 0,0.65);
+    background-color: rgba(0,0,0,0.45);
+    border: 1px solid #d9d9d9;
+  }
+}

package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less

@@ -0,0 +1,13 @@
+@import '~@oceanbase/design/es/theme/index.less';
+.container {
+  color: @colorInfo;
+  background: @colorSuccess;
+  background-color: @colorWarning;
+  border-color: @colorError;
+  .content {
+    color: @colorText;
+    background: @colorTextSecondary;
+    background-color: @colorTextTertiary;
+    border: 1px solid @colorBorder;
+  }
+}

package/transforms/__testfixtures__/less-to-token/obui-less-to-token.input.less

@@ -0,0 +1,14 @@
+@import '~@alipay/ob-ui/es/theme/index.less';
+
+.container {
+  color: @colorInfo;
+  background: @colorSuccess;
+  background-color: @colorWarning;
+  border-color: @colorError;
+  .content {
+    color: rgba(0, 0, 0, 0.85);
+    background: rgba(0, 0, 0,0.65);
+    background-color: rgba(0,0,0,0.45);
+    border: 1px solid #d9d9d9;
+  }
+}

package/transforms/__testfixtures__/less-to-token/obui-less-to-token.output.less

@@ -0,0 +1,13 @@
+@import '~@oceanbase/design/es/theme/index.less';
+.container {
+  color: @colorInfo;
+  background: @colorSuccess;
+  background-color: @colorWarning;
+  border-color: @colorError;
+  .content {
+    color: @colorText;
+    background: @colorTextSecondary;
+    background-color: @colorTextTertiary;
+    border: 1px solid @colorBorder;
+  }
+}

package/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/locale.input.js

@@ -0,0 +1,8 @@
+import enUS from '@alipay/ob-ui/es/locale/en-US';
+import zhCN from '@alipay/ob-ui/es/locale/zh-CN';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/locale.output.js

@@ -0,0 +1,8 @@
+import enUS from '@oceanbase/ui/es/locale/en-US';
+import zhCN from '@oceanbase/ui/es/locale/zh-CN';
+
+const Demo = () => {
+  return <div />;
+};
+
+export default Demo;

package/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.input.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Alert, Button, BasicLayout, Login, PageContainer } from '@alipay/ob-ui';
+import { Alert, Button, BackgroundTaskManager, BackgroundTaskManagerConstants, BasicLayout, Boundary, ConfigProvider, ContentWithQuestion, IconFont, Login, PageContainer, Ranger, theme, TreeSearch } from '@alipay/ob-ui';
+import type { BackgroundTaskManagerRef, ITaskMgrPreset, ITaskMgrQueue, TaskMgrID } from '@alipay/ob-ui';
 import type { BasicLayoutProps } from '@alipay/ob-ui/es/BasicLayout';
 import type { LoginProps } from '@alipay/ob-ui/es/Login';
 import type { PageContainerProps } from '@alipay/ob-ui/es/PageContainer';

package/transforms/__testfixtures__/obui-to-oceanbase-design-and-ui/obui.output.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Alert, Button } from '@oceanbase/design';
-import { BasicLayout, Login, PageContainer } from '@oceanbase/ui';
+import { Alert, Button, ConfigProvider, theme } from '@oceanbase/design';
+import { BackgroundTaskManager, BackgroundTaskManagerConstants, BasicLayout, Boundary, ContentWithQuestion, IconFont, Login, PageContainer, Ranger, TreeSearch } from '@oceanbase/ui';
+import type { BackgroundTaskManagerRef, ITaskMgrPreset, ITaskMgrQueue, TaskMgrID } from '@oceanbase/ui';
 import type { BasicLayoutProps } from '@oceanbase/ui/es/BasicLayout';
 import type { LoginProps } from '@oceanbase/ui/es/Login';
 import type { PageContainerProps } from '@oceanbase/ui/es/PageContainer';

package/transforms/__testfixtures__/style-to-token/class-component.input.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Alert, Button } from '@oceanbase/design';
+
+class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
+        <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      </div>
+    );
+  }
+}
+
+export default Demo;

package/transforms/__testfixtures__/style-to-token/class-component.output.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Alert, Button, token } from '@oceanbase/design';
+
+class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      (<div>
+        <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
+        <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      </div>)
+    );
+  }
+}
+
+export default Demo;

package/transforms/__testfixtures__/style-to-token/function-component.input.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert, Button } from '@oceanbase/design';
+
+const Demo = () => {
+  return (
+    <div>
+      <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+    </div>
+  );
+};
+
+export default Demo;

package/transforms/__testfixtures__/style-to-token/function-component.output.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Alert, Button, theme } from '@oceanbase/design';
+
+const Demo = () => {
+  const { token } = theme.useToken();
+  return (
+    (<div>
+      <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+    </div>)
+  );
+};
+
+export default Demo;

package/transforms/__testfixtures__/style-to-token/static.input.js

@@ -0,0 +1,32 @@
+const colorMap = {
+  info: '#1890ff',
+  success: '#52c41a',
+  warning: '#faad14',
+  error: '#ff4D4F',
+  border: '1px solid #d9d9d9',
+};
+
+function getColorList() {
+  return [
+    {
+      type: 'info',
+      color: '#1890ff',
+    },
+    {
+      type: 'success',
+      color: '#52c41a',
+    },
+    {
+      type: 'warning',
+      color: '#faad14',
+    },
+    {
+      type: 'error',
+      color: '#ff4D4F',
+    },
+    {
+      type: 'border',
+      color: '1px solid #d9d9d9',
+    },
+  ];
+}

package/transforms/__testfixtures__/style-to-token/static.output.js

@@ -0,0 +1,33 @@
+import { token } from '@oceanbase/design';
+const colorMap = {
+  info: token.colorInfo,
+  success: token.colorSuccess,
+  warning: token.colorWarning,
+  error: token.colorError,
+  border: `1px solid ${token.colorBorder}`,
+};
+
+function getColorList() {
+  return [
+    {
+      type: 'info',
+      color: token.colorInfo,
+    },
+    {
+      type: 'success',
+      color: token.colorSuccess,
+    },
+    {
+      type: 'warning',
+      color: token.colorWarning,
+    },
+    {
+      type: 'error',
+      color: token.colorError,
+    },
+    {
+      type: 'border',
+      color: `1px solid ${token.colorBorder}`,
+    },
+  ];
+}

package/transforms/__tests__/less-to-token.test.ts

@@ -0,0 +1,21 @@
+import fs from 'fs';
+import path from 'path';
+import { transform } from '../less-to-token';
+
+const testUnit = 'less-to-token';
+const tests = ['antd-v4-less-to-token', 'obui-less-to-token'];
+
+describe(testUnit, () => {
+  tests.forEach(test => {
+    it(test, async () => {
+      const result = await transform(
+        path.join(__dirname, `../__testfixtures__/less-to-token/${test}.input.less`)
+      );
+      const output = fs.readFileSync(
+        path.join(__dirname, `../__testfixtures__/less-to-token/${test}.output.less`),
+        'utf-8'
+      );
+      expect(result).toEqual(output);
+    });
+  });
+});

package/transforms/__tests__/obui-to-oceanbase-design-and-ui.test.ts

@@ -1,7 +1,7 @@
 import { defineTest } from 'jscodeshift/src/testUtils';
 
 const testUnit = 'obui-to-oceanbase-design-and-ui';
-const tests = ['obui'];
+const tests = ['obui', 'locale'];
 
 describe(testUnit, () => {
   tests.forEach(test =>

package/transforms/__tests__/style-to-token.test.ts

@@ -0,0 +1,10 @@
+import { defineTest } from 'jscodeshift/src/testUtils';
+
+const testUnit = 'style-to-token';
+const tests = ['function-component', 'class-component', 'static'];
+
+describe(testUnit, () => {
+  tests.forEach(test =>
+    defineTest(__dirname, testUnit, {}, `${testUnit}/${test}`, { parser: 'babylon' })
+  );
+});

package/transforms/less-to-token.js

@@ -0,0 +1,87 @@
+const path = require('path');
+const fs = require('fs');
+const postcss = require('postcss');
+const postcssLess = require('postcss-less');
+const isDirectory = require('is-directory');
+const { tokenParse } = require('./utils/token');
+
+/**
+ * 搜索目录下所有的less文件
+ * @param dir
+ * @returns
+ */
+const findAllLessFiles = dir => {
+  const lessFiles = [];
+  const isDir = isDirectory.sync(dir);
+  if (isDir) {
+    const files = fs.readdirSync(dir);
+    files.forEach(file => {
+      const filePath = path.join(dir, file);
+      if (isDirectory.sync(filePath)) {
+        if (filePath.includes('.umi')) {
+          return;
+        }
+        lessFiles.push(...findAllLessFiles(filePath));
+      } else if (file.endsWith('.less')) {
+        lessFiles.push(filePath);
+      }
+    });
+  } else {
+    lessFiles.push(dir);
+  }
+  return lessFiles;
+};
+
+/**
+ * 将 lesscode 转化为 ast
+ * @returns ASR
+ */
+const less2AST = code =>
+  postcss([])
+    .process(code, {
+      parser: postcssLess.parse,
+      from: undefined,
+    })
+    .then(result => result.root);
+
+async function transform(file) {
+  const content = fs.readFileSync(file, 'utf-8');
+  const ast = await less2AST(content);
+  let modified = false;
+  let tokenLessImported = false;
+  // 遍历 AST
+  ast.walk(node => {
+    const { key, token, formattedValue } = tokenParse(node.value);
+    if (node.type === 'decl' && token) {
+      node.value = formattedValue.replace(key, `@${token}`);
+      modified = true;
+    } else if (node.type === 'atrule' && node.name === 'import') {
+      if (node.params === "'~@oceanbase/design/es/theme/index.less'") {
+        tokenLessImported = true;
+      } else if (node.params === "'~@alipay/ob-ui/es/theme/index.less'") {
+        node.remove();
+      }
+    }
+  });
+  // prepend @import '~@oceanbase/design/es/theme/index.less';
+  if (modified && !tokenLessImported) {
+    ast.prepend({
+      name: 'import',
+      params: "'~@oceanbase/design/es/theme/index.less'",
+    });
+  }
+  return ast.toString();
+}
+
+async function lessToToken(file) {
+  const allLessFiles = findAllLessFiles(file);
+  for await (const item of allLessFiles) {
+    const content = await transform(item);
+    fs.writeFileSync(file, content);
+  }
+}
+
+module.exports = {
+  transform,
+  lessToToken,
+};

package/transforms/obui-to-oceanbase-design-and-ui.js

@@ -12,32 +12,62 @@ module.exports = (file, api, options) => {
           'PageContainer',
           'Action',
           'BackgroundTaskManager',
+          'BackgroundTaskManagerConstants',
           'BasicLayout',
           'BatchOperationBar',
           'Boundary',
           'ContentWithQuestion',
           'Dialog',
           'DocDialog',
+          'FullscreenBox',
+          'Highlight',
           'GraphToolbar',
+          'IconFont',
           'Login',
           'Lottie',
           'NavMenu',
+          'Password',
+          'Ranger',
+          'SideTip',
+          'TaskGraph',
+          'TreeSearch',
+          'Welcome',
         ],
         types: [
           'PageContainerProps',
           'ActionProps',
+          // BackgroundTaskManager
           'BackgroundTaskManagerProps',
+          'BackgroundTaskManagerRef',
+          'ITaskMgrPreset',
+          'ITaskMgrQueue',
+          'TaskMgrID',
           'BasicLayoutProps',
           'BatchOperationBarProps',
           'BoundaryProps',
           'ContentWithQuestionProps',
           'DialogProps',
           'DocDialogProps',
+          'FullscreenBoxProps',
           'GraphToolbarProps',
+          'HighlightProps',
+          'IconFontProps',
           'LoginProps',
           'LottieProps',
           'NavMenuProps',
+          'PasswordProps',
+          // Ranger
+          'RangerProps',
+          'QuickPickerProps',
+          'SideTipProps',
+          'TaskGraphProps',
+          // TreeSearch
+          'TreeSearchProps',
+          'TreeSearchRef',
+          'Node',
+          'WelcomeProps',
         ],
+        paths: ['/locale/', '/locale/'],
       },
       {
         name: '@oceanbase/design',

package/transforms/style-to-token.js

@@ -0,0 +1,77 @@
+const { addSubmoduleImport } = require('./utils');
+const { tokenParse } = require('./utils/token');
+const { printOptions } = require('./utils/config');
+
+function importComponent(j, root, options) {
+  let hasChanged = false;
+
+  const stringList = root.find(j.StringLiteral, {
+    value: value => {
+      const { token } = tokenParse(value);
+      return !!token;
+    },
+  });
+  if (stringList.length > 0) {
+    // replace fixed style to token
+    stringList.replaceWith(path => {
+      hasChanged = true;
+      const { key, token, formattedValue } = tokenParse(path.value.value);
+      return formattedValue === key
+        ? j.identifier(`token.${token}`)
+        : j.templateLiteral(
+            [
+              j.templateElement(
+                {
+                  raw: formattedValue.replace(key, `\${token.${token}}`),
+                  cooked: formattedValue.replace(key, `\${token.${token}}`),
+                },
+                true
+              ),
+            ],
+            []
+          );
+    });
+
+    root.find(j.BlockStatement).forEach(path => {
+      const includeToken =
+        j(path).find(j.Identifier, {
+          name: name => name?.includes('token.'),
+        }).length > 0;
+      if (includeToken) {
+        const includeJsxElementList = j(path).find(j.JSXElement).length > 0;
+        const parentType = path.parentPath.value?.type;
+        // React function component
+        if (includeJsxElementList && parentType !== 'ClassMethod') {
+          const importString = `const { token } = theme.useToken()`;
+          path.get('body').value.unshift(j.expressionStatement(j.identifier(importString)));
+          // import theme from @oceanbase/design
+          addSubmoduleImport(j, root, {
+            moduleName: '@oceanbase/design',
+            importedName: 'theme',
+            importKind: 'value',
+          });
+        } else {
+          // React class component and static file (not react component)
+          // import token from @oceanbase/design
+          addSubmoduleImport(j, root, {
+            moduleName: '@oceanbase/design',
+            importedName: 'token',
+            importKind: 'value',
+          });
+        }
+      }
+    });
+  }
+
+  return hasChanged;
+}
+
+module.exports = (file, api, options) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  let hasChanged = false;
+  hasChanged = importComponent(j, root, options) || hasChanged;
+
+  return hasChanged ? root.toSource(options.printOptions || printOptions) : null;
+};

package/transforms/utils/config.js

@@ -1,6 +1,7 @@
 // https://github.com/benjamn/recast/blob/master/lib/options.ts
 const printOptions = {
   quote: 'single',
+  wrapColumn: 500,
 };
 
 module.exports = {

package/transforms/utils/import-component.js

@@ -3,6 +3,7 @@ const { markDependency } = require('./marker');
 const { printOptions } = require('./config');
 const { isPlainObject } = require('lodash');
 const { flatten } = require('lodash');
+const { some } = require('lodash');
 
 function importComponent(j, root, options) {
   const { fromPkgNames, toPkgList } = options;
@@ -19,15 +20,18 @@ function importComponent(j, root, options) {
       path.value.specifiers.forEach(specifier => {
         const toPkgByComponents = toPkgList.find(
           toPkg =>
-            toPkg.components?.includes(specifier.imported.name) ||
-            toPkg.components?.find(component => component[specifier.imported.name])
+            toPkg.components?.includes(specifier.imported?.name) ||
+            toPkg.components?.find(component => component[specifier.imported?.name])
         );
         const toPkgByTypes = toPkgList.find(
           toPkg =>
-            toPkg.types?.includes(specifier.imported.name) ||
-            toPkg.types?.find(type => type[specifier.imported.name])
+            toPkg.types?.includes(specifier.imported?.name) ||
+            toPkg.types?.find(type => type[specifier.imported?.name])
         );
-        const toPkg = toPkgByComponents || toPkgByTypes;
+        const toPkgByPaths = toPkgList.find(toPkg =>
+          some(toPkg.paths, pathString => path.value.source.value?.includes(pathString))
+        );
+        const toPkg = toPkgByComponents || toPkgByTypes || toPkgByPaths;
         if (toPkg) {
           // replace to toPkg for xxx/es/xxx、xxx/lib/xxx
           if (new RegExp(`${fromPkgName}/(es|lib|locale)/`).test(path.value.source.value)) {
@@ -35,17 +39,17 @@ function importComponent(j, root, options) {
           } else {
             // remove old imports
             path.value.specifiers = path.value.specifiers.filter(
-              item => !item.imported || item.imported.name !== specifier.imported.name
+              item => !item.imported || item.imported?.name !== specifier.imported?.name
             );
             const renameComponent = toPkg.components?.find(
-              component => component[specifier.imported.name]
+              component => component[specifier.imported?.name]
             );
-            const renameType = toPkg.types?.find(type => type[specifier.imported.name]);
+            const renameType = toPkg.types?.find(type => type[specifier.imported?.name]);
             const rename = renameComponent || renameType;
             // add and rename new imports
             addSubmoduleImport(j, root, {
               moduleName: toPkg.name,
-              importedName: rename ? rename[specifier.imported.name] : specifier.imported.name,
+              importedName: rename ? rename[specifier.imported?.name] : specifier.imported?.name,
               importKind: toPkgByTypes ? 'type' : 'value',
               after: fromPkgName,
             });
@@ -53,10 +57,10 @@ function importComponent(j, root, options) {
             if (rename) {
               root
                 .find(j.Identifier, {
-                  name: specifier.imported.name,
+                  name: specifier.imported?.name,
                 })
                 .forEach(path => {
-                  path.node.name = rename[specifier.imported.name];
+                  path.node.name = rename[specifier.imported?.name];
                 });
             }
           }

package/transforms/utils/index.js

@@ -138,7 +138,9 @@ function addModuleImport(j, root, { pkgName, importSpecifier, importKind, before
 
           return a.imported.name.localeCompare(b.imported.name);
         });
-        return j.importDeclaration(mergedImportSpecifiers, j.literal(pkgName));
+        const importStatement = j.importDeclaration(mergedImportSpecifiers, j.literal(pkgName));
+        importStatement.importKind = importKind;
+        return importStatement;
       });
     return true;
   }
@@ -149,7 +151,7 @@ function addModuleImport(j, root, { pkgName, importSpecifier, importKind, before
 
   if (before) {
     insertImportBefore(j, root, { importStatement, importKind, beforeModule: before });
-  } else if (after) {
+  } else {
     insertImportAfter(j, root, { importStatement, importKind, afterModule: after });
   }
 

package/transforms/utils/token.js

@@ -0,0 +1,62 @@
+const { toLower } = require('lodash');
+
+const TOKEN_MAP = {
+  // antd style => token
+  '#1677ff': 'colorInfo',
+  '#1890ff': 'colorInfo',
+  '#73d13d': 'colorSuccess',
+  '#52c41a': 'colorSuccess',
+  '#faad14': 'colorWarning',
+  '#ff4d4f': 'colorError',
+  '#F5222D': 'colorError',
+  '#F8636B': 'colorError',
+  '#d9d9d9': 'colorBorder',
+  '#bfbfbf': 'colorBorder',
+  '#f0f2f5': 'colorBgLayout',
+  '#fafafa': 'colorBgLayout',
+  '#fff': 'colorBgContainer',
+  '#ffffff': 'colorBgContainer',
+  'rgba(0,0,0,0.85)': 'colorText',
+  'rgba(0,0,0,0.65)': 'colorTextSecondary',
+  'rgba(0,0,0,0.45)': 'colorTextTertiary',
+  'rgba(0,0,0,0.25)': 'colorTextQuaternary',
+  'rgba(0,0,0,0.2)': 'colorFillQuaternary',
+  'rgba(0,0,0,0.04)': 'colorBgLayout',
+  // obui style => token
+  '#006aff': 'colorInfo',
+  '#0ac185': 'colorSuccess',
+  '#ffac33': 'colorWarning',
+  '#ff4b4b': 'colorError',
+  '#CDD5E4': 'colorBorder',
+  '#F5F8FE': 'colorBgLayout',
+  '#132039': 'colorText',
+  '#364563': 'colorTextSecondary',
+  '#8592AD': 'colorTextTertiary',
+  '#F8FAFE': 'colorFillQuaternary',
+};
+
+const TOKEN_MAP_KEYS = Object.keys(TOKEN_MAP);
+
+function customTrim(str) {
+  return str?.replace(/(\s)*([,\(\)])(\s)*/g, '$2');
+}
+
+function formatValue(value) {
+  return customTrim(toLower(value));
+}
+
+function tokenParse(value) {
+  const formattedValue = formatValue(value);
+  const key = TOKEN_MAP_KEYS.find(item => formattedValue.includes(item));
+  return {
+    key,
+    token: TOKEN_MAP[key],
+    formattedValue,
+  };
+}
+
+module.exports = {
+  TOKEN_MAP,
+  TOKEN_MAP_KEYS,
+  tokenParse,
+};