[codemod] Add a codemod and update the grid migration guide (#12488)

docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md

@@ -122,7 +122,7 @@ As a result, the following changes have been made:
 
 ### Removed props
 
-- The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details.
+- ✅ The deprecated props `components` and `componentsProps` have been removed. Use `slots` and `slotProps` instead. See [components section](/x/react-data-grid/components/) for more details.
 - The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead.
 - The `getOptionValue` and `getOptionLabel` props were removed from the following components:
 
@@ -145,7 +145,7 @@ As a result, the following changes have been made:
   };
   ```
 
-- Some feature flags were removed from the `experimentalFeatures` prop. These features are now stable and enabled by default:
+- ✅ Some feature flags were removed from the `experimentalFeatures` prop. These features are now stable and enabled by default:
   - [`columnGrouping`](/x/react-data-grid/column-groups/)
   - [`clipboardPaste`](/x/react-data-grid/clipboard/#clipboard-paste)
   - [`lazyLoading`](/x/react-data-grid/row-updates/#lazy-loading)
@@ -340,7 +340,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)
 
 ### Clipboard
 
-- The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`.
+- ✅ The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are not anymore prefixed with `unstable_`.
 
 ### Print export
 
@@ -430,7 +430,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)
 
 ### Accessibility
 
-- The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
+- ✅ The `ariaV7` experimental flag has been removed and the Data Grid now uses the improved accessibility implementation by default.
   If you were using the `ariaV7` flag, you can remove it from the `experimentalFeatures` prop:
 
   ```diff

packages/x-codemod/README.md

@@ -166,6 +166,7 @@ The list includes these transformers
 
 - [`rename-components-to-slots-data-grid`](#rename-components-to-slots-data-grid)
 - [`rename-cell-selection-props`](#rename-cell-selection-props)
+- [`remove-stabilized-v7-experimentalFeatures`](#remove-stabilized-v7-experimentalFeatures)
 
 #### `rename-components-to-slots-data-grid`
 
@@ -205,6 +206,25 @@ Rename props related to `cellSelection` feature.
 npx @mui/x-codemod@next v7.0.0/data-grid/rename-cell-selection-props <path>
 ```
 
+#### `remove-stabilized-v7-experimentalFeatures`
+
+Remove feature flags for stabilized `experimentalFeatures`.
+
+```diff
+ <DataGrid
+-  experimentalFeatures={{
+-    lazyLoading: true,
+-    ariaV7: true,
+-    clipboardPaste: true,
+-    columnGrouping: true,
+-  }}
+ />
+```
+
+```bash
+npx @mui/x-codemod@next v7.0.0/data-grid/remove-stabilized-experimentalFeatures <path>
+```
+
 ### Tree View codemods
 
 #### `preset-safe` for tree view v7.0.0

packages/x-codemod/src/v7.0.0/data-grid/preset-safe/actual.spec.js

@@ -26,6 +26,12 @@ export default function App() {
             checked: 'true',
           },
         }}
+        experimentalFeatures={{
+          lazyLoading: true,
+          ariaV7: true,
+          columnGrouping: true,
+          clipboardPaste: true,
+        }}
       />
       <DataGridPremium
         components={{

packages/x-codemod/src/v7.0.0/data-grid/preset-safe/expected.spec.js

@@ -25,8 +25,7 @@ export default function App() {
           baseCheckbox: {
             checked: 'true',
           },
-        }}
-      />
+        }} />
       <DataGridPremium
         slots={{
           baseTextField: TextField,

packages/x-codemod/src/v7.0.0/data-grid/preset-safe/index.ts

@@ -1,11 +1,13 @@
 import transformRenameComponentsToSlots from '../rename-components-to-slots';
 import renameCellSelectionProps from '../rename-cell-selection-props';
+import removeExperimentalFeatures from '../remove-stabilized-experimentalFeatures';
 
 import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
 
 export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
   file.source = transformRenameComponentsToSlots(file, api, options);
   file.source = renameCellSelectionProps(file, api, options);
+  file.source = removeExperimentalFeatures(file, api, options);
 
   return file.source;
 }

packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/actual.spec.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+function App() {
+  return (
+    <React.Fragment>
+      <DataGrid
+        experimentalFeatures={{
+          columnGrouping: true,
+          clipboardPaste: true,
+        }}
+      />
+      <DataGridPro
+        experimentalFeatures={{
+          lazyLoading: true,
+          ariaV7: true,
+        }}
+      />
+      <DataGridPremium
+        experimentalFeatures={{
+          columnGrouping: true,
+          clipboardPaste: true,
+          lazyLoading: true,
+          ariaV7: true,
+        }}
+      />
+      <DataGridPro {...props} />
+    </React.Fragment>
+  );
+}
+
+export default App;

packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/expected.spec.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+
+function App() {
+  return (
+    <React.Fragment>
+      <DataGrid />
+      <DataGridPro />
+      <DataGridPremium />
+      <DataGridPro {...props} />
+    </React.Fragment>
+  );
+}
+
+export default App;

packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/index.ts

@@ -0,0 +1,22 @@
+import removeObjectProperty from '../../../util/removeObjectProperty';
+import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
+
+const componentsNames = ['DataGrid', 'DataGridPro', 'DataGridPremium'];
+const propName = 'experimentalFeatures';
+const propKeys = ['columnGrouping', 'clipboardPaste', 'lazyLoading', 'ariaV7'];
+
+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,
+  };
+
+  propKeys.forEach((propKey) => {
+    removeObjectProperty({ root, j, propName, componentsNames, propKey });
+  });
+
+  return root.toSource(printOptions);
+}

packages/x-codemod/src/v7.0.0/data-grid/remove-stabilized-experimentalFeatures/remove-stabilized-experimentalFeatures.test.ts

@@ -0,0 +1,27 @@
+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));
+}
+
+describe('v7.0.0/data-grid', () => {
+  describe('remove-stabilized-experimentalFeatures', () => {
+    it('transforms props as needed', () => {
+      const actual = transform({ source: read('./actual.spec.js') }, { jscodeshift }, {});
+
+      const expected = read('./expected.spec.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+
+    it('should be idempotent', () => {
+      const actual = transform({ source: read('./expected.spec.js') }, { jscodeshift }, {});
+
+      const expected = read('./expected.spec.js');
+      expect(actual).to.equal(expected, 'The transformed version should be correct');
+    });
+  });
+});

packages/x-codemod/src/v7.0.0/data-grid/rename-cell-selection-props/index.ts

@@ -6,6 +6,8 @@ const props = {
   unstable_cellSelection: 'cellSelection',
   unstable_cellSelectionModel: 'cellSelectionModel',
   unstable_onCellSelectionModelChange: 'onCellSelectionModelChange',
+  unstable_ignoreValueFormatterDuringExport: 'ignoreValueFormatterDuringExport',
+  unstable_splitClipboardPastedText: 'splitClipboardPastedText',
 };
 
 export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {