Skip to content

Commit

Permalink
[pickers] Rename AdapterDateFns into AdapterDateFnsV2 and `Adapte…
Browse files Browse the repository at this point in the history
…rDateFnsV3` into `AdapterDateFns` (mui#16082)

Signed-off-by: Lukas Tyla <[email protected]>
Co-authored-by: Michel Engelen <[email protected]>
  • Loading branch information
LukasTy and michelengelen authored Jan 7, 2025
1 parent 0a7ba21 commit f1332f1
Show file tree
Hide file tree
Showing 37 changed files with 436 additions and 295 deletions.
12 changes: 5 additions & 7 deletions babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 7 additions & 7 deletions docs/data/date-pickers/adapters-locale/adapters-locale.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions docs/data/date-pickers/calendar-systems/calendar-systems.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
```

:::
Expand Down
32 changes: 31 additions & 1 deletion docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 4 additions & 4 deletions docs/src/modules/components/PickersRenderingInstructions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';`,
]
: []),
'',
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
51 changes: 40 additions & 11 deletions packages/x-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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`.
Expand Down
2 changes: 2 additions & 0 deletions packages/x-codemod/src/v8.0.0/pickers/preset-safe/index.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
@@ -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');
});
});
});
});
});
2 changes: 1 addition & 1 deletion packages/x-data-grid-premium/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Loading

0 comments on commit f1332f1

Please sign in to comment.