@mui/codemod 6.0.0-beta.1 → 6.0.0-beta.3

package/README.md

@@ -61,7 +61,7 @@ npx @mui/codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quote
 
 ## Included scripts
 
-- [Deprecation](#deprecations)
+- [Deprecations](#deprecations)
 - [v6](#v600)
 - [v5](#v500)
 - [v4](#v400)
@@ -1585,6 +1585,28 @@ CSS transforms:
 npx @mui/codemod@next deprecations/table-sort-label-classes <path>
 ```
 
+#### `typography-props`
+
+```diff
+ <Typography
+-  paragraph
++  sx={{ marginBottom: '16px' }}
+ />
+```
+
+```diff
+ MuiTypography: {
+   defaultProps: {
+-    paragraph: true
++    sx: { marginBottom: '16px' },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/typography-props <path>
+```
+
 ### v6.0.0
 
 #### `sx-prop`

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

@@ -20,30 +20,36 @@ function transformer(file, api, options) {
     root,
     componentName: 'Divider'
   }, elementPath => {
-    const hasLightProp = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'light') !== -1;
-    if (hasLightProp) {
-      elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter(attr => {
-        if (attr.type === 'JSXAttribute' && attr.name.name === 'light') {
-          return false;
-        }
-        return true;
+    var _lightProp$value;
+    const lightProp = elementPath.node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'light');
+    if (!lightProp) {
+      return;
+    }
+    elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter(attr => {
+      if (attr.type === 'JSXAttribute' && attr.name.name === 'light') {
+        return false;
+      }
+      return true;
+    });
+    const isLightPropTruthy = ((_lightProp$value = lightProp.value) == null ? void 0 : _lightProp$value.expression.value) !== false;
+    if (!isLightPropTruthy) {
+      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('opacity'), j.literal('0.6'))])
       });
-      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('opacity'), j.literal('0.6'))])
+    } else {
+      const opacityIndex = elementPath.node.openingElement.attributes[sxIndex].value.expression.properties.findIndex(key => key.key.name === 'opacity');
+      if (opacityIndex === -1) {
+        (0, _assignObject.default)(j, {
+          target: elementPath.node.openingElement.attributes[sxIndex],
+          key: 'opacity',
+          expression: j.literal('0.6')
         });
-      } else {
-        const opacityIndex = elementPath.node.openingElement.attributes[sxIndex].value.expression.properties.findIndex(key => key.key.name === 'opacity');
-        if (opacityIndex === -1) {
-          (0, _assignObject.default)(j, {
-            target: elementPath.node.openingElement.attributes[sxIndex],
-            key: 'opacity',
-            expression: j.literal('0.6')
-          });
-        }
       }
     }
   });
@@ -52,21 +58,27 @@ function transformer(file, api, options) {
       name: 'MuiDivider'
     }
   }).forEach(path => {
+    var _lightProp$value2;
     const defaultPropsObject = path.value.value.properties.find(key => key.key.name === 'defaultProps');
-    const hasLightProp = defaultPropsObject.value.properties.findIndex(prop => prop.key.name === 'light') !== -1;
-    if (hasLightProp) {
-      defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(prop => {
-        var _prop$key;
-        return !['light'].includes(prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name);
-      });
-      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('opacity'), j.literal('0.6'))])));
-      } else {
-        const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex(key => key.key.name === 'opacity');
-        if (opacityIndex === -1) {
-          defaultPropsObject.value.properties[sxIndex].value.properties.push(j.objectProperty(j.identifier('opacity'), j.literal('0.6')));
-        }
+    const lightProp = defaultPropsObject.value.properties.find(prop => prop.key.name === 'light');
+    if (!lightProp) {
+      return;
+    }
+    defaultPropsObject.value.properties = defaultPropsObject.value.properties.filter(prop => {
+      var _prop$key;
+      return !['light'].includes(prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name);
+    });
+    const isLightPropTruthy = ((_lightProp$value2 = lightProp.value) == null ? void 0 : _lightProp$value2.value) !== false;
+    if (!isLightPropTruthy) {
+      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('opacity'), j.literal('0.6'))])));
+    } else {
+      const opacityIndex = defaultPropsObject.value.properties[sxIndex].value.properties.findIndex(key => key.key.name === 'opacity');
+      if (opacityIndex === -1) {
+        defaultPropsObject.value.properties[sxIndex].value.properties.push(j.objectProperty(j.identifier('opacity'), j.literal('0.6')));
       }
     }
   });

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

@@ -17,16 +17,10 @@ var _jsxRuntime = require("react/jsx-runtime");
   }
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-  className: "test",
-  sx: {
-    opacity: "0.6"
-  }
+  className: "test"
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
-  className: "test",
-  sx: {
-    opacity: "0.6"
-  }
+  className: "test"
 });
 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
   className: "test",

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

@@ -1,5 +1,20 @@
 "use strict";
 
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light: false
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light: false,
+      className: 'my-class'
+    }
+  }
+});
 fn({
   MuiDivider: {
     defaultProps: {

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

@@ -1,5 +1,17 @@
 "use strict";
 
+fn({
+  MuiDivider: {
+    defaultProps: {}
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class'
+    }
+  }
+});
 fn({
   MuiDivider: {
     defaultProps: {

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

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

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

@@ -0,0 +1,80 @@
+"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, {
+  paragraph: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: false,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: false,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: paragraph,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: paragraph,
+  className: "my-class"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true,
+  sx: {
+    marginBottom: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true,
+  sx: {
+    marginBottom: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true,
+  sx: {
+    mb: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true,
+  sx: {
+    mb: "32px"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  paragraph: true,
+  sx: {
+    color: "black"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+  paragraph: true,
+  sx: {
+    color: "black"
+  }
+});

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,86 @@
+"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 => {
+    var _paragraphProp$value;
+    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 = paragraphProp.value) == null ? void 0 : _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 => {
+    var _paragraphProp$value2;
+    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 => {
+      var _prop$key;
+      return !['paragraph'].includes(prop == null || (_prop$key = prop.key) == null ? void 0 : _prop$key.name);
+    });
+    const isParagraphPropTruthy = ((_paragraphProp$value2 = paragraphProp.value) == null ? void 0 : _paragraphProp$value2.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.3",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -24,11 +24,11 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.24.8",
+    "@babel/core": "^7.24.9",
     "@babel/runtime": "^7.24.8",
     "@babel/traverse": "^7.24.8",
     "jscodeshift": "^0.16.1",
-    "jscodeshift-add-imports": "^1.0.10",
+    "jscodeshift-add-imports": "^1.0.11",
     "postcss": "^8.4.39",
     "postcss-cli": "^11.0.0",
     "yargs": "^17.7.2"
@@ -44,7 +44,7 @@
     "directory": "build"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
   "scripts": {
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-codemod/**/*.test.js'",