Skip to content

Commit 32574f8

Browse files
reidbarberreidbarber
authored
feat: codemods for Badge and Well (#6941)
* add Well codemod * add migration docs for well * add codemod for badge * update well font * add story for testing style macro * add to migration docs
1 parent 95c8344 commit 32574f8

File tree

9 files changed

+207
-47
lines changed

9 files changed

+207
-47
lines changed

‎.storybook-s2/docs/Migrating.jsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@ export function Migrating() {
5353
<li className={style({font: 'body', marginY: 8})}>Update <Code>size</Code> to be a pixel value if it currently matches <Code>'avatar-size-*'</Code></li>
5454
</ul>
5555

56+
<H3>Badge</H3>
57+
<ul className="sb-unstyled">
58+
<li className={style({font: 'body', marginY: 8})}>Change <Code>variant="info"</Code> to <Code>variant="informative"</Code></li>
59+
</ul>
60+
5661
<H3>Breadcrumbs</H3>
5762
<ul className="sb-unstyled">
5863
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>showRoot</Code> (it has not been implemented yet)</li>
@@ -343,6 +348,27 @@ export function Migrating() {
343348
<li className={style({font: 'body', marginY: 8})}>Update <Code>View</Code> to be a <Code>div</Code> and apply styles using the style macro</li>
344349
</ul>
345350

351+
<H3>Well</H3>
352+
<ul className="sb-unstyled">
353+
<li className={style({font: 'body', marginY: 8})}>
354+
Update <Code>Well</Code> to be a <Code>div</Code> and apply styles using the style macro:
355+
<pre className={'sb-unstyled ' + style({padding: 32, marginY: 32, backgroundColor: 'layer-1', borderRadius: 'xl', fontFamily: 'code', fontSize: 'code-sm', lineHeight: 'code'})}>
356+
<div>{`<div className={style({`}</div>
357+
<div>{` display: 'block',`}</div>
358+
<div>{` textAlign: 'start',`}</div>
359+
<div>{` padding: 16,`}</div>
360+
<div>{` minWidth: 160,`}</div>
361+
<div>{` marginTop: 4,`}</div>
362+
<div>{` borderWidth: 1,`}</div>
363+
<div>{` borderRadius: 'sm',`}</div>
364+
<div>{` borderStyle: 'solid',`}</div>
365+
<div>{` borderColor: 'transparent-black-75',`}</div>
366+
<div>{` font: 'body-sm'`}</div>
367+
<div>{`})} />`}</div>
368+
</pre>
369+
</li>
370+
</ul>
371+
346372
<H2>Style props</H2>
347373
<P>React Spectrum v3 supported a limited set of <Link href="https://react-spectrum.adobe.com/react-spectrum/styling.html#style-props">style props</Link> for layout and positioning using Spectrum-defined values. Usage of these should be updated to instead use the <Link href="?path=/docs/style-macro--docs">style macro</Link>.</P>
348374
<P>Example:</P>

‎packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
* Copyright 2024 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Link} from '../src';
14+
import React from 'react';
15+
import {style} from '../style/spectrum-theme' with {type: 'macro'};
16+
17+
export default {
18+
title: 'S2 Style Macro',
19+
parameters: {
20+
docs: {disable: true}
21+
}
22+
};
23+
24+
export function Example() {
25+
return (
26+
<div className={style({backgroundColor: 'orange-500', color: 'black', font: 'body', paddingX: 8, paddingY: 4, borderRadius: 'lg'})}>
27+
Test
28+
</div>
29+
);
30+
}
31+
32+
export function Well() {
33+
return (
34+
<div
35+
className={style({
36+
display: 'block',
37+
textAlign: 'start',
38+
minWidth: 160,
39+
padding: 16,
40+
marginTop: 4,
41+
borderWidth: 1,
42+
borderRadius: 'sm',
43+
backgroundColor: 'layer-1',
44+
borderStyle: 'solid',
45+
borderColor: 'transparent-black-75',
46+
font: 'body-sm'
47+
})}>
48+
S2 style macro equivalent to v3 <Link href="https://react-spectrum.adobe.com/react-spectrum/Well.html" target="_blank">Well</Link>.
49+
</div>
50+
);
51+
}
52+

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/badge.test.ts.snap

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`No change 1`] = `
3+
exports[`Change variant info to informative 1`] = `
44
"import { Badge } from "@react-spectrum/s2";
5-
5+
let variant = 'info';
6+
let props = {variant: 'info'};
67
<div>
7-
<Badge variant="positive">Licensed</Badge>
8+
<Badge variant="informative">
9+
Content Info
10+
</Badge>
11+
<Badge variant={"informative"}>
12+
Content Info
13+
</Badge>
14+
<Badge // TODO(S2-upgrade): Prop variant could not be automatically updated because variant could not be followed.
15+
variant={variant}>
16+
Content Info
17+
</Badge>
18+
<Badge // TODO(S2-upgrade): check this spread for style props
19+
{...props}>
20+
Content Info
21+
</Badge>
822
</div>"
923
`;

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/well.test.ts.snap

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Updates Well to be div with style macro 1`] = `
4+
"import { Well } from "@react-spectrum/s2";
5+
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
6+
7+
<div>
8+
<div
9+
className={style({
10+
display: "block",
11+
textAlign: "start",
12+
minWidth: 160,
13+
padding: 16,
14+
marginTop: 4,
15+
borderWidth: 1,
16+
borderRadius: "sm",
17+
backgroundColor: "layer-1",
18+
borderStyle: "solid",
19+
borderColor: "transparent-black-75",
20+
font: "body-sm"
21+
})}>
22+
Well content
23+
</div>
24+
<div
25+
role="region"
26+
aria-labelledby="wellLabel"
27+
className={style({
28+
display: "block",
29+
textAlign: "start",
30+
minWidth: 160,
31+
padding: 16,
32+
marginTop: 4,
33+
borderWidth: 1,
34+
borderRadius: "sm",
35+
backgroundColor: "layer-1",
36+
borderStyle: "solid",
37+
borderColor: "transparent-black-75",
38+
font: "body-sm"
39+
})}>
40+
<h3 id="wellLabel">Shipping Address</h3>
41+
<p>601 Townsend Street<br /> San Francisco, CA 94103</p>
42+
</div>
43+
</div>"
44+
`;

‎packages/dev/codemods/src/s1-to-s2/__tests__/badge.test.ts

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,22 @@ const test = (name: string, input: string) => {
66
defineSnapshotTest(transform, {}, input, name);
77
};
88

9-
test('No change', `
9+
test('Change variant info to informative', `
1010
import {Badge} from '@adobe/react-spectrum';
11-
11+
let variant = 'info';
12+
let props = {variant: 'info'};
1213
<div>
13-
<Badge variant="positive">Licensed</Badge>
14+
<Badge variant="info">
15+
Content Info
16+
</Badge>
17+
<Badge variant={"info"}>
18+
Content Info
19+
</Badge>
20+
<Badge variant={variant}>
21+
Content Info
22+
</Badge>
23+
<Badge {...props}>
24+
Content Info
25+
</Badge>
1426
</div>
1527
`);

‎packages/dev/codemods/src/s1-to-s2/__tests__/well.test.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// @ts-ignore
2+
import {defineSnapshotTest} from 'jscodeshift/dist/testUtils';
3+
import transform from '../src/codemods/codemod';
4+
5+
const test = (name: string, input: string) => {
6+
defineSnapshotTest(transform, {}, input, name);
7+
};
8+
9+
test('Updates Well to be div with style macro', `
10+
import {Well} from '@adobe/react-spectrum';
11+
12+
<div>
13+
<Well>
14+
Well content
15+
</Well>
16+
<Well role="region" aria-labelledby="wellLabel">
17+
<h3 id="wellLabel">Shipping Address</h3>
18+
<p>601 Townsend Street<br /> San Francisco, CA 94103</p>
19+
</Well>
20+
</div>
21+
`);

‎packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,23 @@ export const changes: ChangesJSON = {
132132
}
133133
]
134134
},
135+
Badge: {
136+
changes: [
137+
{
138+
description: "Change variant='info' to variant='informative'",
139+
reason: 'Updated naming convention',
140+
function: {
141+
name: 'updatePropNameAndValue',
142+
args: {
143+
oldProp: 'variant',
144+
oldValue: 'info',
145+
newProp: 'variant',
146+
newValue: 'informative'
147+
}
148+
}
149+
}
150+
]
151+
},
135152
Breadcrumbs: {
136153
changes: [
137154
{
@@ -426,19 +443,6 @@ export const changes: ChangesJSON = {
426443
}
427444
]
428445
},
429-
Flex: {
430-
changes: [
431-
{
432-
description:
433-
'Update Flex to be a div and apply flex styles using the style macro',
434-
reason: 'Updated API',
435-
function: {
436-
name: 'updateToNewComponent',
437-
args: {newComponent: 'div'}
438-
}
439-
}
440-
]
441-
},
442446
Form: {
443447
changes: [
444448
{
@@ -461,19 +465,6 @@ export const changes: ChangesJSON = {
461465
}
462466
]
463467
},
464-
Grid: {
465-
changes: [
466-
{
467-
description:
468-
'Update Grid to be a div and apply grid styles using the style macro',
469-
reason: 'Updated API',
470-
function: {
471-
name: 'updateToNewComponent',
472-
args: {newComponent: 'div'}
473-
}
474-
}
475-
]
476-
},
477468
InlineAlert: {
478469
changes: [
479470
{
@@ -1200,18 +1191,5 @@ export const changes: ChangesJSON = {
12001191
}
12011192
}
12021193
]
1203-
},
1204-
View: {
1205-
changes: [
1206-
{
1207-
description:
1208-
'Update View to be a div and apply styles using the style macro',
1209-
reason: 'Updated API',
1210-
function: {
1211-
name: 'updateToNewComponent',
1212-
args: {newComponent: 'div'}
1213-
}
1214-
}
1215-
]
12161194
}
12171195
};

‎packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ let availableComponents = getComponents();
1515
availableComponents.add('View');
1616
availableComponents.add('Flex');
1717
availableComponents.add('Grid');
18+
availableComponents.add('Well');
1819

1920
// Replaced by collection component-specific items
2021
availableComponents.add('Item');

‎packages/dev/codemods/src/s1-to-s2/src/codemods/styleProps.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,7 @@ function handleProp(
487487
addComment(path.node, ' TODO(S2-upgrade): check this UNSAFE_style');
488488
break;
489489
case 'UNSAFE_className':
490-
if (element === 'Flex' || element === 'Grid' || element === 'View') {
490+
if (element === 'Flex' || element === 'Grid' || element === 'View' || element === 'Well') {
491491
path.get('name').replaceWith(t.jsxIdentifier('className'));
492492
} else {
493493
addComment(path.node, ' TODO(S2-upgrade): check this UNSAFE_className');
@@ -511,11 +511,23 @@ export function transformStyleProps(path: NodePath<t.JSXElement>, element: strin
511511
let dynamicValues = new Map<string, t.ObjectProperty['value']>;
512512
let conditions = new Map<string, t.ObjectProperty['value']>;
513513

514-
let isDOMElement = element === 'Flex' || element === 'Grid' || element === 'View';
514+
let isDOMElement = element === 'Flex' || element === 'Grid' || element === 'View' || element === 'Well';
515515
if (element === 'Flex') {
516516
macroValues.set('display', 'flex');
517517
} else if (element === 'Grid') {
518518
macroValues.set('display', 'grid');
519+
} else if (element === 'Well') {
520+
macroValues.set('display', 'block');
521+
macroValues.set('textAlign', 'start');
522+
macroValues.set('minWidth', 160);
523+
macroValues.set('padding', 16);
524+
macroValues.set('marginTop', 4);
525+
macroValues.set('borderWidth', 1);
526+
macroValues.set('borderRadius', 'sm');
527+
macroValues.set('backgroundColor', 'layer-1');
528+
macroValues.set('borderStyle', 'solid');
529+
macroValues.set('borderColor', 'transparent-black-75');
530+
macroValues.set('font', 'body-sm');
519531
}
520532

521533
let attrs = path.get('openingElement').get('attributes');

0 commit comments

Comments
 (0)