More attempting fixes to remove material-ui

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/core/src/renderer/components/+catalog/catalog-menu.tsx

@@ -6,18 +6,16 @@
 import treeStyles from "./catalog-tree.module.scss";
 import styles from "./catalog-menu.module.scss";
 
-import type { MouseEventHandler } from "react";
 import React from "react";
-import { TreeItem, TreeView } from "@material-ui/lab";
 import { Icon } from "../icon";
-import { StylesProvider } from "@material-ui/core";
 import type { CatalogCategory } from "../../api/catalog-entity";
 import { observer } from "mobx-react";
 import { CatalogCategoryLabel } from "./catalog-category-label";
 import type { IComputedValue } from "mobx";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import filteredCategoriesInjectable from "../../../common/catalog/filtered-categories.injectable";
-import { cssNames } from "../../utils";
+import { TreeGroup, TreeItem, TreeView } from "../tree-view/tree-view";
+import { browseCatalogTab } from "./catalog-browse-tab";
 
 export interface CatalogMenuProps {
   activeTab: string | undefined;
@@ -36,39 +34,6 @@ function getCategoryIcon(category: CatalogCategory) {
   return null;
 }
 
-interface TreeItemEntryProps {
-  tabIndex?: number;
-  onClick?: MouseEventHandler;
-  icon?: React.ReactNode;
-  label?: React.ReactNode;
-  "data-testid"?: string;
-}
-
-const TreeItemEntry = (props: TreeItemEntryProps) => (
-  <li
-    className="MuiTreeItem-root"
-    role="treeitem"
-    tabIndex={props.tabIndex ?? -1}
-    data-testid={props["data-testid"]}
-    onClick={props.onClick}
-  >
-    <div
-      className="MuiTreeItem-content"
-    >
-      <div
-        className="MuiTreeItem-iconContainer"
-      >
-        {props.icon}
-      </div>
-    </div>
-    <div
-      className="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
-    >
-      {props.label}
-    </div>
-  </li>
-);
-
 interface Dependencies {
   filteredCategories: IComputedValue<CatalogCategory[]>;
 }
@@ -77,45 +42,41 @@ const NonInjectedCatalogMenu = observer(({
   activeTab,
   filteredCategories,
   onItemClick,
-}: CatalogMenuProps & Dependencies) => (
+}: CatalogMenuProps & Dependencies) => {
-  // Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4
+  console.log(treeStyles);
-  <StylesProvider injectFirst>
+
+  return (
     <div className="flex flex-col w-full">
       <div className={styles.catalog}>Catalog</div>
-      <TreeView
+      <TreeView>
-        defaultExpanded={["catalog"]}
+        <TreeItem
-        defaultCollapseIcon={<Icon material="expand_more" />}
-        defaultExpandIcon={<Icon material="chevron_right" />}
-        selected={activeTab || "browse"}
-      >
-        <TreeItemEntry
           label="Browse"
           data-testid="*-tab"
           onClick={() => onItemClick("*")}
-        />
+          selected={activeTab === browseCatalogTab} />
-        <TreeItem
+        <TreeGroup
           classes={treeStyles}
-          nodeId="catalog"
           label={<div className={styles.parent}>Categories</div>}
-          className={cssNames(styles.bordered)}
         >
-          {
+          {filteredCategories.get()
-            filteredCategories.get()
+            .map(category => (
-              .map(category => (
+              <TreeItem
-                <TreeItemEntry
+                key={category.getId()}
-                  key={category.getId()}
+                label={(
-                  icon={getCategoryIcon(category)}
+                  <>
-                  label={<CatalogCategoryLabel category={category} />}
+                    {getCategoryIcon(category)}
-                  data-testid={`${category.getId()}-tab`}
+                    <CatalogCategoryLabel category={category} />
-                  onClick={() => onItemClick(category.getId())}
+                  </>
-                />
+                )}
-              ))
+                selected={activeTab === category.getId()}
-          }
+                data-testid={`${category.getId()}-tab`}
-        </TreeItem>
+                onClick={() => onItemClick(category.getId())} />
+            ))}
+        </TreeGroup>
       </TreeView>
     </div>
-  </StylesProvider>
+  );
-));
+});
 
 export const CatalogMenu = withInjectables<Dependencies, CatalogMenuProps>(NonInjectedCatalogMenu, {
   getProps: (di, props) => ({

packages/core/src/renderer/components/tree-view/tree-view.tsx

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { MouseEventHandler } from "react";
+import React, { useState } from "react";
+import { cssNames } from "../../utils";
+import { Icon } from "../icon";
+
+export interface TreeViewClasses {
+  root?: string;
+}
+
+export interface TreeViewProps {
+  classes?: TreeViewClasses;
+  children: JSX.Element[] | JSX.Element;
+}
+
+export function TreeView(props: TreeViewProps) {
+  return (
+    <ul
+      className={props.classes?.root}
+      role="tree"
+    >
+      {props.children}
+    </ul>
+  );
+}
+
+export interface TreeItemClasses {
+  root?: string;
+  label?: string;
+}
+
+export interface TreeItemProps {
+  classes?: TreeItemClasses;
+  label: JSX.Element | string;
+  testId?: string;
+  selected?: boolean;
+  onClick?: MouseEventHandler;
+}
+
+export function TreeItem(props: TreeItemProps) {
+  return (
+    <li
+      className={cssNames(props.classes?.root, {
+        selected: props.selected ?? false,
+      })}
+      role="treeitem"
+      data-testid={props.testId}
+      onClick={props.onClick}
+    >
+      <div className={props.classes?.label}>
+        {props.label}
+      </div>
+    </li>
+  );
+}
+
+export interface TreeGroupClasses {
+  root?: string;
+  header?: string;
+  iconContainer?: string;
+  label?: string;
+  contents?: string;
+}
+
+export interface TreeGroupProps {
+  classes?: TreeGroupClasses;
+  children?: JSX.Element[] | JSX.Element;
+  defaultExpanded?: boolean;
+  label: JSX.Element | string;
+  testId?: string;
+  collapseIcon?: JSX.Element;
+  expandIcon?: JSX.Element;
+}
+
+export function TreeGroup(props: TreeGroupProps) {
+  const [expanded, setExpanded] = useState(props.defaultExpanded ?? true);
+
+  return (
+    <li
+      className={props.classes?.root}
+      role="group"
+      data-testid={props.testId}
+    >
+      <div className={props.classes?.header} onClick={() => setExpanded(!expanded)}>
+        <div className={props.classes?.iconContainer}>
+          {
+            expanded
+              ? props.collapseIcon ?? <Icon material="expand_more" />
+              : props.expandIcon ?? <Icon material="chevron_right" />
+          }
+        </div>
+        <div className={props.classes?.label}>
+          {props.label}
+        </div>
+      </div>
+      <div className={props.classes?.contents}>
+        {
+          expanded
+            ? props.children
+            : null
+        }
+      </div>
+    </li>
+  );
+}