@mui/x-codemod 6.0.0-beta.1 → 6.0.0-beta.2

package/README.md

@@ -95,6 +95,8 @@ The list includes these transformers
 - [`migrate-to-components-componentsProps`](#migrate-to-components-componentsProps)
 - [`replace-arrows-button-slot`](#replace-arrows-button-slot)
 - [`rename-should-disable-time`](#rename-should-disable-time)
+- [`rename-inputFormat-prop`](#rename-inputFormat-prop)
+- [`rename-default-toolbar-title-localeText`](#rename-default-toolbar-title-localeText)
 
 #### `adapter-change-import`
 
@@ -341,6 +343,44 @@ Replace `shouldDisableTime` by `shouldDisableClock`.
 npx @mui/x-codemod v6.0.0/pickers/rename-should-disable-time <path>
 ```
 
+#### `rename-inputFormat-prop`
+
+Replace `inputFormat` prop with `format`.
+
+```diff
+ <DatePicker
+-  inputFormat="YYYY"
++  format="YYYY"
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/rename-inputFormat-prop <path>
+```
+
+#### `rename-default-toolbar-title-localeText`
+
+Rename toolbar related translation keys, removing `Default` part from them to better fit their usage.
+
+```diff
+ <LocalizationProvider
+   localeText={{
+-    datePickerDefaultToolbarTitle: 'Date Picker',
++    datePickerToolbarTitle: 'Date Picker',
+-    timePickerDefaultToolbarTitle: 'Time Picker',
++    timePickerToolbarTitle: 'Time Picker',
+-    dateTimePickerDefaultToolbarTitle: 'Date Time Picker',
++    dateTimePickerToolbarTitle: 'Date Time Picker',
+-    dateRangePickerDefaultToolbarTitle: 'Date Range Picker',
++    dateRangePickerToolbarTitle: 'Date Range Picker',
+   }}
+ />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/rename-default-toolbar-title-localeText <path>
+```
+
 #### `rename-components-to-slots`
 
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.

package/codemod.js

@@ -77,4 +77,4 @@ _yargs.default.command({
   },
   // @ts-expect-error
   handler: run
-}).scriptName('npx @mui/x-codemod').example('$0 v6.0.0/localization-provider-rename-locale src', 'Run "localization-provider-rename-locale" codemod on "src" path').example('$0 v6.0.0/component-rename-prop src -- --component=DataGrid --from=prop --to=newProp', 'Run "component-rename-prop" codemod in "src" path on "DataGrid" component with custom "from" and "to" arguments').help().parse();
+}).scriptName('npx @mui/x-codemod').example('$0 v6.0.0/preset-safe src', 'Run "preset-safe" codemod on "src" path').example('$0 v6.0.0/component-rename-prop src -- --component=DataGrid --from=prop --to=newProp', 'Run "component-rename-prop" codemod in "src" path on "DataGrid" component with custom "from" and "to" arguments').help().parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-codemod",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.2",
   "bin": "./codemod.js",
   "private": false,
   "author": "MUI Team",

package/util/addComponentsSlots.js

@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.transformNestedProp = exports.addItemToObject = void 0;
 /**
- * Recusive function that:
+ * Recursive function that:
  * Return a jscodeshift object with `value` associated to path.
  * The path can be such as 'tabs.hidden' which will return `{ tabs: { hidden: value } }`.
  * If object is not null, path/value will be added respecting the other properties of the object.
  */
 const addItemToObject = (path, value, object, j) => {
-  const splitedPath = path.split('.');
+  const splittedPath = path.split('.');
 
   // Final case where we have to add the property to the object.
-  if (splitedPath.length === 1) {
+  if (splittedPath.length === 1) {
     const propertyToAdd = j.objectProperty(j.identifier(path), value);
     if (object === null) {
       return j.objectExpression([propertyToAdd]);
     }
     return j.objectExpression([...(object.properties ?? []).filter(property => property.key.name !== path), propertyToAdd]);
   }
-  const remainingPath = splitedPath.slice(1).join('.');
-  const targetKey = splitedPath[0];
+  const remainingPath = splittedPath.slice(1).join('.');
+  const targetKey = splittedPath[0];
   if (object === null) {
     // Simplest case, no object to take into consideration
     const propertyToAdd = j.objectProperty(j.identifier(targetKey), addItemToObject(remainingPath, value, null, j));

package/util/renameNestedProps.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renameNestedProps;
+function renameNestedProps({
+  root,
+  componentNames,
+  nestedProps,
+  j
+}) {
+  return root.find(j.JSXElement).filter(path => componentNames.includes(path.value.openingElement.name.name)).find(j.JSXAttribute).filter(attribute => Object.keys(nestedProps).includes(attribute.node.name.name)).forEach(attribute => {
+    Object.entries(nestedProps).forEach(([rootPropName, props]) => {
+      if (attribute.node.name.name === rootPropName && attribute.node.value?.type === 'JSXExpressionContainer' && attribute.node.value?.expression.type === 'ObjectExpression') {
+        const existingProperties = attribute.node.value.expression.properties;
+        existingProperties.forEach(property => {
+          if (property.type === 'Property' && property.key.type === 'Identifier' && props[property.key.name]) {
+            property.key.name = props[property.key.name];
+          }
+        });
+      }
+    });
+  });
+}

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

@@ -15,6 +15,8 @@ var _replaceToolbarPropsBySlot = _interopRequireDefault(require("../replace-tool
 var _migrateToComponentsComponentsProps = _interopRequireDefault(require("../migrate-to-components-componentsProps"));
 var _replaceArrowsButtonSlot = _interopRequireDefault(require("../replace-arrows-button-slot"));
 var _renameShouldDisableTime = _interopRequireDefault(require("../rename-should-disable-time"));
+var _renameInputFormatProp = _interopRequireDefault(require("../rename-inputFormat-prop"));
+var _renameDefaultToolbarTitleLocaleText = _interopRequireDefault(require("../rename-default-toolbar-title-localeText"));
 function transformer(file, api, options) {
   file.source = (0, _localizationProviderRenameLocale.default)(file, api, options);
 
@@ -28,5 +30,7 @@ function transformer(file, api, options) {
   file.source = (0, _migrateToComponentsComponentsProps.default)(file, api, options);
   file.source = (0, _replaceArrowsButtonSlot.default)(file, api, options);
   file.source = (0, _renameShouldDisableTime.default)(file, api, options);
+  file.source = (0, _renameInputFormatProp.default)(file, api, options);
+  file.source = (0, _renameDefaultToolbarTitleLocaleText.default)(file, api, options);
   return file.source;
 }

package/v6.0.0/pickers/rename-default-toolbar-title-localeText/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _renameNestedProps = _interopRequireDefault(require("../../../util/renameNestedProps"));
+const propsToRename = {
+  localeText: {
+    datePickerDefaultToolbarTitle: 'datePickerToolbarTitle',
+    timePickerDefaultToolbarTitle: 'timePickerToolbarTitle',
+    dateTimePickerDefaultToolbarTitle: 'dateTimePickerToolbarTitle',
+    dateRangePickerDefaultToolbarTitle: 'dateRangePickerToolbarTitle'
+  }
+};
+function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  (0, _renameNestedProps.default)({
+    root,
+    componentNames: ['LocalizationProvider'],
+    nestedProps: propsToRename,
+    j
+  });
+  return root.toSource(printOptions);
+}

package/v6.0.0/pickers/rename-inputFormat-prop/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+/**
+ * @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 node.source.value.startsWith('@mui/x-date-pickers');
+  }).forEach(path => {
+    path.node.specifiers.forEach(node => {
+      // Process only date-pickers components
+      root.findJSXElements(node.local.name).forEach(elementPath => {
+        if (elementPath.node.type !== 'JSXElement') {
+          return;
+        }
+        elementPath.node.openingElement.attributes.forEach(elementNode => {
+          if (elementNode.type !== 'JSXAttribute') {
+            return;
+          }
+          if (elementNode.name.name === 'inputFormat') {
+            elementNode.name.name = 'format';
+          }
+        });
+      });
+    });
+  });
+  const transformed = root.findJSXElements();
+  return transformed.toSource(printOptions);
+}