@mui/codemod 5.11.6 → 5.11.9

package/README.md

@@ -62,6 +62,36 @@ 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`

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "5.11.6",
+  "version": "5.11.9",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -30,9 +30,9 @@
     "url": "https://opencollective.com/mui"
   },
   "dependencies": {
-    "@babel/core": "^7.20.7",
-    "@babel/runtime": "^7.20.7",
-    "@babel/traverse": "^7.20.10",
+    "@babel/core": "^7.20.12",
+    "@babel/runtime": "^7.20.13",
+    "@babel/traverse": "^7.20.13",
     "jscodeshift": "^0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.6.2"