@mui/codemod 6.0.0-dev.240424162023-9968b4889d → 6.0.0

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class",
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class",
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  className: "my-class",
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  className: "my-class",
+  sx: {
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    marginBottom: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  sx: {
+    marginBottom: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    mb: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  sx: {
+    mb: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  sx: {
+    color: "black",
+    marginBottom: "16px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  sx: {
+    color: "black",
+    marginBottom: "16px"
+  }
+});

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

@@ -0,0 +1,85 @@
+"use strict";
+
+fn({
+  MuiTypography: {
+    defaultProps: {}
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: false
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: false,
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: true
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph: true,
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        marginBottom: "32px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        mb: "32px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      paragraph,
+      className: "my-class",
+      sx: {
+        color: "black"
+      }
+    }
+  }
+});

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

@@ -0,0 +1,86 @@
+"use strict";
+
+fn({
+  MuiTypography: {
+    defaultProps: {}
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {}
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class"
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      sx: {
+        marginBottom: "16px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        marginBottom: "16px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        marginBottom: "16px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        marginBottom: "32px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        mb: "32px"
+      }
+    }
+  }
+});
+fn({
+  MuiTypography: {
+    defaultProps: {
+      className: "my-class",
+      sx: {
+        color: "black",
+        marginBottom: "16px"
+      }
+    }
+  }
+});

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

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
+var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
+/**
+ * @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, _findComponentJSX.default)(j, {
+    root,
+    componentName: 'Typography'
+  }, elementPath => {
+    const paragraphProp = elementPath.node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'paragraph');
+    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;
+    });
+    const isParagraphPropTruthy = paragraphProp.value?.expression.value !== false;
+    if (!isParagraphPropTruthy) {
+      return;
+    }
+    const sxIndex = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'sx');
+    if (sxIndex === -1) {
+      (0, _appendAttribute.default)(j, {
+        target: elementPath.node,
+        attributeName: 'sx',
+        expression: 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) {
+        (0, _assignObject.default)(j, {
+          target: elementPath.node.openingElement.attributes[sxIndex],
+          key: 'marginBottom',
+          expression: j.literal('16px')
+        });
+      }
+    }
+  });
+  root.find(j.ObjectProperty, {
+    key: {
+      name: 'MuiTypography'
+    }
+  }).forEach(path => {
+    const defaultPropsObject = path.value.value.properties.find(key => key.key.name === 'defaultProps');
+    const paragraphProp = defaultPropsObject.value.properties.find(prop => prop.key.name === 'paragraph');
+    if (!paragraphProp) {
+      return;
+    }
+    defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(prop => !['paragraph'].includes(prop?.key?.name));
+    const isParagraphPropTruthy = paragraphProp.value?.value !== false;
+    if (!isParagraphPropTruthy) {
+      return;
+    }
+    const sxIndex = defaultPropsObject.value.properties.findIndex(prop => prop.key.name === 'sx');
+    if (sxIndex === -1) {
+      defaultPropsObject.value.properties.push(j.objectProperty(j.identifier('sx'), j.objectExpression([j.objectProperty(j.identifier('marginBottom'), j.literal('16px'))])));
+    } else {
+      const hasMarginBottom = defaultPropsObject.value.properties[sxIndex].value.properties.some(key => key.key.name === 'marginBottom' || key.key.name === 'mb');
+      if (!hasMarginBottom) {
+        defaultPropsObject.value.properties[sxIndex].value.properties.push(j.objectProperty(j.identifier('marginBottom'), j.literal('16px')));
+      }
+    }
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/utils/movePropIntoSlotProps.js

@@ -15,14 +15,10 @@ function moveJsxPropIntoSlotProps(j, element, propName, slotName) {
     const removedValue = element.openingElement.attributes.splice(propIndex, 1)[0].value.expression;
     let hasSlotProps = false;
     element.openingElement.attributes.forEach(attr => {
-      var _attr$name;
-      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slotProps') {
+      if (attr.name?.name === 'slotProps') {
         hasSlotProps = true;
         const slots = attr.value.expression;
-        const slotIndex = slots.properties.findIndex(prop => {
-          var _prop$key;
-          return (prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name) === slotName;
-        });
+        const slotIndex = slots.properties.findIndex(prop => prop?.key?.name === slotName);
         if (slotIndex === -1) {
           (0, _assignObject.default)(j, {
             target: attr,
@@ -58,13 +54,9 @@ function moveDefaultPropsPropIntoslotProps(j, defaultPropsPathCollection, propNa
     const defaultProps = path.parent.value;
     let hasSlotProps = false;
     defaultProps.properties.forEach(property => {
-      var _property$key;
-      if (((_property$key = property.key) == null ? void 0 : _property$key.name) === 'slotProps') {
+      if (property.key?.name === 'slotProps') {
         hasSlotProps = true;
-        const slotIndex = property.value.properties.findIndex(prop => {
-          var _prop$key2;
-          return (prop == null || (_prop$key2 = prop.key) == null ? void 0 : _prop$key2.name) === slotName;
-        });
+        const slotIndex = property.value.properties.findIndex(prop => prop?.key?.name === slotName);
         if (slotIndex === -1) {
           property.value.properties.push(j.objectProperty(j.identifier(slotName), removedValue));
         } else {

package/node/deprecations/utils/movePropIntoSlots.js

@@ -15,13 +15,9 @@ function moveJsxPropIntoSlots(j, element, propName, slotName) {
     const removedValue = element.openingElement.attributes.splice(index, 1)[0].value.expression;
     let hasSlots = false;
     element.openingElement.attributes.forEach(attr => {
-      var _attr$name;
-      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slots') {
+      if (attr.name?.name === 'slots') {
         hasSlots = true;
-        const slotIndex = attr.value.expression.properties.findIndex(prop => {
-          var _prop$key;
-          return (prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name) === slotName;
-        });
+        const slotIndex = attr.value.expression.properties.findIndex(prop => prop?.key?.name === slotName);
         if (slotIndex === -1) {
           (0, _assignObject.default)(j, {
             target: attr,
@@ -50,14 +46,10 @@ function moveDefaultPropsPropIntoSlots(j, defaultPropsPathCollection, propName,
     const defaultProps = path.parent.value;
     let hasSlots = false;
     defaultProps.properties.forEach(property => {
-      var _property$key;
-      if (((_property$key = property.key) == null ? void 0 : _property$key.name) === 'slots') {
+      if (property.key?.name === 'slots') {
         hasSlots = true;
         const slots = property.value;
-        const slotIndex = slots.properties.findIndex(prop => {
-          var _prop$key2;
-          return (prop == null || (_prop$key2 = prop.key) == null ? void 0 : _prop$key2.name) === slotName;
-        });
+        const slotIndex = slots.properties.findIndex(prop => prop?.key?.name === slotName);
         if (slotIndex === -1) {
           slots.properties.push(j.objectProperty(j.identifier(slotName), removedValue));
         }

package/node/deprecations/utils/replaceComponentsWithSlots.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = replaceComponentsWithSlots;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
 var _findComponentDefaultProps = _interopRequireDefault(require("../../util/findComponentDefaultProps"));
 var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
@@ -19,19 +18,20 @@ function replaceJsxComponentsProp(j, elementPath) {
   if (index !== -1) {
     const removed = element.openingElement.attributes.splice(index, 1);
     const camelCaseComponents = removed[0].value.expression.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [componentsKeyToSlotsKey(prop.key.name)]: prop.value
-      });
+      };
     }, {});
     let hasNode = false;
     element.openingElement.attributes.forEach(attr => {
-      var _attr$name;
-      if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slots') {
+      if (attr.name?.name === 'slots') {
         hasNode = true;
         const slots = attr.value.expression.properties.reduce((acc, prop) => {
-          return (0, _extends2.default)({}, acc, {
+          return {
+            ...acc,
             [prop.key.name]: prop.value
-          });
+          };
         }, {});
         Object.entries(camelCaseComponents).forEach(([slot, value]) => {
           if (!slots[slot]) {
@@ -61,13 +61,13 @@ function replaceJsxComponentsPropsProp(j, element) {
     const removed = element.openingElement.attributes.splice(index, 1);
     let hasNode = false;
     element.openingElement.attributes.forEach(attr => {
-      var _attr$name2;
-      if (((_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name) === 'slotProps') {
+      if (attr.name?.name === 'slotProps') {
         hasNode = true;
         const slotProps = attr.value.expression.properties.reduce((acc, prop) => {
-          return (0, _extends2.default)({}, acc, {
+          return {
+            ...acc,
             [prop.key.name]: prop.value
-          });
+          };
         }, {});
         removed[0].value.expression.properties.forEach(prop => {
           if (!slotProps[prop.key.name]) {
@@ -77,10 +77,7 @@ function replaceJsxComponentsPropsProp(j, element) {
               expression: prop.value
             });
           } else {
-            attr.value.expression.properties = attr.value.expression.properties.filter(p => {
-              var _p$key;
-              return (p == null || (_p$key = p.key) == null ? void 0 : _p$key.name) !== prop.key.name;
-            });
+            attr.value.expression.properties = attr.value.expression.properties.filter(p => p?.key?.name !== prop.key.name);
             (0, _assignObject.default)(j, {
               target: attr,
               key: prop.key.name,
@@ -109,17 +106,22 @@ function replaceDefaultPropsComponentsProp(j, defaultPropsPathCollection) {
       properties: defaultPropsProperties
     } = path.parent.value;
     const components = path.value.value.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [componentsKeyToSlotsKey(prop.key.name)]: prop.value
-      });
+      };
     }, {});
     const existingSlots = defaultPropsProperties.find(prop => prop.key.name === 'slots');
     const slots = existingSlots ? existingSlots.value.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [prop.key.name]: prop.value
-      });
+      };
     }, {}) : {};
-    const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {
+    const updatedSlots = j.objectExpression(Object.entries({
+      ...components,
+      ...slots
+    }).map(([slot, value]) => {
       return j.objectProperty(j.identifier(slot), value);
     }));
     if (existingSlots) {
@@ -140,17 +142,22 @@ function replaceDefaultPropsComponentsPropsProp(j, defaultPropsPathCollection) {
       properties: defaultPropsProperties
     } = path.parent.value;
     const components = path.value.value.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [prop.key.name]: prop.value
-      });
+      };
     }, {});
     const existingSlots = defaultPropsProperties.find(prop => prop.key.name === 'slotProps');
     const slots = existingSlots ? existingSlots.value.properties.reduce((acc, prop) => {
-      return (0, _extends2.default)({}, acc, {
+      return {
+        ...acc,
         [prop.key.name]: components[prop.key.name] ? j.objectExpression([j.spreadElement(components[prop.key.name]), j.spreadElement(prop.value)]) : prop.value
-      });
+      };
     }, {}) : {};
-    const updatedSlots = j.objectExpression(Object.entries((0, _extends2.default)({}, components, slots)).map(([slot, value]) => {
+    const updatedSlots = j.objectExpression(Object.entries({
+      ...components,
+      ...slots
+    }).map(([slot, value]) => {
       return j.objectProperty(j.identifier(slot), value);
     }));
     if (existingSlots) {

package/node/util/getReturnExpression.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getReturnExpression;
+/**
+ * @param {import('ast-types').namedTypes.ArrowFunctionExpression | import('ast-types').namedTypes.FunctionExpression} node
+ */
+function getReturnExpression(node) {
+  let body = node.body;
+  if (body === 'BlockStatement') {
+    body = body.body;
+  }
+  if (Array.isArray(body)) {
+    return body.find(statement => statement.type === 'ReturnStatement')?.argument;
+  }
+  return body;
+}