@atlaskit/section-message 8.0.0 → 8.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/internal/appearance-icon.js +1 -2
- package/dist/cjs/section-message-action.compiled.css +1 -1
- package/dist/cjs/section-message-action.js +1 -1
- package/dist/cjs/section-message.compiled.css +1 -1
- package/dist/cjs/section-message.js +1 -1
- package/dist/es2019/internal/appearance-icon.js +1 -1
- package/dist/es2019/section-message-action.compiled.css +1 -1
- package/dist/es2019/section-message-action.js +1 -1
- package/dist/es2019/section-message.compiled.css +1 -1
- package/dist/es2019/section-message.js +1 -1
- package/dist/esm/internal/appearance-icon.js +1 -1
- package/dist/esm/section-message-action.compiled.css +1 -1
- package/dist/esm/section-message-action.js +1 -1
- package/dist/esm/section-message.compiled.css +1 -1
- package/dist/esm/section-message.js +1 -1
- package/dist/types/internal/appearance-icon.d.ts +1 -10
- package/dist/types-ts4.5/internal/appearance-icon.d.ts +1 -10
- package/package.json +13 -11
- package/codemods/6.0.0-lite-mode.tsx +0 -18
- package/codemods/__tests__/6.0.0-lite-mode.tsx +0 -320
- package/codemods/__tests__/change-appearance-prop.tsx +0 -405
- package/codemods/__tests__/map-actions-prop.tsx +0 -580
- package/codemods/internal/change-appearance-prop.tsx +0 -101
- package/codemods/internal/constants.tsx +0 -13
- package/codemods/internal/map-actions-prop.tsx +0 -188
- package/codemods/internal/utils.tsx +0 -71
|
@@ -1,580 +0,0 @@
|
|
|
1
|
-
import { createTransformer } from '@atlaskit/codemod-utils';
|
|
2
|
-
|
|
3
|
-
import { mapActionsProp } from '../internal/map-actions-prop';
|
|
4
|
-
|
|
5
|
-
const transformer = createTransformer([mapActionsProp]);
|
|
6
|
-
|
|
7
|
-
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
|
|
8
|
-
|
|
9
|
-
describe('map actions prop to components', () => {
|
|
10
|
-
describe('for default & named imports', () => {
|
|
11
|
-
defineInlineTest(
|
|
12
|
-
{ default: transformer, parser: 'tsx' },
|
|
13
|
-
{},
|
|
14
|
-
`
|
|
15
|
-
import React from "react";
|
|
16
|
-
import SectionMessage from "@atlaskit/section-message";
|
|
17
|
-
|
|
18
|
-
const actions = [
|
|
19
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
20
|
-
{ text: 'Action 2', key: '2' },
|
|
21
|
-
{ text: 'Action 3', key: '3' },
|
|
22
|
-
{ text: 'Action 4', key: '4' },
|
|
23
|
-
];
|
|
24
|
-
|
|
25
|
-
export default () => (
|
|
26
|
-
<SectionMessage
|
|
27
|
-
actions={actions}
|
|
28
|
-
/>
|
|
29
|
-
);
|
|
30
|
-
`,
|
|
31
|
-
`
|
|
32
|
-
import React from "react";
|
|
33
|
-
import SectionMessage, { SectionMessageAction } from "@atlaskit/section-message";
|
|
34
|
-
|
|
35
|
-
const actions = [
|
|
36
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
37
|
-
{ text: 'Action 2', key: '2' },
|
|
38
|
-
{ text: 'Action 3', key: '3' },
|
|
39
|
-
{ text: 'Action 4', key: '4' },
|
|
40
|
-
];
|
|
41
|
-
|
|
42
|
-
export default () => (
|
|
43
|
-
<SectionMessage
|
|
44
|
-
actions={actions.map((
|
|
45
|
-
{
|
|
46
|
-
text,
|
|
47
|
-
...restAction
|
|
48
|
-
}
|
|
49
|
-
) => <SectionMessageAction {...restAction}>{text}</SectionMessageAction>)}
|
|
50
|
-
/>
|
|
51
|
-
);
|
|
52
|
-
`,
|
|
53
|
-
'should map actions correctly',
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
defineInlineTest(
|
|
57
|
-
{ default: transformer, parser: 'tsx' },
|
|
58
|
-
{},
|
|
59
|
-
`
|
|
60
|
-
import React from "react";
|
|
61
|
-
import SectionMessage, { SectionMessageProps } from "@atlaskit/section-message";
|
|
62
|
-
|
|
63
|
-
export default () => (
|
|
64
|
-
<SectionMessage
|
|
65
|
-
actions={[
|
|
66
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
67
|
-
{ text: 'Action 2', key: '2' },
|
|
68
|
-
{ text: 'Action 3', key: '3' },
|
|
69
|
-
{ text: 'Action 4', key: '4' },
|
|
70
|
-
]}
|
|
71
|
-
/>
|
|
72
|
-
);
|
|
73
|
-
`,
|
|
74
|
-
`
|
|
75
|
-
import React from "react";
|
|
76
|
-
import SectionMessage, { SectionMessageProps, SectionMessageAction } from "@atlaskit/section-message";
|
|
77
|
-
|
|
78
|
-
export default () => (
|
|
79
|
-
<SectionMessage
|
|
80
|
-
actions={[
|
|
81
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
82
|
-
{ text: 'Action 2', key: '2' },
|
|
83
|
-
{ text: 'Action 3', key: '3' },
|
|
84
|
-
{ text: 'Action 4', key: '4' },
|
|
85
|
-
].map((
|
|
86
|
-
{
|
|
87
|
-
text,
|
|
88
|
-
...restAction
|
|
89
|
-
}
|
|
90
|
-
) => <SectionMessageAction {...restAction}>{text}</SectionMessageAction>)}
|
|
91
|
-
/>
|
|
92
|
-
);
|
|
93
|
-
`,
|
|
94
|
-
'should map actions correctly if defined inline',
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
defineInlineTest(
|
|
98
|
-
{ default: transformer, parser: 'tsx' },
|
|
99
|
-
{},
|
|
100
|
-
`
|
|
101
|
-
import React from "react";
|
|
102
|
-
import SectionMessage, { SectionMessageProps } from "@atlaskit/section-message";
|
|
103
|
-
|
|
104
|
-
const SectionMessageAction = () => {};
|
|
105
|
-
|
|
106
|
-
const actions = [
|
|
107
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
108
|
-
{ text: 'Action 2', key: '2' },
|
|
109
|
-
{ text: 'Action 3', key: '3' },
|
|
110
|
-
{ text: 'Action 4', key: '4' },
|
|
111
|
-
];
|
|
112
|
-
|
|
113
|
-
const Component = () => (
|
|
114
|
-
<SectionMessage
|
|
115
|
-
actions={actions}
|
|
116
|
-
/>
|
|
117
|
-
);
|
|
118
|
-
|
|
119
|
-
export default Component;
|
|
120
|
-
`,
|
|
121
|
-
`
|
|
122
|
-
import React from "react";
|
|
123
|
-
import SectionMessage, { SectionMessageProps, SectionMessageAction as AtlaskitSectionMessageAction } from "@atlaskit/section-message";
|
|
124
|
-
|
|
125
|
-
const SectionMessageAction = () => {};
|
|
126
|
-
|
|
127
|
-
const actions = [
|
|
128
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
129
|
-
{ text: 'Action 2', key: '2' },
|
|
130
|
-
{ text: 'Action 3', key: '3' },
|
|
131
|
-
{ text: 'Action 4', key: '4' },
|
|
132
|
-
];
|
|
133
|
-
|
|
134
|
-
const Component = () => (
|
|
135
|
-
<SectionMessage
|
|
136
|
-
actions={actions.map((
|
|
137
|
-
{
|
|
138
|
-
text,
|
|
139
|
-
...restAction
|
|
140
|
-
}
|
|
141
|
-
) => <AtlaskitSectionMessageAction {...restAction}>{text}</AtlaskitSectionMessageAction>)}
|
|
142
|
-
/>
|
|
143
|
-
);
|
|
144
|
-
|
|
145
|
-
export default Component;
|
|
146
|
-
`,
|
|
147
|
-
'should map actions correctly - with alias',
|
|
148
|
-
);
|
|
149
|
-
|
|
150
|
-
defineInlineTest(
|
|
151
|
-
{ default: transformer, parser: 'tsx' },
|
|
152
|
-
{},
|
|
153
|
-
`
|
|
154
|
-
import React from "react";
|
|
155
|
-
import SectionMessage from "@atlaskit/section-message";
|
|
156
|
-
|
|
157
|
-
const actions = [
|
|
158
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
159
|
-
{ text: 'Action 2', key: '2' },
|
|
160
|
-
{ text: 'Action 3', key: '3' },
|
|
161
|
-
{ text: 'Action 4', key: '4' },
|
|
162
|
-
];
|
|
163
|
-
|
|
164
|
-
export default () => (
|
|
165
|
-
<SectionMessage />
|
|
166
|
-
);
|
|
167
|
-
`,
|
|
168
|
-
`
|
|
169
|
-
import React from "react";
|
|
170
|
-
import SectionMessage from "@atlaskit/section-message";
|
|
171
|
-
|
|
172
|
-
const actions = [
|
|
173
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
174
|
-
{ text: 'Action 2', key: '2' },
|
|
175
|
-
{ text: 'Action 3', key: '3' },
|
|
176
|
-
{ text: 'Action 4', key: '4' },
|
|
177
|
-
];
|
|
178
|
-
|
|
179
|
-
export default () => (
|
|
180
|
-
<SectionMessage />
|
|
181
|
-
);
|
|
182
|
-
`,
|
|
183
|
-
'should only map when "actions" prop is defined',
|
|
184
|
-
);
|
|
185
|
-
|
|
186
|
-
defineInlineTest(
|
|
187
|
-
{ default: transformer, parser: 'tsx' },
|
|
188
|
-
{},
|
|
189
|
-
`
|
|
190
|
-
import React from "react";
|
|
191
|
-
import SectionMessage from "@atlaskit/section-message";
|
|
192
|
-
|
|
193
|
-
const getActions = () => [
|
|
194
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
195
|
-
{ text: 'Action 2', key: '2' },
|
|
196
|
-
{ text: 'Action 3', key: '3' },
|
|
197
|
-
{ text: 'Action 4', key: '4' },
|
|
198
|
-
];
|
|
199
|
-
|
|
200
|
-
export default () => (
|
|
201
|
-
<SectionMessage
|
|
202
|
-
actions={getActions()}
|
|
203
|
-
/>
|
|
204
|
-
);
|
|
205
|
-
`,
|
|
206
|
-
`
|
|
207
|
-
import React from "react";
|
|
208
|
-
import SectionMessage, { SectionMessageAction } from "@atlaskit/section-message";
|
|
209
|
-
|
|
210
|
-
const getActions = () => [
|
|
211
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
212
|
-
{ text: 'Action 2', key: '2' },
|
|
213
|
-
{ text: 'Action 3', key: '3' },
|
|
214
|
-
{ text: 'Action 4', key: '4' },
|
|
215
|
-
];
|
|
216
|
-
|
|
217
|
-
export default () => (
|
|
218
|
-
<SectionMessage
|
|
219
|
-
actions={getActions().map((
|
|
220
|
-
{
|
|
221
|
-
text,
|
|
222
|
-
...restAction
|
|
223
|
-
}
|
|
224
|
-
) => <SectionMessageAction {...restAction}>{text}</SectionMessageAction>)}
|
|
225
|
-
/>
|
|
226
|
-
);
|
|
227
|
-
`,
|
|
228
|
-
'should map actions correctly if result coming from a function call',
|
|
229
|
-
);
|
|
230
|
-
|
|
231
|
-
defineInlineTest(
|
|
232
|
-
{ default: transformer, parser: 'tsx' },
|
|
233
|
-
{},
|
|
234
|
-
`
|
|
235
|
-
import React from "react";
|
|
236
|
-
import SectionMessage, { SectionMessageProps } from "@atlaskit/section-message";
|
|
237
|
-
|
|
238
|
-
export default () => (
|
|
239
|
-
<SectionMessage
|
|
240
|
-
actions={true ? [
|
|
241
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
242
|
-
{ text: 'Action 2', key: '2' },
|
|
243
|
-
{ text: 'Action 3', key: '3' },
|
|
244
|
-
{ text: 'Action 4', key: '4' },
|
|
245
|
-
]: []}
|
|
246
|
-
/>
|
|
247
|
-
);
|
|
248
|
-
`,
|
|
249
|
-
`
|
|
250
|
-
import React from "react";
|
|
251
|
-
import SectionMessage, { SectionMessageProps, SectionMessageAction } from "@atlaskit/section-message";
|
|
252
|
-
|
|
253
|
-
export default () => (
|
|
254
|
-
<SectionMessage
|
|
255
|
-
actions={(true ? [
|
|
256
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
257
|
-
{ text: 'Action 2', key: '2' },
|
|
258
|
-
{ text: 'Action 3', key: '3' },
|
|
259
|
-
{ text: 'Action 4', key: '4' },
|
|
260
|
-
] : []).map((
|
|
261
|
-
{
|
|
262
|
-
text,
|
|
263
|
-
...restAction
|
|
264
|
-
}
|
|
265
|
-
) => <SectionMessageAction {...restAction}>{text}</SectionMessageAction>)}
|
|
266
|
-
/>
|
|
267
|
-
);
|
|
268
|
-
`,
|
|
269
|
-
'should map actions correctly if defined inline based on a condition',
|
|
270
|
-
);
|
|
271
|
-
|
|
272
|
-
defineInlineTest(
|
|
273
|
-
{ default: transformer, parser: 'tsx' },
|
|
274
|
-
{},
|
|
275
|
-
`
|
|
276
|
-
import React from "react";
|
|
277
|
-
import SectionMessage, { SectionMessageProps } from "@atlaskit/section-message";
|
|
278
|
-
|
|
279
|
-
const CustomLink = () => <a></a>;
|
|
280
|
-
|
|
281
|
-
export default () => (
|
|
282
|
-
<SectionMessage
|
|
283
|
-
linkComponent={CustomLink}
|
|
284
|
-
actions={[
|
|
285
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
286
|
-
{ text: 'Action 2', key: '2' },
|
|
287
|
-
{ text: 'Action 3', key: '3' },
|
|
288
|
-
{ text: 'Action 4', key: '4' },
|
|
289
|
-
]}
|
|
290
|
-
/>
|
|
291
|
-
);
|
|
292
|
-
`,
|
|
293
|
-
`
|
|
294
|
-
import React from "react";
|
|
295
|
-
import SectionMessage, { SectionMessageProps, SectionMessageAction } from "@atlaskit/section-message";
|
|
296
|
-
|
|
297
|
-
const CustomLink = () => <a></a>;
|
|
298
|
-
|
|
299
|
-
export default () => (
|
|
300
|
-
<SectionMessage
|
|
301
|
-
actions={[
|
|
302
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
303
|
-
{ text: 'Action 2', key: '2' },
|
|
304
|
-
{ text: 'Action 3', key: '3' },
|
|
305
|
-
{ text: 'Action 4', key: '4' },
|
|
306
|
-
].map((
|
|
307
|
-
{
|
|
308
|
-
text,
|
|
309
|
-
...restAction
|
|
310
|
-
}
|
|
311
|
-
) => <SectionMessageAction linkComponent={CustomLink} {...restAction}>{text}</SectionMessageAction>)} />
|
|
312
|
-
);
|
|
313
|
-
`,
|
|
314
|
-
'should move "linkComponent" from "SectionMessage" to "SectionMessageAction" if pointing to a component',
|
|
315
|
-
);
|
|
316
|
-
|
|
317
|
-
defineInlineTest(
|
|
318
|
-
{ default: transformer, parser: 'tsx' },
|
|
319
|
-
{},
|
|
320
|
-
`
|
|
321
|
-
import React from "react";
|
|
322
|
-
import SectionMessage, { SectionMessageProps } from "@atlaskit/section-message";
|
|
323
|
-
|
|
324
|
-
export default () => (
|
|
325
|
-
<SectionMessage
|
|
326
|
-
linkComponent={() => <a></a>}
|
|
327
|
-
actions={[
|
|
328
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
329
|
-
{ text: 'Action 2', key: '2' },
|
|
330
|
-
{ text: 'Action 3', key: '3' },
|
|
331
|
-
{ text: 'Action 4', key: '4' },
|
|
332
|
-
]}
|
|
333
|
-
/>
|
|
334
|
-
);
|
|
335
|
-
`,
|
|
336
|
-
`
|
|
337
|
-
import React from "react";
|
|
338
|
-
import SectionMessage, { SectionMessageProps, SectionMessageAction } from "@atlaskit/section-message";
|
|
339
|
-
|
|
340
|
-
export default () => (
|
|
341
|
-
<SectionMessage
|
|
342
|
-
actions={[
|
|
343
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
344
|
-
{ text: 'Action 2', key: '2' },
|
|
345
|
-
{ text: 'Action 3', key: '3' },
|
|
346
|
-
{ text: 'Action 4', key: '4' },
|
|
347
|
-
].map((
|
|
348
|
-
{
|
|
349
|
-
text,
|
|
350
|
-
...restAction
|
|
351
|
-
}
|
|
352
|
-
) => <SectionMessageAction linkComponent={() => <a></a>} {...restAction}>{text}</SectionMessageAction>)} />
|
|
353
|
-
);
|
|
354
|
-
`,
|
|
355
|
-
'should move "linkComponent" from "SectionMessage" to "SectionMessageAction" if component is defined inline',
|
|
356
|
-
);
|
|
357
|
-
|
|
358
|
-
defineInlineTest(
|
|
359
|
-
{ default: transformer, parser: 'tsx' },
|
|
360
|
-
{},
|
|
361
|
-
`
|
|
362
|
-
import React from "react";
|
|
363
|
-
import SectionMessage, { SectionMessageProps } from "@atlaskit/section-message";
|
|
364
|
-
|
|
365
|
-
const CustomLink = () => <a></a>;
|
|
366
|
-
|
|
367
|
-
export default () => (
|
|
368
|
-
<SectionMessage
|
|
369
|
-
linkComponent={CustomLink}
|
|
370
|
-
/>
|
|
371
|
-
);
|
|
372
|
-
`,
|
|
373
|
-
`
|
|
374
|
-
import React from "react";
|
|
375
|
-
import SectionMessage, { SectionMessageProps } from "@atlaskit/section-message";
|
|
376
|
-
|
|
377
|
-
const CustomLink = () => <a></a>;
|
|
378
|
-
|
|
379
|
-
export default () => (
|
|
380
|
-
<SectionMessage />
|
|
381
|
-
);
|
|
382
|
-
`,
|
|
383
|
-
'should remove "linkComponent" from "SectionMessage" if no actions are present',
|
|
384
|
-
);
|
|
385
|
-
});
|
|
386
|
-
|
|
387
|
-
describe('for dynamic imports', () => {
|
|
388
|
-
defineInlineTest(
|
|
389
|
-
{ default: transformer, parser: 'tsx' },
|
|
390
|
-
{},
|
|
391
|
-
`
|
|
392
|
-
import React from "react";
|
|
393
|
-
|
|
394
|
-
const SectionMessageDynamicImport = React.lazy(() => import('@atlaskit/section-message'));
|
|
395
|
-
|
|
396
|
-
const actions = [
|
|
397
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
398
|
-
{ text: 'Action 2', key: '2' },
|
|
399
|
-
{ text: 'Action 3', key: '3' },
|
|
400
|
-
{ text: 'Action 4', key: '4' },
|
|
401
|
-
];
|
|
402
|
-
|
|
403
|
-
export default () => (
|
|
404
|
-
<SectionMessageDynamicImport
|
|
405
|
-
actions={actions}
|
|
406
|
-
/>
|
|
407
|
-
);
|
|
408
|
-
`,
|
|
409
|
-
`
|
|
410
|
-
import React from "react";
|
|
411
|
-
|
|
412
|
-
const SectionMessageDynamicImport = React.lazy(() => import('@atlaskit/section-message'));
|
|
413
|
-
|
|
414
|
-
/* TODO: (from codemod) We have added \`React.lazy\` here. Feel free to change it to \`lazy\` or other named import depending upon how you imported. */
|
|
415
|
-
const SectionMessageAction = React.lazy(() => import("@atlaskit/section-message/section-message-action"));
|
|
416
|
-
|
|
417
|
-
const actions = [
|
|
418
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
419
|
-
{ text: 'Action 2', key: '2' },
|
|
420
|
-
{ text: 'Action 3', key: '3' },
|
|
421
|
-
{ text: 'Action 4', key: '4' },
|
|
422
|
-
];
|
|
423
|
-
|
|
424
|
-
export default () => (
|
|
425
|
-
<SectionMessageDynamicImport
|
|
426
|
-
actions={actions.map((
|
|
427
|
-
{
|
|
428
|
-
text,
|
|
429
|
-
...restAction
|
|
430
|
-
}
|
|
431
|
-
) => <SectionMessageAction {...restAction}>{text}</SectionMessageAction>)}
|
|
432
|
-
/>
|
|
433
|
-
);
|
|
434
|
-
`,
|
|
435
|
-
'should map actions correctly',
|
|
436
|
-
);
|
|
437
|
-
|
|
438
|
-
defineInlineTest(
|
|
439
|
-
{ default: transformer, parser: 'tsx' },
|
|
440
|
-
{},
|
|
441
|
-
`
|
|
442
|
-
import React from "react";
|
|
443
|
-
|
|
444
|
-
const SectionMessageDynamicImport = React.lazy(() => import('@atlaskit/section-message'));
|
|
445
|
-
|
|
446
|
-
export default () => (
|
|
447
|
-
<SectionMessageDynamicImport
|
|
448
|
-
actions={[
|
|
449
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
450
|
-
{ text: 'Action 2', key: '2' },
|
|
451
|
-
{ text: 'Action 3', key: '3' },
|
|
452
|
-
{ text: 'Action 4', key: '4' },
|
|
453
|
-
]}
|
|
454
|
-
/>
|
|
455
|
-
);
|
|
456
|
-
`,
|
|
457
|
-
`
|
|
458
|
-
import React from "react";
|
|
459
|
-
|
|
460
|
-
const SectionMessageDynamicImport = React.lazy(() => import('@atlaskit/section-message'));
|
|
461
|
-
|
|
462
|
-
/* TODO: (from codemod) We have added \`React.lazy\` here. Feel free to change it to \`lazy\` or other named import depending upon how you imported. */
|
|
463
|
-
const SectionMessageAction = React.lazy(() => import("@atlaskit/section-message/section-message-action"));
|
|
464
|
-
|
|
465
|
-
export default () => (
|
|
466
|
-
<SectionMessageDynamicImport
|
|
467
|
-
actions={[
|
|
468
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
469
|
-
{ text: 'Action 2', key: '2' },
|
|
470
|
-
{ text: 'Action 3', key: '3' },
|
|
471
|
-
{ text: 'Action 4', key: '4' },
|
|
472
|
-
].map((
|
|
473
|
-
{
|
|
474
|
-
text,
|
|
475
|
-
...restAction
|
|
476
|
-
}
|
|
477
|
-
) => <SectionMessageAction {...restAction}>{text}</SectionMessageAction>)}
|
|
478
|
-
/>
|
|
479
|
-
);
|
|
480
|
-
`,
|
|
481
|
-
'should map actions correctly if defined inline',
|
|
482
|
-
);
|
|
483
|
-
|
|
484
|
-
defineInlineTest(
|
|
485
|
-
{ default: transformer, parser: 'tsx' },
|
|
486
|
-
{},
|
|
487
|
-
`
|
|
488
|
-
import React from "react";
|
|
489
|
-
|
|
490
|
-
const SectionMessageDynamicImport = React.lazy(() => import('@atlaskit/section-message'));
|
|
491
|
-
|
|
492
|
-
const SectionMessageAction = () => {};
|
|
493
|
-
|
|
494
|
-
const actions = [
|
|
495
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
496
|
-
{ text: 'Action 2', key: '2' },
|
|
497
|
-
{ text: 'Action 3', key: '3' },
|
|
498
|
-
{ text: 'Action 4', key: '4' },
|
|
499
|
-
];
|
|
500
|
-
|
|
501
|
-
const Component = () => (
|
|
502
|
-
<SectionMessageDynamicImport
|
|
503
|
-
actions={actions}
|
|
504
|
-
/>
|
|
505
|
-
);
|
|
506
|
-
|
|
507
|
-
export default Component;
|
|
508
|
-
`,
|
|
509
|
-
`
|
|
510
|
-
import React from "react";
|
|
511
|
-
|
|
512
|
-
const SectionMessageDynamicImport = React.lazy(() => import('@atlaskit/section-message'));
|
|
513
|
-
|
|
514
|
-
/* TODO: (from codemod) We have added \`React.lazy\` here. Feel free to change it to \`lazy\` or other named import depending upon how you imported. */
|
|
515
|
-
const AtlaskitSectionMessageAction = React.lazy(() => import("@atlaskit/section-message/section-message-action"));
|
|
516
|
-
|
|
517
|
-
const SectionMessageAction = () => {};
|
|
518
|
-
|
|
519
|
-
const actions = [
|
|
520
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
521
|
-
{ text: 'Action 2', key: '2' },
|
|
522
|
-
{ text: 'Action 3', key: '3' },
|
|
523
|
-
{ text: 'Action 4', key: '4' },
|
|
524
|
-
];
|
|
525
|
-
|
|
526
|
-
const Component = () => (
|
|
527
|
-
<SectionMessageDynamicImport
|
|
528
|
-
actions={actions.map((
|
|
529
|
-
{
|
|
530
|
-
text,
|
|
531
|
-
...restAction
|
|
532
|
-
}
|
|
533
|
-
) => <AtlaskitSectionMessageAction {...restAction}>{text}</AtlaskitSectionMessageAction>)}
|
|
534
|
-
/>
|
|
535
|
-
);
|
|
536
|
-
|
|
537
|
-
export default Component;
|
|
538
|
-
`,
|
|
539
|
-
'should map actions correctly - with alias',
|
|
540
|
-
);
|
|
541
|
-
|
|
542
|
-
defineInlineTest(
|
|
543
|
-
{ default: transformer, parser: 'tsx' },
|
|
544
|
-
{},
|
|
545
|
-
`
|
|
546
|
-
import React from "react";
|
|
547
|
-
|
|
548
|
-
const SectionMessageDynamicImport = React.lazy(() => import('@atlaskit/section-message'));
|
|
549
|
-
|
|
550
|
-
const actions = [
|
|
551
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
552
|
-
{ text: 'Action 2', key: '2' },
|
|
553
|
-
{ text: 'Action 3', key: '3' },
|
|
554
|
-
{ text: 'Action 4', key: '4' },
|
|
555
|
-
];
|
|
556
|
-
|
|
557
|
-
export default () => (
|
|
558
|
-
<SectionMessageDynamicImport />
|
|
559
|
-
);
|
|
560
|
-
`,
|
|
561
|
-
`
|
|
562
|
-
import React from "react";
|
|
563
|
-
|
|
564
|
-
const SectionMessageDynamicImport = React.lazy(() => import('@atlaskit/section-message'));
|
|
565
|
-
|
|
566
|
-
const actions = [
|
|
567
|
-
{ text: 'Action 1', key: '1', testId: 'one' },
|
|
568
|
-
{ text: 'Action 2', key: '2' },
|
|
569
|
-
{ text: 'Action 3', key: '3' },
|
|
570
|
-
{ text: 'Action 4', key: '4' },
|
|
571
|
-
];
|
|
572
|
-
|
|
573
|
-
export default () => (
|
|
574
|
-
<SectionMessageDynamicImport />
|
|
575
|
-
);
|
|
576
|
-
`,
|
|
577
|
-
'should only map when "actions" prop is defined',
|
|
578
|
-
);
|
|
579
|
-
});
|
|
580
|
-
});
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
type ASTPath,
|
|
3
|
-
type default as core,
|
|
4
|
-
type JSXAttribute,
|
|
5
|
-
type JSXElement,
|
|
6
|
-
} from 'jscodeshift';
|
|
7
|
-
import { type Collection } from 'jscodeshift/src/Collection';
|
|
8
|
-
|
|
9
|
-
import {
|
|
10
|
-
addCommentBefore,
|
|
11
|
-
getDefaultSpecifier,
|
|
12
|
-
getJSXAttributesByName,
|
|
13
|
-
} from '@atlaskit/codemod-utils';
|
|
14
|
-
|
|
15
|
-
import {
|
|
16
|
-
APPEARANCE_OLD_TO_NEW_MAPPING,
|
|
17
|
-
APPEARANCE_PROP_NAME,
|
|
18
|
-
SECTION_MESSAGE_PACKAGE_NAME,
|
|
19
|
-
} from './constants';
|
|
20
|
-
|
|
21
|
-
export const changeAppearanceProp = (j: core.JSCodeshift, source: Collection<Node>) => {
|
|
22
|
-
const defaultSpecifier = getDefaultSpecifier(j, source, SECTION_MESSAGE_PACKAGE_NAME);
|
|
23
|
-
|
|
24
|
-
if (!defaultSpecifier) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
source.findJSXElements(defaultSpecifier).forEach((element: ASTPath<JSXElement>) => {
|
|
29
|
-
getJSXAttributesByName(j, element, APPEARANCE_PROP_NAME).forEach(
|
|
30
|
-
(attribute: ASTPath<JSXAttribute>) => {
|
|
31
|
-
const { value } = attribute.node;
|
|
32
|
-
if (!value) {
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
// appearance prop can be provided in multiple ways. Handling different cases here
|
|
36
|
-
switch (value.type) {
|
|
37
|
-
// case when object value is provided
|
|
38
|
-
case 'JSXExpressionContainer':
|
|
39
|
-
const { expression } = value;
|
|
40
|
-
|
|
41
|
-
// case when string is provided inside JSX expression
|
|
42
|
-
// e.g.: <SectionMessage appearance={"information"} />
|
|
43
|
-
if (expression.type === 'StringLiteral') {
|
|
44
|
-
replaceAppearanceStringValue(j, attribute, expression.value);
|
|
45
|
-
}
|
|
46
|
-
// case when a variable is provided as value
|
|
47
|
-
// e.g.: <SectionMessage appearance={someVariable} />
|
|
48
|
-
else if (expression.type !== 'JSXEmptyExpression') {
|
|
49
|
-
const mappingValue = j.memberExpression(
|
|
50
|
-
j.objectExpression(
|
|
51
|
-
Object.entries(APPEARANCE_OLD_TO_NEW_MAPPING).map(([key, value]) =>
|
|
52
|
-
j.objectProperty(j.identifier(key), j.stringLiteral(value)),
|
|
53
|
-
),
|
|
54
|
-
),
|
|
55
|
-
expression,
|
|
56
|
-
);
|
|
57
|
-
mappingValue.computed = true;
|
|
58
|
-
|
|
59
|
-
const propValue = j.logicalExpression('||', mappingValue, expression);
|
|
60
|
-
|
|
61
|
-
j(attribute).replaceWith(
|
|
62
|
-
j.jsxAttribute(
|
|
63
|
-
j.jsxIdentifier(APPEARANCE_PROP_NAME),
|
|
64
|
-
j.jsxExpressionContainer(propValue),
|
|
65
|
-
),
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
addCommentBefore(
|
|
69
|
-
j,
|
|
70
|
-
j(attribute),
|
|
71
|
-
`We have added this temporary appearance mapping here to make things work. Feel free to change it accordingly. We have also added @ts-ignore for typescript files.
|
|
72
|
-
@ts-ignore
|
|
73
|
-
`,
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
break;
|
|
78
|
-
|
|
79
|
-
// case when string value is provided
|
|
80
|
-
// e.g.: <SectionMessage appearance="information" />
|
|
81
|
-
case 'StringLiteral':
|
|
82
|
-
replaceAppearanceStringValue(j, attribute, value.value);
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
);
|
|
86
|
-
});
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const replaceAppearanceStringValue = (
|
|
90
|
-
j: core.JSCodeshift,
|
|
91
|
-
attribute: core.ASTPath<JSXAttribute>,
|
|
92
|
-
propValue: string,
|
|
93
|
-
) => {
|
|
94
|
-
const newPropValue: string = APPEARANCE_OLD_TO_NEW_MAPPING[propValue];
|
|
95
|
-
|
|
96
|
-
if (newPropValue) {
|
|
97
|
-
j(attribute).replaceWith(
|
|
98
|
-
j.jsxAttribute(j.jsxIdentifier(APPEARANCE_PROP_NAME), j.stringLiteral(newPropValue)),
|
|
99
|
-
);
|
|
100
|
-
}
|
|
101
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export const SECTION_MESSAGE_PACKAGE_NAME = '@atlaskit/section-message';
|
|
2
|
-
export const APPEARANCE_PROP_NAME = 'appearance';
|
|
3
|
-
export const APPEARANCE_OLD_TO_NEW_MAPPING: {
|
|
4
|
-
[index: string]: string;
|
|
5
|
-
} = {
|
|
6
|
-
info: 'information',
|
|
7
|
-
confirmation: 'success',
|
|
8
|
-
change: 'discovery',
|
|
9
|
-
};
|
|
10
|
-
export const SECTION_MESSAGE_ACTION_PACKAGE_NAME = `${SECTION_MESSAGE_PACKAGE_NAME}/section-message-action`;
|
|
11
|
-
export const SECTION_MESSAGE_ACTION_COMPONENT_NAME = 'SectionMessageAction';
|
|
12
|
-
export const LINK_COMPONENT_PROP_NAME = 'linkComponent';
|
|
13
|
-
export const ACTIONS_PROP_NAME = 'actions';
|