@mui/codemod 6.0.0-alpha.12 → 6.0.0-alpha.14

package/README.md

@@ -1759,6 +1759,36 @@ However, it has some **limitations**:
   }));
   ```
 
+#### `grid-v2-props`
+
+```bash
+npx @mui/codemod@next v6.0.0/grid-v2-props <path>
+```
+
+Updates the usage of the `Unstable_Grid` (Grid v2) component to have the same API as the `PigmentGrid`.
+
+```diff
+ <Grid
+-   xs={12}
+-   sm={6}
+-   xsOffset={2}
+-   smOffset={3}
++   size={{ xs: 12, sm: 6 }}
++   offset={{ xs: 2, sm: 3 }}
+ />
+```
+
+You can provide the theme breakpoints via options, for example, `--jscodeshift='--muiBreakpoints=mobile,desktop'`, to use your custom breakpoints in the transformation.
+
+```bash
+npx @mui/codemod@next v6.0.0/grid-v2-props <path> --jscodeshift='--muiBreakpoints=mobile,desktop'
+```
+
+```diff
+- <Grid mobile={12} mobileOffset={2} desktop={6} desktopOffset={4} >
++ <Grid size={{ mobile: 12, desktop: 6 }} offset={{ mobile: 2, desktop: 4 }} >
+```
+
 ### v5.0.0
 
 #### `base-use-named-exports`

package/node/v5.0.0/theme-spacing.test/large-actual.js

@@ -24,7 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles")
 var _styles = require("@mui/material/styles");
 var _config = require("docs/config");
 var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
-var _i18n = require("docs/src/modules/utils/i18n");
+var _i18n = require("@mui/docs/i18n");
 var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
 var _getUrlProduct = _interopRequireDefault(require("docs/src/modules/utils/getUrlProduct"));
 var _jsxRuntime = require("react/jsx-runtime");

package/node/v5.0.0/theme-spacing.test/large-expected.js

@@ -24,7 +24,7 @@ var _GlobalStyles = _interopRequireDefault(require("@mui/material/GlobalStyles")
 var _styles = require("@mui/material/styles");
 var _config = require("docs/config");
 var _Link = _interopRequireDefault(require("docs/src/modules/components/Link"));
-var _i18n = require("docs/src/modules/utils/i18n");
+var _i18n = require("@mui/docs/i18n");
 var _useLazyCSS = _interopRequireDefault(require("docs/src/modules/utils/useLazyCSS"));
 var _getUrlProduct = _interopRequireDefault(require("docs/src/modules/utils/getUrlProduct"));
 var _jsxRuntime = require("react/jsx-runtime");

package/node/v6.0.0/grid-v2-props/grid-v2-props.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = gridV2Props;
+const possibleDefaultImports = ['@mui/material/Unstable_Grid2', '@mui/system/Unstable_Grid', '@mui/joy/Grid'];
+const possibleNamedImports = {
+  '@mui/material': 'Unstable_Grid2',
+  '@mui/system': 'Unstable_Grid',
+  '@mui/joy': 'Grid'
+};
+const defaultBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function gridV2Props(file, api, options) {
+  var _file$path, _file$path2, _options$muiBreakpoin;
+  if ((_file$path = file.path) != null && _file$path.endsWith('.json') || (_file$path2 = file.path) != null && _file$path2.endsWith('.d.ts')) {
+    return file.source;
+  }
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const breakpoints = ((_options$muiBreakpoin = options.muiBreakpoints) == null ? void 0 : _options$muiBreakpoin.split(',')) || defaultBreakpoints;
+  const printOptions = options.printOptions;
+  const gridLocalNames = [];
+  root.find(j.ImportDeclaration, decl => possibleDefaultImports.includes(decl.source.value)).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportDefaultSpecifier') {
+        gridLocalNames.push(spec.local.name);
+      }
+    });
+  });
+  root.find(j.ImportDeclaration, decl => Object.keys(possibleNamedImports).includes(decl.source.value)).forEach(decl => {
+    decl.node.specifiers.forEach(spec => {
+      if (spec.type === 'ImportSpecifier') {
+        if (possibleNamedImports[decl.node.source.value] === spec.imported.name) {
+          gridLocalNames.push(spec.local.name);
+        }
+      }
+    });
+  });
+  root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        name: name => gridLocalNames.includes(name)
+      }
+    }
+  }).forEach(el => {
+    const size = j.objectExpression([]);
+    const spreadProps = [];
+    const attributesToPrune = [];
+    el.node.openingElement.attributes.forEach(attr => {
+      if (attr.type === 'JSXSpreadAttribute') {
+        spreadProps.push(attr);
+      }
+    });
+    const breakpointNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && breakpoints.includes(path.node.name.name));
+    breakpointNodes.nodes().forEach(node => {
+      const breakpoint = node.name.name;
+      const nodeValue = node.value;
+      let value;
+      if (nodeValue === null) {
+        value = j.stringLiteral('grow');
+      } else if (nodeValue.type === 'JSXExpressionContainer') {
+        if (nodeValue.expression.value === true) {
+          value = j.stringLiteral('grow');
+        } else {
+          value = nodeValue.expression;
+        }
+      } else {
+        value = nodeValue;
+      }
+      size.properties.push(j.property('init', j.identifier(breakpoint), value));
+    });
+    spreadProps.forEach(spreadProp => {
+      const spreadPropArgument = spreadProp.argument;
+      if (spreadPropArgument.type === 'ObjectExpression') {
+        const propertiesToPrune = [];
+        spreadPropArgument.properties.forEach(property => {
+          if (breakpoints.includes(property.key.name)) {
+            size.properties.push(j.property('init', property.key, property.value));
+            propertiesToPrune.push(property.key.name);
+          }
+        });
+        spreadPropArgument.properties = spreadPropArgument.properties.filter(prop => !propertiesToPrune.includes(prop.key.name));
+        if (spreadPropArgument.properties.length === 0) {
+          attributesToPrune.push(spreadProp);
+        }
+      }
+    });
+    if (size.properties.length) {
+      let sizePropValue = size;
+      if (size.properties.length === 1 && size.properties[0].key.name === 'xs') {
+        sizePropValue = size.properties[0].value;
+      }
+      if (sizePropValue.type !== 'StringLiteral') {
+        sizePropValue = j.jsxExpressionContainer(sizePropValue);
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('size'), sizePropValue));
+    }
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
+      var _attr$name;
+      return !breakpoints.includes(attr == null || (_attr$name = attr.name) == null ? void 0 : _attr$name.name);
+    });
+    const offset = j.objectExpression([]);
+    const offsetNodes = j(el).find(j.JSXAttribute).filter(path => path.parent.parent.node === el.node && path.node.name.name.endsWith('Offset') && breakpoints.includes(path.node.name.name.replace('Offset', '')));
+    offsetNodes.nodes().forEach(node => {
+      const breakpoint = node.name.name.replace('Offset', '');
+      const value = node.value.type === 'JSXExpressionContainer' ? node.value.expression : node.value;
+      offset.properties.push(j.property('init', j.identifier(breakpoint), value));
+    });
+    spreadProps.forEach(spreadProp => {
+      const spreadPropArgument = spreadProp.argument;
+      if (spreadPropArgument.type === 'ObjectExpression') {
+        const propertiesToPrune = [];
+        spreadPropArgument.properties.forEach(property => {
+          const breakpoint = property.key.name.replace('Offset', '');
+          if (property.key.name.endsWith('Offset') && breakpoints.includes(breakpoint)) {
+            offset.properties.push(j.property('init', j.identifier(breakpoint), property.value));
+            propertiesToPrune.push(property.key.name);
+          }
+        });
+        spreadPropArgument.properties = spreadPropArgument.properties.filter(prop => !propertiesToPrune.includes(prop.key.name));
+        if (spreadPropArgument.properties.length === 0) {
+          attributesToPrune.push(spreadProp);
+        }
+      }
+    });
+    if (offset.properties.length) {
+      let offsetPropValue = offset;
+      if (offset.properties.length === 1 && offset.properties[0].key.name === 'xs') {
+        offsetPropValue = offset.properties[0].value;
+      }
+      if (offsetPropValue.type !== 'StringLiteral') {
+        offsetPropValue = j.jsxExpressionContainer(offsetPropValue);
+      }
+      el.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier('offset'), offsetPropValue));
+    }
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => {
+      var _attr$name2;
+      return !breakpoints.includes(attr == null || (_attr$name2 = attr.name) == null ? void 0 : _attr$name2.name.replace('Offset', ''));
+    });
+    el.node.openingElement.attributes = el.node.openingElement.attributes.filter(attr => !attributesToPrune.includes(attr));
+  });
+  return root.toSource(printOptions);
+}

package/node/v6.0.0/grid-v2-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 _gridV2Props.default;
+  }
+});
+var _gridV2Props = _interopRequireDefault(require("./grid-v2-props"));

package/node/v6.0.0/grid-v2-props/test-cases/actual.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _Unstable_Grid2 = _interopRequireDefault(require("@mui/system/Unstable_Grid"));
+var _Grid = _interopRequireDefault(require("@mui/joy/Grid"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _joy = require("@mui/joy");
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms on all the possible imports
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid2.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Unstable_Grid2, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Unstable_Grid, {
+  xs: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  xs: 2
+});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 10
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: true,
+  sm: "auto",
+  md: 2,
+  lg: true,
+  xl: false
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2,
+  smOffset: 4,
+  mdOffset: 6,
+  lgOffset: 8,
+  xlOffset: 10
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xsOffset: 2,
+  smOffset: "auto"
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  xs: 2,
+  sm: 4,
+  xsOffset: 0,
+  smOffset: 2
+});
+
+// Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  xs: 2
+});

package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  customXs: 2,
+  customSm: 4,
+  customMd: 6
+});
+
+// Transforms custom breakpoints offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  customXsOffset: 2,
+  customSmOffset: 4,
+  customMdOffset: 6
+});

package/node/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms custom breakpoints
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }
+});
+
+// Transforms custom breakpoints offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    customXs: 2,
+    customSm: 4,
+    customMd: 6
+  }
+});

package/node/v6.0.0/grid-v2-props/test-cases/expected.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _Unstable_Grid = _interopRequireDefault(require("@mui/material/Unstable_Grid2"));
+var _Unstable_Grid2 = _interopRequireDefault(require("@mui/system/Unstable_Grid"));
+var _Grid = _interopRequireDefault(require("@mui/joy/Grid"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _joy = require("@mui/joy");
+var _jsxRuntime = require("react/jsx-runtime");
+// Transforms on all the possible imports
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid2.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Unstable_Grid2, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Unstable_Grid, {
+  size: 2
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_joy.Grid, {
+  size: 2
+});
+
+// Transforms responsive sizes
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }
+});
+
+// Transforms all the possible size values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: "grow",
+    sm: "auto",
+    md: 2,
+    lg: "grow",
+    xl: false
+  }
+});
+
+// Doesn't add jsx object expression for single string values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: "auto"
+});
+
+// Transforms offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: 2
+});
+
+// Transforms responsive offset
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10
+  }
+});
+
+// Transforms all the possible offset values
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  offset: {
+    xs: 2,
+    sm: "auto"
+  }
+});
+
+// Transforms spread props
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Grid.default, {
+  size: {
+    xs: 2,
+    sm: 4
+  },
+  offset: {
+    xs: 0,
+    sm: 2
+  }
+});
+
+// Doesn't transform Grid v1
+/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+  xs: 2
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "6.0.0-alpha.12",
+  "version": "6.0.0-alpha.14",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -27,9 +27,9 @@
     "@babel/core": "^7.24.7",
     "@babel/runtime": "^7.24.7",
     "@babel/traverse": "^7.24.7",
-    "jscodeshift": "^0.16.0",
+    "jscodeshift": "^0.16.1",
     "jscodeshift-add-imports": "^1.0.10",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-cli": "^11.0.0",
     "yargs": "^17.7.2"
   },