Skip to content

Commit

Permalink
[codemod] Add missing preset-safe for the data-grid (#15709)
Browse files Browse the repository at this point in the history
Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>
  • Loading branch information
arminmeh and LukasTy authored Dec 3, 2024
1 parent 8bfe9da commit b3e67a0
Show file tree
Hide file tree
Showing 6 changed files with 184 additions and 49 deletions.
148 changes: 99 additions & 49 deletions packages/x-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<!-- #default-branch-switch -->

```bash
npx @mui/x-codemod@latest v8.0.0/preset-safe <path|folder>
npx @mui/x-codemod@next v8.0.0/preset-safe <path|folder>
```

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.
<!-- #default-branch-switch -->

```bash
npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe <path|folder>
npx @mui/x-codemod@next v8.0.0/tree-view/preset-safe <path|folder>
```

The list includes these transformers
Expand All @@ -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 (
- <TreeView>
+ <SimpleTreeView>
<TreeItem itemId="1" label="First item" />
- </TreeView>
+ </SimpleTreeView>
);
return (
- <TreeView>
+ <SimpleTreeView>
<TreeItem itemId="1" label="First item" />
- </TreeView>
+ </SimpleTreeView>
);
```

#### `rename-tree-item-2`
Expand All @@ -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.

<!-- #default-branch-switch -->

```bash
npx @mui/x-codemod@latest v8.0.0/charts/preset-safe <path|folder>
npx @mui/x-codemod@next v8.0.0/charts/preset-safe <path|folder>
```

The list includes these transformers
Expand All @@ -143,25 +151,25 @@ The list includes these transformers
Renames legend props to the corresponding slotProps.

```diff
<LineChart
- legend={{ hiden: true}}
+ slotProps={{ legend: { hiden: true} }}
/>
<LineChart
- legend={{ hiden: true}}
+ slotProps={{ legend: { hiden: true} }}
/>
```

#### `rename-responsive-chart-container`

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';

- <ResponsiveChartContainer>
+ <ChartContainer>
-<ResponsiveChartContainer>
+<ChartContainer>
<BarPlot />
- </ResponsiveChartContainer>
+ </ChartContainer>
-</ResponsiveChartContainer>
+</ChartContainer>
```

:::warning
Expand All @@ -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';
```

:::
Expand All @@ -181,16 +189,16 @@ Verify the git diff to remove the duplicate.
Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle` prop.

```diff
<ChartsXAxis
- labelFontSize={18}
+ labelStyle={{
+ fontSize: 18
+ }}
- tickFontSize={20}
+ tickStyle={{
+ fontSize: 20
+ }}
/>
<ChartsXAxis
- labelFontSize={18}
+ labelStyle={{
+ fontSize: 18
+ }}
- tickFontSize={20}
+ tickStyle={{
+ fontSize: 20
+ }}
/>
```

### Data Grid codemods
Expand All @@ -199,8 +207,10 @@ Renames `labelFontSize` and `tickFontSize` props to the corresponding `xxxStyle`

The `preset-safe` codemods for Data Grid.

<!-- #default-branch-switch -->

```bash
npx @mui/x-codemod@latest v8.0.0/data-grid/preset-safe <path|folder>
npx @mui/x-codemod@next v8.0.0/data-grid/preset-safe <path|folder>
```

The list includes these transformers
Expand All @@ -219,8 +229,48 @@ Remove feature flags for stabilized `experimentalFeatures`.
/>
```

<!-- #default-branch-switch -->

```bash
npx @mui/x-codemod@next v8.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
```

### Pickers codemods

#### `preset-safe` for Pickers v8.0.0

The `preset-safe` codemods for Pickers.

<!-- #default-branch-switch -->

```bash
npx @mui/x-codemod@latest v8.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
npx @mui/x-codemod@next v8.0.0/pickers/preset-safe <path|folder>
```

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;
}
```

<!-- #default-branch-switch -->

```bash
npx @mui/x-codemod@next v8.0.0/pickers/rename-and-move-field-value-type <path>
```

## v7.0.0
Expand All @@ -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 <path|folder>
Expand Down Expand Up @@ -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 (
- <TreeView>
+ <SimpleTreeView>
<TreeItem itemId="1" label="First item" />
- </TreeView>
+ </SimpleTreeView>
);
return (
- <TreeView>
+ <SimpleTreeView>
<TreeItem itemId="1" label="First item" />
- </TreeView>
+ </SimpleTreeView>
);
```

#### `rename-use-tree-item`
Expand Down Expand Up @@ -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 <path|folder>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// @ts-nocheck
import * as React from 'react';
import { DataGridPremium } from '@mui/x-data-grid-premium';

// prettier-ignore
<React.Fragment>
<DataGridPremium
experimentalFeatures={{
warnIfFocusStateIsNotSynced: true,
ariaV8: true,
}}
/>
<DataGridPremium
experimentalFeatures={{
ariaV8: true,
}}
/>
<DataGridPremium {...props} />
</React.Fragment>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// @ts-nocheck
import * as React from 'react';
import { DataGridPremium } from '@mui/x-data-grid-premium';

// prettier-ignore
<React.Fragment>
<DataGridPremium
experimentalFeatures={{
warnIfFocusStateIsNotSynced: true,
}}
/>
<DataGridPremium />
<DataGridPremium {...props} />
</React.Fragment>;
9 changes: 9 additions & 0 deletions packages/x-codemod/src/v8.0.0/data-grid/preset-safe/index.ts
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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');
});
});
});
2 changes: 2 additions & 0 deletions packages/x-codemod/src/v8.0.0/preset-safe/index.ts
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit b3e67a0

Please sign in to comment.