@mui/codemod 6.0.0-alpha.0 → 6.0.0-alpha.3

package/README.md

@@ -62,6 +62,7 @@ npx @mui/codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quote
 ## Included scripts
 
 - [Deprecation](#deprecations)
+- [v6](#v600)
 - [v5](#v500)
 - [v4](#v400)
 - [v1](#v100)
@@ -287,6 +288,32 @@ npx @mui/codemod@next deprecations/alert-props <path>
 npx @mui/codemod@next deprecations/backdrop-props <path>
 ```
 
+#### `badge-props`
+
+```diff
+ <Badge
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiBadge: {
+   defaultProps: {
+-    components: { Root: CustomRoot }
++    slots: { root: CustomRoot },
+-    componentsProps: { root: { testid: 'test-id' }}
++    slotProps: { root: { testid: 'test-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/badge-props <path>
+```
+
 #### `button-classes`
 
 JS transforms:
@@ -921,20 +948,65 @@ npx @mui/codemod@next deprecations/pagination-item-classes <path>
 npx @mui/codemod@next deprecations/slider-props <path>
 ```
 
+#### `toggle-button-group-classes`
+
+JS transforms:
+
+```diff
+ import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
+
+ MuiToggleButtonGroup: {
+   styleOverrides: {
+     root: {
+-      [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: {
++      [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: {
+         color: 'red',
+        },
+-      [`& .${toggleButtonGroupClasses.groupedVertical}`]: {
++      [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: {
+         color: 'red',
+        },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal
++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped
+-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical
++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>
+```
+
 #### `step-label-props`
 
 ```diff
  <StepLabel
 -  componentsProps={{ label: labelProps }}
 +  slotProps={{ label: labelProps }}
+-  StepIconComponent={StepIconComponent}
++  slots={{ stepIcon: StepIconComponent }}
+-  StepIconProps={StepIconProps}
++  slotProps={{ stepIcon: StepIconProps }}
  />
 ```
 
 ```diff
  MuiStepLabel: {
    defaultProps: {
--  componentsProps={{ label: labelProps }}
-+  slotProps={{ label: labelProps }}
+-  componentsProps:{ label: labelProps }
++  slotProps:{ label: labelProps }
+-  StepIconComponent:StepIconComponent
++  slots:{ stepIcon: StepIconComponent }
+-  StepIconProps:StepIconProps
++  slotProps:{ stepIcon: StepIconProps }
   },
  },
 ```
@@ -944,6 +1016,114 @@ npx @mui/codemod@latest deprecations/step-label-props <path>
 
 ```
 
+#### `step-connector-classes`
+
+JS transforms:
+
+```diff
+ import { stepConnectorClasses } from '@mui/material/StepConnector';
+
+ MuiStepConnector: {
+   styleOverrides: {
+     root: {
+-      [`& .${stepConnectorClasses.lineHorizontal}`]: {
++      [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
+         color: 'red',
+        },
+-      [`& .${stepConnectorClasses.lineVertical}`]: {
++      [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
+         color: 'red',
+        },
+     },
+   },
+ },
+```
+
+CSS transforms:
+
+```diff
+- .MuiStepConnector-lineHorizontal
++.MuiStepConnector-horizontal > .MuiStepConnector-line
+- .MuiStepConnector-lineVertical
++.MuiStepConnector-vertical > .MuiStepConnector-line
+```
+
+```bash
+npx @mui/codemod@next deprecations/step-connector-classes <path>
+```
+
+### v6.0.0
+
+#### `styled-v6`
+
+Updates the usage of `styled` from `@mui/system@v5` to be compatible with `@pigment-css/react`.
+
+This codemod transforms the styles based on props to `variants` by looking for `styled` calls:
+
+```diff
+ styled('div')(({ theme, disabled }) => ({
+   color: theme.palette.primary.main,
+-  ...(disabled && {
+-    opacity: 0.5,
+-  }),
++  variants: [
++    {
++      prop: 'disabled',
++      style: {
++        opacity: 0.5,
++      },
++    },
++  ],
+ }));
+```
+
+This codemod can handle complex styles with spread operators, ternary operators, and nested objects.
+
+However, it has some **limitations**:
+
+- It does not transform dynamic values as shown below:
+
+  ```js
+  const ResizableContainer = styled('div')(({ ownerState, theme }) => ({
+    width: ownerState.width ?? '100%',
+    height: ownerState.height ?? '100%',
+  }));
+  ```
+
+  You need to manually declare a CSS variable and set the values using inline styles:
+
+  ```js
+  // ✅ Recommended way
+  const ResizableContainer = styled('div')({
+    width: 'var(--ResizableContainer-width, 100%)',
+    height: 'var(--ResizableContainer-height, 100%)',
+  });
+  ```
+
+- It does not transform dynamic reference from the theme, for example color palette.
+
+  ```js
+  const Test = styled('div')(({ ownerState, theme }) => ({
+    backgroundColor: (theme.vars || theme).palette[ownerState.color]?.main,
+  }));
+  ```
+
+  You need to manually iterate the theme object and create `variants` for each color.
+
+  ```js
+  // ✅ Recommended way
+  const Test = styled('div')(({ theme }) => ({
+    variants: Object.entries(theme.palette)
+      .filter(([color, value]) => value.main)
+      .map(([color, value]) => ({
+        props: { color },
+        style: {
+          backgroundColor: value.main,
+        },
+      })),
+  }));
+  ```
+
 ### v5.0.0
 
 #### `base-use-named-exports`

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

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
-var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
-var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+var _movePropIntoSlots = _interopRequireDefault(require("../utils/movePropIntoSlots"));
+var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -16,76 +15,17 @@ function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;
-  (0, _findComponentJSX.default)(j, {
+  (0, _movePropIntoSlots.default)(j, {
     root,
-    componentName: 'Accordion'
-  }, elementPath => {
-    let index = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionComponent');
-    if (index !== -1) {
-      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
-      let hasNode = false;
-      elementPath.node.openingElement.attributes.forEach(attr => {
-        var _attr$name;
-        if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slots') {
-          hasNode = true;
-          (0, _assignObject.default)(j, {
-            target: attr,
-            key: 'transition',
-            expression: removed[0].value.expression
-          });
-        }
-      });
-      if (!hasNode) {
-        (0, _appendAttribute.default)(j, {
-          target: elementPath.node,
-          attributeName: 'slots',
-          expression: j.objectExpression([j.objectProperty(j.identifier('transition'), removed[0].value.expression)])
-        });
-      }
-    }
-    index = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'TransitionProps');
-    if (index !== -1) {
-      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
-      let hasNode = false;
-      elementPath.node.openingElement.attributes.forEach(attr => {
-        var _attr$name2;
-        if (((_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name) === 'slotProps') {
-          hasNode = true;
-          (0, _assignObject.default)(j, {
-            target: attr,
-            key: 'transition',
-            expression: removed[0].value.expression
-          });
-        }
-      });
-      if (!hasNode) {
-        (0, _appendAttribute.default)(j, {
-          target: elementPath.node,
-          attributeName: 'slotProps',
-          expression: j.objectExpression([j.objectProperty(j.identifier('transition'), removed[0].value.expression)])
-        });
-      }
-    }
+    componentName: 'Accordion',
+    propName: 'TransitionComponent',
+    slotName: 'transition'
   });
-  root.find(j.ObjectProperty, {
-    key: {
-      name: 'TransitionComponent'
-    }
-  }).forEach(path => {
-    var _path$parent;
-    if (((_path$parent = path.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.node.key) == null ? void 0 : _path$parent.name) === 'MuiAccordion') {
-      path.replace(j.property('init', j.identifier('slots'), j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)])));
-    }
-  });
-  root.find(j.ObjectProperty, {
-    key: {
-      name: 'TransitionProps'
-    }
-  }).forEach(path => {
-    var _path$parent2;
-    if (((_path$parent2 = path.parent) == null || (_path$parent2 = _path$parent2.parent) == null || (_path$parent2 = _path$parent2.parent) == null || (_path$parent2 = _path$parent2.parent) == null || (_path$parent2 = _path$parent2.node.key) == null ? void 0 : _path$parent2.name) === 'MuiAccordion') {
-      path.replace(j.property('init', j.identifier('slotProps'), j.objectExpression([j.objectProperty(j.identifier('transition'), path.node.value)])));
-    }
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'Accordion',
+    propName: 'TransitionProps',
+    slotName: 'transition'
   });
   return root.toSource(printOptions);
 }

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

@@ -37,6 +37,22 @@ var _jsxRuntime = require("react/jsx-runtime");
   slots: (0, _extends2.default)({}, outerSlots),
   slotProps: (0, _extends2.default)({}, outerSlotProps)
 });
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  TransitionComponent: ComponentTransition,
+  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,

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

@@ -47,6 +47,20 @@ var _jsxRuntime = require("react/jsx-runtime");
     }
   })
 });
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slots: {
+    transition: SlotTransition
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+  slotProps: {
+    transition: (0, _extends2.default)({}, {
+      unmountOnExit: true
+    }, {
+      id: 'test'
+    })
+  }
+});
 // should skip non MUI components
 /*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAccordion, {
   TransitionComponent: CustomTransition,

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

@@ -9,4 +9,28 @@ fn({
       }
     }
   }
+});
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      slots: {
+        transition: SlotTransition
+      }
+    }
+  }
+});
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slotProps: {
+        transition: {
+          id: 'test'
+        }
+      },
+      TransitionProps: {
+        unmountOnExit: true
+      }
+    }
+  }
 });

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

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 fn({
   MuiAccordion: {
     defaultProps: {
@@ -13,4 +15,26 @@ fn({
       }
     }
   }
+});
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slots: {
+        transition: SlotTransition
+      }
+    }
+  }
+});
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slotProps: {
+        transition: (0, _extends2.default)({}, {
+          unmountOnExit: true
+        }, {
+          id: 'test'
+        })
+      }
+    }
+  }
 });

package/node/deprecations/all/deprecations-all.js

@@ -14,8 +14,10 @@ var _buttonGroupClasses = _interopRequireDefault(require("../button-group-classe
 var _chipClasses = _interopRequireDefault(require("../chip-classes"));
 var _paginationItemClasses = _interopRequireDefault(require("../pagination-item-classes"));
 var _alertClasses = _interopRequireDefault(require("../alert-classes"));
+var _toggleButtonGroupClasses = _interopRequireDefault(require("../toggle-button-group-classes"));
 var _stepLabelProps = _interopRequireDefault(require("../step-label-props"));
 var _backdropProps = _interopRequireDefault(require("../backdrop-props"));
+var _stepConnectorClasses = _interopRequireDefault(require("../step-connector-classes"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -30,7 +32,9 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _chipClasses.default)(file, api, options);
   file.source = (0, _paginationItemClasses.default)(file, api, options);
   file.source = (0, _alertClasses.default)(file, api, options);
+  file.source = (0, _toggleButtonGroupClasses.default)(file, api, options);
   file.source = (0, _stepLabelProps.default)(file, api, options);
   file.source = (0, _backdropProps.default)(file, api, options);
+  file.source = (0, _stepConnectorClasses.default)(file, api, options);
   return file.source;
 }

package/node/deprecations/all/postcss.config.js

@@ -18,6 +18,12 @@ const {
 const {
   plugin: paginationItemClassesPlugin
 } = require('../pagination-item-classes/postcss-plugin');
+const {
+  plugin: stepConnectorClassesPlugin
+} = require('../step-connector-classes/postcss-plugin');
+const {
+  plugin: toggleButtonGroupClassesPlugin
+} = require('../toggle-button-group-classes/postcss-plugin');
 module.exports = {
-  plugins: [accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, paginationItemClassesPlugin]
+  plugins: [accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin]
 };

package/node/deprecations/avatar-props/avatar-props.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
-var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
-var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -16,43 +14,11 @@ function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;
-  (0, _findComponentJSX.default)(j, {
+  (0, _movePropIntoSlotProps.default)(j, {
     root,
-    componentName: 'Avatar'
-  }, elementPath => {
-    const index = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'imgProps');
-    if (index !== -1) {
-      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
-      let hasNode = false;
-      elementPath.node.openingElement.attributes.forEach(attr => {
-        var _attr$name;
-        if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slotProps') {
-          hasNode = true;
-          (0, _assignObject.default)(j, {
-            target: attr,
-            key: 'img',
-            expression: removed[0].value.expression
-          });
-        }
-      });
-      if (!hasNode) {
-        (0, _appendAttribute.default)(j, {
-          target: elementPath.node,
-          attributeName: 'slotProps',
-          expression: j.objectExpression([j.objectProperty(j.identifier('img'), removed[0].value.expression)])
-        });
-      }
-    }
-  });
-  root.find(j.ObjectProperty, {
-    key: {
-      name: 'imgProps'
-    }
-  }).forEach(path => {
-    var _path$parent;
-    if (((_path$parent = path.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.node.key) == null ? void 0 : _path$parent.name) === 'MuiAvatar') {
-      path.replace(j.property('init', j.identifier('slotProps'), j.objectExpression([j.objectProperty(j.identifier('img'), path.node.value)])));
-    }
+    componentName: 'Avatar',
+    propName: 'imgProps',
+    slotName: 'img'
   });
   return root.toSource(printOptions);
 }

package/node/deprecations/avatar-props/test-cases/actual.js

@@ -16,6 +16,16 @@ var _jsxRuntime = require("react/jsx-runtime");
     onLoad: () => {}
   }
 });
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+  imgProps: {
+    onLoad: () => {}
+  },
+  slotProps: {
+    img: {
+      onError: () => {}
+    }
+  }
+});
 
 // should skip non MUI components
 /*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAvatar, {

package/node/deprecations/avatar-props/test-cases/expected.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 var _material = require("@mui/material");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,6 +21,15 @@ var _jsxRuntime = require("react/jsx-runtime");
     }
   }
 });
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+  slotProps: {
+    img: (0, _extends2.default)({}, {
+      onLoad: () => {}
+    }, {
+      onError: () => {}
+    })
+  }
+});
 
 // should skip non MUI components
 /*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAvatar, {

package/node/deprecations/avatar-props/test-cases/theme.actual.js

@@ -9,4 +9,18 @@ fn({
       }
     }
   }
+});
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      imgProps: {
+        onLoad: () => {}
+      },
+      slotProps: {
+        img: {
+          onError: () => {}
+        }
+      }
+    }
+  }
 });

package/node/deprecations/avatar-props/test-cases/theme.expected.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 fn({
   MuiAvatar: {
     defaultProps: {
@@ -11,4 +13,17 @@ fn({
       }
     }
   }
+});
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      slotProps: {
+        img: (0, _extends2.default)({}, {
+          onLoad: () => {}
+        }, {
+          onError: () => {}
+        })
+      }
+    }
+  }
 });