From 7d70305e818e489370d263a3c8773ad707c9ea57 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sat, 1 Jun 2024 15:55:18 -0400 Subject: [PATCH 01/12] export stringifyTheme --- packages/mui-material/src/styles/index.d.ts | 3 + packages/mui-material/src/styles/index.js | 4 +- .../src/styles/stringifyTheme.test.ts | 127 ++++++++++++++++++ .../mui-material/src/styles/stringifyTheme.ts | 62 +++++++++ 4 files changed, 195 insertions(+), 1 deletion(-) create mode 100644 packages/mui-material/src/styles/stringifyTheme.test.ts create mode 100644 packages/mui-material/src/styles/stringifyTheme.ts diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts index 8db9015025569e..41de04ee482916 100644 --- a/packages/mui-material/src/styles/index.d.ts +++ b/packages/mui-material/src/styles/index.d.ts @@ -100,6 +100,9 @@ export { default as withTheme } from './withTheme'; export * from './CssVarsProvider'; export { default as extendTheme } from './extendTheme'; + +export * from './stringifyTheme'; + export type { ColorSchemeOverrides, SupportedColorScheme, diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js index 82a05b20ac68e6..1ec3a951a0aeff 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -31,7 +31,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM export { default as createStyles } from './createStyles'; export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils'; export { default as responsiveFontSizes } from './responsiveFontSizes'; -export { duration, easing } from './createTransitions'; +export { default as createTransitions, duration, easing } from './createTransitions'; export { default as useTheme } from './useTheme'; export { default as useThemeProps } from './useThemeProps'; export { default as styled } from './styled'; @@ -50,6 +50,8 @@ export { default as experimental_extendTheme } from './experimental_extendTheme' export { default as getOverlayAlpha } from './getOverlayAlpha'; export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar'; +export * from './stringifyTheme'; + // Private methods for creating parts of the theme export { default as private_createTypography } from './createTypography'; export { default as private_createMixins } from './createMixins'; diff --git a/packages/mui-material/src/styles/stringifyTheme.test.ts b/packages/mui-material/src/styles/stringifyTheme.test.ts new file mode 100644 index 00000000000000..0daf0a408488c0 --- /dev/null +++ b/packages/mui-material/src/styles/stringifyTheme.test.ts @@ -0,0 +1,127 @@ +import { expect } from 'chai'; +import { stringifyTheme } from './stringifyTheme'; +import extendTheme from './extendTheme'; + +describe('StringifyTheme', () => { + it('should serialize the theme', () => { + const theme = extendTheme(); + const result = stringifyTheme({ + breakpoints: theme.breakpoints, + transitions: theme.transitions, + }); + expect(result).to.equal(`import createBreakpoints from '@mui/system/createBreakpoints'; +import { createTransitions } from '@mui/material/styles'; + +const theme = { + "breakpoints": { + "keys": [ + "xs", + "sm", + "md", + "lg", + "xl" + ], + "values": { + "xs": 0, + "sm": 600, + "md": 900, + "lg": 1200, + "xl": 1536 + }, + "unit": "px" + }, + "transitions": { + "easing": { + "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", + "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", + "easeIn": "cubic-bezier(0.4, 0, 1, 1)", + "sharp": "cubic-bezier(0.4, 0, 0.6, 1)" + }, + "duration": { + "shortest": 150, + "shorter": 200, + "short": 250, + "standard": 300, + "complex": 375, + "enteringScreen": 225, + "leavingScreen": 195 + } + } +}; + +theme.breakpoints = createBreakpoints(theme.breakpoints || {}); +theme.transitions = createTransitions(theme.transitions || {}); + +export default theme;`); + + // test that non-seriazable values still exist in the original theme + expect(typeof theme.generateStyleSheets).to.equal('function'); + }); + + it('should serialize the custom theme', () => { + const theme = extendTheme({ + breakpoints: { + values: { + mobile: 0, + tablet: 640, + laptop: 1024, + desktop: 1280, + } as any, + }, + transitions: { + duration: { + standard: 432, + }, + }, + }); + const result = stringifyTheme({ + breakpoints: theme.breakpoints, + transitions: theme.transitions, + }); + expect(result).to.equal(`import createBreakpoints from '@mui/system/createBreakpoints'; +import { createTransitions } from '@mui/material/styles'; + +const theme = { + "breakpoints": { + "keys": [ + "mobile", + "tablet", + "laptop", + "desktop" + ], + "values": { + "mobile": 0, + "tablet": 640, + "laptop": 1024, + "desktop": 1280 + }, + "unit": "px" + }, + "transitions": { + "duration": { + "standard": 432, + "shortest": 150, + "shorter": 200, + "short": 250, + "complex": 375, + "enteringScreen": 225, + "leavingScreen": 195 + }, + "easing": { + "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", + "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", + "easeIn": "cubic-bezier(0.4, 0, 1, 1)", + "sharp": "cubic-bezier(0.4, 0, 0.6, 1)" + } + } +}; + +theme.breakpoints = createBreakpoints(theme.breakpoints || {}); +theme.transitions = createTransitions(theme.transitions || {}); + +export default theme;`); + + // test that non-seriazable values still exist in the original theme + expect(typeof theme.generateStyleSheets).to.equal('function'); + }); +}); diff --git a/packages/mui-material/src/styles/stringifyTheme.ts b/packages/mui-material/src/styles/stringifyTheme.ts new file mode 100644 index 00000000000000..9014536a36f66d --- /dev/null +++ b/packages/mui-material/src/styles/stringifyTheme.ts @@ -0,0 +1,62 @@ +/* eslint-disable import/prefer-default-export */ +import { isPlainObject } from '@mui/utils/deepmerge'; + +function isSerializable(val: any) { + return ( + isPlainObject(val) || + typeof val === 'undefined' || + typeof val === 'string' || + typeof val === 'boolean' || + typeof val === 'number' || + Array.isArray(val) + ); +} + +/** + * `baseTheme` usually comes from `createTheme` or `extendTheme`. + * + * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS + * For example, in a Next.js project: + * + * ```js + * // next.config.js + * const { extendTheme } = require('@mui/material/styles'); + * + * const theme = extendTheme(); + * // `.toRuntime` is Pigment CSS specific to create a theme that is available at runtime. + * theme.toRuntime = () => stringifyTheme(theme); + * + * module.exports = withPigment({ + * theme, + * }); + * ``` + */ +export function stringifyTheme(baseTheme: Record = {}) { + const serializableTheme: Record = { ...baseTheme }; + + function serializeTheme(object: Record) { + const array = Object.entries(object); + // eslint-disable-next-line no-plusplus + for (let index = 0; index < array.length; index++) { + const [key, value] = array[index]; + if (!isSerializable(value) || key.startsWith('unstable_')) { + delete object[key]; + } else if (isPlainObject(value)) { + object[key] = { ...value }; + serializeTheme(object[key]); + } + } + } + + serializeTheme(serializableTheme); + + return `import createBreakpoints from '@mui/system/createBreakpoints'; +import { createTransitions } from '@mui/material/styles'; + +const theme = ${JSON.stringify(serializableTheme, null, 2)}; + +theme.breakpoints = createBreakpoints(theme.breakpoints || {}); +theme.transitions = createTransitions(theme.transitions || {}); + +export default theme;`; +} From 0eb8b0025ac9de3bc4fa5dc3401efb0d1dd9ea71 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 4 Jun 2024 09:22:51 -0400 Subject: [PATCH 02/12] use `toRuntimeSource` with test --- .../src/styles/stringifyTheme.test.ts | 20 +++++++++++++++++++ .../mui-material/src/styles/stringifyTheme.ts | 4 ++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/styles/stringifyTheme.test.ts b/packages/mui-material/src/styles/stringifyTheme.test.ts index 0daf0a408488c0..8e82e8c8da75fd 100644 --- a/packages/mui-material/src/styles/stringifyTheme.test.ts +++ b/packages/mui-material/src/styles/stringifyTheme.test.ts @@ -124,4 +124,24 @@ export default theme;`); // test that non-seriazable values still exist in the original theme expect(typeof theme.generateStyleSheets).to.equal('function'); }); + + 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/createBreakpoints'; +import { createTransitions } from '@mui/material/styles'; + +const theme = { + "palette": { + "primary": { + "main": "#ff5252" + } + } +}; + +theme.breakpoints = createBreakpoints(theme.breakpoints || {}); +theme.transitions = createTransitions(theme.transitions || {}); + +export default theme;`); + }); }); diff --git a/packages/mui-material/src/styles/stringifyTheme.ts b/packages/mui-material/src/styles/stringifyTheme.ts index 9014536a36f66d..a8af7cf17e2df8 100644 --- a/packages/mui-material/src/styles/stringifyTheme.ts +++ b/packages/mui-material/src/styles/stringifyTheme.ts @@ -23,8 +23,8 @@ function isSerializable(val: any) { * const { extendTheme } = require('@mui/material/styles'); * * const theme = extendTheme(); - * // `.toRuntime` is Pigment CSS specific to create a theme that is available at runtime. - * theme.toRuntime = () => stringifyTheme(theme); + * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime. + * theme.toRuntimeSource = stringifyTheme; * * module.exports = withPigment({ * theme, From 167d5fdc4acdc0641f2d20fa9500f8af8d3c3f95 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 4 Jun 2024 23:21:57 -0400 Subject: [PATCH 03/12] set toRuntimeSource --- apps/pigment-css-next-app/next.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js index 4155177fb4ca45..f60594696977b2 100644 --- a/apps/pigment-css-next-app/next.config.js +++ b/apps/pigment-css-next-app/next.config.js @@ -1,7 +1,7 @@ /* eslint-env node */ // eslint-ignore-next-line import/no-unresolved const { withPigment } = require('@pigment-css/nextjs-plugin'); -const { extendTheme } = require('@mui/material/styles'); +const { extendTheme, stringifyTheme } = require('@mui/material/styles'); /** * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions @@ -95,6 +95,7 @@ const theme = extendTheme({ theme.getColorSchemeSelector = (colorScheme) => { return `@media (prefers-color-scheme: ${colorScheme})`; }; +theme.toRuntimeSource = stringifyTheme; function innerNoop() { return null; From 51455810f66e59f997796cae660e315ff33080d8 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 4 Jun 2024 23:22:08 -0400 Subject: [PATCH 04/12] move useTheme to zero-styled --- packages/mui-material/src/Collapse/Collapse.js | 3 +-- packages/mui-material/src/Dialog/Dialog.js | 3 +-- packages/mui-material/src/Drawer/Drawer.js | 3 +-- packages/mui-material/src/Fade/Fade.js | 2 +- packages/mui-material/src/Grow/Grow.js | 2 +- packages/mui-material/src/Link/Link.js | 3 +-- packages/mui-material/src/Paper/Paper.js | 3 +-- packages/mui-material/src/Slide/Slide.js | 2 +- packages/mui-material/src/Snackbar/Snackbar.js | 3 +-- packages/mui-material/src/SpeedDial/SpeedDial.js | 3 +-- packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js | 5 +++-- packages/mui-material/src/Tabs/Tabs.js | 3 +-- packages/mui-material/src/Tooltip/Tooltip.js | 3 +-- packages/mui-material/src/Zoom/Zoom.js | 2 +- packages/mui-material/src/zero-styled/index.ts | 3 +++ 15 files changed, 19 insertions(+), 24 deletions(-) diff --git a/packages/mui-material/src/Collapse/Collapse.js b/packages/mui-material/src/Collapse/Collapse.js index 1b459620da0610..dfbd74726d4e00 100644 --- a/packages/mui-material/src/Collapse/Collapse.js +++ b/packages/mui-material/src/Collapse/Collapse.js @@ -6,10 +6,9 @@ import { Transition } from 'react-transition-group'; import useTimeout from '@mui/utils/useTimeout'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import { duration } from '../styles/createTransitions'; import { getTransitionProps } from '../transitions/utils'; -import useTheme from '../styles/useTheme'; import { useForkRef } from '../utils'; import { getCollapseUtilityClass } from './collapseClasses'; diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js index f7d1e687b68049..0988a7c8818508 100644 --- a/packages/mui-material/src/Dialog/Dialog.js +++ b/packages/mui-material/src/Dialog/Dialog.js @@ -11,8 +11,7 @@ import Paper from '../Paper'; import dialogClasses, { getDialogUtilityClass } from './dialogClasses'; import DialogContext from './DialogContext'; import Backdrop from '../Backdrop'; -import useTheme from '../styles/useTheme'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; const useThemeProps = createUseThemeProps('MuiDialog'); diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js index e3d5f686f503c1..45f7b9bbb2af61 100644 --- a/packages/mui-material/src/Drawer/Drawer.js +++ b/packages/mui-material/src/Drawer/Drawer.js @@ -9,9 +9,8 @@ import Modal from '../Modal'; import Slide from '../Slide'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; -import useTheme from '../styles/useTheme'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import { getDrawerUtilityClass } from './drawerClasses'; const useThemeProps = createUseThemeProps('MuiDrawer'); diff --git a/packages/mui-material/src/Fade/Fade.js b/packages/mui-material/src/Fade/Fade.js index 0258a3adae8723..ad0f669096ccb8 100644 --- a/packages/mui-material/src/Fade/Fade.js +++ b/packages/mui-material/src/Fade/Fade.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { Transition } from 'react-transition-group'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; -import useTheme from '../styles/useTheme'; +import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; diff --git a/packages/mui-material/src/Grow/Grow.js b/packages/mui-material/src/Grow/Grow.js index 670d4582c4ba86..d4f57bf40161fc 100644 --- a/packages/mui-material/src/Grow/Grow.js +++ b/packages/mui-material/src/Grow/Grow.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import useTimeout from '@mui/utils/useTimeout'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; import { Transition } from 'react-transition-group'; -import useTheme from '../styles/useTheme'; +import { useTheme } from '../zero-styled'; import { getTransitionProps, reflow } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index ae743d2a438958..80cf5374e66af5 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -6,13 +6,12 @@ import { alpha } from '@mui/system/colorManipulator'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import useIsFocusVisible from '../utils/useIsFocusVisible'; import useForkRef from '../utils/useForkRef'; import Typography from '../Typography'; import linkClasses, { getLinkUtilityClass } from './linkClasses'; import getTextDecoration, { colorTransformations } from './getTextDecoration'; -import useTheme from '../styles/useTheme'; const useThemeProps = createUseThemeProps('MuiLink'); diff --git a/packages/mui-material/src/Paper/Paper.js b/packages/mui-material/src/Paper/Paper.js index fbb7d90343eb9f..f4b9bbb4ae1bc8 100644 --- a/packages/mui-material/src/Paper/Paper.js +++ b/packages/mui-material/src/Paper/Paper.js @@ -6,9 +6,8 @@ import integerPropType from '@mui/utils/integerPropType'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import getOverlayAlpha from '../styles/getOverlayAlpha'; -import useTheme from '../styles/useTheme'; import { getPaperUtilityClass } from './paperClasses'; const useThemeProps = createUseThemeProps('MuiPaper'); diff --git a/packages/mui-material/src/Slide/Slide.js b/packages/mui-material/src/Slide/Slide.js index f2d30a7a97d588..556ede01df8ff4 100644 --- a/packages/mui-material/src/Slide/Slide.js +++ b/packages/mui-material/src/Slide/Slide.js @@ -7,7 +7,7 @@ import HTMLElementType from '@mui/utils/HTMLElementType'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; import debounce from '../utils/debounce'; import useForkRef from '../utils/useForkRef'; -import useTheme from '../styles/useTheme'; +import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import { ownerWindow } from '../utils'; diff --git a/packages/mui-material/src/Snackbar/Snackbar.js b/packages/mui-material/src/Snackbar/Snackbar.js index 3b731e05c71c48..e44634c3679e1f 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.js +++ b/packages/mui-material/src/Snackbar/Snackbar.js @@ -5,8 +5,7 @@ import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { ClickAwayListener } from '@mui/base/ClickAwayListener'; import { useSnackbar } from '@mui/base/useSnackbar'; -import { styled, createUseThemeProps } from '../zero-styled'; -import useTheme from '../styles/useTheme'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import capitalize from '../utils/capitalize'; import Grow from '../Grow'; import SnackbarContent from '../SnackbarContent'; diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index f65f03100530c8..5fec02b848c903 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -6,8 +6,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import useTimeout from '@mui/utils/useTimeout'; import clamp from '@mui/utils/clamp'; -import { styled, createUseThemeProps } from '../zero-styled'; -import useTheme from '../styles/useTheme'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import Zoom from '../Zoom'; import Fab from '../Fab'; import capitalize from '../utils/capitalize'; diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index 71e6f51c2932ae..5be8cdab8d0bb6 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -3,7 +3,6 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; -import useThemeProps from '@mui/system/useThemeProps'; import { NoSsr } from '@mui/base'; import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer'; import useForkRef from '../utils/useForkRef'; @@ -11,10 +10,12 @@ import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; import useEventCallback from '../utils/useEventCallback'; import useEnhancedEffect from '../utils/useEnhancedEffect'; -import useTheme from '../styles/useTheme'; +import { createUseThemeProps, useTheme } from '../zero-styled'; import { getTransitionProps } from '../transitions/utils'; import SwipeArea from './SwipeArea'; +const useThemeProps = createUseThemeProps('MuiSwipeableDrawer'); + // This value is closed to what browsers are using internally to // trigger a native scroll. const UNCERTAINTY_THRESHOLD = 3; // px diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js index f07471d7bcf24f..435b0702ddb6f9 100644 --- a/packages/mui-material/src/Tabs/Tabs.js +++ b/packages/mui-material/src/Tabs/Tabs.js @@ -7,8 +7,7 @@ import refType from '@mui/utils/refType'; import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { useRtl } from '@mui/system/RtlProvider'; -import { styled, createUseThemeProps } from '../zero-styled'; -import useTheme from '../styles/useTheme'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import debounce from '../utils/debounce'; import animate from '../internal/animate'; import ScrollbarSize from './ScrollbarSize'; diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index a3115d00e0620d..512e79347176e2 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -8,8 +8,7 @@ import { appendOwnerState } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; -import { styled, createUseThemeProps } from '../zero-styled'; -import useTheme from '../styles/useTheme'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import capitalize from '../utils/capitalize'; import Grow from '../Grow'; import Popper from '../Popper'; diff --git a/packages/mui-material/src/Zoom/Zoom.js b/packages/mui-material/src/Zoom/Zoom.js index 5f0ebfd5d9f781..b93d79aab2a7df 100644 --- a/packages/mui-material/src/Zoom/Zoom.js +++ b/packages/mui-material/src/Zoom/Zoom.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { Transition } from 'react-transition-group'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; -import useTheme from '../styles/useTheme'; +import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; diff --git a/packages/mui-material/src/zero-styled/index.ts b/packages/mui-material/src/zero-styled/index.ts index deff4b2bff07a0..c8d01b5e1d7f9b 100644 --- a/packages/mui-material/src/zero-styled/index.ts +++ b/packages/mui-material/src/zero-styled/index.ts @@ -1,4 +1,5 @@ import useThemeProps from '../styles/useThemeProps'; +import useTheme from '../styles/useTheme'; export { css, keyframes } from '@mui/system'; @@ -8,3 +9,5 @@ export { default as styled } from '../styles/styled'; export function createUseThemeProps(name: string) { return useThemeProps; } + +export { useTheme }; From d4b121504c1ca7e9cd33d5a4b1700d381fe78d49 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 10 Jun 2024 17:16:24 +0700 Subject: [PATCH 05/12] add react-tooltip page --- .../app/material-ui/react-tooltip/page.tsx | 121 +++++++++++++++++ .../src/pages/material-ui/react-tooltip.tsx | 122 ++++++++++++++++++ 2 files changed, 243 insertions(+) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-tooltip.tsx diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx new file mode 100644 index 00000000000000..580fe774464783 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx @@ -0,0 +1,121 @@ +'use client'; +import * as React from 'react'; +import AccessibilityTooltips from '../../../../../../docs/data/material/components/tooltips/AccessibilityTooltips'; +import AnchorElTooltips from '../../../../../../docs/data/material/components/tooltips/AnchorElTooltips'; +import ArrowTooltips from '../../../../../../docs/data/material/components/tooltips/ArrowTooltips'; +import BasicTooltip from '../../../../../../docs/data/material/components/tooltips/BasicTooltip'; +import ControlledTooltips from '../../../../../../docs/data/material/components/tooltips/ControlledTooltips'; +import CustomizedTooltips from '../../../../../../docs/data/material/components/tooltips/CustomizedTooltips'; +import DelayTooltips from '../../../../../../docs/data/material/components/tooltips/DelayTooltips'; +import DisabledTooltips from '../../../../../../docs/data/material/components/tooltips/DisabledTooltips'; +import FollowCursorTooltips from '../../../../../../docs/data/material/components/tooltips/FollowCursorTooltips'; +import NonInteractiveTooltips from '../../../../../../docs/data/material/components/tooltips/NonInteractiveTooltips'; +import PositionedTooltips from '../../../../../../docs/data/material/components/tooltips/PositionedTooltips'; +import TooltipMargin from '../../../../../../docs/data/material/components/tooltips/TooltipMargin'; +import TooltipOffset from '../../../../../../docs/data/material/components/tooltips/TooltipOffset'; +import TransitionsTooltips from '../../../../../../docs/data/material/components/tooltips/TransitionsTooltips'; +import TriggersTooltips from '../../../../../../docs/data/material/components/tooltips/TriggersTooltips'; +import VariableWidth from '../../../../../../docs/data/material/components/tooltips/VariableWidth'; + +export default function Tooltips() { + return ( + +
+

Accessibility Tooltips

+
+ +
+
+
+

Anchor El Tooltips

+
+ +
+
+
+

Arrow Tooltips

+
+ +
+
+
+

Basic Tooltip

+
+ +
+
+
+

Controlled Tooltips

+
+ +
+
+
+

Customized Tooltips

+
+ +
+
+
+

Delay Tooltips

+
+ +
+
+
+

Disabled Tooltips

+
+ +
+
+
+

Follow Cursor Tooltips

+
+ +
+
+
+

Non Interactive Tooltips

+
+ +
+
+
+

Positioned Tooltips

+
+ +
+
+
+

Tooltip Margin

+
+ +
+
+
+

Tooltip Offset

+
+ +
+
+
+

Transitions Tooltips

+
+ +
+
+
+

Triggers Tooltips

+
+ +
+
+
+

Variable Width

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-tooltip.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-tooltip.tsx new file mode 100644 index 00000000000000..f6c163bf911fff --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-tooltip.tsx @@ -0,0 +1,122 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import AccessibilityTooltips from '../../../../../docs/data/material/components/tooltips/AccessibilityTooltips.tsx'; +import AnchorElTooltips from '../../../../../docs/data/material/components/tooltips/AnchorElTooltips.tsx'; +import ArrowTooltips from '../../../../../docs/data/material/components/tooltips/ArrowTooltips.tsx'; +import BasicTooltip from '../../../../../docs/data/material/components/tooltips/BasicTooltip.tsx'; +import ControlledTooltips from '../../../../../docs/data/material/components/tooltips/ControlledTooltips.tsx'; +import CustomizedTooltips from '../../../../../docs/data/material/components/tooltips/CustomizedTooltips.tsx'; +import DelayTooltips from '../../../../../docs/data/material/components/tooltips/DelayTooltips.tsx'; +import DisabledTooltips from '../../../../../docs/data/material/components/tooltips/DisabledTooltips.tsx'; +import FollowCursorTooltips from '../../../../../docs/data/material/components/tooltips/FollowCursorTooltips.tsx'; +import NonInteractiveTooltips from '../../../../../docs/data/material/components/tooltips/NonInteractiveTooltips.tsx'; +import PositionedTooltips from '../../../../../docs/data/material/components/tooltips/PositionedTooltips.tsx'; +import TooltipMargin from '../../../../../docs/data/material/components/tooltips/TooltipMargin.tsx'; +import TooltipOffset from '../../../../../docs/data/material/components/tooltips/TooltipOffset.tsx'; +import TransitionsTooltips from '../../../../../docs/data/material/components/tooltips/TransitionsTooltips.tsx'; +import TriggersTooltips from '../../../../../docs/data/material/components/tooltips/TriggersTooltips.tsx'; +import VariableWidth from '../../../../../docs/data/material/components/tooltips/VariableWidth.tsx'; + +export default function Tooltips() { + return ( + +

Tooltips

+
+

Accessibility Tooltips

+
+ +
+
+
+

Anchor El Tooltips

+
+ +
+
+
+

Arrow Tooltips

+
+ +
+
+
+

Basic Tooltip

+
+ +
+
+
+

Controlled Tooltips

+
+ +
+
+
+

Customized Tooltips

+
+ +
+
+
+

Delay Tooltips

+
+ +
+
+
+

Disabled Tooltips

+
+ +
+
+
+

Follow Cursor Tooltips

+
+ +
+
+
+

Non Interactive Tooltips

+
+ +
+
+
+

Positioned Tooltips

+
+ +
+
+
+

Tooltip Margin

+
+ +
+
+
+

Tooltip Offset

+
+ +
+
+
+

Transitions Tooltips

+
+ +
+
+
+

Triggers Tooltips

+
+ +
+
+
+

Variable Width

+
+ +
+
+ + ); +} From 6a633bdcced6e0942420c28f810c623ca2411440 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 10 Jun 2024 17:17:15 +0700 Subject: [PATCH 06/12] add react-paper demo --- .../src/app/material-ui/react-paper/page.tsx | 37 ++++++++++++++++++ .../src/pages/material-ui/react-paper.tsx | 38 +++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-paper.tsx diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx new file mode 100644 index 00000000000000..95583dadf32d4b --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx @@ -0,0 +1,37 @@ +'use client'; +import * as React from 'react'; +import Elevation from '../../../../../../docs/data/material/components/paper/Elevation'; +import SimplePaper from '../../../../../../docs/data/material/components/paper/SimplePaper'; +import SquareCorners from '../../../../../../docs/data/material/components/paper/SquareCorners'; +import Variants from '../../../../../../docs/data/material/components/paper/Variants'; + +export default function Paper() { + return ( + +
+

Elevation

+
+ +
+
+
+

Simple Paper

+
+ +
+
+
+

Square Corners

+
+ +
+
+
+

Variants

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-paper.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-paper.tsx new file mode 100644 index 00000000000000..d409e60c4c649d --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-paper.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import Elevation from '../../../../../docs/data/material/components/paper/Elevation.tsx'; +import SimplePaper from '../../../../../docs/data/material/components/paper/SimplePaper.tsx'; +import SquareCorners from '../../../../../docs/data/material/components/paper/SquareCorners.tsx'; +import Variants from '../../../../../docs/data/material/components/paper/Variants.tsx'; + +export default function Paper() { + return ( + +

Paper

+
+

Elevation

+
+ +
+
+
+

Simple Paper

+
+ +
+
+
+

Square Corners

+
+ +
+
+
+

Variants

+
+ +
+
+ + ); +} From 72bea2da9d5e7134132875b4a7e6721cbca62555 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 11 Jun 2024 15:58:33 +0700 Subject: [PATCH 07/12] update pigment to 0.0.13 --- apps/local-ui-lib/package.json | 2 +- apps/pigment-css-next-app/package.json | 4 +- apps/pigment-css-vite-app/package.json | 4 +- package.json | 2 +- pnpm-lock.yaml | 54 +++++++++++++------------- 5 files changed, 33 insertions(+), 33 deletions(-) diff --git a/apps/local-ui-lib/package.json b/apps/local-ui-lib/package.json index 55ff4422c8cbcd..5171ceed5e70b8 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.12" + "@pigment-css/react": "^0.0.13" } } diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 3390605ac5228b..890fa8801066ae 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.12", + "@pigment-css/react": "^0.0.13", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/lab": "workspace:^", @@ -24,7 +24,7 @@ "next": "latest" }, "devDependencies": { - "@pigment-css/nextjs-plugin": "^0.0.12", + "@pigment-css/nextjs-plugin": "^0.0.13", "@types/node": "^20.5.7", "@types/react": "^18.2.55", "@types/react-dom": "^18.3.0", diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index cbb4eb960c6b45..60d07efb01c946 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.12", + "@pigment-css/react": "^0.0.13", "@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.12", + "@pigment-css/vite-plugin": "^0.0.13", "@types/react": "^18.2.55", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.0", diff --git a/package.json b/package.json index e34c00919f76db..97f7c00407dc5e 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "@mui/utils": "workspace:^", "@next/eslint-plugin-next": "^14.2.3", "@octokit/rest": "^20.1.1", - "@pigment-css/react": "^0.0.12", + "@pigment-css/react": "^0.0.13", "@playwright/test": "1.44.1", "@types/enzyme": "^3.10.18", "@types/fs-extra": "^11.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 57997744176d03..0422647017b4d0 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.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.13 + version: 0.0.13(@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.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.13 + version: 0.0.13(@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.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.13 + version: 0.0.13(@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.12 - version: 0.0.12(@types/react@18.2.55)(next@14.2.3(@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.13 + version: 0.0.13(@types/react@18.2.55)(next@14.2.3(@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.34 version: 18.19.34 @@ -412,8 +412,8 @@ importers: specifier: workspace:^ version: link:../../packages/mui-utils/build '@pigment-css/react': - specifier: ^0.0.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.13 + version: 0.0.13(@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.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0)(vite@5.2.13(@types/node@18.19.34)(terser@5.29.2)) + specifier: ^0.0.13 + version: 0.0.13(@types/react@18.2.55)(react@18.2.0)(vite@5.2.13(@types/node@18.19.34)(terser@5.29.2)) '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -4589,21 +4589,21 @@ packages: resolution: {integrity: sha512-VkliWlS4/+GHLLW7J/rVBA00uXus1SWvwFvcUDxDwmFxYfg/2VI6ekwdXS28cjI8Qz2ky2BzG8OUHo+WeYIWqw==} engines: {node: '>=14'} - '@pigment-css/nextjs-plugin@0.0.12': - resolution: {integrity: sha512-GOWnMzKuFmj8JePw99E5ZFRBOI+gexeDJBY9MDKOtorhRYAmfkTWC36HhM9dlEhW5c7KjaJnjyXRHGOmhGQIXw==} + '@pigment-css/nextjs-plugin@0.0.13': + resolution: {integrity: sha512-+nJQAgTLuXCuZgXcfpD5DCcPLhDUsNumoNVG8vjk/ERDGXJHnyk648XJtMP1ZevMYG7OU+M4cLGP5qOsLmrasg==} peerDependencies: next: ^12.0.0 || ^13.0.0 || ^14.0.0 - '@pigment-css/react@0.0.12': - resolution: {integrity: sha512-OXL/5mjG6Q0qT2FvSwfWRinfI+DoevQWh27ApM6PtiKjmJvSXUXDb97bPtdK9dQWAzlfjz5iC82HMIGkKaAhAw==} + '@pigment-css/react@0.0.13': + resolution: {integrity: sha512-oMFp4u9nLbDpRqvm9o65v0ZgectslIT0Z5k6nz0qhU8vU0ifNAXuKlfe5kD5UOfHcqaEHvy7+6uvoj/YAzdFBw==} peerDependencies: react: ^17.0.0 || ^18.0.0 - '@pigment-css/unplugin@0.0.12': - resolution: {integrity: sha512-fLnskFawudo63HL4qcBqQVB6A9uJqmpdueIrT2IUdo1pbAAiFKZCBw9YE7RlCVkTTrhycQCSkG7JYMJaoHy4/g==} + '@pigment-css/unplugin@0.0.13': + resolution: {integrity: sha512-RaacE5hk0jfKH2XmmVw7+fX0c1VqEMBC2vJ8c/ga48yQLbEYqYouCWGCrl6z190Xl+1cyhoFCxl5rAwTyiusVg==} - '@pigment-css/vite-plugin@0.0.12': - resolution: {integrity: sha512-ou3tMiEA1MCMk7+oyz9spZoVvzWhHD01OLNkK0AlTmHKOQtTG9OLU85hCO7C9aLcWvjG+W3ra5oWSqc93ctYBA==} + '@pigment-css/vite-plugin@0.0.13': + resolution: {integrity: sha512-O6O82vzuyOeqCG8sDbETik7g8ZbR53NVlYvFLDvrB1kxZ0k9dAhV5VCgi1hac+FHPwSsV7bQ+dg1pcMz40l2xA==} peerDependencies: vite: ^4.0.0 || ^5.0.0 @@ -15066,16 +15066,16 @@ snapshots: '@opentelemetry/semantic-conventions@1.24.1': {} - '@pigment-css/nextjs-plugin@0.0.12(@types/react@18.2.55)(next@14.2.3(@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.13(@types/react@18.2.55)(next@14.2.3(@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.12(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/unplugin': 0.0.13(@types/react@18.2.55)(react@18.2.0) next: 14.2.3(@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.12(@types/react@18.2.55)(react@18.2.0)': + '@pigment-css/react@0.0.13(@types/react@18.2.55)(react@18.2.0)': dependencies: '@babel/core': 7.24.7 '@babel/helper-module-imports': 7.24.7 @@ -15103,10 +15103,10 @@ snapshots: - '@types/react' - supports-color - '@pigment-css/unplugin@0.0.12(@types/react@18.2.55)(react@18.2.0)': + '@pigment-css/unplugin@0.0.13(@types/react@18.2.55)(react@18.2.0)': dependencies: '@babel/core': 7.24.7 - '@pigment-css/react': 0.0.12(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/react': 0.0.13(@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 @@ -15116,11 +15116,11 @@ snapshots: - react - supports-color - '@pigment-css/vite-plugin@0.0.12(@types/react@18.2.55)(react@18.2.0)(vite@5.2.13(@types/node@18.19.34)(terser@5.29.2))': + '@pigment-css/vite-plugin@0.0.13(@types/react@18.2.55)(react@18.2.0)(vite@5.2.13(@types/node@18.19.34)(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.12(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/react': 0.0.13(@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 From d55f3e656078c36a1c176af6955d314679a1c888 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 11 Jun 2024 16:02:52 +0700 Subject: [PATCH 08/12] add tabs page --- .../src/app/material-ui/react-tabs/page.tsx | 142 +++++++++++++++++ .../src/pages/material-ui/react-tabs.tsx | 143 ++++++++++++++++++ 2 files changed, 285 insertions(+) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-tabs.tsx diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx new file mode 100644 index 00000000000000..4e7cfa2c2ffd8a --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx @@ -0,0 +1,142 @@ +'use client'; +import * as React from 'react'; +import AccessibleTabs1 from '../../../../../../docs/data/material/components/tabs/AccessibleTabs1'; +import AccessibleTabs2 from '../../../../../../docs/data/material/components/tabs/AccessibleTabs2'; +import BasicTabs from '../../../../../../docs/data/material/components/tabs/BasicTabs'; +import CenteredTabs from '../../../../../../docs/data/material/components/tabs/CenteredTabs'; +import ColorTabs from '../../../../../../docs/data/material/components/tabs/ColorTabs'; +import CustomizedTabs from '../../../../../../docs/data/material/components/tabs/CustomizedTabs'; +import DisabledTabs from '../../../../../../docs/data/material/components/tabs/DisabledTabs'; +import FullWidthTabs from '../../../../../../docs/data/material/components/tabs/FullWidthTabs'; +import IconLabelTabs from '../../../../../../docs/data/material/components/tabs/IconLabelTabs'; +import IconPositionTabs from '../../../../../../docs/data/material/components/tabs/IconPositionTabs'; +import IconTabs from '../../../../../../docs/data/material/components/tabs/IconTabs'; +import LabTabs from '../../../../../../docs/data/material/components/tabs/LabTabs'; +import NavTabs from '../../../../../../docs/data/material/components/tabs/NavTabs'; +import ScrollableTabsButtonAuto from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonAuto'; +import ScrollableTabsButtonForce from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonForce'; +import ScrollableTabsButtonPrevent from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonPrevent'; +import ScrollableTabsButtonVisible from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonVisible'; +import TabsWrappedLabel from '../../../../../../docs/data/material/components/tabs/TabsWrappedLabel'; +import VerticalTabs from '../../../../../../docs/data/material/components/tabs/VerticalTabs'; + +export default function Tabs() { + return ( + +
+

Accessible Tabs1

+
+ +
+
+
+

Accessible Tabs2

+
+ +
+
+
+

Basic Tabs

+
+ +
+
+
+

Centered Tabs

+
+ +
+
+
+

Color Tabs

+
+ +
+
+
+

Customized Tabs

+
+ +
+
+
+

Disabled Tabs

+
+ +
+
+
+

Full Width Tabs

+
+ +
+
+
+

Icon Label Tabs

+
+ +
+
+
+

Icon Position Tabs

+
+ +
+
+
+

Icon Tabs

+
+ +
+
+
+

Lab Tabs

+
+ +
+
+
+

Nav Tabs

+
+ +
+
+
+

Scrollable Tabs Button Auto

+
+ +
+
+
+

Scrollable Tabs Button Force

+
+ +
+
+
+

Scrollable Tabs Button Prevent

+
+ +
+
+
+

Scrollable Tabs Button Visible

+
+ +
+
+
+

Tabs Wrapped Label

+
+ +
+
+
+

Vertical Tabs

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-tabs.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-tabs.tsx new file mode 100644 index 00000000000000..4ee01f755d755c --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-tabs.tsx @@ -0,0 +1,143 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import AccessibleTabs1 from '../../../../../docs/data/material/components/tabs/AccessibleTabs1.tsx'; +import AccessibleTabs2 from '../../../../../docs/data/material/components/tabs/AccessibleTabs2.tsx'; +import BasicTabs from '../../../../../docs/data/material/components/tabs/BasicTabs.tsx'; +import CenteredTabs from '../../../../../docs/data/material/components/tabs/CenteredTabs.tsx'; +import ColorTabs from '../../../../../docs/data/material/components/tabs/ColorTabs.tsx'; +import CustomizedTabs from '../../../../../docs/data/material/components/tabs/CustomizedTabs.tsx'; +import DisabledTabs from '../../../../../docs/data/material/components/tabs/DisabledTabs.tsx'; +import FullWidthTabs from '../../../../../docs/data/material/components/tabs/FullWidthTabs.tsx'; +import IconLabelTabs from '../../../../../docs/data/material/components/tabs/IconLabelTabs.tsx'; +import IconPositionTabs from '../../../../../docs/data/material/components/tabs/IconPositionTabs.tsx'; +import IconTabs from '../../../../../docs/data/material/components/tabs/IconTabs.tsx'; +import LabTabs from '../../../../../docs/data/material/components/tabs/LabTabs.tsx'; +import NavTabs from '../../../../../docs/data/material/components/tabs/NavTabs.tsx'; +import ScrollableTabsButtonAuto from '../../../../../docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx'; +import ScrollableTabsButtonForce from '../../../../../docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx'; +import ScrollableTabsButtonPrevent from '../../../../../docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx'; +import ScrollableTabsButtonVisible from '../../../../../docs/data/material/components/tabs/ScrollableTabsButtonVisible.tsx'; +import TabsWrappedLabel from '../../../../../docs/data/material/components/tabs/TabsWrappedLabel.tsx'; +import VerticalTabs from '../../../../../docs/data/material/components/tabs/VerticalTabs.tsx'; + +export default function Tabs() { + return ( + +

Tabs

+
+

Accessible Tabs1

+
+ +
+
+
+

Accessible Tabs2

+
+ +
+
+
+

Basic Tabs

+
+ +
+
+
+

Centered Tabs

+
+ +
+
+
+

Color Tabs

+
+ +
+
+
+

Customized Tabs

+
+ +
+
+
+

Disabled Tabs

+
+ +
+
+
+

Full Width Tabs

+
+ +
+
+
+

Icon Label Tabs

+
+ +
+
+
+

Icon Position Tabs

+
+ +
+
+
+

Icon Tabs

+
+ +
+
+
+

Lab Tabs

+
+ +
+
+
+

Nav Tabs

+
+ +
+
+
+

Scrollable Tabs Button Auto

+
+ +
+
+
+

Scrollable Tabs Button Force

+
+ +
+
+
+

Scrollable Tabs Button Prevent

+
+ +
+
+
+

Scrollable Tabs Button Visible

+
+ +
+
+
+

Tabs Wrapped Label

+
+ +
+
+
+

Vertical Tabs

+
+ +
+
+ + ); +} From f8f21c4e504fd340f9fae54851e59561074ef096 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 11 Jun 2024 16:23:00 +0700 Subject: [PATCH 09/12] fix esm import --- packages/mui-material/src/styles/stringifyTheme.test.ts | 4 ++-- packages/mui-material/src/styles/stringifyTheme.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/styles/stringifyTheme.test.ts b/packages/mui-material/src/styles/stringifyTheme.test.ts index 8e82e8c8da75fd..01e2db435b3361 100644 --- a/packages/mui-material/src/styles/stringifyTheme.test.ts +++ b/packages/mui-material/src/styles/stringifyTheme.test.ts @@ -78,7 +78,7 @@ export default theme;`); breakpoints: theme.breakpoints, transitions: theme.transitions, }); - expect(result).to.equal(`import createBreakpoints from '@mui/system/createBreakpoints'; + expect(result).to.equal(`import { createBreakpoints } from '@mui/system'; import { createTransitions } from '@mui/material/styles'; const theme = { @@ -128,7 +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/createBreakpoints'; + .equal(`import { createBreakpoints } from '@mui/system'; import { createTransitions } from '@mui/material/styles'; const theme = { diff --git a/packages/mui-material/src/styles/stringifyTheme.ts b/packages/mui-material/src/styles/stringifyTheme.ts index a8af7cf17e2df8..1b56359482fa3d 100644 --- a/packages/mui-material/src/styles/stringifyTheme.ts +++ b/packages/mui-material/src/styles/stringifyTheme.ts @@ -50,7 +50,7 @@ export function stringifyTheme(baseTheme: Record = {}) { serializeTheme(serializableTheme); - return `import createBreakpoints from '@mui/system/createBreakpoints'; + return `import { createBreakpoints } from '@mui/system'; import { createTransitions } from '@mui/material/styles'; const theme = ${JSON.stringify(serializableTheme, null, 2)}; From 045a47ca3d9431077c68e8b8346308dded1512ed Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 11 Jun 2024 18:54:42 +0700 Subject: [PATCH 10/12] fix test --- packages/mui-material/src/styles/stringifyTheme.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/stringifyTheme.test.ts b/packages/mui-material/src/styles/stringifyTheme.test.ts index 01e2db435b3361..ef2f0dcf99eab9 100644 --- a/packages/mui-material/src/styles/stringifyTheme.test.ts +++ b/packages/mui-material/src/styles/stringifyTheme.test.ts @@ -9,7 +9,7 @@ describe('StringifyTheme', () => { breakpoints: theme.breakpoints, transitions: theme.transitions, }); - expect(result).to.equal(`import createBreakpoints from '@mui/system/createBreakpoints'; + expect(result).to.equal(`import { createBreakpoints } from '@mui/system'; import { createTransitions } from '@mui/material/styles'; const theme = { From e3790cce64748fc1abbbfc9171b41b6dc86c51ad Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 12 Jun 2024 14:08:13 +0700 Subject: [PATCH 11/12] update nextjs-plugin --- apps/pigment-css-next-app/package.json | 2 +- pnpm-lock.yaml | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 890fa8801066ae..8e04aed38ed3e9 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -24,7 +24,7 @@ "next": "latest" }, "devDependencies": { - "@pigment-css/nextjs-plugin": "^0.0.13", + "@pigment-css/nextjs-plugin": "^0.0.14", "@types/node": "^20.5.7", "@types/react": "^18.2.55", "@types/react-dom": "^18.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0422647017b4d0..ede0da59d32007 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -373,8 +373,8 @@ importers: version: 18.2.0(react@18.2.0) devDependencies: '@pigment-css/nextjs-plugin': - specifier: ^0.0.13 - version: 0.0.13(@types/react@18.2.55)(next@14.2.3(@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.14 + version: 0.0.14(@types/react@18.2.55)(next@14.2.3(@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.34 version: 18.19.34 @@ -4589,8 +4589,8 @@ packages: resolution: {integrity: sha512-VkliWlS4/+GHLLW7J/rVBA00uXus1SWvwFvcUDxDwmFxYfg/2VI6ekwdXS28cjI8Qz2ky2BzG8OUHo+WeYIWqw==} engines: {node: '>=14'} - '@pigment-css/nextjs-plugin@0.0.13': - resolution: {integrity: sha512-+nJQAgTLuXCuZgXcfpD5DCcPLhDUsNumoNVG8vjk/ERDGXJHnyk648XJtMP1ZevMYG7OU+M4cLGP5qOsLmrasg==} + '@pigment-css/nextjs-plugin@0.0.14': + resolution: {integrity: sha512-aGRpUnXrJi7jbdHddh1cVeVXeiYvglXQQhpzxJ1grr1f9RovGcyuEx3zADgEG3nZB1TGL6t2zdOUvgz4bCWIyQ==} peerDependencies: next: ^12.0.0 || ^13.0.0 || ^14.0.0 @@ -4599,8 +4599,8 @@ packages: peerDependencies: react: ^17.0.0 || ^18.0.0 - '@pigment-css/unplugin@0.0.13': - resolution: {integrity: sha512-RaacE5hk0jfKH2XmmVw7+fX0c1VqEMBC2vJ8c/ga48yQLbEYqYouCWGCrl6z190Xl+1cyhoFCxl5rAwTyiusVg==} + '@pigment-css/unplugin@0.0.14': + resolution: {integrity: sha512-oRAHxBiK7sZ8njZukJQJJdLJ2m26641S2GpnKbKLKV6KQa3TgdsZY34jzEG8iyWB4fBbW9JbLfloSruFncoSrg==} '@pigment-css/vite-plugin@0.0.13': resolution: {integrity: sha512-O6O82vzuyOeqCG8sDbETik7g8ZbR53NVlYvFLDvrB1kxZ0k9dAhV5VCgi1hac+FHPwSsV7bQ+dg1pcMz40l2xA==} @@ -15066,9 +15066,9 @@ snapshots: '@opentelemetry/semantic-conventions@1.24.1': {} - '@pigment-css/nextjs-plugin@0.0.13(@types/react@18.2.55)(next@14.2.3(@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.14(@types/react@18.2.55)(next@14.2.3(@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.13(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/unplugin': 0.0.14(@types/react@18.2.55)(react@18.2.0) next: 14.2.3(@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' @@ -15103,7 +15103,7 @@ snapshots: - '@types/react' - supports-color - '@pigment-css/unplugin@0.0.13(@types/react@18.2.55)(react@18.2.0)': + '@pigment-css/unplugin@0.0.14(@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) From 65244243cecd38f516ebc87677053cc8e9ee4020 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 12 Jun 2024 14:14:51 +0700 Subject: [PATCH 12/12] run pnpm dedupe --- pnpm-lock.yaml | 100 ++++++++++++++++++++++++++----------------------- 1 file changed, 53 insertions(+), 47 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ede0da59d32007..d30324d39343bc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -364,7 +364,7 @@ importers: version: link:../local-ui-lib next: specifier: latest - version: 14.2.3(@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) + version: 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: specifier: ^18.2.0 version: 18.2.0 @@ -374,7 +374,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: ^0.0.14 - version: 0.0.14(@types/react@18.2.55)(next@14.2.3(@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) + 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) '@types/node': specifier: ^18.19.34 version: 18.19.34 @@ -3610,6 +3610,7 @@ packages: '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} + deprecated: Use @eslint/config-array instead '@humanwhocodes/module-importer@1.0.1': resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} @@ -3617,6 +3618,7 @@ packages: '@humanwhocodes/object-schema@2.0.2': resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==} + deprecated: Use @eslint/object-schema instead '@hutson/parse-repository-url@3.0.2': resolution: {integrity: sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==} @@ -4133,8 +4135,8 @@ packages: '@next/env@13.5.1': resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - '@next/env@14.2.3': - resolution: {integrity: sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==} + '@next/env@14.2.4': + resolution: {integrity: sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==} '@next/eslint-plugin-next@14.2.3': resolution: {integrity: sha512-L3oDricIIjgj1AVnRdRor21gI7mShlSwU/1ZGHmqM3LzHhXXhdkrfeNY5zif25Bi5Dd7fiJHsbhoZCHfXYvlAw==} @@ -4145,8 +4147,8 @@ packages: cpu: [arm64] os: [darwin] - '@next/swc-darwin-arm64@14.2.3': - resolution: {integrity: sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==} + '@next/swc-darwin-arm64@14.2.4': + resolution: {integrity: sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -4157,8 +4159,8 @@ packages: cpu: [x64] os: [darwin] - '@next/swc-darwin-x64@14.2.3': - resolution: {integrity: sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==} + '@next/swc-darwin-x64@14.2.4': + resolution: {integrity: sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -4169,8 +4171,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-gnu@14.2.3': - resolution: {integrity: sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==} + '@next/swc-linux-arm64-gnu@14.2.4': + resolution: {integrity: sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4181,8 +4183,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@14.2.3': - resolution: {integrity: sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==} + '@next/swc-linux-arm64-musl@14.2.4': + resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4193,8 +4195,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-gnu@14.2.3': - resolution: {integrity: sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==} + '@next/swc-linux-x64-gnu@14.2.4': + resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4205,8 +4207,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@14.2.3': - resolution: {integrity: sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==} + '@next/swc-linux-x64-musl@14.2.4': + resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4217,8 +4219,8 @@ packages: cpu: [arm64] os: [win32] - '@next/swc-win32-arm64-msvc@14.2.3': - resolution: {integrity: sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==} + '@next/swc-win32-arm64-msvc@14.2.4': + resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -4229,8 +4231,8 @@ packages: cpu: [ia32] os: [win32] - '@next/swc-win32-ia32-msvc@14.2.3': - resolution: {integrity: sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==} + '@next/swc-win32-ia32-msvc@14.2.4': + resolution: {integrity: sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -4241,8 +4243,8 @@ packages: cpu: [x64] os: [win32] - '@next/swc-win32-x64-msvc@14.2.3': - resolution: {integrity: sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==} + '@next/swc-win32-x64-msvc@14.2.4': + resolution: {integrity: sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -9469,8 +9471,8 @@ packages: sass: optional: true - next@14.2.3: - resolution: {integrity: sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==} + next@14.2.4: + resolution: {integrity: sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -10396,6 +10398,10 @@ packages: q@1.5.1: resolution: {integrity: sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==} engines: {node: '>=0.6.0', teleport: '>=0.2.0'} + deprecated: |- + You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other. + + (For a CapTP with native promises, see @endo/eventual-send and @endo/captp) qjobs@1.2.0: resolution: {integrity: sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==} @@ -14586,7 +14592,7 @@ snapshots: '@next/env@13.5.1': {} - '@next/env@14.2.3': {} + '@next/env@14.2.4': {} '@next/eslint-plugin-next@14.2.3': dependencies: @@ -14595,55 +14601,55 @@ snapshots: '@next/swc-darwin-arm64@13.5.1': optional: true - '@next/swc-darwin-arm64@14.2.3': + '@next/swc-darwin-arm64@14.2.4': optional: true '@next/swc-darwin-x64@13.5.1': optional: true - '@next/swc-darwin-x64@14.2.3': + '@next/swc-darwin-x64@14.2.4': optional: true '@next/swc-linux-arm64-gnu@13.5.1': optional: true - '@next/swc-linux-arm64-gnu@14.2.3': + '@next/swc-linux-arm64-gnu@14.2.4': optional: true '@next/swc-linux-arm64-musl@13.5.1': optional: true - '@next/swc-linux-arm64-musl@14.2.3': + '@next/swc-linux-arm64-musl@14.2.4': optional: true '@next/swc-linux-x64-gnu@13.5.1': optional: true - '@next/swc-linux-x64-gnu@14.2.3': + '@next/swc-linux-x64-gnu@14.2.4': optional: true '@next/swc-linux-x64-musl@13.5.1': optional: true - '@next/swc-linux-x64-musl@14.2.3': + '@next/swc-linux-x64-musl@14.2.4': optional: true '@next/swc-win32-arm64-msvc@13.5.1': optional: true - '@next/swc-win32-arm64-msvc@14.2.3': + '@next/swc-win32-arm64-msvc@14.2.4': optional: true '@next/swc-win32-ia32-msvc@13.5.1': optional: true - '@next/swc-win32-ia32-msvc@14.2.3': + '@next/swc-win32-ia32-msvc@14.2.4': optional: true '@next/swc-win32-x64-msvc@13.5.1': optional: true - '@next/swc-win32-x64-msvc@14.2.3': + '@next/swc-win32-x64-msvc@14.2.4': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -15066,10 +15072,10 @@ snapshots: '@opentelemetry/semantic-conventions@1.24.1': {} - '@pigment-css/nextjs-plugin@0.0.14(@types/react@18.2.55)(next@14.2.3(@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.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)': dependencies: '@pigment-css/unplugin': 0.0.14(@types/react@18.2.55)(react@18.2.0) - next: 14.2.3(@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) + 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 @@ -21365,9 +21371,9 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@14.2.3(@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): + 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): dependencies: - '@next/env': 14.2.3 + '@next/env': 14.2.4 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001599 @@ -21377,15 +21383,15 @@ snapshots: react-dom: 18.2.0(react@18.2.0) styled-jsx: 5.1.1(@babel/core@7.24.7)(babel-plugin-macros@3.1.0)(react@18.2.0) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.3 - '@next/swc-darwin-x64': 14.2.3 - '@next/swc-linux-arm64-gnu': 14.2.3 - '@next/swc-linux-arm64-musl': 14.2.3 - '@next/swc-linux-x64-gnu': 14.2.3 - '@next/swc-linux-x64-musl': 14.2.3 - '@next/swc-win32-arm64-msvc': 14.2.3 - '@next/swc-win32-ia32-msvc': 14.2.3 - '@next/swc-win32-x64-msvc': 14.2.3 + '@next/swc-darwin-arm64': 14.2.4 + '@next/swc-darwin-x64': 14.2.4 + '@next/swc-linux-arm64-gnu': 14.2.4 + '@next/swc-linux-arm64-musl': 14.2.4 + '@next/swc-linux-x64-gnu': 14.2.4 + '@next/swc-linux-x64-musl': 14.2.4 + '@next/swc-win32-arm64-msvc': 14.2.4 + '@next/swc-win32-ia32-msvc': 14.2.4 + '@next/swc-win32-x64-msvc': 14.2.4 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.44.1 transitivePeerDependencies: