Skip to content

Commit d26e4ea

Browse files
brandonscriptbrandonscript
committed
Docs improvements
1 parent 796854c commit d26e4ea

File tree

9 files changed

+463
-85
lines changed

9 files changed

+463
-85
lines changed

‎demos/shared/DemoComponents.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,16 +110,16 @@ export const DemoTitle = ({
110110
export const DemoDescription = ({ gridComponentName = "FlexGrid" }: { gridComponentName?: string }) => (
111111
<Typography variant="body1" component="div">
112112
{
113-
"mui-flexy for MUI is a component wrapper for flexbox styles that allows you to easily \
114-
align and distribute flexy items in a space in a way that doesn't make you want \
115-
to pull your hair out trying to remember whether to use "
113+
"mui-flexy extends MUI's Box and Grid components to allow you to easily align and \
114+
distribute flexbox items in a space in a way that doesn't make you want to pull your \
115+
hair out trying to remember whether to use "
116116
}
117117
<DemoCode inline>justify-content</DemoCode>
118118
{" or "}
119119
<DemoCode inline>align-items</DemoCode>
120120
{
121121
". Using a simple and consistent x, y coordinate system, you can stop worrying about \
122-
the CSS working group's choices and get on with your life of centering divs."
122+
the CSS working group's choices and get on with your life of centering divs and building forms."
123123
}
124124
<br />
125125
<br />

‎demos/v5/dist/bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/v6/dist/bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/v7/dist/bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/Docs.tsx‎

Lines changed: 175 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React, { useEffect, useMemo, useState } from "react";
2+
import { FaGithub } from "react-icons/fa";
3+
import { HiOutlineExternalLink } from "react-icons/hi";
24

35
import type { BaseFlexProps } from "../packages/core/dist";
46

@@ -578,6 +580,49 @@ const VersionApp = ({ version, libraries }: { version: string; libraries: any })
578580
main: "#007FFF",
579581
},
580582
},
583+
typography: {
584+
fontFamily: [
585+
"-apple-system",
586+
"BlinkMacSystemFont",
587+
'"Segoe UI"',
588+
"Roboto",
589+
'"Inter"',
590+
'"San Francisco"',
591+
'"Helvetica Neue"',
592+
"Arial",
593+
"sans-serif",
594+
'"Apple Color Emoji"',
595+
'"Segoe UI Emoji"',
596+
'"Segoe UI Symbol"',
597+
].join(","),
598+
},
599+
shadows: [
600+
"none",
601+
"0px 1px 3px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.12)", // elevation 1 - softer AppBar shadow
602+
"0px 2px 6px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.12)", // elevation 2 - softer Paper shadow
603+
"0px 3px 12px rgba(0, 0, 0, 0.08), 0px 2px 6px rgba(0, 0, 0, 0.12)",
604+
"0px 4px 16px rgba(0, 0, 0, 0.08), 0px 2px 8px rgba(0, 0, 0, 0.12)",
605+
"0px 6px 20px rgba(0, 0, 0, 0.08), 0px 3px 10px rgba(0, 0, 0, 0.12)",
606+
"0px 8px 24px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.12)",
607+
"0px 10px 28px rgba(0, 0, 0, 0.08), 0px 5px 14px rgba(0, 0, 0, 0.12)",
608+
"0px 12px 32px rgba(0, 0, 0, 0.08), 0px 6px 16px rgba(0, 0, 0, 0.12)",
609+
"0px 14px 36px rgba(0, 0, 0, 0.08), 0px 7px 18px rgba(0, 0, 0, 0.12)",
610+
"0px 16px 40px rgba(0, 0, 0, 0.08), 0px 8px 20px rgba(0, 0, 0, 0.12)",
611+
"0px 18px 44px rgba(0, 0, 0, 0.08), 0px 9px 22px rgba(0, 0, 0, 0.12)",
612+
"0px 20px 48px rgba(0, 0, 0, 0.08), 0px 10px 24px rgba(0, 0, 0, 0.12)",
613+
"0px 22px 52px rgba(0, 0, 0, 0.08), 0px 11px 26px rgba(0, 0, 0, 0.12)",
614+
"0px 24px 56px rgba(0, 0, 0, 0.08), 0px 12px 28px rgba(0, 0, 0, 0.12)",
615+
"0px 26px 60px rgba(0, 0, 0, 0.08), 0px 13px 30px rgba(0, 0, 0, 0.12)",
616+
"0px 28px 64px rgba(0, 0, 0, 0.08), 0px 14px 32px rgba(0, 0, 0, 0.12)",
617+
"0px 30px 68px rgba(0, 0, 0, 0.08), 0px 15px 34px rgba(0, 0, 0, 0.12)",
618+
"0px 32px 72px rgba(0, 0, 0, 0.08), 0px 16px 36px rgba(0, 0, 0, 0.12)",
619+
"0px 34px 76px rgba(0, 0, 0, 0.08), 0px 17px 38px rgba(0, 0, 0, 0.12)",
620+
"0px 36px 80px rgba(0, 0, 0, 0.08), 0px 18px 40px rgba(0, 0, 0, 0.12)",
621+
"0px 38px 84px rgba(0, 0, 0, 0.08), 0px 19px 42px rgba(0, 0, 0, 0.12)",
622+
"0px 40px 88px rgba(0, 0, 0, 0.08), 0px 20px 44px rgba(0, 0, 0, 0.12)",
623+
"0px 42px 92px rgba(0, 0, 0, 0.08), 0px 21px 46px rgba(0, 0, 0, 0.12)",
624+
"0px 44px 96px rgba(0, 0, 0, 0.08), 0px 22px 48px rgba(0, 0, 0, 0.12)",
625+
],
581626
}),
582627
);
583628

@@ -604,12 +649,35 @@ const VersionApp = ({ version, libraries }: { version: string; libraries: any })
604649
<Material.Typography variant="h6" color="text.secondary" gutterBottom>
605650
Compatible with @mui/material v{currentVersion.version}
606651
</Material.Typography>
652+
<Material.Box
653+
sx={{
654+
mt: 1,
655+
mb: 2,
656+
p: 2,
657+
backgroundColor: "#f5f5f5",
658+
borderRadius: 1,
659+
borderLeft: "4px solid #007FFF",
660+
}}
661+
>
662+
<Material.Typography variant="body2" sx={{ fontStyle: "italic", color: "text.secondary" }}>
663+
Getting started? Check out the{" "}
664+
<Material.Link
665+
href="https://github.com/brandonscript/mui-flexy#getting-started"
666+
target="_blank"
667+
rel="noopener noreferrer"
668+
color="primary"
669+
sx={{ fontStyle: "normal", fontWeight: 600 }}
670+
>
671+
README <HiOutlineExternalLink size={16} style={{ verticalAlign: "text-bottom" }} />
672+
</Material.Link>
673+
</Material.Typography>
674+
</Material.Box>
607675
<Material.Typography variant="body1" component="div" sx={{ mt: 2 }}>
608-
mui-flexy for MUI is a component wrapper for flexbox styles that allows you to easily align and distribute
609-
flexy items in a space in a way that doesn't make you want to pull your hair out trying to remember
610-
whether to use <DemoCode inline>justify-content</DemoCode> or <DemoCode inline>align-items</DemoCode>.
611-
Using a simple and consistent x, y coordinate system, you can stop worrying about the CSS working group's
612-
choices and get on with your life of centering divs.
676+
mui-flexy extends MUI's Box and Grid components to allow you to easily align and distribute flexbox items
677+
in a space in a way that doesn't make you want to pull your hair out trying to remember whether to use
678+
<DemoCode inline>justify-content</DemoCode> or <DemoCode inline>align-items</DemoCode>. Using a simple and
679+
consistent x, y coordinate system, you can stop worrying about the CSS working group's choices and get on
680+
with your life of centering divs and building forms.
613681
<br />
614682
<br />
615683
Simply use <DemoCode inline>&lt;FlexBox /&gt;</DemoCode> or{" "}
@@ -1490,39 +1558,110 @@ const App = () => {
14901558

14911559
const { Material, Styles } = headerLibraries;
14921560

1561+
// Create header theme with the same typography and softened shadows
1562+
const headerTheme = Styles.createTheme({
1563+
palette: {
1564+
primary: {
1565+
main: "#007FFF",
1566+
},
1567+
},
1568+
typography: {
1569+
fontFamily: [
1570+
"-apple-system",
1571+
"BlinkMacSystemFont",
1572+
'"Segoe UI"',
1573+
"Roboto",
1574+
'"Inter"',
1575+
'"San Francisco"',
1576+
'"Helvetica Neue"',
1577+
"Arial",
1578+
"sans-serif",
1579+
'"Apple Color Emoji"',
1580+
'"Segoe UI Emoji"',
1581+
'"Segoe UI Symbol"',
1582+
].join(","),
1583+
},
1584+
shadows: [
1585+
"none",
1586+
"0px 1px 3px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.12)", // elevation 1 - softer AppBar shadow
1587+
"0px 2px 6px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.12)", // elevation 2 - softer Paper shadow
1588+
"0px 3px 12px rgba(0, 0, 0, 0.08), 0px 2px 6px rgba(0, 0, 0, 0.12)",
1589+
"0px 4px 16px rgba(0, 0, 0, 0.08), 0px 2px 8px rgba(0, 0, 0, 0.12)",
1590+
"0px 6px 20px rgba(0, 0, 0, 0.08), 0px 3px 10px rgba(0, 0, 0, 0.12)",
1591+
"0px 8px 24px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.12)",
1592+
"0px 10px 28px rgba(0, 0, 0, 0.08), 0px 5px 14px rgba(0, 0, 0, 0.12)",
1593+
"0px 12px 32px rgba(0, 0, 0, 0.08), 0px 6px 16px rgba(0, 0, 0, 0.12)",
1594+
"0px 14px 36px rgba(0, 0, 0, 0.08), 0px 7px 18px rgba(0, 0, 0, 0.12)",
1595+
"0px 16px 40px rgba(0, 0, 0, 0.08), 0px 8px 20px rgba(0, 0, 0, 0.12)",
1596+
"0px 18px 44px rgba(0, 0, 0, 0.08), 0px 9px 22px rgba(0, 0, 0, 0.12)",
1597+
"0px 20px 48px rgba(0, 0, 0, 0.08), 0px 10px 24px rgba(0, 0, 0, 0.12)",
1598+
"0px 22px 52px rgba(0, 0, 0, 0.08), 0px 11px 26px rgba(0, 0, 0, 0.12)",
1599+
"0px 24px 56px rgba(0, 0, 0, 0.08), 0px 12px 28px rgba(0, 0, 0, 0.12)",
1600+
"0px 26px 60px rgba(0, 0, 0, 0.08), 0px 13px 30px rgba(0, 0, 0, 0.12)",
1601+
"0px 28px 64px rgba(0, 0, 0, 0.08), 0px 14px 32px rgba(0, 0, 0, 0.12)",
1602+
"0px 30px 68px rgba(0, 0, 0, 0.08), 0px 15px 34px rgba(0, 0, 0, 0.12)",
1603+
"0px 32px 72px rgba(0, 0, 0, 0.08), 0px 16px 36px rgba(0, 0, 0, 0.12)",
1604+
"0px 34px 76px rgba(0, 0, 0, 0.08), 0px 17px 38px rgba(0, 0, 0, 0.12)",
1605+
"0px 36px 80px rgba(0, 0, 0, 0.08), 0px 18px 40px rgba(0, 0, 0, 0.12)",
1606+
"0px 38px 84px rgba(0, 0, 0, 0.08), 0px 19px 42px rgba(0, 0, 0, 0.12)",
1607+
"0px 40px 88px rgba(0, 0, 0, 0.08), 0px 20px 44px rgba(0, 0, 0, 0.12)",
1608+
"0px 42px 92px rgba(0, 0, 0, 0.08), 0px 21px 46px rgba(0, 0, 0, 0.12)",
1609+
"0px 44px 96px rgba(0, 0, 0, 0.08), 0px 22px 48px rgba(0, 0, 0, 0.12)",
1610+
],
1611+
});
1612+
14931613
return (
1494-
<div>
1495-
{/* Header with version tabs */}
1496-
<Material.AppBar
1497-
position="sticky"
1498-
color="default"
1499-
elevation={1}
1500-
data-testid="app-bar"
1501-
sx={{ top: 0, zIndex: 1100 }}
1502-
>
1503-
<Material.Toolbar>
1504-
<Material.Typography component="h2" variant="h6" sx={{ flexGrow: 1 }}>
1505-
mui-flexy documentation
1506-
</Material.Typography>
1507-
{versions.map((version) => (
1508-
<Material.Button
1509-
key={version.key}
1510-
color={selectedVersion === version.key ? "primary" : "inherit"}
1511-
onClick={() => setSelectedVersion(version.key)}
1512-
sx={{
1513-
mx: 0.5,
1514-
fontWeight: selectedVersion === version.key ? "bold" : "normal",
1515-
}}
1614+
<Styles.ThemeProvider theme={headerTheme}>
1615+
<div>
1616+
{/* Header with version tabs */}
1617+
<Material.AppBar
1618+
position="sticky"
1619+
color="default"
1620+
elevation={1}
1621+
data-testid="app-bar"
1622+
sx={{ top: 0, zIndex: 1100 }}
1623+
>
1624+
<Material.Toolbar>
1625+
<Material.Box
1626+
component="img"
1627+
src="apple-touch-icon.png"
1628+
alt="mui-flexy logo"
1629+
sx={{ width: 28, height: 28, filter: "grayscale(100%) brightness(1.4)", mr: 1 }}
1630+
/>
1631+
<Material.Typography component="h2" variant="h6" sx={{ flexGrow: 1, color: "text.disabled" }}>
1632+
docs
1633+
</Material.Typography>
1634+
{versions.map((version) => (
1635+
<Material.Button
1636+
key={version.key}
1637+
color={selectedVersion === version.key ? "primary" : "inherit"}
1638+
onClick={() => setSelectedVersion(version.key)}
1639+
sx={{
1640+
mx: 0.5,
1641+
fontWeight: selectedVersion === version.key ? "bold" : "normal",
1642+
}}
1643+
>
1644+
{version.label}
1645+
</Material.Button>
1646+
))}
1647+
<Material.IconButton
1648+
component="a"
1649+
href="https://github.com/brandonscript/mui-flexy"
1650+
target="_blank"
1651+
rel="noopener noreferrer"
1652+
color="inherit"
1653+
sx={{ ml: 1 }}
1654+
aria-label="View source on GitHub"
15161655
>
1517-
{version.label}
1518-
</Material.Button>
1519-
))}
1520-
</Material.Toolbar>
1521-
</Material.AppBar>
1522-
1523-
{/* Version-specific content */}
1524-
<VersionContent version={selectedVersion} />
1525-
</div>
1656+
<FaGithub />
1657+
</Material.IconButton>
1658+
</Material.Toolbar>
1659+
</Material.AppBar>
1660+
1661+
{/* Version-specific content */}
1662+
<VersionContent version={selectedVersion} />
1663+
</div>
1664+
</Styles.ThemeProvider>
15261665
);
15271666
};
15281667

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@types/react-syntax-highlighter": "^15.5.13",
2525
"react": "^18.3.1",
2626
"react-dom": "^18.3.1",
27+
"react-icons": "^5.0.1",
2728
"react-syntax-highlighter": "^15.6.1"
2829
},
2930
"devDependencies": {

0 commit comments

Comments
 (0)