From ace922b7713999863df9efa3784e22444f8d99dd Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 24 Jul 2024 16:38:08 +0700 Subject: [PATCH 1/3] export unstable_createBreakpoints --- packages/mui-material/src/styles/index.d.ts | 1 + packages/mui-material/src/styles/index.js | 1 + .../mui-material/src/styles/stringifyTheme.test.ts | 11 +++++------ packages/mui-material/src/styles/stringifyTheme.ts | 3 +-- packages/mui-system/src/Stack/createStack.tsx | 2 +- .../src/Unstable_Grid/gridGenerator.test.js | 2 +- .../mui-system/src/Unstable_Grid/gridGenerator.ts | 2 +- .../src/Unstable_Grid/traverseBreakpoints.test.ts | 2 +- .../src/Unstable_Grid/traverseBreakpoints.ts | 2 +- packages/mui-system/src/breakpoints/breakpoints.d.ts | 2 +- .../createBreakpoints.d.ts | 0 .../createBreakpoints.js | 0 .../createBreakpoints.test.js | 0 packages/mui-system/src/createBreakpoints/index.d.ts | 2 ++ packages/mui-system/src/createBreakpoints/index.js | 2 ++ packages/mui-system/src/createTheme/createTheme.d.ts | 8 ++++++-- packages/mui-system/src/createTheme/createTheme.js | 2 +- packages/mui-system/src/createTheme/index.js | 2 +- .../src/cssContainerQueries/cssContainerQueries.ts | 2 +- packages/mui-system/src/index.d.ts | 4 ++-- packages/mui-system/src/index.js | 2 +- 21 files changed, 30 insertions(+), 22 deletions(-) rename packages/mui-system/src/{createTheme => createBreakpoints}/createBreakpoints.d.ts (100%) rename packages/mui-system/src/{createTheme => createBreakpoints}/createBreakpoints.js (100%) rename packages/mui-system/src/{createTheme => createBreakpoints}/createBreakpoints.test.js (100%) create mode 100644 packages/mui-system/src/createBreakpoints/index.d.ts create mode 100644 packages/mui-system/src/createBreakpoints/index.js diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts index ebbe6ab89a9e76..f866cd09a96116 100644 --- a/packages/mui-material/src/styles/index.d.ts +++ b/packages/mui-material/src/styles/index.d.ts @@ -66,6 +66,7 @@ export { StyledEngineProvider, SxProps, } from '@mui/system'; +export { unstable_createBreakpoints } from '@mui/system/createBreakpoints'; // TODO: Remove this function in v6. // eslint-disable-next-line @typescript-eslint/naming-convention export function experimental_sx(): any; diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js index a6169843ff0c62..ce4948840d5acd 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -18,6 +18,7 @@ export { css, keyframes, } from '@mui/system'; +export { unstable_createBreakpoints } from '@mui/system/createBreakpoints'; // TODO: Remove this function in v6. // eslint-disable-next-line @typescript-eslint/naming-convention export function experimental_sx() { diff --git a/packages/mui-material/src/styles/stringifyTheme.test.ts b/packages/mui-material/src/styles/stringifyTheme.test.ts index ef2f0dcf99eab9..8831a59eedf9c0 100644 --- a/packages/mui-material/src/styles/stringifyTheme.test.ts +++ b/packages/mui-material/src/styles/stringifyTheme.test.ts @@ -9,8 +9,8 @@ describe('StringifyTheme', () => { breakpoints: theme.breakpoints, transitions: theme.transitions, }); - expect(result).to.equal(`import { createBreakpoints } from '@mui/system'; -import { createTransitions } from '@mui/material/styles'; + expect(result).to + .equal(`import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles'; const theme = { "breakpoints": { @@ -78,8 +78,8 @@ export default theme;`); breakpoints: theme.breakpoints, transitions: theme.transitions, }); - expect(result).to.equal(`import { createBreakpoints } from '@mui/system'; -import { createTransitions } from '@mui/material/styles'; + expect(result).to + .equal(`import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles'; const theme = { "breakpoints": { @@ -128,8 +128,7 @@ export default theme;`); it('works with framework toRuntimeSource', () => { const theme = { palette: { primary: { main: '#ff5252' } }, toRuntimeSource: stringifyTheme }; expect(theme.toRuntimeSource.call(theme, theme)).to - .equal(`import { createBreakpoints } from '@mui/system'; -import { createTransitions } from '@mui/material/styles'; + .equal(`import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles'; const theme = { "palette": { diff --git a/packages/mui-material/src/styles/stringifyTheme.ts b/packages/mui-material/src/styles/stringifyTheme.ts index 1b56359482fa3d..26a95573b1bd94 100644 --- a/packages/mui-material/src/styles/stringifyTheme.ts +++ b/packages/mui-material/src/styles/stringifyTheme.ts @@ -50,8 +50,7 @@ export function stringifyTheme(baseTheme: Record = {}) { serializeTheme(serializableTheme); - return `import { createBreakpoints } from '@mui/system'; -import { createTransitions } from '@mui/material/styles'; + return `import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles'; const theme = ${JSON.stringify(serializableTheme, null, 2)}; diff --git a/packages/mui-system/src/Stack/createStack.tsx b/packages/mui-system/src/Stack/createStack.tsx index 0f1f9659ebb952..f2a3c1b57e9f69 100644 --- a/packages/mui-system/src/Stack/createStack.tsx +++ b/packages/mui-system/src/Stack/createStack.tsx @@ -12,7 +12,7 @@ import createTheme from '../createTheme'; import { CreateMUIStyled } from '../createStyled'; import { StackTypeMap, StackOwnerState } from './StackProps'; import type { Breakpoint } from '../createTheme'; -import { Breakpoints } from '../createTheme/createBreakpoints'; +import { Breakpoints } from '../createBreakpoints/createBreakpoints'; import { handleBreakpoints, mergeBreakpointsInOrder, diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js b/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js index 0a578dedac2d84..95222dbdf8843b 100644 --- a/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js +++ b/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js @@ -1,7 +1,7 @@ import { expect } from 'chai'; import sinon from 'sinon'; import createSpacing from '../createTheme/createSpacing'; -import createBreakpoints from '../createTheme/createBreakpoints'; +import createBreakpoints from '../createBreakpoints/createBreakpoints'; import { generateGridStyles, generateGridSizeStyles, diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts index 2a70149eb55778..935c2a78857c89 100644 --- a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts +++ b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts @@ -1,4 +1,4 @@ -import { Breakpoints } from '../createTheme/createBreakpoints'; +import { Breakpoints } from '../createBreakpoints/createBreakpoints'; import { Spacing } from '../createTheme/createSpacing'; import { ResponsiveStyleValue } from '../styleFunctionSx'; import { GridDirection, GridOwnerState } from './GridProps'; diff --git a/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.test.ts b/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.test.ts index 191d6ac4880c47..12bcd04f5f3189 100644 --- a/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.test.ts +++ b/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.test.ts @@ -1,5 +1,5 @@ import { expect } from 'chai'; -import createBreakpoints from '../createTheme/createBreakpoints'; +import createBreakpoints from '../createBreakpoints/createBreakpoints'; import { traverseBreakpoints, filterBreakpointKeys } from './traverseBreakpoints'; const breakpoints = createBreakpoints({}); diff --git a/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.ts b/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.ts index 9c8909d3f5dd54..c117df14800454 100644 --- a/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.ts +++ b/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.ts @@ -1,4 +1,4 @@ -import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints'; +import { Breakpoints, Breakpoint } from '../createBreakpoints/createBreakpoints'; export const filterBreakpointKeys = (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => breakpointsKeys.filter((key: string) => responsiveKeys.includes(key)); diff --git a/packages/mui-system/src/breakpoints/breakpoints.d.ts b/packages/mui-system/src/breakpoints/breakpoints.d.ts index 2bee2d95489e11..09f951f821d98b 100644 --- a/packages/mui-system/src/breakpoints/breakpoints.d.ts +++ b/packages/mui-system/src/breakpoints/breakpoints.d.ts @@ -1,5 +1,5 @@ import { CSSObject } from '@mui/styled-engine'; -import { Breakpoints } from '../createTheme/createBreakpoints'; +import { Breakpoints } from '../createBreakpoints/createBreakpoints'; import type { Breakpoint } from '../createTheme'; import { ResponsiveStyleValue } from '../styleFunctionSx'; import { StyleFunction } from '../Box'; diff --git a/packages/mui-system/src/createTheme/createBreakpoints.d.ts b/packages/mui-system/src/createBreakpoints/createBreakpoints.d.ts similarity index 100% rename from packages/mui-system/src/createTheme/createBreakpoints.d.ts rename to packages/mui-system/src/createBreakpoints/createBreakpoints.d.ts diff --git a/packages/mui-system/src/createTheme/createBreakpoints.js b/packages/mui-system/src/createBreakpoints/createBreakpoints.js similarity index 100% rename from packages/mui-system/src/createTheme/createBreakpoints.js rename to packages/mui-system/src/createBreakpoints/createBreakpoints.js diff --git a/packages/mui-system/src/createTheme/createBreakpoints.test.js b/packages/mui-system/src/createBreakpoints/createBreakpoints.test.js similarity index 100% rename from packages/mui-system/src/createTheme/createBreakpoints.test.js rename to packages/mui-system/src/createBreakpoints/createBreakpoints.test.js diff --git a/packages/mui-system/src/createBreakpoints/index.d.ts b/packages/mui-system/src/createBreakpoints/index.d.ts new file mode 100644 index 00000000000000..ef7396cc6f4376 --- /dev/null +++ b/packages/mui-system/src/createBreakpoints/index.d.ts @@ -0,0 +1,2 @@ +/** This export is intended for internal integration with Pigment CSS */ +export { default as unstable_createBreakpoints } from './createBreakpoints'; diff --git a/packages/mui-system/src/createBreakpoints/index.js b/packages/mui-system/src/createBreakpoints/index.js new file mode 100644 index 00000000000000..ef7396cc6f4376 --- /dev/null +++ b/packages/mui-system/src/createBreakpoints/index.js @@ -0,0 +1,2 @@ +/** This export is intended for internal integration with Pigment CSS */ +export { default as unstable_createBreakpoints } from './createBreakpoints'; diff --git a/packages/mui-system/src/createTheme/createTheme.d.ts b/packages/mui-system/src/createTheme/createTheme.d.ts index ad215cec97a15f..66eea69f4ba8c4 100644 --- a/packages/mui-system/src/createTheme/createTheme.d.ts +++ b/packages/mui-system/src/createTheme/createTheme.d.ts @@ -1,12 +1,16 @@ import { CSSObject } from '@mui/styled-engine'; -import { Breakpoints, BreakpointsOptions } from './createBreakpoints'; +import { Breakpoints, BreakpointsOptions } from '../createBreakpoints/createBreakpoints'; import { Shape, ShapeOptions } from './shape'; import { Spacing, SpacingOptions } from './createSpacing'; import { SxConfig, SxProps } from '../styleFunctionSx'; import { ApplyStyles } from './applyStyles'; import { CssContainerQueries } from '../cssContainerQueries'; -export { Breakpoint, Breakpoints, BreakpointOverrides } from './createBreakpoints'; +export { + Breakpoint, + Breakpoints, + BreakpointOverrides, +} from '../createBreakpoints/createBreakpoints'; export type Direction = 'ltr' | 'rtl'; diff --git a/packages/mui-system/src/createTheme/createTheme.js b/packages/mui-system/src/createTheme/createTheme.js index dce4ff93cc428d..abc7a42bd5cc6a 100644 --- a/packages/mui-system/src/createTheme/createTheme.js +++ b/packages/mui-system/src/createTheme/createTheme.js @@ -1,5 +1,5 @@ import deepmerge from '@mui/utils/deepmerge'; -import createBreakpoints from './createBreakpoints'; +import createBreakpoints from '../createBreakpoints/createBreakpoints'; import cssContainerQueries from '../cssContainerQueries'; import shape from './shape'; import createSpacing from './createSpacing'; diff --git a/packages/mui-system/src/createTheme/index.js b/packages/mui-system/src/createTheme/index.js index 069e60c60e5b13..d5355a70e45185 100644 --- a/packages/mui-system/src/createTheme/index.js +++ b/packages/mui-system/src/createTheme/index.js @@ -1,3 +1,3 @@ export { default } from './createTheme'; -export { default as private_createBreakpoints } from './createBreakpoints'; +export { default as private_createBreakpoints } from '../createBreakpoints/createBreakpoints'; export { default as unstable_applyStyles } from './applyStyles'; diff --git a/packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts b/packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts index 4cee7a1d6a066f..c2e3f284f92be0 100644 --- a/packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts +++ b/packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts @@ -1,5 +1,5 @@ import MuiError from '@mui/internal-babel-macros/MuiError.macro'; -import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints'; +import { Breakpoints, Breakpoint } from '../createBreakpoints/createBreakpoints'; interface ContainerQueries { up: Breakpoints['up']; diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index ec606cc14d467b..b6ee33d027fcf0 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -77,8 +77,8 @@ export * from './styled'; export { default as createTheme } from './createTheme'; export * from './createTheme'; -export { default as createBreakpoints } from './createTheme/createBreakpoints'; -export * from './createTheme/createBreakpoints'; +export { default as createBreakpoints } from './createBreakpoints/createBreakpoints'; +export * from './createBreakpoints/createBreakpoints'; export { default as createSpacing } from './createTheme/createSpacing'; export { SpacingOptions, Spacing } from './createTheme/createSpacing'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index 8bc93c6d64d0c9..acd66226b8727a 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -50,7 +50,7 @@ export { default as createStyled } from './createStyled'; export * from './createStyled'; export { default as styled } from './styled'; export { default as createTheme } from './createTheme'; -export { default as createBreakpoints } from './createTheme/createBreakpoints'; +export { default as createBreakpoints } from './createBreakpoints/createBreakpoints'; export { default as createSpacing } from './createTheme/createSpacing'; export { default as shape } from './createTheme/shape'; export { default as useThemeProps, getThemeProps } from './useThemeProps'; From 0889c62f075dc1eda6be89c73c478cb072c974cf Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 24 Jul 2024 16:46:22 +0700 Subject: [PATCH 2/3] add material-pigment-css to codesandbox --- .codesandbox/ci.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 46d7527f333ae5..ec72fd1039c4d5 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -13,6 +13,7 @@ "packages/mui-lab", "packages/mui-material-nextjs", "packages/mui-material", + "packages/mui-material-pigment-css", "packages/mui-private-theming", "packages/mui-styled-engine-sc", "packages/mui-styled-engine", @@ -38,6 +39,7 @@ "@mui/lab": "packages/mui-lab/build", "@mui/material-nextjs": "packages/mui-material-nextjs/build", "@mui/material": "packages/mui-material/build", + "@mui/material-pigment-css": "packages/mui-material-pigment-css/build", "@mui/private-theming": "packages/mui-private-theming/build", "@mui/styled-engine": "packages/mui-styled-engine/build", "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build", From 5da94e1a8aa44829b7b5af84f39a058ca093cbe7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 24 Jul 2024 17:32:11 +0700 Subject: [PATCH 3/3] fix lint --- packages/mui-system/src/createBreakpoints/index.d.ts | 1 + packages/mui-system/src/createBreakpoints/index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/mui-system/src/createBreakpoints/index.d.ts b/packages/mui-system/src/createBreakpoints/index.d.ts index ef7396cc6f4376..63322592e606e7 100644 --- a/packages/mui-system/src/createBreakpoints/index.d.ts +++ b/packages/mui-system/src/createBreakpoints/index.d.ts @@ -1,2 +1,3 @@ /** This export is intended for internal integration with Pigment CSS */ +/* eslint-disable import/prefer-default-export */ export { default as unstable_createBreakpoints } from './createBreakpoints'; diff --git a/packages/mui-system/src/createBreakpoints/index.js b/packages/mui-system/src/createBreakpoints/index.js index ef7396cc6f4376..63322592e606e7 100644 --- a/packages/mui-system/src/createBreakpoints/index.js +++ b/packages/mui-system/src/createBreakpoints/index.js @@ -1,2 +1,3 @@ /** This export is intended for internal integration with Pigment CSS */ +/* eslint-disable import/prefer-default-export */ export { default as unstable_createBreakpoints } from './createBreakpoints';