feat(codemod): Add @oceanbase/design color token map for style-to-tok…

…en and less-to-token transformer
oceanbase · Apr 3, 2024 · d8850e2 · d8850e2
1 parent 6493aa8
commit d8850e2
Show file tree

Hide file tree

Showing 5 changed files with 4,552 additions and 13,481 deletions.
diff --git a/packages/codemod/package.json b/packages/codemod/package.json
@@ -23,6 +23,7 @@
     "build": "father build"
   },
   "dependencies": {
+    "@oceanbase/design": "workspace:^",
     "chalk": "^3.0.0",
     "command-exists": "^1.2.9",
     "execa": "^5.1.1",

diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Alert, Button, Tooltip } from '@oceanbase/design';
 
 const Demo = () => {
-  const tokenList = ['rgb(0 0 0 / 45%)'];
+  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' }} />

diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
@@ -3,7 +3,7 @@ import { Alert, Button, theme, Tooltip } from '@oceanbase/design';
 
 const Demo = () => {
   const { token } = theme.useToken();
-  const tokenList = [token.colorTextTertiary];
+  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}` }} />

diff --git a/packages/codemod/transforms/utils/token.js b/packages/codemod/transforms/utils/token.js
@@ -1,6 +1,36 @@
-const { toLower } = require('lodash');
+const { isString, fromPairs, toLower } = require('lodash');
+const { default: defaultTheme } = require('@oceanbase/design/lib/theme/default');
+
+const token = defaultTheme.token;
+
+const tokenMap = fromPairs(
+  Object.keys(token)
+    .filter(key =>
+      // filter token by token key
+      key.startsWith('color')
+    )
+    .filter(
+      key =>
+        // filter token by token value
+        isString(token[key]) && !!token[key]
+    )
+    .map(key => {
+      return [token[key], key];
+    })
+    // sort by token value and token key length
+    .sort((a, b) => {
+      if (a[0] > b[0]) {
+        return 1;
+      } else if (a[0] < b[0]) {
+        return -1;
+      }
+      return a[1]?.length > b[1]?.length ? -1 : a[1]?.length < b[1]?.length ? 1 : 0;
+    })
+);
 
 const TOKEN_MAP = {
+  // obui 3.x style => token
+  ...tokenMap,
   // antd style => token
   '#1677ff': 'colorInfo',
   '#1890ff': 'colorInfo',
@@ -51,8 +81,7 @@ const TOKEN_MAP = {
   'rgba(0,0,0,0.04)': 'colorBgLayout',
   '#f5f6fa': 'colorBgLayout',
   '#edeff2': 'colorBgLayout',
-  // obui style => token
-  '#006aff': 'colorInfo',
+  // obui legacy style => token
   '#086fff': 'colorInfo',
   'rgba(24,144,255,0.1)': 'colorInfoBg',
   'rgba(95,149,255,0.10)': 'colorInfoBg',