@mui/x-codemod 7.21.0 → 8.0.0-alpha.1

package/README.md

@@ -13,7 +13,7 @@ This repository contains a collection of codemod scripts based for use with
 <!-- #default-branch-switch -->
 
 ```bash
-npx @mui/x-codemod@latest <codemod> <paths...>
+npx @mui/x-codemod@next <codemod> <paths...>
 
 Applies a `@mui/x-codemod` to the specified paths
 
@@ -29,8 +29,8 @@ Options:
   --jscodeshift Pass options directly to jscodeshift                  [array]
 
 Examples:
-  npx @mui/x-codemod@latest v7.0.0/preset-safe src
-  npx @mui/x-codemod@latest v6.0.0/component-rename-prop src --
+  npx @mui/x-codemod@next v7.0.0/preset-safe src
+  npx @mui/x-codemod@next v6.0.0/component-rename-prop src --
   --component=DataGrid --from=prop --to=newProp
 ```
 
@@ -40,9 +40,9 @@ To pass more options directly to jscodeshift, use `--jscodeshift=...`. For examp
 
 ```bash
 // single option
-npx @mui/x-codemod@latest --jscodeshift=--run-in-band
+npx @mui/x-codemod@next --jscodeshift=--run-in-band
 // multiple options
-npx @mui/x-codemod@latest --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
+npx @mui/x-codemod@next --jscodeshift=--cpus=1 --jscodeshift=--print --jscodeshift=--dry --jscodeshift=--verbose=2
 ```
 
 See all available options [here](https://github.com/facebook/jscodeshift#usage-cli).
@@ -53,9 +53,127 @@ Options to [recast](https://github.com/benjamn/recast)'s printer can be provided
 through jscodeshift's `printOptions` command line argument
 
 ```bash
-npx @mui/x-codemod@latest <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
+npx @mui/x-codemod@next <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
 ```
 
+## v8.0.0
+
+### 🚀 `preset-safe` for v8.0.0
+
+A combination of all important transformers for migrating v7 to v8.
+⚠️ This codemod should be run only once.
+It runs codemods for all MUI X packages (Data Grid, Date and Time Pickers, Tree View, and Charts).
+To run codemods for a specific package, refer to the respective section.
+
+```bash
+npx @mui/x-codemod@latest v8.0.0/preset-safe <path|folder>
+```
+
+The corresponding sub-sections are listed below
+
+- [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v800)
+- [`preset-safe-for-charts`](#preset-safe-for-charts-v800)
+
+### Tree View codemods
+
+#### `preset-safe` for tree view v8.0.0
+
+The `preset-safe` codemods for tree view.
+
+```bash
+npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`rename-tree-view-simple-tree-view`](#rename-tree-view-simple-tree-view)
+- [`rename-tree-item-2`](#rename-tree-item-2)
+
+#### `rename-tree-view-simple-tree-view`
+
+Renames the Tree View component to Simple Tree View
+
+```diff
+-import { TreeView } from '@mui/x-tree-view';
++import { SimpleTreeView } from '@mui/x-tree-view';
+
+-import { TreeView } from '@mui/x-tree-view/TreeView';
++import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+
+   return (
+-    <TreeView>
++    <SimpleTreeView>
+       <TreeItem itemId="1" label="First item" />
+-    </TreeView>
++    </SimpleTreeView>
+   );
+```
+
+#### `rename-tree-item-2`
+
+Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or utils like `useTreeItem2` or `TreeItem2Icon`).
+
+```diff
+-import { TreeItem2 } from '@mui/x-tree-view';
++import { TreeItem } from '@mui/x-tree-view';
+
+-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
++import { TreeItem } from '@mui/x-tree-view/TreeItem';
+```
+
+### Charts codemods
+
+#### `preset-safe` for charts v8.0.0
+
+The `preset-safe` codemods for charts.
+
+```bash
+npx @mui/x-codemod@latest v8.0.0/charts/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`rename-legend-to-slots-legend`](#rename-legend-to-slots-legend)
+- [`rename-responsive-chart-container`](#rename-responsive-chart-container)
+
+#### `rename-legend-to-slots-legend`
+
+Renames legend props to the corresponding slotProps.
+
+```diff
+  <LineChart
+-   legend={{ hiden: true}}
++   slotProps={{ legend: { hiden: true} }}
+  />
+```
+
+#### `rename-responsive-chart-container`
+
+Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartContainer` and `ChartContainerPro` which have the same behavior in v8.
+
+```diff
+- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+
+- <ResponsiveChartContainer>
++ <ChartContainer>
+   <BarPlot />
+- </ResponsiveChartContainer>
++ </ChartContainer>
+```
+
+:::warning
+If you imported both `ResponsiveChartContainer` and `ChartContainer` in the same file, you might end up with duplicated import.
+Verify the git diff to remove the duplicate.
+
+```diff
+ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
++ import { ChartContainer } from '@mui/x-charts/ChartContainer';
+```
+
+:::
+
 ## v7.0.0
 
 ### 🚀 `preset-safe` for v7.0.0
@@ -237,7 +355,7 @@ npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe <path|folder>
 
 The list includes these transformers
 
-- [`rename-tree-view-simple-tree-view`](#rename-tree-view-simple-tree-view)
+- [`rename-tree-view-simple-tree-view`](#rename-tree-view-simple-tree-view-1)
 - [`rename-use-tree-item`](#rename-use-tree-item)
 - [`rename-expansion-props`](#rename-expansion-props)
 - [`rename-selection-props`](#rename-selection-props)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "7.21.0",
+  "version": "8.0.0-alpha.1",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -25,11 +25,12 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/runtime": "^7.25.7",
-    "@babel/traverse": "^7.25.7",
-    "jscodeshift": "17.0.0",
-    "yargs": "^17.7.2"
+    "@babel/core": "^7.26.0",
+    "@babel/runtime": "^7.26.0",
+    "@babel/traverse": "^7.25.9",
+    "jscodeshift": "17.1.1",
+    "yargs": "^17.7.2",
+    "@mui/x-internals": "8.0.0-alpha.1"
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.12.0",

package/v8.0.0/charts/preset-safe/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameLegendToSlotsLegend = _interopRequireDefault(require("../rename-legend-to-slots-legend"));
+var _renameResponsiveChartContainer = _interopRequireDefault(require("../rename-responsive-chart-container"));
+function transformer(file, api, options) {
+  file.source = (0, _renameLegendToSlotsLegend.default)(file, api, options);
+  file.source = (0, _renameResponsiveChartContainer.default)(file, api, options);
+  return file.source;
+}

package/v8.0.0/charts/rename-legend-to-slots-legend/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _addComponentsSlots = require("../../../util/addComponentsSlots");
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const printOptions = options.printOptions;
+  const root = j(file.source);
+  root.find(j.ImportDeclaration).filter(({
+    node
+  }) => {
+    return typeof node.source.value === 'string' && node.source.value.startsWith('@mui/x-charts');
+  }).forEach(path => {
+    path.node.specifiers?.forEach(node => {
+      root.findJSXElements(node.local?.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        const legendProps = elementPath.node.openingElement.attributes?.find(elementNode => elementNode.type === 'JSXAttribute' && elementNode.name.name === 'legend');
+        if (!legendProps) {
+          // No legend props to manage
+          return;
+        }
+        const slotProps = elementPath.node.openingElement.attributes?.find(elementNode => elementNode.type === 'JSXAttribute' && elementNode.name.name === 'slotProps');
+        if (slotProps === null) {
+          // We create a new slotProps object
+          elementPath.node.openingElement.attributes?.push(j.jsxAttribute(j.jsxIdentifier('slotProps'), j.jsxExpressionContainer(j.objectExpression([
+          // @ts-ignore legend receives an object.
+          j.objectProperty(j.identifier('legend'), legendProps.value.expression)]))));
+        } else {
+          (0, _addComponentsSlots.transformNestedProp)(elementPath, 'slotProps', 'legend',
+          // @ts-ignore legend receives an object.
+          legendProps.value.expression, j);
+        }
+
+        // Remove the legend prop
+        j(elementPath).find(j.JSXAttribute).filter(a => a.value.name.name === 'legend').forEach(pathToRemove => {
+          j(pathToRemove).remove();
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}

package/v8.0.0/charts/rename-responsive-chart-container/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameImports = require("../../../util/renameImports");
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+    wrapColumn: 40
+  };
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-charts', '@mui/x-charts-pro'],
+    imports: [{
+      oldEndpoint: 'ResponsiveChartContainer',
+      newEndpoint: 'ChartContainer',
+      importsMapping: {
+        ResponsiveChartContainer: 'ChartContainer'
+      }
+    }, {
+      oldEndpoint: 'ResponsiveChartContainerPro',
+      newEndpoint: 'ChartContainerPro',
+      importsMapping: {
+        ResponsiveChartContainerPro: 'ChartContainerPro'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}

package/v8.0.0/pickers/preset-safe/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameAndMoveFieldValueType = _interopRequireDefault(require("../rename-and-move-field-value-type"));
+function transformer(file, api, options) {
+  file.source = (0, _renameAndMoveFieldValueType.default)(file, api, options);
+  return file.source;
+}

package/v8.0.0/pickers/rename-and-move-field-value-type/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameImports = require("../../../util/renameImports");
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-date-pickers', '@mui/x-date-pickers-pro'],
+    imports: [{
+      oldEndpoint: 'models',
+      importsMapping: {
+        FieldValueType: 'PickerValueType'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}

package/v8.0.0/preset-safe/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _presetSafe = _interopRequireDefault(require("../tree-view/preset-safe"));
+var _presetSafe2 = _interopRequireDefault(require("../charts/preset-safe"));
+function transformer(file, api, options) {
+  file.source = (0, _presetSafe.default)(file, api, options);
+  file.source = (0, _presetSafe2.default)(file, api, options);
+  return file.source;
+}

package/v8.0.0/tree-view/preset-safe/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameTreeViewSimpleTreeView = _interopRequireDefault(require("../rename-tree-view-simple-tree-view"));
+var _renameTreeItem = _interopRequireDefault(require("../rename-tree-item-2"));
+function transformer(file, api, options) {
+  file.source = (0, _renameTreeViewSimpleTreeView.default)(file, api, options);
+  file.source = (0, _renameTreeItem.default)(file, api, options);
+  return file.source;
+}

package/v8.0.0/tree-view/rename-tree-item-2/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameImports = require("../../../util/renameImports");
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+    wrapColumn: 40
+  };
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-tree-view', '@mui/x-tree-view-pro'],
+    imports: [{
+      oldEndpoint: 'TreeItem2',
+      newEndpoint: 'TreeItem',
+      importsMapping: {
+        TreeItem2: 'TreeItem',
+        TreeItem2Root: 'TreeItemRoot',
+        TreeItem2Content: 'TreeItemContent',
+        TreeItem2IconContainer: 'TreeItemIconContainer',
+        TreeItem2GroupTransition: 'TreeItemGroupTransition',
+        TreeItem2Checkbox: 'TreeItemCheckbox',
+        TreeItem2Label: 'TreeItemLabel',
+        TreeItem2Props: 'TreeItemProps',
+        TreeItem2Slots: 'TreeItemSlots',
+        TreeItem2SlotProps: 'TreeItemSlotProps'
+      }
+    }, {
+      oldEndpoint: 'useTreeItem2',
+      newEndpoint: 'useTreeItem',
+      importsMapping: {
+        useTreeItem2: 'useTreeItem',
+        unstable_useTreeItem2: 'useTreeItem',
+        UseTreeItem2Parameters: 'UseTreeItemParameters',
+        UseTreeItem2ReturnValue: 'UseTreeItemReturnValue',
+        UseTreeItem2Status: 'UseTreeItemStatus',
+        UseTreeItem2RootSlotOwnProps: 'UseTreeItemRootSlotOwnProps',
+        UseTreeItem2ContentSlotOwnProps: 'UseTreeItemContentSlotOwnProps',
+        UseTreeItem2LabelInputSlotOwnProps: 'UseTreeItemLabelInputSlotOwnProps',
+        UseTreeItem2LabelSlotOwnProps: 'UseTreeItemLabelSlotOwnProps',
+        UseTreeItem2CheckboxSlotOwnProps: 'UseTreeItemCheckboxSlotOwnProps',
+        UseTreeItem2IconContainerSlotOwnProps: 'UseTreeItemIconContainerSlotOwnProps',
+        UseTreeItem2GroupTransitionSlotOwnProps: 'UseTreeItemGroupTransitionSlotOwnProps',
+        UseTreeItem2DragAndDropOverlaySlotOwnProps: 'UseTreeItemDragAndDropOverlaySlotOwnProps'
+      }
+    }, {
+      oldEndpoint: 'TreeItem2Provider',
+      newEndpoint: 'TreeItemProvider',
+      importsMapping: {
+        TreeItem2Provider: 'TreeItemProvider',
+        TreeItem2ProviderProps: 'TreeItemProviderProps'
+      }
+    }, {
+      oldEndpoint: 'TreeItem2Icon',
+      newEndpoint: 'TreeItemIcon',
+      importsMapping: {
+        TreeItem2Icon: 'TreeItemIcon',
+        TreeItem2IconProps: 'TreeItemIconProps',
+        TreeItem2IconSlots: 'TreeItemIconSlots',
+        TreeItem2IconSlotProps: 'TreeItemIconSlotProps'
+      }
+    }, {
+      oldEndpoint: 'TreeItem2DragAndDropOverlay',
+      newEndpoint: 'TreeItemDragAndDropOverlay',
+      importsMapping: {
+        TreeItem2DragAndDropOverlay: 'TreeItemDragAndDropOverlay',
+        TreeItem2DragAndDropOverlayProps: 'TreeItemDragAndDropOverlayProps'
+      }
+    }, {
+      oldEndpoint: 'TreeItem2LabelInput',
+      newEndpoint: 'TreeItemLabelInput',
+      importsMapping: {
+        TreeItem2LabelInput: 'TreeItemLabelInput',
+        TreeItem2LabelInputProps: 'TreeItemLabelInputProps'
+      }
+    }, {
+      oldEndpoint: 'hooks',
+      importsMapping: {
+        useTreeItem2Utils: 'useTreeItemUtils'
+      }
+    }]
+  });
+  return root.toSource(printOptions);
+}

package/v8.0.0/tree-view/rename-tree-view-simple-tree-view/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _renameTreeViewSimpleTreeView.default;
+  }
+});
+var _renameTreeViewSimpleTreeView = _interopRequireDefault(require("../../../v7.0.0/tree-view/rename-tree-view-simple-tree-view"));