@mui/x-codemod 6.0.0-alpha.13 → 6.0.0-alpha.14

package/README.md

@@ -62,20 +62,89 @@ npx @mui/x-codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":
 
 #### 🚀 `preset-safe`
 
-A combination of all important transformers for migrating v5 to v6. ⚠️ This codemod should be run only once.
+A combination of all important transformers for migrating v5 to v6. ⚠️ This codemod should be run only once. It runs codemods for both Data Grid and Date and Time Pickers packages. To run codemods for a specific package, refer to the respective section.
 
 ```sh
 npx @mui/x-codemod v6.0.0/preset-safe <path|folder>
 ```
 
+The corresponding sub-sections are listed below
+
+- [`preset-safe-for-pickers`](#preset-safe-for-pickers)
+- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid)
+
+### Pickers codemods
+
+#### `preset-safe` for pickers
+
+The `preset-safe` codemods for pickers.
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/preset-safe <path|folder>
+```
+
 The list includes these transformers
 
+- [`adapter-change-import`](#adapter-change-import)
+- [`view-components-rename`](#view-components-rename)
+- [`view-components-rename-value-prop`](#view-components-rename)
 - [`localization-provider-rename-locale`](#localization-provider-rename-locale)
 - [`text-props-to-localeText`](#text-props-to-localeText)
 
+#### `adapter-change-import`
+
+Import the adapters from `@mui/x-date-pickers` instead of `@date-io`.
+
+```diff
+-import AdapterJalaali from '@date-io/jalaali';
++import { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali';
+```
+
+#### `view-components-rename`
+
+Renames the view components.
+
+```diff
+-<CalendarPicker {...props} />
++<DateCalendar {...props} />
+
+-<DayPicker {...props} />
++<DayCalendar {...props} />
+
+-<CalendarPickerSkeleton {...props} />
++<DayCalendarSkeleton {...props} />
+
+-<MonthPicker {...props} />
++<MonthCalendar {...props} />
+
+-<YearPicker {...props} />
++<YearCalendar {...props} />
+
+-<ClockPicker {...props} />
++<TimeClock {...props} />
+```
+
+#### `view-components-rename-value-prop`
+
+Renames the `date` prop of the view components into `value`.
+
+```diff
+-<MonthPicker date={dayjs()} />
++<MonthCalendar value={dayjs()} />
+
+-<YearPicker date={dayjs()} />
++<YearCalendar value={dayjs()} />
+
+-<ClockPicker date={dayjs()} />
++<TimeClock value={dayjs()} />
+
+-<CalendarPicker date={dayjs()} />
++<DateCalendar value={dayjs()} />
+```
+
 #### `localization-provider-rename-locale`
 
-Renames `locale` into `adapterLocale` (or `LocalizationProvider`)
+Renames the `locale` prop of the `LocalizationProvider` component into `adapterLocale`.
 
 ```diff
  <LocalizationProvider
@@ -89,12 +158,12 @@ Renames `locale` into `adapterLocale` (or `LocalizationProvider`)
 ```
 
 ```sh
-npx @mui/x-codemod v6.0.0/localization-provider-rename-locale <path>
+npx @mui/x-codemod v6.0.0/pickers/localization-provider-rename-locale <path>
 ```
 
 #### `text-props-to-localeText`
 
-Replace props used for localization such as `cancelText` to their corresponding `localeText` key.
+Replace props used for localization such as `cancelText` to their corresponding `localeText` key on all the Date and Time Pickers components.
 
 ```diff
  <DatePicker
@@ -106,7 +175,7 @@ Replace props used for localization such as `cancelText` to their corresponding
 ```
 
 ```sh
-npx @mui/x-codemod v6.0.0/text-props-to-localeText <path>
+npx @mui/x-codemod v6.0.0/pickers/text-props-to-localeText <path>
 ```
 
 If you were always using the same text value in all your components, consider moving those translation from the component to the `LocalizationProvider` by hand.
@@ -125,4 +194,45 @@ If you were always using the same text value in all your components, consider mo
  </LocalizationProvider>
 ```
 
-You can find more details about this breaking change in [the migration guide](https://next.mui.com/x/migration/migration-pickers-v5/#rename-the-locale-prop-on-localizationprovider).
+You can find more details about Date and Time breaking changes in [the migration guide](https://next.mui.com/x/migration/migration-pickers-v5/).
+
+### Data grid codemods
+
+#### `preset-safe` for data grid
+
+The `preset-safe` codemods for data grid.
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`column-menu-components-rename`](#column-menu-components-rename)
+
+#### `column-menu-components-rename`
+
+Replace column menu items that have been renamed.
+
+```diff
+  <CustomColumnMenu>
+-   <GridFilterMenuItem column={column} onClick={hideMenu} />
++   <GridColumnMenuFilterItem colDef={column} onClick={hideMenu} />
+-   <HideGridColMenuItem column={column} onClick={hideMenu} />
++   <GridColumnMenuHideItem colDef={column} onClick={hideMenu} />
+-   <GridColumnsMenuItem column={column} onClick={hideMenu} />
++   <GridColumnMenuColumnsItem colDef={column} onClick={hideMenu} />
+-   <SortGridMenuItems column={column} onClick={hideMenu} />
++   <GridColumnMenuSortItem colDef={column} onClick={hideMenu} />
+-   <GridColumnPinningMenuItems column={column} onClick={hideMenu} />
++   <GridColumnMenuPinningItem colDef={column} onClick={hideMenu} />
+  </CustomColumnMenu>
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/data-grid/column-menu-components-rename <path>
+```
+
+If you are using `GridRowGroupingColumnMenuItems` and `GridRowGroupableColumnMenuItems` for grouping, consider fixing them manually as these imports are replaced by `GridColumnMenuGroupingItem` and may require some extra work to port.
+
+You can find more details about Data Grid breaking change in [the migration guide](https://next.mui.com/x/migration/migration-data-grid-v5/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "6.0.0-alpha.13",
+  "version": "6.0.0-alpha.14",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -31,9 +31,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"

package/util/renameProps.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = renameProps;
 function renameProps({
   root,
-  componentName,
-  props
+  componentNames,
+  props,
+  j
 }) {
-  return root.findJSXElements(componentName).forEach(path => {
-    path.node.openingElement.attributes?.forEach(node => {
-      if (node.type === 'JSXAttribute' && Object.keys(props).includes(node.name.name)) {
-        node.name.name = props[node.name.name];
-      }
-    });
+  return root.find(j.JSXElement).filter(path => {
+    return componentNames.includes(path.value.openingElement.name.name);
+  }).find(j.JSXAttribute).filter(attribute => Object.keys(props).includes(attribute.node.name.name)).forEach(attribute => {
+    j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(props[attribute.node.name.name]), attribute.node.value));
   });
 }

package/v6.0.0/component-rename-prop/index.js

@@ -12,9 +12,10 @@ function transformer(file, api, options) {
   const printOptions = options.printOptions;
   return (0, _renameProps.default)({
     root,
-    componentName: options.component,
+    componentNames: [options.component],
     props: {
       [options.from]: options.to
-    }
+    },
+    j
   }).toSource(printOptions);
 }

package/v6.0.0/data-grid/column-menu-components-rename/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+const VARIABLES = {
+  GridFilterMenuItem: 'GridColumnMenuFilterItem',
+  HideGridColMenuItem: 'GridColumnMenuHideItem',
+  GridColumnsMenuItem: 'GridColumnMenuColumnsItem',
+  SortGridMenuItems: 'GridColumnMenuSortItem',
+  GridColumnPinningMenuItems: 'GridColumnMenuPinningItem',
+  GridAggregationColumnMenuItem: 'GridColumnMenuAggregationItem'
+};
+const PACKAGE_REGEXP = /@mui\/x-data-grid(-pro|-premium)(\/(.*)|)/;
+const matchImport = path => (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP);
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const matchingImports = root.find(j.ImportDeclaration).filter(path => !!matchImport(path));
+
+  // Rename the import specifiers
+  // - import { GridFilterMenuItem } from '@mui/x-data-grid'
+  // + import { GridColumnMenuFilterItem } from '@mui/x-data-grid'
+  matchingImports.find(j.ImportSpecifier).filter(path => !!VARIABLES[path.node.imported.name]).replaceWith(path => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name])));
+
+  // Rename the import usage
+  // - <GridFilterMenuItem />
+  // + <GridColumnMenuFilterItem />
+  root.find(j.Identifier).filter(path => !!VARIABLES[path.node.name]).replaceWith(path => j.identifier(VARIABLES[path.node.name]));
+
+  // Rename `column` prop to `colDef`
+  // - <GridFilterMenuItem column={col} onClick={onClick} />
+  // + <GridFilterMenuItem colDef={col} onClick={onClick} />
+  return (0, _renameProps.default)({
+    root,
+    componentNames: Object.values(VARIABLES),
+    props: {
+      column: 'colDef'
+    },
+    j
+  }).toSource(printOptions);
+}

package/v6.0.0/data-grid/preset-safe/index.js

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

package/v6.0.0/pickers/adapter-change-import/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+const adapters = {
+  'date-fns': 'AdapterDateFns',
+  'date-fns-jalali': 'AdapterDateFnsJalali',
+  dayjs: 'AdapterDayjs',
+  luxon: 'AdapterLuxon',
+  moment: 'AdapterMoment',
+  hijri: 'AdapterMomentHijri',
+  jalaali: 'AdapterMomentJalaali'
+};
+const getDateIoSubPackage = path => (path.node.source.value?.toString() ?? '').match(/@date-io\/(.*)/)?.[1];
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const matchingImports = root.find(j.ImportDeclaration).filter(path => {
+    const subPackage = getDateIoSubPackage(path);
+    return !!subPackage && !!adapters[subPackage];
+  });
+  const adapterVariableNames = {};
+
+  // Replace the default import specifier by an import specifiers
+  // - import WhateverDateFns from '@mui/x-date-pickers/MonthPicker'
+  // + import { AdapterDateFns } from '@mui/x-date-pickers/MonthPicker'
+  matchingImports.find(j.ImportDefaultSpecifier).replaceWith(path => {
+    const subPackage = getDateIoSubPackage(path.parentPath.parentPath);
+    const adapterVariableName = path.value.local?.name ?? '';
+    adapterVariableNames[adapterVariableName] = adapters[subPackage];
+    return j.importSpecifier(j.identifier(adapters[subPackage]));
+  });
+
+  // Rename the import declarations
+  // - import {} from '@date-io/date-fns'
+  // + import {} from '@mui/x-date-pickers/AdapterDateFns'
+  matchingImports.replaceWith(path => {
+    const subPackage = getDateIoSubPackage(path);
+    return j.importDeclaration(path.node.specifiers,
+    // copy over the existing import specifiers
+    j.stringLiteral(`@mui/x-date-pickers/${adapters[subPackage]}`) // Replace the source with our new source
+    );
+  });
+
+  // Rename the import usage
+  // - <LocalizationProvider dateAdapter={WhateverDateFns} />
+  // + <LocalizationProvider dateAdapter={AdapterDateFns} />
+  root.find(j.Identifier).filter(path => !!adapterVariableNames[path.node.name]).replaceWith(path => j.identifier(adapterVariableNames[path.node.name]));
+  return root.toSource(printOptions);
+}

package/v6.0.0/{localization-provider-rename-locale → pickers/localization-provider-rename-locale}/index.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _renameProps = _interopRequireDefault(require("../../util/renameProps"));
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
 function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
   const printOptions = options.printOptions;
   return (0, _renameProps.default)({
     root,
-    componentName: 'LocalizationProvider',
+    componentNames: ['LocalizationProvider'],
     props: {
       locale: 'adapterLocale'
-    }
+    },
+    j
   }).toSource(printOptions);
 }

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _localizationProviderRenameLocale = _interopRequireDefault(require("../localization-provider-rename-locale"));
+var _textPropsToLocaleText = _interopRequireDefault(require("../text-props-to-localeText"));
+var _viewComponentsRename = _interopRequireDefault(require("../view-components-rename"));
+var _viewComponentsRenameValueProp = _interopRequireDefault(require("../view-components-rename-value-prop"));
+var _adapterChangeImport = _interopRequireDefault(require("../adapter-change-import"));
+function transformer(file, api, options) {
+  file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
+
+  // All the codemods impacting the view components should be run before renaming these components
+  file.source = (0, _textPropsToLocaleText.default)(file, api, options);
+  file.source = (0, _viewComponentsRenameValueProp.default)(file, api, options);
+  file.source = (0, _viewComponentsRename.default)(file, api, options);
+  file.source = (0, _adapterChangeImport.default)(file, api, options);
+  return file.source;
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameProps = _interopRequireDefault(require("../../../util/renameProps"));
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  const result = (0, _renameProps.default)({
+    root,
+    componentNames: ['MonthPicker', 'YearPicker', 'CalendarPicker', 'ClockPicker'],
+    props: {
+      date: 'value'
+    },
+    j
+  });
+  return result.toSource(printOptions);
+}

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

@@ -5,14 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _localizationProviderRenameLocale = _interopRequireDefault(require("../localization-provider-rename-locale"));
-var _textPropsToLocaleText = _interopRequireDefault(require("../text-props-to-localeText"));
-var _viewComponentsRename = _interopRequireDefault(require("../view-components-rename"));
+var _presetSafe = _interopRequireDefault(require("../pickers/preset-safe"));
+var _presetSafe2 = _interopRequireDefault(require("../data-grid/preset-safe"));
 function transformer(file, api, options) {
-  file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
-
-  // Should be run before the renaming of components such as `ClockPicker` to `TimeClock`.
-  file.source = (0, _textPropsToLocaleText.default)(file, api, options);
-  file.source = (0, _viewComponentsRename.default)(file, api, options);
+  file.source = (0, _presetSafe.default)(file, api, options);
+  file.source = (0, _presetSafe2.default)(file, api, options);
   return file.source;
 }