@mui/x-codemod 7.20.0 → 8.0.0-alpha.0

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
@@ -227,9 +345,9 @@ npx @mui/x-codemod@latest v7.0.0/data-grid/remove-stabilized-experimentalFeature
 
 ### Tree View codemods
 
-#### `preset-safe` for tree view v7.0.0
+#### `preset-safe` for Tree View v7.0.0
 
-The `preset-safe` codemods for tree view.
+The `preset-safe` codemods for Tree View.
 
 ```bash
 npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe <path|folder>
@@ -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)
@@ -247,7 +365,7 @@ The list includes these transformers
 
 #### `rename-tree-view-simple-tree-view`
 
-Renames the `TreeView` component to `SimpleTreeView`
+Renames the Tree View component to Simple Tree View
 
 ```diff
 -import { TreeView } from '@mui/x-tree-view';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "7.20.0",
+  "version": "8.0.0-alpha.0",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -25,16 +25,17 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.25.7",
-    "@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.0"
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.12.0",
-    "dayjs": "^1.11.11",
-    "moment-timezone": "^0.5.45",
+    "dayjs": "^1.11.13",
+    "moment-timezone": "^0.5.46",
     "rimraf": "^6.0.1"
   },
   "sideEffects": false,

package/util/renameImports.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renameImports = renameImports;
+const getPathStrFromPath = path => {
+  let cleanPath;
+  if (path.get('type').value === 'ImportDeclaration') {
+    cleanPath = path;
+  } else {
+    cleanPath = path.parentPath.parentPath;
+  }
+  return cleanPath.node.source.value?.toString() ?? '';
+};
+const getRelativeEndpointFromPathStr = (pathStr, packageNames) => {
+  return pathStr.replace(new RegExp(`^(${packageNames.join('|')})/`), '');
+};
+const getMatchingNestedImport = (path, parameters) => {
+  const pathStr = getPathStrFromPath(path);
+  const relativeEndpoint = getRelativeEndpointFromPathStr(pathStr, parameters.packageNames);
+  return parameters.imports.find(importConfig => importConfig.oldEndpoint === relativeEndpoint);
+};
+const getMatchingRootImport = (path, parameters) => {
+  return parameters.imports.find(importConfig => {
+    return !importConfig.skipRoot && importConfig.importsMapping.hasOwnProperty(path.node.imported.name);
+  });
+};
+function renameImports(parameters) {
+  const {
+    j,
+    root
+  } = parameters;
+  const renamedIdentifiersMap = {};
+  const importDeclarations = root
+  // Find all the import declarations (import { ... } from '...')
+  .find(j.ImportDeclaration);
+
+  // Rename the nested imports specifiers
+  // - import { A } from '@mui/x-date-pickers/A'
+  // + import { B } from '@mui/x-date-pickers/A'
+  const nestedImportRegExp = new RegExp(`^(${parameters.packageNames.join('|')})/(.*)$`);
+  importDeclarations
+  // Filter out the declarations that are not nested endpoints of the matching packages or that don't have any update to apply
+  .filter(path => {
+    const pathStr = getPathStrFromPath(path);
+    if (!pathStr.match(nestedImportRegExp)) {
+      return false;
+    }
+    return !!getMatchingNestedImport(path, parameters);
+  })
+  // Find all the import specifiers (extract A in import { A } from '...')
+  .find(j.ImportSpecifier)
+  // Filter out the specifiers that don't need to be updated
+  .filter(path => {
+    return getMatchingNestedImport(path, parameters).importsMapping.hasOwnProperty(path.node.imported.name);
+  })
+  // Rename the import specifiers
+  .replaceWith(path => {
+    const newName = getMatchingNestedImport(path, parameters).importsMapping[path.node.imported.name];
+
+    // If the import is alias, we keep the alias and don't rename the variable usage
+    const hasAlias = path.node.local?.name !== path.node.imported.name;
+    if (hasAlias) {
+      return j.importSpecifier(j.identifier(newName), j.identifier(path.node.local.name));
+    }
+    renamedIdentifiersMap[path.node.imported.name] = newName;
+    return j.importSpecifier(j.identifier(newName));
+  });
+
+  // Rename the root imports specifiers
+  // - import { A } from '@mui/x-date-pickers'
+  // + import { B } from '@mui/x-date-pickers'
+  const rootImportRegExp = new RegExp(`^(${parameters.packageNames.join('|')})$`);
+  importDeclarations
+  // Filter out the declarations that are not root endpoint of the matching packages
+  .filter(path => {
+    const pathStr = getPathStrFromPath(path);
+    return !!pathStr.match(rootImportRegExp);
+  }).find(j.ImportSpecifier).filter(path => {
+    return !!getMatchingRootImport(path, parameters);
+  })
+  // Rename the import specifiers
+  .replaceWith(path => {
+    const newName = getMatchingRootImport(path, parameters).importsMapping[path.node.imported.name];
+
+    // If the import is alias, we keep the alias and don't rename the variable usage
+    const hasAlias = path.node.local?.name !== path.node.imported.name;
+    if (hasAlias) {
+      return j.importSpecifier(j.identifier(newName), j.identifier(path.node.local.name));
+    }
+    renamedIdentifiersMap[path.node.imported.name] = newName;
+    return j.importSpecifier(j.identifier(newName));
+  });
+
+  // Rename the nested import declarations
+  // - import { B } from '@mui/x-date-pickers/A'
+  // + import { B } from '@mui/x-date-pickers/B'
+  importDeclarations
+  // Filter out the declarations that are not nested endpoints of the matching packages or that don't have any update to apply
+  .filter(path => {
+    const pathStr = getPathStrFromPath(path);
+    if (!pathStr.match(nestedImportRegExp)) {
+      return false;
+    }
+    return !!getMatchingNestedImport(path, parameters)?.newEndpoint;
+  }).replaceWith(path => {
+    const pathStr = getPathStrFromPath(path);
+    const oldEndpoint = getRelativeEndpointFromPathStr(pathStr, parameters.packageNames);
+    const newEndpoint = getMatchingNestedImport(path, parameters).newEndpoint;
+    const newPathStr = pathStr.replace(oldEndpoint, newEndpoint);
+    return j.importDeclaration(
+    // Copy over the existing import specifiers
+    path.node.specifiers,
+    // Replace the source with our new source
+    j.stringLiteral(newPathStr));
+  });
+
+  // Rename the import usage
+  // - <A />
+  // + <B />
+  root.find(j.Identifier).filter(path => {
+    return renamedIdentifiersMap.hasOwnProperty(path.node.name);
+  }).replaceWith(path => {
+    const newName = renamedIdentifiersMap[path.node.name];
+    return j.identifier(newName);
+  });
+  return root;
+}

package/v6.0.0/pickers/view-components-rename/index.js

@@ -4,51 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-const SUB_PACKAGES = {
-  CalendarPicker: 'DateCalendar',
-  CalendarPickerSkeleton: 'DayCalendarSkeleton',
-  MonthPicker: 'MonthCalendar',
-  YearPicker: 'YearCalendar',
-  ClockPicker: 'TimeClock'
-};
-const VARIABLES = {
-  // Date Calendar
-  CalendarPicker: 'DateCalendar',
-  CalendarPickerProps: 'DateCalendarProps',
-  CalendarPickerSlotsComponent: 'DateCalendarSlotsComponent',
-  CalendarPickerSlotsComponentsProps: 'DateCalendarSlotsComponentsProps',
-  CalendarPickerClasses: 'DateCalendarClasses',
-  CalendarPickerClassKey: 'DateCalendarClassKey',
-  calendarPickerClasses: 'dateCalendarClasses',
-  getCalendarPickerUtilityClass: 'getDateCalendarUtilityClass',
-  // Month Calendar
-  MonthPicker: 'MonthCalendar',
-  MonthPickerProps: 'MonthCalendarProps',
-  MonthPickerClasses: 'MonthCalendarClasses',
-  MonthPickerClassKey: 'MonthCalendarClassKey',
-  monthPickerClasses: 'monthCalendarClasses',
-  getMonthPickerUtilityClass: 'getMonthCalendarUtilityClass',
-  YearPicker: 'YearCalendar',
-  YearPickerProps: 'YearCalendarProps',
-  YearPickerClasses: 'YearCalendarClasses',
-  YearPickerClassKey: 'YearCalendarClassKey',
-  yearPickerClasses: 'yearCalendarClasses',
-  getYearPickerUtilityClass: 'getYearCalendarUtilityClass',
-  ClockPicker: 'TimeClock',
-  ClockPickerProps: 'TimeClockProps',
-  ClockPickerClasses: 'TimeClockClasses',
-  ClockPickerClassKey: 'TimeClockClassKey',
-  clockPickerClasses: 'timeClockClasses',
-  getClockPickerUtilityClass: 'getTimeClockUtilityClass',
-  CalendarPickerSkeleton: 'DayCalendarSkeleton',
-  CalendarPickerSkeletonProps: 'DayCalendarSkeletonProps',
-  CalendarPickerSkeletonClasses: 'DayCalendarSkeletonClasses',
-  CalendarPickerSkeletonClassKey: 'DayCalendarSkeletonClassKey',
-  calendarPickerSkeletonClasses: 'dayCalendarSkeletonClasses',
-  getCalendarPickerSkeletonUtilityClass: 'getDayCalendarSkeletonUtilityClass'
-};
-const PACKAGE_REGEXP = /@mui\/x-date-pickers(-pro|)(\/(.*)|)/;
-const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+var _renameImports = require("../../../util/renameImports");
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -56,28 +12,68 @@ function transformer(file, api, options) {
     quote: 'single',
     trailingComma: true
   };
-  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
-
-  // Rename the import specifiers
-  // - import { MonthPicker } from '@mui/x-date-pickers/MonthPicker'
-  // + import { MonthCalendar } from '@mui/x-date-pickers/MonthPicker'
-  matchingImports.find(j.ImportSpecifier).filter(path => VARIABLES.hasOwnProperty(path.node.imported.name)).replaceWith(path => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name])));
-
-  // Rename the nested import declarations
-  // - import {} from '@mui/x-date-pickers/MonthPicker'
-  // + import {} from '@mui/x-date-pickers/MonthCalendar'
-  matchingImports.filter(path => SUB_PACKAGES.hasOwnProperty(matchImport(path)?.[3] ?? '')).replaceWith(path => {
-    const subPackage = matchImport(path)[3];
-    const importPath = path.node.source.value?.toString() ?? '';
-    return j.importDeclaration(path.node.specifiers,
-    // copy over the existing import specifiers
-    j.stringLiteral(importPath.replace(subPackage, SUB_PACKAGES[subPackage])) // Replace the source with our new source
-    );
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-date-pickers', '@mui/x-date-pickers-pro'],
+    imports: [{
+      oldEndpoint: 'CalendarPicker',
+      newEndpoint: 'DateCalendar',
+      importsMapping: {
+        CalendarPicker: 'DateCalendar',
+        CalendarPickerProps: 'DateCalendarProps',
+        CalendarPickerSlotsComponent: 'DateCalendarSlotsComponent',
+        CalendarPickerSlotsComponentsProps: 'DateCalendarSlotsComponentsProps',
+        CalendarPickerClasses: 'DateCalendarClasses',
+        CalendarPickerClassKey: 'DateCalendarClassKey',
+        calendarPickerClasses: 'dateCalendarClasses',
+        getCalendarPickerUtilityClass: 'getDateCalendarUtilityClass'
+      }
+    }, {
+      oldEndpoint: 'MonthPicker',
+      newEndpoint: 'MonthCalendar',
+      importsMapping: {
+        MonthPicker: 'MonthCalendar',
+        MonthPickerProps: 'MonthCalendarProps',
+        MonthPickerClasses: 'MonthCalendarClasses',
+        MonthPickerClassKey: 'MonthCalendarClassKey',
+        monthPickerClasses: 'monthCalendarClasses',
+        getMonthPickerUtilityClass: 'getMonthCalendarUtilityClass'
+      }
+    }, {
+      oldEndpoint: 'YearPicker',
+      newEndpoint: 'YearCalendar',
+      importsMapping: {
+        YearPicker: 'YearCalendar',
+        YearPickerProps: 'YearCalendarProps',
+        YearPickerClasses: 'YearCalendarClasses',
+        YearPickerClassKey: 'YearCalendarClassKey',
+        yearPickerClasses: 'yearCalendarClasses',
+        getYearPickerUtilityClass: 'getYearCalendarUtilityClass'
+      }
+    }, {
+      oldEndpoint: 'ClockPicker',
+      newEndpoint: 'TimeClock',
+      importsMapping: {
+        ClockPicker: 'TimeClock',
+        ClockPickerProps: 'TimeClockProps',
+        ClockPickerClasses: 'TimeClockClasses',
+        ClockPickerClassKey: 'TimeClockClassKey',
+        clockPickerClasses: 'timeClockClasses',
+        getClockPickerUtilityClass: 'getTimeClockUtilityClass'
+      }
+    }, {
+      oldEndpoint: 'CalendarPickerSkeleton',
+      newEndpoint: 'DayCalendarSkeleton',
+      importsMapping: {
+        CalendarPickerSkeleton: 'DayCalendarSkeleton',
+        CalendarPickerSkeletonProps: 'DayCalendarSkeletonProps',
+        CalendarPickerSkeletonClasses: 'DayCalendarSkeletonClasses',
+        CalendarPickerSkeletonClassKey: 'DayCalendarSkeletonClassKey',
+        calendarPickerSkeletonClasses: 'dayCalendarSkeletonClasses',
+        getCalendarPickerSkeletonUtilityClass: 'getDayCalendarSkeletonUtilityClass'
+      }
+    }]
   });
-
-  // Rename the import usage
-  // - <CalendarPicker />
-  // + <DateCalendar />
-  root.find(j.Identifier).filter(path => VARIABLES.hasOwnProperty(path.node.name)).replaceWith(path => j.identifier(VARIABLES[path.node.name]));
   return root.toSource(printOptions);
 }

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

@@ -4,16 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-const VARIABLES = {
-  TreeView: 'SimpleTreeView',
-  TreeViewProps: 'SimpleTreeViewProps',
-  TreeViewClasses: 'SimpleTreeViewClasses',
-  TreeViewClassKey: 'SimpleTreeViewClassKey',
-  treeViewClasses: 'simpleTreeViewClasses',
-  getTreeViewUtilityClass: 'getSimpleTreeViewUtilityClass'
-};
-const PACKAGE_REGEXP = /@mui\/x-tree-view(\/(.*)|)/;
-const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+var _renameImports = require("../../../util/renameImports");
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -21,27 +12,22 @@ function transformer(file, api, options) {
     quote: 'single',
     trailingComma: true
   };
-  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
-
-  // Rename the import specifiers
-  // - import { TreeView } from '@mui/x-tree-view/TreeView'
-  // + import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'
-  matchingImports.find(j.ImportSpecifier).filter(path => VARIABLES.hasOwnProperty(path.node.imported.name)).replaceWith(path => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name])));
-
-  // Rename the nested import declarations
-  // - import {} from '@mui/x-tree-view/TreeView'
-  // + import {} from '@mui/x-tree-view/SimpleTreeView'
-  matchingImports.filter(path => matchImport(path)?.[2] === 'TreeView').replaceWith(path => {
-    const importPath = path.node.source.value?.toString() ?? '';
-    return j.importDeclaration(path.node.specifiers,
-    // copy over the existing import specifiers
-    j.stringLiteral(importPath.replace('TreeView', 'SimpleTreeView')) // Replace the source with our new source
-    );
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-tree-view'],
+    imports: [{
+      oldEndpoint: 'TreeView',
+      newEndpoint: 'SimpleTreeView',
+      importsMapping: {
+        TreeView: 'SimpleTreeView',
+        TreeViewProps: 'SimpleTreeViewProps',
+        TreeViewClasses: 'SimpleTreeViewClasses',
+        TreeViewClassKey: 'SimpleTreeViewClassKey',
+        treeViewClasses: 'simpleTreeViewClasses',
+        getTreeViewUtilityClass: 'getSimpleTreeViewUtilityClass'
+      }
+    }]
   });
-
-  // Rename the import usage
-  // - <TreeView />
-  // + <SimpleTreeView />
-  root.find(j.Identifier).filter(path => VARIABLES.hasOwnProperty(path.node.name)).replaceWith(path => j.identifier(VARIABLES[path.node.name]));
   return root.toSource(printOptions);
 }

package/v7.0.0/tree-view/rename-use-tree-item/index.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-const PACKAGE_REGEXP = /@mui\/x-tree-view(\/TreeItem|)/;
-const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+var _renameImports = require("../../../util/renameImports");
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
@@ -13,16 +12,16 @@ function transformer(file, api, options) {
     quote: 'single',
     trailingComma: true
   };
-  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
-
-  // Rename the import specifiers
-  // - import { useTreeItem } from '@mui/x-tree-view/TreeItem'
-  // + import { useTreeItemState } from '@mui/x-tree-view/TreeItem'
-  matchingImports.find(j.ImportSpecifier).filter(path => path.node.imported.name === 'useTreeItem').replaceWith(j.importSpecifier(j.identifier('useTreeItemState')));
-
-  // Rename the import usage
-  // - useTreeItem(nodeId);
-  // + useTreeItemState(nodeId)
-  root.find(j.Identifier).filter(path => path.node.name === 'useTreeItem').replaceWith(j.identifier('useTreeItemState'));
+  (0, _renameImports.renameImports)({
+    j,
+    root,
+    packageNames: ['@mui/x-tree-view'],
+    imports: [{
+      oldEndpoint: 'TreeItem',
+      importsMapping: {
+        useTreeItem: 'useTreeItemState'
+      }
+    }]
+  });
   return root.toSource(printOptions);
 }

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/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"));

package/v7.0.0/tree-view/rename-tree-view-simple-tree-view/rename-tree-view-simple-tree-view.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _path = _interopRequireDefault(require("path"));
-var _chai = require("chai");
-var _jscodeshift = _interopRequireDefault(require("jscodeshift"));
-var _ = _interopRequireDefault(require("."));
-var _readFile = _interopRequireDefault(require("../../../util/readFile"));
-function read(fileName) {
-  return (0, _readFile.default)(_path.default.join(__dirname, fileName));
-}
-const TEST_FILES = ['nested-imports', 'root-imports'];
-describe('v7.0.0/tree-view', () => {
-  describe('rename-tree-view-simple-tree-view', () => {
-    TEST_FILES.forEach(testFile => {
-      const actualPath = `./actual-${testFile}.spec.tsx`;
-      const expectedPath = `./expected-${testFile}.spec.tsx`;
-      describe(`${testFile.replace(/-/g, ' ')}`, () => {
-        it('transforms imports as needed', () => {
-          const actual = (0, _.default)({
-            source: read(actualPath)
-          }, {
-            jscodeshift: _jscodeshift.default.withParser('tsx')
-          }, {});
-          const expected = read(expectedPath);
-          (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
-        });
-        it('should be idempotent', () => {
-          const actual = (0, _.default)({
-            source: read(expectedPath)
-          }, {
-            jscodeshift: _jscodeshift.default.withParser('tsx')
-          }, {});
-          const expected = read(expectedPath);
-          (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
-        });
-      });
-    });
-  });
-});

package/v7.0.0/tree-view/rename-use-tree-item/rename-use-tree-item.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _path = _interopRequireDefault(require("path"));
-var _chai = require("chai");
-var _jscodeshift = _interopRequireDefault(require("jscodeshift"));
-var _ = _interopRequireDefault(require("."));
-var _readFile = _interopRequireDefault(require("../../../util/readFile"));
-function read(fileName) {
-  return (0, _readFile.default)(_path.default.join(__dirname, fileName));
-}
-const TEST_FILES = ['nested-imports', 'root-imports'];
-describe('v7.0.0/tree-view', () => {
-  describe('rename-use-tree-item', () => {
-    TEST_FILES.forEach(testFile => {
-      const actualPath = `./actual-${testFile}.spec.tsx`;
-      const expectedPath = `./expected-${testFile}.spec.tsx`;
-      describe(`${testFile.replace(/-/g, ' ')}`, () => {
-        it('transforms imports as needed', () => {
-          const actual = (0, _.default)({
-            source: read(actualPath)
-          }, {
-            jscodeshift: _jscodeshift.default.withParser('tsx')
-          }, {});
-          const expected = read(expectedPath);
-          (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
-        });
-        it('should be idempotent', () => {
-          const actual = (0, _.default)({
-            source: read(expectedPath)
-          }, {
-            jscodeshift: _jscodeshift.default.withParser('tsx')
-          }, {});
-          const expected = read(expectedPath);
-          (0, _chai.expect)(actual).to.equal(expected, 'The transformed version should be correct');
-        });
-      });
-    });
-  });
-});