@mui/codemod 5.11.0 → 5.11.6

package/README.md

@@ -62,6 +62,82 @@ npx @mui/codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"
 
 ### v5.0.0
 
+#### `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`
+
+This change only affects Joy UI components.
+
+```diff
+-import TextField from '@mui/joy/TextField';
++import FormControl from '@mui/joy/FormControl';
++import FormLabel from '@mui/joy/FormLabel';
++import FormHelperText from '@mui/joy/FormHelperText';
++import Input from '@mui/joy/Input';
+
+-<TextField
+-  id="Id"
+-  label="Label"
+-  placeholder="Placeholder"
+-  helperText="Help!"
+-  name="Name"
+-  type="tel"
+-  autoComplete="on"
+-  autoFocus
+-  error
+-  required
+-  fullWidth
+-  defaultValue="DefaultValue"
+-  size="sm"
+-  color="primary"
+-  variant="outlined"
+-/>
++<FormControl
++  id="Id"
++  required
++  size="sm"
++  color="primary">
++  <FormLabel>
++    Label
++  </FormLabel>
++  <JoyInput
++    placeholder="Placeholder"
++    name="Name"
++    type="tel"
++    autoComplete="on"
++    autoFocus
++    error
++    fullWidth
++    defaultValue="DefaultValue"
++    variant="outlined" />
++  <FormHelperText id="Id-helper-text">
++    Help!
++  </FormHelperText>
++</FormControl>
+```
+
+```sh
+npx @mui/codemod v5.0.0/joy-text-field-to-input <path>
+```
+
 #### `joy-rename-components-to-slots`
 
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.

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-text-field-to-input.js

@@ -0,0 +1,152 @@
+"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;
+    if (sourceVal === '@mui/joy/TextField') {
+      node.source.value = '@mui/joy/Input';
+    }
+    return ['@mui/joy',
+    // Process only Joy UI components
+    '@mui/joy/TextField' // Filter default imports of components other than TextField
+    ].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) === 'TextField' || elementNode.type === 'ImportDefaultSpecifier') {
+        var _elementNode$imported2;
+        if (((_elementNode$imported2 = elementNode.imported) == null ? void 0 : _elementNode$imported2.name) === 'TextField') {
+          elementNode.imported.name = 'Input';
+        }
+        let newElementName;
+        root.findJSXElements(elementNode.local.name).forEach(elementPath => {
+          if (elementPath.node.type !== 'JSXElement') {
+            return;
+          }
+          newElementName = elementPath.node.openingElement.name.name.replace(/TextField/gm, 'Input');
+          elementPath.node.openingElement.name.name = newElementName;
+          const formControlAttributeNodes = [];
+          const formLabelAttributeNodes = [];
+          const formHelperTextAttributeNodes = [];
+          const inputAttributeNodes = [];
+          let formLabelValue;
+          let formHelperTextValue;
+          elementPath.node.openingElement.attributes.forEach(attributeNode => {
+            var _attributeNode$value$, _attributeNode$value$2;
+            if (attributeNode.type !== 'JSXAttribute') {
+              return;
+            }
+            const attributeName = attributeNode.name.name;
+            switch (attributeName) {
+              case 'size':
+              case 'color':
+              case 'required':
+                formControlAttributeNodes.push(attributeNode);
+                break;
+              case 'slotProps':
+                if (((_attributeNode$value$ = attributeNode.value.expression) == null ? void 0 : _attributeNode$value$.type) === 'ObjectExpression') {
+                  attributeNode.value.expression.properties.forEach(propNode => {
+                    if (propNode.value.type !== 'ObjectExpression') {
+                      return;
+                    }
+                    propNode.value.properties.forEach(prop => {
+                      const key = prop.key.value;
+                      const newAttributeNode = j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(prop.value));
+                      switch (propNode.key.name) {
+                        case 'root':
+                          formControlAttributeNodes.push(newAttributeNode);
+                          break;
+                        case 'label':
+                          formLabelAttributeNodes.push(newAttributeNode);
+                          break;
+                        case 'input':
+                          inputAttributeNodes.push(newAttributeNode);
+                          break;
+                        case 'helperText':
+                          formHelperTextAttributeNodes.push(newAttributeNode);
+                          break;
+                        default:
+                      }
+                    });
+                  });
+                }
+                break;
+              case 'slots':
+                if (((_attributeNode$value$2 = attributeNode.value.expression) == null ? void 0 : _attributeNode$value$2.type) === 'ObjectExpression') {
+                  attributeNode.value.expression.properties.forEach(propNode => {
+                    const newAttributeNode = j.jsxAttribute(j.jsxIdentifier('component'), j.jsxExpressionContainer(propNode.value));
+                    switch (propNode.key.name) {
+                      case 'root':
+                        formControlAttributeNodes.push(newAttributeNode);
+                        break;
+                      case 'label':
+                        formLabelAttributeNodes.push(newAttributeNode);
+                        break;
+                      case 'input':
+                        inputAttributeNodes.push(newAttributeNode);
+                        break;
+                      case 'helperText':
+                        formHelperTextAttributeNodes.push(newAttributeNode);
+                        break;
+                      default:
+                    }
+                  });
+                }
+                break;
+              case 'label':
+                formLabelValue = attributeNode.value.value;
+                break;
+              case 'helperText':
+                formHelperTextValue = attributeNode.value.value;
+                break;
+              case 'id':
+                formControlAttributeNodes.push(attributeNode);
+                formLabelAttributeNodes.push(j.jsxAttribute(j.jsxIdentifier('id'), j.literal(`${attributeNode.value.value}-label`)));
+                formHelperTextAttributeNodes.push(j.jsxAttribute(j.jsxIdentifier('id'), j.literal(`${attributeNode.value.value}-helper-text`)));
+                break;
+              default:
+            }
+            if (!['size', 'color', 'slotProps', 'slots', 'label', 'helperText', 'id', 'required'].includes(attributeName)) {
+              inputAttributeNodes.push(attributeNode);
+            }
+          });
+          elementPath.node.openingElement.attributes = inputAttributeNodes;
+          if (formControlAttributeNodes.length > 0 || formLabelValue || formHelperTextValue) {
+            const formControlIdentifier = j.jsxIdentifier('FormControl');
+            const childrenOfFormControl = [];
+            if (formLabelValue) {
+              const formLabelIdentifier = j.jsxIdentifier('FormLabel');
+              const formLabelElement = j.jsxElement(j.jsxOpeningElement(formLabelIdentifier, formLabelAttributeNodes), j.jsxClosingElement(formLabelIdentifier), [j.jsxText('\n'), j.jsxText(formLabelValue), j.jsxText('\n')]);
+              childrenOfFormControl.push(formLabelElement, j.jsxText('\n'));
+            }
+            childrenOfFormControl.push(elementPath.node, j.jsxText('\n'));
+            if (formHelperTextValue) {
+              const formHelperTextIdentifier = j.jsxIdentifier('FormHelperText');
+              const formHelperTextElement = j.jsxElement(j.jsxOpeningElement(formHelperTextIdentifier, formHelperTextAttributeNodes), j.jsxClosingElement(formHelperTextIdentifier), [j.jsxText('\n'), j.jsxText(formHelperTextValue), j.jsxText('\n')]);
+              childrenOfFormControl.push(formHelperTextElement);
+            }
+            elementPath.replace(j.jsxElement(j.jsxOpeningElement(formControlIdentifier, formControlAttributeNodes), j.jsxClosingElement(formControlIdentifier), [j.jsxText('\n'), ...childrenOfFormControl, j.jsxText('\n')]));
+          }
+        });
+        if (newElementName) {
+          elementNode.local.name = newElementName;
+        }
+      }
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _TextField = _interopRequireDefault(require("@mui/joy/TextField"));
+var _TextField2 = _interopRequireDefault(require("@mui/material/TextField"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy TextField
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.TextField, {
+    slotProps: {
+      root: {
+        ['aria-hidden']: false
+      },
+      label: {
+        ['aria-hidden']: false
+      },
+      input: {
+        ['aria-hidden']: false
+      },
+      helperText: {
+        ['aria-hidden']: false
+      }
+    },
+    slots: {
+      root: 'span',
+      label: 'span',
+      input: 'span',
+      helperText: 'span'
+    },
+    id: "Id",
+    label: "Label",
+    placeholder: "Placeholder",
+    helperText: "Help!",
+    name: "Name",
+    type: "button",
+    autoComplete: "on",
+    autoFocus: true,
+    error: true,
+    required: true,
+    fullWidth: true,
+    defaultValue: "DefaultValue",
+    size: "sm",
+    color: "primary",
+    variant: "outlined"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField2.default, {})]
+});

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _joy = require("@mui/joy");
+var _Input = _interopRequireDefault(require("@mui/joy/Input"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _jsxRuntime = require("react/jsx-runtime");
+// the codemod should transform only Joy TextField
+
+/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FormControl, {
+    "aria-hidden": false,
+    component: 'span',
+    id: "Id",
+    required: true,
+    size: "sm",
+    color: "primary",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FormLabel, {
+      "aria-hidden": false,
+      component: 'span',
+      id: "Id-label",
+      children: "Label"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Input, {
+      "aria-hidden": false,
+      component: 'span',
+      placeholder: "Placeholder",
+      name: "Name",
+      type: "button",
+      autoComplete: "on",
+      autoFocus: true,
+      error: true,
+      fullWidth: true,
+      defaultValue: "DefaultValue",
+      variant: "outlined"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FormHelperText, {
+      "aria-hidden": false,
+      component: 'span',
+      id: "Id-helper-text",
+      children: "Help!"
+    })]
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {})]
+});

package/package.json

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