49 add conceptspartial

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

@@ -0,0 +1,41 @@
+import type { JSX } from "react";
+
+import { MenuList } from "@lib-components";
+
+import { OptionLayoutTemplate } from "@app-ui/navigation/templates";
+import useOptionConceptsClasses from "@app-ui/navigation/partials/OptionConcepts/styles";
+import { MenuItemRadioTemplate } from "@app-ui/navigation/partials/OptionConcepts/template";
+import { useSelectionState } from "@app-ui/navigation/partials/OptionConcepts/hooks";
+
+type TProps = {
+  concepts: string[];
+  onSearch: (value: string) => void;
+};
+
+export default function OptionConcepts({
+  concepts,
+  onSearch,
+}: TProps): JSX.Element {
+  const classes = useOptionConceptsClasses();
+  const { checkedValues, onChange } = useSelectionState();
+  return (
+    <OptionLayoutTemplate
+      header="Search through recongizable concepts"
+      subtitle="Choose from the given list below"
+      onSearch={() => {
+        onSearch(checkedValues.concept[0]);
+      }}
+      disabledSearch={checkedValues.concept.length === 0}
+    >
+      <MenuList
+        className={classes.list}
+        checkedValues={checkedValues}
+        onCheckedValueChange={onChange}
+      >
+        {concepts.map((concept) => (
+          <MenuItemRadioTemplate key={`${concept}-key`} value={concept} />
+        ))}
+      </MenuList>
+    </OptionLayoutTemplate>
+  );
+}

apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import type { MenuProps as TMenuProps } from "@fluentui/react-components";
+
+function useSelectionState() {
+  const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({
+    concept: [],
+  });
+  const onChange: TMenuProps["onCheckedValueChange"] = (
+    _,
+    { name, checkedItems },
+  ) => {
+    setCheckedValues((s) => ({ ...s, [name]: checkedItems }));
+  };
+
+  return { checkedValues, onChange };
+}
+
+export { useSelectionState };

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

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

apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import OptionConcepts from "@app-ui/navigation/partials/OptionConcepts";
+
+const meta: Meta = {
+  title: "App/UI/Navigation/Partials/OptionConcepts",
+  component: OptionConcepts,
+  args: {
+    concepts: ["Partiality", "Signaling", "Connectivity", "Transformativity"],
+    onSearch: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OptionConcepts>;
+
+export const Index: Story = {};
+
+export const WithOverflow: Story = {
+  args: {
+    concepts: [
+      "Partiality",
+      "Signaling",
+      "Connectivity",
+      "Transformativity",
+      "Adaptability",
+      "Inclusivity",
+      "Interactivity",
+      "Reactivity",
+      "Sustainability",
+    ],
+  },
+};

apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts

@@ -0,0 +1,13 @@
+import { makeStyles, EThemeDimensions, tokens } from "@lib-theme";
+
+const useOptionConceptsClasses = makeStyles({
+  list: {
+    width: "100%",
+    height: EThemeDimensions.M4,
+    overflow: "auto",
+    backgroundColor: tokens.colorNeutralBackground1,
+    borderRadius: tokens.borderRadiusMedium,
+  },
+});
+
+export default useOptionConceptsClasses;

apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx

@@ -0,0 +1,15 @@
+import type { JSX } from "react";
+
+import { MenuItemRadio as MenuItemRadioOrigin } from "@lib-components";
+
+type TProps = {
+  value: string;
+};
+
+export default function MenuItemRadio({ value }: TProps): JSX.Element {
+  return (
+    <MenuItemRadioOrigin name="concept" value={value}>
+      {value}
+    </MenuItemRadioOrigin>
+  );
+}

apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/index.ts

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

apps/frontend/ui/src/navigation/partials/OptionConcepts/template/index.ts

@@ -0,0 +1 @@
+export { default as MenuItemRadioTemplate } from "@app-ui/navigation/partials/OptionConcepts/template/MenuItemRadio";

apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx

@@ -0,0 +1,65 @@
+import { render, screen, fireEvent } from "@tests-unit-browser";
+import "@testing-library/jest-dom";
+
+import OptionConcepts from "@app-ui/navigation/partials/OptionConcepts";
+
+describe("OptionConcepts", () => {
+  it("should render with given concepts", () => {
+    const onSearch = jest.fn((value: string) => value);
+
+    render(
+      <OptionConcepts
+        concepts={["concept1", "concept2", "concept3"]}
+        onSearch={onSearch}
+      />,
+    );
+
+    const menuList = screen.getByRole("menu");
+    expect(menuList).toBeInTheDocument();
+
+    const concept1 = screen.getByText("concept1");
+    expect(concept1).toBeInTheDocument();
+    const concept2 = screen.getByText("concept2");
+    expect(concept2).toBeInTheDocument();
+    const concept3 = screen.getByText("concept3");
+    expect(concept3).toBeInTheDocument();
+  });
+
+  it("should be able to select different concepts", () => {
+    const onSearch = jest.fn((value: string) => value);
+
+    render(
+      <OptionConcepts
+        concepts={["concept1", "concept2", "concept3"]}
+        onSearch={onSearch}
+      />,
+    );
+
+    const concept1 = screen.getByText("concept1");
+    expect(concept1).toBeInTheDocument();
+    const concept2 = screen.getByText("concept2");
+    expect(concept2).toBeInTheDocument();
+    const concept3 = screen.getByText("concept3");
+    expect(concept3).toBeInTheDocument();
+
+    const searchButton = screen.getByRole("button", { name: "Search" });
+    expect(searchButton).toBeInTheDocument();
+    expect(searchButton).toBeDisabled();
+
+    fireEvent.click(concept1);
+    expect(searchButton).toBeEnabled();
+
+    fireEvent.click(searchButton);
+    expect(onSearch).toHaveBeenCalledWith("concept1");
+
+    fireEvent.click(concept2);
+    fireEvent.click(searchButton);
+    expect(onSearch).toHaveBeenCalledWith("concept2");
+
+    fireEvent.click(concept3);
+    fireEvent.click(searchButton);
+    expect(onSearch).toHaveBeenCalledWith("concept3");
+
+    expect(onSearch).toHaveBeenCalledTimes(3);
+  });
+});

apps/frontend/ui/src/navigation/templates/OptionLayout/func.tsx

@@ -0,0 +1,36 @@
+import type { JSX, ReactNode } from "react";
+
+import { Flex, Button } from "@lib-components";
+import { Subtitle2, Caption2 } from "@lib-theme";
+
+import useOptionLayoutClasses from "@app-ui/navigation/templates/OptionLayout/styles";
+
+type TProps = {
+  header: string;
+  subtitle: string;
+  children?: ReactNode;
+  onSearch: () => void;
+  disabledSearch: boolean;
+};
+
+export default function OptionLayout({
+  header,
+  subtitle,
+  children = undefined,
+  onSearch,
+  disabledSearch,
+}: TProps): JSX.Element {
+  const classes = useOptionLayoutClasses();
+  return (
+    <Flex className={classes.root} direction="column" padding={["M"]} gap="M">
+      <Flex direction="column" gap="XS">
+        <Subtitle2>{header}</Subtitle2>
+        <Caption2>{subtitle}</Caption2>
+      </Flex>
+      {children}
+      <Button appearance="primary" disabled={disabledSearch} onClick={onSearch}>
+        Search
+      </Button>
+    </Flex>
+  );
+}

apps/frontend/ui/src/navigation/templates/OptionLayout/index.ts

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

apps/frontend/ui/src/navigation/templates/OptionLayout/styles.ts

@@ -0,0 +1,11 @@
+import { makeStyles, tokens, EThemeDimensions } from "@lib-theme";
+
+const useOptionLayoutClasses = makeStyles({
+  root: {
+    width: EThemeDimensions.L8,
+    backgroundColor: tokens.colorNeutralBackground2,
+    borderRadius: tokens.borderRadiusLarge,
+  },
+});
+
+export default useOptionLayoutClasses;

apps/frontend/ui/src/navigation/templates/index.ts

@@ -0,0 +1 @@
+export { default as OptionLayoutTemplate } from "@app-ui/navigation/templates/OptionLayout";

libs/components/src/index.ts

@@ -2,6 +2,8 @@ export { Divider } from "@fluentui/react-components";
 export { Tab } from "@fluentui/react-components";
 export { TabList } from "@fluentui/react-components";
 export { Button } from "@fluentui/react-components";
+export { MenuList } from "@fluentui/react-components";
+export { MenuItemRadio } from "@fluentui/react-components";
 
 export { Collapse } from "@fluentui/react-motion-components-preview";
 

package.json

@@ -10,7 +10,7 @@
     "@fluentui/react-motion-components-preview": "^0.3.1",
     "@griffel/react": "^1.5.25",
     "@reduxjs/toolkit": "^2.2.8",
-    "fluentui-helpers": "0.2.1",
+    "fluentui-helpers": "0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2"