feat: Added Treeview feature (#558)

Co-authored-by: Noam Gaash <[email protected]>

package.json

@@ -5,11 +5,14 @@
   "type": "commonjs",
   "dependencies": {
     "@applitools/eyes-playwright": "^1.23.6",
-    "@types/git-username": "^1.0.5",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/lab": "^5.0.0-alpha.167",
     "@mui/material": "^5.15.11",
     "@mui/x-date-pickers": "^6.19.5",
+    "@mui/x-tree-view": "^6.17.0",
+    "@types/git-username": "^1.0.5",
     "@types/leaflet.markercluster": "^1.5.2",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "antd": "^5.14.2",

src/pages/components/CustomTreeView.tsx

@@ -0,0 +1,91 @@
+import { TreeView } from '@mui/x-tree-view/TreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+interface BaseTreeNode {
+  id: string;
+  name: string;
+}
+
+// Generic TreeNode interface with additional properties
+interface TreeNode<T extends BaseTreeNode> extends BaseTreeNode {
+  children?: TreeNode<T>[];
+  // You can now include additional properties from T
+}
+
+// Generic CustomTreeViewProps interface
+interface CustomTreeViewProps<T> {
+  data: T;
+  name: string;
+  id: string;
+}
+
+// A utility function to transform any object into a TreeNode structure
+const objectToTreeNode = (
+  obj: any,
+  key: string = 'root',
+  nodeId: string = '0'
+): TreeNode<BaseTreeNode> => {
+  const isPrimitive = (value: any) => value !== Object(value) || value === null;
+
+  const children = Object.keys(obj).map((k, index) => {
+    const value = obj[k];
+    if (isPrimitive(value)) {
+      // Handle primitive types directly
+      return {
+        id: `${nodeId}-${index}`,
+        name: `${k}: ${value}`,
+      };
+    } else if (Array.isArray(value)) {
+      // If it's an array, create a node that lists all elements
+      return {
+        id: `${nodeId}-${index}`,
+        name: k,
+        children: value.map((item, itemIndex) => {
+          // Handle primitive items in the array directly
+          if (isPrimitive(item)) {
+            return {
+              id: `${nodeId}-${index}-${itemIndex}`,
+              name: `${item}`,
+            };
+          }
+          // Recursively handle objects in the array
+          return objectToTreeNode(item, k, `${nodeId}-${index}-${itemIndex}`);
+        }),
+      };
+    } else {
+      // Recursively handle objects
+      return objectToTreeNode(value, k, `${nodeId}-${index}`);
+    }
+  });
+
+  return {
+    id: nodeId,
+    name: obj.name || key,
+    children: children.length ? children : undefined,
+  };
+};
+
+// Render tree function utilizing the TreeNode interface
+const renderTree = <T extends BaseTreeNode>(nodes: TreeNode<T>): JSX.Element => (
+  <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+    {nodes.children?.map((node) => renderTree(node))}
+  </TreeItem>
+);
+
+// CustomTreeView component using TypeScript
+const CustomTreeView = <T,>({ data, name, id }: CustomTreeViewProps<T>) => {
+  const dataAsTreeNode = objectToTreeNode({ id, name, children: [data] });
+  return (
+    <TreeView
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      defaultEndIcon={<div style={{ width: 24 }} />}
+    >
+      {renderTree(dataAsTreeNode)}
+    </TreeView>
+  );
+};
+
+export default CustomTreeView;

src/pages/components/CutomTreeView.stories.tsx

@@ -0,0 +1,50 @@
+// CustomTreeView.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import CustomTreeView from './CustomTreeView';
+import '../../shared/shared.css'; // Assuming you have some shared styles
+
+// Define a base type for your tree nodes, considering the object structure you provided earlier
+interface CustomTreeNode {
+  id: string;
+  name: string;
+  children?: CustomTreeNode[];
+}
+
+// Example data for the story
+const exampleData = {
+  id: 'root',
+  name: 'Root Node',
+  children: [
+    {
+      id: '1',
+      name: 'Child Node 1',
+      children: [
+        { id: '1-1', name: 'Grandchild Node 1-1' },
+        { id: '1-2', name: 'Grandchild Node 1-2' },
+      ],
+    },
+    {
+      id: '2',
+      name: 'Child Node 2',
+    },
+  ],
+};
+
+const meta: Meta<typeof CustomTreeView> = {
+  title: 'Components/CustomTreeView',
+  component: CustomTreeView,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['tree', 'view', 'react', 'mui'], // Adjust tags as needed
+} satisfies Meta<typeof CustomTreeView>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: exampleData, // Using the example data for the default story
+  },
+};