[codemod] Add pickers rename-default-toolbar-title-localeText codemod (#7752)

Author: LukasTy

CHANGELOG.md

@@ -1368,8 +1368,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 - The toolbar related translation keys have been renamed to better fit their usage:
 
   ```diff
-   // Same on all other pickers
-   <DatePicker
+   <LocalizationProvider
      localeText={{
   -    datePickerDefaultToolbarTitle: 'Date Picker',
   +    datePickerToolbarTitle: 'Date Picker',

docs/data/migration/migration-pickers-v5/migration-pickers-v5.md

@@ -479,11 +479,11 @@ For example, the `ToolbarComponent` has been replaced by a `Toolbar` component s
    />
   ```
 
-- The toolbar related translation keys have been renamed to better fit their usage:
+- ✅ The toolbar related translation keys have been renamed to better fit their usage:
 
   ```diff
-   <DatePicker
-    localeText={{
+   <LocalizationProvider
+     localeText={{
   -    datePickerDefaultToolbarTitle: 'Date Picker',
   +    datePickerToolbarTitle: 'Date Picker',
 
@@ -495,7 +495,7 @@ For example, the `ToolbarComponent` has been replaced by a `Toolbar` component s
 
   -    dateRangePickerDefaultToolbarTitle: 'Date Range Picker',
   +    dateRangePickerToolbarTitle: 'Date Range Picker',
-    }}
+     }}
    />
   ```
 

packages/x-codemod/README.md

@@ -96,6 +96,7 @@ The list includes these transformers
 - [`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`
 
@@ -357,6 +358,29 @@ Replace `inputFormat` prop with `format`.
 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.

packages/x-codemod/src/util/renameNestedProps.ts

@@ -0,0 +1,41 @@
+import type { Collection, JSCodeshift } from 'jscodeshift';
+
+interface RenamePropsArgs {
+  root: Collection<any>;
+  componentNames: string[];
+  nestedProps: Record<string, Record<string, any>>;
+  j: JSCodeshift;
+}
+
+export default function renameNestedProps({
+  root,
+  componentNames,
+  nestedProps,
+  j,
+}: RenamePropsArgs) {
+  return root
+    .find(j.JSXElement)
+    .filter((path) => componentNames.includes((path.value.openingElement.name as any).name))
+    .find(j.JSXAttribute)
+    .filter((attribute) => Object.keys(nestedProps).includes(attribute.node.name.name as string))
+    .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];
+            }
+          });
+        }
+      });
+    });
+}

packages/x-codemod/src/v6.0.0/pickers/preset-safe/actual.spec.js

@@ -11,7 +11,13 @@ const theme = createTheme({});
 function App() {
   return (
     <ThemeProvider theme={theme}>
-      <LocalizationProvider dateAdapter={DayjsUtils} locale="fr">
+      <LocalizationProvider
+        dateAdapter={DayjsUtils}
+        locale="fr"
+        localeText={{
+          datePickerDefaultToolbarTitle: 'Pick a Date',
+        }}
+      >
         <CalendarPicker
           date={null}
           onChange={() => {}}

packages/x-codemod/src/v6.0.0/pickers/preset-safe/expected.spec.js

@@ -11,7 +11,13 @@ const theme = createTheme({});
 function App() {
   return (
     <ThemeProvider theme={theme}>
-      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
+      <LocalizationProvider
+        dateAdapter={AdapterDayjs}
+        adapterLocale="fr"
+        localeText={{
+          datePickerToolbarTitle: 'Pick a Date',
+        }}
+      >
         <DateCalendar
           value={null}
           onChange={() => {}}

packages/x-codemod/src/v6.0.0/pickers/preset-safe/index.ts

@@ -9,6 +9,7 @@ import transformMigrateToComponentsComponentsProps from '../migrate-to-component
 import transformReplaceArrowsButtonSlot from '../replace-arrows-button-slot';
 import transformRenameShouldDisableTime from '../rename-should-disable-time';
 import transformRenameInputFormatProp from '../rename-inputFormat-prop';
+import transformRenameDefaultToolbarTitleLocaleText from '../rename-default-toolbar-title-localeText';
 
 import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
 
@@ -27,6 +28,7 @@ export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftA
   file.source = transformReplaceArrowsButtonSlot(file, api, options);
   file.source = transformRenameShouldDisableTime(file, api, options);
   file.source = transformRenameInputFormatProp(file, api, options);
+  file.source = transformRenameDefaultToolbarTitleLocaleText(file, api, options);
 
   return file.source;
 }

packages/x-codemod/src/v6.0.0/pickers/rename-default-toolbar-title-localeText/actual.spec.js

@@ -0,0 +1,11 @@
+<LocalizationProvider
+  localeText={{
+    start: 'Check-in',
+    datePickerDefaultToolbarTitle: 'Pick a Date',
+    timePickerDefaultToolbarTitle: 'Pick a Time',
+    dateTimePickerDefaultToolbarTitle: 'Pick a Date and Time',
+    dateRangePickerDefaultToolbarTitle: 'Pick a Date Range',
+  }}
+>
+  <DatePicker />
+</LocalizationProvider>;

packages/x-codemod/src/v6.0.0/pickers/rename-default-toolbar-title-localeText/expected.spec.js

@@ -0,0 +1,11 @@
+<LocalizationProvider
+  localeText={{
+    start: 'Check-in',
+    datePickerToolbarTitle: 'Pick a Date',
+    timePickerToolbarTitle: 'Pick a Time',
+    dateTimePickerToolbarTitle: 'Pick a Date and Time',
+    dateRangePickerToolbarTitle: 'Pick a Date Range',
+  }}
+>
+  <DatePicker />
+</LocalizationProvider>;

packages/x-codemod/src/v6.0.0/pickers/rename-default-toolbar-title-localeText/index.ts

@@ -0,0 +1,30 @@
+import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
+import renameNestedProps from '../../../util/renameNestedProps';
+
+const propsToRename = {
+  localeText: {
+    datePickerDefaultToolbarTitle: 'datePickerToolbarTitle',
+    timePickerDefaultToolbarTitle: 'timePickerToolbarTitle',
+    dateTimePickerDefaultToolbarTitle: 'dateTimePickerToolbarTitle',
+    dateRangePickerDefaultToolbarTitle: 'dateRangePickerToolbarTitle',
+  },
+};
+
+export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+  };
+
+  renameNestedProps({
+    root,
+    componentNames: ['LocalizationProvider'],
+    nestedProps: propsToRename,
+    j,
+  });
+
+  return root.toSource(printOptions);
+}