[docs] Cleanup of the Tree View demos (#13237)

mui · May 30, 2024 · 20c0f52 · 20c0f52
1 parent 3603494
commit 20c0f52
Show file tree

Hide file tree

Showing 134 changed files with 1,182 additions and 971 deletions.
diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/getting-started/FirstComponent.js
@@ -1,22 +1,28 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function FirstComponent() {
   return (
-    <SimpleTreeView
-      aria-label="file system navigator"
-      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
-    >
-      <TreeItem itemId="1" label="Applications">
-        <TreeItem itemId="2" label="Calendar" />
-      </TreeItem>
-      <TreeItem itemId="5" label="Documents">
-        <TreeItem itemId="10" label="OSS" />
-        <TreeItem itemId="6" label="MUI">
-          <TreeItem itemId="8" label="index.js" />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView>
+        <TreeItem itemId="grid" label="Data Grid">
+          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
         </TreeItem>
-      </TreeItem>
-    </SimpleTreeView>
+        <TreeItem itemId="pickers" label="Date and Time Pickers">
+          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx b/docs/data/tree-view/getting-started/FirstComponent.tsx
@@ -1,22 +1,28 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function FirstComponent() {
   return (
-    <SimpleTreeView
-      aria-label="file system navigator"
-      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
-    >
-      <TreeItem itemId="1" label="Applications">
-        <TreeItem itemId="2" label="Calendar" />
-      </TreeItem>
-      <TreeItem itemId="5" label="Documents">
-        <TreeItem itemId="10" label="OSS" />
-        <TreeItem itemId="6" label="MUI">
-          <TreeItem itemId="8" label="index.js" />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView>
+        <TreeItem itemId="grid" label="Data Grid">
+          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
         </TreeItem>
-      </TreeItem>
-    </SimpleTreeView>
+        <TreeItem itemId="pickers" label="Date and Time Pickers">
+          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview
diff --git a/docs/data/tree-view/overview/BasicRichTreeView.js b/docs/data/tree-view/overview/BasicRichTreeView.js
@@ -21,11 +21,21 @@ const MUI_X_PRODUCTS = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/overview/BasicRichTreeView.tsx b/docs/data/tree-view/overview/BasicRichTreeView.tsx
@@ -21,11 +21,21 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
       { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
     ],
   },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.js b/docs/data/tree-view/overview/BasicSimpleTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -16,6 +16,12 @@ export default function BasicSimpleTreeView() {
           <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
           <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
         </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
       </SimpleTreeView>
     </Box>
   );

diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <SimpleTreeView>
         <TreeItem itemId="grid" label="Data Grid">
           <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
@@ -16,6 +16,12 @@ export default function BasicSimpleTreeView() {
           <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
           <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
         </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
       </SimpleTreeView>
     </Box>
   );

diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.js
@@ -1,37 +1,39 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 
 import { useSpring, animated } from '@react-spring/web';
 
-const ITEMS = [
+const MUI_X_PRODUCTS = [
   {
-    id: '1',
-    label: 'Main',
+    id: 'grid',
+    label: 'Data Grid',
     children: [
-      { id: '2', label: 'Hello' },
-      {
-        id: '3',
-        label: 'Subtree with children',
-        children: [
-          { id: '6', label: 'Hello' },
-          {
-            id: '7',
-            label: 'Sub-subtree with children',
-            children: [
-              { id: '9', label: 'Child 1' },
-              { id: '10', label: 'Child 2' },
-              { id: '11', label: 'Child 3' },
-            ],
-          },
-          { id: '8', label: 'Hello' },
-        ],
-      },
-      { id: '4', label: 'World' },
-      { id: '5', label: 'Something something' },
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
     ],
   },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 function TransitionComponent(props) {
@@ -51,12 +53,12 @@ function TransitionComponent(props) {
 
 export default function CustomAnimation() {
   return (
-    <RichTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-      slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
-      items={ITEMS}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        defaultExpandedItems={['grid']}
+        slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
+        items={MUI_X_PRODUCTS}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
@@ -1,37 +1,39 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import { TransitionProps } from '@mui/material/transitions';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 import { useSpring, animated } from '@react-spring/web';
 
-const ITEMS: TreeViewBaseItem[] = [
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   {
-    id: '1',
-    label: 'Main',
+    id: 'grid',
+    label: 'Data Grid',
     children: [
-      { id: '2', label: 'Hello' },
-      {
-        id: '3',
-        label: 'Subtree with children',
-        children: [
-          { id: '6', label: 'Hello' },
-          {
-            id: '7',
-            label: 'Sub-subtree with children',
-            children: [
-              { id: '9', label: 'Child 1' },
-              { id: '10', label: 'Child 2' },
-              { id: '11', label: 'Child 3' },
-            ],
-          },
-          { id: '8', label: 'Hello' },
-        ],
-      },
-      { id: '4', label: 'World' },
-      { id: '5', label: 'Something something' },
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
     ],
   },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
 ];
 
 function TransitionComponent(props: TransitionProps) {
@@ -51,12 +53,12 @@ function TransitionComponent(props: TransitionProps) {
 
 export default function CustomAnimation() {
   return (
-    <RichTreeView
-      aria-label="customized"
-      defaultExpandedItems={['1']}
-      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
-      slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
-      items={ITEMS}
-    />
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <RichTreeView
+        defaultExpandedItems={['grid']}
+        slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
+        items={MUI_X_PRODUCTS}
+      />
+    </Box>
   );
 }
diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx.preview
@@ -1,7 +1,5 @@
 <RichTreeView
-  aria-label="customized"
-  defaultExpandedItems={['1']}
-  sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
+  defaultExpandedItems={['grid']}
   slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
-  items={ITEMS}
+  items={MUI_X_PRODUCTS}
 />