@mui/codemod 7.0.0-alpha.1 → 7.0.0-beta.0

package/deprecations/menu-props/test-cases/theme.expected.js

@@ -0,0 +1,39 @@
+"use strict";
+
+fn({
+  MuiMenu: {
+    defaultProps: {
+      slotProps: {
+        list: {
+          disablePadding: true
+        },
+        transition: {
+          timeout: 200
+        }
+      },
+      slots: {
+        transition: CustomTransition
+      }
+    }
+  }
+});
+fn({
+  MuiMenu: {
+    defaultProps: {
+      slotProps: {
+        root: {
+          disablePortal: true
+        },
+        list: {
+          disablePadding: true
+        },
+        transition: {
+          timeout: 200
+        }
+      },
+      slots: {
+        transition: CustomTransition
+      }
+    }
+  }
+});

package/deprecations/rating-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ratingProps.default;
+  }
+});
+var _ratingProps = _interopRequireDefault(require("./rating-props"));

package/deprecations/rating-props/rating-props.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'Rating',
+    propName: 'IconContainerComponent',
+    slotName: 'icon',
+    slotPropName: 'component'
+  });
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Rating = _interopRequireDefault(require("@mui/material/Rating"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  IconContainerComponent: CustomIconContainer
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer,
+  slots: {
+    root: 'div'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  IconContainerComponent: CustomIconContainer,
+  slots: {
+    ...outerSlots
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  IconContainerComponent: CustomIconContainer,
+  slotProps: {
+    icon: {
+      id: 'my-rating-icon'
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiRating, {
+  IconContainerComponent: CustomIconContainer
+});

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Rating = _interopRequireDefault(require("@mui/material/Rating"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slots: {
+    root: 'div'
+  },
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Rating, {
+  slots: {
+    ...outerSlots
+  },
+  slotProps: {
+    icon: {
+      component: CustomIconContainer
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Rating.default, {
+  slotProps: {
+    icon: {
+      id: 'my-rating-icon',
+      component: CustomIconContainer
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiRating, {
+  IconContainerComponent: CustomIconContainer
+});

package/deprecations/rating-props/test-cases/theme.actual.js

@@ -0,0 +1,31 @@
+"use strict";
+
+fn({
+  MuiRating: {
+    defaultProps: {
+      IconContainerComponent: CustomContainer
+    }
+  }
+});
+fn({
+  MuiRating: {
+    defaultProps: {
+      IconContainerComponent: CustomContainer,
+      slotProps: {
+        root: {}
+      }
+    }
+  }
+});
+fn({
+  MuiRating: {
+    defaultProps: {
+      IconContainerComponent: CustomContainer,
+      slotProps: {
+        icon: {
+          id: 'my-rating-icon'
+        }
+      }
+    }
+  }
+});

package/deprecations/rating-props/test-cases/theme.expected.js

@@ -0,0 +1,37 @@
+"use strict";
+
+fn({
+  MuiRating: {
+    defaultProps: {
+      slotProps: {
+        icon: {
+          component: CustomContainer
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiRating: {
+    defaultProps: {
+      slotProps: {
+        root: {},
+        icon: {
+          component: CustomContainer
+        }
+      }
+    }
+  }
+});
+fn({
+  MuiRating: {
+    defaultProps: {
+      slotProps: {
+        icon: {
+          id: 'my-rating-icon',
+          component: CustomContainer
+        }
+      }
+    }
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-beta.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,12 +24,12 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.26.8",
-    "@babel/runtime": "^7.26.7",
-    "@babel/traverse": "^7.26.8",
+    "@babel/core": "^7.26.9",
+    "@babel/runtime": "^7.26.9",
+    "@babel/traverse": "^7.26.9",
     "jscodeshift": "^17.1.2",
     "jscodeshift-add-imports": "^1.0.11",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.2",
     "postcss-cli": "^11.0.0",
     "yargs": "^17.7.2"
   },

package/v7.0.0/all/v7-all.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = v7All;
+var _gridProps = _interopRequireDefault(require("../grid-props"));
 var _labRemovedComponents = _interopRequireDefault(require("../lab-removed-components"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
 function v7All(file, api, options) {
+  (0, _gridProps.default)(file, api, options);
   (0, _labRemovedComponents.default)(file, api, options);
   return file.source;
 }

package/v7.0.0/grid-props/grid-props.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = gridV2Props;
+const possibleDefaultImports = ['@mui/material/Grid', '@mui/system/Grid', '@mui/joy/Grid'];
+const possibleNamedImports = {
+  '@mui/material': 'Grid',
+  '@mui/system': 'Grid',
+  '@mui/joy': 'Grid'
+};
+const defaultBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function gridV2Props(file, api, options) {
+  if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const breakpoints = options.muiBreakpoints?.split(',') || defaultBreakpoints;
+  const printOptions = options.printOptions;
+  const gridLocalNames = [];
+  root.find(j.ImportDeclaration, decl => possibleDefaultImports.includes(decl.source.value)).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportDefaultSpecifier') {
+        gridLocalNames.push(spec.local.name);
+      }
+    });
+  });
+  root.find(j.ImportDeclaration, decl => Object.keys(possibleNamedImports).includes(decl.source.value)).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportSpecifier') {
+        if (possibleNamedImports[decl.node.source.value] === spec.imported.name) {
+          gridLocalNames.push(spec.local.name);
+        }
+      }
+    });
+  });
+  root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: name => gridLocalNames.includes(name)
+      }
+    }
+  }).forEach(el => {
+    const size = j.objectExpression([]);
+    const spreadProps = [];
+    const attributesToPrune = [];
+    el.node.openingElement.attributes.forEach(attr => {
+      if (attr.type === 'JSXSpreadAttribute') {
+        spreadProps.push(attr);
+      }
+    });
+    const breakpointNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && breakpoints.includes(path.node.name.name));
+    breakpointNodes.nodes().forEach(node => {
+      const breakpoint = node.name.name;
+      const nodeValue = node.value;
+      let value;
+      if (nodeValue === null) {
+        value = j.stringLiteral('grow');
+      } else if (nodeValue.type === 'JSXExpressionContainer') {
+        if (nodeValue.expression.value === true) {
+          value = j.stringLiteral('grow');
+        } else {
+          value = nodeValue.expression;
+        }
+      } else {
+        value = nodeValue;
+      }
+      size.properties.push(j.property('init', j.identifier(breakpoint), value));
+    });
+    spreadProps.forEach(spreadProp => {
+      const spreadPropArgument = spreadProp.argument;
+      if (spreadPropArgument.type === 'ObjectExpression') {
+        const propertiesToPrune = [];
+        spreadPropArgument.properties.forEach(property => {
+          if (breakpoints.includes(property.key.name)) {
+            size.properties.push(j.property('init', property.key, property.value));
+            propertiesToPrune.push(property.key.name);
+          }
+        });
+        spreadPropArgument.properties = spreadPropArgument.properties.filter(prop => !propertiesToPrune.includes(prop.key.name));
+        if (spreadPropArgument.properties.length === 0) {
+          attributesToPrune.push(spreadProp);
+        }
+      }
+    });
+    if (size.properties.length) {
+      let sizePropValue = size;
+      if (size.properties.length === 1 && size.properties[0].key.name === 'xs') {
+        sizePropValue = size.properties[0].value;
+      }
+      if (sizePropValue.type !== 'StringLiteral') {
+        sizePropValue = j.jsxExpressionContainer(sizePropValue);
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('size'), sizePropValue));
+    }
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !breakpoints.includes(attr?.name?.name));
+    const offset = j.objectExpression([]);
+    const offsetNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && path.node.name.name.endsWith('Offset') && breakpoints.includes(path.node.name.name.replace('Offset', '')));
+    offsetNodes.nodes().forEach(node => {
+      const breakpoint = node.name.name.replace('Offset', '');
+      const value = node.value.type === 'JSXExpressionContainer' ? node.value.expression : node.value;
+      offset.properties.push(j.property('init', j.identifier(breakpoint), value));
+    });
+    spreadProps.forEach(spreadProp => {
+      const spreadPropArgument = spreadProp.argument;
+      if (spreadPropArgument.type === 'ObjectExpression') {
+        const propertiesToPrune = [];
+        spreadPropArgument.properties.forEach(property => {
+          const breakpoint = property.key.name.replace('Offset', '');
+          if (property.key.name.endsWith('Offset') && breakpoints.includes(breakpoint)) {
+            offset.properties.push(j.property('init', j.identifier(breakpoint), property.value));
+            propertiesToPrune.push(property.key.name);
+          }
+        });
+        spreadPropArgument.properties = spreadPropArgument.properties.filter(prop => !propertiesToPrune.includes(prop.key.name));
+        if (spreadPropArgument.properties.length === 0) {
+          attributesToPrune.push(spreadProp);
+        }
+      }
+    });
+    if (offset.properties.length) {
+      let offsetPropValue = offset;
+      if (offset.properties.length === 1 && offset.properties[0].key.name === 'xs') {
+        offsetPropValue = offset.properties[0].value;
+      }
+      if (offsetPropValue.type !== 'StringLiteral') {
+        offsetPropValue = j.jsxExpressionContainer(offsetPropValue);
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('offset'), offsetPropValue));
+    }
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !breakpoints.includes(attr?.name?.name.replace('Offset', '')));
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !attributesToPrune.includes(attr));
+    const itemProp = el.node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'item');
+    if (itemProp) {
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => attr.type === 'JSXAttribute' && attr.name.name !== 'item');
+    }
+    const zeroMinWidthProp = el.node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'zeroMinWidth');
+    if (zeroMinWidthProp) {
+      el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => attr.type === 'JSXAttribute' && attr.name.name !== 'zeroMinWidth');
+    }
+  });
+  return root.toSource(printOptions);
+}

package/v7.0.0/grid-props/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _gridProps.default;
+  }
+});
+var _gridProps = _interopRequireDefault(require("./grid-props"));

package/v7.0.0/grid-props/test-cases/actual.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _GridLegacy = _interopRequireDefault(require("@mui/material/GridLegacy"));
+var _Grid2 = _interopRequireDefault(require("@mui/system/Grid"));
+var _Grid3 = _interopRequireDefault(require("@mui/joy/Grid"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _joy = require("@mui/joy");
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms on all the possible imports
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid2.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid3.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  item: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  item: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  item: false
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  zeroMinWidth: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  zeroMinWidth: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  zeroMinWidth: false
+});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 10
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: true,
+  sm: "auto",
+  md: 2,
+  lg: true,
+  xl: false
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xsOffset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xsOffset: 2,
+  smOffset: 4,
+  mdOffset: 6,
+  lgOffset: 8,
+  xlOffset: 10
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xsOffset: 2,
+  smOffset: "auto"
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: 2,
+  sm: 4,
+  xsOffset: 0,
+  smOffset: 2
+});
+
+// Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridLegacy.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.GridLegacy, {
+  xs: 2
+});

package/v7.0.0/grid-props/test-cases/custom-breakpoints.actual.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  customXs: 2,
+  customSm: 4,
+  customMd: 6
+});
+
+// Transforms custom breakpoints offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  customXsOffset: 2,
+  customSmOffset: 4,
+  customMdOffset: 6
+});

package/v7.0.0/grid-props/test-cases/custom-breakpoints.expected.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  size: {
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }
+});
+
+// Transforms custom breakpoints offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  offset: {
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }
+});