From 47329acc3f318c2a427c0d025d3aaf7aa6a13c66 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 22 Aug 2024 00:55:09 +0200 Subject: [PATCH 1/7] [blog] Add video to the Pigment CSS blog post (#42500) --- docs/pages/blog/introducing-pigment-css.md | 92 ++++++++++++++++------ docs/pages/blog/material-ui-v4-is-out.md | 2 +- 2 files changed, 68 insertions(+), 26 deletions(-) diff --git a/docs/pages/blog/introducing-pigment-css.md b/docs/pages/blog/introducing-pigment-css.md index b3856429416277..33edf2a1f5c5e3 100644 --- a/docs/pages/blog/introducing-pigment-css.md +++ b/docs/pages/blog/introducing-pigment-css.md @@ -1,5 +1,5 @@ --- -title: 'Introducing Pigment CSS: the next generation of CSS-in-JS' +title: 'A preview of Pigment CSS: the next generation of CSS-in-JS' description: 'Pigment CSS offers significant performance gains along with RSC and App Router support.' date: 2024-05-16T00:00:00.000Z authors: @@ -15,55 +15,63 @@ tags: ['Pigment CSS', 'Product'] manualCard: true --- -In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from client to server. +Check out MUI's CEO Olivier Tassinari introducing Pigment CSS at React Conf 2024: -Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because the [React context API](https://react.dev/learn/passing-data-deeply-with-context) only works on the client. -And with nearly 70% of respondents in the [State of CSS 2023 survey](https://2023.stateofcss.com/en-US/css-in-js/) indicating they use styled-components and Emotion, we're looking at a whole lot of React developers with no clear path forward from here. + -For a library as widely used as Material UI, the biggest challenge is to stay up-to-date while introducing as few breaking changes as humanly possible, to maintain a consistent and reliable developer experience without asking users to completely change the way they build UI components. +In the era of React Server Components and the Next.js App Router, component libraries like Material UI have an opportunity to gain performance improvements by moving rendering work from the client to the server. -That's where Pigment CSS comes in. +Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because the [React context API](https://react.dev/learn/passing-data-deeply-with-context) only works with client-side components. +With nearly 70% of respondents in the [State of CSS 2023 survey](https://2023.stateofcss.com/en-US/css-in-js/) indicating they use styled-components and Emotion, we're looking at a whole lot of React developers with no clear path forward from here. -Introducing Pigment CSS: the next generation of CSS-in-JS +For a library as widely used as Material UI, the biggest challenge is to innovate while introducing as few breaking changes as possible. +We need to maintain a consistent and reliable developer experience without asking you to completely change the way you build UI components. -Pigment CSS is MUI's new in-house styling solution: a zero-runtime CSS-in-JS package that generates colocated styles to their own CSS files at build-time. -With Pigment CSS you get RSC compatibility, _plus_ significant performance improvements when compared with Emotion, the styling engine used in Material UI v5. +That's where [Pigment CSS](https://github.com/mui/pigment-css) comes in. + + + Introducing Pigment CSS: the next generation of CSS-in-JS + + +Pigment CSS is a zero-runtime CSS-in-JS library that generates colocated styles to their own CSS files at build time. +With Pigment CSS you get significant performance improvements when compared with Emotion, the styling engine used in Material UI v5, _plus_ RSC compatibility. And though we're prioritizing the needs of Material UI users in early development and focusing on a smooth migration, Pigment CSS can be used with _any_ React component library you prefer. ## Why Pigment CSS? ### Traditional CSS-in-JS is not enough -Emotion made a lot of sense for Material UI v5 in late 2021, but so much has changed in the React ecosystem since then. +Emotion made a lot of sense for Material UI v5.0.0 in late 2021, but so much has changed in the React ecosystem since then. After Next.js offered the first implementation of the React Server Components spec with [the App Router](https://nextjs.org/blog/next-13) towards the end of 2022, it became clear that there was a monumental shift on the horizon. RSCs unlock a whole new realm of possibilities for React; for us as UI developers, it means we can create components that are fully renderable at build-time so we don't have to pass that burden on to the client at run-time. But working with RSCs requires us to let go of familiar APIs like `React.useContext`, which in turn becomes a major blocker for using the last generation's style engines like Emotion that rely heavily on this hook for theming. :::info -To learn more about RSCs, we highly recommend reading [Making Sense of React Server Components](https://www.joshwcomeau.com/react/server-components/) by Josh Comeau. +To learn more about RSCs, we recommend reading [Making Sense of React Server Components](https://www.joshwcomeau.com/react/server-components/) by Josh Comeau. ::: ### Material UI is a unique use case Material UI is downloaded millions of times per month and is one of the most rigorously battle-tested UI libraries on the internet, with a GitHub history spanning all the way back to 2014. It's had to make some massive changes along the way to keep up with the times; most recently, moving from JSS to Emotion from v4 to v5. -While those breaking changes did bring many benefits overall, they unfortunately came with a notoriously painful migration experience. +While those breaking changes did bring many benefits overall, they unfortunately came with a painful migration experience. -We learned our lesson! -We can't do that to our users again. +We learned our lesson! We don't want to impose this on you again. So when it came time to seek out a new way to generate styles, we knew we needed to keep the syntax and authoring experience as similar as possible to Emotion and styled-components—and provide codemods for most of the breaking changes—in order to minimize friction when migrating. ### Other options don't meet our needs For those of us who are perfectly happy with the patterns we know and love from CSS-in-JS, it feels frustrating to consider abandoning all that muscle memory just to reinvent the wheel yet again. -We like the DX of colocated styles, and we'd rather not bloat the DOM with atomic class names—so Tailwind CSS, StyleX, Panda CSS, and other solutions that have cropped up in recent months just don't match up with our preferences. +We love the DX of colocated styles, and we'd rather not migrate the API to atomic class names. +We want to support nested selectors at scale—so Tailwind CSS, StyleX, Panda CSS, and other solutions that have appeared in recent months are not viable options. + Pigment CSS started as a [Linaria](https://linaria.dev/) fork, but we found more of the tools we needed to achieve our goals with [WyW-in-JS](https://wyw-in-js.dev/), the open-source library that also powers Linaria. ## How Pigment CSS works -Pigment CSS is a zero-runtime CSS-in-JS library: This means it doesn't have access to the end user's browser runtime, which would be necessary to generate and insert authored CSS at run-time. +Pigment CSS is a zero-runtime CSS-in-JS library: This means it doesn't have access to the end user's browser JavaScript runtime, so it can't use the runtime to generate and insert CSS. Instead, it does all its processing at build-time to pre-generate the CSS which then becomes part of the output bundle. It uses WyW-in-JS processor feature which makes it possible to create custom logic that's triggered by the presence of different imports from the library. @@ -78,19 +86,53 @@ Check out [How Pigment CSS works](https://github.com/mui/pigment-css/blob/maste For users of Emotion and styled-components, the benefits of adopting Pigment CSS are clear: your end users get better performance, and you get RSC and App Router compatibility without having to significantly change how you author component styles. -### Better performance +### Better page load performance + +When comparing the same Material UI app built with Next.js and either Emotion or Pigment CSS, we've observed the following page load performance gains using the same code: + + + +| Metrics | Emotion | Pigment CSS | Change | +| :------------------ | -------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------: | -----: | +| First Load JS | [131 kB](https://emotion-demo.vercel.app/?metric=1) | [104 kB](https://pigment-css-demo.vercel.app/?metric=1) | -20% | +| Total blocking time | [280 ms](https://pagespeed.web.dev/analysis/https-emotion-demo-vercel-app/uxfpkvbp31?hl=fr&form_factor=mobile) | [210 ms](https://pagespeed.web.dev/analysis/https-pigment-css-demo-vercel-app/azcw1qxkec?hl=fr&form_factor=mobile) | -25% | + + + +:::info +To reproduce those numbers yourself, check out these live demos and repositories: + +- Emotion + - Live: https://emotion-demo.vercel.app/?metric=1 + - Source: https://github.com/brijeshb42/emotion-demo +- Pigment CSS + - Live: https://pigment-css-demo.vercel.app/?metric=1 + - Source: https://github.com/brijeshb42/pigment-css-landing-page-demo + +::: -When comparing the same Material UI app built with Next.js and either Emotion or Pigment CSS, we've observed the following page load performance gains: +### Better runtime performance -| Metrics | Emotion | Pigment CSS | Reduction | -| :--------------------- | ------: | ----------: | --------: | -| First load JavaScript | 131kB | 104kB | 20% | -| First Contentful Paint | 503ms | 455ms | 9% | -| Time To First Byte | 447.5ms | 381.5ms | 15% | -| Total Page HTML | 15.9kB | 14.7kB | 7.5% | +When comparing the same Material UI app built with Next.js and either Emotion or Pigment CSS, we've observed the following runtime performance gains using the same code: + + + +| Metrics | Emotion | Pigment CSS | Change | +| :-------------------------------------- | ------: | ----------: | -----: | +| Create and mount a new button | 17.3 ms | 10.1 ms | -42% | +| Change a variant on a mounted component | 14.0 ms | 9.13 ms | -34% | +| Change a value inside a CSS prop | 13.6 ms | 8.63 ms | -37% | :::info -To learn more about runtime performance improvements, [check out this app](https://pigment-css-demo.vercel.app/perf) that compares Pigment CSS, Emotion, and styled-components across a variety of tests. +To reproduce those numbers yourself, check out these live demos and repositories: + +- Emotion + - Live: https://pigment-css-demo.vercel.app/perf + - Source: https://github.com/brijeshb42/emotion-demo +- Pigment CSS + - Live: https://pigment-css-demo.vercel.app/perf + - Source: https://github.com/brijeshb42/pigment-css-landing-page-demo + ::: ### Familiar developer experience diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md index 196e6861b5fba4..60384e99aec3aa 100644 --- a/docs/pages/blog/material-ui-v4-is-out.md +++ b/docs/pages/blog/material-ui-v4-is-out.md @@ -15,7 +15,7 @@ Material UI v4 has finally arrived. We are so excited about this release, as it ![TypeScript switch](/static/blog/material-ui-v4-is-out/banner.png) -

https://mui.com/

+

https://material-ui.com/

## Summary From 90c4624f57efa7a557589bee4cd8a799484e161f Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Thu, 22 Aug 2024 08:26:58 +0700 Subject: [PATCH 2/7] [material-ui] Do not generate CSS variables for a custom spacing function (#43389) --- .../mui-material/src/styles/createThemeWithVars.js | 12 +++++------- packages/mui-material/src/styles/extendTheme.test.js | 12 ++++++++++-- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js index b8adb2deefb75e..026f1b9e6ede5d 100644 --- a/packages/mui-material/src/styles/createThemeWithVars.js +++ b/packages/mui-material/src/styles/createThemeWithVars.js @@ -64,13 +64,11 @@ function getSpacingVal(spacingInput) { if (typeof spacingInput === 'number') { return `${spacingInput}px`; } - if (typeof spacingInput === 'string') { - return spacingInput; - } - if (typeof spacingInput === 'function') { - return getSpacingVal(spacingInput(1)); - } - if (Array.isArray(spacingInput)) { + if ( + typeof spacingInput === 'string' || + typeof spacingInput === 'function' || + Array.isArray(spacingInput) + ) { return spacingInput; } return '8px'; diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js index 00bd6111455fce..94ca22576a7cb0 100644 --- a/packages/mui-material/src/styles/extendTheme.test.js +++ b/packages/mui-material/src/styles/extendTheme.test.js @@ -495,8 +495,16 @@ describe('extendTheme', () => { it('can be customized as a function', () => { const theme = extendTheme({ spacing: (factor) => `${0.25 * factor}rem` }); - expect(theme.vars.spacing).to.deep.equal('var(--mui-spacing, 0.25rem)'); - expect(theme.spacing(2)).to.equal('calc(2 * var(--mui-spacing, 0.25rem))'); + expect('spacing' in theme.vars).to.equal(false); + expect(theme.spacing(2)).to.equal('0.5rem'); + }); + + it('a custom function should not be altered', () => { + const theme = extendTheme({ + spacing: (val) => (val === 'xs' ? '100px' : val), + }); + expect('spacing' in theme.vars).to.equal(false); + expect(theme.spacing('xs')).to.equal('100px'); }); }); From 55bea65c83c1beac77382fe961f8aa72eec21daa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Thu, 22 Aug 2024 10:12:39 +0200 Subject: [PATCH 3/7] 6.0.0-rc.0 (#43388) Co-authored-by: siriwatknp --- CHANGELOG.md | 73 +++++++++ package.json | 2 +- packages-internal/docs-utils/package.json | 2 +- packages-internal/scripts/package.json | 2 +- packages-internal/test-utils/package.json | 2 +- packages/markdown/package.json | 2 +- packages/mui-base/package.json | 2 +- packages/mui-codemod/package.json | 2 +- .../mui-core-downloads-tracker/package.json | 2 +- packages/mui-docs/package.json | 2 +- packages/mui-icons-material/package.json | 2 +- packages/mui-lab/package.json | 2 +- .../mui-material-pigment-css/package.json | 2 +- packages/mui-material/package.json | 2 +- packages/mui-private-theming/package.json | 2 +- packages/mui-styled-engine-sc/package.json | 2 +- packages/mui-styled-engine/package.json | 2 +- packages/mui-styles/package.json | 2 +- packages/mui-system/package.json | 2 +- packages/mui-utils/package.json | 2 +- pnpm-lock.yaml | 151 ++++++++++++++++-- 21 files changed, 233 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e523564c72b86d..38710c8508df2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,78 @@ # [Versions](https://mui.com/versions/) +## 6.0.0-rc.0 + + + +_Aug 22, 2024_ + +A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: + +- ⚡ Rendering performance improvements + +### `@mui/material@6.0.0-rc.0` + +#### Breaking changes + +- [Box] Remove `component` from `BoxOwnProps` (#43384) @DiegoAndai + + The `component` prop has been removed from the `BoxOwnProps` as it is already included in the `Box` type. + This might affect your code if you are using the `styled` function with the `Box` component. + If this is the case, use a `div` element instead of `Box`: + + ```diff + -const StyledBox = styled(Box)` + +const StyledDiv = styled('div')` + color: white; + `; + ``` + + This yields the same end result. + If this doesn't work for you, you can also cast the `styled` returned value to `typeof Box`: + + ```diff + const StyledBox = styled(Box)` + color: white; + -`; + +` as typeof Box; + ``` + +#### Changes + +- [ListItem] Remove unnecessary TypeScript test (#43359) @sai6855 +- Skip generating CSS variables for a custom spacing function (#43389) @siriwatknp +- Revert visual regressions from #42283 (#43364) @ZeeshanTamboli + +### `@mui/codemod@6.0.0-rc.0` + +- Add Grid2 to removeSystemProps codemod (#43302) @DiegoAndai + +### Docs + +- [blog] Add video to the Pigment CSS blog post (#42500) @oliviertassinari +- Fix broken link to milestones (#43379) @oliviertassinari +- Update CSS theme variables related content (#43130) @siriwatknp +- Fix link to createTheme source (#43332) @oliviertassinari +- Add cache to avoid unnecessary jsx dynamic import and theme getting (#43139) @Vxee +- Fix broken link to Next.js docs @oliviertassinari +- [material-ui] Revamp `Composition` guide (#43266) @ZeeshanTamboli +- [material-ui][Menu] Replace `PaperProps` with `slotProps.paper` in demos (#43354) @sai6855 + +### Core + +- [code-infra] Change docs:start script to serve the exports folder (#43375) @Janpot +- [core] Fix typescript-next CI workflow (#43394) @aarongarciah +- [core] Run `@mui/system` TypeScript module augmentation tests in CI (#43386) @ZeeshanTamboli +- [core] Enable manage-package-manager-versions pnpm flag (#43366) @aarongarciah +- [core] Replace `indexOf` with `includes` (#42883) @k-rajat19 +- [docs-infra] Add GitHub source link to components (#43228) @Jay-Karia +- [docs-infra] Fix copy shortcut (#43361) @oliviertassinari +- [perf] Remove theme/styling allocations (#43372) @romgrk +- [perf] Improve `composeClasses` (#43363) @romgrk +- [perf] Remove system allocations (#43306) @romgrk + +All contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @Janpot, @Jay-Karia, @k-rajat19, @oliviertassinari, @rluzists1, @romgrk, @sai6855, @siriwatknp, @Vxee, @ZeeshanTamboli + ## 6.0.0-beta.6 diff --git a/package.json b/package.json index f42e1efd4af805..95f5a49d317b00 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", diff --git a/packages-internal/docs-utils/package.json b/packages-internal/docs-utils/package.json index f45641fbf8d62b..0df8c7d7de9d44 100644 --- a/packages-internal/docs-utils/package.json +++ b/packages-internal/docs-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-docs-utils", - "version": "1.0.10", + "version": "1.0.11", "author": "MUI Team", "description": "Utilities for MUI docs. This is an internal package not meant for general use.", "main": "./build/index.js", diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json index 0d4513e9f8f8f3..48cb443c5a147e 100644 --- a/packages-internal/scripts/package.json +++ b/packages-internal/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-scripts", - "version": "1.0.16", + "version": "1.0.17", "author": "MUI Team", "description": "Utilities supporting MUI libraries build and docs generation. This is an internal package not meant for general use.", "main": "build/index.js", diff --git a/packages-internal/test-utils/package.json b/packages-internal/test-utils/package.json index 469e4fbf198cd9..022bb061c7f1ac 100644 --- a/packages-internal/test-utils/package.json +++ b/packages-internal/test-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-test-utils", - "version": "1.0.8", + "version": "1.0.9", "author": "MUI Team", "description": "Utilities for MUI tests. This is an internal package not meant for general use.", "main": "./build/index.js", diff --git a/packages/markdown/package.json b/packages/markdown/package.json index e2c53895a7bfc4..ad132652d5dfa8 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@mui/internal-markdown", - "version": "1.0.10", + "version": "1.0.11", "author": "MUI Team", "description": "MUI markdown parser. This is an internal package not meant for general use.", "main": "./index.js", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 99eb6ab9a5e462..d1021394b87cd4 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -1,6 +1,6 @@ { "name": "@mui/base", - "version": "5.0.0-beta.57", + "version": "5.0.0-beta.58", "private": false, "author": "MUI Team", "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.", diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 8b28256b6a0cd7..29eadd58315254 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "bin": "./codemod.js", "private": false, "author": "MUI Team", diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index 350022493c40d1..27e390088331b5 100644 --- a/packages/mui-core-downloads-tracker/package.json +++ b/packages/mui-core-downloads-tracker/package.json @@ -1,6 +1,6 @@ { "name": "@mui/core-downloads-tracker", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 8d512b6a8bf1f9..4cf7d41c471cd1 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 8a83ffcbb564ce..58eca5f5436531 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index b1c6f0e47eb71d..1692b91185e3b1 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "6.0.0-beta.6", + "version": "6.0.0-beta.7", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json index 5f46d42ed4b48a..75338b84f8a8a5 100644 --- a/packages/mui-material-pigment-css/package.json +++ b/packages/mui-material-pigment-css/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-pigment-css", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "author": "MUI Team", "description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.", "main": "./src/index.ts", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 13dc98cb5b2d2e..e514f3d33ff358 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.", diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index 83b5ef68e55035..43a3d84af6fdb4 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -1,6 +1,6 @@ { "name": "@mui/private-theming", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.", diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 3524d95aa0c966..8808e946a45c54 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine-sc", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for styled-components.", diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index d4f5850756d797..a499fa3e3d0905 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for emotion.", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 2699ab3a80c597..91db276b339c4b 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styles", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 682991eeff854c..c2045e87d5658b 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 5cb48fdc0fa7fe..e18dcad891ecdb 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/utils", - "version": "6.0.0-beta.6", + "version": "6.0.0-rc.0", "private": false, "author": "MUI Team", "description": "Utility functions for React components.", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aca058fc06b71d..f5694791e7cd7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -358,7 +358,7 @@ importers: version: link:../../packages/mui-utils/build next: specifier: latest - version: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -368,7 +368,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: 0.0.20 - version: 0.0.20(@types/react@18.3.3)(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 0.0.20(@types/react@18.3.3)(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@types/node': specifier: ^18.19.44 version: 18.19.44 @@ -648,7 +648,7 @@ importers: version: 9.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@toolpad/core': specifier: ^0.5.1 - version: 0.5.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/node@18.19.44)(@types/react@18.3.3)(happy-dom@12.10.3)(jsdom@24.0.0)(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.29.2) + version: 0.5.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/node@18.19.44)(@types/react@18.3.3)(happy-dom@12.10.3)(jsdom@24.0.0)(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.29.2) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.41) @@ -735,7 +735,7 @@ importers: version: 5.1.2(@mui/material@packages+mui-material+build)(react@18.3.1) next: specifier: ^14.2.5 - version: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) notistack: specifier: 3.0.1 version: 3.0.1(csstype@3.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1443,7 +1443,7 @@ importers: version: 18.3.3 next: specifier: ^14.2.5 - version: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -1617,7 +1617,7 @@ importers: version: 4.17.21 next: specifier: ^14.2.5 - version: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -4372,6 +4372,9 @@ packages: '@next/env@14.2.5': resolution: {integrity: sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==} + '@next/env@14.2.6': + resolution: {integrity: sha512-bs5DFKV+08EjWrl8EB+KKqev1ZTNONH1vFCaHh911aaB362NnP32UDTbE9VQhyiAgbFqJsfDkSxFERNDDb3j0g==} + '@next/eslint-plugin-next@14.2.5': resolution: {integrity: sha512-LY3btOpPh+OTIpviNojDpUdIbHW9j0JBYBjsIp8IxtDFfYFyORvw3yNq6N231FVqQA7n7lwaf7xHbVJlA1ED7g==} @@ -4381,54 +4384,108 @@ packages: cpu: [arm64] os: [darwin] + '@next/swc-darwin-arm64@14.2.6': + resolution: {integrity: sha512-BtJZb+hYXGaVJJivpnDoi3JFVn80SHKCiiRUW3kk1SY6UCUy5dWFFSbh+tGi5lHAughzeduMyxbLt3pspvXNSg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + '@next/swc-darwin-x64@14.2.5': resolution: {integrity: sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] + '@next/swc-darwin-x64@14.2.6': + resolution: {integrity: sha512-ZHRbGpH6KHarzm6qEeXKSElSXh8dS2DtDPjQt3IMwY8QVk7GbdDYjvV4NgSnDA9huGpGgnyy3tH8i5yHCqVkiQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + '@next/swc-linux-arm64-gnu@14.2.5': resolution: {integrity: sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] + '@next/swc-linux-arm64-gnu@14.2.6': + resolution: {integrity: sha512-O4HqUEe3ZvKshXHcDUXn1OybN4cSZg7ZdwHJMGCXSUEVUqGTJVsOh17smqilIjooP/sIJksgl+1kcf2IWMZWHg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + '@next/swc-linux-arm64-musl@14.2.5': resolution: {integrity: sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] + '@next/swc-linux-arm64-musl@14.2.6': + resolution: {integrity: sha512-xUcdhr2hfalG8RDDGSFxQ75yOG894UlmFS4K2M0jLrUhauRBGOtUOxoDVwiIIuZQwZ3Y5hDsazNjdYGB0cQ9yQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + '@next/swc-linux-x64-gnu@14.2.5': resolution: {integrity: sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + '@next/swc-linux-x64-gnu@14.2.6': + resolution: {integrity: sha512-InosKxw8UMcA/wEib5n2QttwHSKHZHNSbGcMepBM0CTcNwpxWzX32KETmwbhKod3zrS8n1vJ+DuJKbL9ZAB0Ag==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + '@next/swc-linux-x64-musl@14.2.5': resolution: {integrity: sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + '@next/swc-linux-x64-musl@14.2.6': + resolution: {integrity: sha512-d4QXfJmt5pGJ7cG8qwxKSBnO5AXuKAFYxV7qyDRHnUNvY/dgDh+oX292gATpB2AAHgjdHd5ks1wXxIEj6muLUQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + '@next/swc-win32-arm64-msvc@14.2.5': resolution: {integrity: sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] + '@next/swc-win32-arm64-msvc@14.2.6': + resolution: {integrity: sha512-AlgIhk4/G+PzOG1qdF1b05uKTMsuRatFlFzAi5G8RZ9h67CVSSuZSbqGHbJDlcV1tZPxq/d4G0q6qcHDKWf4aQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + '@next/swc-win32-ia32-msvc@14.2.5': resolution: {integrity: sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] + '@next/swc-win32-ia32-msvc@14.2.6': + resolution: {integrity: sha512-hNukAxq7hu4o5/UjPp5jqoBEtrpCbOmnUqZSKNJG8GrUVzfq0ucdhQFVrHcLRMvQcwqqDh1a5AJN9ORnNDpgBQ==} + engines: {node: '>= 10'} + cpu: [ia32] + os: [win32] + '@next/swc-win32-x64-msvc@14.2.5': resolution: {integrity: sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==} engines: {node: '>= 10'} cpu: [x64] os: [win32] + '@next/swc-win32-x64-msvc@14.2.6': + resolution: {integrity: sha512-NANtw+ead1rSDK1jxmzq3TYkl03UNK2KHqUYf1nIhNci6NkeqBD4s1njSzYGIlSHxCK+wSaL8RXZm4v+NF/pMw==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==} @@ -9632,6 +9689,24 @@ packages: sass: optional: true + next@14.2.6: + resolution: {integrity: sha512-57Su7RqXs5CBKKKOagt8gPhMM3CpjgbeQhrtei2KLAA1vTNm7jfKS+uDARkSW8ZETUflDCBIsUKGSyQdRs4U4g==} + engines: {node: '>=18.17.0'} + hasBin: true + peerDependencies: + '@opentelemetry/api': ^1.1.0 + '@playwright/test': ^1.41.2 + react: ^18.2.0 + react-dom: ^18.2.0 + sass: ^1.3.0 + peerDependenciesMeta: + '@opentelemetry/api': + optional: true + '@playwright/test': + optional: true + sass: + optional: true + nice-napi@1.0.2: resolution: {integrity: sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==} os: ['!win32'] @@ -14917,6 +14992,8 @@ snapshots: '@next/env@14.2.5': {} + '@next/env@14.2.6': {} + '@next/eslint-plugin-next@14.2.5': dependencies: glob: 10.3.10 @@ -14924,30 +15001,57 @@ snapshots: '@next/swc-darwin-arm64@14.2.5': optional: true + '@next/swc-darwin-arm64@14.2.6': + optional: true + '@next/swc-darwin-x64@14.2.5': optional: true + '@next/swc-darwin-x64@14.2.6': + optional: true + '@next/swc-linux-arm64-gnu@14.2.5': optional: true + '@next/swc-linux-arm64-gnu@14.2.6': + optional: true + '@next/swc-linux-arm64-musl@14.2.5': optional: true + '@next/swc-linux-arm64-musl@14.2.6': + optional: true + '@next/swc-linux-x64-gnu@14.2.5': optional: true + '@next/swc-linux-x64-gnu@14.2.6': + optional: true + '@next/swc-linux-x64-musl@14.2.5': optional: true + '@next/swc-linux-x64-musl@14.2.6': + optional: true + '@next/swc-win32-arm64-msvc@14.2.5': optional: true + '@next/swc-win32-arm64-msvc@14.2.6': + optional: true + '@next/swc-win32-ia32-msvc@14.2.5': optional: true + '@next/swc-win32-ia32-msvc@14.2.6': + optional: true + '@next/swc-win32-x64-msvc@14.2.5': optional: true + '@next/swc-win32-x64-msvc@14.2.6': + optional: true + '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': optional: true @@ -15380,10 +15484,10 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true - '@pigment-css/nextjs-plugin@0.0.20(@types/react@18.3.3)(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@pigment-css/nextjs-plugin@0.0.20(@types/react@18.3.3)(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@pigment-css/unplugin': 0.0.20(@types/react@18.3.3)(react@18.3.1) - next: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@types/react' - react @@ -16142,7 +16246,7 @@ snapshots: '@theme-ui/css': 0.16.2(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1)) react: 18.3.1 - '@toolpad/core@0.5.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/node@18.19.44)(@types/react@18.3.3)(happy-dom@12.10.3)(jsdom@24.0.0)(next@14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.29.2)': + '@toolpad/core@0.5.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/icons-material@packages+mui-icons-material+build)(@mui/material@packages+mui-material+build)(@types/node@18.19.44)(@types/react@18.3.3)(happy-dom@12.10.3)(jsdom@24.0.0)(next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(terser@5.29.2)': dependencies: '@babel/runtime': 7.25.0 '@mui/icons-material': link:packages/mui-icons-material/build @@ -16155,7 +16259,7 @@ snapshots: prop-types: 15.8.1 react: 18.3.1 optionalDependencies: - next: 14.2.5(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + next: 14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@edge-runtime/vm' - '@emotion/react' @@ -21658,6 +21762,33 @@ snapshots: - '@babel/core' - babel-plugin-macros + next@14.2.6(@babel/core@7.25.2)(@opentelemetry/api@1.8.0)(@playwright/test@1.46.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@next/env': 14.2.6 + '@swc/helpers': 0.5.5 + busboy: 1.6.0 + caniuse-lite: 1.0.30001649 + graceful-fs: 4.2.11 + postcss: 8.4.31 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + styled-jsx: 5.1.1(@babel/core@7.25.2)(babel-plugin-macros@3.1.0)(react@18.3.1) + optionalDependencies: + '@next/swc-darwin-arm64': 14.2.6 + '@next/swc-darwin-x64': 14.2.6 + '@next/swc-linux-arm64-gnu': 14.2.6 + '@next/swc-linux-arm64-musl': 14.2.6 + '@next/swc-linux-x64-gnu': 14.2.6 + '@next/swc-linux-x64-musl': 14.2.6 + '@next/swc-win32-arm64-msvc': 14.2.6 + '@next/swc-win32-ia32-msvc': 14.2.6 + '@next/swc-win32-x64-msvc': 14.2.6 + '@opentelemetry/api': 1.8.0 + '@playwright/test': 1.46.1 + transitivePeerDependencies: + - '@babel/core' + - babel-plugin-macros + nice-napi@1.0.2: dependencies: node-addon-api: 3.2.1 From af6a7488078a324b12fabc7b30894242cc462f64 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Thu, 22 Aug 2024 09:31:18 -0300 Subject: [PATCH 4/7] [material-ui][docs] Refine templates theme selector (#43396) --- .../getting-started/templates/blog/Blog.js | 68 ++------- .../getting-started/templates/blog/Blog.tsx | 68 ++------- .../getting-started/templates/blog/NavBar.js | 100 +++++++++++++ .../getting-started/templates/blog/NavBar.tsx | 107 ++++++++++++++ .../templates/blog/components/AppAppBar.js | 19 +-- .../templates/blog/components/AppAppBar.tsx | 18 +-- .../templates/blog/components/MainContent.js | 27 +++- .../templates/blog/components/MainContent.tsx | 27 +++- .../templates/checkout/Checkout.js | 132 +++--------------- .../templates/checkout/Checkout.tsx | 131 +++-------------- .../templates/checkout/NavBar.js | 100 +++++++++++++ .../templates/checkout/NavBar.tsx | 107 ++++++++++++++ .../checkout/{ => components}/AddressForm.js | 0 .../checkout/{ => components}/AddressForm.tsx | 0 .../checkout/{ => components}/Info.js | 0 .../checkout/{ => components}/Info.tsx | 0 .../checkout/{ => components}/InfoMobile.js | 0 .../checkout/{ => components}/InfoMobile.tsx | 0 .../checkout/{ => components}/PaymentForm.js | 0 .../checkout/{ => components}/PaymentForm.tsx | 0 .../checkout/{ => components}/Review.js | 0 .../checkout/{ => components}/Review.tsx | 0 .../checkout/{ => components}/SitemarkIcon.js | 2 +- .../{ => components}/SitemarkIcon.tsx | 2 +- .../{ => components}/ToggleColorMode.js | 1 + .../{ => components}/ToggleColorMode.tsx | 1 + .../templates/dashboard/Dashboard.js | 23 +-- .../templates/dashboard/Dashboard.tsx | 23 +-- .../templates/dashboard/NavBar.js | 101 ++++++++++++++ .../templates/dashboard/NavBar.tsx | 108 ++++++++++++++ .../components/{Navbar.js => AppNavbar.js} | 18 +-- .../components/{Navbar.tsx => AppNavbar.tsx} | 17 +-- .../templates/dashboard/components/Header.js | 18 +-- .../templates/dashboard/components/Header.tsx | 15 +- .../dashboard/components/SideMenu.js | 2 + .../dashboard/components/SideMenu.tsx | 2 + .../dashboard/components/SideMenuMobile.js | 7 +- .../dashboard/components/SideMenuMobile.tsx | 12 +- .../templates/marketing-page/MarketingPage.js | 63 ++------- .../marketing-page/MarketingPage.tsx | 63 ++------- .../templates/marketing-page/NavBar.js | 100 +++++++++++++ .../templates/marketing-page/NavBar.tsx | 107 ++++++++++++++ .../marketing-page/components/AppAppBar.js | 19 +-- .../marketing-page/components/AppAppBar.tsx | 18 +-- .../marketing-page/components/Hero.js | 1 + .../marketing-page/components/Hero.tsx | 1 + .../templates/sign-in-side/NavBar.js | 100 +++++++++++++ .../templates/sign-in-side/NavBar.tsx | 107 ++++++++++++++ .../templates/sign-in-side/SignInSide.js | 91 ++---------- .../templates/sign-in-side/SignInSide.tsx | 91 ++---------- .../templates/sign-in-side/ToggleColorMode.js | 1 + .../sign-in-side/ToggleColorMode.tsx | 1 + .../templates/sign-in/NavBar.js | 100 +++++++++++++ .../templates/sign-in/NavBar.tsx | 107 ++++++++++++++ .../templates/sign-in/SignIn.js | 90 ++---------- .../templates/sign-in/SignIn.tsx | 90 ++---------- .../templates/sign-in/ToggleColorMode.js | 1 + .../templates/sign-in/ToggleColorMode.tsx | 1 + .../templates/sign-up/NavBar.js | 100 +++++++++++++ .../templates/sign-up/NavBar.tsx | 107 ++++++++++++++ .../templates/sign-up/SignUp.js | 91 ++---------- .../templates/sign-up/SignUp.tsx | 91 ++---------- .../templates/sign-up/ToggleColorMode.js | 1 + .../templates/sign-up/ToggleColorMode.tsx | 1 + 64 files changed, 1700 insertions(+), 1099 deletions(-) create mode 100644 docs/data/material/getting-started/templates/blog/NavBar.js create mode 100644 docs/data/material/getting-started/templates/blog/NavBar.tsx create mode 100644 docs/data/material/getting-started/templates/checkout/NavBar.js create mode 100644 docs/data/material/getting-started/templates/checkout/NavBar.tsx rename docs/data/material/getting-started/templates/checkout/{ => components}/AddressForm.js (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/AddressForm.tsx (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/Info.js (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/Info.tsx (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/InfoMobile.js (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/InfoMobile.tsx (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/PaymentForm.js (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/PaymentForm.tsx (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/Review.js (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/Review.tsx (100%) rename docs/data/material/getting-started/templates/checkout/{ => components}/SitemarkIcon.js (98%) rename docs/data/material/getting-started/templates/checkout/{ => components}/SitemarkIcon.tsx (98%) rename docs/data/material/getting-started/templates/checkout/{ => components}/ToggleColorMode.js (97%) rename docs/data/material/getting-started/templates/checkout/{ => components}/ToggleColorMode.tsx (97%) create mode 100644 docs/data/material/getting-started/templates/dashboard/NavBar.js create mode 100644 docs/data/material/getting-started/templates/dashboard/NavBar.tsx rename docs/data/material/getting-started/templates/dashboard/components/{Navbar.js => AppNavbar.js} (86%) rename docs/data/material/getting-started/templates/dashboard/components/{Navbar.tsx => AppNavbar.tsx} (87%) create mode 100644 docs/data/material/getting-started/templates/marketing-page/NavBar.js create mode 100644 docs/data/material/getting-started/templates/marketing-page/NavBar.tsx create mode 100644 docs/data/material/getting-started/templates/sign-in-side/NavBar.js create mode 100644 docs/data/material/getting-started/templates/sign-in-side/NavBar.tsx create mode 100644 docs/data/material/getting-started/templates/sign-in/NavBar.js create mode 100644 docs/data/material/getting-started/templates/sign-in/NavBar.tsx create mode 100644 docs/data/material/getting-started/templates/sign-up/NavBar.js create mode 100644 docs/data/material/getting-started/templates/sign-up/NavBar.tsx diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js index 3080d885ee7221..3ac0e5712394db 100644 --- a/docs/data/material/getting-started/templates/blog/Blog.js +++ b/docs/data/material/getting-started/templates/blog/Blog.js @@ -1,65 +1,15 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import CssBaseline from '@mui/material/CssBaseline'; -import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { createTheme, ThemeProvider } from '@mui/material/styles'; - -import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded'; - import AppAppBar from './components/AppAppBar'; import MainContent from './components/MainContent'; import Latest from './components/Latest'; import Footer from './components/Footer'; +import NavBar from './NavBar'; import getBlogTheme from './theme/getBlogTheme'; -function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { - return ( - - - - - Custom theme - - - Material Design 2 - - - - ); -} - -ToggleCustomTheme.propTypes = { - showCustomTheme: PropTypes.shape({ - valueOf: PropTypes.func.isRequired, - }).isRequired, - toggleCustomTheme: PropTypes.func.isRequired, -}; - export default function Blog() { const [mode, setMode] = React.useState('light'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); @@ -85,6 +35,7 @@ export default function Blog() { setMode(newMode); localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage }; + const toggleCustomTheme = () => { setShowCustomTheme((prev) => !prev); }; @@ -92,20 +43,23 @@ export default function Blog() { return ( - + {/* you can delete this NavBar component since it's just no navigate to other pages */} + +