diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 5a4456a5434317..be4182e724505f 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -40,6 +40,16 @@ Examples: npx @mui/codemod@latest v5.0.0/preset-safe src --parser=flow ``` +### package name + +Use this flag if you have a custom package name that reexports Material UI components. For example: + +```bash +npx @mui/codemod@latest --packageName="@org/ui" +``` + +The snippet above will look for `@org/ui` instead of `@mui/material` in the codemod. + ### jscodeshift options To pass more options directly to jscodeshift, use `--jscodeshift="..."`. For example: diff --git a/packages/mui-codemod/codemod.js b/packages/mui-codemod/codemod.js index fb334ccf8b5b79..f6fec4ac21e811 100755 --- a/packages/mui-codemod/codemod.js +++ b/packages/mui-codemod/codemod.js @@ -73,6 +73,9 @@ async function runJscodeshiftTransform(transform, files, flags, codemodFlags) { if (flags.jscodeshift) { args.push(flags.jscodeshift); } + if (flags.packageName) { + args.push(`--packageName=${flags.packageName}`); + } args.push(...files); @@ -196,6 +199,11 @@ yargs description: '(Advanced) Pass options directly to jscodeshift', default: false, type: 'string', + }) + .option('packageName', { + description: 'The package name to look for in the import statements', + default: '@mui/material', + type: 'string', }); }, handler: run, diff --git a/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js index 386de541096490..ec5c03cba34fbd 100644 --- a/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js +++ b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js @@ -12,6 +12,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Accordion', propName: 'TransitionComponent', slotName: 'transition', @@ -19,6 +20,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Accordion', propName: 'TransitionProps', slotName: 'transition', diff --git a/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js index 4c807f4721f71c..0d0b6988c4bd45 100644 --- a/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js +++ b/packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[custom package] accordion-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..b0b7e26cb7f80b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/package.actual.js @@ -0,0 +1,34 @@ +import Accordion from '@org/ui/material/Accordion'; +import { Accordion as MyAccordion } from '@org/ui/material'; + +; +; +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/accordion-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..874f8cbf61b5eb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-props/test-cases/package.expected.js @@ -0,0 +1,42 @@ +import Accordion from '@org/ui/material/Accordion'; +import { Accordion as MyAccordion } from '@org/ui/material'; + +; +; +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js b/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js index b6883c7d3d497a..bb493453072633 100644 --- a/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js +++ b/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js @@ -14,7 +14,11 @@ export default function transformer(file, api, options) { root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/AccordionSummary$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/AccordionSummary)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.test.js b/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.test.js index 58ccd95cbb4019..2c62387f5db614 100644 --- a/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.test.js +++ b/packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'single', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..8cee5627107d23 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/package.actual.js @@ -0,0 +1,57 @@ +import { accordionSummaryClasses } from '@org/ui/material/AccordionSummary'; + +fn({ + MuiAccordionSummary: { + styleOverrides: { + root: { + '& .MuiAccordionSummary-contentGutters': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiAccordionSummary: { + styleOverrides: { + root: { + [`& .${accordionSummaryClasses.contentGutters}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '& .MuiAccordionSummary-contentGutters': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${accordionSummaryClasses.contentGutters}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..c01b87f5f36e3d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/package.expected.js @@ -0,0 +1,57 @@ +import { accordionSummaryClasses } from '@org/ui/material/AccordionSummary'; + +fn({ + MuiAccordionSummary: { + styleOverrides: { + root: { + '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiAccordionSummary: { + styleOverrides: { + root: { + [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js index 13c32a4bae1238..5623a3dcd63183 100644 --- a/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js +++ b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js @@ -11,7 +11,11 @@ export default function transformer(file, api, options) { classes.forEach(({ deprecatedClass, replacementSelector }) => { root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Alert$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Alert)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'alertClasses') { diff --git a/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js index 6fcd2044c19d66..c9e06cbdf2704e 100644 --- a/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js +++ b/packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'single', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..e0642b4d8171c2 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/package.actual.js @@ -0,0 +1,26 @@ +import { alertClasses } from '@org/ui/material/Alert'; + +('&.MuiAlert-standardSuccess'); +('&.MuiAlert-standardInfo'); +('&.MuiAlert-standardWarning'); +('&.MuiAlert-standardError'); +('&.MuiAlert-outlinedSuccess'); +('&.MuiAlert-outlinedInfo'); +('&.MuiAlert-outlinedWarning'); +('&.MuiAlert-outlinedError'); +('&.MuiAlert-filledSuccess'); +('&.MuiAlert-filledInfo'); +('&.MuiAlert-filledWarning'); +('&.MuiAlert-filledError'); +`&.${alertClasses.standardSuccess}`; +`&.${alertClasses.standardInfo}`; +`&.${alertClasses.standardWarning}`; +`&.${alertClasses.standardError}`; +`&.${alertClasses.outlinedSuccess}`; +`&.${alertClasses.outlinedInfo}`; +`&.${alertClasses.outlinedWarning}`; +`&.${alertClasses.outlinedError}`; +`&.${alertClasses.filledSuccess}`; +`&.${alertClasses.filledInfo}`; +`&.${alertClasses.filledWarning}`; +`&.${alertClasses.filledError}`; diff --git a/packages/mui-codemod/src/deprecations/alert-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..93aa940dd50f3e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-classes/test-cases/package.expected.js @@ -0,0 +1,26 @@ +import { alertClasses } from '@org/ui/material/Alert'; + +('&.MuiAlert-standard.MuiAlert-colorSuccess'); +('&.MuiAlert-standard.MuiAlert-colorInfo'); +('&.MuiAlert-standard.MuiAlert-colorWarning'); +('&.MuiAlert-standard.MuiAlert-colorError'); +('&.MuiAlert-outlined.MuiAlert-colorSuccess'); +('&.MuiAlert-outlined.MuiAlert-colorInfo'); +('&.MuiAlert-outlined.MuiAlert-colorWarning'); +('&.MuiAlert-outlined.MuiAlert-colorError'); +('&.MuiAlert-filled.MuiAlert-colorSuccess'); +('&.MuiAlert-filled.MuiAlert-colorInfo'); +('&.MuiAlert-filled.MuiAlert-colorWarning'); +('&.MuiAlert-filled.MuiAlert-colorError'); +`&.${alertClasses.standard}.${alertClasses.colorSuccess}`; +`&.${alertClasses.standard}.${alertClasses.colorInfo}`; +`&.${alertClasses.standard}.${alertClasses.colorWarning}`; +`&.${alertClasses.standard}.${alertClasses.colorError}`; +`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`; +`&.${alertClasses.outlined}.${alertClasses.colorInfo}`; +`&.${alertClasses.outlined}.${alertClasses.colorWarning}`; +`&.${alertClasses.outlined}.${alertClasses.colorError}`; +`&.${alertClasses.filled}.${alertClasses.colorSuccess}`; +`&.${alertClasses.filled}.${alertClasses.colorInfo}`; +`&.${alertClasses.filled}.${alertClasses.colorWarning}`; +`&.${alertClasses.filled}.${alertClasses.colorError}`; diff --git a/packages/mui-codemod/src/deprecations/alert-props/alert-props.js b/packages/mui-codemod/src/deprecations/alert-props/alert-props.js index 2fe8969c09c01b..59a0bc42e2b952 100644 --- a/packages/mui-codemod/src/deprecations/alert-props/alert-props.js +++ b/packages/mui-codemod/src/deprecations/alert-props/alert-props.js @@ -9,7 +9,7 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'Alert' }); + replaceComponentsWithSlots(j, { root, packageName: options.packageName, componentName: 'Alert' }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js b/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js index 761af47c09f51d..e786211abd9de3 100644 --- a/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js +++ b/packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] alert-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false }, packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..441933c2a15ba2 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-props/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import Alert from '@org/ui/material/Alert'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/alert-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/alert-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..3e9cd56ade220c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/alert-props/test-cases/package.expected.js @@ -0,0 +1,32 @@ +import Alert from '@org/ui/material/Alert'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js index 6c43fb44c03306..5ec12ceb7c25ee 100644 --- a/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js @@ -17,6 +17,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Autocomplete', propName: 'PaperComponent', slotName: 'paper', @@ -24,6 +25,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Autocomplete', propName: 'PopperComponent', slotName: 'popper', @@ -31,6 +33,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Autocomplete', propName: 'ListboxProps', slotName: 'listbox', @@ -38,69 +41,79 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Autocomplete', propName: 'ChipProps', slotName: 'chip', }); - replaceComponentsWithSlots(j, { root, componentName: 'Autocomplete' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'Autocomplete', + }); // Move ListboxComponent JSX prop into slotProps.listbox.component - findComponentJSX(j, { root, componentName: 'Autocomplete' }, (elementPath) => { - const element = elementPath.node; - const propIndex = element.openingElement.attributes.findIndex( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'ListboxComponent', - ); + findComponentJSX( + j, + { root, packageName: options.packageName, componentName: 'Autocomplete' }, + (elementPath) => { + const element = elementPath.node; + const propIndex = element.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'ListboxComponent', + ); - if (propIndex !== -1) { - const removedValue = element.openingElement.attributes.splice(propIndex, 1)[0].value - .expression; - let hasSlotProps = false; - element.openingElement.attributes.forEach((attr) => { - if (attr.name?.name === 'slotProps') { - hasSlotProps = true; - const slots = attr.value.expression; - const slotIndex = slots.properties.findIndex((prop) => prop?.key?.name === 'listbox'); - if (slotIndex === -1) { - assignObject(j, { - target: attr, - key: 'listbox', - expression: j.objectExpression([ - j.objectProperty(j.identifier('component'), removedValue), - ]), - }); - } else { - const slotPropsSlotValue = slots.properties.splice(slotIndex, 1)[0].value; - assignObject(j, { - target: attr, - key: 'listbox', - expression: j.objectExpression([ - j.objectProperty(j.identifier('component'), removedValue), - j.spreadElement(slotPropsSlotValue), - ]), - }); + if (propIndex !== -1) { + const removedValue = element.openingElement.attributes.splice(propIndex, 1)[0].value + .expression; + let hasSlotProps = false; + element.openingElement.attributes.forEach((attr) => { + if (attr.name?.name === 'slotProps') { + hasSlotProps = true; + const slots = attr.value.expression; + const slotIndex = slots.properties.findIndex((prop) => prop?.key?.name === 'listbox'); + if (slotIndex === -1) { + assignObject(j, { + target: attr, + key: 'listbox', + expression: j.objectExpression([ + j.objectProperty(j.identifier('component'), removedValue), + ]), + }); + } else { + const slotPropsSlotValue = slots.properties.splice(slotIndex, 1)[0].value; + assignObject(j, { + target: attr, + key: 'listbox', + expression: j.objectExpression([ + j.objectProperty(j.identifier('component'), removedValue), + j.spreadElement(slotPropsSlotValue), + ]), + }); + } } - } - }); - - if (!hasSlotProps) { - appendAttribute(j, { - target: element, - attributeName: 'slotProps', - expression: j.objectExpression([ - j.objectProperty( - j.identifier('listbox'), - j.objectExpression([j.objectProperty(j.identifier('component'), removedValue)]), - ), - ]), }); + + if (!hasSlotProps) { + appendAttribute(j, { + target: element, + attributeName: 'slotProps', + expression: j.objectExpression([ + j.objectProperty( + j.identifier('listbox'), + j.objectExpression([j.objectProperty(j.identifier('component'), removedValue)]), + ), + ]), + }); + } } - } - }); + }, + ); // Move ListboxComponent default prop into slotProps.listbox.component const defaultPropsPathCollection = findComponentDefaultProps(j, { root, + packageName: options.packageName, componentName: 'Autocomplete', }); diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js index e5909cad32dab3..161174e88fbfd5 100644 --- a/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] autocomplete-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..482b767c1e37e9 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/package.actual.js @@ -0,0 +1,64 @@ +import Autocomplete from '@org/ui/material/Autocomplete'; +import {Autocomplete as MyAutocomplete} from '@org/ui/material'; + +; + +; + +; + +; + + diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..32da3ab85fd8b3 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/package.expected.js @@ -0,0 +1,77 @@ +import Autocomplete from '@org/ui/material/Autocomplete'; +import {Autocomplete as MyAutocomplete} from '@org/ui/material'; + +; + +; + +; + +; + + diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.js b/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.js index 654981f97a612e..8430e94abe2234 100644 --- a/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.js +++ b/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.js @@ -11,43 +11,52 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'AvatarGroup' }); + replaceComponentsWithSlots(j, { + root, + componentName: 'AvatarGroup', + packageName: options.packageName, + }); // replace `slotProps.additionalAvatar` with `slotProps.surplus` in JSX - findComponentJSX(j, { root, componentName: 'AvatarGroup' }, (elementPath) => { - const slotPropsIndex = elementPath.node.openingElement.attributes.findIndex( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'slotProps', - ); - if (slotPropsIndex !== -1) { - const slotProps = elementPath.node.openingElement.attributes[slotPropsIndex].value.expression; - const additionalAvatarIndex = slotProps.properties.findIndex( - (prop) => prop?.key?.name === 'additionalAvatar', + findComponentJSX( + j, + { root, componentName: 'AvatarGroup', packageName: options.packageName }, + (elementPath) => { + const slotPropsIndex = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'slotProps', ); - if (additionalAvatarIndex !== -1) { - const surplusIndex = slotProps.properties.findIndex( - (prop) => prop?.key?.name === 'surplus', + if (slotPropsIndex !== -1) { + const slotProps = + elementPath.node.openingElement.attributes[slotPropsIndex].value.expression; + const additionalAvatarIndex = slotProps.properties.findIndex( + (prop) => prop?.key?.name === 'additionalAvatar', ); - const removedValue = slotProps.properties.splice(additionalAvatarIndex, 1)[0].value; - if (surplusIndex === -1) { - assignObject(j, { - target: elementPath.node.openingElement.attributes[slotPropsIndex], - key: 'surplus', - expression: removedValue, - }); - } else { - const slotPropsSlotValue = slotProps.properties.splice(surplusIndex, 1)[0].value; - assignObject(j, { - target: elementPath.node.openingElement.attributes[slotPropsIndex], - key: 'surplus', - expression: j.objectExpression([ - j.spreadElement(removedValue), - j.spreadElement(slotPropsSlotValue), - ]), - }); + if (additionalAvatarIndex !== -1) { + const surplusIndex = slotProps.properties.findIndex( + (prop) => prop?.key?.name === 'surplus', + ); + const removedValue = slotProps.properties.splice(additionalAvatarIndex, 1)[0].value; + if (surplusIndex === -1) { + assignObject(j, { + target: elementPath.node.openingElement.attributes[slotPropsIndex], + key: 'surplus', + expression: removedValue, + }); + } else { + const slotPropsSlotValue = slotProps.properties.splice(surplusIndex, 1)[0].value; + assignObject(j, { + target: elementPath.node.openingElement.attributes[slotPropsIndex], + key: 'surplus', + expression: j.objectExpression([ + j.spreadElement(removedValue), + j.spreadElement(slotPropsSlotValue), + ]), + }); + } } } - } - }); + }, + ); // replace `slotProps.additionalAvatar` with `slotProps.surplus` in theme root.find(j.ObjectProperty, { key: { name: 'MuiAvatarGroup' } }).forEach((path) => { diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js b/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js index 5d4036be515ba0..1ee487f56ea46d 100644 --- a/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js +++ b/packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] avatar-group-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..bba189b3c33e75 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/package.actual.js @@ -0,0 +1,37 @@ +import AvatarGroup from '@org/ui/material/AvatarGroup'; +import { AvatarGroup as MyAvatarGroup } from '@org/ui/material'; + +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..4c56b0a44eec40 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/package.expected.js @@ -0,0 +1,38 @@ +import AvatarGroup from '@org/ui/material/AvatarGroup'; +import { AvatarGroup as MyAvatarGroup } from '@org/ui/material'; + +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js b/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js index 330c59385dcf51..5b2b4ddc7ae83a 100644 --- a/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js +++ b/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js @@ -14,6 +14,7 @@ export default function transformer(file, api, options) { componentName: 'Avatar', propName: 'imgProps', slotName: 'img', + packageName: options.packageName, }); return root.toSource(printOptions); diff --git a/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.test.js b/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.test.js index 86eecdea4eacbf..3605afc10ad292 100644 --- a/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.test.js +++ b/packages/mui-codemod/src/deprecations/avatar-props/avatar-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] avatar-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..6f2d4cffcb7650 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/package.actual.js @@ -0,0 +1,33 @@ +import Avatar from '@org/ui/material/Avatar'; +import { Avatar as MyAvatar } from '@org/ui/material'; + + {}, + onLoad: () => {}, + }} +/>; + {}, + onLoad: () => {}, + }} +/>; + {}, + }} + slotProps={{ + img: { + onError: () => {}, + }, + }} +/>; + +// should skip non MUI components + {}, + onLoad: () => {}, + }} +/>; diff --git a/packages/mui-codemod/src/deprecations/avatar-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..4d09d847a47871 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/avatar-props/test-cases/package.expected.js @@ -0,0 +1,39 @@ +import Avatar from '@org/ui/material/Avatar'; +import { Avatar as MyAvatar } from '@org/ui/material'; + + {}, + onLoad: () => {}, + } + }} +/>; + {}, + onLoad: () => {}, + } + }} +/>; + {}, + }, + + ...{ + onError: () => {}, + } + }, + }} />; + +// should skip non MUI components + {}, + onLoad: () => {}, + }} +/>; diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js index 0d831486177b84..8347519a1d7dbf 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js @@ -10,10 +10,15 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'Backdrop' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'Backdrop', + }); movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Backdrop', propName: 'TransitionComponent', slotName: 'transition', diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js index 4c8068737f5186..daf91445390de7 100644 --- a/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js +++ b/packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js @@ -10,6 +10,13 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { + packageName: '@org/ui/material', + }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..ce49b36049b02e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/package.actual.js @@ -0,0 +1,40 @@ +import Backdrop from '@org/ui/material/Backdrop'; +import { Backdrop as MyBackdrop } from '@org/ui/material'; + +; +; +; +; +; + +// should skip non MUI components +; + +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..8283128454f6dd --- /dev/null +++ b/packages/mui-codemod/src/deprecations/backdrop-props/test-cases/package.expected.js @@ -0,0 +1,44 @@ +import Backdrop from '@org/ui/material/Backdrop'; +import { Backdrop as MyBackdrop } from '@org/ui/material'; + +; +; +; +; +; + +// should skip non MUI components +; + +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/badge-props/badge-props.js b/packages/mui-codemod/src/deprecations/badge-props/badge-props.js index 9564f50a60c087..09bc867410db48 100644 --- a/packages/mui-codemod/src/deprecations/badge-props/badge-props.js +++ b/packages/mui-codemod/src/deprecations/badge-props/badge-props.js @@ -9,7 +9,7 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'Badge' }); + replaceComponentsWithSlots(j, { root, componentName: 'Badge', packageName: options.packageName }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js b/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js index 5da03e1b1e20c5..5b2585d2efbf7a 100644 --- a/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js +++ b/packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] badge-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false }, packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..db66bb01a2a97b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import { Badge } from '@org/ui/material'; + +; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/badge-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/badge-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..46fc724f333cac --- /dev/null +++ b/packages/mui-codemod/src/deprecations/badge-props/test-cases/package.expected.js @@ -0,0 +1,32 @@ +import { Badge } from '@org/ui/material'; + +; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/button-classes/button-classes.js b/packages/mui-codemod/src/deprecations/button-classes/button-classes.js index 33bfc4a13c0ad6..38d037e755f157 100644 --- a/packages/mui-codemod/src/deprecations/button-classes/button-classes.js +++ b/packages/mui-codemod/src/deprecations/button-classes/button-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Button$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Button)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'buttonClasses') { diff --git a/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js b/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js index 3ad6b897697d56..32b3eb12f616b8 100644 --- a/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js +++ b/packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/button-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..d70fc24c2e04cc --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/package.actual.js @@ -0,0 +1,68 @@ +import { buttonClasses } from '@org/ui/material/Button'; + +('&.MuiButton-textInherit'); +('&.MuiButton-textPrimary'); +('&.MuiButton-textSecondary'); +('&.MuiButton-textSuccess'); +('&.MuiButton-textError'); +('&.MuiButton-textInfo'); +('&.MuiButton-textWarning'); +('&.MuiButton-outlinedInherit'); +('&.MuiButton-outlinedPrimary'); +('&.MuiButton-outlinedSecondary'); +('&.MuiButton-outlinedSuccess'); +('&.MuiButton-outlinedError'); +('&.MuiButton-outlinedInfo'); +('&.MuiButton-outlinedWarning'); +('&.MuiButton-containedInherit'); +('&.MuiButton-containedPrimary'); +('&.MuiButton-containedSecondary'); +('&.MuiButton-containedSuccess'); +('&.MuiButton-containedError'); +('&.MuiButton-containedInfo'); +('&.MuiButton-containedWarning'); +('&.MuiButton-textSizeSmall'); +('&.MuiButton-textSizeMedium'); +('&.MuiButton-textSizeLarge'); +('&.MuiButton-outlinedSizeSmall'); +('&.MuiButton-outlinedSizeMedium'); +('&.MuiButton-outlinedSizeLarge'); +('&.MuiButton-containedSizeSmall'); +('&.MuiButton-containedSizeMedium'); +('&.MuiButton-containedSizeLarge'); +('& .MuiButton-iconSizeSmall'); +('& .MuiButton-iconSizeMedium'); +('& .MuiButton-iconSizeLarge'); +`&.${buttonClasses.textInherit}`; +`&.${buttonClasses.textPrimary}`; +`&.${buttonClasses.textSecondary}`; +`&.${buttonClasses.textSuccess}`; +`&.${buttonClasses.textError}`; +`&.${buttonClasses.textInfo}`; +`&.${buttonClasses.textWarning}`; +`&.${buttonClasses.outlinedInherit}`; +`&.${buttonClasses.outlinedPrimary}`; +`&.${buttonClasses.outlinedSecondary}`; +`&.${buttonClasses.outlinedSuccess}`; +`&.${buttonClasses.outlinedError}`; +`&.${buttonClasses.outlinedInfo}`; +`&.${buttonClasses.outlinedWarning}`; +`&.${buttonClasses.containedInherit}`; +`&.${buttonClasses.containedPrimary}`; +`&.${buttonClasses.containedSecondary}`; +`&.${buttonClasses.containedSuccess}`; +`&.${buttonClasses.containedError}`; +`&.${buttonClasses.containedInfo}`; +`&.${buttonClasses.containedWarning}`; +`&.${buttonClasses.textSizeSmall}`; +`&.${buttonClasses.textSizeMedium}`; +`&.${buttonClasses.textSizeLarge}`; +`&.${buttonClasses.outlinedSizeSmall}`; +`&.${buttonClasses.outlinedSizeMedium}`; +`&.${buttonClasses.outlinedSizeLarge}`; +`&.${buttonClasses.containedSizeSmall}`; +`&.${buttonClasses.containedSizeMedium}`; +`&.${buttonClasses.containedSizeLarge}`; +`& .${buttonClasses.iconSizeSmall}`; +`& .${buttonClasses.iconSizeMedium}`; +`& .${buttonClasses.iconSizeLarge}`; diff --git a/packages/mui-codemod/src/deprecations/button-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/button-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..1bd2b69f493741 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-classes/test-cases/package.expected.js @@ -0,0 +1,68 @@ +import { buttonClasses } from '@org/ui/material/Button'; + +("&.MuiButton-text.MuiButton-colorInherit"); +("&.MuiButton-text.MuiButton-colorPrimary"); +("&.MuiButton-text.MuiButton-colorSecondary"); +("&.MuiButton-text.MuiButton-colorSuccess"); +("&.MuiButton-text.MuiButton-colorError"); +("&.MuiButton-text.MuiButton-colorInfo"); +("&.MuiButton-text.MuiButton-colorWarning"); +("&.MuiButton-outlined.MuiButton-colorInherit"); +("&.MuiButton-outlined.MuiButton-colorPrimary"); +("&.MuiButton-outlined.MuiButton-colorSecondary"); +("&.MuiButton-outlined.MuiButton-colorSuccess"); +("&.MuiButton-outlined.MuiButton-colorError"); +("&.MuiButton-outlined.MuiButton-colorInfo"); +("&.MuiButton-outlined.MuiButton-colorWarning"); +("&.MuiButton-contained.MuiButton-colorInherit"); +("&.MuiButton-contained.MuiButton-colorPrimary"); +("&.MuiButton-contained.MuiButton-colorSecondary"); +("&.MuiButton-contained.MuiButton-colorSuccess"); +("&.MuiButton-contained.MuiButton-colorError"); +("&.MuiButton-contained.MuiButton-colorInfo"); +("&.MuiButton-contained.MuiButton-colorWarning"); +("&.MuiButton-text.MuiButton-sizeSmall"); +("&.MuiButton-text.MuiButton-sizeMedium"); +("&.MuiButton-text.MuiButton-sizeLarge"); +("&.MuiButton-outlined.MuiButton-sizeSmall"); +("&.MuiButton-outlined.MuiButton-sizeMedium"); +("&.MuiButton-outlined.MuiButton-sizeLarge"); +("&.MuiButton-contained.MuiButton-sizeSmall"); +("&.MuiButton-contained.MuiButton-sizeMedium"); +("&.MuiButton-contained.MuiButton-sizeLarge"); +("&.MuiButton-sizeSmall > .MuiButton-icon"); +("&.MuiButton-sizeMedium > .MuiButton-icon"); +("&.MuiButton-sizeLarge > .MuiButton-icon"); +`&.${buttonClasses.text}.${buttonClasses.colorInherit}`; +`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`; +`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`; +`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`; +`&.${buttonClasses.text}.${buttonClasses.colorError}`; +`&.${buttonClasses.text}.${buttonClasses.colorInfo}`; +`&.${buttonClasses.text}.${buttonClasses.colorWarning}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorError}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`; +`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`; +`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`; +`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`; +`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`; +`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`; +`&.${buttonClasses.contained}.${buttonClasses.colorError}`; +`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`; +`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`; +`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`; +`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`; +`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`; +`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`; +`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`; +`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`; +`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`; +`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`; +`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`; +`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`; +`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`; +`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`; diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js index cffe90a28e2599..033fb350162d75 100644 --- a/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js +++ b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/ButtonGroup$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/ButtonGroup)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js index f01fec88ccb4a4..68d0b3c2468f8f 100644 --- a/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js +++ b/packages/mui-codemod/src/deprecations/button-group-classes/button-group-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..0d88bd277863d9 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/package.actual.js @@ -0,0 +1,36 @@ +import { buttonGroupClasses } from '@org/ui/material/ButtonGroup'; + +('& .MuiButtonGroup-groupedHorizontal'); +('& .MuiButtonGroup-groupedVertical'); +('& .MuiButtonGroup-groupedText'); +('& .MuiButtonGroup-groupedTextHorizontal'); +('& .MuiButtonGroup-groupedTextVertical'); +('& .MuiButtonGroup-groupedTextPrimary'); +('& .MuiButtonGroup-groupedTextSecondary'); +('& .MuiButtonGroup-groupedOutlined'); +('& .MuiButtonGroup-groupedOutlinedHorizontal'); +('& .MuiButtonGroup-groupedOutlinedVertical'); +('& .MuiButtonGroup-groupedOutlinedPrimary'); +('& .MuiButtonGroup-groupedOutlinedSecondary'); +('& .MuiButtonGroup-groupedContained'); +('& .MuiButtonGroup-groupedContainedHorizontal'); +('& .MuiButtonGroup-groupedContainedVertical'); +('& .MuiButtonGroup-groupedContainedPrimary'); +('& .MuiButtonGroup-groupedContainedSecondary'); +`& .${buttonGroupClasses.groupedHorizontal}`; +`& .${buttonGroupClasses.groupedVertical}`; +`& .${buttonGroupClasses.groupedText}`; +`& .${buttonGroupClasses.groupedTextHorizontal}`; +`& .${buttonGroupClasses.groupedTextVertical}`; +`& .${buttonGroupClasses.groupedTextPrimary}`; +`& .${buttonGroupClasses.groupedTextSecondary}`; +`& .${buttonGroupClasses.groupedOutlined}`; +`& .${buttonGroupClasses.groupedOutlinedHorizontal}`; +`& .${buttonGroupClasses.groupedOutlinedVertical}`; +`& .${buttonGroupClasses.groupedOutlinedPrimary}`; +`& .${buttonGroupClasses.groupedOutlinedSecondary}`; +`& .${buttonGroupClasses.groupedContained}`; +`& .${buttonGroupClasses.groupedContainedHorizontal}`; +`& .${buttonGroupClasses.groupedContainedVertical}`; +`& .${buttonGroupClasses.groupedContainedPrimary}`; +`& .${buttonGroupClasses.groupedContainedSecondary}`; diff --git a/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..4a086fcf034b24 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/button-group-classes/test-cases/package.expected.js @@ -0,0 +1,36 @@ +import { buttonGroupClasses } from '@org/ui/material/ButtonGroup'; + +("&.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-text.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-outlined.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-horizontal > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-vertical > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-colorPrimary > .MuiButtonGroup-grouped"); +("&.MuiButtonGroup-contained.MuiButtonGroup-colorSecondary > .MuiButtonGroup-grouped"); +`&.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.text}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.outlined}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.horizontal} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.vertical} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorPrimary} > .${buttonGroupClasses.grouped}`; +`&.${buttonGroupClasses.contained}.${buttonGroupClasses.colorSecondary} > .${buttonGroupClasses.grouped}`; diff --git a/packages/mui-codemod/src/deprecations/card-header-props/card-header-props.js b/packages/mui-codemod/src/deprecations/card-header-props/card-header-props.js index f0909e8bf5534b..48d3aa0a8bef29 100644 --- a/packages/mui-codemod/src/deprecations/card-header-props/card-header-props.js +++ b/packages/mui-codemod/src/deprecations/card-header-props/card-header-props.js @@ -11,6 +11,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'CardHeader', propName: 'titleTypographyProps', slotName: 'title', @@ -18,6 +19,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'CardHeader', propName: 'subheaderTypographyProps', slotName: 'subheader', diff --git a/packages/mui-codemod/src/deprecations/card-header-props/card-header-props.test.js b/packages/mui-codemod/src/deprecations/card-header-props/card-header-props.test.js index 89914c8db31611..6df884191f5879 100644 --- a/packages/mui-codemod/src/deprecations/card-header-props/card-header-props.test.js +++ b/packages/mui-codemod/src/deprecations/card-header-props/card-header-props.test.js @@ -7,7 +7,14 @@ describe('@mui/codemod', () => { transform, transformName: 'tooltip-props', dirname: __dirname, - testCases: [{ actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }], + testCases: [ + { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, + ], }); }); }); diff --git a/packages/mui-codemod/src/deprecations/card-header-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/card-header-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..90892c4e013a96 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/card-header-props/test-cases/package.actual.js @@ -0,0 +1,26 @@ +import CardHeader from '@org/ui/material/CardHeader'; +import { CardHeader as MyCardHeader } from '@org/ui/material'; + +; +; +; +; + +; diff --git a/packages/mui-codemod/src/deprecations/card-header-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/card-header-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..5b3ecc8ffebe31 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/card-header-props/test-cases/package.expected.js @@ -0,0 +1,34 @@ +import CardHeader from '@org/ui/material/CardHeader'; +import { CardHeader as MyCardHeader } from '@org/ui/material'; + +; +; +; +; + +; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js index 82fec4f91a4e07..c90523a6482463 100644 --- a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js +++ b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Chip$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Chip)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'chipClasses') { diff --git a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js index aee266dc004726..b41d35c5e21814 100644 --- a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js +++ b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..5ed733fbfb84fc --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/package.actual.js @@ -0,0 +1,54 @@ +import { chipClasses } from '@org/ui/material/Chip'; + +('&.MuiChip-clickableColorPrimary'); +('&.MuiChip-clickableColorSecondary'); +('&.MuiChip-deletableColorPrimary'); +('&.MuiChip-deletableColorSecondary'); +('&.MuiChip-outlinedPrimary'); +('&.MuiChip-outlinedSecondary'); +('&.MuiChip-filledPrimary'); +('&.MuiChip-filledSecondary'); +('& .MuiChip-avatarSmall'); +('& .MuiChip-avatarMedium'); +('& .MuiChip-avatarColorPrimary'); +('& .MuiChip-avatarColorSecondary'); +('& .MuiChip-iconSmall'); +('& .MuiChip-iconMedium'); +('& .MuiChip-iconColorPrimary'); +('& .MuiChip-iconColorSecondary'); +('& .MuiChip-labelSmall'); +('& .MuiChip-labelMedium'); +('& .MuiChip-deleteIconSmall'); +('& .MuiChip-deleteIconMedium'); +('& .MuiChip-deleteIconColorPrimary'); +('& .MuiChip-deleteIconColorSecondary'); +('& .MuiChip-deleteIconFilledColorPrimary'); +('& .MuiChip-deleteIconFilledColorSecondary'); +('& .MuiChip-deleteIconOutlinedColorPrimary'); +('& .MuiChip-deleteIconOutlinedColorSecondary'); +`&.${chipClasses.clickableColorPrimary}`; +`&.${chipClasses.clickableColorSecondary}`; +`&.${chipClasses.deletableColorPrimary}`; +`&.${chipClasses.deletableColorSecondary}`; +`&.${chipClasses.outlinedPrimary}`; +`&.${chipClasses.outlinedSecondary}`; +`&.${chipClasses.filledPrimary}`; +`&.${chipClasses.filledSecondary}`; +`& .${chipClasses.avatarSmall}`; +`& .${chipClasses.avatarMedium}`; +`& .${chipClasses.avatarColorPrimary}`; +`& .${chipClasses.avatarColorSecondary}`; +`& .${chipClasses.iconSmall}`; +`& .${chipClasses.iconMedium}`; +`& .${chipClasses.iconColorPrimary}`; +`& .${chipClasses.iconColorSecondary}`; +`& .${chipClasses.labelSmall}`; +`& .${chipClasses.labelMedium}`; +`& .${chipClasses.deleteIconSmall}`; +`& .${chipClasses.deleteIconMedium}`; +`& .${chipClasses.deleteIconColorPrimary}`; +`& .${chipClasses.deleteIconColorSecondary}`; +`& .${chipClasses.deleteIconFilledColorPrimary}`; +`& .${chipClasses.deleteIconFilledColorSecondary}`; +`& .${chipClasses.deleteIconOutlinedColorPrimary}`; +`& .${chipClasses.deleteIconOutlinedColorSecondary}`; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..58752f589abb1f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/package.expected.js @@ -0,0 +1,54 @@ +import { chipClasses } from '@org/ui/material/Chip'; + +("&.MuiChip-clickable.MuiChip-colorPrimary"); +("&.MuiChip-clickable.MuiChip-colorSecondary"); +("&.MuiChip-deletable.MuiChip-colorPrimary"); +("&.MuiChip-deletable.MuiChip-colorSecondary"); +("&.MuiChip-outlined.MuiChip-colorPrimary"); +("&.MuiChip-outlined.MuiChip-colorSecondary"); +("&.MuiChip-filled.MuiChip-colorPrimary"); +("&.MuiChip-filled.MuiChip-colorSecondary"); +("&.MuiChip-sizeSmall > .MuiChip-avatar"); +("&.MuiChip-sizeMedium > .MuiChip-avatar"); +("&.MuiChip-colorPrimary > .MuiChip-avatar"); +("&.MuiChip-colorSecondary > .MuiChip-avatar"); +("&.MuiChip-sizeSmall > .MuiChip-icon"); +("&.MuiChip-sizeMedium > .MuiChip-icon"); +("&.MuiChip-colorPrimary > .MuiChip-icon"); +("&.MuiChip-colorSecondary > .MuiChip-icon"); +("&.MuiChip-sizeSmall > .MuiChip-label"); +("&.MuiChip-sizeMedium > .MuiChip-label"); +("&.MuiChip-sizeSmall > .MuiChip-deleteIcon"); +("&.MuiChip-sizeMedium > .MuiChip-deleteIcon"); +("&.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +("&.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +("&.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`; +`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`; +`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`; +`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`; +`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`; +`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`; +`&.${chipClasses.filled}.${chipClasses.colorPrimary}`; +`&.${chipClasses.filled}.${chipClasses.colorSecondary}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.label}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.label}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.js index 15d60cbfc338cb..4dfb7061dea38c 100644 --- a/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.js +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/CircularProgress$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/CircularProgress)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.test.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.test.js index 92711388f3428c..43238984a6c128 100644 --- a/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.test.js +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..8381dea46a6ee9 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.actual.js @@ -0,0 +1,6 @@ +import { circularProgressClasses } from '@org/ui/material/CircularProgress'; + +('& .MuiCircularProgress-circleDeterminate'); +('& .MuiCircularProgress-circleIndeterminate'); +`& .${circularProgressClasses.circleDeterminate}`; +`& .${circularProgressClasses.circleIndeterminate}`; diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..27f3db241da386 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.expected.js @@ -0,0 +1,6 @@ +import { circularProgressClasses } from '@org/ui/material/CircularProgress'; + +("&.MuiCircularProgress-determinate > .MuiCircularProgress-circle"); +("&.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle"); +`&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`; +`&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`; diff --git a/packages/mui-codemod/src/deprecations/dialog-classes/dialog-classes.js b/packages/mui-codemod/src/deprecations/dialog-classes/dialog-classes.js index 88e126eeb53b66..f35cf136078898 100644 --- a/packages/mui-codemod/src/deprecations/dialog-classes/dialog-classes.js +++ b/packages/mui-codemod/src/deprecations/dialog-classes/dialog-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Dialog$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Dialog)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'dialogClasses') { diff --git a/packages/mui-codemod/src/deprecations/dialog-classes/dialog-classes.test.js b/packages/mui-codemod/src/deprecations/dialog-classes/dialog-classes.test.js index 023e4f741bc19e..99a4b0bdde3601 100644 --- a/packages/mui-codemod/src/deprecations/dialog-classes/dialog-classes.test.js +++ b/packages/mui-codemod/src/deprecations/dialog-classes/dialog-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/dialog-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/dialog-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..da6197fc928b9b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/dialog-classes/test-cases/package.actual.js @@ -0,0 +1,7 @@ +import { dialogClasses } from '@org/ui/material/Dialog'; + +('& .MuiDialog-paperScrollBody'); +('& .MuiDialog-paperScrollPaper'); + +`& .${dialogClasses.paperScrollBody}`; +`& .${dialogClasses.paperScrollPaper}`; diff --git a/packages/mui-codemod/src/deprecations/dialog-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/dialog-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..a42bc6dd559a08 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/dialog-classes/test-cases/package.expected.js @@ -0,0 +1,7 @@ +import { dialogClasses } from '@org/ui/material/Dialog'; + +("& .MuiDialog-scrollBody > .MuiDialog-paper"); +("& .MuiDialog-scrollPaper > .MuiDialog-paper"); + +`& .${dialogClasses.scrollBody} > .${dialogClasses.paper}`; +`& .${dialogClasses.scrollPaper} > .${dialogClasses.paper}`; diff --git a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js index 477579f140e4bd..2038e1ccb62c01 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/divider-props.js +++ b/packages/mui-codemod/src/deprecations/divider-props/divider-props.js @@ -12,58 +12,62 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - findComponentJSX(j, { root, componentName: 'Divider' }, (elementPath) => { - const lightProp = elementPath.node.openingElement.attributes.find( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'light', - ); + findComponentJSX( + j, + { root, componentName: 'Divider', packageName: options.packageName }, + (elementPath) => { + const lightProp = elementPath.node.openingElement.attributes.find( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'light', + ); - if (!lightProp) { - return; - } + if (!lightProp) { + return; + } - elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter( - (attr) => { - if (attr.type === 'JSXAttribute' && attr.name.name === 'light') { - return false; - } - return true; - }, - ); + elementPath.node.openingElement.attributes = + elementPath.node.openingElement.attributes.filter((attr) => { + if (attr.type === 'JSXAttribute' && attr.name.name === 'light') { + return false; + } + return true; + }); - const isLightPropTruthy = lightProp.value?.expression.value !== false; + const isLightPropTruthy = lightProp.value?.expression.value !== false; - if (!isLightPropTruthy) { - return; - } - - const sxIndex = elementPath.node.openingElement.attributes.findIndex( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx', - ); - if (sxIndex === -1) { - appendAttribute(j, { - target: elementPath.node, - attributeName: 'sx', - expression: j.objectExpression([ - j.objectProperty(j.identifier('opacity'), j.literal('0.6')), - ]), - }); - } else { - const opacityIndex = elementPath.node.openingElement.attributes[ - sxIndex - ].value.expression.properties.findIndex((key) => key.key.name === 'opacity'); + if (!isLightPropTruthy) { + return; + } - if (opacityIndex === -1) { - assignObject(j, { - target: elementPath.node.openingElement.attributes[sxIndex], - key: 'opacity', - expression: j.literal('0.6'), + const sxIndex = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx', + ); + if (sxIndex === -1) { + appendAttribute(j, { + target: elementPath.node, + attributeName: 'sx', + expression: j.objectExpression([ + j.objectProperty(j.identifier('opacity'), j.literal('0.6')), + ]), }); + } else { + const opacityIndex = elementPath.node.openingElement.attributes[ + sxIndex + ].value.expression.properties.findIndex((key) => key.key.name === 'opacity'); + + if (opacityIndex === -1) { + assignObject(j, { + target: elementPath.node.openingElement.attributes[sxIndex], + key: 'opacity', + expression: j.literal('0.6'), + }); + } } - } - }); + }, + ); const defaultPropsPathCollection = findComponentDefaultProps(j, { root, + packageName: options.packageName, componentName: 'Divider', }); diff --git a/packages/mui-codemod/src/deprecations/divider-props/divider-props.test.js b/packages/mui-codemod/src/deprecations/divider-props/divider-props.test.js index bc4efc2f726a34..5188352ca4b2e9 100644 --- a/packages/mui-codemod/src/deprecations/divider-props/divider-props.test.js +++ b/packages/mui-codemod/src/deprecations/divider-props/divider-props.test.js @@ -61,5 +61,29 @@ describe('@mui/codemod', () => { expect(actual).not.to.equal(expected); }); }); + + describe('[package] divider-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..4c9391f04a1818 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/package.actual.js @@ -0,0 +1,12 @@ +import Divider from '@org/ui/material/Divider'; +import { Divider as MyDivider } from '@org/ui/material'; + +; +; +; +; +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/divider-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/divider-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..80e33c0d11c3db --- /dev/null +++ b/packages/mui-codemod/src/deprecations/divider-props/test-cases/package.expected.js @@ -0,0 +1,24 @@ +import Divider from '@org/ui/material/Divider'; +import { Divider as MyDivider } from '@org/ui/material'; + +; +; +; +; +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.js b/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.js index 5a774cd82a8888..f10dd346c68f40 100644 --- a/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.js +++ b/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Drawer$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Drawer)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'drawerClasses') { diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.test.js b/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.test.js index 0672afc882f901..de50873b0205c0 100644 --- a/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.test.js +++ b/packages/mui-codemod/src/deprecations/drawer-classes/drawer-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..75a4b8e384d9e2 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/package.actual.js @@ -0,0 +1,18 @@ +import { drawerClasses } from '@org/ui/material/Drawer'; + +("& .MuiDrawer-paperAnchorBottom"); +("& .MuiDrawer-paperAnchorLeft"); +("& .MuiDrawer-paperAnchorRight"); +("& .MuiDrawer-paperAnchorTop"); +("& .MuiDrawer-paperAnchorDockedBottom"); +("& .MuiDrawer-paperAnchorDockedLeft"); +("& .MuiDrawer-paperAnchorDockedRight"); +("& .MuiDrawer-paperAnchorDockedTop"); +`& .${drawerClasses.paperAnchorBottom}`; +`& .${drawerClasses.paperAnchorLeft}`; +`& .${drawerClasses.paperAnchorRight}`; +`& .${drawerClasses.paperAnchorTop}`; +`& .${drawerClasses.paperAnchorDockedBottom}`; +`& .${drawerClasses.paperAnchorDockedLeft}`; +`& .${drawerClasses.paperAnchorDockedRight}`; +`& .${drawerClasses.paperAnchorDockedTop}`; diff --git a/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..dc1aafde32b602 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-classes/test-cases/package.expected.js @@ -0,0 +1,18 @@ +import { drawerClasses } from '@org/ui/material/Drawer'; + +("&.MuiDrawer-anchorBottom > .MuiDrawer-paper"); +("&.MuiDrawer-anchorLeft > .MuiDrawer-paper"); +("&.MuiDrawer-anchorRight > .MuiDrawer-paper"); +("&.MuiDrawer-anchorTop > .MuiDrawer-paper"); +("&.MuiDrawer-docked.MuiDrawer-anchorBottom > .MuiDrawer-paper"); +("&.MuiDrawer-docked.MuiDrawer-anchorLeft > .MuiDrawer-paper"); +("&.MuiDrawer-docked.MuiDrawer-anchorRight > .MuiDrawer-paper"); +("&.MuiDrawer-docked.MuiDrawer-anchorTop > .MuiDrawer-paper"); +`&.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`; +`&.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`; +`&.${drawerClasses.anchorRight} > .${drawerClasses.paper}`; +`&.${drawerClasses.anchorTop} > .${drawerClasses.paper}`; +`&.${drawerClasses.docked}.${drawerClasses.anchorBottom} > .${drawerClasses.paper}`; +`&.${drawerClasses.docked}.${drawerClasses.anchorLeft} > .${drawerClasses.paper}`; +`&.${drawerClasses.docked}.${drawerClasses.anchorRight} > .${drawerClasses.paper}`; +`&.${drawerClasses.docked}.${drawerClasses.anchorTop} > .${drawerClasses.paper}`; diff --git a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js index e9e554a696745d..37d08934273328 100644 --- a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js +++ b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.js @@ -12,12 +12,14 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Drawer', propName: 'BackdropComponent', slotName: 'backdrop', }); movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'SwipeableDrawer', propName: 'BackdropComponent', slotName: 'backdrop', @@ -25,12 +27,14 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Drawer', propName: 'BackdropProps', slotName: 'backdrop', }); movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SwipeableDrawer', propName: 'BackdropProps', slotName: 'backdrop', @@ -38,12 +42,14 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Drawer', propName: 'PaperProps', slotName: 'paper', }); movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SwipeableDrawer', propName: 'PaperProps', slotName: 'paper', @@ -51,12 +57,14 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Drawer', propName: 'SlideProps', slotName: 'transition', }); movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SwipeableDrawer', propName: 'SlideProps', slotName: 'transition', diff --git a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js index 115755b40f1327..ede6d026a4a9bb 100644 --- a/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js +++ b/packages/mui-codemod/src/deprecations/drawer-props/drawer-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..9cc55c8a2ec3c4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/package.actual.js @@ -0,0 +1,32 @@ +import Drawer from '@org/ui/material/Drawer'; +import SwipeableDrawer from '@org/ui/material/SwipeableDrawer'; +import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@org/ui/material'; + +; +; + +; +; + +; +; + +; +; + +; diff --git a/packages/mui-codemod/src/deprecations/drawer-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..48f210ef6e10cd --- /dev/null +++ b/packages/mui-codemod/src/deprecations/drawer-props/test-cases/package.expected.js @@ -0,0 +1,54 @@ +import Drawer from '@org/ui/material/Drawer'; +import SwipeableDrawer from '@org/ui/material/SwipeableDrawer'; +import { Drawer as MyDrawer, SwipeableDrawer as MySwipeableDrawer } from '@org/ui/material'; + +; +; + +; +; + +; +; + +; +; + +; diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.js b/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.js index f704f9848fc318..95e5aa88830403 100644 --- a/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.js +++ b/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.js @@ -9,7 +9,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'FilledInput' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'FilledInput', + }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.test.js b/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.test.js index dd3da4d40a3e6c..4a598029142cb1 100644 --- a/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.test.js +++ b/packages/mui-codemod/src/deprecations/filled-input-props/filled-input-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..2f30097e209368 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import FilledInput from '@org/ui/material/FilledInput'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..d8fdedfbf2dc47 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/filled-input-props/test-cases/package.expected.js @@ -0,0 +1,32 @@ +import FilledInput from '@org/ui/material/FilledInput'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/form-control-label-props/form-control-label-props.js b/packages/mui-codemod/src/deprecations/form-control-label-props/form-control-label-props.js index 5d49fa5c50dbad..8345ddb5108a79 100644 --- a/packages/mui-codemod/src/deprecations/form-control-label-props/form-control-label-props.js +++ b/packages/mui-codemod/src/deprecations/form-control-label-props/form-control-label-props.js @@ -9,7 +9,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'FormControlLabel' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'FormControlLabel', + }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/form-control-label-props/form-control-label-props.test.js b/packages/mui-codemod/src/deprecations/form-control-label-props/form-control-label-props.test.js index 6092d772500eb2..a98cc5a1ed3730 100644 --- a/packages/mui-codemod/src/deprecations/form-control-label-props/form-control-label-props.test.js +++ b/packages/mui-codemod/src/deprecations/form-control-label-props/form-control-label-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] form-control-label-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false }, packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/form-control-label-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/form-control-label-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..4a403f8979ed4d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/form-control-label-props/test-cases/package.actual.js @@ -0,0 +1,8 @@ +import FormControlLabel from '@org/ui/material/FormControlLabel'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/form-control-label-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/form-control-label-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..3a9e69e1568cb8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/form-control-label-props/test-cases/package.expected.js @@ -0,0 +1,9 @@ +import FormControlLabel from '@org/ui/material/FormControlLabel'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js index 11988591e587d6..ef2b4c03ed9502 100644 --- a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/ImageListItemBar$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/ImageListItemBar)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.test.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.test.js index e61f28f8dd175e..9f5fd4db288562 100644 --- a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.test.js +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..39e6eefd7c9c6b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/package.actual.js @@ -0,0 +1,11 @@ +import { imageListItemBarClasses } from '@org/ui/material/ImageListItemBar'; + +('& .MuiImageListItemBar-titleWrapBelow'); +('& .MuiImageListItemBar-titleWrapActionPosLeft'); +('& .MuiImageListItemBar-titleWrapActionPosRight'); +('& .MuiImageListItemBar-actionIconActionPosLeft'); + +`& .${imageListItemBarClasses.titleWrapBelow}`; +`& .${imageListItemBarClasses.titleWrapActionPosLeft}`; +`& .${imageListItemBarClasses.titleWrapActionPosRight}`; +`& .${imageListItemBarClasses.actionIconActionPosLeft}`; diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..617c59896f4f60 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/package.expected.js @@ -0,0 +1,11 @@ +import { imageListItemBarClasses } from '@org/ui/material/ImageListItemBar'; + +("&.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap"); +("&.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap"); +("&.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap"); +("&.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon"); + +`&.${imageListItemBarClasses.positionBelow} > .${imageListItemBarClasses.titleWrap}`; +`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.titleWrap}`; +`&.${imageListItemBarClasses.actionPositionRight} > .${imageListItemBarClasses.titleWrap}`; +`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.actionIcon}`; diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.js b/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.js index aba031150b1a22..6d74b26da0cb02 100644 --- a/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.js +++ b/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/InputBase$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/InputBase)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.test.js b/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.test.js index b239d8dc0406ba..d64a8b596eee51 100644 --- a/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.test.js +++ b/packages/mui-codemod/src/deprecations/input-base-classes/input-base-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..5df34e3b0d550a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/package.actual.js @@ -0,0 +1,13 @@ +import { inputBaseClasses } from '@org/ui/material/InputBase'; + +('& .MuiInputBase-inputHiddenLabel'); +('& .MuiInputBase-inputMultiline'); +('& .MuiInputBase-inputAdornedStart'); +('& .MuiInputBase-inputAdornedEnd'); +('& .MuiInputBase-inputSizeSmall'); + +`& .${inputBaseClasses.inputHiddenLabel}`; +`& .${inputBaseClasses.inputMultiline}`; +`& .${inputBaseClasses.inputAdornedStart}`; +`& .${inputBaseClasses.inputAdornedEnd}`; +`& .${inputBaseClasses.inputSizeSmall}`; diff --git a/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..e0ab246cf54be6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-classes/test-cases/package.expected.js @@ -0,0 +1,13 @@ +import { inputBaseClasses } from '@org/ui/material/InputBase'; + +("&.MuiInputBase-hiddenLabel > .MuiInputBase-input"); +("&.MuiInputBase-multiline > .MuiInputBase-input"); +("&.MuiInputBase-adornedStart > .MuiInputBase-input"); +("&.MuiInputBase-adornedEnd > .MuiInputBase-input"); +("&.MuiInputBase-sizeSmall > .MuiInputBase-input"); + +`&.${inputBaseClasses.hiddenLabel} > .${inputBaseClasses.input}`; +`&.${inputBaseClasses.multiline} > .${inputBaseClasses.input}`; +`&.${inputBaseClasses.adornedStart} > .${inputBaseClasses.input}`; +`&.${inputBaseClasses.adornedEnd} > .${inputBaseClasses.input}`; +`&.${inputBaseClasses.sizeSmall} > .${inputBaseClasses.input}`; diff --git a/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.js b/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.js index 5fc9b0f8e905c7..5c4ab2d389ef91 100644 --- a/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.js +++ b/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.js @@ -9,7 +9,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'InputBase' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'InputBase', + }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.test.js b/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.test.js index 22651e06f3a91b..3df7d3b81f4e15 100644 --- a/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.test.js +++ b/packages/mui-codemod/src/deprecations/input-base-props/input-base-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/input-base-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..8ec3071812e7c8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import InputBase from '@org/ui/material/InputBase'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/input-base-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..0e5b07a94b0d41 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-base-props/test-cases/package.expected.js @@ -0,0 +1,32 @@ +import InputBase from '@org/ui/material/InputBase'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/input-props/input-props.js b/packages/mui-codemod/src/deprecations/input-props/input-props.js index b69943a6bf2449..b6d635b9b14797 100644 --- a/packages/mui-codemod/src/deprecations/input-props/input-props.js +++ b/packages/mui-codemod/src/deprecations/input-props/input-props.js @@ -9,7 +9,7 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'Input' }); + replaceComponentsWithSlots(j, { root, packageName: options.packageName, componentName: 'Input' }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/input-props/input-props.test.js b/packages/mui-codemod/src/deprecations/input-props/input-props.test.js index e8a216332c2b8a..25537498cc9fdf 100644 --- a/packages/mui-codemod/src/deprecations/input-props/input-props.test.js +++ b/packages/mui-codemod/src/deprecations/input-props/input-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/input-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/input-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..db65aa9d6d9c63 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-props/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import Input from '@org/ui/material/Input'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/input-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/input-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..f8e8ff473ed6cb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/input-props/test-cases/package.expected.js @@ -0,0 +1,32 @@ +import Input from '@org/ui/material/Input'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/linear-progress-classes/linear-progress-classes.js b/packages/mui-codemod/src/deprecations/linear-progress-classes/linear-progress-classes.js index dbe1241401791b..2d331fa4473ec2 100644 --- a/packages/mui-codemod/src/deprecations/linear-progress-classes/linear-progress-classes.js +++ b/packages/mui-codemod/src/deprecations/linear-progress-classes/linear-progress-classes.js @@ -13,7 +13,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/LinearProgress$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/LinearProgress)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/linear-progress-classes/linear-progress-classes.test.js b/packages/mui-codemod/src/deprecations/linear-progress-classes/linear-progress-classes.test.js index fbad32e703a40c..89141389812d12 100644 --- a/packages/mui-codemod/src/deprecations/linear-progress-classes/linear-progress-classes.test.js +++ b/packages/mui-codemod/src/deprecations/linear-progress-classes/linear-progress-classes.test.js @@ -40,6 +40,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'single', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/linear-progress-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/linear-progress-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..a87be504751327 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/linear-progress-classes/test-cases/package.actual.js @@ -0,0 +1,20 @@ +import { linearProgressClasses } from '@org/ui/material/LinearProgress'; + +('& .MuiLinearProgress-bar1Buffer'); +('& .MuiLinearProgress-bar1Determinate'); +('& .MuiLinearProgress-bar1Indeterminate'); +('& .MuiLinearProgress-bar2Buffer'); +('& .MuiLinearProgress-bar2Indeterminate'); +('& .MuiLinearProgress-barColorPrimary'); +('& .MuiLinearProgress-barColorSecondary'); +('& .MuiLinearProgress-dashedColorPrimary'); +('& .MuiLinearProgress-dashedColorSecondary'); +`& .${linearProgressClasses.bar1Buffer}`; +`& .${linearProgressClasses.bar1Determinate}`; +`& .${linearProgressClasses.bar1Indeterminate}`; +`& .${linearProgressClasses.bar2Buffer}`; +`& .${linearProgressClasses.bar2Indeterminate}`; +`& .${linearProgressClasses.barColorPrimary}`; +`& .${linearProgressClasses.barColorSecondary}`; +`& .${linearProgressClasses.dashedColorPrimary}`; +`& .${linearProgressClasses.dashedColorSecondary}`; diff --git a/packages/mui-codemod/src/deprecations/linear-progress-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/linear-progress-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..71f64b7088ba4c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/linear-progress-classes/test-cases/package.expected.js @@ -0,0 +1,20 @@ +import { linearProgressClasses } from '@org/ui/material/LinearProgress'; + +('&.MuiLinearProgress-buffer > .MuiLinearProgress-bar1'); +('&.MuiLinearProgress-determinate > .MuiLinearProgress-bar1'); +('&.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1'); +('&.MuiLinearProgress-buffer > .MuiLinearProgress-bar2'); +('&.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2'); +('&.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar'); +('&.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar'); +('&.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed'); +('&.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed'); +`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar1}`; +`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1}`; +`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar1}`; +`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar2}`; +`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar2}`; +`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.bar}`; +`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.bar}`; +`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.dashed}`; +`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.dashed}`; diff --git a/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.js b/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.js index e63086dfac4c90..039c6758ea8cce 100644 --- a/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.js +++ b/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.js @@ -11,10 +11,15 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'ListItem' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'ListItem', + }); movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'ListItem', propName: 'ContainerComponent', slotName: 'root', @@ -22,6 +27,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'ListItem', propName: 'ContainerProps', slotName: 'root', diff --git a/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.test.js b/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.test.js index f4175cf1c908db..7b1adaa961d7aa 100644 --- a/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.test.js +++ b/packages/mui-codemod/src/deprecations/list-item-props/list-item-props.test.js @@ -50,5 +50,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] list-item-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false }, packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/list-item-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..5966d7796d3871 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/package.actual.js @@ -0,0 +1,26 @@ +import ListItem from '@org/ui/material/ListItem'; + +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/list-item-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..b6243cb51bc548 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/list-item-props/test-cases/package.expected.js @@ -0,0 +1,34 @@ +import ListItem from '@org/ui/material/ListItem'; + +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.js b/packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.js index cf0b470a0f49f6..16e84f0c84a3a1 100644 --- a/packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.js +++ b/packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.js @@ -10,10 +10,15 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'ListItemText' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'ListItemText', + }); movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'ListItemText', propName: 'primaryTypographyProps', slotName: 'primary', @@ -21,6 +26,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'ListItemText', propName: 'secondaryTypographyProps', slotName: 'secondary', diff --git a/packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.test.js b/packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.test.js index 09c964657705e8..633fb089f41a28 100644 --- a/packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.test.js +++ b/packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] list-item-text-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false }, packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..2c1b57656a9102 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/package.actual.js @@ -0,0 +1,12 @@ +import ListItemText from '@org/ui/material/ListItemText'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..f84796af9f05a4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/package.expected.js @@ -0,0 +1,18 @@ +import ListItemText from '@org/ui/material/ListItemText'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/menu-props/menu-props.js b/packages/mui-codemod/src/deprecations/menu-props/menu-props.js index f63fa7bae12e07..849547d2442d52 100644 --- a/packages/mui-codemod/src/deprecations/menu-props/menu-props.js +++ b/packages/mui-codemod/src/deprecations/menu-props/menu-props.js @@ -12,6 +12,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Menu', propName: 'MenuListProps', slotName: 'list', @@ -19,6 +20,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Menu', propName: 'TransitionComponent', slotName: 'transition', @@ -26,6 +28,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Menu', propName: 'TransitionProps', slotName: 'transition', diff --git a/packages/mui-codemod/src/deprecations/menu-props/menu-props.test.js b/packages/mui-codemod/src/deprecations/menu-props/menu-props.test.js index c3e716c43bb381..97b5e2cd776c63 100644 --- a/packages/mui-codemod/src/deprecations/menu-props/menu-props.test.js +++ b/packages/mui-codemod/src/deprecations/menu-props/menu-props.test.js @@ -10,6 +10,13 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { + packageName: '@org/ui/material', + }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/menu-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/menu-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..216adf15a41a85 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/menu-props/test-cases/package.actual.js @@ -0,0 +1,48 @@ +import Menu from '@org/ui/material/Menu'; +import { Menu as MyMenu } from '@org/ui/material'; + +; + +; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/menu-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/menu-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..835ae6eb9b13c2 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/menu-props/test-cases/package.expected.js @@ -0,0 +1,63 @@ +import Menu from '@org/ui/material/Menu'; +import { Menu as MyMenu } from '@org/ui/material'; + +; + +; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.js b/packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.js index 39dc194da8073d..9745a5564791d9 100644 --- a/packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.js +++ b/packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.js @@ -11,6 +11,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'MobileStepper', propName: 'LinearProgressProps', slotName: 'progress', diff --git a/packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.test.js b/packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.test.js index 81073f71de67b1..6fef4a1bed0773 100644 --- a/packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.test.js +++ b/packages/mui-codemod/src/deprecations/mobile-stepper-props/mobile-stepper-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..e7d6b221e4463c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/package.actual.js @@ -0,0 +1,15 @@ +import MobileStepper from '@org/ui/material/MobileStepper'; +import { MobileStepper as MyMobileStepper } from '@org/ui/material'; + +; +; + +; diff --git a/packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..4b422ac1020a33 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/mobile-stepper-props/test-cases/package.expected.js @@ -0,0 +1,19 @@ +import MobileStepper from '@org/ui/material/MobileStepper'; +import { MobileStepper as MyMobileStepper } from '@org/ui/material'; + +; +; + +; diff --git a/packages/mui-codemod/src/deprecations/modal-props/modal-props.js b/packages/mui-codemod/src/deprecations/modal-props/modal-props.js index d1905389c19920..d220b1fb370a80 100644 --- a/packages/mui-codemod/src/deprecations/modal-props/modal-props.js +++ b/packages/mui-codemod/src/deprecations/modal-props/modal-props.js @@ -11,10 +11,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'Modal' }); + replaceComponentsWithSlots(j, { root, packageName: options.packageName, componentName: 'Modal' }); movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Modal', propName: 'BackdropComponent', slotName: 'backdrop', @@ -22,6 +23,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Modal', propName: 'BackdropProps', slotName: 'backdrop', diff --git a/packages/mui-codemod/src/deprecations/modal-props/modal-props.test.js b/packages/mui-codemod/src/deprecations/modal-props/modal-props.test.js index 225aa389b77c5f..f51e638cdfbee2 100644 --- a/packages/mui-codemod/src/deprecations/modal-props/modal-props.test.js +++ b/packages/mui-codemod/src/deprecations/modal-props/modal-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/modal-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/modal-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..06f6efb5d34a6c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/modal-props/test-cases/package.actual.js @@ -0,0 +1,26 @@ +import Modal from '@org/ui/material/Modal'; + +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/modal-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/modal-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..3719aeb1989eae --- /dev/null +++ b/packages/mui-codemod/src/deprecations/modal-props/test-cases/package.expected.js @@ -0,0 +1,34 @@ +import Modal from '@org/ui/material/Modal'; + +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.js b/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.js index 370e230ef4dbff..f4222c09f4eca7 100644 --- a/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.js +++ b/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.js @@ -9,7 +9,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'OutlinedInput' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'OutlinedInput', + }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.test.js b/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.test.js index 99e10a31159dda..1eec8402e430ba 100644 --- a/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.test.js +++ b/packages/mui-codemod/src/deprecations/outlined-input-props/outlined-input-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..fb8bab7916d2a9 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import OutlinedInput from '@org/ui/material/OutlinedInput'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..83f79262686811 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/outlined-input-props/test-cases/package.expected.js @@ -0,0 +1,32 @@ +import OutlinedInput from '@org/ui/material/OutlinedInput'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js index 5bf5e6cdd23a3f..15449bf85f77f1 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -11,7 +11,11 @@ export default function transformer(file, api, options) { classes.forEach(({ deprecatedClass, replacementSelector }) => { root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/PaginationItem$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/PaginationItem)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js index 4949d6d844ef3a..0a59653bff03eb 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..560ab18b3db443 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/package.actual.js @@ -0,0 +1,111 @@ +import { paginationItemClasses } from '@org/ui/material/PaginationItem'; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + '&.MuiPaginationItem-textPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-textSecondary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`&.${paginationItemClasses.textPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '&.MuiPaginationItem-textPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-textSecondary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`&.${paginationItemClasses.textPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..ce3aa86032b5d1 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/package.expected.js @@ -0,0 +1,111 @@ +import { paginationItemClasses } from '@org/ui/material/PaginationItem'; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.js b/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.js index 252aabc0e816e5..d9979be8dba822 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.js @@ -9,7 +9,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'PaginationItem' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'PaginationItem', + }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.test.js b/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.test.js index 4d7cd4fe412d44..ad356fdf1529ed 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.test.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/pagination-item-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] pagination-item-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false }, packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..fc680a9e8b12f1 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/package.actual.js @@ -0,0 +1,12 @@ +import PaginationItem from '@org/ui/material/PaginationItem'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..7a83d7dd98dc03 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-props/test-cases/package.expected.js @@ -0,0 +1,10 @@ +import PaginationItem from '@org/ui/material/PaginationItem'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/popover-props/popover-props.js b/packages/mui-codemod/src/deprecations/popover-props/popover-props.js index 6a5cac66a5c936..fa3c1c0ddd9894 100644 --- a/packages/mui-codemod/src/deprecations/popover-props/popover-props.js +++ b/packages/mui-codemod/src/deprecations/popover-props/popover-props.js @@ -12,6 +12,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Popover', propName: 'BackdropComponent', slotName: 'backdrop', @@ -19,6 +20,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Popover', propName: 'BackdropProps', slotName: 'backdrop', @@ -26,6 +28,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Popover', propName: 'PaperProps', slotName: 'paper', @@ -33,6 +36,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Popover', propName: 'TransitionComponent', slotName: 'transition', @@ -40,6 +44,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Popover', propName: 'TransitionProps', slotName: 'transition', diff --git a/packages/mui-codemod/src/deprecations/popover-props/popover-props.test.js b/packages/mui-codemod/src/deprecations/popover-props/popover-props.test.js index 0db50c31157e53..0a1c7b8c2d4bae 100644 --- a/packages/mui-codemod/src/deprecations/popover-props/popover-props.test.js +++ b/packages/mui-codemod/src/deprecations/popover-props/popover-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/popover-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/popover-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..6becd4ef5c2f22 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/popover-props/test-cases/package.actual.js @@ -0,0 +1,39 @@ +import Popover from '@org/ui/material/Popover'; +import { Popover as MyPopover } from '@org/ui/material'; + +; + + {} }, + }} +/>; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/popover-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/popover-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..5df9f92cd64de8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/popover-props/test-cases/package.expected.js @@ -0,0 +1,52 @@ +import Popover from '@org/ui/material/Popover'; +import { Popover as MyPopover } from '@org/ui/material'; + +; + + {} } + }, + }} + slots={{ + backdrop: CustomBackdrop, + transition: CustomTransition + }} />; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/popper-props/popper-props.js b/packages/mui-codemod/src/deprecations/popper-props/popper-props.js index f005e8453bdb5d..9b031832e2d855 100644 --- a/packages/mui-codemod/src/deprecations/popper-props/popper-props.js +++ b/packages/mui-codemod/src/deprecations/popper-props/popper-props.js @@ -9,7 +9,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'Popper' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'Popper', + }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/popper-props/popper-props.test.js b/packages/mui-codemod/src/deprecations/popper-props/popper-props.test.js index f50b9a59d25288..9c86afae42acad 100644 --- a/packages/mui-codemod/src/deprecations/popper-props/popper-props.test.js +++ b/packages/mui-codemod/src/deprecations/popper-props/popper-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/popper-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/popper-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..4a5c2a8099f294 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/popper-props/test-cases/package.actual.js @@ -0,0 +1,12 @@ +import Popper from '@org/ui/material/Popper'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/popper-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/popper-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..3c38fc9fb73620 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/popper-props/test-cases/package.expected.js @@ -0,0 +1,14 @@ +import Popper from '@org/ui/material/Popper'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/rating-props/rating-props.js b/packages/mui-codemod/src/deprecations/rating-props/rating-props.js index 5dfedb5718c256..e994bbd3df1b3e 100644 --- a/packages/mui-codemod/src/deprecations/rating-props/rating-props.js +++ b/packages/mui-codemod/src/deprecations/rating-props/rating-props.js @@ -11,6 +11,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Rating', propName: 'IconContainerComponent', slotName: 'icon', diff --git a/packages/mui-codemod/src/deprecations/rating-props/rating-props.test.js b/packages/mui-codemod/src/deprecations/rating-props/rating-props.test.js index 701995ba74adf6..f5f9eae31397cb 100644 --- a/packages/mui-codemod/src/deprecations/rating-props/rating-props.test.js +++ b/packages/mui-codemod/src/deprecations/rating-props/rating-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/rating-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/rating-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..54d4ee53964374 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/rating-props/test-cases/package.actual.js @@ -0,0 +1,28 @@ +import Rating from '@org/ui/material/Rating'; +import { Rating as MyRating } from '@org/ui/material'; + +; +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/rating-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/rating-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..24f36bd2d64923 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/rating-props/test-cases/package.expected.js @@ -0,0 +1,43 @@ +import Rating from '@org/ui/material/Rating'; +import { Rating as MyRating } from '@org/ui/material'; + +; +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/select-classes/select-classes.js b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js index ffd978bd092c0c..0a25879c4882de 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/select-classes.js +++ b/packages/mui-codemod/src/deprecations/select-classes/select-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Select$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Select)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'selectClasses') { diff --git a/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js b/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js index a7bc4264dff0aa..28e456f3b42fff 100644 --- a/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js +++ b/packages/mui-codemod/src/deprecations/select-classes/select-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/select-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..7789f81fc69bef --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/package.actual.js @@ -0,0 +1,8 @@ +import { selectClasses } from '@org/ui/material/Select'; + +('& .MuiSelect-iconFilled'); +('& .MuiSelect-iconOutlined'); +('& .MuiSelect-iconStandard'); +`& .${selectClasses.iconFilled}`; +`& .${selectClasses.iconOutlined}`; +`& .${selectClasses.iconStandard}`; diff --git a/packages/mui-codemod/src/deprecations/select-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/select-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..410480e8db5a1c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/select-classes/test-cases/package.expected.js @@ -0,0 +1,8 @@ +import { selectClasses } from '@org/ui/material/Select'; + +("& .MuiSelect-filled ~ .MuiSelect-icon"); +("& .MuiSelect-outlined ~ .MuiSelect-icon"); +("& .MuiSelect-standard ~ .MuiSelect-icon"); +`& .${selectClasses.filled} ~ .${selectClasses.icon}`; +`& .${selectClasses.outlined} ~ .${selectClasses.icon}`; +`& .${selectClasses.standard} ~ .${selectClasses.icon}`; diff --git a/packages/mui-codemod/src/deprecations/slider-classes/slider-classes.js b/packages/mui-codemod/src/deprecations/slider-classes/slider-classes.js index 6cf84438d6119e..5163da8d2fc717 100644 --- a/packages/mui-codemod/src/deprecations/slider-classes/slider-classes.js +++ b/packages/mui-codemod/src/deprecations/slider-classes/slider-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Slider$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Slider)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'sliderClasses') { diff --git a/packages/mui-codemod/src/deprecations/slider-classes/slider-classes.test.js b/packages/mui-codemod/src/deprecations/slider-classes/slider-classes.test.js index cfc34bc70892a0..7b9ca1a31c51bc 100644 --- a/packages/mui-codemod/src/deprecations/slider-classes/slider-classes.test.js +++ b/packages/mui-codemod/src/deprecations/slider-classes/slider-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/slider-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/slider-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..97c0e0f0539e65 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-classes/test-cases/package.actual.js @@ -0,0 +1,18 @@ +import { sliderClasses } from '@org/ui/material/Slider'; + +('& .MuiSlider-thumbSizeSmall'); +('& .MuiSlider-thumbSizeMedium'); +('& .MuiSlider-thumbColorPrimary'); +('& .MuiSlider-thumbColorSecondary'); +('& .MuiSlider-thumbColorError'); +('& .MuiSlider-thumbColorInfo'); +('& .MuiSlider-thumbColorSuccess'); +('& .MuiSlider-thumbColorWarning'); +`& .${sliderClasses.thumbSizeSmall}`; +`& .${sliderClasses.thumbSizeMedium}`; +`& .${sliderClasses.thumbColorPrimary}`; +`& .${sliderClasses.thumbColorSecondary}`; +`& .${sliderClasses.thumbColorError}`; +`& .${sliderClasses.thumbColorInfo}`; +`& .${sliderClasses.thumbColorSuccess}`; +`& .${sliderClasses.thumbColorWarning}`; diff --git a/packages/mui-codemod/src/deprecations/slider-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/slider-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..30b2c36c6b325c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-classes/test-cases/package.expected.js @@ -0,0 +1,18 @@ +import { sliderClasses } from '@org/ui/material/Slider'; + +("&.MuiSlider-sizeSmall > .MuiSlider-thumb"); +("&.MuiSlider-sizeMedium > .MuiSlider-thumb"); +("&.MuiSlider-colorPrimary > .MuiSlider-thumb"); +("&.MuiSlider-colorSecondary > .MuiSlider-thumb"); +("&.MuiSlider-colorError > .MuiSlider-thumb"); +("&.MuiSlider-colorInfo > .MuiSlider-thumb"); +("&.MuiSlider-colorSuccess > .MuiSlider-thumb"); +("&.MuiSlider-colorWarning > .MuiSlider-thumb"); +`&.${sliderClasses.sizeSmall} > .${sliderClasses.thumb}`; +`&.${sliderClasses.sizeMedium} > .${sliderClasses.thumb}`; +`&.${sliderClasses.colorPrimary} > .${sliderClasses.thumb}`; +`&.${sliderClasses.colorSecondary} > .${sliderClasses.thumb}`; +`&.${sliderClasses.colorError} > .${sliderClasses.thumb}`; +`&.${sliderClasses.colorInfo} > .${sliderClasses.thumb}`; +`&.${sliderClasses.colorSuccess} > .${sliderClasses.thumb}`; +`&.${sliderClasses.colorWarning} > .${sliderClasses.thumb}`; diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.js index 056962a8b4c82a..78d016aeeebcf8 100644 --- a/packages/mui-codemod/src/deprecations/slider-props/slider-props.js +++ b/packages/mui-codemod/src/deprecations/slider-props/slider-props.js @@ -9,7 +9,11 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'Slider' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'Slider', + }); return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js index 033acf231969bd..1d2fc2f17a5add 100644 --- a/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js +++ b/packages/mui-codemod/src/deprecations/slider-props/slider-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] slider-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false }, packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..4b6bf624933ef6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import Slider from '@org/ui/material/Slider'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/slider-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/slider-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..3e95d9144a82f7 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/slider-props/test-cases/package.expected.js @@ -0,0 +1,32 @@ +import Slider from '@org/ui/material/Slider'; + +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.js b/packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.js index 5644c1bcd7691f..ed6b0135e859b5 100644 --- a/packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.js +++ b/packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.js @@ -12,6 +12,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Snackbar', propName: 'TransitionComponent', slotName: 'transition', @@ -19,6 +20,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Snackbar', propName: 'TransitionProps', slotName: 'transition', @@ -26,6 +28,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Snackbar', propName: 'ContentProps', slotName: 'content', @@ -33,6 +36,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Snackbar', propName: 'ClickAwayListenerProps', slotName: 'clickAwayListener', diff --git a/packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.test.js b/packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.test.js index 5b9887a9024411..dc09f2fe3a4e7b 100644 --- a/packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.test.js +++ b/packages/mui-codemod/src/deprecations/snackbar-props/snackbar-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/snackbar-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/snackbar-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..fbf0f86c26f6ff --- /dev/null +++ b/packages/mui-codemod/src/deprecations/snackbar-props/test-cases/package.actual.js @@ -0,0 +1,51 @@ +import Snackbar from '@org/ui/material/Snackbar'; +import { Snackbar as MySnackbar } from '@org/ui/material'; + +; +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/snackbar-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/snackbar-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..2776672f22971e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/snackbar-props/test-cases/package.expected.js @@ -0,0 +1,59 @@ +import Snackbar from '@org/ui/material/Snackbar'; +import { Snackbar as MySnackbar } from '@org/ui/material'; + +; +; +; +; +; + +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-action-props/speed-dial-action-props.js b/packages/mui-codemod/src/deprecations/speed-dial-action-props/speed-dial-action-props.js index 797ec9ef98d1ee..1b51da8e41e7bb 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-action-props/speed-dial-action-props.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-action-props/speed-dial-action-props.js @@ -11,6 +11,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SpeedDialAction', propName: 'tooltipTitle', slotName: 'tooltip', @@ -19,6 +20,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SpeedDialAction', propName: 'tooltipPlacement', slotName: 'tooltip', @@ -27,6 +29,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SpeedDialAction', propName: 'tooltipOpen', slotName: 'tooltip', @@ -35,6 +38,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SpeedDialAction', propName: 'TooltipClasses', slotName: 'tooltip', @@ -43,6 +47,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SpeedDialAction', propName: 'FabProps', slotName: 'fab', diff --git a/packages/mui-codemod/src/deprecations/speed-dial-action-props/speed-dial-action-props.test.js b/packages/mui-codemod/src/deprecations/speed-dial-action-props/speed-dial-action-props.test.js index 00877e25da9763..2efb3c5f85bdff 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-action-props/speed-dial-action-props.test.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-action-props/speed-dial-action-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/speed-dial-action-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/speed-dial-action-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..80faeb0f751b04 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-action-props/test-cases/package.actual.js @@ -0,0 +1,33 @@ +import SpeedDialAction from '@org/ui/material/SpeedDialAction'; +import { SpeedDialAction as MySpeedDialAction } from '@org/ui/material'; + +; +; +; +; +; +; +; +; +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-action-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/speed-dial-action-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..28a3e5bab258b7 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-action-props/test-cases/package.expected.js @@ -0,0 +1,80 @@ +import SpeedDialAction from '@org/ui/material/SpeedDialAction'; +import { SpeedDialAction as MySpeedDialAction } from '@org/ui/material'; + +; +; +; +; +; +; +; +; +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js index 879a27a59c80b5..57a78f6c005583 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js @@ -12,6 +12,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'SpeedDial', propName: 'TransitionComponent', slotName: 'transition', @@ -19,6 +20,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'SpeedDial', propName: 'TransitionProps', slotName: 'transition', diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js index bc31494da93870..b8b9f0e09d4e5f 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] speed-dial-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..540602fb033436 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/package.actual.js @@ -0,0 +1,29 @@ +import SpeedDial from '@org/ui/material/SpeedDial'; +import { SpeedDial as MySpeedDial } from '@org/ui/material'; + +; +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..307e0637229a0b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/package.expected.js @@ -0,0 +1,39 @@ +import SpeedDial from '@org/ui/material/SpeedDial'; +import { SpeedDial as MySpeedDial } from '@org/ui/material'; + +; +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js index 00f08a6c9b49f9..9771b79fdb6761 100644 --- a/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/StepConnector$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/StepConnector)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js index ea3ace7ef9d7e4..d141bae5bc6cc4 100644 --- a/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/step-connector-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..7f0a5cc5715576 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/package.actual.js @@ -0,0 +1,6 @@ +import { stepConnectorClasses } from '@org/ui/material/StepConnector'; + +('& .MuiStepConnector-lineHorizontal'); +('& .MuiStepConnector-lineVertical'); +`& .${stepConnectorClasses.lineHorizontal}`; +`& .${stepConnectorClasses.lineVertical}`; diff --git a/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..e3a0a927c961d5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-connector-classes/test-cases/package.expected.js @@ -0,0 +1,6 @@ +import { stepConnectorClasses } from '@org/ui/material/StepConnector'; + +("&.MuiStepConnector-horizontal > .MuiStepConnector-line"); +("&.MuiStepConnector-vertical > .MuiStepConnector-line"); +`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`; +`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`; diff --git a/packages/mui-codemod/src/deprecations/step-content-props/step-content-props.js b/packages/mui-codemod/src/deprecations/step-content-props/step-content-props.js index 794562703e297e..155d49503e8f1e 100644 --- a/packages/mui-codemod/src/deprecations/step-content-props/step-content-props.js +++ b/packages/mui-codemod/src/deprecations/step-content-props/step-content-props.js @@ -12,6 +12,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'StepContent', propName: 'TransitionComponent', slotName: 'transition', @@ -19,6 +20,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'StepContent', propName: 'TransitionProps', slotName: 'transition', diff --git a/packages/mui-codemod/src/deprecations/step-content-props/step-content-props.test.js b/packages/mui-codemod/src/deprecations/step-content-props/step-content-props.test.js index 770ab45628fb66..479b1b0341956a 100644 --- a/packages/mui-codemod/src/deprecations/step-content-props/step-content-props.test.js +++ b/packages/mui-codemod/src/deprecations/step-content-props/step-content-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] step-content-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/step-content-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/step-content-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..18b5b478b85941 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-content-props/test-cases/package.actual.js @@ -0,0 +1,32 @@ +import StepContent from '@org/ui/material/StepContent'; +import { StepContent as MyStepContent } from '@org/ui/material'; + +; +; +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/step-content-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/step-content-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..2aa80508869d4b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-content-props/test-cases/package.expected.js @@ -0,0 +1,42 @@ +import StepContent from '@org/ui/material/StepContent'; +import { StepContent as MyStepContent } from '@org/ui/material'; + +; +; +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js index b2fec09fa3b826..fd234f8bc4ba24 100644 --- a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js +++ b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js @@ -11,10 +11,15 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'StepLabel' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'StepLabel', + }); movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'StepLabel', propName: 'StepIconComponent', slotName: 'stepIcon', @@ -22,6 +27,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'StepLabel', propName: 'StepIconProps', slotName: 'stepIcon', diff --git a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js index 90edfeab7791e4..63b49d669b41ee 100644 --- a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js +++ b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js @@ -49,5 +49,29 @@ describe('@mui/codemod', () => { expect(actual).to.equal(expected, 'The transformed version should be correct'); }); }); + + describe('[package] step-label-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: false }, packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..ae51afef1aa3e2 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/package.actual.js @@ -0,0 +1,20 @@ +import StepLabel from '@org/ui/material/StepLabel'; + +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..8d9fde1bdc33d2 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/package.expected.js @@ -0,0 +1,35 @@ +import StepLabel from '@org/ui/material/StepLabel'; + +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/tab-classes/tab-classes.js b/packages/mui-codemod/src/deprecations/tab-classes/tab-classes.js index 94f0e9d9179660..343d1d2f8f9456 100644 --- a/packages/mui-codemod/src/deprecations/tab-classes/tab-classes.js +++ b/packages/mui-codemod/src/deprecations/tab-classes/tab-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Tab$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Tab)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'tabClasses') { diff --git a/packages/mui-codemod/src/deprecations/tab-classes/tab-classes.test.js b/packages/mui-codemod/src/deprecations/tab-classes/tab-classes.test.js index 4d382fc08389e4..9c30ed0593e19c 100644 --- a/packages/mui-codemod/src/deprecations/tab-classes/tab-classes.test.js +++ b/packages/mui-codemod/src/deprecations/tab-classes/tab-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/tab-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/tab-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..bab6a5c8ed9857 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/tab-classes/test-cases/package.actual.js @@ -0,0 +1,4 @@ +import { tabClasses } from '@org/ui/material/Tab'; + +('& .MuiTab-iconWrapper'); +`& .${tabClasses.iconWrapper}`; diff --git a/packages/mui-codemod/src/deprecations/tab-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/tab-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..cbcd961f10d051 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/tab-classes/test-cases/package.expected.js @@ -0,0 +1,4 @@ +import { tabClasses } from '@org/ui/material/Tab'; + +("& .MuiTab-icon"); +`& .${tabClasses.icon}`; diff --git a/packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.js b/packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.js index 57dad168bddb2a..74eee6f8dfb3ca 100644 --- a/packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.js +++ b/packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.js @@ -12,6 +12,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'TablePagination', propName: 'ActionsComponent', slotName: 'actions', @@ -19,6 +20,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'TablePagination', propName: 'SelectProps', slotName: 'select', diff --git a/packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.test.js b/packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.test.js index 858ae985e08589..74794b61fc438a 100644 --- a/packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.test.js +++ b/packages/mui-codemod/src/deprecations/table-pagination-props/table-pagination-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..929c44712b2ee7 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/package.actual.js @@ -0,0 +1,32 @@ +import TablePagination from '@org/ui/material/TablePagination'; +import { TablePagination as MyTablePagination } from '@org/ui/material'; + +; +; +; + null }} + slotProps={{ select: { native: false } }} +/>; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..189f509d758dd7 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/table-pagination-props/test-cases/package.expected.js @@ -0,0 +1,39 @@ +import TablePagination from '@org/ui/material/TablePagination'; +import { TablePagination as MyTablePagination } from '@org/ui/material'; + +; +; +; + null }} + slotProps={{ select: { + ...{ native: true }, + ...{ native: false } + } }} />; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/table-sort-label-classes/table-sort-label-classes.js b/packages/mui-codemod/src/deprecations/table-sort-label-classes/table-sort-label-classes.js index 2c575e3d54bad3..d1bd9d8b8c3054 100644 --- a/packages/mui-codemod/src/deprecations/table-sort-label-classes/table-sort-label-classes.js +++ b/packages/mui-codemod/src/deprecations/table-sort-label-classes/table-sort-label-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/TableSortLabel$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/TableSortLabel)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/table-sort-label-classes/table-sort-label-classes.test.js b/packages/mui-codemod/src/deprecations/table-sort-label-classes/table-sort-label-classes.test.js index 69dd52f93ce90f..b9372c303e6136 100644 --- a/packages/mui-codemod/src/deprecations/table-sort-label-classes/table-sort-label-classes.test.js +++ b/packages/mui-codemod/src/deprecations/table-sort-label-classes/table-sort-label-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/table-sort-label-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/table-sort-label-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..703a99f01fc923 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/table-sort-label-classes/test-cases/package.actual.js @@ -0,0 +1,6 @@ +import { tableSortLabelClasses } from '@org/ui/material/TableSortLabel'; + +('& .MuiTableSortLabel-iconDirectionDesc'); +('& .MuiTableSortLabel-iconDirectionAsc'); +`& .${tableSortLabelClasses.iconDirectionDesc}`; +`& .${tableSortLabelClasses.iconDirectionAsc}`; diff --git a/packages/mui-codemod/src/deprecations/table-sort-label-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/table-sort-label-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..f739bee7c939bb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/table-sort-label-classes/test-cases/package.expected.js @@ -0,0 +1,6 @@ +import { tableSortLabelClasses } from '@org/ui/material/TableSortLabel'; + +("&.MuiTableSortLabel-directionDesc > .MuiTableSortLabel-icon"); +("&.MuiTableSortLabel-directionAsc > .MuiTableSortLabel-icon"); +`&.${tableSortLabelClasses.directionDesc} > .${tableSortLabelClasses.icon}`; +`&.${tableSortLabelClasses.directionAsc} > .${tableSortLabelClasses.icon}`; diff --git a/packages/mui-codemod/src/deprecations/tabs-classes/tabs-classes.js b/packages/mui-codemod/src/deprecations/tabs-classes/tabs-classes.js index 23f9bb9da3d4ba..2a18c2bc34cd9d 100644 --- a/packages/mui-codemod/src/deprecations/tabs-classes/tabs-classes.js +++ b/packages/mui-codemod/src/deprecations/tabs-classes/tabs-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/Tabs$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/Tabs)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'tabsClasses') { diff --git a/packages/mui-codemod/src/deprecations/tabs-classes/tabs-classes.test.js b/packages/mui-codemod/src/deprecations/tabs-classes/tabs-classes.test.js index 1af1e28457995d..87e9e00e480c45 100644 --- a/packages/mui-codemod/src/deprecations/tabs-classes/tabs-classes.test.js +++ b/packages/mui-codemod/src/deprecations/tabs-classes/tabs-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/tabs-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/tabs-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..530247b52b4065 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/tabs-classes/test-cases/package.actual.js @@ -0,0 +1,6 @@ +import { tabsClasses } from '@org/ui/material/Tabs'; + +('&.MuiTabs-flexContainer'); +('&.MuiTabs-flexContainerVertical'); +`&.${tabsClasses.flexContainer}`; +`&.${tabsClasses.flexContainerVertical}`; diff --git a/packages/mui-codemod/src/deprecations/tabs-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/tabs-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..225084a2b94363 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/tabs-classes/test-cases/package.expected.js @@ -0,0 +1,6 @@ +import { tabsClasses } from '@org/ui/material/Tabs'; + +("&.MuiTabs-list"); +("&.MuiTabs-list.MuiTabs-vertical"); +`&.${tabsClasses.list}`; +`&.${tabsClasses.list}.${tabsClasses.vertical}`; diff --git a/packages/mui-codemod/src/deprecations/tabs-props/tabs-props.js b/packages/mui-codemod/src/deprecations/tabs-props/tabs-props.js index 88d0712bdf4742..665695f1fa47cc 100644 --- a/packages/mui-codemod/src/deprecations/tabs-props/tabs-props.js +++ b/packages/mui-codemod/src/deprecations/tabs-props/tabs-props.js @@ -12,12 +12,14 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Tabs', propName: 'ScrollButtonComponent', slotName: 'scrollButton', }); movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Tabs', propName: 'TabScrollButtonProps', slotName: 'scrollButton', @@ -25,6 +27,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Tabs', propName: 'TabIndicatorProps', slotName: 'indicator', diff --git a/packages/mui-codemod/src/deprecations/tabs-props/tabs-props.test.js b/packages/mui-codemod/src/deprecations/tabs-props/tabs-props.test.js index d3faec140294d2..24cfdfb7a64744 100644 --- a/packages/mui-codemod/src/deprecations/tabs-props/tabs-props.test.js +++ b/packages/mui-codemod/src/deprecations/tabs-props/tabs-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/tabs-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/tabs-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..2bbd84f143d299 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/tabs-props/test-cases/package.actual.js @@ -0,0 +1,20 @@ +import Tabs from '@org/ui/material/Tabs'; +import { Tabs as MyTabs } from '@org/ui/material'; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/tabs-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/tabs-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..b623e9cb808706 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/tabs-props/test-cases/package.expected.js @@ -0,0 +1,26 @@ +import Tabs from '@org/ui/material/Tabs'; +import { Tabs as MyTabs } from '@org/ui/material'; + +; + +; + +; diff --git a/packages/mui-codemod/src/deprecations/text-field-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..85af73e99456a9 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import TextField from '@org/ui/material/TextField'; +import { TextField as MyTextField } from '@org/ui/material'; + +; +; +; diff --git a/packages/mui-codemod/src/deprecations/text-field-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..0f3ab75b784261 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/text-field-props/test-cases/package.expected.js @@ -0,0 +1,26 @@ +import TextField from '@org/ui/material/TextField'; +import { TextField as MyTextField } from '@org/ui/material'; + +; +; +; diff --git a/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js b/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js index 3aba1be922a173..6db99168cb8646 100644 --- a/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js +++ b/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js @@ -11,6 +11,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'TextField', propName: 'InputProps', slotName: 'input', @@ -18,6 +19,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'TextField', propName: 'inputProps', slotName: 'htmlInput', @@ -25,6 +27,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'TextField', propName: 'SelectProps', slotName: 'select', @@ -32,6 +35,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'TextField', propName: 'InputLabelProps', slotName: 'inputLabel', @@ -39,6 +43,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'TextField', propName: 'FormHelperTextProps', slotName: 'formHelperText', diff --git a/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.test.js b/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.test.js index f03c0197d8f0bc..cd35f40ff7f129 100644 --- a/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.test.js +++ b/packages/mui-codemod/src/deprecations/text-field-props/text-field-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/package.actual.js new file mode 100644 index 00000000000000..152bb0ac94cd88 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/package.actual.js @@ -0,0 +1,6 @@ +import { toggleButtonGroupClasses } from '@org/ui/material/ToggleButtonGroup'; + +('& .MuiToggleButtonGroup-groupedHorizontal'); +('& .MuiToggleButtonGroup-groupedVertical'); +`& .${toggleButtonGroupClasses.groupedHorizontal}`; +`& .${toggleButtonGroupClasses.groupedVertical}`; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/package.expected.js new file mode 100644 index 00000000000000..75c32ab9045969 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/test-cases/package.expected.js @@ -0,0 +1,6 @@ +import { toggleButtonGroupClasses } from '@org/ui/material/ToggleButtonGroup'; + +("&.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped"); +("&.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped"); +`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`; +`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`; diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js index 60bec34f754946..814e0e0a36ac6a 100644 --- a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.js @@ -12,7 +12,11 @@ export default function transformer(file, api, options) { const replacementSelectorPrefix = '&'; root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value.match(/^@mui\/material\/ToggleButtonGroup$/)) + .filter((path) => + path.node.source.value.match( + new RegExp(`^${options.packageName || '@mui/material'}(/ToggleButtonGroup)?$`), + ), + ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { if ( diff --git a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.test.js b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.test.js index 9769a168e9f86c..ede0e2038fe6f0 100644 --- a/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.test.js +++ b/packages/mui-codemod/src/deprecations/toggle-button-group-classes/toggle-button-group-classes.test.js @@ -39,6 +39,33 @@ describe('@mui/codemod', () => { }); }); + describe('[package] js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { + printOptions: { quote: 'double', trailingComma: true }, + packageName: '@org/ui/material', + }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + describe('css-transform', () => { it('transforms classes as needed', async () => { const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..67da60cc4e179a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/package.actual.js @@ -0,0 +1,95 @@ +import Tooltip from '@org/ui/material/Tooltip'; +import { Tooltip as MyTooltip } from '@org/ui/material'; + +; +; +; +; +; + +; + +; + +; + + diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..edd3186036153e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/tooltip-props/test-cases/package.expected.js @@ -0,0 +1,105 @@ +import Tooltip from '@org/ui/material/Tooltip'; +import { Tooltip as MyTooltip } from '@org/ui/material'; + +; +; +; +; +; + +; + +; + +; + + diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.js b/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.js index fc9af0dcd84939..f822a74f26fae4 100644 --- a/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.js +++ b/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.js @@ -11,10 +11,15 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - replaceComponentsWithSlots(j, { root, componentName: 'Tooltip' }); + replaceComponentsWithSlots(j, { + root, + packageName: options.packageName, + componentName: 'Tooltip', + }); movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Tooltip', propName: 'PopperComponent', slotName: 'popper', @@ -22,6 +27,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Tooltip', propName: 'PopperProps', slotName: 'popper', @@ -29,6 +35,7 @@ export default function transformer(file, api, options) { movePropIntoSlots(j, { root, + packageName: options.packageName, componentName: 'Tooltip', propName: 'TransitionComponent', slotName: 'transition', @@ -36,6 +43,7 @@ export default function transformer(file, api, options) { movePropIntoSlotProps(j, { root, + packageName: options.packageName, componentName: 'Tooltip', propName: 'TransitionProps', slotName: 'transition', diff --git a/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.test.js b/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.test.js index a3880ee54d158e..a10f492bbaea14 100644 --- a/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.test.js +++ b/packages/mui-codemod/src/deprecations/tooltip-props/tooltip-props.test.js @@ -10,6 +10,11 @@ describe('@mui/codemod', () => { testCases: [ { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' }, { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/package.actual.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..230b168279fcbf --- /dev/null +++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/package.actual.js @@ -0,0 +1,23 @@ +import Typography from '@org/ui/material/Typography'; +import { Typography as MyTypography } from '@org/ui/material'; + +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/typography-props/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/typography-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..89d07cf400ddcc --- /dev/null +++ b/packages/mui-codemod/src/deprecations/typography-props/test-cases/package.expected.js @@ -0,0 +1,47 @@ +import Typography from '@org/ui/material/Typography'; +import { Typography as MyTypography } from '@org/ui/material'; + +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; +; diff --git a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js index 170f0a8d8a22ce..4d4f0cd29b67fb 100644 --- a/packages/mui-codemod/src/deprecations/typography-props/typography-props.js +++ b/packages/mui-codemod/src/deprecations/typography-props/typography-props.js @@ -11,68 +11,71 @@ export default function transformer(file, api, options) { const root = j(file.source); const printOptions = options.printOptions; - findComponentJSX(j, { root, componentName: 'Typography' }, (elementPath) => { - const paragraphProp = elementPath.node.openingElement.attributes.find( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'paragraph', - ); + findComponentJSX( + j, + { root, packageName: options.packageName, componentName: 'Typography' }, + (elementPath) => { + const paragraphProp = elementPath.node.openingElement.attributes.find( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'paragraph', + ); - if (!paragraphProp) { - return; - } + if (!paragraphProp) { + return; + } - elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter( - (attr) => { - if (attr.type === 'JSXAttribute' && attr.name.name === 'paragraph') { - return false; - } - return true; - }, - ); + elementPath.node.openingElement.attributes = + elementPath.node.openingElement.attributes.filter((attr) => { + if (attr.type === 'JSXAttribute' && attr.name.name === 'paragraph') { + return false; + } + return true; + }); - const isParagraphPropPresent = paragraphProp.value?.expression.value !== false; + const isParagraphPropPresent = paragraphProp.value?.expression.value !== false; - if (!isParagraphPropPresent) { - return; - } + if (!isParagraphPropPresent) { + return; + } - const isParagraphPropTrue = - paragraphProp.value == null || paragraphProp.value.expression.value === true; - const paragraphExpression = (expression) => - isParagraphPropTrue - ? expression - : j.conditionalExpression( - paragraphProp.value.expression, - expression, - j.identifier('undefined'), - ); - - const sxIndex = elementPath.node.openingElement.attributes.findIndex( - (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx', - ); - if (sxIndex === -1) { - appendAttribute(j, { - target: elementPath.node, - attributeName: 'sx', - expression: paragraphExpression( - j.objectExpression([j.objectProperty(j.identifier('marginBottom'), j.literal('16px'))]), - ), - }); - } else { - const hasMarginBottom = elementPath.node.openingElement.attributes[ - sxIndex - ].value.expression.properties.some( - (key) => key.key.name === 'marginBottom' || key.key.name === 'mb', + const isParagraphPropTrue = + paragraphProp.value == null || paragraphProp.value.expression.value === true; + const paragraphExpression = (expression) => + isParagraphPropTrue + ? expression + : j.conditionalExpression( + paragraphProp.value.expression, + expression, + j.identifier('undefined'), + ); + + const sxIndex = elementPath.node.openingElement.attributes.findIndex( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'sx', ); - - if (!hasMarginBottom) { - assignObject(j, { - target: elementPath.node.openingElement.attributes[sxIndex], - key: 'marginBottom', - expression: paragraphExpression(j.literal('16px')), + if (sxIndex === -1) { + appendAttribute(j, { + target: elementPath.node, + attributeName: 'sx', + expression: paragraphExpression( + j.objectExpression([j.objectProperty(j.identifier('marginBottom'), j.literal('16px'))]), + ), }); + } else { + const hasMarginBottom = elementPath.node.openingElement.attributes[ + sxIndex + ].value.expression.properties.some( + (key) => key.key.name === 'marginBottom' || key.key.name === 'mb', + ); + + if (!hasMarginBottom) { + assignObject(j, { + target: elementPath.node.openingElement.attributes[sxIndex], + key: 'marginBottom', + expression: paragraphExpression(j.literal('16px')), + }); + } } - } - }); + }, + ); root.find(j.ObjectProperty, { key: { name: 'MuiTypography' } }).forEach((path) => { const defaultPropsObject = path.value.value.properties.find( diff --git a/packages/mui-codemod/src/deprecations/typography-props/typography-props.test.js b/packages/mui-codemod/src/deprecations/typography-props/typography-props.test.js index f7ea7f7824504d..fa6b9fc3cf17d7 100644 --- a/packages/mui-codemod/src/deprecations/typography-props/typography-props.test.js +++ b/packages/mui-codemod/src/deprecations/typography-props/typography-props.test.js @@ -61,5 +61,29 @@ describe('@mui/codemod', () => { expect(actual).to.not.equal(expected); }); }); + + describe('[package] typography-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); }); }); diff --git a/packages/mui-codemod/src/deprecations/utils/movePropIntoSlotProps.js b/packages/mui-codemod/src/deprecations/utils/movePropIntoSlotProps.js index 75ef17af96a032..efaceb866fa233 100644 --- a/packages/mui-codemod/src/deprecations/utils/movePropIntoSlotProps.js +++ b/packages/mui-codemod/src/deprecations/utils/movePropIntoSlotProps.js @@ -149,13 +149,13 @@ function moveDefaultPropsPropIntoslotProps( * @example => */ export default function movePropIntoSlotProps(j, options) { - const { root, componentName, propName, slotName, slotPropName } = options; + const { propName, slotName, slotPropName } = options; - findComponentJSX(j, { root, componentName }, (elementPath) => { + findComponentJSX(j, options, (elementPath) => { moveJsxPropIntoSlotProps(j, elementPath.node, propName, slotName, slotPropName); }); - const defaultPropsPathCollection = findComponentDefaultProps(j, { root, componentName }); + const defaultPropsPathCollection = findComponentDefaultProps(j, options); moveDefaultPropsPropIntoslotProps( j, diff --git a/packages/mui-codemod/src/deprecations/utils/movePropIntoSlots.js b/packages/mui-codemod/src/deprecations/utils/movePropIntoSlots.js index fc3be19f791dd0..e8126649b922b3 100644 --- a/packages/mui-codemod/src/deprecations/utils/movePropIntoSlots.js +++ b/packages/mui-codemod/src/deprecations/utils/movePropIntoSlots.js @@ -80,13 +80,13 @@ function moveDefaultPropsPropIntoSlots(j, defaultPropsPathCollection, propName, * @example => */ export default function movePropIntoSlots(j, options) { - const { root, componentName, propName, slotName } = options; + const { propName, slotName } = options; - findComponentJSX(j, { root, componentName }, (elementPath) => { + findComponentJSX(j, options, (elementPath) => { moveJsxPropIntoSlots(j, elementPath.node, propName, slotName); }); - const defaultPropsPathCollection = findComponentDefaultProps(j, { root, componentName }); + const defaultPropsPathCollection = findComponentDefaultProps(j, options); moveDefaultPropsPropIntoSlots(j, defaultPropsPathCollection, propName, slotName); } diff --git a/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js b/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js index eaac90c45e6b4c..c20ff282674064 100644 --- a/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js +++ b/packages/mui-codemod/src/deprecations/utils/replaceComponentsWithSlots.js @@ -179,19 +179,17 @@ function replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection) { * If there are duplicated values, the slots values will be used. * * @param {import('jscodeshift')} j - * @param {{ element: import('jscodeshift').JSXElement }} options + * @param {{ element: import('jscodeshift').JSXElement, packageName?: string }} options * * @example => */ export default function replaceComponentsWithSlots(j, options) { - const { root, componentName } = options; - - findComponentJSX(j, { root, componentName }, (elementPath) => { + findComponentJSX(j, options, (elementPath) => { replaceJsxComponentsProp(j, elementPath); replaceJsxComponentsPropsProp(j, elementPath.node); }); - const defaultPropsPathCollection = findComponentDefaultProps(j, { root, componentName }); + const defaultPropsPathCollection = findComponentDefaultProps(j, options); replaceDefaultPropsComponentsProp(j, defaultPropsPathCollection); replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection); diff --git a/packages/mui-codemod/src/util/findComponentJSX.js b/packages/mui-codemod/src/util/findComponentJSX.js index 57719b9ea28492..3e64d3e1e95dfc 100644 --- a/packages/mui-codemod/src/util/findComponentJSX.js +++ b/packages/mui-codemod/src/util/findComponentJSX.js @@ -2,12 +2,12 @@ * Find all the JSXElements of a given component name. * * @param {import('jscodeshift')} j - * @param {{ root: import('jscodeshift').Collection; componentName: string }} options + * @param {{ root: import('jscodeshift').Collection; componentName: string; packageName?: string }} options * @param {(path: import('jscodeshift').ASTPath) => void} callback * */ export default function findComponentJSX(j, options, callback) { - const { root, componentName } = options; + const { root, componentName, packageName = '@mui/material' } = options; // case 1: import ComponentName from '@mui/material/ComponentName'; // case 2: import { ComponentName } from '@mui/material'; @@ -18,7 +18,7 @@ export default function findComponentJSX(j, options, callback) { root .find(j.ImportDeclaration) .filter((path) => - path.node.source.value.match(new RegExp(`^@mui/material(/${componentName})?$`)), + path.node.source.value.match(new RegExp(`^${packageName}(/${componentName})?$`)), ) .forEach((path) => { path.node.specifiers.forEach((specifier) => { diff --git a/packages/mui-codemod/src/util/findComponentJSX.test.js b/packages/mui-codemod/src/util/findComponentJSX.test.js new file mode 100644 index 00000000000000..415b9d2825f64e --- /dev/null +++ b/packages/mui-codemod/src/util/findComponentJSX.test.js @@ -0,0 +1,49 @@ +import { expect } from 'chai'; +import findComponentJSX from './findComponentJSX'; +import { jscodeshift } from '../../testUtils'; + +describe('@mui/codemod', () => { + describe('utils', () => { + describe('findComponentJSX', () => { + it('should find all the JSXElements of a given component name', () => { + const j = jscodeshift; + const root = j(` + import { Accordion } from '@mui/material'; // ✅ + import Accordion2 from '@mui/material/Accordion'; // ✅ + import Accordion3 from '@mui/material/Accordion3'; // ❌ + ; + ; + ; + `); + + const componentName = 'Accordion'; + const foundElements = []; + findComponentJSX(j, { root, componentName }, (path) => { + foundElements.push(path); + }); + + expect(foundElements.length).to.equal(2); + }); + + it('should find with custom package name', () => { + const j = jscodeshift; + const root = j(` + import { Accordion } from '@org/ui/material'; // ✅ + import Accordion2 from '@org/ui/material/Accordion'; // ✅ + import Accordion3 from '@org/ui/material/Accordion3'; // ❌ + ; + ; + ; + `); + + const componentName = 'Accordion'; + const foundElements = []; + findComponentJSX(j, { root, componentName, packageName: '@org/ui/material' }, (path) => { + foundElements.push(path); + }); + + expect(foundElements.length).to.equal(2); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/v6.0.0/grid-v2-props/grid-v2-props.js b/packages/mui-codemod/src/v6.0.0/grid-v2-props/grid-v2-props.js index 286415612233c8..e963967ae68b65 100644 --- a/packages/mui-codemod/src/v6.0.0/grid-v2-props/grid-v2-props.js +++ b/packages/mui-codemod/src/v6.0.0/grid-v2-props/grid-v2-props.js @@ -19,6 +19,12 @@ export default function gridV2Props(file, api, options) { const root = j(file.source); const breakpoints = options.muiBreakpoints?.split(',') || defaultBreakpoints; const printOptions = options.printOptions; + const packageName = options.packageName; + + if (packageName) { + possibleDefaultImports.push(`${packageName}/Grid2`); + possibleNamedImports[packageName] = 'Grid2'; + } const gridLocalNames = []; diff --git a/packages/mui-codemod/src/v6.0.0/grid-v2-props/grid-v2-props.test.js b/packages/mui-codemod/src/v6.0.0/grid-v2-props/grid-v2-props.test.js index f3ceb48bd38e3e..011d86b8938661 100644 --- a/packages/mui-codemod/src/v6.0.0/grid-v2-props/grid-v2-props.test.js +++ b/packages/mui-codemod/src/v6.0.0/grid-v2-props/grid-v2-props.test.js @@ -17,6 +17,11 @@ describe('@mui/codemod', () => { expected: '/test-cases/custom-breakpoints.expected.js', options: { muiBreakpoints: 'customXs,customSm,customMd' }, }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/package.actual.js b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..8a6109a8fd1752 --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/package.actual.js @@ -0,0 +1,40 @@ +import GridA from '@org/ui/material/Grid2'; +import GridV1A from '@org/ui/material/Grid'; +import { Grid2 as GridD, Grid as GridV1B } from '@org/ui/material'; + +// Transforms on all the possible imports +; +; + +; +; +; + +; +; +; + +// Transforms responsive sizes +; + +// Transforms all the possible size values +; + +// Doesn't add jsx object expression for single string values +; + +// Transforms offset +; + +// Transforms responsive offset +; + +// Transforms all the possible offset values +; + +// Transforms spread props +; + +// Doesn't transform Grid v1 +; +; diff --git a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/package.expected.js b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..514f9edc6e81a5 --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/package.expected.js @@ -0,0 +1,73 @@ +import GridA from '@org/ui/material/Grid2'; +import GridV1A from '@org/ui/material/Grid'; +import { Grid2 as GridD, Grid as GridV1B } from '@org/ui/material'; + +// Transforms on all the possible imports +; +; + +; +; +; + +; +; +; + +// Transforms responsive sizes +; + +// Transforms all the possible size values +; + +// Doesn't add jsx object expression for single string values +; + +// Transforms offset +; + +// Transforms responsive offset +; + +// Transforms all the possible offset values +; + +// Transforms spread props +; + +// Doesn't transform Grid v1 +; +; diff --git a/packages/mui-codemod/src/v6.0.0/list-item-button-prop/list-item-button-prop.js b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/list-item-button-prop.js index 9c24da2eab10ff..1b90e030b18388 100644 --- a/packages/mui-codemod/src/v6.0.0/list-item-button-prop/list-item-button-prop.js +++ b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/list-item-button-prop.js @@ -9,6 +9,7 @@ export default function transformer(file, api, options) { const j = api.jscodeshift; const root = j(file.source); const printOptions = options.printOptions; + const { packageName = '@mui/material' } = options; const defaultPropsPathCollection = findComponentDefaultProps(j, { root, @@ -56,7 +57,7 @@ export default function transformer(file, api, options) { const openTaggedHavingButtonProp = new Set(); let addedListItemButton = false; // Rename components that have ListItem button to ListItemButton - findComponentJSX(j, { root, componentName: 'ListItem' }, (elementPath) => { + findComponentJSX(j, { root, packageName, componentName: 'ListItem' }, (elementPath) => { const index = elementPath.node.openingElement.attributes.findIndex( (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'button', ); @@ -77,7 +78,7 @@ export default function transformer(file, api, options) { root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value === '@mui/material/ListItem') + .filter((path) => path.node.source.value.match(new RegExp(`^${packageName}(/ListItem)?$`))) .filter((path) => { path.node.specifiers.forEach((specifier) => { if (specifier.type === 'ImportDefaultSpecifier') { @@ -95,7 +96,7 @@ export default function transformer(file, api, options) { root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value === '@mui/material') + .filter((path) => path.node.source.value.match(new RegExp(`^${packageName}$`))) .filter((path) => { path.node.specifiers.forEach((specifier) => { if ( @@ -116,7 +117,7 @@ export default function transformer(file, api, options) { // If ListItemButton import does not already exist, add it at the end const imports = root .find(j.ImportDeclaration) - .filter((path) => path.node.source.value === '@mui/material/ListItemButton'); + .filter((path) => path.node.source.value.match(new RegExp(`^${packageName}/ListItemButton$`))); if (addedListItemButton && imports.length === 0) { const lastImport = root.find(j.ImportDeclaration).at(-1); @@ -125,7 +126,7 @@ export default function transformer(file, api, options) { lastImport.insertAfter( j.importDeclaration( [j.importDefaultSpecifier(j.identifier('ListItemButton'))], - j.stringLiteral('@mui/material/ListItemButton'), + j.stringLiteral(`${packageName}/ListItemButton`), ), ); } diff --git a/packages/mui-codemod/src/v6.0.0/list-item-button-prop/list-item-button-prop.test.js b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/list-item-button-prop.test.js index 4e6ccd771a9b8f..7274e67aab97d7 100644 --- a/packages/mui-codemod/src/v6.0.0/list-item-button-prop/list-item-button-prop.test.js +++ b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/list-item-button-prop.test.js @@ -62,6 +62,30 @@ describe('@mui/codemod', () => { }); }); + describe('[package] button-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/package.actual.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/package.expected.js') }, + { jscodeshift }, + { packageName: '@org/ui/material' }, + ); + + const expected = read('./test-cases/package.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + it('should skip files that do not import ListItem from @mui/material', () => { const actual = transform( { source: read('./test-cases/not-related.actual.js') }, diff --git a/packages/mui-codemod/src/v6.0.0/list-item-button-prop/test-cases/package.actual.js b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/test-cases/package.actual.js new file mode 100644 index 00000000000000..d2f1bc3a8324d3 --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/test-cases/package.actual.js @@ -0,0 +1,24 @@ +import ListItem from "@org/ui/material/ListItem"; +import MuiListItem from "@org/ui/material/ListItem"; +import { ListItem as MyListItem } from "@org/ui/material"; +import { ListItem as MyListItem1 } from "@org/ui/material"; +import { ListItem as MyListItem2, Button } from "@org/ui/material"; +import { ListItem as MyListItem3, List } from "@org/ui/material"; +import AnotherComponent from "ui"; + +; +; + +; +; + +; + +; + +; + +; +; + +; \ No newline at end of file diff --git a/packages/mui-codemod/src/v6.0.0/list-item-button-prop/test-cases/package.expected.js b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/test-cases/package.expected.js new file mode 100644 index 00000000000000..98ecab9087d817 --- /dev/null +++ b/packages/mui-codemod/src/v6.0.0/list-item-button-prop/test-cases/package.expected.js @@ -0,0 +1,24 @@ +import ListItem from "@org/ui/material/ListItem"; +import { ListItem as MyListItem } from "@org/ui/material"; +import { Button } from "@org/ui/material"; +import { ListItem as MyListItem3, List } from "@org/ui/material"; +import AnotherComponent from "ui"; + +import ListItemButton from "@org/ui/material/ListItemButton"; + +; +; + +; +; + +; + +; + +; + +; +; + +; \ No newline at end of file diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.js b/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.js index 80489159772310..56fa564d7fa9f6 100644 --- a/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.js +++ b/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.js @@ -19,6 +19,12 @@ export default function gridV2Props(file, api, options) { const root = j(file.source); const breakpoints = options.muiBreakpoints?.split(',') || defaultBreakpoints; const printOptions = options.printOptions; + const packageName = options.packageName; + + if (packageName) { + possibleDefaultImports.push(`${packageName}/Grid`); + possibleNamedImports[packageName] = 'Grid'; + } const gridLocalNames = []; diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.test.js b/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.test.js index 6e4592ca8a25e5..a23567f3c38af2 100644 --- a/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.test.js +++ b/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.test.js @@ -17,6 +17,11 @@ describe('@mui/codemod', () => { expected: '/test-cases/custom-breakpoints.expected.js', options: { muiBreakpoints: 'customXs,customSm,customMd' }, }, + { + actual: '/test-cases/package.actual.js', + expected: '/test-cases/package.expected.js', + options: { packageName: '@org/ui/material' }, + }, ], }); }); diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/package.actual.js b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/package.actual.js new file mode 100644 index 00000000000000..195b0f5e0e6e60 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/package.actual.js @@ -0,0 +1,40 @@ +import GridA from '@org/ui/material/Grid'; +import GridLegacyA from '@org/ui/material/GridLegacy'; +import { Grid as GridD, GridLegacy as GridLegacyB } from '@org/ui/material'; + +// Transforms on all the possible imports +; +; + +; +; +; + +; +; +; + +// Transforms responsive sizes +; + +// Transforms all the possible size values +; + +// Doesn't add jsx object expression for single string values +; + +// Transforms offset +; + +// Transforms responsive offset +; + +// Transforms all the possible offset values +; + +// Transforms spread props +; + +// Doesn't transform Grid v1 +; +; diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/package.expected.js b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/package.expected.js new file mode 100644 index 00000000000000..b7dcd6b87349ed --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/package.expected.js @@ -0,0 +1,73 @@ +import GridA from '@org/ui/material/Grid'; +import GridLegacyA from '@org/ui/material/GridLegacy'; +import { Grid as GridD, GridLegacy as GridLegacyB } from '@org/ui/material'; + +// Transforms on all the possible imports +; +; + +; +; +; + +; +; +; + +// Transforms responsive sizes +; + +// Transforms all the possible size values +; + +// Doesn't add jsx object expression for single string values +; + +// Transforms offset +; + +// Transforms responsive offset +; + +// Transforms all the possible offset values +; + +// Transforms spread props +; + +// Doesn't transform Grid v1 +; +;