Skip to content

Commit 5cfc1f4

Browse files
garronejgarronej
committed
Setup MUI test in CRA
1 parent 5de3d1c commit 5cfc1f4

File tree

7 files changed

+581
-39
lines changed

7 files changed

+581
-39
lines changed

‎test/integration/cra/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,12 @@
44
"private": true,
55
"dependencies": {
66
"react": "18.2.0",
7-
"react-dom": "18.2.0",
7+
"react-dom": "18.2.0",
88
"react-scripts": "5.0.1",
9+
"type-route": "^0.7.2",
10+
"@mui/icons-material": "^5.10.16",
11+
"@mui/x-date-pickers": "^5.0.9",
12+
"dayjs": "^1.11.6",
913
"@codegouvfr/react-dsfr": "file:../../../dist"
1014
},
1115
"lldevDependencies": {

‎test/integration/cra/src/App.tsx‎ renamed to ‎test/integration/cra/src/Home.tsx‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,12 @@
1-
import { Header } from "@codegouvfr/react-dsfr/Header";
21
import { Alert } from "@codegouvfr/react-dsfr/Alert";
32
import { useIsDark, fr } from "@codegouvfr/react-dsfr";
43
import { DarkModeSwitch } from "@codegouvfr/react-dsfr/DarkModeSwitch";
54

6-
export function App() {
5+
export function Home() {
76
const { isDark, setIsDark } = useIsDark();
87

98
return (
109
<>
11-
<Header
12-
intituléOfficiel="Intitulé officiel"
13-
baselinePrécisionsSurLorganisation="baseline - Précision sur l'organisation"
14-
nomDuSiteSlashService="Nom du site / service"
15-
links={[
16-
{
17-
"text": "Créer un espace",
18-
"iconId": "fr-icon-add-circle-line",
19-
"href": "#"
20-
},
21-
{
22-
"text": "Se connecter",
23-
"iconId": "fr-icon-lock-line",
24-
"href": "#"
25-
},
26-
{
27-
"text": "S'enregistrer",
28-
"iconId": "fr-icon-account-line",
29-
"href": "#"
30-
}
31-
]}
32-
/>
3310

3411
<Alert
3512
isClosable={true}

‎test/integration/cra/src/Mui.tsx‎

Lines changed: 345 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,345 @@
1+
import * as React from "react";
2+
import { createMuiDsfrThemeProvider, noAugmentation } from "@codegouvfr/react-dsfr/mui";
3+
import { ThemeProvider, createTheme } from "@mui/material/styles";
4+
import { useIsDark } from "@codegouvfr/react-dsfr";
5+
import TextField from '@mui/material/TextField';
6+
import Autocomplete from '@mui/material/Autocomplete';
7+
import Stack from '@mui/material/Stack';
8+
import Button from '@mui/material/Button';
9+
import Chip from '@mui/material/Chip';
10+
import Typography from "@mui/material/Typography";
11+
import FormControlLabel from '@mui/material/FormControlLabel';
12+
import Switch from '@mui/material/Switch';
13+
14+
import Divider from '@mui/material/Divider';
15+
import Paper from '@mui/material/Paper';
16+
import MenuList from '@mui/material/MenuList';
17+
import MenuItem from '@mui/material/MenuItem';
18+
import ListItemText from '@mui/material/ListItemText';
19+
import ListItemIcon from '@mui/material/ListItemIcon';
20+
import ContentCut from '@mui/icons-material/ContentCut';
21+
import ContentCopy from '@mui/icons-material/ContentCopy';
22+
import ContentPaste from '@mui/icons-material/ContentPaste';
23+
import Cloud from '@mui/icons-material/Cloud';
24+
25+
import dayjs, { Dayjs } from 'dayjs';
26+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
27+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
28+
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
29+
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
30+
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
31+
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
32+
33+
const { MuiDsfrThemeProvider } = createMuiDsfrThemeProvider({
34+
"augmentMuiTheme": noAugmentation
35+
});
36+
37+
const muiDefaultDarkTheme = createTheme({
38+
"palette": {
39+
"mode": "dark"
40+
}
41+
});
42+
43+
const muiDefaultLightTheme = createTheme({
44+
"palette": {
45+
"mode": "light"
46+
}
47+
});
48+
49+
export function Mui() {
50+
51+
const { isDark, setIsDark } = useIsDark();
52+
53+
const [isProviderEnabled, setIsProviderEnabled] = React.useState(true);
54+
55+
const Children = () => (
56+
<>
57+
<FormControlLabel control={<Switch
58+
checked={isProviderEnabled}
59+
onChange={event => setIsProviderEnabled(event.target.checked)}
60+
inputProps={{ 'aria-label': 'controlled' }}
61+
/>} label="Is provider enabled" />
62+
<br />
63+
<FormControlLabel control={<Switch
64+
checked={isDark}
65+
onChange={event => setIsDark(event.target.checked)}
66+
inputProps={{ 'aria-label': 'controlled' }}
67+
/>} label="Dark mode" />
68+
69+
<Typography sx={{ mt: 7 }} variant="h4">
70+
This is a place for testing MUI components
71+
</Typography>
72+
<ComboBox />
73+
<BasicButtons />
74+
<BasicChips />
75+
<IconMenu />
76+
<MaterialUIPickers />
77+
</>
78+
);
79+
80+
return (
81+
isProviderEnabled ? (
82+
<MuiDsfrThemeProvider>
83+
<Children />
84+
</MuiDsfrThemeProvider>
85+
) : (
86+
<ThemeProvider theme={isDark ? muiDefaultDarkTheme : muiDefaultLightTheme}>
87+
<Children />
88+
</ThemeProvider>
89+
)
90+
);
91+
}
92+
93+
94+
const { ComboBox } = (() => {
95+
96+
function ComboBox() {
97+
return (
98+
<Autocomplete
99+
disablePortal
100+
id="combo-box-demo"
101+
options={top100Films}
102+
sx={{ width: 300, mt: 7 }}
103+
renderInput={(params) => <TextField {...params} label="Movie" />}
104+
/>
105+
);
106+
}
107+
108+
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
109+
const top100Films = [
110+
{ label: 'The Shawshank Redemption', year: 1994 },
111+
{ label: 'The Godfather', year: 1972 },
112+
{ label: 'The Godfather: Part II', year: 1974 },
113+
{ label: 'The Dark Knight', year: 2008 },
114+
{ label: '12 Angry Men', year: 1957 },
115+
{ label: "Schindler's List", year: 1993 },
116+
{ label: 'Pulp Fiction', year: 1994 },
117+
{
118+
label: 'The Lord of the Rings: The Return of the King',
119+
year: 2003,
120+
},
121+
{ label: 'The Good, the Bad and the Ugly', year: 1966 },
122+
{ label: 'Fight Club', year: 1999 },
123+
{
124+
label: 'The Lord of the Rings: The Fellowship of the Ring',
125+
year: 2001,
126+
},
127+
{
128+
label: 'Star Wars: Episode V - The Empire Strikes Back',
129+
year: 1980,
130+
},
131+
{ label: 'Forrest Gump', year: 1994 },
132+
{ label: 'Inception', year: 2010 },
133+
{
134+
label: 'The Lord of the Rings: The Two Towers',
135+
year: 2002,
136+
},
137+
{ label: "One Flew Over the Cuckoo's Nest", year: 1975 },
138+
{ label: 'Goodfellas', year: 1990 },
139+
{ label: 'The Matrix', year: 1999 },
140+
{ label: 'Seven Samurai', year: 1954 },
141+
{
142+
label: 'Star Wars: Episode IV - A New Hope',
143+
year: 1977,
144+
},
145+
{ label: 'City of God', year: 2002 },
146+
{ label: 'Se7en', year: 1995 },
147+
{ label: 'The Silence of the Lambs', year: 1991 },
148+
{ label: "It's a Wonderful Life", year: 1946 },
149+
{ label: 'Life Is Beautiful', year: 1997 },
150+
{ label: 'The Usual Suspects', year: 1995 },
151+
{ label: 'Léon: The Professional', year: 1994 },
152+
{ label: 'Spirited Away', year: 2001 },
153+
{ label: 'Saving Private Ryan', year: 1998 },
154+
{ label: 'Once Upon a Time in the West', year: 1968 },
155+
{ label: 'American History X', year: 1998 },
156+
{ label: 'Interstellar', year: 2014 },
157+
{ label: 'Casablanca', year: 1942 },
158+
{ label: 'City Lights', year: 1931 },
159+
{ label: 'Psycho', year: 1960 },
160+
{ label: 'The Green Mile', year: 1999 },
161+
{ label: 'The Intouchables', year: 2011 },
162+
{ label: 'Modern Times', year: 1936 },
163+
{ label: 'Raiders of the Lost Ark', year: 1981 },
164+
{ label: 'Rear Window', year: 1954 },
165+
{ label: 'The Pianist', year: 2002 },
166+
{ label: 'The Departed', year: 2006 },
167+
{ label: 'Terminator 2: Judgment Day', year: 1991 },
168+
{ label: 'Back to the Future', year: 1985 },
169+
{ label: 'Whiplash', year: 2014 },
170+
{ label: 'Gladiator', year: 2000 },
171+
{ label: 'Memento', year: 2000 },
172+
{ label: 'The Prestige', year: 2006 },
173+
{ label: 'The Lion King', year: 1994 },
174+
{ label: 'Apocalypse Now', year: 1979 },
175+
{ label: 'Alien', year: 1979 },
176+
{ label: 'Sunset Boulevard', year: 1950 },
177+
{
178+
label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
179+
year: 1964,
180+
},
181+
{ label: 'The Great Dictator', year: 1940 },
182+
{ label: 'Cinema Paradiso', year: 1988 },
183+
{ label: 'The Lives of Others', year: 2006 },
184+
{ label: 'Grave of the Fireflies', year: 1988 },
185+
{ label: 'Paths of Glory', year: 1957 },
186+
{ label: 'Django Unchained', year: 2012 },
187+
{ label: 'The Shining', year: 1980 },
188+
{ label: 'WALL·E', year: 2008 },
189+
{ label: 'American Beauty', year: 1999 },
190+
{ label: 'The Dark Knight Rises', year: 2012 },
191+
{ label: 'Princess Mononoke', year: 1997 },
192+
{ label: 'Aliens', year: 1986 },
193+
{ label: 'Oldboy', year: 2003 },
194+
{ label: 'Once Upon a Time in America', year: 1984 },
195+
{ label: 'Witness for the Prosecution', year: 1957 },
196+
{ label: 'Das Boot', year: 1981 },
197+
{ label: 'Citizen Kane', year: 1941 },
198+
{ label: 'North by Northwest', year: 1959 },
199+
{ label: 'Vertigo', year: 1958 },
200+
{
201+
label: 'Star Wars: Episode VI - Return of the Jedi',
202+
year: 1983,
203+
},
204+
{ label: 'Reservoir Dogs', year: 1992 },
205+
{ label: 'Braveheart', year: 1995 },
206+
{ label: 'M', year: 1931 },
207+
{ label: 'Requiem for a Dream', year: 2000 },
208+
{ label: 'Amélie', year: 2001 },
209+
{ label: 'A Clockwork Orange', year: 1971 },
210+
{ label: 'Like Stars on Earth', year: 2007 },
211+
{ label: 'Taxi Driver', year: 1976 },
212+
{ label: 'Lawrence of Arabia', year: 1962 },
213+
{ label: 'Double Indemnity', year: 1944 },
214+
{
215+
label: 'Eternal Sunshine of the Spotless Mind',
216+
year: 2004,
217+
},
218+
{ label: 'Amadeus', year: 1984 },
219+
{ label: 'To Kill a Mockingbird', year: 1962 },
220+
{ label: 'Toy Story 3', year: 2010 },
221+
{ label: 'Logan', year: 2017 },
222+
{ label: 'Full Metal Jacket', year: 1987 },
223+
{ label: 'Dangal', year: 2016 },
224+
{ label: 'The Sting', year: 1973 },
225+
{ label: '2001: A Space Odyssey', year: 1968 },
226+
{ label: "Singin' in the Rain", year: 1952 },
227+
{ label: 'Toy Story', year: 1995 },
228+
{ label: 'Bicycle Thieves', year: 1948 },
229+
{ label: 'The Kid', year: 1921 },
230+
{ label: 'Inglourious Basterds', year: 2009 },
231+
{ label: 'Snatch', year: 2000 },
232+
{ label: '3 Idiots', year: 2009 },
233+
{ label: 'Monty Python and the Holy Grail', year: 1975 },
234+
];
235+
236+
return { ComboBox };
237+
238+
})();
239+
240+
241+
function BasicButtons() {
242+
return (
243+
<Stack spacing={2} direction="row" sx={{ mt: 7 }}>
244+
<Button variant="text">Text</Button>
245+
<Button variant="contained">Contained</Button>
246+
<Button variant="outlined">Outlined</Button>
247+
</Stack>
248+
);
249+
}
250+
251+
function BasicChips() {
252+
return (
253+
254+
<Stack direction="row" spacing={1} sx={{ mt: 7 }}>
255+
<Chip label="Chip Filled" />
256+
<Chip label="Chip Outlined" variant="outlined" />
257+
</Stack>
258+
);
259+
}
260+
261+
function IconMenu() {
262+
return (
263+
<Paper sx={{ width: 320, maxWidth: '100%', mt: 7 }}>
264+
<MenuList>
265+
<MenuItem>
266+
<ListItemIcon>
267+
<ContentCut fontSize="small" />
268+
</ListItemIcon>
269+
<ListItemText>Cut</ListItemText>
270+
<Typography variant="body2" color="text.secondary">
271+
⌘X
272+
</Typography>
273+
</MenuItem>
274+
<MenuItem>
275+
<ListItemIcon>
276+
<ContentCopy fontSize="small" />
277+
</ListItemIcon>
278+
<ListItemText>Copy</ListItemText>
279+
<Typography variant="body2" color="text.secondary">
280+
⌘C
281+
</Typography>
282+
</MenuItem>
283+
<MenuItem>
284+
<ListItemIcon>
285+
<ContentPaste fontSize="small" />
286+
</ListItemIcon>
287+
<ListItemText>Paste</ListItemText>
288+
<Typography variant="body2" color="text.secondary">
289+
⌘V
290+
</Typography>
291+
</MenuItem>
292+
<Divider />
293+
<MenuItem>
294+
<ListItemIcon>
295+
<Cloud fontSize="small" />
296+
</ListItemIcon>
297+
<ListItemText>Web Clipboard</ListItemText>
298+
</MenuItem>
299+
</MenuList>
300+
</Paper>
301+
);
302+
}
303+
304+
function MaterialUIPickers() {
305+
const [value, setValue] = React.useState<Dayjs | null>(
306+
dayjs('2014-08-18T21:11:54'),
307+
);
308+
309+
const handleChange = (newValue: Dayjs | null) => {
310+
setValue(newValue);
311+
};
312+
313+
return (
314+
<LocalizationProvider dateAdapter={AdapterDayjs}>
315+
<Stack spacing={3} sx={{ mt: 7 }}>
316+
<DesktopDatePicker
317+
label="Date desktop"
318+
inputFormat="MM/DD/YYYY"
319+
value={value}
320+
onChange={handleChange}
321+
renderInput={(params) => <TextField {...params} />}
322+
/>
323+
<MobileDatePicker
324+
label="Date mobile"
325+
inputFormat="MM/DD/YYYY"
326+
value={value}
327+
onChange={handleChange}
328+
renderInput={(params) => <TextField {...params} />}
329+
/>
330+
<TimePicker
331+
label="Time"
332+
value={value}
333+
onChange={handleChange}
334+
renderInput={(params) => <TextField {...params} />}
335+
/>
336+
<DateTimePicker
337+
label="Date&Time picker"
338+
value={value}
339+
onChange={handleChange}
340+
renderInput={(params) => <TextField {...params} />}
341+
/>
342+
</Stack>
343+
</LocalizationProvider>
344+
);
345+
}

0 commit comments

Comments
 (0)