[codemod] Rename shouldDisableTime prop (#7709)

CHANGELOG.md

@@ -342,7 +342,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
   ```diff
    <DateTimePicker
   -   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
-  +   shouldDisableTime={(time, view) => view === 'hours' && value.hour() < 12}
+  +   shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
    />
   ```
 

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

@@ -138,9 +138,9 @@ The picker components no longer have a keyboard view to render the input inside
 At some point, the mobile pickers should have a prop allowing to have an editable field without opening the modal.
 :::
 
-### Rename `shouldDisableTime` prop
+### ✅ Rename `shouldDisableTime` prop
 
-The `shouldDisableTime` prop signature has been changed. Either rename the prop usage to `shouldDisableClock` or refactor usage.
+The `shouldDisableTime` prop signature has been changed. Either rename the prop to `shouldDisableClock` or refactor usage.
 
 ```diff
  <DateTimePicker
@@ -150,7 +150,7 @@ The `shouldDisableTime` prop signature has been changed. Either rename the prop
 
  <DateTimePicker
 -  shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
-+  shouldDisableTime={(time, view) => view === 'hours' && value.hour() < 12}
++  shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
  />
 ```
 

docs/scripts/addDemoItemsAttributes.js

@@ -25,7 +25,7 @@ export default function transformer(file, api, options) {
   root
     .find(j.ImportDeclaration)
     .filter(({ node }) => {
-      return node.source.value.startsWith('@mui/x-date-picker');
+      return node.source.value.startsWith('@mui/x-date-pickers');
     })
     .forEach((importPath) => {
       importPath.node.specifiers.forEach((node) => {

packages/x-codemod/README.md

@@ -94,6 +94,7 @@ The list includes these transformers
 - [`replace-toolbar-props-by-slot`](#replace-toolbar-props-by-slot)
 - [`migrate-to-components-componentsProps`](#migrate-to-components-componentsProps)
 - [`replace-arrows-button-slot`](#replace-arrows-button-slot)
+- [`rename-should-disable-time`](#rename-should-disable-time)
 
 #### `adapter-change-import`
 
@@ -325,6 +326,21 @@ Replace `LeftArrowButton` and `RightArrowButton` slots for navigation buttons by
 npx @mui/x-codemod v6.0.0/pickers/replace-arrows-button-slot <path>
 ```
 
+#### `rename-should-disable-time`
+
+Replace `shouldDisableTime` by `shouldDisableClock`.
+
+```diff
+  <DateTimePicker
+-   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
++   shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
+  />
+```
+
+```sh
+npx @mui/x-codemod v6.0.0/pickers/rename-should-disable-time <path>
+```
+
 #### `rename-components-to-slots`
 
 Renames the `components` and `componentsProps` props to `slots` and `slotProps`, respectively.

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

@@ -25,6 +25,7 @@ function App() {
           dateRangeIcon={<LightModeIcon />}
           TransitionComponent={Fade}
           DialogProps={{ backgroundColor: 'red' }}
+          shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
         />
         <DateRangePicker
           ToolbarComponent={CustomToolbarComponent}

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

@@ -25,6 +25,7 @@ function App() {
             okButtonLabel: "string_okText"
           }} />
         <DateTimePicker
+          shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
           components={{
             DesktopTransition: Fade,
           }}

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

@@ -7,6 +7,7 @@ import transformReplaceTabsProps from '../replace-tabs-props';
 import transformReplaceToolbarPropsBySlot from '../replace-toolbar-props-by-slot';
 import transformMigrateToComponentsComponetsProps from '../migrate-to-components-componentsProps';
 import transformReplaceArrowsButtonSlot from '../replace-arrows-button-slot';
+import transformRenameShouldDisableTime from '../rename-should-disable-time';
 
 import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
 
@@ -23,6 +24,7 @@ export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftA
   file.source = transformReplaceToolbarPropsBySlot(file, api, options);
   file.source = transformMigrateToComponentsComponetsProps(file, api, options);
   file.source = transformReplaceArrowsButtonSlot(file, api, options);
+  file.source = transformRenameShouldDisableTime(file, api, options);
 
   return file.source;
 }

packages/x-codemod/src/v6.0.0/pickers/rename-components-to-slots/index.ts

@@ -33,7 +33,7 @@ export default function transformer(file, api, options) {
   root
     .find(j.ImportDeclaration)
     .filter(({ node }) => {
-      return node.source.value.startsWith('@mui/x-date-picker');
+      return node.source.value.startsWith('@mui/x-date-pickers');
     })
 
     .forEach((path) => {

packages/x-codemod/src/v6.0.0/pickers/rename-should-disable-time/actual-props.spec.js

@@ -0,0 +1,9 @@
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+const shouldDisable = (timeValue, view) => view === 'hours' && timeValue < 12;
+
+<div>
+  <DateTimePicker shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12} />
+  <TimePicker shouldDisableTime={shouldDisable} />
+</div>;

packages/x-codemod/src/v6.0.0/pickers/rename-should-disable-time/expected-props.spec.js

@@ -0,0 +1,9 @@
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+const shouldDisable = (timeValue, view) => view === 'hours' && timeValue < 12;
+
+<div>
+  <DateTimePicker shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12} />
+  <TimePicker shouldDisableClock={shouldDisable} />
+</div>;

packages/x-codemod/src/v6.0.0/pickers/rename-should-disable-time/index.ts

@@ -0,0 +1,41 @@
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default 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 === 'shouldDisableTime') {
+              elementNode.name.name = 'shouldDisableClock';
+            }
+          });
+        });
+      });
+    });
+
+  const transformed = root.findJSXElements();
+
+  return transformed.toSource(printOptions);
+}

packages/x-codemod/src/v6.0.0/pickers/rename-should-disable-time/rename-should-disable-time.test.ts

@@ -0,0 +1,41 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from './index';
+import readFile from '../../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('v6.0.0/pickers', () => {
+  describe('rename-should-disable-time', () => {
+    it('transforms props as needed', () => {
+      const actual = transform(
+        {
+          source: read('./actual-props.spec.js'),
+          path: require.resolve('./actual-props.spec.js'),
+        },
+        { jscodeshift },
+        {},
+      );
+
+      const expected = read('./expected-props.spec.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('should be idempotent for expression', () => {
+      const actual = transform(
+        {
+          source: read('./expected-props.spec.js'),
+          path: require.resolve('./expected-props.spec.js'),
+        },
+        { jscodeshift },
+        {},
+      );
+
+      const expected = read('./expected-props.spec.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+  });
+});

packages/x-codemod/src/v6.0.0/pickers/replace-arrows-button-slot/index.ts

@@ -13,7 +13,7 @@ export default function transformer(file, api, options) {
   root
     .find(j.ImportDeclaration)
     .filter(({ node }) => {
-      return node.source.value.startsWith('@mui/x-date-picker');
+      return node.source.value.startsWith('@mui/x-date-pickers');
     })
 
     .forEach((path) => {