From b3e67a0a2029c3fb068b8d1a7219c41c289829c3 Mon Sep 17 00:00:00 2001 From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Date: Tue, 3 Dec 2024 15:04:37 +0100 Subject: [PATCH] [codemod] Add missing `preset-safe` for the data-grid (#15709) Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Co-authored-by: Lukas Tyla --- packages/x-codemod/README.md | 148 ++++++++++++------ .../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 + 6 files changed, 184 insertions(+), 49 deletions(-) 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/README.md b/packages/x-codemod/README.md index a5b6bd29fcaab..8f0442b8f0220 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -66,23 +66,29 @@ 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 - [`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 -#### `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 @@ -101,13 +107,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-tree-item-2` @@ -124,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 @@ -143,10 +151,10 @@ The list includes these transformers Renames legend props to the corresponding slotProps. ```diff - + ``` #### `rename-responsive-chart-container` @@ -154,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 @@ -170,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'; ``` ::: @@ -181,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 @@ -199,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 @@ -219,8 +229,48 @@ Remove feature flags for stabilized `experimentalFeatures`. /> ``` + + +```bash +npx @mui/x-codemod@next 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/data-grid/remove-stabilized-experimentalFeatures +npx @mui/x-codemod@next 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@next v8.0.0/pickers/rename-and-move-field-value-type ``` ## v7.0.0 @@ -244,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 @@ -423,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` @@ -545,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 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 0000000000000..cf559442177ee --- /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 0000000000000..2339318553f75 --- /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 0000000000000..0d1184947b414 --- /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 0000000000000..9af3bd0f15eb5 --- /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 22dbdb1f79e4e..c68ec3e413159 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; }