Skip to content

Commit 4c6a503

Browse files
MadeorskMadeorsk
committed
Add stories for themed inputs.
1 parent 7a15615 commit 4c6a503

File tree

8 files changed

+222
-13
lines changed

8 files changed

+222
-13
lines changed

‎packages/ra-ui-materialui/src/input/BooleanInput.stories.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import { Create } from '../detail';
99
import { SimpleForm } from '../form';
1010
import { BooleanInput } from './BooleanInput';
1111
import { TextInput } from './TextInput';
12+
import { deepmerge } from '@mui/utils';
13+
import { createTheme } from '@mui/material/styles';
14+
import { ThemeOptions } from '@mui/material';
1215

1316
export default { title: 'ra-ui-materialui/input/BooleanInput' };
1417

@@ -44,10 +47,11 @@ export const Dark = () => (
4447

4548
const i18nProvider = polyglotI18nProvider(() => englishMessages);
4649

47-
const Wrapper = ({ children, defaultTheme = 'light' }) => (
50+
const Wrapper = ({ children, defaultTheme = 'light', theme = undefined }) => (
4851
<AdminContext
4952
i18nProvider={i18nProvider}
5053
defaultTheme={defaultTheme as any}
54+
theme={theme}
5155
>
5256
<Create resource="posts">
5357
<SimpleForm>{children}</SimpleForm>
@@ -73,3 +77,21 @@ export const SetFocus = () => (
7377
</Create>
7478
</AdminContext>
7579
);
80+
81+
export const Themed = () => (
82+
<Wrapper
83+
theme={deepmerge(createTheme(), {
84+
components: {
85+
RaBooleanInput: {
86+
styleOverrides: {
87+
root: {
88+
color: 'red',
89+
},
90+
},
91+
},
92+
},
93+
} as ThemeOptions)}
94+
>
95+
<BooleanInput source="published" />
96+
</Wrapper>
97+
);

‎packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react';
22
import { Admin } from 'react-admin';
33
import { Resource, TestMemoryRouter } from 'ra-core';
4+
import { deepmerge } from '@mui/utils';
5+
import { createTheme, ThemeOptions } from '@mui/material/styles';
46

57
import { Edit } from '../detail';
68
import { SimpleForm } from '../form';
@@ -157,3 +159,27 @@ export const InsideReferenceInput = () => (
157159
</Admin>
158160
</TestMemoryRouter>
159161
);
162+
163+
export const Themed = () => (
164+
<TestMemoryRouter initialEntries={['/books/1']}>
165+
<Admin
166+
dataProvider={dataProvider}
167+
theme={deepmerge(createTheme(), {
168+
components: {
169+
RaDatagridInput: {
170+
styleOverrides: {
171+
root: {
172+
['& .MuiTypography-root']: {
173+
color: 'red',
174+
fontWeight: 'bold',
175+
},
176+
},
177+
},
178+
},
179+
},
180+
} as ThemeOptions)}
181+
>
182+
<Resource name="books" edit={BookEdit} />
183+
</Admin>
184+
</TestMemoryRouter>
185+
);

‎packages/ra-ui-materialui/src/input/DateInput.stories.tsx‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import polyglotI18nProvider from 'ra-i18n-polyglot';
33
import englishMessages from 'ra-language-english';
44
import { minValue, useRecordContext } from 'ra-core';
55
import { useFormContext, useWatch } from 'react-hook-form';
6-
import { Box, Button, Typography } from '@mui/material';
6+
import { Box, Button, createTheme, Typography } from '@mui/material';
7+
import { ThemeOptions } from '@mui/material/styles';
8+
import { deepmerge } from '@mui/utils';
79
import get from 'lodash/get';
810

911
import { AdminContext } from '../AdminContext';
@@ -141,16 +143,49 @@ export const ExternalChangesWithParse = ({
141143
</Wrapper>
142144
);
143145

146+
export const Themed = ({
147+
dateInputProps,
148+
simpleFormProps,
149+
}: {
150+
dateInputProps?: Partial<DateInputProps>;
151+
simpleFormProps?: Partial<SimpleFormProps>;
152+
}) => (
153+
<Wrapper
154+
simpleFormProps={simpleFormProps}
155+
theme={deepmerge(createTheme(), {
156+
components: {
157+
RaDateInput: {
158+
styleOverrides: {
159+
root: {
160+
['& input']: {
161+
color: 'red',
162+
},
163+
},
164+
},
165+
},
166+
},
167+
} as ThemeOptions)}
168+
>
169+
<DateInput source="publishedAt" {...dateInputProps} />
170+
</Wrapper>
171+
);
172+
144173
const i18nProvider = polyglotI18nProvider(() => englishMessages);
145174

146175
const Wrapper = ({
147176
children,
148177
simpleFormProps,
178+
theme = undefined,
149179
}: {
150180
children: React.ReactNode;
151181
simpleFormProps?: Partial<SimpleFormProps>;
182+
theme?: ThemeOptions;
152183
}) => (
153-
<AdminContext i18nProvider={i18nProvider} defaultTheme="light">
184+
<AdminContext
185+
i18nProvider={i18nProvider}
186+
defaultTheme="light"
187+
theme={theme}
188+
>
154189
<Create resource="posts">
155190
<SimpleForm {...simpleFormProps}>
156191
{children}

‎packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import polyglotI18nProvider from 'ra-i18n-polyglot';
33
import englishMessages from 'ra-language-english';
44
import { useRecordContext } from 'ra-core';
55
import { useFormContext, useWatch } from 'react-hook-form';
6-
import { Box, Button, Typography } from '@mui/material';
6+
import { Box, Button, createTheme, Typography } from '@mui/material';
7+
import { ThemeOptions } from '@mui/material/styles';
8+
import { deepmerge } from '@mui/utils';
79
import get from 'lodash/get';
810

911
import { AdminContext } from '../AdminContext';
@@ -96,16 +98,42 @@ export const AsDateObject = () => (
9698
</Wrapper>
9799
);
98100

101+
export const Themed = () => (
102+
<Wrapper
103+
theme={deepmerge(createTheme(), {
104+
components: {
105+
RaDateTimeInput: {
106+
styleOverrides: {
107+
root: {
108+
['& input']: {
109+
color: 'red',
110+
},
111+
},
112+
},
113+
},
114+
},
115+
} as ThemeOptions)}
116+
>
117+
<DateTimeInput source="published" />
118+
</Wrapper>
119+
);
120+
99121
const i18nProvider = polyglotI18nProvider(() => englishMessages);
100122

101123
const Wrapper = ({
102124
children,
103125
simpleFormProps,
126+
theme,
104127
}: {
105128
children: React.ReactNode;
106129
simpleFormProps?: Omit<SimpleFormProps, 'children'>;
130+
theme: ThemeOptions;
107131
}) => (
108-
<AdminContext i18nProvider={i18nProvider} defaultTheme="light">
132+
<AdminContext
133+
i18nProvider={i18nProvider}
134+
defaultTheme="light"
135+
theme={theme}
136+
>
109137
<Create resource="posts">
110138
<SimpleForm {...simpleFormProps}>
111139
{children}

‎packages/ra-ui-materialui/src/input/NumberInput.stories.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
22
import { required } from 'ra-core';
33
import { useFormState, useFormContext } from 'react-hook-form';
4+
import { deepmerge } from '@mui/utils';
5+
import { createTheme } from '@mui/material/styles';
6+
import { ThemeOptions } from '@mui/material';
47

58
import { NumberInput } from './NumberInput';
69
import { AdminContext } from '../AdminContext';
@@ -11,8 +14,8 @@ import { TextInput } from './TextInput';
1114

1215
export default { title: 'ra-ui-materialui/input/NumberInput' };
1316

14-
const Wrapper = ({ children }) => (
15-
<AdminContext defaultTheme="light">
17+
const Wrapper = ({ children, theme = undefined }) => (
18+
<AdminContext defaultTheme="light" theme={theme}>
1619
<Create
1720
resource="posts"
1821
record={{ id: 123, views: 23 }}
@@ -277,3 +280,24 @@ export const SetFocus = () => (
277280
<SetFocusButton source="views" />
278281
</Wrapper>
279282
);
283+
284+
export const Themed = () => (
285+
<Wrapper
286+
theme={deepmerge(createTheme(), {
287+
components: {
288+
RaNumberInput: {
289+
styleOverrides: {
290+
root: {
291+
['& input']: {
292+
color: 'red',
293+
},
294+
},
295+
},
296+
},
297+
},
298+
} as ThemeOptions)}
299+
>
300+
<NumberInput source="views" />
301+
<FormInspector name="views" />
302+
</Wrapper>
303+
);

‎packages/ra-ui-materialui/src/input/PasswordInput.stories.tsx‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
22
import polyglotI18nProvider from 'ra-i18n-polyglot';
33
import englishMessages from 'ra-language-english';
4+
import { deepmerge } from '@mui/utils';
5+
import { createTheme } from '@mui/material/styles';
6+
import { ThemeOptions } from '@mui/material';
47

58
import { AdminContext } from '../AdminContext';
69
import { Create } from '../detail';
@@ -35,10 +38,30 @@ export const ReadOnly = () => (
3538
</Wrapper>
3639
);
3740

41+
export const Themed = () => (
42+
<Wrapper
43+
theme={deepmerge(createTheme(), {
44+
components: {
45+
RaPasswordInput: {
46+
styleOverrides: {
47+
root: {
48+
['& input']: {
49+
color: 'red',
50+
},
51+
},
52+
},
53+
},
54+
},
55+
} as ThemeOptions)}
56+
>
57+
<PasswordInput source="password" />
58+
</Wrapper>
59+
);
60+
3861
const i18nProvider = polyglotI18nProvider(() => englishMessages);
3962

40-
const Wrapper = ({ children }) => (
41-
<AdminContext i18nProvider={i18nProvider}>
63+
const Wrapper = ({ children, theme = undefined }) => (
64+
<AdminContext i18nProvider={i18nProvider} theme={theme}>
4265
<Create resource="posts">
4366
<SimpleForm>
4467
{children}

‎packages/ra-ui-materialui/src/input/TextInput.stories.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
22
import { required, Resource } from 'ra-core';
33
import { useFormState, useFormContext } from 'react-hook-form';
4+
import { deepmerge } from '@mui/utils';
5+
import { createTheme } from '@mui/material/styles';
6+
import { ThemeOptions } from '@mui/material';
47

58
import { TextInput } from './TextInput';
69
import { AdminContext } from '../AdminContext';
@@ -13,8 +16,8 @@ import { MemoryRouter } from 'react-router';
1316

1417
export default { title: 'ra-ui-materialui/input/TextInput' };
1518

16-
const Wrapper = ({ children }) => (
17-
<AdminContext defaultTheme="light">
19+
const Wrapper = ({ children, theme = undefined }) => (
20+
<AdminContext defaultTheme="light" theme={theme}>
1821
<Create
1922
resource="posts"
2023
record={{ id: 123, title: 'Lorem ipsum' }}
@@ -405,3 +408,24 @@ export const Parse = ({ onSuccess = console.log }) => (
405408
</Create>
406409
</AdminContext>
407410
);
411+
412+
export const Themed = () => (
413+
<Wrapper
414+
theme={deepmerge(createTheme(), {
415+
components: {
416+
RaTextInput: {
417+
styleOverrides: {
418+
root: {
419+
['& input']: {
420+
color: 'red',
421+
},
422+
},
423+
},
424+
},
425+
},
426+
} as ThemeOptions)}
427+
>
428+
<TextInput source="title" />
429+
<FormInspector />
430+
</Wrapper>
431+
);

‎packages/ra-ui-materialui/src/input/TimeInput.stories.tsx‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
22
import polyglotI18nProvider from 'ra-i18n-polyglot';
33
import englishMessages from 'ra-language-english';
4+
import { deepmerge } from '@mui/utils';
5+
import { createTheme } from '@mui/material/styles';
6+
import { ThemeOptions } from '@mui/material';
47

58
import { AdminContext } from '../AdminContext';
69
import { Create } from '../detail';
@@ -41,10 +44,34 @@ export const OutlinedNoLabel = () => (
4144
</Wrapper>
4245
);
4346

47+
export const Themed = () => (
48+
<Wrapper
49+
theme={deepmerge(createTheme(), {
50+
components: {
51+
RaTimeInput: {
52+
styleOverrides: {
53+
root: {
54+
['& input']: {
55+
color: 'red',
56+
},
57+
},
58+
},
59+
},
60+
},
61+
} as ThemeOptions)}
62+
>
63+
<TimeInput source="published" />
64+
</Wrapper>
65+
);
66+
4467
const i18nProvider = polyglotI18nProvider(() => englishMessages);
4568

46-
const Wrapper = ({ children }) => (
47-
<AdminContext i18nProvider={i18nProvider} defaultTheme="light">
69+
const Wrapper = ({ children, theme = undefined }) => (
70+
<AdminContext
71+
i18nProvider={i18nProvider}
72+
defaultTheme="light"
73+
theme={theme}
74+
>
4875
<Create resource="posts">
4976
<SimpleForm>
5077
{children}

0 commit comments

Comments
 (0)