@mui/codemod 5.15.8 → 5.15.10

package/README.md

@@ -1,12 +1,12 @@
 # @mui/codemod
 
-> Codemod scripts for MUI
+> Codemod scripts for Material UI, Base UI, MUI System, Joy UI.
 
 [![npm version](https://img.shields.io/npm/v/@mui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/codemod)
 [![npm downloads](https://img.shields.io/npm/dm/@mui/codemod.svg?style=flat-square)](https://www.npmjs.com/package/@mui/codemod)
 
 This repository contains a collection of codemod scripts based for use with
-[jscodeshift](https://github.com/facebook/jscodeshift) that help update MUI APIs.
+[jscodeshift](https://github.com/facebook/jscodeshift) that help update the APIs.
 
 ## Setup & run
 
@@ -80,10 +80,10 @@ A combination of all deprecations.
 
 ```diff
  <Accordion
--    TransitionComponent={CustomTransition}
--    TransitionProps={{ unmountOnExit: true }}
-+    slots={{ transition: CustomTransition }}
-+    slotProps={{ transition: { unmountOnExit: true } }}
+-  TransitionComponent={CustomTransition}
+-  TransitionProps={{ unmountOnExit: true }}
++  slots={{ transition: CustomTransition }}
++  slotProps={{ transition: { unmountOnExit: true } }}
  />
 ```
 
@@ -91,6 +91,35 @@ A combination of all deprecations.
 npx @mui/codemod@latest deprecations/accordion-props <path>
 ```
 
+#### `avatar-props`
+
+```diff
+ <Avatar
+-  imgProps={{
+-    onError: () => {},
+-    onLoad: () => {},
++  slotProps={{
++    img: {
++      onError: () => {},
++      onLoad: () => {},
++    }
+   }}
+ />;
+```
+
+#### `divider-props`
+
+```diff
+ <Divider
+-  light
++  sx={{opacity: "0.6"}}
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/divider-props <path>
+```
+
 ### v5.0.0
 
 #### `base-use-named-exports`
@@ -102,10 +131,10 @@ See https://github.com/mui/material-ui/issues/21862 for more context.
 This codemod updates the import and re-export statements.
 
 ```diff
--  import BaseButton from '@mui/base/Button';
-+  import { Button as BaseButton } from '@mui/base/Button';
--  export { default as BaseSlider } from '@mui/base/Slider';
-+  export { Slider as BaseSlider } from '@mui/base/Slider';
+-import BaseButton from '@mui/base/Button';
+-export { default as BaseSlider } from '@mui/base/Slider';
++import { Button as BaseButton } from '@mui/base/Button';
++export { Slider as BaseSlider } from '@mui/base/Slider';
 ```
 
 ```bash
@@ -117,8 +146,8 @@ npx @mui/codemod@latest v5.0.0/base-use-named-exports <path>
 The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers.
 
 ```diff
--  <Input component='a' href='url' />;
-+  <Input slots={{ root: 'a' }} href='url' />;
+-<Input component='a' href='url' />;
++<Input slots={{ root: 'a' }} href='url' />;
 ```
 
 ```bash
@@ -132,8 +161,8 @@ Remove `component` prop from all Base UI components by transferring its value i
 This change only affects Base UI components.
 
 ```diff
--  <Input component={CustomRoot} />
-+  <Input slots={{ root: CustomRoot }} />
+-<Input component={CustomRoot} />
++<Input slots={{ root: CustomRoot }} />
 ```
 
 ```bash
@@ -145,10 +174,10 @@ npx @mui/codemod@latest v5.0.0/base-remove-component-prop <path>
 Updates the names of the CSS variables of the Joy UI components to adapt to the new naming standards of the CSS variables for components.
 
 ```diff
--  <List sx={{ py: 'var(--List-divider-gap)' }}>
-+  <List sx={{ py: 'var(--ListDivider-gap)' }}>
--  <Switch sx={{ '--Switch-track-width': '40px' }}>
-+  <Switch sx={{ '--Switch-trackWidth': '40px' }}>
+-<List sx={{ py: 'var(--List-divider-gap)' }}>
+-<Switch sx={{ '--Switch-track-width': '40px' }}>
++<List sx={{ py: 'var(--ListDivider-gap)' }}>
++<Switch sx={{ '--Switch-trackWidth': '40px' }}>
 ```
 
 ```bash
@@ -160,8 +189,8 @@ npx @mui/codemod@latest v5.0.0/rename-css-variables <path>
 Updates the sources of the imports of the Base UI hooks to adapt to the new directories of the hooks.
 
 ```diff
--  import { useBadge } from '@mui/base/BadgeUnstyled';
-+  import useBadge from '@mui/base/useBadge';
+-import { useBadge } from '@mui/base/BadgeUnstyled';
++import useBadge from '@mui/base/useBadge';
 ```
 
 ```bash
@@ -283,8 +312,8 @@ This change only affects Joy UI components.
 ```diff
  <Autocomplete
 -  components={{ listbox: CustomListbox }}
-+  slots={{ listbox: CustomListbox }}
 -  componentsProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
++  slots={{ listbox: CustomListbox }}
 +  slotProps={{ root: { className: 'root' }, listbox: { 'data-testid': 'listbox' } }}
  />;
 ```
@@ -488,8 +517,8 @@ This change only affects Base UI components.
 ```diff
  <BadgeUnstyled
 -  components={{ Root, Badge: CustomBadge }}
-+  slots={{ root: Root, badge: CustomBadge }}
 -  componentsProps={{ root: { className: 'root' }, badge: { 'data-testid': 'badge' } }}
++  slots={{ root: Root, badge: CustomBadge }}
 +  slotProps={{ root: { className: 'root' }, badge: { 'data-testid': 'badge' } }}
  />;
 ```

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

@@ -5,12 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = deprecationsAll;
-var _accordionProps = _interopRequireDefault(require("../accordion-props/accordion-props"));
+var _accordionProps = _interopRequireDefault(require("../accordion-props"));
+var _avatarProps = _interopRequireDefault(require("../avatar-props"));
+var _dividerProps = _interopRequireDefault(require("../divider-props"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
 function deprecationsAll(file, api, options) {
   file.source = (0, _accordionProps.default)(file, api, options);
+  file.source = (0, _avatarProps.default)(file, api, options);
+  file.source = (0, _dividerProps.default)(file, api, options);
   return file.source;
 }

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _findComponentJSX = _interopRequireDefault(require("../../util/findComponentJSX"));
+var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
+var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
+/**
+ * @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: 'Avatar'
+  }, elementPath => {
+    const index = elementPath.node.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'imgProps');
+    if (index !== -1) {
+      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
+      let hasNode = false;
+      elementPath.node.openingElement.attributes.forEach(attr => {
+        var _attr$name;
+        if (((_attr$name = attr.name) == null ? void 0 : _attr$name.name) === 'slotProps') {
+          hasNode = true;
+          (0, _assignObject.default)(j, {
+            target: attr,
+            key: 'img',
+            expression: removed[0].value.expression
+          });
+        }
+      });
+      if (!hasNode) {
+        (0, _appendAttribute.default)(j, {
+          target: elementPath.node,
+          attributeName: 'slotProps',
+          expression: j.objectExpression([j.objectProperty(j.identifier('img'), removed[0].value.expression)])
+        });
+      }
+    }
+  });
+  root.find(j.ObjectProperty, {
+    key: {
+      name: 'imgProps'
+    }
+  }).forEach(path => {
+    var _path$parent;
+    if (((_path$parent = path.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.parent) == null || (_path$parent = _path$parent.node.key) == null ? void 0 : _path$parent.name) === 'MuiAvatar') {
+      path.replace(j.property('init', j.identifier('slotProps'), j.objectExpression([j.objectProperty(j.identifier('img'), path.node.value)])));
+    }
+  });
+  return root.toSource(printOptions);
+}

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

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+  imgProps: {
+    onError: () => {},
+    onLoad: () => {}
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+  imgProps: {
+    onError: () => {},
+    onLoad: () => {}
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAvatar, {
+  imgProps: {
+    onError: () => {},
+    onLoad: () => {}
+  }
+});

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+  slotProps: {
+    img: {
+      onError: () => {},
+      onLoad: () => {}
+    }
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+  slotProps: {
+    img: {
+      onError: () => {},
+      onLoad: () => {}
+    }
+  }
+});
+
+// should skip non MUI components
+/*#__PURE__*/(0, _jsxRuntime.jsx)(NonMuiAvatar, {
+  imgProps: {
+    onError: () => {},
+    onLoad: () => {}
+  }
+});

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

@@ -0,0 +1,12 @@
+"use strict";
+
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      imgProps: {
+        onError: () => {},
+        onLoad: () => {}
+      }
+    }
+  }
+});

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

@@ -0,0 +1,14 @@
+"use strict";
+
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      slotProps: {
+        img: {
+          onError: () => {},
+          onLoad: () => {}
+        }
+      }
+    }
+  }
+});

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

@@ -0,0 +1,68 @@
+"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: 'Divider'
+  }, elementPath => {
+    elementPath.node.openingElement.attributes = elementPath.node.openingElement.attributes.filter(attr => {
+      if (attr.type === 'JSXAttribute' && attr.name.name === 'light') {
+        return false;
+      }
+      return true;
+    });
+    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')
+        });
+      }
+    }
+  });
+  root.find(j.ObjectProperty, {
+    key: {
+      name: 'MuiDivider'
+    }
+  }).forEach(path => {
+    const defaultPropsObject = path.value.value.properties.find(key => key.key.name === 'defaultProps');
+    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')));
+      }
+    }
+  });
+  return root.toSource(printOptions);
+}

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

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  light: true,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  light: true,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  light: false,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  light: false,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  light: light,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  light: light,
+  className: "test"
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  light: true,
+  sx: {
+    opacity: '0.7'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  light: true,
+  sx: {
+    bgcolor: 'black'
+  }
+});

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  className: "test",
+  sx: {
+    opacity: "0.6"
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+  sx: {
+    opacity: '0.7'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
+  sx: {
+    bgcolor: 'black',
+    opacity: "0.6"
+  }
+});

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

@@ -0,0 +1,47 @@
+"use strict";
+
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light: true
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light: true,
+      className: 'my-class'
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light,
+      className: 'my-class'
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light,
+      className: 'my-class',
+      sx: {
+        opacity: '0.7'
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      light,
+      className: 'my-class',
+      sx: {
+        bgcolor: 'black'
+      }
+    }
+  }
+});

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

@@ -0,0 +1,52 @@
+"use strict";
+
+fn({
+  MuiDivider: {
+    defaultProps: {
+      sx: {
+        opacity: "0.6"
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class',
+      sx: {
+        opacity: "0.6"
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class',
+      sx: {
+        opacity: "0.6"
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class',
+      sx: {
+        opacity: '0.7'
+      }
+    }
+  }
+});
+fn({
+  MuiDivider: {
+    defaultProps: {
+      className: 'my-class',
+      sx: {
+        bgcolor: 'black',
+        opacity: "0.6"
+      }
+    }
+  }
+});

package/package.json

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