@mui/codemod 6.0.0-alpha.5 → 6.0.0-alpha.6

package/README.md

@@ -1099,8 +1099,74 @@ npx @mui/codemod@next deprecations/step-connector-classes <path>
 
 ### v6.0.0
 
+#### `theme-v6`
+
+```bash
+npx @mui/codemod@next v6.0.0/theme-v6 <path>
+```
+
+Update the theme creation from `@mui/system@v5` to be compatible with `@pigment-css/react`.
+
+- replace palette mode conditional with `theme.applyStyles()`
+- replace `ownerState` with `variants`
+- move theme variants to the root slot
+
+```diff
+  createTheme({
+    components: {
+      MuiButton: {
+-        variants: [
+-          {
+-            props: { color: 'primary' },
+-            style: {
+-              color: 'red',
+-            },
+-          },
+-        ],
+        styleOverrides: {
+-          root: ({ theme, ownerState }) => ({
++          root: ({ theme }) => ({
+            ...ownerState.variant === 'contained' && {
+              backgroundColor: alpha(theme.palette.primary.main, 0.8),
+              ...theme.palette.mode === 'dark' && {
+                backgroundColor: alpha(theme.palette.primary.light, 0.9),
+              }
+            },
++           variants: [
++             {
++               prop: { variant: 'contained' },
++               style: {
++                 backgroundColor: alpha(theme.palette.primary.main, 0.8),
++               },
++             },
++             {
++               prop: { variant: 'contained' },
++               style: {
++                 ...theme.applyStyles('dark', {
++                   backgroundColor: alpha(theme.palette.primary.light, 0.9),
++                 })
++               },
++             },
++             {
++               prop: { color: 'primary' },
++               style: {
++                 color: 'red',
++               },
++             },
++           ],
+          })
+        }
+      }
+    }
+  })
+```
+
 #### `styled-v6`
 
+```bash
+npx @mui/codemod@next v6.0.0/styled-v6 <path>
+```
+
 Updates the usage of `styled` from `@mui/system@v5` to be compatible with `@pigment-css/react`.
 
 This codemod transforms the styles based on props to `variants` by looking for `styled` calls:

package/node/deprecations/all/deprecations-all.js

@@ -19,6 +19,7 @@ var _toggleButtonGroupClasses = _interopRequireDefault(require("../toggle-button
 var _stepLabelProps = _interopRequireDefault(require("../step-label-props"));
 var _backdropProps = _interopRequireDefault(require("../backdrop-props"));
 var _stepConnectorClasses = _interopRequireDefault(require("../step-connector-classes"));
+var _speedDialProps = _interopRequireDefault(require("../speed-dial-props"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -38,5 +39,6 @@ function deprecationsAll(file, api, options) {
   file.source = (0, _stepLabelProps.default)(file, api, options);
   file.source = (0, _backdropProps.default)(file, api, options);
   file.source = (0, _stepConnectorClasses.default)(file, api, options);
+  file.source = (0, _speedDialProps.default)(file, api, options);
   return file.source;
 }

package/node/deprecations/speed-dial-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 _speedDialProps.default;
+  }
+});
+var _speedDialProps = _interopRequireDefault(require("./speed-dial-props"));

package/node/deprecations/speed-dial-props/speed-dial-props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _movePropIntoSlots = _interopRequireDefault(require("../utils/movePropIntoSlots"));
+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, _movePropIntoSlots.default)(j, {
+    root,
+    componentName: 'SpeedDial',
+    propName: 'TransitionComponent',
+    slotName: 'transition'
+  });
+  (0, _movePropIntoSlotProps.default)(j, {
+    root,
+    componentName: 'SpeedDial',
+    propName: 'TransitionProps',
+    slotName: 'transition'
+  });
+  return root.toSource(printOptions);
+}

package/node/deprecations/speed-dial-props/test-cases/actual.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _SpeedDial = _interopRequireDefault(require("@mui/material/SpeedDial"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SpeedDial, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    root: 'div'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SpeedDial, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: (0, _extends2.default)({}, outerSlots)
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  TransitionComponent: ComponentTransition,
+  TransitionProps: CustomTransitionProps,
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiSpeedDial, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps
+});

package/node/deprecations/speed-dial-props/test-cases/expected.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _SpeedDial = _interopRequireDefault(require("@mui/material/SpeedDial"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SpeedDial, {
+  slots: {
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  slots: {
+    root: 'div',
+    transition: CustomTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SpeedDial, {
+  slots: (0, _extends2.default)({}, outerSlots, {
+    transition: CustomTransition
+  }),
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeedDial.default, {
+  slots: {
+    root: 'div',
+    transition: SlotTransition
+  },
+  slotProps: {
+    transition: CustomTransitionProps
+  }
+});
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiSpeedDial, {
+  TransitionComponent: CustomTransition,
+  TransitionProps: CustomTransitionProps
+});

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

@@ -0,0 +1,33 @@
+"use strict";
+
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps
+    }
+  }
+});
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div'
+      }
+    }
+  }
+});
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div',
+        transition: SlotTransition
+      }
+    }
+  }
+});

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

@@ -0,0 +1,40 @@
+"use strict";
+
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    }
+  }
+});
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: CustomTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    }
+  }
+});
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: SlotTransition
+      },
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    }
+  }
+});

package/node/util/getReturnExpression.js

@@ -0,0 +1,20 @@
+"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)) {
+    var _body$find;
+    return (_body$find = body.find(statement => statement.type === 'ReturnStatement')) == null ? void 0 : _body$find.argument;
+  }
+  return body;
+}