47 add browser control partial

.vscode/settings.json

@@ -13,7 +13,7 @@
     "**/config/ci/**/caller.mk": "${dirname}.caller",
     "**/config/ci/**/runner.ts": "${dirname}.runner",
     // react-func pattern
-    "**/src/**/func.tsx": "${dirname(-3)}.${dirname}.func",
+    "**/src/**/func.tsx": "${dirname}.func",
     "**/src/**/styles.ts": "${dirname}.styles",
     "**/src/**/stories.{ts,tsx}": "${dirname}.stories",
     "**/src/**/index.ts": "${dirname}.module",

apps/frontend/ui/src/layout/index.ts → apps/frontend/ui/src/navigation/index.ts

@@ -1 +1 @@
-export { SidebarPartial as SidebarPartialLayout } from "@app-ui/layout/partials";
+export { SidebarPartial as SidebarPartialLayout } from "@app-ui/navigation/partials";

apps/frontend/ui/src/navigation/partials/BrowseMenu/constants.ts

@@ -0,0 +1,8 @@
+export default {
+  testIdExpandButton: "expand-button",
+  testIdCatalogueTab: "catalogue-tab",
+  testIdConceptsTab: "concepts-tab",
+  testIdRandomTab: "random-tab",
+  testIdWordTab: "word-tab",
+  testIdFilterTab: "filter-tab",
+};

apps/frontend/ui/src/navigation/partials/BrowseMenu/func.tsx

@@ -0,0 +1,61 @@
+import type { JSX } from "react";
+
+import { ChevronRightRegular, ChevronLeftRegular } from "@fluentui/react-icons";
+
+import { Flex, Button, Tooltip } from "@lib-components";
+import { LargeTitle } from "@lib-theme";
+
+import constants from "@app-ui/navigation/partials/BrowseMenu/constants";
+import type { TUiBrowseMenuOption } from "@app-ui/navigation/partials/BrowseMenu/types";
+
+import {
+  BrowseListShard,
+  BrowseToListConnectorShard,
+  ListToBrowseConnectorShard,
+} from "@app-ui/navigation/partials/BrowseMenu/shards";
+
+type TProps = {
+  currentSelection: TUiBrowseMenuOption;
+  setCurrentSelection: (selection: TUiBrowseMenuOption) => void;
+  isExpanded: boolean;
+  toggleExpand: () => void;
+  optionSlot: JSX.Element | null;
+};
+
+export default function BrowseMenu({
+  optionSlot,
+  currentSelection,
+  isExpanded,
+  setCurrentSelection,
+  toggleExpand,
+}: TProps): JSX.Element {
+  return (
+    <Flex alignItems="center" alignContent="stretch" gap="M">
+      <Flex gap="M" alignItems="center">
+        <LargeTitle>Browse</LargeTitle>
+        <Tooltip
+          content={isExpanded ? "Collapse" : "Expand"}
+          relationship="label"
+        >
+          <Button
+            data-testid={constants.testIdExpandButton}
+            icon={isExpanded ? <ChevronLeftRegular /> : <ChevronRightRegular />}
+            size="small"
+            onClick={toggleExpand}
+          />
+        </Tooltip>
+      </Flex>
+      <BrowseToListConnectorShard isExpanded={isExpanded} />
+      {isExpanded && (
+        <BrowseListShard
+          currentSelection={currentSelection}
+          setCurrentSelection={setCurrentSelection}
+        />
+      )}
+      {isExpanded && (
+        <ListToBrowseConnectorShard currentSelection={currentSelection} />
+      )}
+      {optionSlot}
+    </Flex>
+  );
+}

apps/frontend/ui/src/navigation/partials/BrowseMenu/index.ts

@@ -0,0 +1,3 @@
+import BrowseMenu from "@app-ui/navigation/partials/BrowseMenu/func";
+
+export default BrowseMenu;

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseList/func.tsx

@@ -0,0 +1,55 @@
+import type { JSX } from "react";
+
+import { TabList } from "@lib-components";
+
+import type { TUiBrowseMenuOption } from "@app-ui/navigation/partials/BrowseMenu/types";
+import constants from "@app-ui/navigation/partials/BrowseMenu/constants";
+
+import useBrowseListClasses from "@app-ui/navigation/partials/BrowseMenu/shards/BrowseList/styles";
+import { TabTemplate } from "@app-ui/navigation/partials/BrowseMenu/shards/BrowseList/templates";
+
+type TProps = {
+  currentSelection: TUiBrowseMenuOption;
+  setCurrentSelection: (selection: TUiBrowseMenuOption) => void;
+};
+
+export default function BrowseList({
+  currentSelection,
+  setCurrentSelection,
+}: TProps): JSX.Element {
+  const classes = useBrowseListClasses();
+  return (
+    <TabList
+      vertical
+      size="large"
+      selectedValue={currentSelection}
+      className={classes.root}
+    >
+      <TabTemplate
+        value="Catalogue"
+        onClick={setCurrentSelection}
+        dataTestId={constants.testIdCatalogueTab}
+      />
+      <TabTemplate
+        value="Concepts"
+        onClick={setCurrentSelection}
+        dataTestId={constants.testIdConceptsTab}
+      />
+      <TabTemplate
+        value="Random"
+        onClick={setCurrentSelection}
+        dataTestId={constants.testIdRandomTab}
+      />
+      <TabTemplate
+        value="Word"
+        onClick={setCurrentSelection}
+        dataTestId={constants.testIdWordTab}
+      />
+      <TabTemplate
+        value="Filter"
+        onClick={setCurrentSelection}
+        dataTestId={constants.testIdFilterTab}
+      />
+    </TabList>
+  );
+}

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseList/index.ts

@@ -0,0 +1,3 @@
+import BrowseList from "@app-ui/navigation/partials/BrowseMenu/shards/BrowseList/func";
+
+export default BrowseList;

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseList/styles.ts

@@ -0,0 +1,9 @@
+import { makeStyles, EThemeSpacing } from "@lib-theme";
+
+const useBrowseListClasses = makeStyles({
+  root: {
+    gap: EThemeSpacing.XXL,
+  },
+});
+
+export default useBrowseListClasses;

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseList/templates/Tab/func.tsx

@@ -0,0 +1,32 @@
+import type { JSX } from "react";
+
+import { Tab as OriginalTab } from "@lib-components";
+
+import type { TUiBrowseMenuOption } from "@app-ui/navigation/partials/BrowseMenu/types";
+
+import useTabClasses from "@app-ui/navigation/partials/BrowseMenu/shards/BrowseList/templates/Tab/styles";
+
+type TProps = {
+  value: TUiBrowseMenuOption;
+  onClick: (value: TUiBrowseMenuOption) => void;
+  dataTestId: string;
+};
+
+export default function Tab({
+  value,
+  onClick,
+  dataTestId,
+}: TProps): JSX.Element {
+  const classes = useTabClasses();
+  return (
+    <OriginalTab
+      data-testid={dataTestId}
+      value={value}
+      onClick={() => {
+        onClick(value);
+      }}
+    >
+      <span className={classes.root}>{value}</span>
+    </OriginalTab>
+  );
+}

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseList/templates/Tab/index.ts

@@ -0,0 +1,3 @@
+import Tab from "@app-ui/navigation/partials/BrowseMenu/shards/BrowseList/templates/Tab/func";
+
+export default Tab;

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseList/templates/Tab/styles.ts

@@ -0,0 +1,9 @@
+import { makeStyles, tokens } from "@lib-theme";
+
+const useTabClasses = makeStyles({
+  root: {
+    fontSize: tokens.fontSizeHero700,
+  },
+});
+
+export default useTabClasses;

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseList/templates/index.ts

@@ -0,0 +1 @@
+export { default as TabTemplate } from "@app-ui/navigation/partials/BrowseMenu/shards/BrowseList/templates/Tab";

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseToListConnector/func.tsx

@@ -0,0 +1,36 @@
+import type { JSX } from "react";
+
+import { Flex } from "@lib-components";
+
+import useBrowseToListConnectorClasses from "@app-ui/navigation/partials/BrowseMenu/shards/BrowseToListConnector/styles";
+
+type TProps = {
+  isExpanded: boolean;
+};
+
+export default function BrowseToListConnector({
+  isExpanded,
+}: TProps): JSX.Element {
+  const classes = useBrowseToListConnectorClasses();
+  return (
+    <Flex alignItems="center">
+      <div className={classes.connectorHorizontal} />
+      {isExpanded && (
+        <Flex
+          alignItems="center"
+          margin={["XL", "None"]}
+          direction="column"
+          position="relative"
+          className={classes.root}
+        >
+          <div className={classes.connectorVertical} />
+          <div className={classes.connectorHorizontal} />
+          <div className={classes.connectorHorizontal} />
+          <div className={classes.connectorHorizontal} />
+          <div className={classes.connectorHorizontal} />
+          <div className={classes.connectorHorizontal} />
+        </Flex>
+      )}
+    </Flex>
+  );
+}

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseToListConnector/index.ts

@@ -0,0 +1,3 @@
+import BrowseToListConnector from "@app-ui/navigation/partials/BrowseMenu/shards/BrowseToListConnector/func";
+
+export default BrowseToListConnector;

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/BrowseToListConnector/styles.ts

@@ -0,0 +1,24 @@
+import { makeStyles } from "@lib-theme";
+import shared from "@app-ui/navigation/partials/BrowseMenu/shared";
+
+const useBrowseToListConnectorClasses = makeStyles({
+  root: {
+    gap: shared.connectorGap,
+  },
+  connectorVertical: {
+    width: shared.connectorThickness,
+    backgroundColor: shared.connectorColor,
+    borderRadius: shared.connectorBorderRadius,
+    transform: "translateX(-24px)",
+    position: "absolute",
+    height: "100%",
+  },
+  connectorHorizontal: {
+    height: shared.connectorThickness,
+    backgroundColor: shared.connectorColor,
+    width: shared.connectorMinLength,
+    borderRadius: shared.connectorBorderRadius,
+  },
+});
+
+export default useBrowseToListConnectorClasses;

apps/frontend/ui/src/navigation/partials/BrowseMenu/shards/ListToBrowseConnector/func.tsx

@@ -0,0 +1,93 @@
+import type { JSX } from "react";
+
+import { Flex } from "@lib-components";
+import { mergeClasses } from "@lib-theme";
+
+import type { TUiBrowseMenuOption } from "@app-ui/navigation/partials/BrowseMenu/types";
+
+import { useEnhancedConnectorClass } from "@app-ui/navigation/partials/BrowseMenu/shards/ListToBrowseConnector/hooks";
+
+import useListToBrowseConnectorClasses from "@app-ui/navigation/partials/BrowseMenu/shards/ListToBrowseConnector/styles";
+
+type TProps = {
+  currentSelection: TUiBrowseMenuOption;
+};
+
+export default function ListToBrowseConnector({
+  currentSelection,
+}: TProps): JSX.Element {
+  const classes = useListToBrowseConnectorClasses();
+  const createHorConnClass = useEnhancedConnectorClass(
+    classes.connectorHorizontalBase,
+    classes.activeLine,
+  );
+  const createVerConnClass = useEnhancedConnectorClass(
+    classes.connectorVerticalBase,
+    classes.activeLine,
+  );
+  return (
+    <Flex>
+      <Flex
+        direction="column"
+        alignItems="end"
+        className={classes.connectorContainer}
+      >
+        <div
+          className={createHorConnClass(
+            currentSelection === "Catalogue",
+            classes.connectorCatalogue,
+          )}
+        />
+        <div
+          className={createHorConnClass(
+            currentSelection === "Concepts",
+            classes.connectorConcepts,
+          )}
+        />
+        <div
+          className={createHorConnClass(
+            currentSelection === "Random",
+            classes.connectorRandom,
+          )}
+        />
+        <div
+          className={createHorConnClass(
+            currentSelection === "Word",
+            classes.connectorWord,
+          )}
+        />
+        <div
+          className={createHorConnClass(
+            currentSelection === "Filter",
+            classes.connectorFilter,
+          )}
+        />
+      </Flex>
+      <Flex className={classes.backboneContainer} direction="column">
+        <div className={createVerConnClass(currentSelection === "Catalogue")} />
+        <div
+          className={createVerConnClass(
+            currentSelection === "Concepts" || currentSelection === "Catalogue",
+          )}
+        />
+        <div
+          className={createVerConnClass(
+            currentSelection === "Word" || currentSelection === "Filter",
+          )}
+        />
+        <div className={createVerConnClass(currentSelection === "Filter")} />
+      </Flex>
+      {currentSelection !== "None" && (
+        <Flex alignItems="center">
+          <div
+            className={mergeClasses(
+              classes.connectorHorizontalBase,
+              classes.horizontalShift,
+              classes.activeLine,
+            )}
+          />
+        </Flex>
+      )}
+    </Flex>
+  );
+}