[pickers] Rename AdapterDateFns into AdapterDateFnsV2 and AdapterDateFnsV3 into AdapterDateFns (mui#16082)

Signed-off-by: Lukas Tyla <[email protected]>
Co-authored-by: Michel Engelen <[email protected]>

Author: LukasTy

babel.config.js

@@ -100,25 +100,23 @@ module.exports = function getBabelConfig(api) {
 
   if (process.env.NODE_ENV === 'test') {
     plugins.push(['@babel/plugin-transform-export-namespace-from']);
-    // We replace `date-fns` imports with an aliased `date-fns@v4` version installed as `date-fns-v4` for tests.
-    // The plugin is patched to only run on `AdapterDateFnsV3.ts`.
-    // TODO: remove when we upgrade to date-fns v4 by default.
+    // We replace `date-fns` imports with an aliased `date-fns@v2` version installed as `date-fns-v2` for tests.
     plugins.push([
       'babel-plugin-replace-imports',
       {
         test: /date-fns/i,
-        replacer: 'date-fns-v4',
+        replacer: 'date-fns-v2',
         // This option is provided by the `patches/[email protected]` patch
-        filenameIncludes: 'src/AdapterDateFnsV3/',
+        filenameIncludes: 'src/AdapterDateFnsV2/',
       },
     ]);
     plugins.push([
       'babel-plugin-replace-imports',
       {
         test: /date-fns-jalali/i,
-        replacer: 'date-fns-jalali-v4',
+        replacer: 'date-fns-jalali-v2',
         // This option is provided by the `patches/[email protected]` patch
-        filenameIncludes: 'src/AdapterDateFnsJalaliV3/',
+        filenameIncludes: 'src/AdapterDateFnsJalaliV2/',
       },
       'replace-date-fns-jalali-imports',
     ]);

docs/data/data-grid/custom-columns/EditingWithDatePickers.js

@@ -16,7 +16,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { enUS as locale } from 'date-fns/locale';
-import format from 'date-fns/format';
+import { format } from 'date-fns/format';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 /**
  * `date` column

docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx

@@ -21,7 +21,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { enUS as locale } from 'date-fns/locale';
-import format from 'date-fns/format';
+import { format } from 'date-fns/format';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 /**
  * `date` column

docs/data/date-pickers/adapters-locale/adapters-locale.md

@@ -45,18 +45,18 @@ We support `date-fns` package v2.x, v3.x, and v4.x major versions.
 
 A single adapter cannot work for all `date-fns` versions, because the way functions are exported has been changed in v3.x.
 
-To use `date-fns` v3.x or v4.x, you need to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV3` instead of `@mui/x-date-pickers/AdapterDateFns`.
+To use `date-fns` v2.x, you need to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV2` instead of `@mui/x-date-pickers/AdapterDateFns`.
 :::
 
 ```tsx
-// with date-fns v2.x
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 // with date-fns v3.x or v4.x
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 // with date-fns v2.x
-import de from 'date-fns/locale/de';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
 // with date-fns v3.x or v4.x
 import { de } from 'date-fns/locale/de';
+// with date-fns v2.x
+import de from 'date-fns/locale/de';
 
 <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
   {children}
@@ -303,10 +303,10 @@ For `date-fns`, override the `options.weekStartsOn` of the used locale:
 
 ```ts
 import { Locale } from 'date-fns';
+// with date-fns v3.x or v4.x
+import { enUS } from 'date-fns/locale/en-US';
 // with date-fns v2.x
 import enUS from 'date-fns/locale/en-US';
-// with date-fns v3.x
-import { enUS } from 'date-fns/locale/en-US';
 
 const customEnLocale: Locale = {
   ...enUS,

docs/data/date-pickers/calendar-systems/calendar-systems.md

@@ -24,13 +24,13 @@ We support `date-fns-jalali` package v2.x, v3.x, and v4.x major versions.
 
 A single adapter cannot work for all `date-fns-jalali` versions, because the way functions are exported has been changed in v3.x.
 
-To use `date-fns-jalali` v3.x or v4.x, you will have to import the adapter from `@mui/x-date-pickers/AdapterDateFnsJalaliV3` instead of `@mui/x-date-pickers/AdapterDateFnsJalali`.
+To use `date-fns-jalali` v2.x, you need to import the adapter from `@mui/x-date-pickers/AdapterDateFnsJalaliV2` instead of `@mui/x-date-pickers/AdapterDateFnsJalali`.
 
 ```tsx
-// with date-fns-jalali v2.x
-import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
 // with date-fns-jalali v3.x or v4.x
-import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+// with date-fns-jalali v2.x
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';
 ```
 
 :::

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

@@ -742,7 +742,7 @@ The following variables and types have been renamed to have a coherent `Picker`
   +const pickerContext = usePickerContext();
   ```
 
-- `FieldValueType`
+- ✅ `FieldValueType`
 
   ```diff
   -import { FieldValueType } from '@mui/x-date-pickers/models';
@@ -1131,6 +1131,36 @@ If you were using them, you need to replace them with the following code:
     +  extends BaseMultiInputPickersTextFieldProps<true> {}
     ```
 
+## ✅ Rename `date-fns` adapter imports
+
+:::warning
+This codemod is not idempotent. Running it multiple times will rename the imports back and forth.
+
+In example: usage of `AdapterDateFnsV3` would be replaced by `AdapterDateFns` and a subsequent run would rename it to `AdapterDateFnsV2`.
+:::
+
+- The `AdapterDateFns` and `AdapterDateFnsJalali` adapters have been renamed to `AdapterDateFnsV2` and `AdapterDateFnsJalaliV2` respectively.
+  If you were using the old imports, you need to update them:
+
+  ```diff
+  -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  -import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+  +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
+  +import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';
+  ```
+
+  Or consider updating the `date-fns` or `date-fns-jalali` package to the latest version and use the updated adapters.
+
+- The `AdapterDateFnsV3` and `AdapterDateFnsJalaliV3` adapters have been renamed to `AdapterDateFns` and `AdapterDateFnsJalali` respectively.
+  If you were using the old imports, you need to update them:
+
+  ```diff
+  -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+  -import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+  +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  +import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+  ```
+
 ## Stop using `LicenseInfo` from `@mui/x-date-pickers-pro`
 
 The `LicenseInfo` object is no longer exported from the `@mui/x-date-pickers-pro` package.

docs/package.json

@@ -61,8 +61,8 @@
     "core-js": "^2.6.12",
     "cross-env": "^7.0.3",
     "d3-scale-chromatic": "^3.1.0",
-    "date-fns": "^2.30.0",
-    "date-fns-jalali": "^2.30.0-0",
+    "date-fns": "^4.1.0",
+    "date-fns-jalali": "^4.1.0-0",
     "dayjs": "^1.11.13",
     "doctrine": "^3.0.0",
     "exceljs": "^4.4.0",

docs/src/modules/components/PickersRenderingInstructions.js

@@ -22,13 +22,13 @@ export default function PickersRenderingInstructions() {
   const commandLines = [
     `import { LocalizationProvider } from '${componentPackage}';`,
     ...(libraryUsed === 'date-fns'
-      ? ['// If you are using date-fns v2.x, please import `AdapterDateFns`']
+      ? ['// If you are using date-fns v3.x or v4.x, please import `AdapterDateFns`']
       : []),
-    `import { ${adapterName} } from '${componentPackage}/${adapterName}'`,
+    `import { ${adapterName} } from '${componentPackage}/${adapterName}';`,
     ...(libraryUsed === 'date-fns'
       ? [
-          '// If you are using date-fns v3.x or v4.x, please import the v3 adapter',
-          `import { ${adapterName} } from '${componentPackage}/AdapterDateFnsV3'`,
+          '// If you are using date-fns v2.x, please import the v2 adapter',
+          `import { ${adapterName} } from '${componentPackage}/AdapterDateFnsV2';`,
         ]
       : []),
     '',

package.json

@@ -134,8 +134,8 @@
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "danger": "^12.3.3",
-    "date-fns-jalali-v4": "npm:date-fns-jalali@4.1.0-0",
-    "date-fns-v4": "npm:date-fns@4.1.0",
+    "date-fns-jalali-v2": "npm:date-fns-jalali@2.30.0-0",
+    "date-fns-v2": "npm:date-fns@2.30.0",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",

packages/x-codemod/README.md

@@ -172,17 +172,15 @@ Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartCo
 +</ChartContainer>
 ```
 
-:::warning
-If you imported both `ResponsiveChartContainer` and `ChartContainer` in the same file, you might end up with duplicated import.
-Verify the git diff to remove the duplicate.
-
-```diff
- import { ChartContainer } from '@mui/x-charts/ChartContainer';
--import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
-+import { ChartContainer } from '@mui/x-charts/ChartContainer';
-```
-
-:::
+> [!WARNING]
+> If you imported both `ResponsiveChartContainer` and `ChartContainer` in the same file, you might end up with duplicated import.
+> Verify the git diff to remove the duplicate.
+>
+> ```diff
+>  import { ChartContainer } from '@mui/x-charts/ChartContainer';
+> -import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+> +import { ChartContainer } from '@mui/x-charts/ChartContainer';
+> ```
 
 #### `rename-label-and-tick-font-size`
 
@@ -249,8 +247,39 @@ npx @mui/x-codemod@next v8.0.0/pickers/preset-safe <path|folder>
 
 The list includes these transformers
 
+- [`rename-adapter-date-fns-imports`](#rename-adapter-date-fns-imports)
 - [`rename-and-move-field-value-type`](#rename-and-move-field-value-type)
 
+#### `rename-adapter-date-fns-imports`
+
+> [!WARNING]
+> This codemod is not idempotent. Running it multiple times will rename the imports back and forth.
+> Usage of `AdapterDateFnsV3` would be replaced by `AdapterDateFns` and a subsequent run would rename it to `AdapterDateFnsV2`.
+
+- Renames `AdapterDateFns` and `AdapterDateFnsJalali` imports to `AdapterDateFnsV2` and `AdapterDateFnsJalaliV2` respectfully.
+
+  ```diff
+  -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  -import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+  +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
+  +import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';
+  ```
+
+- Renames `AdapterDateFnsV3` and `AdapterDateFnsJalaliV3` imports to `AdapterDateFns` and `AdapterDateFnsJalali` respectfully.
+
+  ```diff
+  -import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+  -import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+  +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  +import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+  ```
+
+<!-- #default-branch-switch -->
+
+```bash
+npx @mui/x-codemod@next v8.0.0/pickers/rename-adapter-date-fns-imports <path>
+```
+
 #### `rename-and-move-field-value-type`
 
 Renames `FieldValueType` to `PickerValueType`.

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

@@ -1,8 +1,10 @@
+import transformAdapterDateFnsImports from '../rename-adapter-date-fns-imports';
 import transformFieldValue from '../rename-and-move-field-value-type';
 
 import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
 
 export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
+  file.source = transformAdapterDateFnsImports(file, api, options);
   file.source = transformFieldValue(file, api, options);
 
   return file.source;

packages/x-codemod/src/v8.0.0/pickers/rename-adapter-date-fns-imports/actual-community-import.spec.tsx

@@ -0,0 +1,5 @@
+// @ts-nocheck
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { AdapterDateFns as DateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+import { AdapterDateFnsJalali as DateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';

packages/x-codemod/src/v8.0.0/pickers/rename-adapter-date-fns-imports/actual-pro-import.spec.tsx

@@ -0,0 +1,5 @@
+// @ts-nocheck
+import { AdapterDateFns } from '@mui/x-date-pickers-pro/AdapterDateFnsV3';
+import { AdapterDateFns as DateFns } from '@mui/x-date-pickers-pro/AdapterDateFns';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers-pro/AdapterDateFnsJalaliV3';
+import { AdapterDateFnsJalali as DateFnsJalali } from '@mui/x-date-pickers-pro/AdapterDateFnsJalali';

packages/x-codemod/src/v8.0.0/pickers/rename-adapter-date-fns-imports/expected-community-import.spec.tsx

@@ -0,0 +1,4 @@
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDateFns as DateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+import { AdapterDateFnsJalali as DateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';

packages/x-codemod/src/v8.0.0/pickers/rename-adapter-date-fns-imports/expected-pro-import.spec.tsx

@@ -0,0 +1,4 @@
+import { AdapterDateFns } from '@mui/x-date-pickers-pro/AdapterDateFns';
+import { AdapterDateFns as DateFns } from '@mui/x-date-pickers-pro/AdapterDateFnsV2';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers-pro/AdapterDateFnsJalali';
+import { AdapterDateFnsJalali as DateFnsJalali } from '@mui/x-date-pickers-pro/AdapterDateFnsJalaliV2';

packages/x-codemod/src/v8.0.0/pickers/rename-adapter-date-fns-imports/index.ts

@@ -0,0 +1,49 @@
+import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
+import { renameImports } from '../../../util/renameImports';
+
+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,
+  };
+
+  renameImports({
+    j,
+    root,
+    packageNames: ['@mui/x-date-pickers', '@mui/x-date-pickers-pro'],
+    imports: [
+      {
+        oldEndpoint: 'AdapterDateFns',
+        newEndpoint: 'AdapterDateFnsV2',
+        importsMapping: {
+          AdapterDateFns: 'AdapterDateFns',
+        },
+      },
+      {
+        oldEndpoint: 'AdapterDateFnsV3',
+        newEndpoint: 'AdapterDateFns',
+        importsMapping: {
+          AdapterDateFns: 'AdapterDateFns',
+        },
+      },
+      {
+        oldEndpoint: 'AdapterDateFnsJalali',
+        newEndpoint: 'AdapterDateFnsJalaliV2',
+        importsMapping: {
+          AdapterDateFnsJalali: 'AdapterDateFnsJalali',
+        },
+      },
+      {
+        oldEndpoint: 'AdapterDateFnsJalaliV3',
+        newEndpoint: 'AdapterDateFnsJalali',
+        importsMapping: {
+          AdapterDateFnsJalali: 'AdapterDateFnsJalali',
+        },
+      },
+    ],
+  });
+  return root.toSource(printOptions);
+}

packages/x-codemod/src/v8.0.0/pickers/rename-adapter-date-fns-imports/rename-adapter-date-fns-imports.test.ts

@@ -0,0 +1,33 @@
+import path from 'path';
+import { expect } from 'chai';
+import jscodeshift from 'jscodeshift';
+import transform from '.';
+import readFile from '../../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+const TEST_FILES = ['community-import', 'pro-import'];
+
+describe('v8.0.0/pickers', () => {
+  describe('rename-adapter-date-fns-imports', () => {
+    TEST_FILES.forEach((testFile) => {
+      const actualPath = `./actual-${testFile}.spec.tsx`;
+      const expectedPath = `./expected-${testFile}.spec.tsx`;
+
+      describe(`${testFile.replace(/-/g, ' ')}`, () => {
+        it('transforms imports as needed', () => {
+          const actual = transform(
+            { source: read(actualPath) },
+            { jscodeshift: jscodeshift.withParser('tsx') },
+            {},
+          );
+
+          const expected = read(expectedPath);
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+    });
+  });
+});

packages/x-data-grid-premium/package.json

@@ -76,7 +76,7 @@
     "@mui/material": "^5.16.13",
     "@mui/system": "^5.16.13",
     "@types/prop-types": "^15.7.14",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "rimraf": "^6.0.1"
   },
   "engines": {

packages/x-data-grid-premium/src/tests/license.DataGridPremium.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import addYears from 'date-fns/addYears';
+import { addYears } from 'date-fns/addYears';
 import { expect } from 'chai';
 import { createRenderer, screen, waitFor } from '@mui/internal-test-utils';
 import { DataGridPremium } from '@mui/x-data-grid-premium';