diff --git a/apps/local-ui-lib/package.json b/apps/local-ui-lib/package.json index 5171ceed5e70b8..66f3077adca4dc 100644 --- a/apps/local-ui-lib/package.json +++ b/apps/local-ui-lib/package.json @@ -3,6 +3,6 @@ "version": "0.0.1", "private": true, "dependencies": { - "@pigment-css/react": "^0.0.13" + "@pigment-css/react": "^0.0.16" } } diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 8e04aed38ed3e9..1bdc678cdbf0e3 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -9,7 +9,7 @@ "clean": "rimraf .next" }, "dependencies": { - "@pigment-css/react": "^0.0.13", + "@pigment-css/react": "^0.0.16", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/lab": "workspace:^", @@ -24,7 +24,7 @@ "next": "latest" }, "devDependencies": { - "@pigment-css/nextjs-plugin": "^0.0.14", + "@pigment-css/nextjs-plugin": "^0.0.16", "@types/node": "^20.5.7", "@types/react": "^18.2.55", "@types/react-dom": "^18.3.0", diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-container/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-container/page.tsx new file mode 100644 index 00000000000000..29f358acebe6db --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-container/page.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/PigmentContainer'; + +export default function ContainerPage() { + return ( + +
+

Fixed Container

+
+ + + +
+
+
+

Simple Container

+
+ + + +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx new file mode 100644 index 00000000000000..95d73163427a61 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/PigmentGrid'; +import { styled } from '@pigment-css/react'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function GridPage() { + return ( + +
+

Basic Grid

+
+ + + + xs=8 + + + xs=4 + + + xs=4 + + + xs=8 + + + +
+
+
+

Columns Grid

+
+ + + + xs=8 + + + xs=8 + + + +
+
+
+

Responsive Grid

+
+ + + {Array.from(Array(6)).map((_, index) => ( + + xs=2 + + ))} + + +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx new file mode 100644 index 00000000000000..4c541461688a3f --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import Divider from '@mui/material/Divider'; +import Paper from '@mui/material/Paper'; +import Stack from '@mui/material/PigmentStack'; +import { styled } from '@pigment-css/react'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function StackPage() { + return ( + +
+

Basic Stack

+
+ + Item 1 + Item 2 + Item 3 + +
+
+
+

Divider Stack

+
+ } spacing={2}> + Item 1 + Item 2 + Item 3 + +
+
+
+

Responsive Stack

+
+ + Item 1 + Item 2 + Item 3 + +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx index 0a9b3811f9974d..9b5daea6b2749e 100644 --- a/apps/pigment-css-next-app/src/app/page.tsx +++ b/apps/pigment-css-next-app/src/app/page.tsx @@ -1,5 +1,8 @@ import Image from 'next/image'; import { styled, css } from '@pigment-css/react'; +import PigmentStack from '@mui/material/PigmentStack'; +import PigmentContainer from '@mui/material/PigmentContainer'; +import PigmentHidden from '@mui/material/PigmentHidden'; import styles from './page.module.css'; const visuallyHidden = css({ @@ -91,92 +94,101 @@ const Description = styled.div({ export default function Home() { return ( -
-
I am invisible
- -

- Get started by editing  - src/app/page.tsx -

-
- - By{' '} + + +
+ +
Test
+
Test
+
Test
+ +
I am invisible
+ +

+ Get started by editing  + src/app/page.tsx +

+
+ + By{' '} + Vercel Logo + +
+ + +
Vercel Logo - -
- - -
- Next.js Logo -
+
-
- -

- Docs -> -

-

Find in-depth information about Next.js features and API.

- +
+ +

+ Docs -> +

+

Find in-depth information about Next.js features and API.

+ - -

- Learn -> -

-

Learn about Next.js in an interactive course with quizzes!

- + +

+ Learn -> +

+

Learn about Next.js in an interactive course with quizzes!

+ - -

- Templates -> -

-

Explore the Next.js 13 playground.

- + +

+ Templates -> +

+

Explore the Next.js 13 playground.

+ - -

- Deploy -> -

-

Instantly deploy your Next.js site to a shareable URL with Vercel.

- -
-
+ +

+ Deploy -> +

+

Instantly deploy your Next.js site to a shareable URL with Vercel.

+ + + + + ); } diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index dae2d664aa2454..4f48388ce9d5a0 100644 --- a/apps/pigment-css-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -9,7 +9,7 @@ "build": "vite build" }, "dependencies": { - "@pigment-css/react": "^0.0.13", + "@pigment-css/react": "^0.0.16", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/lab": "workspace:^", @@ -27,7 +27,7 @@ "devDependencies": { "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", - "@pigment-css/vite-plugin": "^0.0.13", + "@pigment-css/vite-plugin": "^0.0.16", "@types/react": "^18.2.55", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", diff --git a/docs/data/material/components/container/container.md b/docs/data/material/components/container/container.md index c585be2d5e869b..89d84bcde96a0f 100644 --- a/docs/data/material/components/container/container.md +++ b/docs/data/material/components/container/container.md @@ -1,7 +1,7 @@ --- productId: material-ui title: React Container component -components: Container +components: Container, PigmentContainer githubLabel: 'component: Container' --- diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md index 9027f29218cd76..8159a29db601b1 100644 --- a/docs/data/material/components/grid2/grid2.md +++ b/docs/data/material/components/grid2/grid2.md @@ -1,6 +1,7 @@ --- productId: material-ui title: React Grid component +components: PigmentGrid githubLabel: 'component: Grid' materialDesign: https://m2.material.io/design/layout/understanding-layout.html --- diff --git a/docs/data/material/components/hidden/hidden.md b/docs/data/material/components/hidden/hidden.md index d1e62eb96deac6..767f500da24623 100644 --- a/docs/data/material/components/hidden/hidden.md +++ b/docs/data/material/components/hidden/hidden.md @@ -2,7 +2,7 @@ productId: material-ui title: React Hidden component description: The Hidden component is deprecated, check out the migration guide for more details. -components: Hidden +components: Hidden, PigmentHidden githubLabel: 'component: Hidden' --- diff --git a/docs/data/material/components/stack/stack.md b/docs/data/material/components/stack/stack.md index 6ab6a6db2a419f..c85249440829e6 100644 --- a/docs/data/material/components/stack/stack.md +++ b/docs/data/material/components/stack/stack.md @@ -1,7 +1,7 @@ --- productId: material-ui title: React Stack component -components: Stack +components: Stack, PigmentStack githubLabel: 'component: Stack' --- diff --git a/docs/data/material/pagesApi.js b/docs/data/material/pagesApi.js index 7bb6fe6df78aa8..377857c79e5dff 100644 --- a/docs/data/material/pagesApi.js +++ b/docs/data/material/pagesApi.js @@ -80,6 +80,10 @@ module.exports = [ { pathname: '/material-ui/api/pagination' }, { pathname: '/material-ui/api/pagination-item' }, { pathname: '/material-ui/api/paper' }, + { pathname: '/material-ui/api/pigment-container' }, + { pathname: '/material-ui/api/pigment-grid' }, + { pathname: '/material-ui/api/pigment-hidden' }, + { pathname: '/material-ui/api/pigment-stack' }, { pathname: '/material-ui/api/popover' }, { pathname: '/material-ui/api/popper' }, { pathname: '/material-ui/api/radio' }, diff --git a/docs/pages/material-ui/api/pigment-container.js b/docs/pages/material-ui/api/pigment-container.js new file mode 100644 index 00000000000000..aefeab0eb60f9f --- /dev/null +++ b/docs/pages/material-ui/api/pigment-container.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './pigment-container.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/pigment-container', + false, + /\.\/pigment-container.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/material-ui/api/pigment-container.json b/docs/pages/material-ui/api/pigment-container.json new file mode 100644 index 00000000000000..6ae3b5e82d37ad --- /dev/null +++ b/docs/pages/material-ui/api/pigment-container.json @@ -0,0 +1,32 @@ +{ + "props": { + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "disableGutters": { "type": { "name": "bool" }, "default": "false" }, + "fixed": { "type": { "name": "bool" }, "default": "false" }, + "maxWidth": { + "type": { + "name": "enum", + "description": "'lg'
| 'md'
| 'sm'
| 'xl'
| 'xs'
| false" + }, + "default": "'lg'" + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + } + }, + "name": "PigmentContainer", + "imports": [ + "import PigmentContainer from '@mui/material/PigmentContainer';", + "import { PigmentContainer } from '@mui/material';" + ], + "classes": [], + "muiName": "MuiPigmentContainer", + "filename": "/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/material-ui/api/pigment-grid.js b/docs/pages/material-ui/api/pigment-grid.js new file mode 100644 index 00000000000000..2bffa857c20998 --- /dev/null +++ b/docs/pages/material-ui/api/pigment-grid.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './pigment-grid.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/pigment-grid', + false, + /\.\/pigment-grid.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/material-ui/api/pigment-grid.json b/docs/pages/material-ui/api/pigment-grid.json new file mode 100644 index 00000000000000..2932f5752dc897 --- /dev/null +++ b/docs/pages/material-ui/api/pigment-grid.json @@ -0,0 +1,69 @@ +{ + "props": { + "children": { "type": { "name": "node" } }, + "columns": { + "type": { + "name": "union", + "description": "Array<number>
| number
| object" + }, + "default": "12" + }, + "columnSpacing": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| object
| string" + } + }, + "container": { "type": { "name": "bool" }, "default": "false" }, + "direction": { + "type": { + "name": "union", + "description": "'column'
| 'column-reverse'
| 'row'
| 'row-reverse'
| Array<'column'
| 'column-reverse'
| 'row'
| 'row-reverse'>
| object" + }, + "default": "'row'" + }, + "offset": { + "type": { + "name": "union", + "description": "Array<number>
| number
| object" + } + }, + "rowSpacing": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| object
| string" + } + }, + "size": { + "type": { + "name": "union", + "description": "Array<number>
| number
| object" + } + }, + "spacing": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| object
| string" + }, + "default": "0" + }, + "wrap": { + "type": { + "name": "enum", + "description": "'nowrap'
| 'wrap-reverse'
| 'wrap'" + }, + "default": "'wrap'" + } + }, + "name": "PigmentGrid", + "imports": [ + "import PigmentGrid from '@mui/material/PigmentGrid';", + "import { PigmentGrid } from '@mui/material';" + ], + "classes": [], + "muiName": "MuiPigmentGrid", + "filename": "/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/material-ui/api/pigment-hidden.js b/docs/pages/material-ui/api/pigment-hidden.js new file mode 100644 index 00000000000000..644fd9bb4ddd26 --- /dev/null +++ b/docs/pages/material-ui/api/pigment-hidden.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './pigment-hidden.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/pigment-hidden', + false, + /\.\/pigment-hidden.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/material-ui/api/pigment-hidden.json b/docs/pages/material-ui/api/pigment-hidden.json new file mode 100644 index 00000000000000..577a02ebe804b6 --- /dev/null +++ b/docs/pages/material-ui/api/pigment-hidden.json @@ -0,0 +1,42 @@ +{ + "props": { + "children": { "type": { "name": "node" } }, + "implementation": { + "type": { "name": "enum", "description": "'css'
| 'js'" }, + "default": "'js'" + }, + "initialWidth": { + "type": { + "name": "enum", + "description": "'lg'
| 'md'
| 'sm'
| 'xl'
| 'xs'" + } + }, + "lgDown": { "type": { "name": "bool" }, "default": "false" }, + "lgUp": { "type": { "name": "bool" }, "default": "false" }, + "mdDown": { "type": { "name": "bool" }, "default": "false" }, + "mdUp": { "type": { "name": "bool" }, "default": "false" }, + "only": { + "type": { + "name": "union", + "description": "'lg'
| 'md'
| 'sm'
| 'xl'
| 'xs'
| Array<'lg'
| 'md'
| 'sm'
| 'xl'
| 'xs'>" + } + }, + "smDown": { "type": { "name": "bool" }, "default": "false" }, + "smUp": { "type": { "name": "bool" }, "default": "false" }, + "xlDown": { "type": { "name": "bool" }, "default": "false" }, + "xlUp": { "type": { "name": "bool" }, "default": "false" }, + "xsDown": { "type": { "name": "bool" }, "default": "false" }, + "xsUp": { "type": { "name": "bool" }, "default": "false" } + }, + "name": "PigmentHidden", + "imports": [ + "import PigmentHidden from '@mui/material/PigmentHidden';", + "import { PigmentHidden } from '@mui/material';" + ], + "classes": [], + "muiName": "MuiPigmentHidden", + "filename": "/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/material-ui/api/pigment-stack.js b/docs/pages/material-ui/api/pigment-stack.js new file mode 100644 index 00000000000000..47d4892cfa198d --- /dev/null +++ b/docs/pages/material-ui/api/pigment-stack.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './pigment-stack.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/pigment-stack', + false, + /\.\/pigment-stack.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/material-ui/api/pigment-stack.json b/docs/pages/material-ui/api/pigment-stack.json new file mode 100644 index 00000000000000..02aafc2d4a936f --- /dev/null +++ b/docs/pages/material-ui/api/pigment-stack.json @@ -0,0 +1,38 @@ +{ + "props": { + "children": { "type": { "name": "node" } }, + "direction": { + "type": { + "name": "union", + "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| { lg?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row', md?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row', sm?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row', xl?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row', xs?: 'column-reverse'
| 'column'
| 'row-reverse'
| 'row' }" + }, + "default": "'column'" + }, + "divider": { "type": { "name": "node" } }, + "spacing": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| { lg?: number
| string, md?: number
| string, sm?: number
| string, xl?: number
| string, xs?: number
| string }
| string" + }, + "default": "0" + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + } + }, + "name": "PigmentStack", + "imports": [ + "import PigmentStack from '@mui/material/PigmentStack';", + "import { PigmentStack } from '@mui/material';" + ], + "classes": [], + "muiName": "MuiPigmentStack", + "filename": "/packages/mui-material/src/PigmentStack/PigmentStack.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/translations/api-docs/pigment-container/pigment-container.json b/docs/translations/api-docs/pigment-container/pigment-container.json new file mode 100644 index 00000000000000..f890b94fca3865 --- /dev/null +++ b/docs/translations/api-docs/pigment-container/pigment-container.json @@ -0,0 +1,19 @@ +{ + "componentDescription": "", + "propDescriptions": { + "classes": { "description": "Override or extend the styles applied to the component." }, + "disableGutters": { + "description": "If true, the left and right padding is removed." + }, + "fixed": { + "description": "Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default." + }, + "maxWidth": { + "description": "Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth." + }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles." + } + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/pigment-grid/pigment-grid.json b/docs/translations/api-docs/pigment-grid/pigment-grid.json new file mode 100644 index 00000000000000..a25e109d10f8e4 --- /dev/null +++ b/docs/translations/api-docs/pigment-grid/pigment-grid.json @@ -0,0 +1,28 @@ +{ + "componentDescription": "", + "propDescriptions": { + "children": { "description": "The content of the component." }, + "columns": { "description": "The number of columns." }, + "columnSpacing": { + "description": "Defines the horizontal space between the type item components. It overrides the value of the spacing prop." + }, + "container": { + "description": "If true, the component will have the flex container behavior. You should be wrapping items with a container." + }, + "direction": { + "description": "Defines the flex-direction style property. It is applied for all screen sizes." + }, + "offset": { "description": "Defines the offset of the grid." }, + "rowSpacing": { + "description": "Defines the vertical space between the type item components. It overrides the value of the spacing prop." + }, + "size": { "description": "Defines the column size of the grid." }, + "spacing": { + "description": "Defines the space between the type item components. It can only be used on a type container component." + }, + "wrap": { + "description": "Defines the flex-wrap style property. It's applied for all screen sizes." + } + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/pigment-hidden/pigment-hidden.json b/docs/translations/api-docs/pigment-hidden/pigment-hidden.json new file mode 100644 index 00000000000000..bd79d32a2e3711 --- /dev/null +++ b/docs/translations/api-docs/pigment-hidden/pigment-hidden.json @@ -0,0 +1,44 @@ +{ + "componentDescription": "", + "propDescriptions": { + "children": { "description": "The content of the component." }, + "implementation": { + "description": "Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering." + }, + "initialWidth": { + "description": "You can use this prop when choosing the js implementation with server-side rendering.
As window.innerWidth is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use a heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint" + }, + "lgDown": { + "description": "If true, component is hidden on screens below (but not including) this size." + }, + "lgUp": { + "description": "If true, component is hidden on screens this size and above." + }, + "mdDown": { + "description": "If true, component is hidden on screens below (but not including) this size." + }, + "mdUp": { + "description": "If true, component is hidden on screens this size and above." + }, + "only": { "description": "Hide the given breakpoint(s)." }, + "smDown": { + "description": "If true, component is hidden on screens below (but not including) this size." + }, + "smUp": { + "description": "If true, component is hidden on screens this size and above." + }, + "xlDown": { + "description": "If true, component is hidden on screens below (but not including) this size." + }, + "xlUp": { + "description": "If true, component is hidden on screens this size and above." + }, + "xsDown": { + "description": "If true, component is hidden on screens below (but not including) this size." + }, + "xsUp": { + "description": "If true, component is hidden on screens this size and above." + } + }, + "classDescriptions": {} +} diff --git a/docs/translations/api-docs/pigment-stack/pigment-stack.json b/docs/translations/api-docs/pigment-stack/pigment-stack.json new file mode 100644 index 00000000000000..f7269641da25bf --- /dev/null +++ b/docs/translations/api-docs/pigment-stack/pigment-stack.json @@ -0,0 +1,15 @@ +{ + "componentDescription": "", + "propDescriptions": { + "children": { "description": "The content of the component." }, + "direction": { + "description": "Defines the flex-direction style property. It is applied for all screen sizes." + }, + "divider": { "description": "Add an element between each child." }, + "spacing": { "description": "Defines the space between immediate children." }, + "sx": { + "description": "The system prop, which allows defining system overrides as well as additional CSS styles." + } + }, + "classDescriptions": {} +} diff --git a/package.json b/package.json index 5b02c2c11513a6..aec14635e1b56e 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "@mui/utils": "workspace:^", "@next/eslint-plugin-next": "^14.2.4", "@octokit/rest": "^20.1.1", - "@pigment-css/react": "^0.0.13", + "@pigment-css/react": "^0.0.16", "@playwright/test": "1.44.1", "@types/enzyme": "^3.10.18", "@types/fs-extra": "^11.0.4", diff --git a/packages/api-docs-builder-core/materialUi/projectSettings.ts b/packages/api-docs-builder-core/materialUi/projectSettings.ts index ccac4f8f7dfd69..45b4b8ec90041a 100644 --- a/packages/api-docs-builder-core/materialUi/projectSettings.ts +++ b/packages/api-docs-builder-core/materialUi/projectSettings.ts @@ -16,7 +16,13 @@ export const projectSettings: ProjectSettings = { { name: 'material', rootPath: path.join(process.cwd(), 'packages/mui-material'), - entryPointPath: 'src/index.d.ts', + entryPointPath: [ + 'src/index.d.ts', + 'src/PigmentStack/PigmentStack.tsx', + 'src/PigmentContainer/PigmentContainer.tsx', + 'src/PigmentHidden/PigmentHidden.tsx', + 'src/PigmentGrid/PigmentGrid.tsx', + ], }, { name: 'lab', diff --git a/packages/api-docs-builder/utils/createTypeScriptProject.ts b/packages/api-docs-builder/utils/createTypeScriptProject.ts index ba3b64e54df3c2..2965e6a9b063aa 100644 --- a/packages/api-docs-builder/utils/createTypeScriptProject.ts +++ b/packages/api-docs-builder/utils/createTypeScriptProject.ts @@ -22,9 +22,14 @@ export interface CreateTypeScriptProjectOptions { /** * File used as root of the package. * This property is used to gather the exports of the project. - * The path must be relative to the root path. + * + * Use an array to target more than one entrypoint. + * + * @example 'src/index.d.ts' + * @example ['src/index.d.ts', 'src/PigmentStack/PigmentStack.tsx'] + * `PigmentStack` cannot be included in the `index.d.ts` file because it is using Pigment CSS specific API. */ - entryPointPath?: string; + entryPointPath?: string | string[]; /** * Files to include in the project. * By default, it will use the files defined in the tsconfig. @@ -77,16 +82,30 @@ export const createTypeScriptProject = ( const checker = program.getTypeChecker(); - let exports: TypeScriptProject['exports']; + let exports: TypeScriptProject['exports'] = {}; if (inputEntryPointPath) { - const entryPointPath = path.join(rootPath, inputEntryPointPath); - const sourceFile = program.getSourceFile(entryPointPath); - - exports = Object.fromEntries( - checker.getExportsOfModule(checker.getSymbolAtLocation(sourceFile!)!).map((symbol) => { - return [symbol.name, symbol]; - }), - ); + const arrayEntryPointPath = Array.isArray(inputEntryPointPath) + ? inputEntryPointPath + : [inputEntryPointPath]; + arrayEntryPointPath.forEach((entry) => { + const entryPointPath = path.join(rootPath, entry); + const sourceFile = program.getSourceFile(entryPointPath); + + const pathData = path.parse(entryPointPath); + + exports = { + ...exports, + ...Object.fromEntries( + checker.getExportsOfModule(checker.getSymbolAtLocation(sourceFile!)!).map((symbol) => { + return [symbol.name, symbol]; + }), + ), + ...(pathData.name !== 'index' && { + // use the default export when the entrypoint is not `index`. + [pathData.name]: checker.getSymbolAtLocation(sourceFile!)!, + }), + }; + }); } else { exports = {}; } diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 4f34ee48e82a28..7edd600adc791e 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -78,6 +78,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", + "@pigment-css/react": "^0.0.16", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" @@ -91,6 +92,9 @@ }, "@emotion/styled": { "optional": true + }, + "@pigment-css/react": { + "optional": true } }, "sideEffects": false, diff --git a/packages/mui-material/src/Hidden/hiddenCssClasses.js b/packages/mui-material/src/Hidden/hiddenCssClasses.ts similarity index 89% rename from packages/mui-material/src/Hidden/hiddenCssClasses.js rename to packages/mui-material/src/Hidden/hiddenCssClasses.ts index 123f9ba4b66230..bc120f1adb71ff 100644 --- a/packages/mui-material/src/Hidden/hiddenCssClasses.js +++ b/packages/mui-material/src/Hidden/hiddenCssClasses.ts @@ -1,7 +1,7 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; -export function getHiddenCssUtilityClass(slot) { +export function getHiddenCssUtilityClass(slot: string) { return generateUtilityClass('PrivateHiddenCss', slot); } diff --git a/packages/mui-material/src/PigmentContainer/PigmentContainer.spec.tsx b/packages/mui-material/src/PigmentContainer/PigmentContainer.spec.tsx new file mode 100644 index 00000000000000..8a51c5ebab07df --- /dev/null +++ b/packages/mui-material/src/PigmentContainer/PigmentContainer.spec.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Container from '@mui/material/PigmentContainer'; + +; +; +; +; +; + +// @ts-expect-error `maxWidth` is not a valid prop +; diff --git a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx new file mode 100644 index 00000000000000..2753a263b034b1 --- /dev/null +++ b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx @@ -0,0 +1,156 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { OverridableComponent, OverrideProps } from '@mui/types'; +// @ts-ignore +import Container from '@pigment-css/react/Container'; +import capitalize from '@mui/utils/capitalize'; +import composeClasses from '@mui/utils/composeClasses'; +import generateUtilityClass from '@mui/utils/generateUtilityClass'; +import { SxProps, Breakpoint } from '@mui/system'; +import { Theme } from '../styles'; +import { ContainerClasses } from '../Container/containerClasses'; + +export interface PigmentContainerOwnProps { + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the left and right padding is removed. + * @default false + */ + disableGutters?: boolean; + /** + * Set the max-width to match the min-width of the current breakpoint. + * This is useful if you'd prefer to design for a fixed set of sizes + * instead of trying to accommodate a fully fluid viewport. + * It's fluid by default. + * @default false + */ + fixed?: boolean; + /** + * Determine the max-width of the container. + * The container width grows with the size of the screen. + * Set to `false` to disable `maxWidth`. + * @default 'lg' + */ + maxWidth?: Breakpoint | false; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface PigmentContainerTypeMap< + AdditionalProps = {}, + RootComponent extends React.ElementType = 'div', +> { + props: AdditionalProps & PigmentContainerOwnProps; + defaultComponent: RootComponent; +} + +export type PigmentContainerProps< + RootComponent extends React.ElementType = PigmentContainerTypeMap['defaultComponent'], + AdditionalProps = {}, +> = OverrideProps, RootComponent> & { + component?: React.ElementType; +}; + +const useUtilityClasses = (ownerState: PigmentContainerOwnProps) => { + const { classes, fixed, disableGutters, maxWidth } = ownerState; + + const slots = { + root: [ + 'root', + maxWidth && `maxWidth${capitalize(String(maxWidth))}`, + fixed && 'fixed', + disableGutters && 'disableGutters', + ], + }; + + return composeClasses(slots, (slot) => generateUtilityClass('MuiContainer', slot), classes); +}; +/** + * + * Demos: + * + * - [Container](https://next.mui.com/material-ui/react-container/) + * + * API: + * + * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/) + */ +const PigmentContainer = React.forwardRef(function PigmentContainer( + { className, disableGutters = false, fixed = false, maxWidth = 'lg', ...props }, + ref, +) { + const ownerState = { + ...props, + disableGutters, + fixed, + maxWidth, + }; + const classes = useUtilityClasses(ownerState); + return ( + + ); +}) as OverridableComponent; + +PigmentContainer.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * @ignore + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * If `true`, the left and right padding is removed. + * @default false + */ + disableGutters: PropTypes.bool, + /** + * Set the max-width to match the min-width of the current breakpoint. + * This is useful if you'd prefer to design for a fixed set of sizes + * instead of trying to accommodate a fully fluid viewport. + * It's fluid by default. + * @default false + */ + fixed: PropTypes.bool, + /** + * Determine the max-width of the container. + * The container width grows with the size of the screen. + * Set to `false` to disable `maxWidth`. + * @default 'lg' + */ + maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), +} as any; + +export default PigmentContainer; diff --git a/packages/mui-material/src/PigmentContainer/index.ts b/packages/mui-material/src/PigmentContainer/index.ts new file mode 100644 index 00000000000000..67dad4c894ebe3 --- /dev/null +++ b/packages/mui-material/src/PigmentContainer/index.ts @@ -0,0 +1,3 @@ +export { default } from './PigmentContainer'; +export * from './PigmentContainer'; +export { default as containerClasses } from '../Container/containerClasses'; diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.spec.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.spec.tsx new file mode 100644 index 00000000000000..eaaa1bd40f56ba --- /dev/null +++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.spec.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Grid from '@mui/material/PigmentGrid'; + +; +; +; + +// @ts-expect-error `size` is not a valid prop +; + +; +; +; +; +; +; +; +; diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx new file mode 100644 index 00000000000000..fad246bc48cb0f --- /dev/null +++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx @@ -0,0 +1,289 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import { OverridableComponent, OverrideProps } from '@mui/types'; +import { SxProps } from '@mui/system'; +// @ts-ignore +import Grid from '@pigment-css/react/Grid'; +import composeClasses from '@mui/utils/composeClasses'; +import generateUtilityClass from '@mui/utils/generateUtilityClass'; +import { + generateDirectionClasses, + generateSizeClassNames, + generateSpacingClassNames, +} from '@mui/system/Unstable_Grid/gridGenerator'; +import { Breakpoint, Theme } from '../styles'; + +type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null }; + +export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; + +export type GridSpacing = number | string; + +export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse'; + +export type GridSize = 'auto' | 'grow' | number; + +export interface GridBaseProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * The number of columns. + * @default 12 + */ + columns?: ResponsiveStyleValue; + /** + * Defines the horizontal space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + columnSpacing?: ResponsiveStyleValue; + /** + * If `true`, the component will have the flex *container* behavior. + * You should be wrapping *items* with a *container*. + * @default false + */ + container?: boolean; + /** + * Defines the `flex-direction` style property. + * It is applied for all screen sizes. + * @default 'row' + */ + direction?: ResponsiveStyleValue; + /** + * Defines the offset of the grid. + */ + offset?: ResponsiveStyleValue | undefined; + /** + * @internal + * The level of the grid starts from `0` + * and increases when the grid nests inside another grid regardless of container or item. + * + * ```js + * // level 0 + * // level 1 + * // level 2 + * // level 1 + * ``` + * + * Only consecutive grid is considered nesting. + * A grid container will start at `0` if there are non-Grid element above it. + * + * ```js + * // level 0 + *
+ * // level 0 + * // level 1 + * ``` + */ + unstable_level?: number; + /** + * Defines the vertical space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + rowSpacing?: ResponsiveStyleValue; + /** + * Defines the space between the type `item` components. + * It can only be used on a type `container` component. + * @default 0 + */ + spacing?: ResponsiveStyleValue | undefined; + /** + * Defines the column size of the grid. + */ + size?: ResponsiveStyleValue | undefined; + /** + * Defines the `flex-wrap` style property. + * It's applied for all screen sizes. + * @default 'wrap' + */ + wrap?: GridWrap; +} + +export interface GridTypeMap< + AdditionalProps = {}, + DefaultComponent extends React.ElementType = 'div', +> { + props: AdditionalProps & GridBaseProps & { sx?: SxProps }; + defaultComponent: DefaultComponent; +} + +export type GridProps< + RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], + AdditionalProps = { + component?: React.ElementType; + }, +> = OverrideProps, RootComponent>; + +const useUtilityClasses = (ownerState: GridBaseProps) => { + const { container, direction, size, spacing } = ownerState; + let gridSize = {}; + if (size) { + if (Array.isArray(size)) { + size.forEach((value, index) => { + gridSize = { ...gridSize, [index]: value }; + }); + } + if (typeof size === 'object') { + gridSize = size; + } + } + const slots = { + root: [ + 'root', + container && 'container', + ...generateDirectionClasses(direction), + ...generateSizeClassNames(gridSize), + ...(container ? generateSpacingClassNames(spacing) : []), + ], + }; + + return composeClasses(slots, (slot: string) => generateUtilityClass('MuiGrid2', slot), {}); +}; +/** + * + * Demos: + * + * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/) + * + * API: + * + * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/) + */ +const PigmentGrid = React.forwardRef(function PigmentGrid(props, ref) { + const { className, ...other } = props; + + const classes = useUtilityClasses(props); + + return ; +}) as OverridableComponent; + +PigmentGrid.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The number of columns. + * @default 12 + */ + columns: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.number), + PropTypes.number, + PropTypes.object, + ]), + /** + * Defines the horizontal space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + columnSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.number, + PropTypes.object, + PropTypes.string, + ]), + /** + * If `true`, the component will have the flex *container* behavior. + * You should be wrapping *items* with a *container*. + * @default false + */ + container: PropTypes.bool, + /** + * Defines the `flex-direction` style property. + * It is applied for all screen sizes. + * @default 'row' + */ + direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']), + PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])), + PropTypes.object, + ]), + /** + * Defines the offset of the grid. + */ + offset: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.number), + PropTypes.number, + PropTypes.object, + ]), + /** + * Defines the vertical space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + rowSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.number, + PropTypes.object, + PropTypes.string, + ]), + /** + * Defines the column size of the grid. + */ + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.number), + PropTypes.number, + PropTypes.object, + ]), + /** + * Defines the space between the type `item` components. + * It can only be used on a type `container` component. + * @default 0 + */ + spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), + PropTypes.number, + PropTypes.object, + PropTypes.string, + ]), + /** + * @ignore + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + /** + * @internal + * The level of the grid starts from `0` + * and increases when the grid nests inside another grid regardless of container or item. + * + * ```js + * // level 0 + * // level 1 + * // level 2 + * // level 1 + * ``` + * + * Only consecutive grid is considered nesting. + * A grid container will start at `0` if there are non-Grid element above it. + * + * ```js + * // level 0 + *
+ * // level 0 + * // level 1 + * ``` + */ + unstable_level: PropTypes.number, + /** + * Defines the `flex-wrap` style property. + * It's applied for all screen sizes. + * @default 'wrap' + */ + wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']), +} as any; + +// @ts-ignore internal logic for nested grid +PigmentGrid.muiName = 'Grid'; + +export default PigmentGrid; diff --git a/packages/mui-material/src/PigmentGrid/index.ts b/packages/mui-material/src/PigmentGrid/index.ts new file mode 100644 index 00000000000000..9be62559663f67 --- /dev/null +++ b/packages/mui-material/src/PigmentGrid/index.ts @@ -0,0 +1,3 @@ +export { default } from './PigmentGrid'; +export * from './PigmentGrid'; +export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes'; diff --git a/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx b/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx new file mode 100644 index 00000000000000..7f33f5fc3abe5a --- /dev/null +++ b/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx @@ -0,0 +1,360 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { Breakpoint } from '@mui/system'; +// @ts-ignore +import Hidden from '@pigment-css/react/Hidden'; +import capitalize from '@mui/utils/capitalize'; +import composeClasses from '@mui/utils/composeClasses'; +import HiddenJs from '../Hidden/HiddenJs'; +import { getHiddenCssUtilityClass } from '../Hidden/hiddenCssClasses'; +import { useTheme } from '../zero-styled'; + +export interface HiddenProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Specify which implementation to use. 'js' is the default, 'css' works better for + * server-side rendering. + * @default 'js' + */ + implementation?: 'js' | 'css'; + /** + * You can use this prop when choosing the `js` implementation with server-side rendering. + * + * As `window.innerWidth` is unavailable on the server, + * we default to rendering an empty component during the first mount. + * You might want to use a heuristic to approximate + * the screen width of the client browser screen width. + * + * For instance, you could be using the user-agent or the client-hints. + * https://caniuse.com/#search=client%20hint + */ + initialWidth?: Breakpoint; + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + lgDown?: boolean; + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + lgUp?: boolean; + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + mdDown?: boolean; + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + mdUp?: boolean; + /** + * Hide the given breakpoint(s). + */ + only?: Breakpoint | Breakpoint[]; + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + smDown?: boolean; + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + smUp?: boolean; + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + xlDown?: boolean; + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + xlUp?: boolean; + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + xsDown?: boolean; + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + xsUp?: boolean; +} + +const useUtilityClasses = (ownerState: { + classes: Record; + breakpoints: Array<{ breakpoint: string; dir: string }>; +}) => { + const { classes, breakpoints } = ownerState; + + const slots = { + root: [ + 'root', + ...breakpoints.map(({ breakpoint, dir }) => { + return dir === 'only' + ? `${dir}${capitalize(breakpoint)}` + : `${breakpoint}${capitalize(dir)}`; + }), + ], + }; + + return composeClasses(slots, getHiddenCssUtilityClass, classes); +}; + +function HiddenCss(props: HiddenProps & { className?: string }) { + const theme = useTheme(); + const { children, className, only, ...other } = props; + + if (process.env.NODE_ENV !== 'production') { + const unknownProps = Object.keys(other).filter((propName) => { + const isUndeclaredBreakpoint = !theme.breakpoints.keys.some((breakpoint) => { + return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName; + }); + return !['classes', 'theme', 'isRtl', 'sx'].includes(propName) && isUndeclaredBreakpoint; + }); + + if (unknownProps.length > 0) { + console.error( + `MUI: Unsupported props received by \`\`: ${unknownProps.join( + ', ', + )}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`, + ); + } + } + + const breakpoints = []; + + for (let i = 0; i < theme.breakpoints.keys.length; i += 1) { + const breakpoint = theme.breakpoints.keys[i]; + const breakpointUp = other[`${breakpoint}Up`]; + const breakpointDown = other[`${breakpoint}Down`]; + + if (breakpointUp) { + breakpoints.push({ breakpoint, dir: 'up' }); + } + if (breakpointDown) { + breakpoints.push({ breakpoint, dir: 'down' }); + } + } + + if (only) { + const onlyBreakpoints = Array.isArray(only) ? only : [only]; + onlyBreakpoints.forEach((breakpoint) => { + breakpoints.push({ breakpoint, dir: 'only' }); + }); + } + + const ownerState = { + ...props, + classes: {}, + breakpoints, + }; + + const classes = useUtilityClasses(ownerState); + + return ; +} + +HiddenCss.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * The content of the component. + */ + children: PropTypes.node, + className: PropTypes.string, + /** + * Specify which implementation to use. 'js' is the default, 'css' works better for + * server-side rendering. + * @default 'js' + */ + implementation: PropTypes.oneOf(['css', 'js']), + /** + * You can use this prop when choosing the `js` implementation with server-side rendering. + * + * As `window.innerWidth` is unavailable on the server, + * we default to rendering an empty component during the first mount. + * You might want to use a heuristic to approximate + * the screen width of the client browser screen width. + * + * For instance, you could be using the user-agent or the client-hints. + * https://caniuse.com/#search=client%20hint + */ + initialWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + lgDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + lgUp: PropTypes.bool, + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + mdDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + mdUp: PropTypes.bool, + /** + * Hide the given breakpoint(s). + */ + only: PropTypes.oneOfType([ + PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), + PropTypes.arrayOf(PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired), + ]), + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + smDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + smUp: PropTypes.bool, + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + xlDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + xlUp: PropTypes.bool, + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + xsDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + xsUp: PropTypes.bool, +} as any; +/** + * + * Demos: + * + * - [Hidden](https://next.mui.com/material-ui/react-hidden/) + * + * API: + * + * - [PigmentHidden API](https://next.mui.com/material-ui/api/pigment-hidden/) + */ +function PigmentHidden({ implementation = 'js', ...props }: HiddenProps & { className?: string }) { + if (implementation === 'js') { + return ; + } + return ; +} + +PigmentHidden.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * @ignore + */ + className: PropTypes.string, + /** + * Specify which implementation to use. 'js' is the default, 'css' works better for + * server-side rendering. + * @default 'js' + */ + implementation: PropTypes.oneOf(['css', 'js']), + /** + * You can use this prop when choosing the `js` implementation with server-side rendering. + * + * As `window.innerWidth` is unavailable on the server, + * we default to rendering an empty component during the first mount. + * You might want to use a heuristic to approximate + * the screen width of the client browser screen width. + * + * For instance, you could be using the user-agent or the client-hints. + * https://caniuse.com/#search=client%20hint + */ + initialWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + lgDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + lgUp: PropTypes.bool, + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + mdDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + mdUp: PropTypes.bool, + /** + * Hide the given breakpoint(s). + */ + only: PropTypes.oneOfType([ + PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), + PropTypes.arrayOf(PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired), + ]), + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + smDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + smUp: PropTypes.bool, + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + xlDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + xlUp: PropTypes.bool, + /** + * If `true`, component is hidden on screens below (but not including) this size. + * @default false + */ + xsDown: PropTypes.bool, + /** + * If `true`, component is hidden on screens this size and above. + * @default false + */ + xsUp: PropTypes.bool, +} as any; + +export default PigmentHidden; diff --git a/packages/mui-material/src/PigmentHidden/index.ts b/packages/mui-material/src/PigmentHidden/index.ts new file mode 100644 index 00000000000000..e1f538b8e05939 --- /dev/null +++ b/packages/mui-material/src/PigmentHidden/index.ts @@ -0,0 +1,2 @@ +export { default } from './PigmentHidden'; +export * from './PigmentHidden'; diff --git a/packages/mui-material/src/PigmentStack/PigmentStack.spec.tsx b/packages/mui-material/src/PigmentStack/PigmentStack.spec.tsx new file mode 100644 index 00000000000000..1ff0b3f2eb37a9 --- /dev/null +++ b/packages/mui-material/src/PigmentStack/PigmentStack.spec.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Stack from '@mui/material/PigmentStack'; + +; +; +; +; +; +; +} />; + +// @ts-expect-error `spacing` is not a valid prop +; diff --git a/packages/mui-material/src/PigmentStack/PigmentStack.tsx b/packages/mui-material/src/PigmentStack/PigmentStack.tsx new file mode 100644 index 00000000000000..fcf8ee052300d3 --- /dev/null +++ b/packages/mui-material/src/PigmentStack/PigmentStack.tsx @@ -0,0 +1,136 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { OverridableComponent, OverrideProps } from '@mui/types'; +// @ts-ignore +import Stack from '@pigment-css/react/Stack'; +import composeClasses from '@mui/utils/composeClasses'; +import generateUtilityClass from '@mui/utils/generateUtilityClass'; +import { SxProps } from '@mui/system'; +import { Breakpoint, Theme } from '../styles'; + +type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null }; + +export interface PigmentStackOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Defines the `flex-direction` style property. + * It is applied for all screen sizes. + * @default 'column' + */ + direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>; + /** + * Defines the space between immediate children. + * @default 0 + */ + spacing?: ResponsiveStyleValue; + /** + * Add an element between each child. + */ + divider?: React.ReactNode; + /** + * The system prop, which allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface PigmentStackTypeMap< + AdditionalProps = {}, + RootComponent extends React.ElementType = 'div', +> { + props: AdditionalProps & PigmentStackOwnProps; + defaultComponent: RootComponent; +} + +export type PigmentStackProps< + RootComponent extends React.ElementType = PigmentStackTypeMap['defaultComponent'], + AdditionalProps = {}, +> = OverrideProps, RootComponent> & { + component?: React.ElementType; +}; + +const useUtilityClasses = () => { + const slots = { + root: ['root'], + }; + + return composeClasses(slots, (slot) => generateUtilityClass('MuiStack', slot), {}); +}; +/** + * + * Demos: + * + * - [Stack](https://next.mui.com/material-ui/react-stack/) + * + * API: + * + * - [PigmentStack API](https://next.mui.com/material-ui/api/pigment-stack/) + */ +const PigmentStack = React.forwardRef(function PigmentStack({ className, ...props }, ref) { + const classes = useUtilityClasses(); + return ; +}) as OverridableComponent; + +PigmentStack.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * @ignore + */ + className: PropTypes.string, + /** + * Defines the `flex-direction` style property. + * It is applied for all screen sizes. + * @default 'column' + */ + direction: PropTypes.oneOfType([ + PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), + PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), + PropTypes.shape({ + lg: PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), + md: PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), + sm: PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), + xl: PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), + xs: PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), + }), + ]), + /** + * Add an element between each child. + */ + divider: PropTypes.node, + /** + * Defines the space between immediate children. + * @default 0 + */ + spacing: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), + PropTypes.number, + PropTypes.shape({ + lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + md: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + xs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + }), + PropTypes.string, + ]), + /** + * The system prop, which allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), +} as any; + +export default PigmentStack; diff --git a/packages/mui-material/src/PigmentStack/index.ts b/packages/mui-material/src/PigmentStack/index.ts new file mode 100644 index 00000000000000..f5cd721d163d91 --- /dev/null +++ b/packages/mui-material/src/PigmentStack/index.ts @@ -0,0 +1,3 @@ +export { default } from './PigmentStack'; +export * from './PigmentStack'; +export { default as stackClasses } from '../Stack/stackClasses'; diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts index e581d210707784..679fb0b08d9b5d 100644 --- a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts +++ b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts @@ -116,7 +116,7 @@ export const generateGridColumnsStyles = ({ theme, ownerState }: Props) => { traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => { appendStyle(styles, { [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value }); }); - return styles; + return styles as Record; }; export const generateGridRowSpacingStyles = ({ theme, ownerState }: Props) => { diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts index e028e5625b25d4..b8f78490bcada1 100644 --- a/packages/rsc-builder/buildRsc.ts +++ b/packages/rsc-builder/buildRsc.ts @@ -24,6 +24,9 @@ const PROJECTS: Project[] = [ rootPath: path.join(process.cwd(), 'packages/mui-material'), ignorePaths: [ 'packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // RSC compatible + 'packages/mui-material/src/PigmentContainer/PigmentContainer.tsx', // RSC compatible + 'packages/mui-material/src/PigmentGrid/PigmentGrid.tsx', // RSC compatible + 'packages/mui-material/src/PigmentStack/PigmentStack.tsx', // RSC compatible ], }, { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac55e4b6b11299..cac070271d8339 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,8 +105,8 @@ importers: specifier: ^20.1.1 version: 20.1.1 '@pigment-css/react': - specifier: ^0.0.13 - version: 0.0.13(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.16 + version: 0.0.16(@types/react@18.2.55)(react@18.2.0) '@playwright/test': specifier: 1.44.1 version: 1.44.1 @@ -327,8 +327,8 @@ importers: apps/local-ui-lib: dependencies: '@pigment-css/react': - specifier: ^0.0.13 - version: 0.0.13(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.16 + version: 0.0.16(@types/react@18.2.55)(react@18.2.0) apps/pigment-css-next-app: dependencies: @@ -357,8 +357,8 @@ importers: specifier: workspace:^ version: link:../../packages/mui-utils/build '@pigment-css/react': - specifier: ^0.0.13 - version: 0.0.13(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.16 + version: 0.0.16(@types/react@18.2.55)(react@18.2.0) local-ui-lib: specifier: workspace:^ version: link:../local-ui-lib @@ -373,8 +373,8 @@ importers: version: 18.2.0(react@18.2.0) devDependencies: '@pigment-css/nextjs-plugin': - specifier: ^0.0.14 - version: 0.0.14(@types/react@18.2.55)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0) + specifier: ^0.0.16 + version: 0.0.16(@types/react@18.2.55)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0) '@types/node': specifier: ^18.19.39 version: 18.19.39 @@ -412,8 +412,8 @@ importers: specifier: workspace:^ version: link:../../packages/mui-utils/build '@pigment-css/react': - specifier: ^0.0.13 - version: 0.0.13(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.16 + version: 0.0.16(@types/react@18.2.55)(react@18.2.0) clsx: specifier: ^2.1.1 version: 2.1.1 @@ -443,8 +443,8 @@ importers: specifier: ^7.24.7 version: 7.24.7(@babel/core@7.24.7) '@pigment-css/vite-plugin': - specifier: ^0.0.13 - version: 0.0.13(@types/react@18.2.55)(react@18.2.0)(vite@5.3.1(@types/node@18.19.39)(terser@5.29.2)) + specifier: ^0.0.16 + version: 0.0.16(@types/react@18.2.55)(react@18.2.0)(vite@5.3.1(@types/node@18.19.39)(terser@5.29.2)) '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -1735,6 +1735,9 @@ importers: '@mui/utils': specifier: workspace:^ version: link:../mui-utils/build + '@pigment-css/react': + specifier: ^0.0.16 + version: 0.0.16(@types/react@18.2.55)(react@18.2.0) '@types/react-transition-group': specifier: ^4.4.10 version: 4.4.10 @@ -4655,21 +4658,21 @@ packages: resolution: {integrity: sha512-ZDjMJJQRlyk8A1KZFCc+bCbsyrn1wTwdNt56F7twdfUfnHUZUq77/WfONCj8p72NZOyP7pNTdUWSTYC3GTbuuQ==} engines: {node: '>=14'} - '@pigment-css/nextjs-plugin@0.0.14': - resolution: {integrity: sha512-aGRpUnXrJi7jbdHddh1cVeVXeiYvglXQQhpzxJ1grr1f9RovGcyuEx3zADgEG3nZB1TGL6t2zdOUvgz4bCWIyQ==} + '@pigment-css/nextjs-plugin@0.0.16': + resolution: {integrity: sha512-uwOgM6txECakseZkCOtILPgO0wlDl6wCcsvYl9jWDoeoQOAzLHsO0YSuEJmdirOeGjRGlqxjUcpxa9YfuiUSBQ==} peerDependencies: next: ^12.0.0 || ^13.0.0 || ^14.0.0 - '@pigment-css/react@0.0.13': - resolution: {integrity: sha512-oMFp4u9nLbDpRqvm9o65v0ZgectslIT0Z5k6nz0qhU8vU0ifNAXuKlfe5kD5UOfHcqaEHvy7+6uvoj/YAzdFBw==} + '@pigment-css/react@0.0.16': + resolution: {integrity: sha512-hi4Qd5ZRgxR82VPv2ilHTimf9Aspir40B05rcmtKSWbVCNLakk5/uxLOgSuf1xDSxhXv5Q5ZVXTEdAaLCZjwzw==} peerDependencies: react: ^17.0.0 || ^18.0.0 - '@pigment-css/unplugin@0.0.14': - resolution: {integrity: sha512-oRAHxBiK7sZ8njZukJQJJdLJ2m26641S2GpnKbKLKV6KQa3TgdsZY34jzEG8iyWB4fBbW9JbLfloSruFncoSrg==} + '@pigment-css/unplugin@0.0.16': + resolution: {integrity: sha512-T+mE5p4IaSF1WXMm+0Qct4njD2FijByN73L67/7863ZQw5Cmi3ZH6zJNrJGk0gkEcDcDxq4RNUlYA1jM1q5shA==} - '@pigment-css/vite-plugin@0.0.13': - resolution: {integrity: sha512-O6O82vzuyOeqCG8sDbETik7g8ZbR53NVlYvFLDvrB1kxZ0k9dAhV5VCgi1hac+FHPwSsV7bQ+dg1pcMz40l2xA==} + '@pigment-css/vite-plugin@0.0.16': + resolution: {integrity: sha512-9rrF9YArCrvTbBvlEt0/9XWllYZJiJICn3O0VeUJ2JGKAtng37MXbtSIsi1q4eFmAUMKWTW2AFz3YyQPqeTMsg==} peerDependencies: vite: ^4.0.0 || ^5.0.0 @@ -15425,16 +15428,16 @@ snapshots: '@opentelemetry/semantic-conventions@1.25.1': {} - '@pigment-css/nextjs-plugin@0.0.14(@types/react@18.2.55)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)': + '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.2.55)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)': dependencies: - '@pigment-css/unplugin': 0.0.14(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/unplugin': 0.0.16(@types/react@18.2.55)(react@18.2.0) next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) transitivePeerDependencies: - '@types/react' - react - supports-color - '@pigment-css/react@0.0.13(@types/react@18.2.55)(react@18.2.0)': + '@pigment-css/react@0.0.16(@types/react@18.2.55)(react@18.2.0)': dependencies: '@babel/core': 7.24.7 '@babel/helper-module-imports': 7.24.7 @@ -15462,10 +15465,10 @@ snapshots: - '@types/react' - supports-color - '@pigment-css/unplugin@0.0.14(@types/react@18.2.55)(react@18.2.0)': + '@pigment-css/unplugin@0.0.16(@types/react@18.2.55)(react@18.2.0)': dependencies: '@babel/core': 7.24.7 - '@pigment-css/react': 0.0.13(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/react': 0.0.16(@types/react@18.2.55)(react@18.2.0) '@wyw-in-js/shared': 0.5.3 '@wyw-in-js/transform': 0.5.3 babel-plugin-define-var: 0.1.0 @@ -15475,11 +15478,11 @@ snapshots: - react - supports-color - '@pigment-css/vite-plugin@0.0.13(@types/react@18.2.55)(react@18.2.0)(vite@5.3.1(@types/node@18.19.39)(terser@5.29.2))': + '@pigment-css/vite-plugin@0.0.16(@types/react@18.2.55)(react@18.2.0)(vite@5.3.1(@types/node@18.19.39)(terser@5.29.2))': dependencies: '@babel/core': 7.24.7 '@babel/preset-typescript': 7.24.7(@babel/core@7.24.7) - '@pigment-css/react': 0.0.13(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/react': 0.0.16(@types/react@18.2.55)(react@18.2.0) '@wyw-in-js/shared': 0.5.3 '@wyw-in-js/transform': 0.5.3 babel-plugin-define-var: 0.1.0