[codemod] Add package name option (#45977)

Author: siriwatknp

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:

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,

packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js

@@ -12,13 +12,15 @@ export default function transformer(file, api, options) {
 
   movePropIntoSlots(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Accordion',
     propName: 'TransitionComponent',
     slotName: 'transition',
   });
 
   movePropIntoSlotProps(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Accordion',
     propName: 'TransitionProps',
     slotName: 'transition',

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');
+      });
+    });
   });
 });

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';
+
+<Accordion TransitionProps={{ unmountOnExit: true }} slots={{
+  transition: CustomTransition
+}} />;
+<MyAccordion TransitionProps={transitionVars} slots={{
+  transition: CustomTransition
+}} />;
+<Accordion
+  TransitionProps={{ unmountOnExit: true }}
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+  }} />;
+<MyAccordion
+  TransitionProps={{ unmountOnExit: true }}
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    ...outerSlotProps,
+  }} />;
+<Accordion slots={{ transition: SlotTransition }} />;
+<Accordion TransitionProps={{ unmountOnExit: true }} slotProps={{ transition: { id: 'test' } }} />;
+// should skip non MUI components
+<NonMuiAccordion
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

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';
+
+<Accordion slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: { unmountOnExit: true }
+}} />;
+<MyAccordion slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: transitionVars
+}} />;
+<Accordion
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+    transition: { unmountOnExit: true }
+  }} />;
+<MyAccordion
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    ...outerSlotProps,
+    transition: { unmountOnExit: true }
+  }} />;
+<Accordion slots={{ transition: SlotTransition }} />;
+<Accordion
+  slotProps={{ transition: {
+    ...{ unmountOnExit: true },
+    ...{ id: 'test' }
+  } }} />;
+// should skip non MUI components
+<NonMuiAccordion
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

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 (

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'), {

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',
+    },
+  };
+});
+
+<AccordionSummary
+  sx={{
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red',
+    },
+  }}
+/>;
+
+<AccordionSummary
+  sx={{
+    [`& .${accordionSummaryClasses.contentGutters}`]: {
+      color: 'red',
+    },
+  }}
+/>;

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',
+    },
+  };
+});
+
+<AccordionSummary
+  sx={{
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red',
+    },
+  }}
+/>;
+
+<AccordionSummary
+  sx={{
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  }}
+/>;

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') {

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'), {

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}`;