Skip to content

Commit 66386c1

Browse files
committed
✨ Adds textfield codemods!
1 parent e4f6b2d commit 66386c1

File tree

9 files changed

+623
-0
lines changed

9 files changed

+623
-0
lines changed
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { API, FileInfo, Options } from 'jscodeshift';
2+
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
3+
4+
import { removeThemeImports } from '../motions/remove-imports';
5+
6+
function transformer(
7+
fileInfo: FileInfo,
8+
{ jscodeshift: j }: API,
9+
options: Options,
10+
) {
11+
const source = j(fileInfo.source);
12+
13+
removeThemeImports(j, source);
14+
15+
return source.toSource(options.printOptions);
16+
}
17+
18+
const importToDoComment = `
19+
/* TODO: (@codeshift) This file uses exports used to help theme @atlaskit/textfield which
20+
has now been removed due to its poor performance characteristics. */`;
21+
22+
describe('Remove imports', () => {
23+
defineInlineTest(
24+
{ default: transformer, parser: 'tsx' },
25+
{},
26+
`
27+
import Textfield, { Theme, ThemeProps, ThemeTokens } from '@atlaskit/textfield';
28+
`,
29+
`
30+
${importToDoComment}
31+
import Textfield from '@atlaskit/textfield';
32+
`,
33+
'should remove theme imports from Textfield and leave a comment',
34+
);
35+
defineInlineTest(
36+
{ default: transformer, parser: 'tsx' },
37+
{},
38+
`
39+
import Textfield, { ThemeProps as TextfieldThemeProp, Theme as TextFieldTheme, ThemeTokens as TextfieldThemeTokens} from '@atlaskit/textfield';
40+
`,
41+
`
42+
${importToDoComment}
43+
import Textfield from '@atlaskit/textfield';
44+
`,
45+
'should remove theme imports with alias name from Textfield and leave a comment',
46+
);
47+
defineInlineTest(
48+
{ default: transformer, parser: 'tsx' },
49+
{},
50+
`
51+
import { TextFieldProps, ThemeProps, Theme, ThemeTokens } from '@atlaskit/textfield';
52+
`,
53+
`
54+
${importToDoComment}
55+
import { TextFieldProps } from '@atlaskit/textfield';
56+
`,
57+
'should remove theme imports & leave other imports from Textfield and leave a comment',
58+
);
59+
defineInlineTest(
60+
{ default: transformer, parser: 'tsx' },
61+
{},
62+
`
63+
import { ThemeProps, ThemeTokens, Theme } from '@atlaskit/textfield';
64+
`,
65+
`
66+
${importToDoComment}
67+
`,
68+
'should remove theme imports & remove whole line if no default import from Textfield and leave a comment',
69+
);
70+
});
Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import { API, FileInfo, Options } from 'jscodeshift';
2+
3+
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
4+
import { removeThemeProp } from '../motions/remove-props';
5+
6+
function transformer(
7+
fileInfo: FileInfo,
8+
{ jscodeshift: j }: API,
9+
options: Options,
10+
) {
11+
const source = j(fileInfo.source);
12+
13+
removeThemeProp(j, source);
14+
15+
return source.toSource(options.printOptions);
16+
}
17+
18+
const themeToDoComment = `
19+
/* TODO: (@codeshift) This file uses the @atlaskit/textfield \`theme\` prop which
20+
has now been removed due to its poor performance characteristics. We have not replaced
21+
theme with an equivalent API due to minimal usage of the \`theme\` prop.
22+
The appearance of TextField will have likely changed. */`;
23+
24+
describe('Remove prop', () => {
25+
defineInlineTest(
26+
{ default: transformer, parser: 'tsx' },
27+
{},
28+
`
29+
import React from 'react';
30+
import Textfield from '@atlaskit/textfield';
31+
import customeTheme from './theme';
32+
33+
const SimpleTextfield = () => {
34+
return (
35+
<Textfield
36+
theme={customTheme}
37+
/>
38+
);
39+
}
40+
`,
41+
`
42+
${themeToDoComment}
43+
import React from 'react';
44+
import Textfield from '@atlaskit/textfield';
45+
import customeTheme from './theme';
46+
47+
const SimpleTextfield = () => {
48+
return <Textfield />;
49+
}
50+
`,
51+
'should remove theme from Textfield and leave a comment',
52+
);
53+
54+
defineInlineTest(
55+
{ default: transformer, parser: 'tsx' },
56+
{},
57+
`
58+
import React from 'react';
59+
import TextField from '@atlaskit/textfield';
60+
import customeTheme from './theme';
61+
62+
const SimpleTextfield = () => {
63+
return (
64+
<TextField
65+
theme={customTheme}
66+
/>
67+
);
68+
}
69+
`,
70+
`
71+
${themeToDoComment}
72+
import React from 'react';
73+
import TextField from '@atlaskit/textfield';
74+
import customeTheme from './theme';
75+
76+
const SimpleTextfield = () => {
77+
return <TextField />;
78+
}
79+
`,
80+
'should remove theme from TextField and leave a comment',
81+
);
82+
83+
defineInlineTest(
84+
{ default: transformer, parser: 'tsx' },
85+
{},
86+
`
87+
import React from 'react';
88+
import Textfield from '@atlaskit/textfield';
89+
import customeTheme from './theme';
90+
91+
const SimpleTextfield = () => {
92+
return (
93+
<div>
94+
<Textfield
95+
theme={customTheme}
96+
/>
97+
<Textfield
98+
theme={customTheme}
99+
/>
100+
</div>
101+
);
102+
}
103+
`,
104+
`
105+
${themeToDoComment}
106+
import React from 'react';
107+
import Textfield from '@atlaskit/textfield';
108+
import customeTheme from './theme';
109+
110+
const SimpleTextfield = () => {
111+
return (
112+
<div>
113+
<Textfield />
114+
<Textfield />
115+
</div>
116+
);
117+
}
118+
`,
119+
'should remove 2 usages of theme and add 1 comment',
120+
);
121+
122+
defineInlineTest(
123+
{ default: transformer, parser: 'tsx' },
124+
{},
125+
`
126+
import React from 'react';
127+
import Foo from '@atlaskit/textfield';
128+
import customeTheme from './theme';
129+
130+
const SimpleTextfield = () => {
131+
return (
132+
<Foo
133+
theme={customeTheme}
134+
/>
135+
);
136+
}
137+
`,
138+
`
139+
${themeToDoComment}
140+
import React from 'react';
141+
import Foo from '@atlaskit/textfield';
142+
import customeTheme from './theme';
143+
144+
const SimpleTextfield = () => {
145+
return <Foo />;
146+
}
147+
`,
148+
'should remove theme prop when using an aliased name',
149+
);
150+
});
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { API, FileInfo, Options } from 'jscodeshift';
2+
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
3+
4+
import {
5+
renameThemeAppearanceImport,
6+
renamethemeTokensImport,
7+
} from '../motions/rename-imports';
8+
9+
function transformer(
10+
fileInfo: FileInfo,
11+
{ jscodeshift: j }: API,
12+
options: Options,
13+
) {
14+
const source = j(fileInfo.source);
15+
16+
renamethemeTokensImport(j, source);
17+
renameThemeAppearanceImport(j, source);
18+
19+
return source.toSource(options.printOptions);
20+
}
21+
22+
describe('Rename imports', () => {
23+
defineInlineTest(
24+
{ default: transformer, parser: 'tsx' },
25+
{},
26+
`
27+
import { themeTokens, ThemeAppearance } from '@atlaskit/textfield';
28+
`,
29+
`
30+
import { TextFieldColors, Appearance } from '@atlaskit/textfield';
31+
`,
32+
'should rename themeTokens & ThemeAppearance to TextFieldColors & Appearance',
33+
);
34+
defineInlineTest(
35+
{ default: transformer, parser: 'tsx' },
36+
{},
37+
`
38+
import Textfield, { ThemeAppearance, themeTokens } from '@atlaskit/textfield';
39+
`,
40+
`
41+
import Textfield, { Appearance, TextFieldColors } from '@atlaskit/textfield';
42+
`,
43+
'should rename themeTokens & Appearance to TextFieldColors & Appearance and keep Textfield default import as is',
44+
);
45+
defineInlineTest(
46+
{ default: transformer, parser: 'tsx' },
47+
{},
48+
`
49+
import Textfield, { TextFieldProps, themeTokens } from '@atlaskit/textfield';
50+
`,
51+
`
52+
import Textfield, { TextFieldProps, TextFieldColors } from '@atlaskit/textfield';
53+
`,
54+
'should rename themeTokens to TextFieldColors and keep TextFieldProps as is',
55+
);
56+
defineInlineTest(
57+
{ default: transformer, parser: 'tsx' },
58+
{},
59+
`
60+
import Textfield, { TextFieldProps, themeTokens as MyLifeMyColors } from '@atlaskit/textfield';
61+
`,
62+
`
63+
import Textfield, { TextFieldProps, TextFieldColors as MyLifeMyColors } from '@atlaskit/textfield';
64+
`,
65+
'should rename themeTokens to TextFieldColors and keep its alias name as is',
66+
);
67+
defineInlineTest(
68+
{ default: transformer, parser: 'tsx' },
69+
{},
70+
`
71+
import Textfield, { ThemeProps as TextfieldThemeProp,
72+
ThemeAppearance as TextFieldAppearance, Theme as TextFieldTheme, themeTokens as MyLifeMyColors, ThemeTokens as TextfieldThemeTokens} from '@atlaskit/textfield';
73+
`,
74+
`
75+
import Textfield, { ThemeProps as TextfieldThemeProp,
76+
Appearance as TextFieldAppearance, Theme as TextFieldTheme, TextFieldColors as MyLifeMyColors, ThemeTokens as TextfieldThemeTokens} from '@atlaskit/textfield';
77+
`,
78+
'should rename themeTokens to TextFieldColors, ThemeAppearance to Appearance and keep its alias name as is even when there are multiple name exports with alias',
79+
);
80+
defineInlineTest(
81+
{ default: transformer, parser: 'tsx' },
82+
{},
83+
`
84+
import { themeTokens, TextFieldProps } from '@atlaskit/textfield';
85+
`,
86+
`
87+
import { TextFieldColors, TextFieldProps } from '@atlaskit/textfield';
88+
`,
89+
'should rename themeTokens to TextFieldColors and keep TextFieldProps named import as is',
90+
);
91+
});
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
2+
3+
import transformer from '../transform';
4+
5+
describe('@atlaskit/textfield@5.0.0 transform', () => {
6+
defineInlineTest(
7+
{ default: transformer, parser: 'tsx' },
8+
{},
9+
`
10+
import Textfield, { ThemeProps, ThemeAppearance , themeTokens as ColorTokens, ThemeTokens } from '@atlaskit/textfield';
11+
import customeTheme from './theme';
12+
import React from 'react';
13+
14+
const SimpleTextfield = () => {
15+
return (
16+
<Textfield
17+
theme={customTheme}
18+
/>
19+
);
20+
}
21+
`,
22+
`
23+
/* TODO: (@codeshift) This file uses the @atlaskit/textfield \`theme\` prop which
24+
has now been removed due to its poor performance characteristics. We have not replaced
25+
theme with an equivalent API due to minimal usage of the \`theme\` prop.
26+
The appearance of TextField will have likely changed. */
27+
/* TODO: (@codeshift) This file uses exports used to help theme @atlaskit/textfield which
28+
has now been removed due to its poor performance characteristics. */
29+
import Textfield, { Appearance, TextFieldColors as ColorTokens } from '@atlaskit/textfield';
30+
import customeTheme from './theme';
31+
import React from 'react';
32+
33+
const SimpleTextfield = () => {
34+
return <Textfield />;
35+
}
36+
`,
37+
'should remove theme & its imports from Textfield and leave a comment',
38+
);
39+
defineInlineTest(
40+
{ default: transformer, parser: 'tsx' },
41+
{},
42+
`
43+
import Textfield, { ThemeProps, ThemeTokens } from '@atlaskit/textfield';
44+
import React from 'react';
45+
46+
const SimpleTextfield = () => {
47+
return (
48+
<Textfield
49+
theme={(theme, props: ThemeProps) => {
50+
const { container, input, ...rest } = theme(props);
51+
return {
52+
...rest,
53+
container: {
54+
...container,
55+
padding: 5,
56+
border: '2px solid orange',
57+
},
58+
input: {
59+
...input,
60+
fontSize: 20,
61+
border: '2px solid green',
62+
},
63+
};
64+
}}
65+
/>
66+
);
67+
}
68+
`,
69+
`
70+
/* TODO: (@codeshift) This file uses the @atlaskit/textfield \`theme\` prop which
71+
has now been removed due to its poor performance characteristics. We have not replaced
72+
theme with an equivalent API due to minimal usage of the \`theme\` prop.
73+
The appearance of TextField will have likely changed. */
74+
/* TODO: (@codeshift) This file uses exports used to help theme @atlaskit/textfield which
75+
has now been removed due to its poor performance characteristics. */
76+
import Textfield from '@atlaskit/textfield';
77+
import React from 'react';
78+
79+
const SimpleTextfield = () => {
80+
return <Textfield />;
81+
}
82+
`,
83+
'should remove theme prop & its imports from Textfield and leave a comment',
84+
);
85+
});

0 commit comments

Comments
 (0)