Skip to content

Commit

Permalink
fix(codemod): normal function and anonymous function should use token…
Browse files Browse the repository at this point in the history 
… object
  • Loading branch information
@dengfuping
dengfuping committed Aug 29, 2024
1 parent a4a159b commit 9a2ffcd
Show file tree
Hide file tree
Showing 8 changed files with 177 additions and 9 deletions.
15 changes: 13 additions & 2 deletions packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Alert, Button, Tooltip } from '@oceanbase/design';

const Demo = () => {
function Demo1() {
const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
return (
<div>
Expand All @@ -12,4 +12,15 @@ const Demo = () => {
);
};

export default Demo;
const Demo2 = () => {
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' }} />
<Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
<Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
</div>
);
};

export { Demo1, Demo2 };
16 changes: 14 additions & 2 deletions packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Alert, Button, theme, Tooltip } from '@oceanbase/design';

const Demo = () => {
function Demo1() {
const { token } = theme.useToken();
const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
return (
Expand All @@ -13,4 +13,16 @@ const Demo = () => {
);
};

export default Demo;
const Demo2 = () => {
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}` }} />
<Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
<Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
</div>)
);
};

export { Demo1, Demo2 };
37 changes: 37 additions & 0 deletions packages/codemod/transforms/__testfixtures__/style-to-token/function.input.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';
import { Alert, Button, Tooltip } from '@oceanbase/design';

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

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

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

export { getComponent1, getComponent2 };
37 changes: 37 additions & 0 deletions packages/codemod/transforms/__testfixtures__/style-to-token/function.output.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';
import { Alert, Button, token, Tooltip } from '@oceanbase/design';

function getComponent1() {
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}` }} />
<Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
<Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
</div>)
);
};

const getComponent2 = () => {
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}` }} />
<Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
<Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
</div>)
);
};

export default () => {
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}` }} />
<Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
<Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
</div>)
);
};

export { getComponent1, getComponent2 };
26 changes: 26 additions & 0 deletions packages/codemod/transforms/__testfixtures__/style-to-token/hooks.input.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import { Alert, Button, Tooltip } from '@oceanbase/design';

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

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

export { useComponent1, useComponent2 };
28 changes: 28 additions & 0 deletions packages/codemod/transforms/__testfixtures__/style-to-token/hooks.output.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import { Alert, Button, theme, Tooltip } from '@oceanbase/design';

function useComponent1 () {
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}` }} />
<Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
<Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
</div>)
);
};

const useComponent2 = () => {
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}` }} />
<Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
<Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
</div>)
);
};

export { useComponent1, useComponent2 };
2 changes: 2 additions & 0 deletions packages/codemod/transforms/__tests__/style-to-token.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { defineTest } from 'jscodeshift/src/testUtils';
const testUnit = 'style-to-token';
const tests = [
'function-component',
'function',
'hooks',
'class-component',
'block-statement',
'nested-block-statement',
Expand Down
25 changes: 20 additions & 5 deletions packages/codemod/transforms/style-to-token.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
const { upperFirst } = require('lodash');
const { addSubmoduleImport } = require('./utils');
const { tokenParse } = require('./utils/token');
const { printOptions } = require('./utils/config');
Expand Down Expand Up @@ -31,6 +32,10 @@ function isTopIdentifier(path) {
return isTop;
}

function isFirstUpperCase(str) {
return upperFirst(str) === str;
}

function importComponent(j, root, options) {
let hasChanged = false;

Expand Down Expand Up @@ -72,14 +77,24 @@ function importComponent(j, root, options) {
name: name => name.includes('useToken'),
}).length > 0;
const parentType = path.parentPath.value?.type;
// React function component
if (includeJSXElement && parentType !== 'ClassMethod') {
const functionName =
parentType === 'FunctionDeclaration'
? path.parentPath.value?.id?.name
: parentType === 'ArrowFunctionExpression'
? path.parentPath.parentPath?.value?.id?.name
: undefined;
if (
includeJSXElement &&
functionName &&
// React function component or React hooks
(isFirstUpperCase(functionName) || functionName.startsWith('use'))
) {
// avoid duplicate insert when it's existed
if (!includeUseTokenStatement) {
const insertString = 'const { token } = theme.useToken()';
// insert `const { token } = theme.useToken()`
path.get('body').value.unshift(j.expressionStatement(j.identifier(insertString)));
// import theme from @oceanbase/design
// import `theme` from @oceanbase/design
addSubmoduleImport(j, root, {
moduleName: '@oceanbase/design',
importedName: 'theme',
Expand All @@ -88,7 +103,7 @@ function importComponent(j, root, options) {
}
} else {
// React class component and static file (not react component)
// import token from @oceanbase/design
// import `token` from @oceanbase/design
addSubmoduleImport(j, root, {
moduleName: '@oceanbase/design',
importedName: 'token',
Expand All @@ -102,7 +117,7 @@ function importComponent(j, root, options) {
.find(j.Identifier)
.filter(path => isTopIdentifier(path) && path.value.name?.includes('token.'))
.forEach(() => {
// import token from @oceanbase/design
// import `token` from @oceanbase/design
addSubmoduleImport(j, root, {
moduleName: '@oceanbase/design',
importedName: 'token',
Expand Down

0 comments on commit 9a2ffcd

Please sign in to comment.