From 33242b954b1f64d7a072e9e8179cf8930b03dd5d Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Tue, 3 Dec 2024 09:46:05 +0100 Subject: [PATCH 1/5] Add missing preset-sage for the data grid --- .../data-grid/preset-safe/actual.spec.tsx | 19 +++++++++ .../data-grid/preset-safe/expected.spec.tsx | 14 +++++++ .../src/v8.0.0/data-grid/preset-safe/index.ts | 9 ++++ .../data-grid/preset-safe/preset-safe.test.ts | 41 +++++++++++++++++++ .../x-codemod/src/v8.0.0/preset-safe/index.ts | 2 + 5 files changed, 85 insertions(+) create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/preset-safe/actual.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/preset-safe/expected.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/preset-safe/index.ts create mode 100644 packages/x-codemod/src/v8.0.0/data-grid/preset-safe/preset-safe.test.ts diff --git a/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/actual.spec.tsx new file mode 100644 index 000000000000..cf559442177e --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/actual.spec.tsx @@ -0,0 +1,19 @@ +// @ts-nocheck +import * as React from 'react'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; + +// prettier-ignore + + + + +; diff --git a/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/expected.spec.tsx new file mode 100644 index 000000000000..2339318553f7 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/expected.spec.tsx @@ -0,0 +1,14 @@ +// @ts-nocheck +import * as React from 'react'; +import { DataGridPremium } from '@mui/x-data-grid-premium'; + +// prettier-ignore + + + + +; diff --git a/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/index.ts new file mode 100644 index 000000000000..0d1184947b41 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/index.ts @@ -0,0 +1,9 @@ +import removeExperimentalFeatures from '../remove-stabilized-experimentalFeatures'; + +import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; + +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + file.source = removeExperimentalFeatures(file, api, options); + + return file.source; +} diff --git a/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/preset-safe.test.ts b/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/preset-safe.test.ts new file mode 100644 index 000000000000..9af3bd0f15eb --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/data-grid/preset-safe/preset-safe.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('v8.0.0/data-grid', () => { + describe('preset-safe', () => { + it('transforms code as needed', () => { + const actual = transform( + { + source: read('./actual.spec.tsx'), + path: require.resolve('./actual.spec.tsx'), + }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read('./expected.spec.tsx'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent for expression', () => { + const actual = transform( + { + source: read('./expected.spec.tsx'), + path: require.resolve('./expected.spec.tsx'), + }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read('./expected.spec.tsx'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); diff --git a/packages/x-codemod/src/v8.0.0/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/preset-safe/index.ts index 22dbdb1f79e4..c68ec3e41315 100644 --- a/packages/x-codemod/src/v8.0.0/preset-safe/index.ts +++ b/packages/x-codemod/src/v8.0.0/preset-safe/index.ts @@ -1,12 +1,14 @@ import transformTreeView from '../tree-view/preset-safe'; import transformPickers from '../pickers/preset-safe'; import transformCharts from '../charts/preset-safe'; +import transformDataGrid from '../data-grid/preset-safe'; import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../types'; export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { file.source = transformTreeView(file, api, options); file.source = transformPickers(file, api, options); file.source = transformCharts(file, api, options); + file.source = transformDataGrid(file, api, options); return file.source; } From 779d77a2caf2d5d41302f32216fc35abf81dce92 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Tue, 3 Dec 2024 09:46:19 +0100 Subject: [PATCH 2/5] Align and update the readme file --- packages/x-codemod/README.md | 78 ++++++++++++++++++++++++++---------- 1 file changed, 57 insertions(+), 21 deletions(-) diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index a5b6bd29fcaa..5c088d40f45b 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -74,6 +74,8 @@ The corresponding sub-sections are listed below - [`preset-safe-for-tree-view`](#preset-safe-for-tree-view-v800) - [`preset-safe-for-charts`](#preset-safe-for-charts-v800) +- [`preset-safe-for-data-grid`](#preset-safe-for-data-grid-v800) +- [`preset-safe-for-pickers`](#preset-safe-for-pickers-v800) ### Tree View codemods @@ -95,19 +97,19 @@ The list includes these transformers Renames the Tree View component to Simple Tree View ```diff --import { TreeView } from '@mui/x-tree-view'; -+import { SimpleTreeView } from '@mui/x-tree-view'; +- import { TreeView } from '@mui/x-tree-view'; ++ import { SimpleTreeView } from '@mui/x-tree-view'; --import { TreeView } from '@mui/x-tree-view/TreeView'; -+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +- import { TreeView } from '@mui/x-tree-view/TreeView'; ++ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; - return ( -- -+ - -- -+ - ); + return ( +- ++ + +- ++ + ); ``` #### `rename-tree-item-2` @@ -115,11 +117,11 @@ Renames the Tree View component to Simple Tree View Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or utils like `useTreeItem2` or `TreeItem2Icon`). ```diff --import { TreeItem2 } from '@mui/x-tree-view'; -+import { TreeItem } from '@mui/x-tree-view'; +- import { TreeItem2 } from '@mui/x-tree-view'; ++ import { TreeItem } from '@mui/x-tree-view'; --import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; -+import { TreeItem } from '@mui/x-tree-view/TreeItem'; +- import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; ++ import { TreeItem } from '@mui/x-tree-view/TreeItem'; ``` ### Charts codemods @@ -159,7 +161,7 @@ Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartCo - + - + - + ``` @@ -212,17 +214,51 @@ The list includes these transformers Remove feature flags for stabilized `experimentalFeatures`. ```diff - + ``` ```bash npx @mui/x-codemod@latest v8.0.0/data-grid/remove-stabilized-experimentalFeatures ``` +### Pickers codemods + +#### `preset-safe` for pickers v8.0.0 + +The `preset-safe` codemods for pickers. + +```bash +npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe +``` + +The list includes these transformers + +- [`rename-and-move-field-value-type`](#rename-and-move-field-value-type) + +#### `rename-and-move-field-value-type` + +Renames `FieldValueType` to `PickerValueType`. + +```diff +- import { FieldValueType } from '@mui/x-date-pickers'; ++ import { PickerValueType } from '@mui/x-date-pickers'; + + interface MyComponentProps { +- valueType: FieldValueType; ++ valueType: PickerValueType; + foo: string; + bar: number; + } +``` + +```bash +npx @mui/x-codemod@latest v8.0.0/pickers/rename-and-move-field-value-type +``` + ## v7.0.0 ### 🚀 `preset-safe` for v7.0.0 From b6dd154faa33f4da8a05aa47e2ef0a8e39b6ba52 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Date: Tue, 3 Dec 2024 10:33:56 +0100 Subject: [PATCH 3/5] Update readme Co-authored-by: Lukas Tyla Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> --- packages/x-codemod/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index 5c088d40f45b..e933ab186cee 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -227,12 +227,13 @@ npx @mui/x-codemod@latest v8.0.0/data-grid/remove-stabilized-experimentalFeature ### Pickers codemods -#### `preset-safe` for pickers v8.0.0 +#### `preset-safe` for Pickers v8.0.0 -The `preset-safe` codemods for pickers. +The `preset-safe` codemods for Pickers. ```bash -npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe + +npx @mui/x-codemod@next v8.0.0/pickers/preset-safe ``` The list includes these transformers @@ -256,7 +257,8 @@ Renames `FieldValueType` to `PickerValueType`. ``` ```bash -npx @mui/x-codemod@latest v8.0.0/pickers/rename-and-move-field-value-type + +npx @mui/x-codemod@next v8.0.0/pickers/rename-and-move-field-value-type ``` ## v7.0.0 From 26669f179590624b736d65224ce26afb6bd95f8c Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Tue, 3 Dec 2024 10:41:05 +0100 Subject: [PATCH 4/5] Hide branch comment. Align titles --- packages/x-codemod/README.md | 42 +++++++++++++++++++++++------------- 1 file changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index e933ab186cee..cdf92b559513 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -66,8 +66,10 @@ A combination of all important transformers for migrating v7 to v8. It runs codemods for all MUI X packages (Data Grid, Date and Time Pickers, Tree View, and Charts). To run codemods for a specific package, refer to the respective section. + + ```bash -npx @mui/x-codemod@latest v8.0.0/preset-safe +npx @mui/x-codemod@next v8.0.0/preset-safe ``` The corresponding sub-sections are listed below @@ -79,12 +81,14 @@ The corresponding sub-sections are listed below ### Tree View codemods -#### `preset-safe` for tree view v8.0.0 +#### `preset-safe` for Tree View v8.0.0 -The `preset-safe` codemods for tree view. +The `preset-safe` codemods for Tree View. + + ```bash -npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe +npx @mui/x-codemod@next v8.0.0/tree-view/preset-safe ``` The list includes these transformers @@ -126,12 +130,14 @@ Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or u ### Charts codemods -#### `preset-safe` for charts v8.0.0 +#### `preset-safe` for Charts v8.0.0 -The `preset-safe` codemods for charts. +The `preset-safe` codemods for Charts. + + ```bash -npx @mui/x-codemod@latest v8.0.0/charts/preset-safe +npx @mui/x-codemod@next v8.0.0/charts/preset-safe ``` The list includes these transformers @@ -201,8 +207,10 @@ Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle` The `preset-safe` codemods for Data Grid. + + ```bash -npx @mui/x-codemod@latest v8.0.0/data-grid/preset-safe +npx @mui/x-codemod@next v8.0.0/data-grid/preset-safe ``` The list includes these transformers @@ -221,8 +229,10 @@ Remove feature flags for stabilized `experimentalFeatures`. /> ``` + + ```bash -npx @mui/x-codemod@latest v8.0.0/data-grid/remove-stabilized-experimentalFeatures +npx @mui/x-codemod@next v8.0.0/data-grid/remove-stabilized-experimentalFeatures ``` ### Pickers codemods @@ -231,8 +241,9 @@ npx @mui/x-codemod@latest v8.0.0/data-grid/remove-stabilized-experimentalFeature The `preset-safe` codemods for Pickers. -```bash + +```bash npx @mui/x-codemod@next v8.0.0/pickers/preset-safe ``` @@ -256,8 +267,9 @@ Renames `FieldValueType` to `PickerValueType`. } ``` -```bash + +```bash npx @mui/x-codemod@next v8.0.0/pickers/rename-and-move-field-value-type ``` @@ -282,9 +294,9 @@ The corresponding sub-sections are listed below ### Pickers codemods -#### `preset-safe` for pickers v7.0.0 +#### `preset-safe` for Pickers v7.0.0 -The `preset-safe` codemods for pickers. +The `preset-safe` codemods for Pickers. ```bash npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe @@ -583,9 +595,9 @@ The corresponding sub-sections are listed below ### Pickers codemods -#### `preset-safe` for pickers v6.0.0 +#### `preset-safe` for Pickers v6.0.0 -The `preset-safe` codemods for pickers. +The `preset-safe` codemods for Pickers. ```bash npx @mui/x-codemod@latest v6.0.0/pickers/preset-safe From 9a762ab87e1495dfcc584913ba29cc56eef31e8d Mon Sep 17 00:00:00 2001 From: Armin Mehinovic Date: Tue, 3 Dec 2024 10:46:18 +0100 Subject: [PATCH 5/5] diff formatting --- packages/x-codemod/README.md | 118 +++++++++++++++++------------------ 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index cdf92b559513..8f0442b8f022 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -101,19 +101,19 @@ The list includes these transformers Renames the Tree View component to Simple Tree View ```diff -- import { TreeView } from '@mui/x-tree-view'; -+ import { SimpleTreeView } from '@mui/x-tree-view'; +-import { TreeView } from '@mui/x-tree-view'; ++import { SimpleTreeView } from '@mui/x-tree-view'; -- import { TreeView } from '@mui/x-tree-view/TreeView'; -+ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +-import { TreeView } from '@mui/x-tree-view/TreeView'; ++import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; - return ( -- -+ - -- -+ - ); + return ( +- ++ + +- ++ + ); ``` #### `rename-tree-item-2` @@ -121,11 +121,11 @@ Renames the Tree View component to Simple Tree View Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or utils like `useTreeItem2` or `TreeItem2Icon`). ```diff -- import { TreeItem2 } from '@mui/x-tree-view'; -+ import { TreeItem } from '@mui/x-tree-view'; +-import { TreeItem2 } from '@mui/x-tree-view'; ++import { TreeItem } from '@mui/x-tree-view'; -- import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; -+ import { TreeItem } from '@mui/x-tree-view/TreeItem'; +-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; ++import { TreeItem } from '@mui/x-tree-view/TreeItem'; ``` ### Charts codemods @@ -151,10 +151,10 @@ The list includes these transformers Renames legend props to the corresponding slotProps. ```diff - + ``` #### `rename-responsive-chart-container` @@ -162,14 +162,14 @@ Renames legend props to the corresponding slotProps. Renames `ResponsiveChartContainer` and `ResponsiveChartContainerPro` by `ChartContainer` and `ChartContainerPro` which have the same behavior in v8. ```diff -- import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; -+ import { ChartContainer } from '@mui/x-charts/ChartContainer'; +-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; ++import { ChartContainer } from '@mui/x-charts/ChartContainer'; -- -+ - -- -+ +- ++ + +- ++ ``` :::warning @@ -178,8 +178,8 @@ 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'; +-import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; ++import { ChartContainer } from '@mui/x-charts/ChartContainer'; ``` ::: @@ -189,16 +189,16 @@ Verify the git diff to remove the duplicate. Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle` prop. ```diff - + ``` ### Data Grid codemods @@ -222,11 +222,11 @@ The list includes these transformers Remove feature flags for stabilized `experimentalFeatures`. ```diff - + ``` @@ -256,15 +256,15 @@ The list includes these transformers Renames `FieldValueType` to `PickerValueType`. ```diff -- import { FieldValueType } from '@mui/x-date-pickers'; -+ import { PickerValueType } from '@mui/x-date-pickers'; - - interface MyComponentProps { -- valueType: FieldValueType; -+ valueType: PickerValueType; - foo: string; - bar: number; - } +-import { FieldValueType } from '@mui/x-date-pickers'; ++import { PickerValueType } from '@mui/x-date-pickers'; + + interface MyComponentProps { +- valueType: FieldValueType; ++ valueType: PickerValueType; + foo: string; + bar: number; + } ``` @@ -473,13 +473,13 @@ Renames the Tree View component to Simple Tree View -import { TreeView } from '@mui/x-tree-view/TreeView'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; - return ( -- -+ - -- -+ - ); + return ( +- ++ + +- ++ + ); ``` #### `rename-use-tree-item`