Add codemod

mui · Dec 18, 2023 · be4fdd1 · be4fdd1
1 parent 8787d6a
commit be4fdd1
Show file tree

Hide file tree

Showing 29 changed files with 371 additions and 42 deletions.
diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md
@@ -25,3 +25,51 @@ In `package.json`, change the version of the tree view package to `next`.
 
 Since `v7` is a major release, it contains changes that affect the public API.
 These changes were done for consistency, improved stability and to make room for new features.
+
+### ✅ Use `SimpleTreeView` instead of `TreeView`
+
+The `TreeView` component has been deprecated and will be removed in the next major.
+You can start replacing it with the new `SimpleTreeView` component which has exactly the same API:
+
+```diff
+- 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';
+
+  return (
+-   <TreeView>
++   <SimpleTreeView>
+      <TreeItem nodeId="1" label="First item" />
+-   </TreeView>
++   </SimpleTreeView>
+  )
+```
+
+If you were using theme augmentation, you will also need to migrate it:
+
+```diff
+ const theme = createTheme({
+   components: {
+-    MuiTreeView: {
++    MuiSimpleTreeView: {
+       styleOverrides: {
+         root: {
+           opacity: 0.5,
+         },
+       },
+     },
+   },
+ });
+```
+
+If you were using the `treeViewClasses` object, you can replace it with the new `simpleTreeView` object:
+
+```diff
+  import { treeViewClasses } from '@mui/x-tree-view/TreeView';
+  import { simpleTreeViewClasses } from '@mui/x-tree-view/SimpleTreeView';
+
+- const rootClass = treeViewClasses.root;
++ const rootClass = simpleTreeViewClasses.root;
+```
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
@@ -464,15 +464,16 @@ const pages: MuiPage[] = [
     title: 'Tree View',
     newFeature: true,
     children: [
-      { pathname: '/x/react-tree-view/getting-started' },
       { pathname: '/x/react-tree-view', title: 'Overview' },
+      { pathname: '/x/react-tree-view/getting-started' },
       {
         pathname: '/x/react-tree-view/simple-tree-view',
         subheader: 'Simple Tree View',
         children: [
           { pathname: '/x/react-tree-view/simple-tree-view/items' },
           { pathname: '/x/react-tree-view/simple-tree-view/selection' },
           { pathname: '/x/react-tree-view/simple-tree-view/expansion' },
+          { pathname: '/x/react-tree-view/simple-tree-view/customization' },
         ],
       },
       {
@@ -482,7 +483,6 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-tree-view/rich-tree-view/items' },
           { pathname: '/x/react-tree-view/rich-tree-view/selection' },
           { pathname: '/x/react-tree-view/rich-tree-view/expansion' },
-          { pathname: '/x/react-tree-view/customization' },
         ],
       },
       {

diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md
@@ -1,6 +1,7 @@
 ---
 productId: x-tree-view
 title: Tree View - Getting started
+components: SimpleTreeView, RichTreeView, TreeItem
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
@@ -82,6 +83,38 @@ Take a look at the [Styled engine guide](/material-ui/guides/styled-components/)
 
 ## Render your first component
 
-To make sure that everything is set up correctly, try rendering a simple `TreeView` component:
+To make sure that everything is set up correctly, try rendering a `SimpleTreeView` component:
 
 {{"demo": "FirstComponent.js"}}
+
+## Accessibility
+
+(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)
+
+The component follows the WAI-ARIA authoring practices.
+
+To have an accessible tree view you must use `aria-labelledby` or `aria-label` to reference or provide a label on the TreeView, otherwise screen readers will announce it as "tree", making it hard to understand the context of a specific tree item.
+
+## TypeScript
+
+In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
+Internally, it uses module augmentation to extend the default theme structure.
+
+```tsx
+// When using TypeScript 4.x and above
+import type {} from '@mui/x-tree-view/themeAugmentation';
+// When using TypeScript 3.x and below
+import '@mui/x-tree-view/themeAugmentation';
+
+const theme = createTheme({
+  components: {
+    MuiRichTreeView: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'red',
+        },
+      },
+    },
+  },
+});
+```
diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
@@ -1,7 +1,7 @@
 ---
 productId: x-tree-view
 title: Tree View React component
-components: TreeView, TreeItem
+components: SimpleTreeView, RichTreeView, TreeItem
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
 packageName: '@mui/x-tree-view'
@@ -39,35 +39,3 @@ The `RichTreeView` component accepts its items takes with the `items` prop.
 It is designed for more advanced use-cases where the items are dynamically loaded from a datasource.
 
 {{"demo": "BasicRichTreeView.js"}}
-
-## Accessibility
-
-(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)
-
-The component follows the WAI-ARIA authoring practices.
-
-To have an accessible tree view you must use `aria-labelledby` or `aria-label` to reference or provide a label on the TreeView, otherwise screen readers will announce it as "tree", making it hard to understand the context of a specific tree item.
-
-## TypeScript
-
-In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
-Internally, it uses module augmentation to extend the default theme structure.
-
-```tsx
-// When using TypeScript 4.x and above
-import type {} from '@mui/x-tree-view/themeAugmentation';
-// When using TypeScript 3.x and below
-import '@mui/x-tree-view/themeAugmentation';
-
-const theme = createTheme({
-  components: {
-    MuiRichTreeView: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'red',
-        },
-      },
-    },
-  },
-});
-```
diff --git a/docs/data/tree-view/rich-tree-view/expansion/expansion.md b/docs/data/tree-view/rich-tree-view/expansion/expansion.md
@@ -1,6 +1,7 @@
 ---
 productId: x-tree-view
 title: Rich Tree View - Expansion
+components: RichTreeView, TreeItem
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md
@@ -1,6 +1,7 @@
 ---
 productId: x-tree-view
 title: Rich Tree View - Items
+components: RichTreeView, TreeItem
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

diff --git a/docs/data/tree-view/rich-tree-view/selection/selection.md b/docs/data/tree-view/rich-tree-view/selection/selection.md
@@ -1,6 +1,7 @@
 ---
 productId: x-tree-view
 title: Rich Tree View - Selection
+components: RichTreeView, TreeItem
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

diff --git a/docs/data/tree-view/simple-tree-view/customization/customization.md b/docs/data/tree-view/simple-tree-view/customization/customization.md
@@ -1,6 +1,7 @@
 ---
 productId: x-tree-view
 title: Simple Tree View - Customization
+components: SimpleTreeView, TreeItem
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

diff --git a/docs/data/tree-view/simple-tree-view/expansion/expansion.md b/docs/data/tree-view/simple-tree-view/expansion/expansion.md
@@ -1,6 +1,7 @@
 ---
 productId: x-tree-view
 title: Simple Tree View - Expansion
+components: SimpleTreeView, TreeItem
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

diff --git a/docs/data/tree-view/simple-tree-view/items/items.md b/docs/data/tree-view/simple-tree-view/items/items.md
@@ -1,6 +1,7 @@
 ---
 productId: x-tree-view
 title: Simple Tree View - Items
+components: SimpleTreeView, TreeItem
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

diff --git a/docs/data/tree-view/simple-tree-view/selection/selection.md b/docs/data/tree-view/simple-tree-view/selection/selection.md
@@ -1,6 +1,7 @@
 ---
 productId: x-tree-view
 title: Simple Tree View - Selection
+components: SimpleTreeView, TreeItem
 packageName: '@mui/x-tree-view'
 githubLabel: 'component: tree view'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json
@@ -101,5 +101,5 @@
   "forwardsRefTo": "HTMLUListElement",
   "filename": "/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting Started</a></li>\n<li><a href=\"/x/react-tree-view/\">Tree View</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/\">Rich Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/\">Rich Tree View - Selection</a></li></ul>"
 }
diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json
@@ -81,5 +81,5 @@
   "forwardsRefTo": "HTMLUListElement",
   "filename": "/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting Started</a></li>\n<li><a href=\"/x/react-tree-view/\">Tree View</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/\">Simple Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/\">Simple Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/\">Simple Tree View - Selection</a></li></ul>"
 }
diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json
@@ -56,5 +56,5 @@
   "forwardsRefTo": "HTMLLIElement",
   "filename": "/packages/x-tree-view/src/TreeItem/TreeItem.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-tree-view/\">Tree View</a></li></ul>"
+  "demos": "<ul><li><a href=\"/x/react-tree-view/getting-started/\">Tree View - Getting Started</a></li>\n<li><a href=\"/x/react-tree-view/\">Tree View</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/\">Rich Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/\">Rich Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/rich-tree-view/\">Rich Tree View - Selection</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/\">Simple Tree View - Customization</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/\">Simple Tree View - Expansion</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/\">Simple Tree View - Items</a></li>\n<li><a href=\"/x/react-tree-view/simple-tree-view/\">Simple Tree View - Selection</a></li></ul>"
 }
diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json
@@ -81,5 +81,5 @@
   "forwardsRefTo": "HTMLUListElement",
   "filename": "/packages/x-tree-view/src/TreeView/TreeView.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-tree-view/\">Tree View</a></li></ul>"
+  "demos": "<ul></ul>"
 }
diff --git a/docs/translations/api-docs/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view.json
@@ -1,5 +1,5 @@
 {
-  "componentDescription": "@deprecated Consider using `SimpleTreeView` instead.",
+  "componentDescription": "This component has been deprecated in favor of the new `SimpleTreeView` component.\nYou can have a look at how to migrate to the new component in the v7 [migration guide](https:/next.mui.com/x/migration/migration-tree-view-v6/)",
   "propDescriptions": {
     "children": {
       "description": "The content of the component.",

diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md
@@ -204,6 +204,40 @@ Rename props related to `cellSelection` feature.
 npx @mui/x-codemod v7.0.0/data-grid/rename-cell-selection-props <path>
 ```
 
+### Tree View codemods
+
+#### `preset-safe` for tree view v7.0.0
+
+The `preset-safe` codemods for tree view.
+
+```bash
+npx @mui/x-codemod v7.0.0/tree-view/preset-safe <path|folder>
+```
+
+The list includes these transformers
+
+- [`rename-tree-view-simple-tree-view`](#rename-tree-view-simple-tree-view)
+
+#### `rename-tree-view-simple-tree-view`
+
+Renames the `TreeView` component to `SimpleTreeView`
+
+```diff
+- 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';
+
+  return (
+-   <TreeView>
++   <SimpleTreeView>
+      <TreeItem nodeId="1" label="First item" />
+-   </TreeView>
++   </SimpleTreeView>
+  )
+```
+
 ## v6.0.0
 
 ### 🚀 `preset-safe` for v6.0.0

diff --git a/packages/x-codemod/src/v7.0.0/preset-safe/index.ts b/packages/x-codemod/src/v7.0.0/preset-safe/index.ts
@@ -1,10 +1,12 @@
 import transformPickers from '../pickers/preset-safe';
 import transformDataGrid from '../data-grid/preset-safe';
+import transformTreeView from '../tree-view/preset-safe';
 import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../types';
 
 export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
   file.source = transformPickers(file, api, options);
   file.source = transformDataGrid(file, api, options);
+  file.source = transformTreeView(file, api, options);
 
   return file.source;
 }
diff --git a/packages/x-codemod/src/v7.0.0/tree-view/preset-safe/actual.spec.tsx b/packages/x-codemod/src/v7.0.0/tree-view/preset-safe/actual.spec.tsx
@@ -0,0 +1,10 @@
+// @ts-nocheck
+import * as React from 'react';
+import { TreeView, treeViewClasses } from '@mui/x-tree-view/TreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+const className = treeViewClasses.root;
+
+<TreeView>
+  <TreeItem nodeId="1" label="Item 1" />
+</TreeView>;
diff --git a/packages/x-codemod/src/v7.0.0/tree-view/preset-safe/expected.spec.tsx b/packages/x-codemod/src/v7.0.0/tree-view/preset-safe/expected.spec.tsx
@@ -0,0 +1,10 @@
+// @ts-nocheck
+import * as React from 'react';
+import { SimpleTreeView, simpleTreeViewClasses } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+const className = simpleTreeViewClasses.root;
+
+<SimpleTreeView>
+  <TreeItem nodeId="1" label="Item 1" />
+</SimpleTreeView>;
diff --git a/packages/x-codemod/src/v7.0.0/tree-view/preset-safe/index.ts b/packages/x-codemod/src/v7.0.0/tree-view/preset-safe/index.ts
@@ -0,0 +1,9 @@
+import transformRenameTreeViewSimpleTreeView from '../rename-tree-view-simple-tree-view';
+
+import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
+
+export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
+  file.source = transformRenameTreeViewSimpleTreeView(file, api, options);
+
+  return file.source;
+}
diff --git a/packages/x-codemod/src/v7.0.0/tree-view/preset-safe/preset-safe.test.ts b/packages/x-codemod/src/v7.0.0/tree-view/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('v7.0.0/pickers', () => {
+  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');
+    });
+  });
+});