Skip to content

Commit c1f4527

Browse files
PeterTYLiuPeterTYLiu
committed
Add component list
1 parent 4851218 commit c1f4527

4 files changed

Lines changed: 180 additions & 42 deletions

File tree

‎src/components/ComponentList/ComponentList.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Box, Button, Paper, Typography } from "@mui/material";
2+
3+
const highlightComponent = (className: string) => {
4+
const firstInstance = document.getElementById("mock-app")?.querySelector("." + className);
5+
if (!firstInstance) return;
6+
if (firstInstance.classList.contains("pulse")) return;
7+
firstInstance.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
8+
firstInstance.classList.add("pulse");
9+
setTimeout(() => firstInstance.classList.remove("pulse"), 2800);
10+
};
11+
12+
const constructClassName = (string: string) => {
13+
const newString = string.replaceAll(/(^|\s)\w/g, (match) => match.toUpperCase());
14+
return `Mui${newString.replaceAll(" ", "")}-root`;
15+
};
16+
17+
const COMPONENTS: Partial<Record<string, Array<[string, string] | string>>> = {
18+
inputs: ["button", "checkbox", ["select", "select-override"], "text field", "toggle button"],
19+
"data display": [
20+
"avatar",
21+
["badge", "MuiBadge-badge"],
22+
"chip",
23+
"divider",
24+
["list", "select-override"],
25+
["table", "table-override"],
26+
["tooltip", "tooltip-override"],
27+
"typography",
28+
],
29+
feedback: ["alert", ["dialog", "dialog-override"]],
30+
surfaces: ["app bar", ["paper", "paper-override"]],
31+
navigation: ["link", ["menu", "select-override"]],
32+
};
33+
34+
export const ComponentList = () => {
35+
return (
36+
<Box sx={{ flex: "1 1 100px", overflow: "scroll" }}>
37+
{Object.entries(COMPONENTS).map((category) => (
38+
<Box key={category[0]}>
39+
<Paper sx={{ position: "sticky", top: "0px", zIndex: 1, boxShadow: "none" }}>
40+
<Typography sx={{ textTransform: "uppercase", color: "text.secondary" }}>{category[0]}</Typography>
41+
</Paper>
42+
<Box sx={{ borderInlineStart: "1px solid red", borderColor: "divider", my: 0.5 }}>
43+
{category[1]?.map((component) => {
44+
const hasOverride = typeof component === "object";
45+
return (
46+
<Button
47+
size="medium"
48+
sx={{ color: "text.primary", justifyContent: "start", textTransform: "capitalize", fontSize: "14px" }}
49+
fullWidth
50+
onClick={() => highlightComponent(hasOverride ? component[1] : constructClassName(component))}
51+
>
52+
{hasOverride ? component[0] : component}
53+
</Button>
54+
);
55+
})}
56+
</Box>
57+
</Box>
58+
))}
59+
</Box>
60+
);
61+
};

‎src/components/InfoPanel/InfoPanel.tsx‎

Lines changed: 46 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Check, Favorite, GitHub, LinkedIn } from "@mui/icons-material";
2-
import { IconButton, Link, Paper, Stack, Tooltip, Typography } from "@mui/material";
2+
import { Divider, IconButton, Link, Paper, Stack, Tooltip, Typography } from "@mui/material";
33
import { useInnerTheme } from "../../hooks/useInnerTheme";
4+
import { ComponentList } from "../ComponentList/ComponentList";
45

56
export const InfoPanel = () => {
67
const { themeOptions } = useInnerTheme();
@@ -9,19 +10,19 @@ export const InfoPanel = () => {
910
return (
1011
<Paper
1112
sx={{
12-
display: { xs: "none", sm: "block" },
13+
flexDirection: "column",
14+
gap: 1,
15+
display: { xs: "none", sm: "flex" },
1316
flex: "0 0 190px",
1417
p: 2,
1518
}}
1619
>
17-
<Typography variant="h4" sx={{ lineHeight: 1.1 }}>
18-
MUI
19-
<br />
20-
Theme
21-
<br />
22-
Builder
23-
</Typography>
24-
20+
<Stack>
21+
<Typography variant="h5">MUI&nbsp;Theme&nbsp;Builder</Typography>
22+
<Typography variant="subtitle2" color="text.secondary">
23+
Compatible with MUI 5+
24+
</Typography>
25+
</Stack>
2526
<svg style={{ width: 0, height: 0, position: "absolute" }} aria-hidden="true" focusable="false">
2627
<linearGradient id="ukraine-gradient" x2="0" y2="1">
2728
<stop offset="0%" stopColor="#0057B7" />
@@ -31,12 +32,29 @@ export const InfoPanel = () => {
3132
</linearGradient>
3233
</svg>
3334

34-
<Stack direction="row" sx={{ gap: 0.5, my: 0.5 }}>
35+
<Stack direction="row" sx={{ gap: 0.5 }}>
3536
<Tooltip title="Github repo">
3637
<IconButton size="large" href="https://github.com/PeterTYLiu/mui-theme-builder" target="_blank">
3738
<GitHub fontSize="medium" />
3839
</IconButton>
3940
</Tooltip>
41+
<Tooltip title="MUI docs">
42+
<IconButton size="large" href="https://mui.com/material-ui/getting-started/" target="_blank">
43+
<svg
44+
xmlns="http://www.w3.org/2000/svg"
45+
fill="none"
46+
className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kbd6i0-MuiSvgIcon-root"
47+
viewBox="0 0 24 24"
48+
>
49+
<path
50+
fill="#ffffff"
51+
fillRule="evenodd"
52+
d="M24 5.601V1.592a.344.344 0 0 0-.514-.298l-2.64 1.508a.688.688 0 0 0-.346.597v4.009c0 .264.285.43.514.298l2.64-1.508A.688.688 0 0 0 24 5.6ZM.515 1.295l7.643 4.383a.688.688 0 0 0 .684 0l7.643-4.383a.344.344 0 0 1 .515.298v12.03c0 .235-.12.453-.319.58l-4.65 2.953 3.11 1.832c.22.13.495.127.713-.009l4.61-2.878a.344.344 0 0 0 .161-.292v-4.085c0-.254.14-.486.362-.606l2.507-1.346a.344.344 0 0 1 .506.303v7.531c0 .244-.13.47-.34.593l-7.834 4.592a.688.688 0 0 1-.71-.009l-5.953-3.681A.344.344 0 0 1 9 18.808v-3.624c0-.115.057-.222.153-.286l4.04-2.694a.688.688 0 0 0 .307-.572v-4.39a.137.137 0 0 0-.208-.117l-4.44 2.664a.688.688 0 0 1-.705.002L3.645 7.123a.138.138 0 0 0-.208.118v7.933a.344.344 0 0 1-.52.295L.5 14.019C.19 13.833 0 13.497 0 13.135V1.593c0-.264.286-.43.515-.298Z"
53+
clipRule="evenodd"
54+
/>
55+
</svg>
56+
</IconButton>
57+
</Tooltip>
4058
<Tooltip title="My LinkedIn">
4159
<IconButton size="large" href="https://www.linkedin.com/in/peter-ty-liu/" target="_blank">
4260
<LinkedIn fontSize="medium" />
@@ -56,30 +74,30 @@ export const InfoPanel = () => {
5674
{hasEditedTheme && (
5775
<Stack
5876
direction="row"
59-
sx={{ mb: 1, gap: 0.5, borderRadius: "99px", bgcolor: "background.default", p: 0.5, paddingInlineEnd: 1, alignContent: "center" }}
77+
sx={{ gap: 0.5, borderRadius: "99px", bgcolor: "background.default", p: 0.5, paddingInlineEnd: 1, alignContent: "center" }}
6078
>
6179
<Check color="success" fontSize="small" />
6280
<Typography variant="subtitle2" color="text.secondary">
6381
Changes&nbsp;saved&nbsp;locally
6482
</Typography>
6583
</Stack>
6684
)}
67-
<Stack gap={1}>
68-
<Typography>
69-
Use this app to build/generate a basic MUI theme, which you can customize further by referring to the{" "}
70-
<Link href="https://mui.com/material-ui/customization/theming" target="_blank">
71-
MUI theming docs
72-
</Link>
73-
.
74-
</Typography>
75-
<Typography>Compatible with MUI 5 and higher.</Typography>
76-
<Typography>
77-
Inspired by (but not forked from){" "}
78-
<Link href="https://bareynol.github.io/mui-theme-creator" target="_blank">
79-
bareynol's MUI theme creator
80-
</Link>
81-
</Typography>
82-
</Stack>
85+
<Divider />
86+
<Typography variant="h6">Components</Typography>
87+
<ComponentList />
88+
<Divider />
89+
<Typography variant="subtitle2" color="text.secondary">
90+
Inspired by{" "}
91+
<Link href="https://bareynol.github.io/mui-theme-creator" target="_blank">
92+
@bareynol
93+
</Link>
94+
</Typography>
95+
<Typography variant="subtitle2" color="text.secondary">
96+
Made with ❤️ by{" "}
97+
<Link href="https://www.linkedin.com/in/peter-ty-liu/" target="_blank">
98+
Peter Liu
99+
</Link>
100+
</Typography>
83101
</Paper>
84102
);
85103
};

‎src/components/MockApp/MockApp.tsx‎

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
1-
import { AccountCircle, AcUnitSharp, Add, GasMeterRounded, Notifications, Search, TrackChanges, Upgrade } from "@mui/icons-material";
1+
import {
2+
AccountCircle,
3+
AcUnitSharp,
4+
Add,
5+
AttachMoney,
6+
CurrencyPound,
7+
GasMeterRounded,
8+
Notifications,
9+
Search,
10+
TrackChanges,
11+
Upgrade,
12+
} from "@mui/icons-material";
213
import {
314
Alert,
415
AppBar,
516
Avatar,
617
Badge,
718
Box,
819
Button,
20+
Checkbox,
921
Chip,
1022
Dialog,
1123
DialogActions,
@@ -28,6 +40,8 @@ import {
2840
TablePagination,
2941
TableRow,
3042
TextField,
43+
ToggleButton,
44+
ToggleButtonGroup,
3145
Toolbar,
3246
Tooltip,
3347
Typography,
@@ -111,8 +125,10 @@ const MOCK_DATA: Array<Order> = [
111125

112126
export const MockApp = () => {
113127
const [isDialogOpen, setIsDialogOpen] = useState(false);
128+
const [isDollars, setIsDollars] = useState(true);
114129
return (
115130
<Box
131+
id="mock-app"
116132
sx={{
117133
overscrollBehavior: "none",
118134
boxShadow: 5,
@@ -158,7 +174,7 @@ export const MockApp = () => {
158174
</IconButton>
159175
</Tooltip>
160176
<Tooltip title="My Account">
161-
<IconButton size="large" color="inherit">
177+
<IconButton size="large" color="inherit" className="tooltip-override">
162178
<AccountCircle />
163179
</IconButton>
164180
</Tooltip>
@@ -182,7 +198,7 @@ export const MockApp = () => {
182198
Tuesday, October 18
183199
</Typography>
184200
<Stack direction="row" gap={1}>
185-
<Button variant="outlined" startIcon={<Upgrade />} onClick={() => setIsDialogOpen(true)}>
201+
<Button variant="outlined" startIcon={<Upgrade />} onClick={() => setIsDialogOpen(true)} className="dialog-override">
186202
Export...
187203
</Button>
188204
<Button variant="contained" startIcon={<Add />}>
@@ -207,11 +223,14 @@ export const MockApp = () => {
207223
</Dialog>
208224

209225
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
210-
<Paper sx={{ flex: "1 1 440px", minWidth: "200px", overflow: "hidden" }}>
226+
<Paper sx={{ flex: "1 1 440px", minWidth: "200px", overflow: "hidden" }} className="table-override">
211227
<TableContainer>
212228
<Table size="small" stickyHeader>
213229
<TableHead>
214230
<TableRow>
231+
<StyledTableHeaderCell sx={{ px: 0.5 }}>
232+
<Checkbox />
233+
</StyledTableHeaderCell>
215234
<StyledTableHeaderCell>Order ID</StyledTableHeaderCell>
216235
<StyledTableHeaderCell>Driver</StyledTableHeaderCell>
217236
<StyledTableHeaderCell>Customer</StyledTableHeaderCell>
@@ -221,6 +240,9 @@ export const MockApp = () => {
221240
<TableBody>
222241
{MOCK_DATA.map((data, index) => (
223242
<TableRow key={data.id}>
243+
<StyledTableBodyCell sx={{ px: 0.5 }}>
244+
<Checkbox defaultChecked={Math.random() > 0.5} />
245+
</StyledTableBodyCell>
224246
<StyledTableBodyCell>
225247
<Link href="#">
226248
<b>{data.id}</b>
@@ -258,26 +280,42 @@ export const MockApp = () => {
258280
</TableContainer>
259281
<TablePagination component="div" count={6} page={0} onPageChange={() => {}} rowsPerPage={10} />
260282
</Paper>
261-
<Paper sx={{ p: 2, flex: "1 1 250px" }}>
283+
<Paper sx={{ p: 2, flex: "1 1 250px" }} className="paper-override">
262284
<Stack direction="row" justifyContent="space-between" alignItems="center" gap={2} mb={1.5}>
263285
<Typography fontWeight="bold">Analytics</Typography>
264-
<Select size="small" value={15}>
286+
<Select size="small" value={15} className="select-override">
265287
<MenuItem value={10}>Today</MenuItem>
266288
<MenuItem value={15}>This Week</MenuItem>
267289
<MenuItem value={20}>This Month</MenuItem>
268290
<MenuItem value={30}>This Quarter</MenuItem>
269291
</Select>
270292
</Stack>
271293
<Divider />
272-
<Box py={1.5}>
273-
<Typography variant="subtitle2">Net revenue</Typography>
274-
<Typography variant="h4">
275-
$32,619
276-
<Typography variant="h6" component="span">
277-
.37
294+
<Stack sx={{ py: 1.5, flexDirection: "row", justifyContent: "space-between", alignItems: "center", gap: 2 }}>
295+
<Box>
296+
<Typography variant="subtitle2">Net revenue</Typography>
297+
<Typography variant="h4">
298+
{isDollars ? "$32,619" : "£24,177"}
299+
<Typography variant="h6" component="span">
300+
{isDollars ? ".37" : ".81"}
301+
</Typography>
278302
</Typography>
279-
</Typography>
280-
</Box>
303+
</Box>
304+
<ToggleButtonGroup
305+
size="small"
306+
exclusive
307+
value={isDollars ? "dollar" : "pound"}
308+
onChange={(_, value) => setIsDollars(value === "dollar")}
309+
>
310+
<ToggleButton value="dollar">
311+
<AttachMoney />
312+
</ToggleButton>
313+
<ToggleButton value="pound">
314+
<CurrencyPound />
315+
</ToggleButton>
316+
</ToggleButtonGroup>
317+
</Stack>
318+
281319
<Divider />
282320
<Stack pt={1.5} gap={2}>
283321
<Sparkline title="Tracking events" data={FAKE_DATA_1} icon={<TrackChanges fontSize="small" />} />

‎src/index.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,24 @@ pre {
3333
opacity: 0;
3434
}
3535
}
36+
37+
.pulse {
38+
outline-style: solid !important;
39+
outline-width: 3px;
40+
outline-color: transparent;
41+
animation: pulsate 700ms 4 linear;
42+
}
43+
44+
@keyframes pulsate {
45+
from {
46+
outline-offset: 0px;
47+
outline-width: 3px;
48+
outline-color: var(--mui-palette-warning-main);
49+
}
50+
51+
to {
52+
outline-offset: 6px;
53+
outline-width: 0.5px;
54+
outline-color: transparent;
55+
}
56+
}

0 commit comments

Comments
 (0)