From 65408b1f3e9a022c9baf51eb8d5af7285da72a65 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Thu, 14 Mar 2024 04:22:46 -0300 Subject: [PATCH 1/9] [material-ui][Progress] Add Circular progress gradient demo from Github comment (#40559) --- .../progress/CustomizedProgressBars.js | 24 +++++++++++++++++-- .../progress/CustomizedProgressBars.tsx | 23 ++++++++++++++++-- .../CustomizedProgressBars.tsx.preview | 1 + 3 files changed, 44 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/progress/CustomizedProgressBars.js b/docs/data/material/components/progress/CustomizedProgressBars.js index 0eb012a3ce01c7..df1c522d6bc9b6 100644 --- a/docs/data/material/components/progress/CustomizedProgressBars.js +++ b/docs/data/material/components/progress/CustomizedProgressBars.js @@ -1,6 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import CircularProgress, { circularProgressClasses, } from '@mui/material/CircularProgress'; @@ -53,12 +54,31 @@ function FacebookCircularProgress(props) { ); } +// From https://github.com/mui/material-ui/issues/9496#issuecomment-959408221 + +function GradientCircularProgress() { + return ( + + + + + + + + + + + + ); +} + export default function CustomizedProgressBars() { return ( - + +
- + ); } diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx b/docs/data/material/components/progress/CustomizedProgressBars.tsx index a3951b14b7bc23..7a6d658104e463 100644 --- a/docs/data/material/components/progress/CustomizedProgressBars.tsx +++ b/docs/data/material/components/progress/CustomizedProgressBars.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import CircularProgress, { circularProgressClasses, CircularProgressProps, @@ -54,12 +55,30 @@ function FacebookCircularProgress(props: CircularProgressProps) { ); } +// From https://github.com/mui/material-ui/issues/9496#issuecomment-959408221 +function GradientCircularProgress() { + return ( + + + + + + + + + + + + ); +} + export default function CustomizedProgressBars() { return ( - + +
- + ); } diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview b/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview index fc729dfa08cbc3..af47cf1601ebf2 100644 --- a/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview +++ b/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview @@ -1,3 +1,4 @@ +
\ No newline at end of file From c25839e506deffb0ceab451c07ccabaf18ddf13d Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Thu, 14 Mar 2024 20:45:04 +0530 Subject: [PATCH 2/9] [material-ui][Select] Fix variant type (#41405) --- packages/mui-material/src/Select/Select.d.ts | 28 ++-- .../mui-material/src/Select/Select.spec.tsx | 122 +++++++++++++++++- 2 files changed, 129 insertions(+), 21 deletions(-) diff --git a/packages/mui-material/src/Select/Select.d.ts b/packages/mui-material/src/Select/Select.d.ts index cbf55494ba697f..c39944e1e0ded8 100644 --- a/packages/mui-material/src/Select/Select.d.ts +++ b/packages/mui-material/src/Select/Select.d.ts @@ -148,7 +148,7 @@ export interface BaseSelectProps * The variant to use. * @default 'outlined' */ - variant?: 'filled' | 'standard' | 'outlined'; + variant?: SelectVariants; } export interface FilledSelectProps extends Omit { @@ -172,20 +172,15 @@ export interface OutlinedSelectProps extends Omit = BaseSelectProps & - (Variant extends 'filled' - ? FilledSelectProps - : Variant extends 'standard' - ? StandardSelectProps - : OutlinedSelectProps); +export type SelectProps = + | (FilledSelectProps & BaseSelectProps) + | (StandardSelectProps & BaseSelectProps) + | (OutlinedSelectProps & BaseSelectProps); /** * @@ -198,15 +193,8 @@ export type SelectProps< * - [Select API](https://mui.com/material-ui/api/select/) * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/) */ - -export default function Select( - props: { - /** - * The variant to use. - * @default 'outlined' - */ - variant?: Variant; - } & Omit, 'variant'>, +export default function Select( + props: SelectProps, ): JSX.Element & { muiName: string; }; diff --git a/packages/mui-material/src/Select/Select.spec.tsx b/packages/mui-material/src/Select/Select.spec.tsx index 25283d8a874054..78f69c76c606d0 100644 --- a/packages/mui-material/src/Select/Select.spec.tsx +++ b/packages/mui-material/src/Select/Select.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select, { SelectChangeEvent, SelectProps } from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem'; import { createTheme } from '@mui/material/styles'; @@ -75,4 +75,124 @@ function genericValueTest() { }, }} />; + + ; + ; + + ; + // @ts-expect-error hiddenLabel is not present in outlined variant + ; + + const defaultProps: SelectProps = {}; + const outlinedProps: SelectProps = { + variant: 'outlined', + }; + const filledProps: SelectProps = { + variant: 'filled', + }; + const standardProps: SelectProps = { + variant: 'standard', + }; + + ; + ; + {...outlinedProps} />; + {...defaultProps} />; + {...filledProps} />; + + const rawDefaultProps: SelectProps = {}; + const rawOutlinedProps: SelectProps = { + variant: 'outlined', + }; + const rawFilledProps: SelectProps = { + variant: 'filled', + }; + + ; + ; + // @ts-expect-error hiddenLabel is not present in outlined variant + ; + // @ts-expect-error hiddenLabel is not present in standard variant + { + if (props.multiple) { + props.onChange(event.target.value as T[]); + } else { + props.onChange(event.target.value as T); + } + }} + > + {props.options.map((option, index) => ( + + {getOptionText(option)} + + ))} + + ); +}; From 2e7bb84826fb6e053c5d09cc866505b356200de9 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 15 Mar 2024 12:06:18 +0530 Subject: [PATCH 3/9] [pigment-css][nextjs-plugin] Fix alias resolver (#41494) --- packages/pigment-css-unplugin/src/index.ts | 55 +++++++++++++++++++--- 1 file changed, 48 insertions(+), 7 deletions(-) diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts index 510e007267ef0c..38ef63479089ee 100644 --- a/packages/pigment-css-unplugin/src/index.ts +++ b/packages/pigment-css-unplugin/src/index.ts @@ -1,3 +1,4 @@ +import * as path from 'node:path'; import { transformAsync } from '@babel/core'; import { type Preprocessor, @@ -21,6 +22,7 @@ import { extendTheme, type Theme as BaseTheme, } from '@pigment-css/react/utils'; +import type { ResolvePluginInstance } from 'webpack'; type NextMeta = { type: 'next'; @@ -60,6 +62,8 @@ function hasCorectExtension(fileName: string) { const VIRTUAL_CSS_FILE = `\0zero-runtime-styles.css`; const VIRTUAL_THEME_FILE = `\0zero-runtime-theme.js`; +type AsyncResolver = (what: string, importer: string, stack: string[]) => Promise; + function isZeroRuntimeThemeFile(fileName: string) { return fileName === VIRTUAL_CSS_FILE || fileName === VIRTUAL_THEME_FILE; } @@ -134,6 +138,22 @@ export const plugin = createUnplugin((options) => { }; }, }; + + let webpackResolver: AsyncResolver; + + const asyncResolve: AsyncResolver = async (what, importer, stack) => { + const result = asyncResolveOpt?.(what); + if (typeof result === 'string') { + return result; + } + // Use Webpack's resolver to resolve actual path but + // ignore next.js files during evaluation phase of WyW + if (webpackResolver && !what.startsWith('next')) { + return webpackResolver(what, importer, stack); + } + return asyncResolveFallback(what, importer, stack); + }; + const linariaTransformPlugin: UnpluginOptions = { name: 'zero-plugin-transform-linaria', enforce: 'post', @@ -143,14 +163,35 @@ export const plugin = createUnplugin((options) => { transformInclude(id) { return isZeroRuntimeProcessableFile(id, transformLibraries); }, - async transform(code, id) { - const asyncResolve: typeof asyncResolveFallback = async (what, importer, stack) => { - const result = asyncResolveOpt?.(what); - if (typeof result === 'string') { - return result; - } - return asyncResolveFallback(what, importer, stack); + webpack(compiler) { + const resolverPlugin: ResolvePluginInstance = { + apply(resolver) { + webpackResolver = function webpackAsyncResolve( + what: string, + importer: string, + stack: string[], + ) { + const context = path.isAbsolute(importer) + ? path.dirname(importer) + : path.join(process.cwd(), path.dirname(importer)); + return new Promise((resolve, reject) => { + resolver.resolve({}, context, what, { stack: new Set(stack) }, (err, result) => { + if (err) { + reject(err); + } else if (result) { + resolve(result); + } else { + reject(new Error(`${process.env.PACKAGE_NAME}: Cannot resolve ${what}`)); + } + }); + }); + }; + }, }; + compiler.options.resolve.plugins = compiler.options.resolve.plugins || []; + compiler.options.resolve.plugins.push(resolverPlugin); + }, + async transform(code, id) { const transformServices = { options: { filename: id, From ba9baaef6692e8031912eaaa4842509eff27da56 Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Fri, 15 Mar 2024 15:38:20 +0900 Subject: [PATCH 4/9] [website] Split Toolpad documentation (#41316) --- docs/src/components/header/HeaderNavBar.tsx | 2 +- docs/src/components/header/HeaderNavDropdown.tsx | 8 ++++---- docs/src/layouts/AppFooter.tsx | 2 +- docs/src/modules/components/AppSearch.js | 2 ++ .../src/modules/components/MuiProductSelector.tsx | 4 ++-- .../modules/utils/getProductInfoFromUrl.test.js | 15 +++++++++++---- docs/src/modules/utils/getProductInfoFromUrl.ts | 12 +++++++++++- docs/src/route.ts | 1 + docs/writing-rules/BrandName.yml | 2 +- 9 files changed, 34 insertions(+), 14 deletions(-) diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index a5577aa05ab62a..6a62f99818448c 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -302,7 +302,7 @@ export default function HeaderNavBar() { id={PRODUCT_IDS[4]} href={ROUTES.productToolpad} icon={} - name="MUI Toolpad" + name="Toolpad" chip={} description="Low-code admin builder." /> diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx index 95fbe4c39c0c70..b48ed4d0a64b44 100644 --- a/docs/src/components/header/HeaderNavDropdown.tsx +++ b/docs/src/components/header/HeaderNavDropdown.tsx @@ -76,7 +76,7 @@ const PRODUCTS = [ href: ROUTES.productDesignKits, }, { - name: 'MUI Toolpad', + name: 'Toolpad', description: 'Low-code admin builder.', href: ROUTES.productToolpad, chip: 'Beta', @@ -110,9 +110,9 @@ const DOCS = [ href: ROUTES.xIntro, }, { - name: 'MUI Toolpad', - description: 'Low-code admin builder.', - href: ROUTES.toolpadDocs, + name: 'Toolpad', + description: 'Low-code admin builder', + href: ROUTES.toolpadStudioDocs, chip: 'Beta', }, ]; diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx index 6ca7ef50d6a7bd..d8655f2d9cc87d 100644 --- a/docs/src/layouts/AppFooter.tsx +++ b/docs/src/layouts/AppFooter.tsx @@ -83,7 +83,7 @@ export default function AppFooter(props: AppFooterProps) { MUI X - MUI Toolpad + Toolpad Templates diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js index 5cb970959fe432..a17cd744d5248b 100644 --- a/docs/src/modules/components/AppSearch.js +++ b/docs/src/modules/components/AppSearch.js @@ -273,6 +273,8 @@ const productNameProductId = { x: 'MUI X', system: 'MUI System', toolpad: 'Toolpad', + 'toolpad-studio': 'Toolpad Studio', + 'toolpad-core': 'Toolpad Core', }; export function convertProductIdToName(productInfo) { diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx index abd7ae14f094bb..27fd949782cdc8 100644 --- a/docs/src/modules/components/MuiProductSelector.tsx +++ b/docs/src/modules/components/MuiProductSelector.tsx @@ -186,7 +186,7 @@ export default function MuiProductSelector() {
  • ({ p: 2, pr: 3, @@ -204,7 +204,7 @@ export default function MuiProductSelector() { } - name="MUI Toolpad" + name="Toolpad" description="Low-code admin builder." chip={} /> diff --git a/docs/src/modules/utils/getProductInfoFromUrl.test.js b/docs/src/modules/utils/getProductInfoFromUrl.test.js index 61061f7e2af56d..90b14261522b73 100644 --- a/docs/src/modules/utils/getProductInfoFromUrl.test.js +++ b/docs/src/modules/utils/getProductInfoFromUrl.test.js @@ -90,10 +90,17 @@ describe('getProductInfoFromUrl', () => { }); }); - it('should handle MUI Toolpad', () => { - expect(getProductInfoFromUrl('/toolpad/getting-started/first-app/')).to.deep.equal({ - productCategoryId: 'null', - productId: 'toolpad', + it('should handle Toolpad Core', () => { + expect(getProductInfoFromUrl('/toolpad/getting-started/')).to.deep.equal({ + productCategoryId: 'toolpad', + productId: 'toolpad-core', + }); + }); + + it('should handle Toolpad Studio', () => { + expect(getProductInfoFromUrl('/toolpad/studio/getting-started/first-app/')).to.deep.equal({ + productCategoryId: 'toolpad', + productId: 'toolpad-studio', }); }); }); diff --git a/docs/src/modules/utils/getProductInfoFromUrl.ts b/docs/src/modules/utils/getProductInfoFromUrl.ts index 763141fb4ed569..f2577ae8c50b13 100644 --- a/docs/src/modules/utils/getProductInfoFromUrl.ts +++ b/docs/src/modules/utils/getProductInfoFromUrl.ts @@ -51,7 +51,17 @@ export default function getProductInfoFromUrl(asPath: string): MuiProductInfo { } } - if (firstFolder === 'toolpad' || firstFolder === 'docs') { + if (firstFolder === 'toolpad') { + productCategoryId = 'toolpad'; + const secondFolder = asPathWithoutLang.replace(/^\/+[^/]+\/([^/]+)\/.*/, '$1'); + if (secondFolder === 'studio') { + productId = 'toolpad-studio'; + } else { + productId = 'toolpad-core'; + } + } + + if (firstFolder === 'docs') { productId = firstFolder; } diff --git a/docs/src/route.ts b/docs/src/route.ts index 792ff14c1c056c..b4a0c5828de3a9 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -50,6 +50,7 @@ const ROUTES = { treeViewOverview: '/x/react-tree-view/', // Toolpad pages toolpadDocs: '/toolpad/getting-started/', + toolpadStudioDocs: '/toolpad/studio/getting-started', // External pages rssFeed: '/feed/blog/rss.xml', handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b', diff --git a/docs/writing-rules/BrandName.yml b/docs/writing-rules/BrandName.yml index ac48bba0ddbd88..5669e7912b2f47 100644 --- a/docs/writing-rules/BrandName.yml +++ b/docs/writing-rules/BrandName.yml @@ -15,7 +15,7 @@ swap: MUI System: MUI System MUI Store: MUI Store MUI Core: MUI Core - MUI Toolpad: MUI Toolpad + Toolpad: Toolpad MUI Connect: MUI Connect Stack Overflow: Stack Overflow Pigment CSS: Pigment CSS From 5c956bab138a7d52faf0882ea670e3f6ee7d35fd Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 15 Mar 2024 12:23:20 +0530 Subject: [PATCH 5/9] [pigment-css] Add Box component (#41451) --- packages/pigment-css-react/package.json | 6 +++ packages/pigment-css-react/src/Box.d.ts | 26 ++++++++++ packages/pigment-css-react/src/Box.jsx | 51 +++++++++++++++++++ packages/pigment-css-react/src/base.d.ts | 29 +++++++++++ .../pigment-css-react/src/processors/sx.ts | 2 +- packages/pigment-css-react/src/styled.d.ts | 30 +---------- packages/pigment-css-react/tests/Box.spec.tsx | 22 ++++++++ packages/pigment-css-react/tsup.config.ts | 2 +- 8 files changed, 138 insertions(+), 30 deletions(-) create mode 100644 packages/pigment-css-react/src/Box.d.ts create mode 100644 packages/pigment-css-react/src/Box.jsx create mode 100644 packages/pigment-css-react/tests/Box.spec.tsx diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json index cc67cf53f2e27d..1759a5fb764283 100644 --- a/packages/pigment-css-react/package.json +++ b/packages/pigment-css-react/package.json @@ -132,6 +132,12 @@ }, "./exports/createUseThemeProps": { "default": "./exports/createUseThemeProps.js" + }, + "./Box": { + "types": "./build/Box.d.ts", + "import": "./build/Box.mjs", + "require": "./build/Box.js", + "default": "./build/Box.js" } }, "nx": { diff --git a/packages/pigment-css-react/src/Box.d.ts b/packages/pigment-css-react/src/Box.d.ts new file mode 100644 index 00000000000000..8cfb27534aa6d4 --- /dev/null +++ b/packages/pigment-css-react/src/Box.d.ts @@ -0,0 +1,26 @@ +import type { BaseDefaultProps, Substitute, NoInfer } from './base'; +import type { SxProp } from './sx'; + +export type PolymorphicComponentProps< + BaseProps extends object, + AsTarget extends React.ElementType | undefined, + AsTargetProps extends object = AsTarget extends React.ElementType + ? React.ComponentPropsWithRef + : BaseDefaultProps, +> = NoInfer, 'as' | 'component'>> & { + as?: AsTarget; + component?: AsTarget; + sx?: SxProp; + children?: React.ReactNode; +}; + +export interface PolymorphicComponent + extends React.ForwardRefExoticComponent { + ( + props: PolymorphicComponentProps, + ): JSX.Element; +} + +declare const Box: PolymorphicComponent<{}>; + +export { Box }; diff --git a/packages/pigment-css-react/src/Box.jsx b/packages/pigment-css-react/src/Box.jsx new file mode 100644 index 00000000000000..be87c121f7a3d4 --- /dev/null +++ b/packages/pigment-css-react/src/Box.jsx @@ -0,0 +1,51 @@ +import * as React from 'react'; + +// eslint-disable-next-line react/prop-types +export const Box = React.forwardRef( + ( + { + as = 'div', + // Added to support compatibility with @mui/system + component, + /** + * The type of the transformed sx prop is either a + * "string" if the css passed was fully static or an + * object with the following shape: + * { + * className: string, + * vars: Record + * } + */ + sx, + className, + style, + ...rest + }, + ref, + ) => { + const Component = component ?? as; + // eslint-disable-next-line react/prop-types + const sxClass = typeof sx === 'string' ? sx : sx?.className; + const classes = [className, sxClass].filter(Boolean).join(' '); + // eslint-disable-next-line react/prop-types + const sxVars = sx && typeof sx !== 'string' ? sx?.vars : {}; + const varStyles = {}; + + if (sxVars) { + Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => { + if (typeof value === 'string' || isUnitLess) { + varStyles[`--${cssVariable}`] = value; + } else { + varStyles[`--${cssVariable}`] = `${value}px`; + } + }); + } + + const styles = { + ...style, + ...varStyles, + }; + + return ; + }, +); diff --git a/packages/pigment-css-react/src/base.d.ts b/packages/pigment-css-react/src/base.d.ts index 0aae8b1e5adf86..c524bd4a3f7e43 100644 --- a/packages/pigment-css-react/src/base.d.ts +++ b/packages/pigment-css-react/src/base.d.ts @@ -35,3 +35,32 @@ export type CSSObjectNoCallback = | CSSPropertiesMultiValue | CSSPseudosNoCallback | CSSOthersObjectNoCallback; + +export type BaseDefaultProps = object; + +export type NoInfer = [T][T extends any ? 0 : never]; +type FastOmit = { + [K in keyof T as K extends U ? never : K]: T[K]; +}; + +export type Substitute = FastOmit & B; + +export type PolymorphicComponentProps< + SxProp, + BaseProps extends object, + AsTarget extends React.ElementType | undefined, + AsTargetProps extends object = AsTarget extends React.ElementType + ? React.ComponentPropsWithRef + : BaseDefaultProps, +> = NoInfer, 'as'>> & { + as?: AsTarget; + sx?: SxProp; + children?: React.ReactNode; +}; + +export interface PolymorphicComponent + extends React.ForwardRefExoticComponent { + ( + props: PolymorphicComponentProps, + ): JSX.Element; +} diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index 86cf7a58d72ffa..b0293aa8c58f93 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -94,7 +94,7 @@ export class SxProcessor extends BaseProcessor { doRuntimeReplacement() { const t = this.astService; - // do not replace if sx prop is not on zero-runtime styled component + // do not replace if sx prop is not a Pigment styled component if (!this.elementClassName) { return; } diff --git a/packages/pigment-css-react/src/styled.d.ts b/packages/pigment-css-react/src/styled.d.ts index b518a903161460..d0fd15efb7351a 100644 --- a/packages/pigment-css-react/src/styled.d.ts +++ b/packages/pigment-css-react/src/styled.d.ts @@ -1,19 +1,11 @@ import type * as React from 'react'; -import type { CSSObject } from './base'; +import type { BaseDefaultProps, CSSObject, PolymorphicComponent, Substitute } from './base'; import type { ThemeArgs } from './theme'; import type { SxProp } from './sx'; import { Primitve } from './keyframes'; type Falsy = false | 0 | '' | null | undefined; -type BaseDefaultProps = object; - -export type NoInfer = [T][T extends any ? 0 : never]; -type FastOmit = { - [K in keyof T as K extends U ? never : K]: T[K]; -}; -export type Substitute = FastOmit & B; - export interface StyledVariants { props: Partial | ((props: Props) => boolean); style: CSSObject; @@ -31,26 +23,8 @@ export type StyledArgument = | StyledCssArgument | StyledCallback; -export type PolymorphicComponentProps< - BaseProps extends object, - AsTarget extends React.ElementType | undefined, - AsTargetProps extends object = AsTarget extends React.ElementType - ? React.ComponentPropsWithRef - : BaseDefaultProps, -> = NoInfer, 'as'>> & { - as?: AsTarget; - sx?: SxProp; -}; - -export interface PolymorphicComponent - extends React.ForwardRefExoticComponent { - ( - props: PolymorphicComponentProps, - ): JSX.Element; -} - export interface StyledComponent - extends PolymorphicComponent { + extends PolymorphicComponent { defaultProps?: Partial | undefined; toString: () => string; } diff --git a/packages/pigment-css-react/tests/Box.spec.tsx b/packages/pigment-css-react/tests/Box.spec.tsx new file mode 100644 index 00000000000000..8b28efe600b1be --- /dev/null +++ b/packages/pigment-css-react/tests/Box.spec.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { Box } from '@pigment-css/react/Box'; + +export function App() { + return ( + + ({ color: 'primary' })}> + Hello{' '} + + Link + + + Dialog + + {/* @ts-expect-error */} + + Dialog 2 + + + + ); +} diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts index 89ce3641d5dd3f..4e7f5ee79cd81b 100644 --- a/packages/pigment-css-react/tsup.config.ts +++ b/packages/pigment-css-react/tsup.config.ts @@ -13,7 +13,7 @@ const baseConfig: Options = { export default defineConfig([ { ...baseConfig, - entry: ['./src/index.ts', './src/theme.ts'], + entry: ['./src/index.ts', './src/theme.ts', './src/Box.jsx'], }, { ...baseConfig, From f4f337c3ccd8485b801bcebbe0486fdce27ecc30 Mon Sep 17 00:00:00 2001 From: Jack Herrington Date: Fri, 15 Mar 2024 00:05:00 -0700 Subject: [PATCH 6/9] [docs][pigment-css] Fixing location of the ExtendTheme type in the docs (#41499) --- packages/pigment-css-react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md index 6d7e0ccbfd39e3..19e8fea51cef17 100644 --- a/packages/pigment-css-react/README.md +++ b/packages/pigment-css-react/README.md @@ -598,7 +598,7 @@ To get the type checking for the theme, you need to augment the theme type: ```ts // any file that is included in your tsconfig.json -import type { ExtendTheme } from '@pigment-css/react'; +import type { ExtendTheme } from '@pigment-css/react/theme'; declare module '@pigment-css/react/theme' { interface ThemeTokens { From c76a373f00f1f37b15df228dac3e9c98850d328c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Fri, 15 Mar 2024 10:02:48 +0100 Subject: [PATCH 7/9] [code-infra] Rename @mui-internal/docs-utils to @mui/internal-docs-utils (#41498) --- .codesandbox/ci.json | 6 +-- apps/pnpm-workspace.yaml | 2 +- babel.config.js | 2 +- docs/package.json | 2 +- docs/scripts/formattedTSDemos.js | 2 +- .../components/ApiPage/list/ClassesList.tsx | 2 +- .../ApiPage/sections/ClassesSection.tsx | 2 +- .../components/ApiPage/table/ClassesTable.tsx | 2 +- package.json | 2 +- .../docs-utils/.npmignore | 0 .../docs-utils/CHANGELOG.md | 4 ++ .../docs-utils/README.md | 2 +- .../docs-utils/package.json | 6 +-- .../src/ComponentClassDefinition.ts | 0 .../docs-utils/src/createTypeScriptProject.ts | 0 .../src/getPropsFromComponentNode.ts | 0 .../docs-utils/src/index.ts | 0 .../docs-utils/tsconfig.build.json | 0 .../docs-utils/tsconfig.json | 0 packages-internal/scripts/CHANGELOG.md | 2 +- packages-internal/scripts/package.json | 2 +- .../scripts/tsconfig.typecheck.json | 2 +- .../src/getPropTypesFromFile.ts | 2 +- .../test/typescript-to-proptypes.test.ts | 2 +- .../ApiBuilders/ComponentApiBuilder.ts | 2 +- packages/api-docs-builder/ProjectSettings.ts | 2 +- packages/api-docs-builder/buildApiUtils.ts | 2 +- packages/api-docs-builder/package.json | 2 +- packages/api-docs-builder/tsconfig.json | 2 +- .../utils/parseSlotsAndClasses.ts | 2 +- packages/markdown/package.json | 2 +- pnpm-lock.yaml | 38 +++++++++---------- scripts/generateProptypes.ts | 2 +- tsconfig.json | 2 +- webpackBaseConfig.js | 2 +- 35 files changed, 53 insertions(+), 49 deletions(-) rename {packages => packages-internal}/docs-utils/.npmignore (100%) rename {packages => packages-internal}/docs-utils/CHANGELOG.md (64%) rename {packages => packages-internal}/docs-utils/README.md (89%) rename {packages => packages-internal}/docs-utils/package.json (87%) rename {packages => packages-internal}/docs-utils/src/ComponentClassDefinition.ts (100%) rename {packages => packages-internal}/docs-utils/src/createTypeScriptProject.ts (100%) rename {packages => packages-internal}/docs-utils/src/getPropsFromComponentNode.ts (100%) rename {packages => packages-internal}/docs-utils/src/index.ts (100%) rename {packages => packages-internal}/docs-utils/tsconfig.build.json (100%) rename {packages => packages-internal}/docs-utils/tsconfig.json (100%) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 6b395d8ebe8487..71283d06fdff0c 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -3,7 +3,6 @@ "installCommand": "install:codesandbox", "node": "18", "packages": [ - "packages/docs-utils", "packages/markdown", "packages/mui-babel-macros", "packages/mui-base", @@ -23,6 +22,7 @@ "packages/mui-system", "packages/mui-types", "packages/mui-utils", + "packages-internal/docs-utils", "packages-internal/scripts" ], "publishDirectory": { @@ -32,6 +32,7 @@ "@mui/docs": "packages/mui-docs/build", "@mui/icons-material": "packages/mui-icons-material/build", "@mui/internal-babel-macros": "packages/mui-babel-macros", + "@mui/internal-docs-utils": "packages-internal/docs-utils", "@mui/internal-markdown": "packages/markdown", "@mui/internal-scripts": "packages-internal/scripts", "@mui/joy": "packages/mui-joy/build", @@ -45,8 +46,7 @@ "@mui/styles": "packages/mui-styles/build", "@mui/system": "packages/mui-system/build", "@mui/types": "packages/mui-types/build", - "@mui/utils": "packages/mui-utils/build", - "@mui-internal/docs-utils": "packages/docs-utils" + "@mui/utils": "packages/mui-utils/build" }, "sandboxes": [ "/examples/material-ui-cra-ts", diff --git a/apps/pnpm-workspace.yaml b/apps/pnpm-workspace.yaml index d770d322ad42ee..da23d95e53e26f 100644 --- a/apps/pnpm-workspace.yaml +++ b/apps/pnpm-workspace.yaml @@ -2,7 +2,7 @@ packages: - 'local-ui-lib' - 'pigment-*' - '../packages/waterfall' - - '../packages/docs-utils' + - '../packages-internal/docs-utils' - '../packages/test-utils' - '../packages-internal/*' - '../packages/mui-*' diff --git a/babel.config.js b/babel.config.js index 4c98dcc08596b0..9b3ca62593f763 100644 --- a/babel.config.js +++ b/babel.config.js @@ -33,7 +33,7 @@ module.exports = function getBabelConfig(api) { '@mui/material-next': resolveAliasPath('./packages/mui-material-next/src'), '@mui/joy': resolveAliasPath('./packages/mui-joy/src'), '@pigment-css/react': resolveAliasPath('./packages/pigment-css-react/src'), - '@mui-internal/docs-utils': resolveAliasPath('./packages/docs-utils/src'), + '@mui/internal-docs-utils': resolveAliasPath('./packages-internal/docs-utils/src'), docs: resolveAliasPath('./docs'), test: resolveAliasPath('./test'), }; diff --git a/docs/package.json b/docs/package.json index dc1b044b649314..dcdfb7796159dc 100644 --- a/docs/package.json +++ b/docs/package.json @@ -116,8 +116,8 @@ "devDependencies": { "@babel/plugin-transform-react-constant-elements": "^7.23.3", "@babel/preset-typescript": "^7.23.3", + "@mui/internal-docs-utils": "workspace:^", "@mui/internal-scripts": "workspace:^", - "@mui-internal/docs-utils": "workspace:^", "@mui-internal/test-utils": "workspace:^", "@types/autosuggest-highlight": "^3.2.3", "@types/chai": "^4.3.12", diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index 18248d3b10b769..abdf96b6263d12 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/docs/scripts/formattedTSDemos.js @@ -23,7 +23,7 @@ const { createTypeScriptProjectBuilder, } = require('@mui-internal/api-docs-builder/utils/createTypeScriptProject'); const yargs = require('yargs'); -const { fixBabelGeneratorIssues, fixLineEndings } = require('@mui-internal/docs-utils'); +const { fixBabelGeneratorIssues, fixLineEndings } = require('@mui/internal-docs-utils'); const { default: CORE_TYPESCRIPT_PROJECTS } = require('../../scripts/coreTypeScriptProjects'); const babelConfig = { diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx index fdf4497f465f4b..d7366af1b60239 100644 --- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx +++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import kebabCase from 'lodash/kebabCase'; -import { ComponentClassDefinition } from '@mui-internal/docs-utils'; +import { ComponentClassDefinition } from '@mui/internal-docs-utils'; import { useTranslate } from '@mui/docs/i18n'; import ExpandableApiItem, { ApiItemContaier, diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx index 5f6badcd5150c8..bc09404849b40c 100644 --- a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx +++ b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/no-danger */ import * as React from 'react'; import { useTranslate } from '@mui/docs/i18n'; -import { ComponentClassDefinition } from '@mui-internal/docs-utils'; +import { ComponentClassDefinition } from '@mui/internal-docs-utils'; import Box from '@mui/material/Box'; import ToggleDisplayOption, { ApiDisplayOptions, diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx index b2c98cf1674cf9..f2546202208eb1 100644 --- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx +++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/no-danger */ import * as React from 'react'; -import { ComponentClassDefinition } from '@mui-internal/docs-utils'; +import { ComponentClassDefinition } from '@mui/internal-docs-utils'; import { styled, alpha } from '@mui/material/styles'; import { brandingDarkTheme as darkTheme, diff --git a/package.json b/package.json index 3fe522de0f0ea8..e27bbd1eae44b9 100644 --- a/package.json +++ b/package.json @@ -105,10 +105,10 @@ "@babel/preset-typescript": "^7.23.3", "@babel/register": "^7.23.7", "@mnajdova/enzyme-adapter-react-18": "^0.2.0", + "@mui/internal-docs-utils": "workspace:^", "@mui/internal-scripts": "workspace:^", "@mui-internal/api-docs-builder": "workspace:^", "@mui-internal/api-docs-builder-core": "workspace:^", - "@mui-internal/docs-utils": "workspace:^", "@mui-internal/test-utils": "workspace:^", "@mui/joy": "workspace:*", "@mui/material": "workspace:^", diff --git a/packages/docs-utils/.npmignore b/packages-internal/docs-utils/.npmignore similarity index 100% rename from packages/docs-utils/.npmignore rename to packages-internal/docs-utils/.npmignore diff --git a/packages/docs-utils/CHANGELOG.md b/packages-internal/docs-utils/CHANGELOG.md similarity index 64% rename from packages/docs-utils/CHANGELOG.md rename to packages-internal/docs-utils/CHANGELOG.md index 3255c1a72040cf..f466e1ffab289d 100644 --- a/packages/docs-utils/CHANGELOG.md +++ b/packages-internal/docs-utils/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.0.3 + +Renamed the package to @mui/internal-docs-utils + ## 1.0.2 Fixed incorrectly released package. diff --git a/packages/docs-utils/README.md b/packages-internal/docs-utils/README.md similarity index 89% rename from packages/docs-utils/README.md rename to packages-internal/docs-utils/README.md index 8a19bc3cbc5e1a..92be36e77819af 100644 --- a/packages/docs-utils/README.md +++ b/packages-internal/docs-utils/README.md @@ -1,4 +1,4 @@ -# @mui-internal/docs-utils +# @mui/internal-docs-utils This package contains utilities shared between MUI docs generation scripts. This is an internal package not meant for general use. diff --git a/packages/docs-utils/package.json b/packages-internal/docs-utils/package.json similarity index 87% rename from packages/docs-utils/package.json rename to packages-internal/docs-utils/package.json index a199a615938c69..a33264cd53e1a5 100644 --- a/packages/docs-utils/package.json +++ b/packages-internal/docs-utils/package.json @@ -1,6 +1,6 @@ { - "name": "@mui-internal/docs-utils", - "version": "1.0.2", + "name": "@mui/internal-docs-utils", + "version": "1.0.3", "author": "MUI Team", "description": "Utilities for MUI docs. This is an internal package not meant for general use.", "main": "./build/index.js", @@ -11,7 +11,7 @@ "repository": { "type": "git", "url": "https://github.com/mui/material-ui.git", - "directory": "packages/docs-utils" + "directory": "packages-internal/docs-utils" }, "scripts": { "prebuild": "rimraf ./build", diff --git a/packages/docs-utils/src/ComponentClassDefinition.ts b/packages-internal/docs-utils/src/ComponentClassDefinition.ts similarity index 100% rename from packages/docs-utils/src/ComponentClassDefinition.ts rename to packages-internal/docs-utils/src/ComponentClassDefinition.ts diff --git a/packages/docs-utils/src/createTypeScriptProject.ts b/packages-internal/docs-utils/src/createTypeScriptProject.ts similarity index 100% rename from packages/docs-utils/src/createTypeScriptProject.ts rename to packages-internal/docs-utils/src/createTypeScriptProject.ts diff --git a/packages/docs-utils/src/getPropsFromComponentNode.ts b/packages-internal/docs-utils/src/getPropsFromComponentNode.ts similarity index 100% rename from packages/docs-utils/src/getPropsFromComponentNode.ts rename to packages-internal/docs-utils/src/getPropsFromComponentNode.ts diff --git a/packages/docs-utils/src/index.ts b/packages-internal/docs-utils/src/index.ts similarity index 100% rename from packages/docs-utils/src/index.ts rename to packages-internal/docs-utils/src/index.ts diff --git a/packages/docs-utils/tsconfig.build.json b/packages-internal/docs-utils/tsconfig.build.json similarity index 100% rename from packages/docs-utils/tsconfig.build.json rename to packages-internal/docs-utils/tsconfig.build.json diff --git a/packages/docs-utils/tsconfig.json b/packages-internal/docs-utils/tsconfig.json similarity index 100% rename from packages/docs-utils/tsconfig.json rename to packages-internal/docs-utils/tsconfig.json diff --git a/packages-internal/scripts/CHANGELOG.md b/packages-internal/scripts/CHANGELOG.md index dd86612b025856..92cc3433251004 100644 --- a/packages-internal/scripts/CHANGELOG.md +++ b/packages-internal/scripts/CHANGELOG.md @@ -2,7 +2,7 @@ ## 1.0.1 -- Unpinned version of the @mui-internal/docs-utils dependency. +- Unpinned version of the @mui/internal-docs-utils dependency. - Corrected the README file. ## 1.0.0 diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json index 673d0907edf534..e9175a68b90f9e 100644 --- a/packages-internal/scripts/package.json +++ b/packages-internal/scripts/package.json @@ -30,7 +30,7 @@ "@babel/plugin-syntax-jsx": "^7.23.3", "@babel/plugin-syntax-typescript": "^7.23.3", "@babel/types": "^7.23.9", - "@mui-internal/docs-utils": "workspace:^", + "@mui/internal-docs-utils": "workspace:^", "doctrine": "^3.0.0", "lodash": "^4.17.21", "typescript": "^5.3.3", diff --git a/packages-internal/scripts/tsconfig.typecheck.json b/packages-internal/scripts/tsconfig.typecheck.json index ae133d71c10945..0d271133c6cee3 100644 --- a/packages-internal/scripts/tsconfig.typecheck.json +++ b/packages-internal/scripts/tsconfig.typecheck.json @@ -7,5 +7,5 @@ }, "include": ["./**/*.ts"], "exclude": ["./build", "./node_modules"], - "references": [{ "path": "../../packages/docs-utils/tsconfig.build.json" }] + "references": [{ "path": "../../packages-internal/docs-utils/tsconfig.build.json" }] } diff --git a/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts b/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts index 9b0d034cadcde6..521274b1a9cbd4 100644 --- a/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts +++ b/packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts @@ -4,7 +4,7 @@ import { GetPropsFromComponentDeclarationOptions, getPropsFromComponentNode, TypeScriptProject, -} from '@mui-internal/docs-utils'; +} from '@mui/internal-docs-utils'; import { createUnionType, createUndefinedType, diff --git a/packages-internal/scripts/typescript-to-proptypes/test/typescript-to-proptypes.test.ts b/packages-internal/scripts/typescript-to-proptypes/test/typescript-to-proptypes.test.ts index 769925840e26b8..6b29900311a4a5 100644 --- a/packages-internal/scripts/typescript-to-proptypes/test/typescript-to-proptypes.test.ts +++ b/packages-internal/scripts/typescript-to-proptypes/test/typescript-to-proptypes.test.ts @@ -4,7 +4,7 @@ import * as ts from 'typescript'; import { expect } from 'chai'; import glob from 'fast-glob'; import prettier from 'prettier'; -import { TypeScriptProject, createTypeScriptProjectBuilder } from '@mui-internal/docs-utils'; +import { TypeScriptProject, createTypeScriptProjectBuilder } from '@mui/internal-docs-utils'; import { generatePropTypes } from '../src/generatePropTypes'; import { injectPropTypesInFile } from '../src/injectPropTypesInFile'; import { getPropTypesFromFile } from '../src/getPropTypesFromFile'; diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts index b4e834cb840fbe..cc28ee9f3a0135 100644 --- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts @@ -10,7 +10,7 @@ import remarkVisit from 'unist-util-visit'; import type { Link } from 'mdast'; import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen'; import { renderMarkdown } from '@mui/internal-markdown'; -import { ComponentClassDefinition } from '@mui-internal/docs-utils'; +import { ComponentClassDefinition } from '@mui/internal-docs-utils'; import { ProjectSettings, SortingStrategiesType } from '../ProjectSettings'; import { ComponentInfo, toGitHubPath, writePrettifiedFile } from '../buildApiUtils'; import muiDefaultPropsHandler from '../utils/defaultPropsHandler'; diff --git a/packages/api-docs-builder/ProjectSettings.ts b/packages/api-docs-builder/ProjectSettings.ts index 9ab9ff5ad9c55a..2ba937f0a4e9b2 100644 --- a/packages/api-docs-builder/ProjectSettings.ts +++ b/packages/api-docs-builder/ProjectSettings.ts @@ -1,4 +1,4 @@ -import { ComponentClassDefinition } from '@mui-internal/docs-utils'; +import { ComponentClassDefinition } from '@mui/internal-docs-utils'; import { ComponentInfo, HookInfo } from './buildApiUtils'; import { CreateTypeScriptProjectOptions } from './utils/createTypeScriptProject'; import { CreateDescribeablePropSettings } from './utils/createDescribeableProp'; diff --git a/packages/api-docs-builder/buildApiUtils.ts b/packages/api-docs-builder/buildApiUtils.ts index a62c632111ae4a..726e47069ff899 100644 --- a/packages/api-docs-builder/buildApiUtils.ts +++ b/packages/api-docs-builder/buildApiUtils.ts @@ -3,7 +3,7 @@ import path from 'path'; import * as ts from 'typescript'; import * as prettier from 'prettier'; import kebabCase from 'lodash/kebabCase'; -import { getLineFeed } from '@mui-internal/docs-utils'; +import { getLineFeed } from '@mui/internal-docs-utils'; import { replaceComponentLinks } from './utils/replaceUrl'; import { TypeScriptProject } from './utils/createTypeScriptProject'; diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json index 5f21f9ed85ebbc..6c1f1051f4694d 100644 --- a/packages/api-docs-builder/package.json +++ b/packages/api-docs-builder/package.json @@ -11,7 +11,7 @@ "@babel/core": "^7.23.9", "@babel/preset-typescript": "^7.23.3", "@babel/traverse": "^7.23.9", - "@mui-internal/docs-utils": "workspace:^", + "@mui/internal-docs-utils": "workspace:^", "@mui/internal-markdown": "workspace:^", "ast-types": "^0.14.2", "doctrine": "^3.0.0", diff --git a/packages/api-docs-builder/tsconfig.json b/packages/api-docs-builder/tsconfig.json index 41e0c9ff506e27..4c8cb67b09768f 100644 --- a/packages/api-docs-builder/tsconfig.json +++ b/packages/api-docs-builder/tsconfig.json @@ -14,7 +14,7 @@ "strict": true, "baseUrl": "./", "paths": { - "@mui-internal/docs-utils": ["../docs-utils/src"] + "@mui/internal-docs-utils": ["../docs-utils/src"] } }, "include": ["./**/*.ts", "./**/*.js"], diff --git a/packages/api-docs-builder/utils/parseSlotsAndClasses.ts b/packages/api-docs-builder/utils/parseSlotsAndClasses.ts index 92582e71355370..64a27b69b8dc4a 100644 --- a/packages/api-docs-builder/utils/parseSlotsAndClasses.ts +++ b/packages/api-docs-builder/utils/parseSlotsAndClasses.ts @@ -1,5 +1,5 @@ import * as ts from 'typescript'; -import { ComponentClassDefinition } from '@mui-internal/docs-utils'; +import { ComponentClassDefinition } from '@mui/internal-docs-utils'; import { renderMarkdown } from '@mui/internal-markdown'; import { getSymbolDescription, getSymbolJSDocTags } from '../buildApiUtils'; import { TypeScriptProject } from './createTypeScriptProject'; diff --git a/packages/markdown/package.json b/packages/markdown/package.json index e7067fa50d9507..e11064d3a73af8 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -13,7 +13,7 @@ "repository": { "type": "git", "url": "https://github.com/mui/material-ui.git", - "directory": "packages/docs-utils" + "directory": "packages/markdown" }, "scripts": { "release:publish": "pnpm publish --tag latest", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5af7b9880151c0..820052c68f5cae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,12 +101,12 @@ importers: '@mui-internal/api-docs-builder-core': specifier: workspace:^ version: link:packages/api-docs-builder-core - '@mui-internal/docs-utils': - specifier: workspace:^ - version: link:packages/docs-utils '@mui-internal/test-utils': specifier: workspace:^ version: link:packages/test-utils + '@mui/internal-docs-utils': + specifier: workspace:^ + version: link:packages-internal/docs-utils '@mui/internal-scripts': specifier: workspace:^ version: link:packages-internal/scripts @@ -723,12 +723,12 @@ importers: '@babel/preset-typescript': specifier: ^7.23.3 version: 7.23.3(@babel/core@7.23.9) - '@mui-internal/docs-utils': - specifier: workspace:^ - version: link:../packages/docs-utils '@mui-internal/test-utils': specifier: workspace:^ version: link:../packages/test-utils + '@mui/internal-docs-utils': + specifier: workspace:^ + version: link:../packages-internal/docs-utils '@mui/internal-scripts': specifier: workspace:^ version: link:../packages-internal/scripts @@ -796,6 +796,15 @@ importers: specifier: ^17.7.2 version: 17.7.2 + packages-internal/docs-utils: + dependencies: + rimraf: + specifier: ^5.0.5 + version: 5.0.5 + typescript: + specifier: ^5.3.3 + version: 5.3.3 + packages-internal/scripts: dependencies: '@babel/core': @@ -813,9 +822,9 @@ importers: '@babel/types': specifier: ^7.23.9 version: 7.23.9 - '@mui-internal/docs-utils': + '@mui/internal-docs-utils': specifier: workspace:^ - version: link:../../packages/docs-utils + version: link:../docs-utils doctrine: specifier: ^3.0.0 version: 3.0.0 @@ -880,9 +889,9 @@ importers: '@babel/traverse': specifier: ^7.23.9 version: 7.23.9 - '@mui-internal/docs-utils': + '@mui/internal-docs-utils': specifier: workspace:^ - version: link:../docs-utils + version: link:../../packages-internal/docs-utils '@mui/internal-markdown': specifier: workspace:^ version: link:../markdown @@ -991,15 +1000,6 @@ importers: specifier: ^5.3.3 version: 5.3.3 - packages/docs-utils: - dependencies: - rimraf: - specifier: ^5.0.5 - version: 5.0.5 - typescript: - specifier: ^5.3.3 - version: 5.3.3 - packages/eslint-plugin-material-ui: dependencies: emoji-regex: diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index f029876db67f78..98096417239b3d 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -10,7 +10,7 @@ import { fixBabelGeneratorIssues, fixLineEndings, getUnstyledFilename, -} from '@mui-internal/docs-utils'; +} from '@mui/internal-docs-utils'; import { getPropTypesFromFile, injectPropTypesInFile, diff --git a/tsconfig.json b/tsconfig.json index ac3aa8a81841b1..3ac48ed213e804 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -50,7 +50,7 @@ "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"], "@pigment-css/vite-plugin": ["./packages/pigment-css-vite-plugin/src"], "@pigment-css/vite-plugin/*": ["./packages/pigment-css-vite-plugin/src/*"], - "@mui-internal/docs-utils": ["./packages/docs-utils/src"], + "@mui/internal-docs-utils": ["./packages-internal/docs-utils/src"], "@mui/internal-scripts/typescript-to-proptypes": [ "./packages-internal/scripts/typescript-to-proptypes/src" ] diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index a6bfc4370679f9..71fe74b5af9740 100644 --- a/webpackBaseConfig.js +++ b/webpackBaseConfig.js @@ -25,7 +25,7 @@ module.exports = { '@mui/material-nextjs': path.resolve(__dirname, './packages/mui-material-nextjs/src'), '@mui/joy': path.resolve(__dirname, './packages/mui-joy/src'), '@pigment-css/react': path.resolve(__dirname, './packages/pigment-css-react/src'), - '@mui-internal/docs-utils': path.resolve(__dirname, './packages/docs-utils/src'), + '@mui/internal-docs-utils': path.resolve(__dirname, './packages-internal/docs-utils/src'), '@mui/internal-scripts/typescript-to-proptypes': path.resolve( __dirname, './packages-internal/scripts/typescript-to-proptypes/src', From 257b5a422078d9828de2d5e87b498388938bac26 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 15 Mar 2024 15:26:08 +0530 Subject: [PATCH 8/9] [pigment-css][nextjs-plugin] Follow-up to #41494 (#41502) Signed-off-by: Brijesh Bittu Co-authored-by: Siriwat K --- .../pigment-css-nextjs-plugin/src/index.ts | 23 +++++++++++-------- packages/pigment-css-unplugin/src/index.ts | 11 ++++----- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/pigment-css-nextjs-plugin/src/index.ts b/packages/pigment-css-nextjs-plugin/src/index.ts index 92b0ddee1dcf21..ecf7b1598687b2 100644 --- a/packages/pigment-css-nextjs-plugin/src/index.ts +++ b/packages/pigment-css-nextjs-plugin/src/index.ts @@ -1,15 +1,9 @@ import * as path from 'node:path'; import type { NextConfig } from 'next'; import { findPagesDir } from 'next/dist/lib/find-pages-dir'; -import { - webpack as webpackPlugin, - extendTheme, - type PigmentOptions as BasePigmentOptions, -} from '@pigment-css/unplugin'; +import { webpack as webpackPlugin, extendTheme, type PigmentOptions } from '@pigment-css/unplugin'; -export type PigmentOptions = BasePigmentOptions & { - asyncResolve?: (what: string) => string | null; -}; +export { type PigmentOptions }; const extractionFile = path.join( path.dirname(require.resolve('../package.json')), @@ -60,14 +54,23 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio outputCss: dev || hasAppDir || !isServer, placeholderCssFile: extractionFile, }, - asyncResolve(what) { + async asyncResolve(what: string, importer: string, stack: string[]) { + // Need to point to the react from node_modules during eval time. + // Otherwise, next makes it point to its own version of react that + // has a lot of RSC specific logic which is not actually needed. + if (what.startsWith('react') || what.startsWith('next')) { + return require.resolve(what); + } if (what === 'next/image') { return require.resolve('../next-image'); } if (what.startsWith('next/font')) { return require.resolve('../next-font'); } - return asyncResolve?.(what) ?? null; + if (asyncResolve) { + return asyncResolve(what, importer, stack); + } + return null; }, babelOptions: { ...babelOptions, diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts index 38ef63479089ee..262577e8056808 100644 --- a/packages/pigment-css-unplugin/src/index.ts +++ b/packages/pigment-css-unplugin/src/index.ts @@ -41,6 +41,7 @@ type WebpackMeta = { }; type Meta = NextMeta | ViteMeta | WebpackMeta; +export type AsyncResolver = (what: string, importer: string, stack: string[]) => Promise; export type PigmentOptions = { theme?: Theme; @@ -49,7 +50,7 @@ export type PigmentOptions = { debug?: IFileReporterOptions | false; sourceMap?: boolean; meta?: Meta; - asyncResolve?: (what: string) => string | null; + asyncResolve?: (...args: Parameters) => Promise; transformSx?: boolean; } & Partial; @@ -62,8 +63,6 @@ function hasCorectExtension(fileName: string) { const VIRTUAL_CSS_FILE = `\0zero-runtime-styles.css`; const VIRTUAL_THEME_FILE = `\0zero-runtime-theme.js`; -type AsyncResolver = (what: string, importer: string, stack: string[]) => Promise; - function isZeroRuntimeThemeFile(fileName: string) { return fileName === VIRTUAL_CSS_FILE || fileName === VIRTUAL_THEME_FILE; } @@ -142,13 +141,11 @@ export const plugin = createUnplugin((options) => { let webpackResolver: AsyncResolver; const asyncResolve: AsyncResolver = async (what, importer, stack) => { - const result = asyncResolveOpt?.(what); + const result = await asyncResolveOpt?.(what, importer, stack); if (typeof result === 'string') { return result; } - // Use Webpack's resolver to resolve actual path but - // ignore next.js files during evaluation phase of WyW - if (webpackResolver && !what.startsWith('next')) { + if (webpackResolver) { return webpackResolver(what, importer, stack); } return asyncResolveFallback(what, importer, stack); From 4b591ffc3fafec99c7eb3953a100a7ac6957a396 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 15 Mar 2024 08:54:44 -0300 Subject: [PATCH 9/9] [docs-infra] Add code block header classes (#41487) Co-authored-by: siriwatknp --- docs/pages/experiments/docs/codeblock.md | 35 ++++++++++--------- .../src/modules/components/MarkdownElement.js | 30 ++++++++++++++++ packages/markdown/parseMarkdown.js | 3 +- 3 files changed, 51 insertions(+), 17 deletions(-) diff --git a/docs/pages/experiments/docs/codeblock.md b/docs/pages/experiments/docs/codeblock.md index 4ee6cefb023b9b..00c353d3de3a88 100644 --- a/docs/pages/experiments/docs/codeblock.md +++ b/docs/pages/experiments/docs/codeblock.md @@ -4,6 +4,8 @@ ## Tabs +### Codeblock version + ```bash npm @@ -23,22 +25,23 @@ pnpm add @mui/material @emotion/react @emotion/styled - - -```bash MIT -npm install @mui/data-grid -``` +### Component version -```bash Pro -npm install @mui/data-grid-pro -``` +{{"component": "modules/components/HighlightedCodeWithTabs", "tabs": [{"tab":"JS", "code":"
    Hello
    ", "language": "jsx"}, {"tab": "TS", "code": "type A = {}"}]}} -```bash Premium -npm install @mui/data-grid-premium +## With header path + +```jsx title="PlainCssSliderDeep1.js" +import * as React from 'react'; +import Slider from '@mui/material/Slider'; +import './PlainCssSliderDeep1.css'; + +export default function PlainCssSliderDeep1() { + return ( +
    + + +
    + ); +} ``` - -     - -## Component - -{{"component": "modules/components/HighlightedCodeWithTabs", "tabs": [{"tab":"JS", "code":"
    Hello
    ", "language": "jsx"}, {"tab": "TS", "code": "type A = {}"}]}} diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 24f18dd51a749b..5f6b77ba819c19 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -509,6 +509,14 @@ const Root = styled('div')( position: 'relative', // Font size reset to fix a bug with Safari 16.0 when letterSpacing is set fontSize: 10, + '&:has(.MuiCode-title)': { + border: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`, + borderRadius: theme.shape.borderRadius, + overflow: 'clip', + '& .MuiCode-copy': { + top: '56px', + }, + }, }, '& .MuiCode-copy-container': { // This container is only used in demo and highlight code @@ -601,6 +609,28 @@ const Root = styled('div')( marginBottom: theme.spacing(1), }, }, + '& .MuiCode-title': { + padding: theme.spacing(1.5), + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1.5), + borderBottom: `1px solid var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`, + backgroundColor: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`, + fontFamily: theme.typography.fontFamilyCode, + fontSize: theme.typography.pxToRem(12), + fontWeight: theme.typography.fontWeightBold, + color: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + '::before': { + content: `url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3333 3.99996H8L7.06 3.05996C6.80667 2.80663 6.46667 2.66663 6.11334 2.66663H2.66667C1.93334 2.66663 1.34 3.26663 1.34 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66667 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM12.6667 12H3.33334C2.96667 12 2.66667 11.7 2.66667 11.3333V5.99996C2.66667 5.63329 2.96667 5.33329 3.33334 5.33329H12.6667C13.0333 5.33329 13.3333 5.63329 13.3333 5.99996V11.3333C13.3333 11.7 13.0333 12 12.6667 12Z' fill='%2399CCF3'/%3E%3C/svg%3E%0A");`, + width: '16px', + height: '16px', + }, + '& + pre': { + margin: 0, + border: 'none', + borderRadius: 0, + }, + }, }), ({ theme }) => ({ [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index 15feaa6c6372bc..87a2d78deff74e 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -395,6 +395,7 @@ function createRender(context) { renderer.code = (code, infostring, escaped) => { // https://github.com/markedjs/marked/blob/30e90e5175700890e6feb1836c57b9404c854466/src/Renderer.js#L15 const lang = (infostring || '').match(/\S*/)[0]; + const title = (infostring || '').match(/title="([^"]*)"/)?.[1]; const out = prism(code, lang); if (out != null && out !== code) { escaped = true; @@ -407,7 +408,7 @@ function createRender(context) { return `
    ${escaped ? code : escape(code, true)}
    \n`; } - return `
    ${
+      return `
    ${title ? `
    ${title}
    ` : ''}
    ${
         escaped ? code : escape(code, true)
       }
    ${[
         '