Skip to content

Commit cbad10d

Browse files
djhidjhi
authored
Merge pull request #10804 from marmelab/stories-datatable
[Storybook] Migrate stories to use DataTable
2 parents efcfd1f + b8c3b07 commit cbad10d

31 files changed

+401
-414
lines changed

‎packages/ra-ui-materialui/src/button/BulkDeleteButton.stories.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import { Resource } from 'ra-core';
55
import polyglotI18nProvider from 'ra-i18n-polyglot';
66
import englishMessages from 'ra-language-english';
77
import fakeRestDataProvider from 'ra-data-fakerest';
8-
98
import { AdminContext } from '../AdminContext';
109
import { BulkDeleteButton } from './BulkDeleteButton';
1110
import { defaultLightTheme } from '../theme';
12-
import { Datagrid, List } from '../list';
13-
import { NumberField, TextField } from '../field';
11+
import { DataTable, List } from '../list';
1412
import { AdminUI } from '../AdminUI';
1513

1614
export default { title: 'ra-ui-materialui/button/BulkDeleteButton' };
@@ -104,12 +102,12 @@ const Wrapper = ({ children, ...props }) => {
104102
name="books"
105103
list={() => (
106104
<List>
107-
<Datagrid bulkActionButtons={children}>
108-
<TextField source="id" />
109-
<TextField source="title" />
110-
<TextField source="author" />
111-
<NumberField source="reads" />
112-
</Datagrid>
105+
<DataTable bulkActionButtons={children}>
106+
<DataTable.Col source="id" />
107+
<DataTable.Col source="title" />
108+
<DataTable.Col source="author" />
109+
<DataTable.NumberCol source="reads" />
110+
</DataTable>
113111
</List>
114112
)}
115113
/>

‎packages/ra-ui-materialui/src/button/BulkExportButton.stories.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import { Resource } from 'ra-core';
55
import polyglotI18nProvider from 'ra-i18n-polyglot';
66
import englishMessages from 'ra-language-english';
77
import fakeRestDataProvider from 'ra-data-fakerest';
8-
98
import { AdminContext } from '../AdminContext';
109
import { BulkExportButton } from './BulkExportButton';
1110
import { defaultLightTheme } from '../theme';
12-
import { Datagrid, List } from '../list';
13-
import { NumberField, TextField } from '../field';
11+
import { DataTable, List } from '../list';
1412
import { AdminUI } from '../AdminUI';
1513

1614
export default { title: 'ra-ui-materialui/button/BulkExportButton' };
@@ -104,12 +102,12 @@ const Wrapper = ({ children, ...props }) => {
104102
name="books"
105103
list={() => (
106104
<List>
107-
<Datagrid bulkActionButtons={children}>
108-
<TextField source="id" />
109-
<TextField source="title" />
110-
<TextField source="author" />
111-
<NumberField source="reads" />
112-
</Datagrid>
105+
<DataTable bulkActionButtons={children}>
106+
<DataTable.Col source="id" />
107+
<DataTable.Col source="title" />
108+
<DataTable.Col source="author" />
109+
<DataTable.NumberCol source="reads" />
110+
</DataTable>
113111
</List>
114112
)}
115113
/>

‎packages/ra-ui-materialui/src/button/BulkUpdateButton.stories.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@ import polyglotI18nProvider from 'ra-i18n-polyglot';
33
import englishMessages from 'ra-language-english';
44
import { Resource, TestMemoryRouter } from 'ra-core';
55
import fakeRestDataProvider from 'ra-data-fakerest';
6-
76
import { BulkUpdateButton } from './BulkUpdateButton';
87
import { AdminContext } from '../AdminContext';
98
import { AdminUI } from '../AdminUI';
10-
import { List, Datagrid } from '../list';
11-
import { TextField, NumberField } from '../field';
9+
import { List, DataTable } from '../list';
1210
import { deepmerge } from '@mui/utils';
1311
import { defaultLightTheme } from '../theme';
1412
import { ThemeOptions } from '@mui/material';
@@ -104,12 +102,12 @@ const Wrapper = ({ bulkActionButtons, theme = undefined }) => (
104102
name="books"
105103
list={() => (
106104
<List>
107-
<Datagrid bulkActionButtons={bulkActionButtons}>
108-
<TextField source="id" />
109-
<TextField source="title" />
110-
<TextField source="author" />
111-
<NumberField source="reads" />
112-
</Datagrid>
105+
<DataTable bulkActionButtons={bulkActionButtons}>
106+
<DataTable.Col source="id" />
107+
<DataTable.Col source="title" />
108+
<DataTable.Col source="author" />
109+
<DataTable.NumberCol source="reads" />
110+
</DataTable>
113111
</List>
114112
)}
115113
/>

‎packages/ra-ui-materialui/src/button/CreateButton.stories.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import polyglotI18nProvider from 'ra-i18n-polyglot';
33
import englishMessages from 'ra-language-english';
44
import frenchMessages from 'ra-language-french';
5+
56
import {
67
AuthProvider,
78
I18nProvider,
@@ -10,13 +11,13 @@ import {
1011
ResourceContextProvider,
1112
TestMemoryRouter,
1213
} from 'ra-core';
14+
1315
import fakeRestDataProvider from 'ra-data-fakerest';
1416
import { QueryClient } from '@tanstack/react-query';
1517
import { AdminContext } from '../AdminContext';
1618
import { AdminUI } from '../AdminUI';
1719
import { List } from '../list/List';
18-
import { Datagrid } from '../list/datagrid/Datagrid';
19-
import { TextField } from '../field/TextField';
20+
import { DataTable } from '../list';
2021
import { Create } from '../detail/Create';
2122
import { SimpleForm } from '../form/SimpleForm';
2223
import { TextInput } from '../input/TextInput';
@@ -202,12 +203,12 @@ const AccessControlLayout = ({
202203
const BookList = () => {
203204
return (
204205
<List>
205-
<Datagrid>
206-
<TextField source="id" />
207-
<TextField source="title" />
208-
<TextField source="author" />
209-
<TextField source="year" />
210-
</Datagrid>
206+
<DataTable>
207+
<DataTable.Col source="id" />
208+
<DataTable.Col source="title" />
209+
<DataTable.Col source="author" />
210+
<DataTable.Col source="year" />
211+
</DataTable>
211212
</List>
212213
);
213214
};

‎packages/ra-ui-materialui/src/button/DeleteButton.stories.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import englishMessages from 'ra-language-english';
55
import frenchMessages from 'ra-language-french';
66
import { QueryClient } from '@tanstack/react-query';
77
import fakeRestDataProvider from 'ra-data-fakerest';
8+
89
import {
910
AuthProvider,
1011
I18nProvider,
@@ -16,12 +17,12 @@ import {
1617
ResourceContextProvider,
1718
TestMemoryRouter,
1819
} from 'ra-core';
20+
1921
import { deepmerge } from '@mui/utils';
2022
import { AdminContext } from '../AdminContext';
2123
import { DeleteButton } from './DeleteButton';
2224
import { List } from '../list/List';
23-
import { Datagrid } from '../list/datagrid/Datagrid';
24-
import { TextField } from '../field/TextField';
25+
import { DataTable } from '../list';
2526
import { AdminUI } from '../AdminUI';
2627
import { Notification } from '../layout';
2728
import { LocalesMenuButton } from './LocalesMenuButton';
@@ -397,13 +398,15 @@ const AccessControlLayout = ({
397398

398399
const BookList = ({ mutationMode = 'undoable' as const }) => (
399400
<List>
400-
<Datagrid>
401-
<TextField source="id" />
402-
<TextField source="title" />
403-
<TextField source="author" />
404-
<TextField source="year" />
405-
<DeleteButton mutationMode={mutationMode} />
406-
</Datagrid>
401+
<DataTable>
402+
<DataTable.Col source="id" />
403+
<DataTable.Col source="title" />
404+
<DataTable.Col source="author" />
405+
<DataTable.Col source="year" />
406+
<DataTable.Col>
407+
<DeleteButton mutationMode={mutationMode} />
408+
</DataTable.Col>
409+
</DataTable>
407410
</List>
408411
);
409412

‎packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.stories.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import frenchMessages from 'ra-language-french';
55
import { Resource, TestMemoryRouter } from 'ra-core';
66
import fakeRestDataProvider from 'ra-data-fakerest';
77
import { Alert, createTheme, ThemeOptions } from '@mui/material';
8-
98
import { DeleteWithConfirmButton } from './DeleteWithConfirmButton';
109
import { AdminContext } from '../AdminContext';
1110
import { AdminUI } from '../AdminUI';
12-
import { List, Datagrid } from '../list';
13-
import { TextField } from '../field';
11+
import { List, DataTable } from '../list';
1412
import { deepmerge } from '@mui/utils';
1513

1614
export default { title: 'ra-ui-materialui/button/DeleteWithConfirmButton' };
@@ -172,25 +170,25 @@ const dataProvider = fakeRestDataProvider({
172170
const BookList = ({ children }) => {
173171
return (
174172
<List>
175-
<Datagrid>
176-
<TextField source="id" />
177-
<TextField source="title" />
178-
<TextField source="author" />
179-
<TextField source="year" />
180-
{children}
181-
</Datagrid>
173+
<DataTable>
174+
<DataTable.Col source="id" />
175+
<DataTable.Col source="title" />
176+
<DataTable.Col source="author" />
177+
<DataTable.Col source="year" />
178+
<DataTable.Col>{children}</DataTable.Col>
179+
</DataTable>
182180
</List>
183181
);
184182
};
185183

186184
const AuthorList = ({ children }) => {
187185
return (
188186
<List>
189-
<Datagrid>
190-
<TextField source="id" />
191-
<TextField source="fullName" />
192-
{children}
193-
</Datagrid>
187+
<DataTable>
188+
<DataTable.Col source="id" />
189+
<DataTable.Col source="fullName" />
190+
<DataTable.Col>{children}</DataTable.Col>
191+
</DataTable>
194192
</List>
195193
);
196194
};

‎packages/ra-ui-materialui/src/button/DeleteWithUndoButton.stories.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import polyglotI18nProvider from 'ra-i18n-polyglot';
99
import frenchMessages from 'ra-language-french';
1010
import englishMessages from 'ra-language-english';
1111
import fakeRestDataProvider from 'ra-data-fakerest';
12-
import { Datagrid, List } from '../list';
13-
import { TextField } from '../field';
12+
import { DataTable, List } from '../list';
1413

1514
export default { title: 'ra-ui-materialui/button/DeleteWithUndoButton' };
1615

@@ -145,13 +144,13 @@ const dataProvider = fakeRestDataProvider({
145144
const BookList = ({ children }) => {
146145
return (
147146
<List>
148-
<Datagrid>
149-
<TextField source="id" />
150-
<TextField source="title" />
151-
<TextField source="author" />
152-
<TextField source="year" />
153-
{children}
154-
</Datagrid>
147+
<DataTable>
148+
<DataTable.Col source="id" />
149+
<DataTable.Col source="title" />
150+
<DataTable.Col source="author" />
151+
<DataTable.Col source="year" />
152+
<DataTable.Col>{children}</DataTable.Col>
153+
</DataTable>
155154
</List>
156155
);
157156
};

‎packages/ra-ui-materialui/src/button/EditButton.stories.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import polyglotI18nProvider from 'ra-i18n-polyglot';
33
import englishMessages from 'ra-language-english';
44
import frenchMessages from 'ra-language-french';
5+
56
import {
67
AuthProvider,
78
I18nProvider,
@@ -12,13 +13,13 @@ import {
1213
ResourceContextProvider,
1314
TestMemoryRouter,
1415
} from 'ra-core';
16+
1517
import fakeRestDataProvider from 'ra-data-fakerest';
1618
import { QueryClient } from '@tanstack/react-query';
1719
import { AdminContext } from '../AdminContext';
1820
import { AdminUI } from '../AdminUI';
1921
import { List } from '../list/List';
20-
import { Datagrid } from '../list/datagrid/Datagrid';
21-
import { TextField } from '../field/TextField';
22+
import { DataTable } from '../list';
2223
import { SimpleForm } from '../form/SimpleForm';
2324
import { TextInput } from '../input/TextInput';
2425
import { EditButton } from './EditButton';
@@ -238,13 +239,15 @@ const AccessControlLayout = ({
238239
const BookList = () => {
239240
return (
240241
<List>
241-
<Datagrid>
242-
<TextField source="id" />
243-
<TextField source="title" />
244-
<TextField source="author" />
245-
<TextField source="year" />
246-
<EditButton />
247-
</Datagrid>
242+
<DataTable>
243+
<DataTable.Col source="id" />
244+
<DataTable.Col source="title" />
245+
<DataTable.Col source="author" />
246+
<DataTable.Col source="year" />
247+
<DataTable.Col>
248+
<EditButton />
249+
</DataTable.Col>
250+
</DataTable>
248251
</List>
249252
);
250253
};

‎packages/ra-ui-materialui/src/button/ListButton.stories.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import polyglotI18nProvider from 'ra-i18n-polyglot';
33
import englishMessages from 'ra-language-english';
44
import frenchMessages from 'ra-language-french';
5+
56
import {
67
AuthProvider,
78
I18nProvider,
@@ -11,15 +12,15 @@ import {
1112
ResourceContextProvider,
1213
TestMemoryRouter,
1314
} from 'ra-core';
15+
1416
import fakeRestDataProvider from 'ra-data-fakerest';
1517
import { QueryClient } from '@tanstack/react-query';
1618
import { deepmerge } from '@mui/utils';
1719
import { ThemeOptions } from '@mui/material';
1820
import { AdminContext } from '../AdminContext';
1921
import { AdminUI } from '../AdminUI';
2022
import { List } from '../list/List';
21-
import { Datagrid } from '../list/datagrid/Datagrid';
22-
import { TextField } from '../field/TextField';
23+
import { DataTable } from '../list';
2324
import { SimpleForm } from '../form/SimpleForm';
2425
import { TextInput } from '../input/TextInput';
2526
import { ListButton } from './ListButton';
@@ -208,12 +209,12 @@ const AccessControlLayout = ({
208209
const BookList = () => {
209210
return (
210211
<List>
211-
<Datagrid>
212-
<TextField source="id" />
213-
<TextField source="title" />
214-
<TextField source="author" />
215-
<TextField source="year" />
216-
</Datagrid>
212+
<DataTable>
213+
<DataTable.Col source="id" />
214+
<DataTable.Col source="title" />
215+
<DataTable.Col source="author" />
216+
<DataTable.Col source="year" />
217+
</DataTable>
217218
</List>
218219
);
219220
};

‎packages/ra-ui-materialui/src/button/LocalesMenuButton.stories.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@ import { useTranslate, Resource, TestMemoryRouter } from 'ra-core';
66
import fakeRestDataProvider from 'ra-data-fakerest';
77
import { Typography } from '@mui/material';
88
import LanguageIcon from '@mui/icons-material/Language';
9-
109
import { LocalesMenuButton } from './LocalesMenuButton';
1110
import { AdminContext } from '../AdminContext';
1211
import { AdminUI } from '../AdminUI';
13-
import { List, Datagrid } from '../list';
14-
import { TextField } from '../field';
12+
import { List, DataTable } from '../list';
1513
import { AppBar, Layout, TitlePortal } from '../layout';
1614

1715
export default { title: 'ra-ui-materialui/button/LocalesMenuButton' };
@@ -143,12 +141,12 @@ const dataProvider = fakeRestDataProvider({
143141
const BookList = () => {
144142
return (
145143
<List>
146-
<Datagrid>
147-
<TextField source="id" />
148-
<TextField source="title" />
149-
<TextField source="author" />
150-
<TextField source="year" />
151-
</Datagrid>
144+
<DataTable>
145+
<DataTable.Col source="id" />
146+
<DataTable.Col source="title" />
147+
<DataTable.Col source="author" />
148+
<DataTable.Col source="year" />
149+
</DataTable>
152150
</List>
153151
);
154152
};

0 commit comments

Comments
 (0)