@mui/x-codemod 7.0.0-alpha.0 → 7.0.0-alpha.2

package/README.md

@@ -56,13 +56,126 @@ through jscodeshift's `printOptions` command line argument
 npx @mui/x-codemod <transform> <path> --jscodeshift="--printOptions='{\"quote\":\"double\"}'"
 ```
 
-## Included scripts
+## v7.0.0
 
-### v6.0.0
+### 🚀 `preset-safe` for v7.0.0
 
-#### 🚀 `preset-safe`
+A combination of all important transformers for migrating v6 to v7.
+⚠️ 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.
 
-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.
+```bash
+npx @mui/x-codemod v7.0.0/preset-safe <path|folder>
+```
+
+The corresponding sub-sections are listed below
+
+- [`preset-safe-for-pickers`](#preset-safe-for-pickers-v700)
+- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v700)
+
+### Pickers codemods
+
+#### `preset-safe` for pickers v7.0.0
+
+The `preset-safe` codemods for pickers.
+
+```bash
+npx @mui/x-codemod v7.0.0/pickers/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`rename-components-to-slots-pickers`](#rename-components-to-slots-pickers)
+- [`rename-default-calendar-month-to-reference-date`](#rename-default-calendar-month-to-reference-date)
+- [`rename-day-picker-classes`](/rename-day-picker-classes)
+
+#### `rename-components-to-slots-pickers`
+
+Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
+
+This change only affects Date and Time Picker components.
+
+```diff
+ <DatePicker
+-  components={{ Toolbar: CustomToolbar }}
++  slots={{ toolbar: CustomToolbar }}
+-  componentsProps={{ actionBar: { actions: ['clear'] } }}
++  slotProps={{ actionBar: { actions: ['clear'] } }}
+ />;
+```
+
+```bash
+npx @mui/x-codemod v7.0.0/pickers/rename-components-to-slots <path>
+```
+
+#### `rename-default-calendar-month-to-reference-date`
+
+Replace the `defaultCalendarMonth` prop with the `referenceDate` prop.
+
+```diff
+- <DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
++ <DateCalendar referenceDate{dayjs('2022-04-01')} />
+```
+
+```bash
+npx @mui/x-codemod v7.0.0/pickers/rename-default-calendar-month-to-reference-date <path>
+```
+
+#### `rename-day-picker-classes`
+
+Rename the `dayPickerClasses` variable to `dayCalendarClasses`.
+
+```diff
+- import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
++ import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
+```
+
+```bash
+npx @mui/x-codemod v7.0.0/pickers/rename-day-picker-classes <path>
+```
+
+### Data grid codemods
+
+#### `preset-safe` for data grid v7.0.0
+
+The `preset-safe` codemods for data grid.
+
+```bash
+npx @mui/x-codemod v7.0.0/data-grid/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`rename-components-to-slots-data-grid`](#rename-components-to-slots-data-grid)
+
+#### `rename-components-to-slots-data-grid`
+
+Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
+
+This change only affects Data Grid components.
+
+```diff
+ <DataGrid
+-  components={{ Toolbar: CustomToolbar }}
++  slots={{ toolbar: CustomToolbar }}
+-  componentsProps={{ toolbar: { showQuickFilter: true }}}
++  slotProps={{ toolbar: { showQuickFilter: true }}}
+ />;
+```
+
+```bash
+npx @mui/x-codemod v7.0.0/data-grid/rename-components-to-slots <path>
+```
+
+## v6.0.0
+
+### 🚀 `preset-safe` for v6.0.0
+
+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.
 
 ```bash
 npx @mui/x-codemod v6.0.0/preset-safe <path|folder>
@@ -70,12 +183,12 @@ 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)
+- [`preset-safe-for-pickers`](#preset-safe-for-pickers-v600)
+- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v600)
 
 ### Pickers codemods
 
-#### `preset-safe` for pickers
+#### `preset-safe` for pickers v6.0.0
 
 The `preset-safe` codemods for pickers.
 
@@ -385,7 +498,7 @@ npx @mui/x-codemod v6.0.0/pickers/rename-default-toolbar-title-localeText <path>
 
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
 
-This change only affects pickers components.
+This change only affects Date and Time Pickers components.
 
 ```diff
  <DatePicker
@@ -402,7 +515,7 @@ npx @mui/x-codemod v6.0.0/pickers/rename-components-to-slots <path>
 
 ### Data grid codemods
 
-#### `preset-safe` for data grid
+#### `preset-safe` for data grid v6.0.0
 
 The `preset-safe` codemods for data grid.
 
@@ -684,7 +797,7 @@ npx @mui/x-codemod v6.0.0/data-grid/replace-onCellFocusOut-prop <path>
 
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.
 
-This change only affects data grid components.
+This change only affects Data Grid components.
 
 ```diff
  <DataGrid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "7.0.0-alpha.0",
+  "version": "7.0.0-alpha.2",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",
@@ -9,6 +9,7 @@
     "react",
     "react-component",
     "mui",
+    "mui-x",
     "codemod",
     "jscodeshift"
   ],
@@ -28,12 +29,12 @@
   "homepage": "https://github.com/mui/mui-x/tree/master/packages/x-codemod",
   "funding": {
     "type": "opencollective",
-    "url": "https://opencollective.com/mui"
+    "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/runtime": "^7.23.2",
-    "@babel/traverse": "^7.23.2",
+    "@babel/core": "^7.23.3",
+    "@babel/runtime": "^7.23.4",
+    "@babel/traverse": "^7.23.4",
     "jscodeshift": "0.13.1",
     "jscodeshift-add-imports": "^1.0.10",
     "yargs": "^17.7.2"

package/v7.0.0/data-grid/rename-components-to-slots/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 _renameComponentsToSlots.default;
+  }
+});
+var _renameComponentsToSlots = _interopRequireDefault(require("../../../v6.0.0/data-grid/rename-components-to-slots"));

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

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformer;
-var _renameComponentsToSlots = _interopRequireDefault(require("../../../v6.0.0/pickers/rename-components-to-slots"));
+var _renameComponentsToSlots = _interopRequireDefault(require("../rename-components-to-slots"));
+var _renameDefaultCalendarMonthToReferenceDate = _interopRequireDefault(require("../rename-default-calendar-month-to-reference-date"));
+var _renameDayPickerClasses = _interopRequireDefault(require("../rename-day-picker-classes"));
 function transformer(file, api, options) {
   file.source = (0, _renameComponentsToSlots.default)(file, api, options);
+  file.source = (0, _renameDefaultCalendarMonthToReferenceDate.default)(file, api, options);
+  file.source = (0, _renameDayPickerClasses.default)(file, api, options);
   return file.source;
 }

package/v7.0.0/pickers/rename-components-to-slots/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 _renameComponentsToSlots.default;
+  }
+});
+var _renameComponentsToSlots = _interopRequireDefault(require("../../../v6.0.0/pickers/rename-components-to-slots"));

package/v7.0.0/pickers/rename-day-picker-classes/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+const PACKAGE_REGEXP = /@mui\/x-date-pickers(-pro|)(\/(.*)|)/;
+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 { dayPickerClasses } from '@mui/x-date-pickers'
+  // + import { dayCalendarClasses } from '@mui/x-date-pickers'
+  matchingImports.find(j.ImportSpecifier).filter(path => path.node.imported.name === 'dayPickerClasses').replaceWith(path => j.importSpecifier(j.identifier('dayCalendarClasses'), path.value.local));
+
+  // Rename the import usage
+  // - dayPickerClasses.root
+  // + dayCalendarClasses.root
+  root.find(j.Identifier).filter(path => path.node.name === 'dayPickerClasses').replaceWith(() => j.identifier('dayCalendarClasses'));
+  return root.toSource(printOptions);
+}

package/v7.0.0/pickers/rename-default-calendar-month-to-reference-date/index.js

@@ -0,0 +1,21 @@
+"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;
+  return (0, _renameProps.default)({
+    root,
+    componentNames: ['DateCalendar', 'DatePicker', 'DateRangeCalendar', 'DateRangePicker', 'DateTimePicker', 'DesktopDatePicker', 'DesktopDateRangePicker', 'DesktopDateTimePicker', 'MobileDatePicker', 'MobileDateRangePicker', 'MobileDateTimePicker', 'StaticDatePicker', 'StaticDateRangePicker', 'StaticDateTimePicker'],
+    props: {
+      defaultCalendarMonth: 'referenceDate'
+    },
+    j
+  }).toSource(printOptions);
+}