Skip to content

Commit 31e97cf

Browse files
mprystupamprystupa
committed
add MUI theme docs wrapper
1 parent 9497e09 commit 31e97cf

7 files changed

Lines changed: 218 additions & 90 deletions

File tree

‎.storybook/MuiDecorator.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ThemeProvider } from "@emotion/react";
2+
import { CssBaseline } from "@mui/material";
3+
import React from "react";
4+
import theme from "./theme";
5+
6+
import { MDXProvider } from "@mdx-js/react";
7+
8+
import { DocsContainer } from "@storybook/blocks";
9+
10+
export const MuiDecorator = (Story: any) => (
11+
<ThemeProvider theme={theme}>
12+
<CssBaseline />
13+
<Story />
14+
</ThemeProvider>
15+
);
16+
17+
export const MuiDocsContainer = (props) => (
18+
<MDXProvider>
19+
<ThemeProvider theme={theme}>
20+
<CssBaseline />
21+
<DocsContainer {...props} />
22+
</ThemeProvider>
23+
</MDXProvider>
24+
);

‎.storybook/preview.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Preview } from "@storybook/react";
2+
import { MuiDecorator, MuiDocsContainer } from "./MuiDecorator";
23

34
const preview: Preview = {
45
parameters: {
@@ -20,7 +21,11 @@ const preview: Preview = {
2021
date: /Date$/i,
2122
},
2223
},
24+
docs: {
25+
container: MuiDocsContainer,
26+
},
2327
},
28+
decorators: [MuiDecorator],
2429
};
2530

2631
export default preview;

‎.storybook/theme.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { createTheme } from "@mui/material/styles";
2+
3+
const theme = createTheme({
4+
typography: {
5+
fontFamily: "'Nunito Sans', sans-serif",
6+
h1: {
7+
fontSize: "2.5rem",
8+
fontWeight: 700,
9+
},
10+
h2: {
11+
fontSize: "2rem",
12+
fontWeight: 700,
13+
},
14+
h3: {
15+
fontSize: "1.75rem",
16+
fontWeight: 700,
17+
},
18+
h4: {
19+
fontSize: "1.5rem",
20+
fontWeight: 700,
21+
},
22+
h5: {
23+
fontSize: "1.25rem",
24+
fontWeight: 700,
25+
},
26+
h6: {
27+
fontSize: "1rem",
28+
fontWeight: 700,
29+
},
30+
subtitle1: {
31+
fontSize: "1.1rem",
32+
fontWeight: 400,
33+
},
34+
body1: {
35+
fontSize: "1rem",
36+
lineHeight: 1.5,
37+
},
38+
body2: {
39+
fontSize: "0.875rem",
40+
lineHeight: 1.43,
41+
},
42+
},
43+
palette: {
44+
primary: {
45+
main: "#1EA7FD", // Storybook's primary blue color
46+
light: "#50B9FF",
47+
dark: "#0074E8",
48+
contrastText: "#FFFFFF",
49+
},
50+
secondary: {
51+
main: "#FC521F", // Storybook's secondary color
52+
light: "#FF7452",
53+
dark: "#D43B0D",
54+
contrastText: "#FFFFFF",
55+
},
56+
background: {
57+
default: "#FFFFFF",
58+
paper: "#F8F8F8",
59+
},
60+
text: {
61+
primary: "#333333",
62+
secondary: "#666666",
63+
},
64+
},
65+
shape: {
66+
borderRadius: 4,
67+
},
68+
components: {
69+
MuiButton: {
70+
styleOverrides: {
71+
root: {
72+
textTransform: "none", // Prevents automatic uppercase transformation
73+
fontWeight: 600,
74+
},
75+
},
76+
},
77+
},
78+
});
79+
80+
export default theme;

‎stories/UI Design/0.GestaltPrinciples.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ Gestalt principles are a set of guidelines that describe how the human brain org
1515

1616
---
1717

18-
### 1. Law of Proximity
19-
**Elements close together are perceived as related.**
18+
### Law of Proximity
19+
20+
>Elements close together are perceived as related.
21+
2022
Whitespace is your ally here. By placing related items near each other and separating unrelated ones, you create visual hierarchies that users instinctively understand. For example, grouping "Save" and "Cancel" buttons together signals they control the same action, while distancing them from a navigation menu avoids confusion.
2123

2224
**Tips:**

‎stories/components/gestalt/proximity/Controls.tsx‎

Lines changed: 102 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
IconButton,
99
Slider,
1010
Stack,
11+
useTheme,
12+
useMediaQuery,
1113
} from "@mui/material";
1214
import {
1315
MdPlayArrow,
@@ -29,65 +31,23 @@ export const Controls = () => {
2931
}: {
3032
spacing: number;
3133
isDistributed?: boolean;
32-
}) => (
33-
<Box>
34-
<Box
35-
sx={{
36-
display: "flex",
37-
width: "100%",
38-
...(isDistributed
39-
? { justifyContent: "space-between" }
40-
: { justifyContent: "space-between", gap: spacing }),
41-
}}
42-
>
43-
{/* Playback controls - distributed individually in poor example */}
44-
{isDistributed ? (
45-
<>
46-
<IconButton size="small" sx={{ color: "white" }}>
47-
<MdSkipPrevious size={24} />
48-
</IconButton>
49-
<IconButton size="small" sx={{ color: "white" }}>
50-
<MdPlayArrow size={24} />
51-
</IconButton>
52-
<IconButton size="small" sx={{ color: "white" }}>
53-
<MdSkipNext size={24} />
54-
</IconButton>
34+
}) => {
35+
const theme = useTheme();
36+
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
5537

56-
{/* Volume */}
57-
<IconButton size="small" sx={{ color: "white" }}>
58-
<MdVolumeUp size={24} />
59-
</IconButton>
60-
<Slider
61-
size="small"
62-
defaultValue={70}
63-
sx={{
64-
color: "#fff",
65-
width: 100,
66-
"& .MuiSlider-thumb": {
67-
width: 12,
68-
height: 12,
69-
},
70-
}}
71-
/>
72-
73-
{/* Settings controls - distributed individually */}
74-
<IconButton size="small" sx={{ color: "white" }}>
75-
<MdClosedCaption size={24} />
76-
</IconButton>
77-
<IconButton size="small" sx={{ color: "white" }}>
78-
<MdSpeed size={24} />
79-
</IconButton>
80-
<IconButton size="small" sx={{ color: "white" }}>
81-
<MdSettings size={24} />
82-
</IconButton>
83-
<IconButton size="small" sx={{ color: "white" }}>
84-
<MdFullscreen size={24} />
85-
</IconButton>
86-
</>
87-
) : (
88-
<>
89-
{/* Left controls group */}
90-
<Stack direction="row" spacing={spacing / 4}>
38+
return (
39+
<Box>
40+
<Box
41+
sx={{
42+
display: "flex",
43+
width: "100%",
44+
...(isDistributed
45+
? { justifyContent: "space-between" }
46+
: { justifyContent: "space-between", gap: spacing }),
47+
}}
48+
>
49+
{isDistributed ? (
50+
<>
9151
<IconButton size="small" sx={{ color: "white" }}>
9252
<MdSkipPrevious size={24} />
9353
</IconButton>
@@ -97,29 +57,29 @@ export const Controls = () => {
9757
<IconButton size="small" sx={{ color: "white" }}>
9858
<MdSkipNext size={24} />
9959
</IconButton>
100-
</Stack>
10160

102-
{/* Volume controls */}
103-
<Stack direction="row" spacing={spacing / 4} alignItems="center">
104-
<IconButton size="small" sx={{ color: "white" }}>
105-
<MdVolumeUp size={24} />
106-
</IconButton>
107-
<Slider
108-
size="small"
109-
defaultValue={70}
110-
sx={{
111-
color: "#fff",
112-
width: 100,
113-
"& .MuiSlider-thumb": {
114-
width: 12,
115-
height: 12,
116-
},
117-
}}
118-
/>
119-
</Stack>
61+
{/* Volume */}
62+
{!isMobile && (
63+
<>
64+
<IconButton size="small" sx={{ color: "white" }}>
65+
<MdVolumeUp size={24} />
66+
</IconButton>
67+
<Slider
68+
size="small"
69+
defaultValue={70}
70+
sx={{
71+
color: "#fff",
72+
width: 100,
73+
"& .MuiSlider-thumb": {
74+
width: 12,
75+
height: 12,
76+
},
77+
}}
78+
/>
79+
</>
80+
)}
12081

121-
{/* Right controls group */}
122-
<Stack direction="row" spacing={spacing / 4}>
82+
{/* Settings controls - distributed individually */}
12383
<IconButton size="small" sx={{ color: "white" }}>
12484
<MdClosedCaption size={24} />
12585
</IconButton>
@@ -132,15 +92,72 @@ export const Controls = () => {
13292
<IconButton size="small" sx={{ color: "white" }}>
13393
<MdFullscreen size={24} />
13494
</IconButton>
135-
</Stack>
136-
</>
137-
)}
95+
</>
96+
) : (
97+
<>
98+
{/* Left controls group */}
99+
<Stack direction="row" spacing={spacing / 4}>
100+
<IconButton size="small" sx={{ color: "white" }}>
101+
<MdSkipPrevious size={24} />
102+
</IconButton>
103+
<IconButton size="small" sx={{ color: "white" }}>
104+
<MdPlayArrow size={24} />
105+
</IconButton>
106+
<IconButton size="small" sx={{ color: "white" }}>
107+
<MdSkipNext size={24} />
108+
</IconButton>
109+
</Stack>
110+
111+
{/* Volume controls */}
112+
113+
{!isMobile && (
114+
<Stack
115+
direction="row"
116+
spacing={spacing / 4}
117+
alignItems="center"
118+
>
119+
<IconButton size="small" sx={{ color: "white" }}>
120+
<MdVolumeUp size={24} />
121+
</IconButton>
122+
<Slider
123+
size="small"
124+
defaultValue={70}
125+
sx={{
126+
color: "#fff",
127+
width: 100,
128+
"& .MuiSlider-thumb": {
129+
width: 12,
130+
height: 12,
131+
},
132+
}}
133+
/>
134+
</Stack>
135+
)}
136+
137+
{/* Right controls group */}
138+
<Stack direction="row" spacing={spacing / 4}>
139+
<IconButton size="small" sx={{ color: "white" }}>
140+
<MdClosedCaption size={24} />
141+
</IconButton>
142+
<IconButton size="small" sx={{ color: "white" }}>
143+
<MdSpeed size={24} />
144+
</IconButton>
145+
<IconButton size="small" sx={{ color: "white" }}>
146+
<MdSettings size={24} />
147+
</IconButton>
148+
<IconButton size="small" sx={{ color: "white" }}>
149+
<MdFullscreen size={24} />
150+
</IconButton>
151+
</Stack>
152+
</>
153+
)}
154+
</Box>
138155
</Box>
139-
</Box>
140-
);
156+
);
157+
};
141158

142159
return (
143-
<Container>
160+
<Container sx={{ pb: 8 }}>
144161
<Grid container spacing={4}>
145162
{/* Poor spacing example */}
146163
<Grid item xs={12}>

‎stories/components/gestalt/proximity/FormFields.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ export const FormFields = () => {
8888
);
8989

9090
return (
91-
<Container>
92-
<Grid container spacing={4}>
91+
<Container sx={{ pb: 8 }}>
92+
<Grid container spacing={8}>
9393
{/* Column with cramped form */}
9494
<Grid item xs={12} md={6}>
9595
<Typography variant="h6" sx={{ mb: 2 }}>

‎stories/components/gestalt/proximity/Whitespace.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const Whitespace = () => {
2020
];
2121

2222
return (
23-
<Container>
23+
<Container sx={{ pb: 8 }}>
2424
<Grid container spacing={8}>
2525
{/* Column with cramped cards */}
2626
<Grid item xs={12} md={6}>

0 commit comments

Comments
 (0)