From be4fdd1f991ad4b0142f694e6f753b72572e522c Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 18 Dec 2023 17:29:35 +0100 Subject: [PATCH] Add codemod --- .../migration-tree-view-v6.md | 48 +++++++++++++++ docs/data/pages.ts | 4 +- .../getting-started/getting-started.md | 35 ++++++++++- docs/data/tree-view/overview/overview.md | 34 +---------- .../rich-tree-view/expansion/expansion.md | 1 + .../tree-view/rich-tree-view/items/items.md | 1 + .../rich-tree-view/selection/selection.md | 1 + .../customization/customization.md | 1 + .../simple-tree-view/expansion/expansion.md | 1 + .../tree-view/simple-tree-view/items/items.md | 1 + .../simple-tree-view/selection/selection.md | 1 + .../pages/x/api/tree-view/rich-tree-view.json | 2 +- .../x/api/tree-view/simple-tree-view.json | 2 +- docs/pages/x/api/tree-view/tree-item.json | 2 +- docs/pages/x/api/tree-view/tree-view.json | 2 +- .../api-docs/tree-view/tree-view.json | 2 +- packages/x-codemod/README.md | 34 +++++++++++ .../x-codemod/src/v7.0.0/preset-safe/index.ts | 2 + .../tree-view/preset-safe/actual.spec.tsx | 10 ++++ .../tree-view/preset-safe/expected.spec.tsx | 10 ++++ .../src/v7.0.0/tree-view/preset-safe/index.ts | 9 +++ .../tree-view/preset-safe/preset-safe.test.ts | 41 +++++++++++++ .../actual-nested-imports.spec.tsx | 21 +++++++ .../actual-root-imports.spec.tsx | 9 +++ .../expected-nested-imports.spec.tsx | 21 +++++++ .../expected-root-imports.spec.tsx | 9 +++ .../index.ts | 60 +++++++++++++++++++ .../rename-tree-view-simple-tree-view.ts | 44 ++++++++++++++ .../x-tree-view/src/TreeView/TreeView.tsx | 5 +- 29 files changed, 371 insertions(+), 42 deletions(-) create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/preset-safe/actual.spec.tsx create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/preset-safe/expected.spec.tsx create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/preset-safe/index.ts create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/preset-safe/preset-safe.test.ts create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/actual-nested-imports.spec.tsx create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/actual-root-imports.spec.tsx create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/expected-nested-imports.spec.tsx create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/expected-root-imports.spec.tsx create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/index.ts create mode 100644 packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/rename-tree-view-simple-tree-view.ts 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 index d19064564e0fc..0b7efb9dd99ea 100644 --- 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 ( +- ++ + +- ++ + ) +``` + +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 index 073e59f7a9f70..b0c88afda4fa8 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -464,8 +464,8 @@ 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', @@ -473,6 +473,7 @@ const pages: MuiPage[] = [ { 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 index 52ba88a1bfc8c..cb4174bf1213f 100644 --- 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 index 4aa16cce4f145..6fe41d1d59032 100644 --- 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 index d711a9474a812..a87983f95d345 100644 --- 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 index 0197f454e6710..67d098e53272f 100644 --- 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 index f71af80d43f19..1861c9bb898b0 100644 --- 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 index 9759a542ac79b..ba13c9dc020ba 100644 --- 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 index 15cd5d5fe5520..aad4f99c2636b 100644 --- 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 index 78ed345b83a30..54e912b306fea 100644 --- 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 index b94f692ff492e..5c4409221ec56 100644 --- 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 index acab70bdefb24..10d193234e6ac 100644 --- 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": "" + "demos": "" } diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json index b8c2fb0fc0d93..26e3dcbdbf44a 100644 --- 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": "" + "demos": "" } diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index ea79f8166a204..b0d234ea561a9 100644 --- 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": "" + "demos": "" } diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json index 1d093b6de8429..f7f671e8e5ce9 100644 --- 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": "" + "demos": "" } diff --git a/docs/translations/api-docs/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view.json index e4ed8632142dc..f77fdb3d4e555 100644 --- 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 index 63fd1febd2e45..d01b0e23ba1db 100644 --- 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 ``` +### 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 +``` + +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 ( +- ++ + +- ++ + ) +``` + ## 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 index 51b584797e671..b5877884f20dc 100644 --- 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 new file mode 100644 index 0000000000000..032f669ba4c6e --- /dev/null +++ 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; + + + +; 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 new file mode 100644 index 0000000000000..712d1b49bfdde --- /dev/null +++ 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; + + + +; 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 new file mode 100644 index 0000000000000..97f4843bb4030 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..9bc0f80487395 --- /dev/null +++ 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'); + }); + }); +}); diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/actual-nested-imports.spec.tsx b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/actual-nested-imports.spec.tsx new file mode 100644 index 0000000000000..45035f6c615bb --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/actual-nested-imports.spec.tsx @@ -0,0 +1,21 @@ +// @ts-nocheck +import * as React from 'react'; +import { + TreeView, + TreeViewProps, + TreeViewClasses, + TreeViewClassKey, + treeViewClasses, + getTreeViewUtilityClass, +} from '@mui/x-tree-view/TreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; + +function App() { + getTreeViewUtilityClass('root'); + + return ( + + + + ); +} diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/actual-root-imports.spec.tsx b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/actual-root-imports.spec.tsx new file mode 100644 index 0000000000000..81f07970c4b62 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/actual-root-imports.spec.tsx @@ -0,0 +1,9 @@ +// @ts-nocheck +import { + TreeView, + TreeViewProps, + TreeViewClasses, + TreeViewClassKey, + treeViewClasses, + getTreeViewUtilityClass, +} from '@mui/x-tree-view'; diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/expected-nested-imports.spec.tsx b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/expected-nested-imports.spec.tsx new file mode 100644 index 0000000000000..b2d2c5e39c905 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/expected-nested-imports.spec.tsx @@ -0,0 +1,21 @@ +// @ts-nocheck +import * as React from 'react'; +import { + SimpleTreeView, + SimpleTreeViewProps, + SimpleTreeViewClasses, + SimpleTreeViewClassKey, + simpleTreeViewClasses, + getSimpleTreeViewUtilityClass, +} from '@mui/x-tree-view/TreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; + +function App() { + getSimpleTreeViewUtilityClass('root'); + + return ( + + + + ); +} diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/expected-root-imports.spec.tsx b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/expected-root-imports.spec.tsx new file mode 100644 index 0000000000000..81f07970c4b62 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/expected-root-imports.spec.tsx @@ -0,0 +1,9 @@ +// @ts-nocheck +import { + TreeView, + TreeViewProps, + TreeViewClasses, + TreeViewClassKey, + treeViewClasses, + getTreeViewUtilityClass, +} from '@mui/x-tree-view'; diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/index.ts b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/index.ts new file mode 100644 index 0000000000000..37d7740b26b25 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/index.ts @@ -0,0 +1,60 @@ +import { ASTPath, ImportDeclaration } from 'jscodeshift'; +import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; + +const VARIABLES = { + TreeView: 'SimpleTreeView', + TreeViewProps: 'SimpleTreeViewProps', + TreeViewClasses: 'SimpleTreeViewClasses', + TreeViewClassKey: 'SimpleTreeViewClassKey', + treeViewClasses: 'simpleTreeViewClasses', + getTreeViewUtilityClass: 'getSimpleTreeViewUtilityClass', +}; + +const PACKAGE_REGEXP = /@mui\/x-tree-view(\/(.*)|)/; + +const matchImport = (path: ASTPath) => + (path.node.source.value?.toString() ?? '').match(PACKAGE_REGEXP); + +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, + }; + + const matchingImports = root.find(j.ImportDeclaration).filter((path) => !!matchImport(path)); + + // Rename the import specifiers + // - import { TreeView } from '@mui/x-tree-view/TreeView' + // + import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView' + matchingImports + .find(j.ImportSpecifier) + .filter((path) => VARIABLES.hasOwnProperty(path.node.imported.name)) + .replaceWith((path) => j.importSpecifier(j.identifier(VARIABLES[path.node.imported.name]))); + + // Rename the nested import declarations + // - import {} from '@mui/x-tree-view/TreeView' + // + import {} from '@mui/x-tree-view/SimpleTreeView' + matchingImports + .filter((path) => matchImport(path)?.[3] === 'TreeView') + .replaceWith((path) => { + const importPath = path.node.source.value?.toString() ?? ''; + + return j.importDeclaration( + path.node.specifiers, // copy over the existing import specifiers + j.stringLiteral(importPath.replace('TreeView', 'SimpleTreeView')), // Replace the source with our new source + ); + }); + + // Rename the import usage + // - + // + + root + .find(j.Identifier) + .filter((path) => VARIABLES.hasOwnProperty(path.node.name)) + .replaceWith((path) => j.identifier(VARIABLES[path.node.name])); + + return root.toSource(printOptions); +} diff --git a/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/rename-tree-view-simple-tree-view.ts b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/rename-tree-view-simple-tree-view.ts new file mode 100644 index 0000000000000..e725ecac9e4c1 --- /dev/null +++ b/packages/x-codemod/src/v7.0.0/tree-view/rename-tree-view-simple-tree-view/rename-tree-view-simple-tree-view.ts @@ -0,0 +1,44 @@ +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)); +} + +const TEST_FILES = ['nested-imports', 'root-imports']; + +describe('v7.0.0/tree-view', () => { + describe('rename-tree-view-simple-tree-view', () => { + TEST_FILES.forEach((testFile) => { + const actualPath = `./actual-${testFile}.spec.tsx`; + const expectedPath = `./expected-${testFile}.spec.tsx`; + + describe(`${testFile.replace(/-/g, ' ')}`, () => { + it('transforms imports as needed', () => { + const actual = transform( + { source: read(actualPath) }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read(expectedPath); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read(expectedPath) }, + { jscodeshift: jscodeshift.withParser('tsx') }, + {}, + ); + + const expected = read(expectedPath); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); + }); +}); diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx index 9bcd7c4adf22b..e57c25b9f5cea 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.tsx @@ -47,7 +47,8 @@ const warn = () => { }; /** - * @deprecated Consider using `SimpleTreeView` instead. + * This component has been deprecated in favor of the new `SimpleTreeView` component. + * You 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/#use-simpletreeview-instead-of-treeview) * * Demos: * @@ -56,6 +57,8 @@ const warn = () => { * API: * * - [TreeView API](https://mui.com/x/api/tree-view/tree-view/) + * + * @deprecated */ const TreeView = React.forwardRef(function TreeView< Multiple extends boolean | undefined = undefined,