From b727f7c62ce5c9522f57712e66c98efde4d2f927 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 25 Apr 2023 02:22:31 -0300 Subject: [PATCH 1/5] improve page design --- .../example-projects/ExampleCollection.js | 185 ++++++++++++++++++ .../example-projects/example-projects.md | 12 +- docs/public/static/images/examples/cra.svg | 3 + .../public/static/images/examples/express.png | Bin 0 -> 4681 bytes docs/public/static/images/examples/gatsby.svg | 11 ++ docs/public/static/images/examples/next.svg | 15 ++ docs/public/static/images/examples/preact.svg | 7 + docs/public/static/images/examples/remix.svg | 4 + docs/public/static/images/examples/styled.png | Bin 0 -> 11219 bytes .../static/images/examples/tailwindcss.svg | 3 + docs/public/static/images/examples/vite.svg | 15 ++ 11 files changed, 244 insertions(+), 11 deletions(-) create mode 100644 docs/data/material/getting-started/example-projects/ExampleCollection.js create mode 100644 docs/public/static/images/examples/cra.svg create mode 100644 docs/public/static/images/examples/express.png create mode 100644 docs/public/static/images/examples/gatsby.svg create mode 100644 docs/public/static/images/examples/next.svg create mode 100644 docs/public/static/images/examples/preact.svg create mode 100644 docs/public/static/images/examples/remix.svg create mode 100644 docs/public/static/images/examples/styled.png create mode 100644 docs/public/static/images/examples/tailwindcss.svg create mode 100644 docs/public/static/images/examples/vite.svg diff --git a/docs/data/material/getting-started/example-projects/ExampleCollection.js b/docs/data/material/getting-started/example-projects/ExampleCollection.js new file mode 100644 index 00000000000000..3f103fe6ac9d41 --- /dev/null +++ b/docs/data/material/getting-started/example-projects/ExampleCollection.js @@ -0,0 +1,185 @@ +import * as React from 'react'; +import Grid from '@mui/material/Grid'; +import Card from '@mui/material/Card'; +import Stack from '@mui/material/Stack'; +import Avatar from '@mui/material/Avatar'; +import Typography from '@mui/material/Typography'; +import Link from '@mui/material/Link'; +import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; + +const examples = [ + { + name: 'Next.js', + label: 'View JS example', + tsLabel: 'View TS example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-next', + tsLink: + 'https://github.com/mui/material-ui/tree/master/examples/material-next-ts', + src: '/static/images/examples/next.svg', + }, + { + name: 'Create React App', + label: 'View JS example', + tsLabel: 'View TS example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra', + tsLink: + 'https://github.com/mui/material-ui/tree/master/examples/material-cra-ts', + src: '/static/images/examples/cra.svg', + }, + { + name: 'Remix', + label: 'View example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-remix-ts', + src: '/static/images/examples/remix.svg', + }, + { + name: 'Tailwind CSS', + label: 'View example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts', + src: '/static/images/examples/tailwindcss.svg', + }, + { + name: 'Vite.js', + label: 'View JS example', + tsLabel: 'View TS example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-vite', + src: '/static/images/examples/vite.svg', + }, + { + name: 'styled-components', + label: 'View JS example', + tsLabel: 'View TS example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components', + tsLink: + 'https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts', + src: '/static/images/examples/styled.png', + }, + { + name: 'Gatsby', + label: 'View example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-gatsby', + src: '/static/images/examples/gatsby.svg', + }, + { + name: 'Preact', + label: 'View example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-preact', + src: '/static/images/examples/preact.svg', + }, + { + name: 'CDN', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-via-cdn', + label: 'View example', + }, + { + name: 'Express.js (server-rendered)', + label: 'View example', + link: 'https://github.com/mui/material-ui/tree/master/examples/material-express-ssr', + src: '/static/images/examples/express.png', + }, +]; + +export default function ExampleCollection() { + return ( + + {examples.map((example) => ( + + ({ + p: 2, + display: 'flex', + alignItems: 'center', + gap: 2, + bgcolor: theme.palette.mode === 'dark' ? 'transparent' : '#fff', + backgroundImage: 'none', + borderRadius: 2, + border: '1px solid', + borderColor: theme.palette.mode === 'dark' ? '#132F4C' : 'grey.200', + boxShadow: 'none', + + '&:hover': { + borderColor: + theme.palette.mode === 'dark' ? '#173A5E' : 'grey.300', + boxShadow: + theme.palette.mode === 'dark' + ? '0px 2px 8px rgba(0, 13, 26, 1)' + : '0px 2px 8px rgba(170, 180, 190, 0.2)', + }, + }), + ]} + > + + + + {example.name} + + + + {example.label} + + + {example.tsLink ? ( + + + / + + + {example.tsLabel} + + + + ) : null} + + + + + ))} + + ); +} diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md index 3cad359fcb93b1..4f8feb974a4e5d 100644 --- a/docs/data/material/getting-started/example-projects/example-projects.md +++ b/docs/data/material/getting-started/example-projects/example-projects.md @@ -8,17 +8,7 @@ You can find some example projects in the [GitHub repository](https://github.com -- [Next.js](https://github.com/mui/material-ui/tree/master/examples/material-next) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-next-ts)) -- [Create React App](https://github.com/mui/material-ui/tree/master/examples/material-cra) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts)) -- [Remix](https://github.com/mui/material-ui/tree/master/examples/material-remix-ts) -- [Gatsby](https://github.com/mui/material-ui/tree/master/examples/material-gatsby) -- [Preact](https://github.com/mui/material-ui/tree/master/examples/material-preact) -- [CDN](https://github.com/mui/material-ui/tree/master/examples/material-via-cdn) -- [Express.js (server-rendered)](https://github.com/mui/material-ui/tree/master/examples/material-express-ssr) -- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) -- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-vite-ts)) -- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)) -- [Next.js + @mui/styles (v4 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration) +{{"demo": "ExampleCollection.js", "hideToolbar": true, "bg": "inline"}} Create React App is an awesome project for learning React. Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs. diff --git a/docs/public/static/images/examples/cra.svg b/docs/public/static/images/examples/cra.svg new file mode 100644 index 00000000000000..7e8fa5c39d2311 --- /dev/null +++ b/docs/public/static/images/examples/cra.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/public/static/images/examples/express.png b/docs/public/static/images/examples/express.png new file mode 100644 index 0000000000000000000000000000000000000000..ceba4faa1716d11b1d1e1ff98d1c704506e90686 GIT binary patch literal 4681 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 JtJLg1{2!oZ>OBAe literal 0 HcmV?d00001 diff --git a/docs/public/static/images/examples/gatsby.svg b/docs/public/static/images/examples/gatsby.svg new file mode 100644 index 00000000000000..673e893b2d89cc --- /dev/null +++ b/docs/public/static/images/examples/gatsby.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/docs/public/static/images/examples/next.svg b/docs/public/static/images/examples/next.svg new file mode 100644 index 00000000000000..4c49a0245fa940 --- /dev/null +++ b/docs/public/static/images/examples/next.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/public/static/images/examples/preact.svg b/docs/public/static/images/examples/preact.svg new file mode 100644 index 00000000000000..dbe8c8cf34f35d --- /dev/null +++ b/docs/public/static/images/examples/preact.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/docs/public/static/images/examples/remix.svg b/docs/public/static/images/examples/remix.svg new file mode 100644 index 00000000000000..f9dc7067a39b6a --- /dev/null +++ b/docs/public/static/images/examples/remix.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/public/static/images/examples/styled.png b/docs/public/static/images/examples/styled.png new file mode 100644 index 0000000000000000000000000000000000000000..66e9352754c6573e570d28b58b6b21df34263709 GIT binary patch literal 11219 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 + + diff --git a/docs/public/static/images/examples/vite.svg b/docs/public/static/images/examples/vite.svg new file mode 100644 index 00000000000000..f050e25086544f --- /dev/null +++ b/docs/public/static/images/examples/vite.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + From e3574527188b9794b93fe7bc4b7ed972cd8d327f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 28 Apr 2023 18:12:53 +0700 Subject: [PATCH 2/5] fux styles --- .../example-projects/ExampleCollection.js | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/docs/data/material/getting-started/example-projects/ExampleCollection.js b/docs/data/material/getting-started/example-projects/ExampleCollection.js index 3f103fe6ac9d41..cb516f4af5da82 100644 --- a/docs/data/material/getting-started/example-projects/ExampleCollection.js +++ b/docs/data/material/getting-started/example-projects/ExampleCollection.js @@ -1,7 +1,7 @@ import * as React from 'react'; +import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import Card from '@mui/material/Card'; -import Stack from '@mui/material/Stack'; import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; import Link from '@mui/material/Link'; @@ -88,6 +88,7 @@ export default function ExampleCollection() { sx={[ (theme) => ({ p: 2, + height: '100%', display: 'flex', alignItems: 'center', gap: 2, @@ -118,7 +119,7 @@ export default function ExampleCollection() { src={example.src} alt={example.name} /> - +
{example.name} - - {example.tsLink ? ( - + {!!example.tsLink && ( + / @@ -173,10 +174,10 @@ export default function ExampleCollection() { {example.tsLabel} - - ) : null} - - + + )} + +
))} From c73f7c4315ed99e34843b63c3650f4ac85414d3e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 8 May 2023 10:58:19 +0700 Subject: [PATCH 3/5] move ExampleCollection to modules --- .../example-projects/example-projects.md | 2 +- .../modules/components}/ExampleCollection.js | 44 ++++++++++--------- packages/markdown/loader.js | 4 +- 3 files changed, 27 insertions(+), 23 deletions(-) rename docs/{data/material/getting-started/example-projects => src/modules/components}/ExampleCollection.js (82%) diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md index 4f8feb974a4e5d..87c739ad2bc46c 100644 --- a/docs/data/material/getting-started/example-projects/example-projects.md +++ b/docs/data/material/getting-started/example-projects/example-projects.md @@ -8,7 +8,7 @@ You can find some example projects in the [GitHub repository](https://github.com -{{"demo": "ExampleCollection.js", "hideToolbar": true, "bg": "inline"}} +{{"component": "docs/src/modules/components/ExampleCollection.js", "hideToolbar": true, "bg": "inline"}} Create React App is an awesome project for learning React. Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs. diff --git a/docs/data/material/getting-started/example-projects/ExampleCollection.js b/docs/src/modules/components/ExampleCollection.js similarity index 82% rename from docs/data/material/getting-started/example-projects/ExampleCollection.js rename to docs/src/modules/components/ExampleCollection.js index cb516f4af5da82..f31d0980510510 100644 --- a/docs/data/material/getting-started/example-projects/ExampleCollection.js +++ b/docs/src/modules/components/ExampleCollection.js @@ -6,6 +6,7 @@ import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; import Link from '@mui/material/Link'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; +import FilterDramaIcon from '@mui/icons-material/FilterDrama'; const examples = [ { @@ -13,8 +14,7 @@ const examples = [ label: 'View JS example', tsLabel: 'View TS example', link: 'https://github.com/mui/material-ui/tree/master/examples/material-next', - tsLink: - 'https://github.com/mui/material-ui/tree/master/examples/material-next-ts', + tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-next-ts', src: '/static/images/examples/next.svg', }, { @@ -22,8 +22,7 @@ const examples = [ label: 'View JS example', tsLabel: 'View TS example', link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra', - tsLink: - 'https://github.com/mui/material-ui/tree/master/examples/material-cra-ts', + tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-ts', src: '/static/images/examples/cra.svg', }, { @@ -70,6 +69,7 @@ const examples = [ name: 'CDN', link: 'https://github.com/mui/material-ui/tree/master/examples/material-via-cdn', label: 'View example', + src: , }, { name: 'Express.js (server-rendered)', @@ -86,28 +86,32 @@ export default function ExampleCollection() { ({ + { p: 2, height: '100%', display: 'flex', alignItems: 'center', gap: 2, - bgcolor: theme.palette.mode === 'dark' ? 'transparent' : '#fff', + bgcolor: '#fff', backgroundImage: 'none', borderRadius: 2, border: '1px solid', - borderColor: theme.palette.mode === 'dark' ? '#132F4C' : 'grey.200', + borderColor: 'grey.200', boxShadow: 'none', - '&:hover': { - borderColor: - theme.palette.mode === 'dark' ? '#173A5E' : 'grey.300', - boxShadow: - theme.palette.mode === 'dark' - ? '0px 2px 8px rgba(0, 13, 26, 1)' - : '0px 2px 8px rgba(170, 180, 190, 0.2)', + borderColor: 'grey.300', + boxShadow: '0px 2px 8px rgba(170, 180, 190, 0.2)', }, - }), + }, + (theme) => + theme.applyDarkStyles({ + bgcolor: 'transparent', + borderColor: 'primaryDark.700', + '&:hover': { + borderColor: 'primaryDark.600', + boxShadow: '0px 2px 8px rgba(0, 13, 26, 1)', + }, + }), ]} >
- + {example.name} { - const moduleID = path.join(this.rootContext, 'src', componentName).replace(/\\/g, '/'); + const moduleID = path + .join(this.rootContext, 'src', componentName.replace(/^docs\/src/, '')) + .replace(/\\/g, '/'); components[moduleID] = componentName; componentModuleIDs.add(moduleID); From 907988168fdf0b67aaa11f4d09be2d1cae243b38 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 8 May 2023 11:01:21 +0700 Subject: [PATCH 4/5] adjust layout --- .../getting-started/example-projects/example-projects.md | 4 +++- docs/src/modules/components/ExampleCollection.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md index 87c739ad2bc46c..ddea9b4bf7a63a 100644 --- a/docs/data/material/getting-started/example-projects/example-projects.md +++ b/docs/data/material/getting-started/example-projects/example-projects.md @@ -8,7 +8,9 @@ You can find some example projects in the [GitHub repository](https://github.com -{{"component": "docs/src/modules/components/ExampleCollection.js", "hideToolbar": true, "bg": "inline"}} +{{"component": "docs/src/modules/components/ExampleCollection.js"}} + +
Create React App is an awesome project for learning React. Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs. diff --git a/docs/src/modules/components/ExampleCollection.js b/docs/src/modules/components/ExampleCollection.js index f31d0980510510..78e0cb624e6d37 100644 --- a/docs/src/modules/components/ExampleCollection.js +++ b/docs/src/modules/components/ExampleCollection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Unstable_Grid2'; import Card from '@mui/material/Card'; import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; From b73c2199842871bd47b617b042719567cd4e3d06 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 8 May 2023 09:20:32 -0300 Subject: [PATCH 5/5] fix border radius --- docs/src/modules/components/ExampleCollection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/modules/components/ExampleCollection.js b/docs/src/modules/components/ExampleCollection.js index 78e0cb624e6d37..6666a3da71ca9a 100644 --- a/docs/src/modules/components/ExampleCollection.js +++ b/docs/src/modules/components/ExampleCollection.js @@ -94,7 +94,7 @@ export default function ExampleCollection() { gap: 2, bgcolor: '#fff', backgroundImage: 'none', - borderRadius: 2, + borderRadius: 1, border: '1px solid', borderColor: 'grey.200', boxShadow: 'none',