@mui/codemod 5.11.5 → 5.11.7

package/README.md

@@ -62,6 +62,54 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
 
 ### v5.0.0
 
+#### `joy-rename-classname-prefix`
+
+Renames the classname prefix from `'Joy'` to `'Mui'` for Joy UI components.
+
+```diff
+ <Button
+-  sx={{ '& .JoyButton-root': { '& .JoyButton-button': {} } }}
++  sx={{ '& .MuiButton-root': { '& .MuiButton-button': {} } }}
+ />;
+```
+
+```sh
+npx @mui/codemod v5.0.0/joy-rename-classname-prefix <path>
+```
+
+#### `joy-rename-row-prop`
+
+Transforms `row` prop to `orientation` prop across `Card`, `List` and `RadioGroup` components.
+
+```diff
+ <Card
+-  row
++  orientation={"horizontal"}
+ />;
+```
+
+```sh
+npx @mui/codemod v5.0.0/joy-rename-row-prop <path>
+```
+
+#### `joy-avatar-remove-imgProps`
+
+Remove `imgProps` prop by transferring its value into `slotProps.img`
+
+This change only affects Joy UI Avatar component.
+
+```diff
+ <Avatar
+-  imgProps={{ ['data-id']: 'imageId' }}
+-  slotProps={{ root: { ['data-id']: 'rootId' }}}
++  slotProps={{ root: { ['data-id']: 'rootId' }, img: { ['data-id']: 'imageId' } }}
+ />;
+```
+
+```sh
+npx @mui/codemod v5.0.0/joy-avatar-remove-imgProps <path>
+```
+
 #### `joy-text-field-to-input`
 
 Replace `<TextField>` with composition of `Input`

package/node/v5.0.0/joy-avatar-remove-imgProps.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @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;
+  root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    const sourceVal = node.source.value;
+    return ['@mui/joy',
+    // Process only Joy UI components
+    '@mui/joy/Avatar' // Filter default imports of components other than `Avatar`
+    ].includes(sourceVal);
+  }).forEach(path => {
+    path.node.specifiers.forEach(elementNode => {
+      var _elementNode$imported;
+      if (elementNode.type === 'ImportSpecifier' && ((_elementNode$imported = elementNode.imported) == null ? void 0 : _elementNode$imported.name) === 'Avatar' || elementNode.type === 'ImportDefaultSpecifier') {
+        // Process only Joy `Avatar` component
+        root.findJSXElements(elementNode.local.name).forEach(elementPath => {
+          if (elementPath.node.type !== 'JSXElement') {
+            return;
+          }
+          const slotPropsAttributeNode = elementPath.node.openingElement.attributes.find(attributeNode => {
+            var _attributeNode$value$;
+            return attributeNode.type === 'JSXAttribute' && attributeNode.name.name === 'slotProps' && ((_attributeNode$value$ = attributeNode.value.expression) == null ? void 0 : _attributeNode$value$.type) === 'ObjectExpression';
+          });
+          const newAttributeNodes = [];
+          elementPath.node.openingElement.attributes.forEach(attributeNode => {
+            if (attributeNode.type !== 'JSXAttribute') {
+              return;
+            }
+            if (attributeNode.name.name !== 'imgProps') {
+              newAttributeNodes.push(attributeNode);
+              return;
+            }
+            const val = attributeNode.value;
+            if (!(val != null && val.expression)) {
+              return;
+            }
+            if (slotPropsAttributeNode) {
+              const imgObjInSlotProps = slotPropsAttributeNode.value.expression.properties.find(propNode => propNode.key.name === 'img' && propNode.value.type === 'ObjectExpression');
+              if (imgObjInSlotProps) {
+                const newProperties = [...imgObjInSlotProps.value.properties, ...attributeNode.value.expression.properties];
+                imgObjInSlotProps.value.properties = newProperties;
+              } else {
+                slotPropsAttributeNode.value.expression.properties.push(j.objectProperty(j.identifier('img'), attributeNode.value));
+              }
+            } else {
+              newAttributeNodes.push(j.jsxAttribute(j.jsxIdentifier('slotProps'), j.jsxExpressionContainer(j.objectExpression([j.objectProperty(j.identifier('img'), attributeNode.value.expression)]))));
+            }
+          });
+          elementPath.node.openingElement.attributes = newAttributeNodes;
+        });
+      }
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

package/node/v5.0.0/joy-avatar-remove-imgProps.test/actual.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Avatar = _interopRequireDefault(require("@mui/joy/Avatar"));
+var _Avatar2 = _interopRequireDefault(require("@mui/material/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy UI `Avatar`;
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Avatar, {
+    imgProps: {
+      ['aria-hidden']: true
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    slotProps: {
+      root: {
+        ['aria-hidden']: false
+      },
+      img: {
+        ['aria-label']: 'imgSlot'
+      }
+    },
+    imgProps: {
+      ['aria-hidden']: true
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar2.default, {
+    imgProps: {
+      ['aria-hidden']: true
+    }
+  })]
+});

package/node/v5.0.0/joy-avatar-remove-imgProps.test/expected.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Avatar = _interopRequireDefault(require("@mui/joy/Avatar"));
+var _Avatar2 = _interopRequireDefault(require("@mui/material/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy UI `Avatar`;
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Avatar, {
+    slotProps: {
+      img: {
+        ['aria-hidden']: true
+      }
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    slotProps: {
+      root: {
+        ['aria-hidden']: false
+      },
+      img: {
+        ['aria-label']: 'imgSlot',
+        ['aria-hidden']: true
+      }
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar2.default, {
+    imgProps: {
+      ['aria-hidden']: true
+    }
+  })]
+});

package/node/v5.0.0/joy-rename-classname-prefix.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ */
+function transformer(file) {
+  return file.source.replace(/Joy([A-Z]+)/gm, 'Mui$1');
+}

package/node/v5.0.0/joy-rename-classname-prefix.test/actual.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+  className: "JoyButton-button"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+  sx: {
+    '& .JoyButton-root': {
+      '& .JoyButton-button': {}
+    }
+  }
+});

package/node/v5.0.0/joy-rename-classname-prefix.test/expected.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+  className: "MuiButton-button"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+  sx: {
+    '& .MuiButton-root': {
+      '& .MuiButton-button': {}
+    }
+  }
+});

package/node/v5.0.0/joy-rename-row-prop.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @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;
+  root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    return node.source.value.startsWith('@mui/joy');
+  }).forEach(path => {
+    path.node.specifiers.forEach(node => {
+      // Process only Joy UI components
+      root.findJSXElements(node.local.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        elementPath.node.openingElement.attributes.forEach(attributeNode => {
+          if (attributeNode.type !== 'JSXAttribute') {
+            return;
+          }
+          if (attributeNode.name.name === 'row') {
+            var _val$expression;
+            const val = attributeNode.value;
+            if (val === null || (val == null ? void 0 : (_val$expression = val.expression) == null ? void 0 : _val$expression.value) === true) {
+              attributeNode.name.name = 'orientation';
+              attributeNode.value = j.jsxExpressionContainer(j.literal('horizontal'));
+            }
+          }
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

package/node/v5.0.0/joy-rename-row-prop.test/actual.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Card = _interopRequireDefault(require("@mui/joy/Card"));
+var _RadioGroup = _interopRequireDefault(require("@mui/joy/RadioGroup"));
+var _Custom = _interopRequireDefault(require("components/Custom"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy UI components;
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+    row: true
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.List, {
+    row: true
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.default, {
+    row: true
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Custom.default, {
+    row: true
+  })]
+});

package/node/v5.0.0/joy-rename-row-prop.test/expected.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Card = _interopRequireDefault(require("@mui/joy/Card"));
+var _RadioGroup = _interopRequireDefault(require("@mui/joy/RadioGroup"));
+var _Custom = _interopRequireDefault(require("components/Custom"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy UI components;
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+    orientation: "horizontal"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.List, {
+    orientation: "horizontal"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.default, {
+    orientation: "horizontal"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Custom.default, {
+    row: true
+  })]
+});

package/node/v5.0.0/joy-text-field-to-input.js

@@ -64,7 +64,6 @@ function transformer(file, api, options) {
                     }
                     propNode.value.properties.forEach(prop => {
                       const key = prop.key.value;
-                      // const value = prop.value.value;
                       const newAttributeNode = j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(prop.value));
                       switch (propNode.key.name) {
                         case 'root':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.11.5",
+  "version": "5.11.7",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",