Skip to content

Commit 7189386

Browse files
reidbarberreidbarber
authored
feat: add TableView codemods (#7117)
* add Table codemods * update to support TableView naming * update migration docs * keep key prop if array.map used * add Table codemods * update to support TableView naming * update migration docs * keep key prop if array.map used * remove nested columns from test * leave a comment for nested columns * reuse updateKeyToId * fix column key * lint * typescript * add codemods to leave a comment for unimplemented props * add UNSTABLE_ prefixes * add to docs * add isRowHeader to first Column if static, otherwise leave a comment * add comment to check for id prop on Row
1 parent ee685cc commit 7189386

File tree

6 files changed

+935
-44
lines changed

6 files changed

+935
-44
lines changed

‎.storybook-s2/docs/Migrating.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,17 @@ export function Migrating() {
338338
<H3>Switch</H3>
339339
<P>No updates needed.</P>
340340

341+
<H3>TableView</H3>
342+
<ul className="sb-unstyled">
343+
<li className={style({font: 'body', marginY: 8})}>For <Code>Column</Code> and <Code>Row</Code>: Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
344+
<li className={style({font: 'body', marginY: 8})}>For dynamic tables, pass a <Code>columns</Code> prop into <Code>Row</Code></li>
345+
<li className={style({font: 'body', marginY: 8})}>For <Code>Row</Code>: Update dynamic render function to pass in <Code>column</Code> instead of <Code>columnKey</Code></li>
346+
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_allowsExpandableRows</Code> (it has not been implemented yet)</li>
347+
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_onExpandedChange</Code> (it has not been implemented yet)</li>
348+
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_expandedKeys</Code> (it has not been implemented yet)</li>
349+
<li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>UNSTABLE_defaultExpandedKeys</Code> (it has not been implemented yet)</li>
350+
</ul>
351+
341352
<H3>Tabs</H3>
342353
<ul className="sb-unstyled">
343354
<li className={style({font: 'body', marginY: 8})}>Inside <Code>TabList</Code>: Update <Code>Item</Code> to be <Code>Tab</Code></li>

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

Lines changed: 267 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,271 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Renames variants 1`] = `
4-
"// import {TableView, TableHeader, TableBody, Column, Row, Cell} from '@adobe/react-spectrum';
3+
exports[`Dynamic TableView 1`] = `
4+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
55
6-
<div>
7-
</div>"
6+
let columns = [
7+
{name: 'Foo', id: 'foo'},
8+
{name: 'Bar', id: 'bar'},
9+
{name: 'Baz', id: 'baz'}
10+
];
11+
12+
let items = [
13+
{id: 1, foo: 'Foo 1', bar: 'Bar 1', baz: 'Baz 1'},
14+
{id: 2, foo: 'Foo 2', bar: 'Bar 2', baz: 'Baz 2'}
15+
];
16+
17+
<TableView>
18+
<TableHeader columns={columns}>
19+
// TODO(S2-upgrade): You'll need to add isRowHeader to one of the columns manually.
20+
{column => <Column id={column.name}>{column.name}</Column>}
21+
</TableHeader>
22+
<TableBody items={items}>
23+
{item =>
24+
(<Row id={item.foo} columns={columns}>
25+
{column => <Cell>{item[column.name]}</Cell>}
26+
</Row>)
27+
}
28+
</TableBody>
29+
</TableView>"
30+
`;
31+
32+
exports[`Keep key if array.map used 1`] = `
33+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
34+
35+
let columns = [
36+
{name: 'Foo', id: 'foo'},
37+
{name: 'Bar', id: 'bar'},
38+
{name: 'Baz', id: 'baz'}
39+
];
40+
41+
let items = [
42+
{id: 1, foo: 'Foo 1', bar: 'Bar 1', baz: 'Baz 1'},
43+
{id: 2, foo: 'Foo 2', bar: 'Bar 2', baz: 'Baz 2'}
44+
];
45+
46+
<TableView>
47+
<TableHeader columns={columns}>
48+
// TODO(S2-upgrade): You'll need to add isRowHeader to one of the columns manually.
49+
{columns.map(column => <Column id={column.id} key={column.id}>{column.name}</Column>)}
50+
</TableHeader>
51+
<TableBody items={items}>
52+
{items.map(item =>
53+
(<Row id={item.id} key={item.id} columns={columns}>
54+
{columns.map(column => <Cell key={column.id}>{item[column.id]}</Cell>)}
55+
</Row>)
56+
)}
57+
</TableBody>
58+
</TableView>"
59+
`;
60+
61+
exports[`Leave a comment for UNSTABLE_allowsExpandableRows 1`] = `
62+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
63+
64+
// TODO(S2-upgrade): UNSTABLE_allowsExpandableRows has not been implemented yet.
65+
<TableView>
66+
<TableHeader>
67+
<Column id="test" isRowHeader={true}>Test</Column>
68+
<Column id="blah">Blah</Column>
69+
</TableHeader>
70+
<TableBody>
71+
<Row>
72+
<Cell>Test1</Cell>
73+
<Cell>One</Cell>
74+
</Row>
75+
<Row>
76+
<Cell>Test2</Cell>
77+
<Cell>One</Cell>
78+
</Row>
79+
</TableBody>
80+
</TableView>"
81+
`;
82+
83+
exports[`Leave a comment for UNSTABLE_defaultExpandedKeys 1`] = `
84+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
85+
86+
// TODO(S2-upgrade): UNSTABLE_defaultExpandedKeys has not been implemented yet.
87+
<TableView>
88+
<TableHeader>
89+
<Column id="test" isRowHeader={true}>Test</Column>
90+
<Column id="blah">Blah</Column>
91+
</TableHeader>
92+
<TableBody>
93+
<Row>
94+
<Cell>Test1</Cell>
95+
<Cell>One</Cell>
96+
</Row>
97+
<Row>
98+
<Cell>Test2</Cell>
99+
<Cell>One</Cell>
100+
</Row>
101+
</TableBody>
102+
</TableView>"
103+
`;
104+
105+
exports[`Leave a comment for UNSTABLE_expandedKeys 1`] = `
106+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
107+
108+
// TODO(S2-upgrade): UNSTABLE_expandedKeys has not been implemented yet.
109+
<TableView>
110+
<TableHeader>
111+
<Column id="test" isRowHeader={true}>Test</Column>
112+
<Column id="blah">Blah</Column>
113+
</TableHeader>
114+
<TableBody>
115+
<Row>
116+
<Cell>Test1</Cell>
117+
<Cell>One</Cell>
118+
</Row>
119+
<Row>
120+
<Cell>Test2</Cell>
121+
<Cell>One</Cell>
122+
</Row>
123+
</TableBody>
124+
</TableView>"
125+
`;
126+
127+
exports[`Leave a comment for UNSTABLE_onExpandedChange 1`] = `
128+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
129+
130+
// TODO(S2-upgrade): UNSTABLE_onExpandedChange has not been implemented yet.
131+
<TableView>
132+
<TableHeader>
133+
<Column id="test" isRowHeader={true}>Test</Column>
134+
<Column id="blah">Blah</Column>
135+
</TableHeader>
136+
<TableBody>
137+
<Row>
138+
<Cell>Test1</Cell>
139+
<Cell>One</Cell>
140+
</Row>
141+
<Row>
142+
<Cell>Test2</Cell>
143+
<Cell>One</Cell>
144+
</Row>
145+
</TableBody>
146+
</TableView>"
147+
`;
148+
149+
exports[`Leave a comment for dragAndDropHooks 1`] = `
150+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
151+
152+
// TODO(S2-upgrade): dragAndDropHooks has not been implemented yet.
153+
<TableView>
154+
<TableHeader>
155+
<Column id="test" isRowHeader={true}>Test</Column>
156+
<Column id="blah">Blah</Column>
157+
</TableHeader>
158+
<TableBody>
159+
<Row>
160+
<Cell>Test1</Cell>
161+
<Cell>One</Cell>
162+
</Row>
163+
<Row>
164+
<Cell>Test2</Cell>
165+
<Cell>One</Cell>
166+
</Row>
167+
</TableBody>
168+
</TableView>"
169+
`;
170+
171+
exports[`Leave a comment for nested columns 1`] = `
172+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
173+
174+
// TODO(S2-upgrade): Nested Column components are not supported yet.
175+
<TableView>
176+
<TableHeader>
177+
<Column id="test" isRowHeader={true}>Test</Column>
178+
<Column title="blah">
179+
<Column id="test1">
180+
Test 1
181+
</Column>
182+
<Column id="test2">
183+
Test 2
184+
</Column>
185+
</Column>
186+
</TableHeader>
187+
<TableBody>
188+
<Row>
189+
<Cell>Test1</Cell>
190+
<Cell>One</Cell>
191+
</Row>
192+
<Row>
193+
<Cell>Test2</Cell>
194+
<Cell>One</Cell>
195+
</Row>
196+
</TableBody>
197+
</TableView>"
198+
`;
199+
200+
exports[`Leave a comment for selectionStyle 1`] = `
201+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
202+
203+
// TODO(S2-upgrade): selectionStyle has not been implemented yet.
204+
<TableView>
205+
<TableHeader>
206+
<Column id="test" isRowHeader={true}>Test</Column>
207+
<Column id="blah">Blah</Column>
208+
</TableHeader>
209+
<TableBody>
210+
<Row>
211+
<Cell>Test1</Cell>
212+
<Cell>One</Cell>
213+
</Row>
214+
<Row>
215+
<Cell>Test2</Cell>
216+
<Cell>One</Cell>
217+
</Row>
218+
</TableBody>
219+
</TableView>"
220+
`;
221+
222+
exports[`Leave comment to add id to Row if no id in items 1`] = `
223+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
224+
225+
let columns = [
226+
{name: 'Foo', id: 'foo'},
227+
{name: 'Bar', id: 'bar'},
228+
{name: 'Baz', id: 'baz'}
229+
];
230+
231+
let items = [
232+
{foo: 'Foo 1', bar: 'Bar 1', baz: 'Baz 1'},
233+
{foo: 'Foo 2', bar: 'Bar 2', baz: 'Baz 2'}
234+
];
235+
236+
<TableView>
237+
<TableHeader columns={columns}>
238+
// TODO(S2-upgrade): You'll need to add isRowHeader to one of the columns manually.
239+
{column => <Column id={column.name}>{column.name}</Column>}
240+
</TableHeader>
241+
<TableBody items={items}>
242+
{item =>
243+
(// TODO(S2-upgrade): If the items do not have id properties, you'll need to add an id prop to the Row.
244+
<Row columns={columns}>
245+
{column => <Cell>{item[column.name]}</Cell>}
246+
</Row>)
247+
}
248+
</TableBody>
249+
</TableView>"
250+
`;
251+
252+
exports[`Static TableView 1`] = `
253+
"import { Cell, Column, Row, TableBody, TableHeader, TableView } from "@react-spectrum/s2";
254+
255+
<TableView>
256+
<TableHeader>
257+
<Column id="test" isRowHeader={true}>Test</Column>
258+
<Column id="blah">Blah</Column>
259+
</TableHeader>
260+
<TableBody>
261+
<Row>
262+
<Cell>Test1</Cell>
263+
<Cell>One</Cell>
264+
</Row>
265+
<Row>
266+
<Cell>Test2</Cell>
267+
<Cell>One</Cell>
268+
</Row>
269+
</TableBody>
270+
</TableView>"
8271
`;

0 commit comments

Comments
 (0)