@mui/codemod 7.0.2 → 7.1.1

package/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:

package/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,

package/deprecations/accordion-props/accordion-props.js

@@ -17,12 +17,14 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Accordion',
     propName: 'TransitionComponent',
     slotName: 'transition'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Accordion',
     propName: 'TransitionProps',
     slotName: 'transition'

package/deprecations/accordion-props/test-cases/package.actual.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Accordion = _interopRequireDefault(require("@org/ui/material/Accordion"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  TransitionProps: {
+    unmountOnExit: true
+  },
+  slots: {
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
+  TransitionProps: transitionVars,
+  slots: {
+    transition: CustomTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  TransitionProps: {
+    unmountOnExit: true
+  },
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    root: {
+      className: 'foo'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
+  TransitionProps: {
+    unmountOnExit: true
+  },
+  slots: {
+    ...outerSlots,
+    transition: CustomTransition
+  },
+  slotProps: {
+    ...outerSlotProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    transition: SlotTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  TransitionProps: {
+    unmountOnExit: true
+  },
+  slotProps: {
+    transition: {
+      id: 'test'
+    }
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAccordion, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  }
+});

package/deprecations/accordion-props/test-cases/package.expected.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Accordion = _interopRequireDefault(require("@org/ui/material/Accordion"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: transitionVars
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    root: {
+      className: 'foo'
+    },
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Accordion, {
+  slots: {
+    ...outerSlots,
+    transition: CustomTransition
+  },
+  slotProps: {
+    ...outerSlotProps,
+    transition: {
+      unmountOnExit: true
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    transition: SlotTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slotProps: {
+    transition: {
+      ...{
+        unmountOnExit: true
+      },
+      ...{
+        id: 'test'
+      }
+    }
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAccordion, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: {
+    unmountOnExit: true
+  }
+});

package/deprecations/accordion-summary-classes/accordion-summary-classes.js

@@ -17,7 +17,7 @@ function transformer(file, api, options) {
   // contentGutters is a special case as it's applied to the content child
   // but gutters is applied to the parent element, so the gutter class needs to go on the parent
 
-  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/AccordionSummary$/)).forEach(path => {
+  root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(new RegExp(`^${options.packageName || '@mui/material'}(/AccordionSummary)?$`))).forEach(path => {
     path.node.specifiers.forEach(specifier => {
       if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'accordionSummaryClasses') {
         root.find(j.MemberExpression, {

package/deprecations/accordion-summary-classes/test-cases/package.actual.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _AccordionSummary = require("@org/ui/material/AccordionSummary");
+var _jsxRuntime = require("react/jsx-runtime");
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        '& .MuiAccordionSummary-contentGutters': {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`& .${_AccordionSummary.accordionSummaryClasses.contentGutters}`]: {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+styled(Component)(() => {
+  return {
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red'
+    }
+  };
+});
+styled(Component)(() => {
+  return {
+    [`& .${_AccordionSummary.accordionSummaryClasses.contentGutters}`]: {
+      color: 'red'
+    }
+  };
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummary, {
+  sx: {
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummary, {
+  sx: {
+    [`& .${_AccordionSummary.accordionSummaryClasses.contentGutters}`]: {
+      color: 'red'
+    }
+  }
+});

package/deprecations/accordion-summary-classes/test-cases/package.expected.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _AccordionSummary = require("@org/ui/material/AccordionSummary");
+var _jsxRuntime = require("react/jsx-runtime");
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`&.${_AccordionSummary.accordionSummaryClasses.gutters} .${_AccordionSummary.accordionSummaryClasses.content}`]: {
+          color: 'red'
+        }
+      }
+    }
+  }
+});
+styled(Component)(() => {
+  return {
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red'
+    }
+  };
+});
+styled(Component)(() => {
+  return {
+    [`&.${_AccordionSummary.accordionSummaryClasses.gutters} .${_AccordionSummary.accordionSummaryClasses.content}`]: {
+      color: 'red'
+    }
+  };
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummary, {
+  sx: {
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red'
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionSummary, {
+  sx: {
+    [`&.${_AccordionSummary.accordionSummaryClasses.gutters} .${_AccordionSummary.accordionSummaryClasses.content}`]: {
+      color: 'red'
+    }
+  }
+});

package/deprecations/alert-classes/alert-classes.js

@@ -17,7 +17,7 @@ function transformer(file, api, options) {
     deprecatedClass,
     replacementSelector
   }) => {
-    root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/Alert$/)).forEach(path => {
+    root.find(j.ImportDeclaration).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') {
           const deprecatedAtomicClass = deprecatedClass.replace('.MuiAlert-', '');

package/deprecations/alert-classes/test-cases/package.actual.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Alert = require("@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';
+`&.${_Alert.alertClasses.standardSuccess}`;
+`&.${_Alert.alertClasses.standardInfo}`;
+`&.${_Alert.alertClasses.standardWarning}`;
+`&.${_Alert.alertClasses.standardError}`;
+`&.${_Alert.alertClasses.outlinedSuccess}`;
+`&.${_Alert.alertClasses.outlinedInfo}`;
+`&.${_Alert.alertClasses.outlinedWarning}`;
+`&.${_Alert.alertClasses.outlinedError}`;
+`&.${_Alert.alertClasses.filledSuccess}`;
+`&.${_Alert.alertClasses.filledInfo}`;
+`&.${_Alert.alertClasses.filledWarning}`;
+`&.${_Alert.alertClasses.filledError}`;

package/deprecations/alert-classes/test-cases/package.expected.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Alert = require("@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';
+`&.${_Alert.alertClasses.standard}.${_Alert.alertClasses.colorSuccess}`;
+`&.${_Alert.alertClasses.standard}.${_Alert.alertClasses.colorInfo}`;
+`&.${_Alert.alertClasses.standard}.${_Alert.alertClasses.colorWarning}`;
+`&.${_Alert.alertClasses.standard}.${_Alert.alertClasses.colorError}`;
+`&.${_Alert.alertClasses.outlined}.${_Alert.alertClasses.colorSuccess}`;
+`&.${_Alert.alertClasses.outlined}.${_Alert.alertClasses.colorInfo}`;
+`&.${_Alert.alertClasses.outlined}.${_Alert.alertClasses.colorWarning}`;
+`&.${_Alert.alertClasses.outlined}.${_Alert.alertClasses.colorError}`;
+`&.${_Alert.alertClasses.filled}.${_Alert.alertClasses.colorSuccess}`;
+`&.${_Alert.alertClasses.filled}.${_Alert.alertClasses.colorInfo}`;
+`&.${_Alert.alertClasses.filled}.${_Alert.alertClasses.colorWarning}`;
+`&.${_Alert.alertClasses.filled}.${_Alert.alertClasses.colorError}`;

package/deprecations/alert-props/alert-props.js

@@ -16,6 +16,7 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _replaceComponentsWithSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Alert'
   });
   return root.toSource(printOptions);

package/deprecations/alert-props/test-cases/package.actual.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Alert = _interopRequireDefault(require("@org/ui/material/Alert"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  components: {
+    CloseButton: ComponentsButton
+  },
+  componentsProps: {
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon
+  },
+  components: {
+    CloseButton: ComponentsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps
+  },
+  componentsProps: {
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: SlotsButton
+  },
+  components: {
+    CloseButton: ComponentsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps,
+    closeButton: slotsButtonProps
+  },
+  componentsProps: {
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: SlotsButton
+  },
+  components: {
+    CloseButton: ComponentsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps,
+    closeButton: slotsButtonProps
+  },
+  componentsProps: {
+    closeButton: componentsButtonProps,
+    closeIcon: componentsIconProps
+  }
+});

package/deprecations/alert-props/test-cases/package.expected.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Alert = _interopRequireDefault(require("@org/ui/material/Alert"));
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeButton: ComponentsButton
+  },
+  slotProps: {
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: ComponentsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps,
+    closeButton: componentsButtonProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: SlotsButton
+  },
+  slotProps: {
+    closeIcon: slotsIconProps,
+    closeButton: {
+      ...componentsButtonProps,
+      ...slotsButtonProps
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+  slots: {
+    closeIcon: SlotsIcon,
+    closeButton: SlotsButton
+  },
+  slotProps: {
+    closeButton: {
+      ...componentsButtonProps,
+      ...slotsButtonProps
+    },
+    closeIcon: {
+      ...componentsIconProps,
+      ...slotsIconProps
+    }
+  }
+});

package/deprecations/autocomplete-props/autocomplete-props.js

@@ -22,36 +22,42 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Autocomplete',
     propName: 'PaperComponent',
     slotName: 'paper'
   });
   (0, _movePropIntoSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Autocomplete',
     propName: 'PopperComponent',
     slotName: 'popper'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Autocomplete',
     propName: 'ListboxProps',
     slotName: 'listbox'
   });
   (0, _movePropIntoSlotProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Autocomplete',
     propName: 'ChipProps',
     slotName: 'chip'
   });
   (0, _replaceComponentsWithSlots.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Autocomplete'
   });
 
   // Move ListboxComponent JSX prop into slotProps.listbox.component
   (0, _findComponentJSX.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Autocomplete'
   }, elementPath => {
     const element = elementPath.node;
@@ -93,6 +99,7 @@ function transformer(file, api, options) {
   // Move ListboxComponent default prop into slotProps.listbox.component
   const defaultPropsPathCollection = (0, _findComponentDefaultProps.default)(j, {
     root,
+    packageName: options.packageName,
     componentName: 'Autocomplete'
   });
   defaultPropsPathCollection.find(j.ObjectProperty, {

package/deprecations/autocomplete-props/test-cases/package.actual.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Autocomplete = _interopRequireDefault(require("@org/ui/material/Autocomplete"));
+var _material = require("@org/ui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  },
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  },
+  slotProps: {
+    popupIndicator: {
+      width: 20
+    }
+  },
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  },
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
+  componentsProps: {
+    clearIndicator: {
+      width: 10
+    },
+    paper: {
+      width: 12
+    },
+    popper: {
+      width: 14
+    },
+    popupIndicator: {
+      width: 16
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomAutocomplete, {
+  ChipProps: {
+    height: 10
+  },
+  PaperComponent: CustomPaper,
+  PopperComponent: CustomPopper,
+  ListboxComponent: CustomListbox,
+  ListboxProps: {
+    height: 12
+  }
+});