@oceanbase/codemod 1.0.0-alpha.0 → 1.0.0-alpha.2

package/bin/upgrade-list.json

@@ -1,18 +1,21 @@
 {
   "@oceanbase/design": {
-    "version": "^0.4.0"
+    "version": "^1.0.0-alpha.0"
   },
   "@oceanbase/icons": {
-    "version": "^0.4.0"
+    "version": "^1.0.0-alpha.0"
   },
   "@oceanbase/ui": {
-    "version": "^0.4.0"
+    "version": "^1.0.0-alpha.0"
   },
   "@oceanbase/charts": {
-    "version": "^0.4.0"
+    "version": "^1.0.0-alpha.0"
   },
   "@oceanbase/util": {
-    "version": "^0.4.0"
+    "version": "^1.0.0-alpha.0"
+  },
+  "@oceanbase/codemod": {
+    "version": "^1.0.0-alpha.0"
   },
   "react": {
     "version": "^16.9.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/codemod",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.2",
   "description": "Codemod for OceanBase Design upgrade",
   "keywords": [
     "oceanbase",
@@ -23,7 +23,7 @@
     "build": "father build"
   },
   "dependencies": {
-    "@oceanbase/design": "^1.0.0-alpha.0",
+    "@oceanbase/design": "^1.0.0-alpha.2",
     "chalk": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^5.1.1",
@@ -47,5 +47,5 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2"
   },
-  "gitHead": "1aff1c2acc2b9494ff83a86ed597b9f46a08f59c"
+  "gitHead": "72910b1a2b037811f3ed5561ee5e897d7b744135"
 }

package/transforms/__testfixtures__/less-to-token/exist-import-url.input.less

@@ -0,0 +1,10 @@
+@import url('~@oceanbase/design/es/theme/index.less');
+
+.container {
+  color: rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0,0.65);
+  background-color: rgba(0,0,0,0.45);
+  border-color: rgb(0 0 0 / 45%);
+  border: 1px solid #d9d9d9;
+  font-size: 14px;
+}

package/transforms/__testfixtures__/less-to-token/exist-import-url.output.less

@@ -0,0 +1,10 @@
+@import url('~@oceanbase/design/es/theme/index.less');
+
+.container {
+  color: @colorText;
+  background: @colorTextSecondary;
+  background-color: @colorTextTertiary;
+  border-color: @colorTextTertiary;
+  border: 1px solid @colorBorder;
+  font-size: @fontSize;
+}

package/transforms/__testfixtures__/less-to-token/exist-import.input.less

@@ -0,0 +1,10 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.container {
+  color: rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0,0.65);
+  background-color: rgba(0,0,0,0.45);
+  border-color: rgb(0 0 0 / 45%);
+  border: 1px solid #d9d9d9;
+  font-size: 14px;
+}

package/transforms/__testfixtures__/less-to-token/exist-import.output.less

@@ -0,0 +1,10 @@
+@import '~@oceanbase/design/es/theme/index.less';
+
+.container {
+  color: @colorText;
+  background: @colorTextSecondary;
+  background-color: @colorTextTertiary;
+  border-color: @colorTextTertiary;
+  border: 1px solid @colorBorder;
+  font-size: @fontSize;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Alert, Button, Tooltip } from '@oceanbase/design';
+
+export default function () {
+  const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
+  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', fontSize: 14 }} />
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
+      <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
+    </div>
+  );
+};

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

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

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

@@ -13,7 +13,7 @@ const useStyle2 = createStyles(({}) => {
   return {
     main: {
       background: '#1890ff',
-      fontSize: 14,
+      fontSize: '14px',
     },
   };
 });
@@ -22,7 +22,7 @@ const useStyle3 = createStyles(({ token }) => {
   return {
     main: {
       background: '#1890ff',
-      fontSize: 14,
+      fontSize: 12,
     },
   };
 });

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

@@ -28,7 +28,7 @@ const useStyle3 = createStyles(({ token }) => {
   return {
     main: {
       background: token.colorInfo,
-      fontSize: token.fontSize,
+      fontSize: token.fontSizeSM,
     },
   };
 });

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

@@ -11,7 +11,7 @@ class Demo extends React.PureComponent {
     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', fontSize: 14 }} />
-        <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
+        <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
       </div>
     );
   }

package/transforms/__testfixtures__/style-to-token/existed-useToken.input.js

@@ -6,7 +6,7 @@ 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', fontSize: 14 }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

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

@@ -6,7 +6,7 @@ function Demo1() {
   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', fontSize: 14 }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );
@@ -17,7 +17,7 @@ const Demo2 = () => {
   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', fontSize: 14 }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

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

@@ -6,7 +6,7 @@ function getComponent1() {
   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', fontSize: 14 }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );
@@ -17,7 +17,7 @@ const getComponent2 = () => {
   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', fontSize: 14 }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

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

@@ -17,7 +17,7 @@ const useComponent2 = () => {
   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', fontSize: 14 }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: 12 }}></Button>
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
       <Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
     </div>
   );

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+function getComponent() {
+  return <div style={{ fontSize: 16 }} />;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { token } from '@oceanbase/design';
+
+function getComponent() {
+  return <div style={{ fontSize: token.fontSizeLG }} />;
+}

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

@@ -9,6 +9,8 @@ const tests = [
   'case-insensitive',
   'mixin',
   'obui-less-token-to-token',
+  'exist-import',
+  'exist-import-url',
 ];
 
 describe(testUnit, () => {

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

@@ -3,7 +3,9 @@ import { defineTest } from 'jscodeshift/src/testUtils';
 const testUnit = 'style-to-token';
 const tests = [
   'function-component',
+  'anonymous-function',
   'function',
+  'single-function',
   'hooks',
   'class-component',
   'block-statement',

package/transforms/less-to-token.js

@@ -60,9 +60,15 @@ async function transform(file) {
         }
       }
     } else if (node.type === 'atrule' && node.name === 'import') {
-      if (node.params === "'~@oceanbase/design/es/theme/index.less'") {
+      if (
+        node.params?.includes("'~@oceanbase/design/es/theme/index.less'") ||
+        node.params?.includes('"~@oceanbase/design/es/theme/index.less"')
+      ) {
         tokenLessImported = true;
-      } else if (node.params === "'~@alipay/ob-ui/es/theme/index.less'") {
+      } else if (
+        node.params?.includes("'~@alipay/ob-ui/es/theme/index.less'") ||
+        node.params?.includes('"~@alipay/ob-ui/es/theme/index.less"')
+      ) {
         node.remove();
       }
     }

package/transforms/style-to-token.js

@@ -38,8 +38,28 @@ function wrapJSXValue(value, isJSXAttribute) {
 }
 
 // 检查是否为 React 组件或 Hook
-function isReactComponentOrHook(functionName) {
-  return functionName && (isFirstUpperCase(functionName) || functionName.startsWith('use'));
+function isReactComponentOrHook(functionName, path) {
+  // 如果有函数名，检查是否以大写字母开头或以 use 开头
+  if (functionName) {
+    return isFirstUpperCase(functionName) || functionName.startsWith('use');
+  }
+
+  // 对于匿名函数，检查是否是 export default function () {} 的形式
+  // 而不是 export default () => {} 的形式
+  if (path) {
+    const parentType = path.parentPath.value?.type;
+    if (parentType === 'FunctionDeclaration') {
+      // export default function () {} - 认为是 React 组件
+      return true;
+    }
+    if (parentType === 'ArrowFunctionExpression') {
+      // export default () => {} - 不认为是 React 组件
+      return false;
+    }
+  }
+
+  // 其他情况，默认不认为是 React 组件
+  return false;
 }
 
 // 检查 BlockStatement 中是否包含 token 使用
@@ -122,7 +142,7 @@ function addTokenImportToBlockStatement(j, root, path) {
   const includeJSXElement = j(path).find(j.JSXElement).length > 0;
   const functionName = getFunctionName(path);
 
-  if (includeJSXElement && isReactComponentOrHook(functionName)) {
+  if (includeJSXElement && isReactComponentOrHook(functionName, path)) {
     const insertString = 'const { token } = theme.useToken()';
     path.get('body').value.unshift(j.expressionStatement(j.identifier(insertString)));
     addSubmoduleImport(j, root, {
@@ -130,6 +150,14 @@ function addTokenImportToBlockStatement(j, root, path) {
       importedName: 'theme',
       importKind: 'value',
     });
+  } else if (includeJSXElement) {
+    // 对于非 React 组件的函数，直接导入 token
+    addSubmoduleImport(j, root, {
+      moduleName: '@oceanbase/design',
+      importedName: 'token',
+      importKind: 'value',
+      after: 'react',
+    });
   }
 }
 
@@ -201,17 +229,6 @@ function processStringLiterals(j, root) {
       const { key, token, formattedValue } = tokenParse(path.value.value);
       const isJSXAttribute = path.parentPath.value.type === 'JSXAttribute';
 
-      console.log(
-        'Processing string:',
-        path.value.value,
-        'isJSXAttribute:',
-        isJSXAttribute,
-        'formattedValue:',
-        formattedValue,
-        'key:',
-        key
-      );
-
       if (formattedValue === key) {
         // 完全匹配的情况，直接返回 token.xxx
         const memberExpression = j.memberExpression(j.identifier('token'), j.identifier(token));
@@ -261,13 +278,14 @@ function importComponent(j, root, options) {
 function processObjectProperties(j, root) {
   let hasChanged = false;
 
-  const objectPropertyList = root.find(j.ObjectProperty, {
+  // 处理数字字面量
+  const numericPropertyList = root.find(j.ObjectProperty, {
     key: { type: 'Identifier' },
     value: { type: 'NumericLiteral' },
   });
 
-  if (objectPropertyList.length > 0) {
-    objectPropertyList.replaceWith(path => {
+  if (numericPropertyList.length > 0) {
+    numericPropertyList.replaceWith(path => {
       const propertyName = path.value.key.name;
       const propertyValue = path.value.value.value;
 
@@ -280,11 +298,33 @@ function processObjectProperties(j, root) {
       }
       return path.value;
     });
+  }
 
-    // 如果发生了替换，需要添加 token 导入
-    if (hasChanged) {
-      addTokenImportsForObjectProperties(j, root);
-    }
+  // 处理字符串字面量（如 fontSize: '14px'）
+  const stringPropertyList = root.find(j.ObjectProperty, {
+    key: { type: 'Identifier' },
+    value: { type: 'StringLiteral' },
+  });
+
+  if (stringPropertyList.length > 0) {
+    stringPropertyList.replaceWith(path => {
+      const propertyName = path.value.key.name;
+      const propertyValue = path.value.value.value;
+
+      const tokenResult = propertyTokenParse(propertyName, propertyValue);
+      if (tokenResult) {
+        hasChanged = true;
+        const isJSXAttribute = path.parentPath.value.type === 'JSXAttribute';
+        const stringValue = wrapJSXValue(`token.${tokenResult.token}`, isJSXAttribute);
+        return j.objectProperty(j.identifier(propertyName), j.identifier(stringValue));
+      }
+      return path.value;
+    });
+  }
+
+  // 如果发生了替换，需要添加 token 导入
+  if (hasChanged) {
+    addTokenImportsForObjectProperties(j, root);
   }
 
   return hasChanged;

package/transforms/utils/index.js

@@ -136,6 +136,14 @@ function addModuleImport(j, root, { pkgName, importSpecifier, importKind, before
             return 1;
           }
 
+          // 特殊处理：token 总是放在最后
+          if (a.imported && a.imported.name === 'token') {
+            return 1;
+          }
+          if (b.imported && b.imported.name === 'token') {
+            return -1;
+          }
+
           return a.imported.name.localeCompare(b.imported.name);
         });
         const importStatement = j.importDeclaration(mergedImportSpecifiers, j.literal(pkgName));

package/transforms/utils/token.js

@@ -47,6 +47,7 @@ const TOKEN_MAP = {
   '#ff4d4f': 'colorError',
   '#f5222d': 'colorError',
   '#f8636b': 'colorError',
+  '#f93939': 'colorError',
   '#d9d9d9': 'colorBorder',
   '#bfbfbf': 'colorBorder',
   '#e8e8e8': 'colorBorder',
@@ -122,12 +123,12 @@ const TOKEN_MAP = {
   '#cdd5e4': 'colorBorder',
   '#f5f8fe': 'colorBgLayout',
   '#f5f7fa': 'colorBgLayout',
+  '#f8fafe': 'colorBgLayout',
   'rgba(140,140,140,0.1)': 'colorBgLayout',
   'rgb(240,242,245)': 'colorBgLayout',
   '#132039': 'colorText',
   '#364563': 'colorTextSecondary',
   '#8592ad': 'colorTextTertiary',
-  '#f8fafe': 'colorFillQuaternary',
 };
 
 const TOKEN_MAP_KEYS = Object.keys(TOKEN_MAP).map(key => formatValue(key));