From 2c7df54770ee9f7e4b7a02c173dea8f7a1b81cd7 Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Wed, 29 Jan 2025 20:00:44 +0000
Subject: [PATCH 1/9] bp

---
 .../navigation/partials/OptionConcepts/func.tsx   | 10 ++++++++++
 .../navigation/partials/OptionConcepts/index.ts   |  3 +++
 .../navigation/partials/OptionConcepts/stories.ts | 15 +++++++++++++++
 .../navigation/partials/OptionConcepts/styles.ts  |  7 +++++++
 4 files changed, 35 insertions(+)
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/index.ts
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts

diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
new file mode 100644
index 0000000..5e8ac0d
--- /dev/null
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
@@ -0,0 +1,10 @@
+import type { JSX } from "react";
+
+import useOptionConceptsClasses from "./styles";
+
+type TProps = {};
+
+export default function OptionConcepts({}: TProps): JSX.Element {
+  const classes = useOptionConceptsClasses();
+  return <div className={classes.root}>OptionConcepts</div>;
+}
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/index.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/index.ts
new file mode 100644
index 0000000..602f93e
--- /dev/null
+++ b/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;
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts
new file mode 100644
index 0000000..58304b6
--- /dev/null
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts
@@ -0,0 +1,15 @@
+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: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OptionConcepts>;
+
+export const Index: Story = {};
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
new file mode 100644
index 0000000..a68de0e
--- /dev/null
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
@@ -0,0 +1,7 @@
+import { makeStyles } from "@lib-theme";
+
+const useOptionConceptsClasses = makeStyles({
+  root: {},
+});
+
+export default useOptionConceptsClasses;

From 82df9e7a162acdf2491a751ff1e17d5c8ebb0a2f Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Wed, 29 Jan 2025 21:02:13 +0000
Subject: [PATCH 2/9] prep for template

---
 .../partials/OptionConcepts/func.tsx          | 62 +++++++++++++++++--
 .../partials/OptionConcepts/styles.ts         | 15 ++++-
 .../template/MenuItemRadio/func.tsx           | 10 +++
 .../template/MenuItemRadio/index.ts           |  3 +
 .../template/MenuItemRadio/styles.ts          |  9 +++
 .../partials/OptionConcepts/template/index.ts |  1 +
 libs/components/src/index.ts                  |  2 +
 package-lock.json                             |  8 +--
 package.json                                  |  2 +-
 9 files changed, 101 insertions(+), 11 deletions(-)
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/index.ts
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/styles.ts
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/template/index.ts

diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
index 5e8ac0d..c36b135 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
@@ -1,10 +1,64 @@
+import { useState } from "react";
 import type { JSX } from "react";
 
-import useOptionConceptsClasses from "./styles";
+import { Flex, Button, MenuItemRadio, MenuList } from "@lib-components";
+import { Subtitle2, Caption2 } from "@lib-theme";
+import type { MenuProps as TMenuProps } from "@fluentui/react-components";
 
-type TProps = {};
+import useOptionConceptsClasses from "@app-ui/navigation/partials/OptionConcepts/styles";
 
-export default function OptionConcepts({}: TProps): JSX.Element {
+type TProps = {
+  concepts: string[];
+  onSearch: (value: string) => void;
+};
+
+export default function OptionConcepts({
+  concepts,
+  onSearch,
+}: TProps): JSX.Element {
   const classes = useOptionConceptsClasses();
-  return <div className={classes.root}>OptionConcepts</div>;
+  const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({
+    option: [],
+  });
+  const onChange: TMenuProps["onCheckedValueChange"] = (
+    _,
+    { name, checkedItems },
+  ) => {
+    setCheckedValues((s) => ({ ...s, [name]: checkedItems }));
+  };
+  return (
+    <Flex className={classes.root} direction="column" padding={["M"]} gap="M">
+      <Flex direction="column" gap="XS">
+        <Subtitle2>Search through recongizable concepts</Subtitle2>
+        <Caption2>Choose from the given list below</Caption2>
+      </Flex>
+      <MenuList
+        className={classes.list}
+        checkedValues={checkedValues}
+        onCheckedValueChange={onChange}
+      >
+        <MenuItemRadio name="option" value="option1">
+          Option 1
+        </MenuItemRadio>
+        <MenuItemRadio name="option" value="option2">
+          Option 2
+        </MenuItemRadio>
+        <MenuItemRadio name="option" value="option3">
+          Option 3
+        </MenuItemRadio>
+        <MenuItemRadio name="option" value="option4">
+          Option 4
+        </MenuItemRadio>
+      </MenuList>
+      <Button
+        appearance="primary"
+        disabled={checkedValues.option.length === 0}
+        onClick={() => {
+          onSearch(checkedValues.option[0]);
+        }}
+      >
+        Search
+      </Button>
+    </Flex>
+  );
 }
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
index a68de0e..bb5d96f 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
@@ -1,7 +1,18 @@
-import { makeStyles } from "@lib-theme";
+import { makeStyles, EThemeDimensions, tokens } from "@lib-theme";
 
 const useOptionConceptsClasses = makeStyles({
-  root: {},
+  root: {
+    width: EThemeDimensions.L8,
+    backgroundColor: tokens.colorNeutralBackground2,
+    borderRadius: tokens.borderRadiusLarge,
+  },
+  list: {
+    width: "100%",
+    maxHeight: EThemeDimensions.L6,
+    overflow: "auto",
+    backgroundColor: tokens.colorNeutralBackground1,
+    borderRadius: tokens.borderRadiusMedium,
+  },
 });
 
 export default useOptionConceptsClasses;
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
new file mode 100644
index 0000000..28bd997
--- /dev/null
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
@@ -0,0 +1,10 @@
+import type { JSX } from "react";
+
+import useMenuItemRadioClasses from "./styles";
+
+type TProps = {};
+
+export default function MenuItemRadio({}: TProps): JSX.Element {
+  const classes = useMenuItemRadioClasses();
+  return <div className={classes.root}>MenuItemRadio</div>;
+}
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/index.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/index.ts
new file mode 100644
index 0000000..40f575b
--- /dev/null
+++ b/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;
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/styles.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/styles.ts
new file mode 100644
index 0000000..3d5ae16
--- /dev/null
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/styles.ts
@@ -0,0 +1,9 @@
+import { makeStyles, tokens } from "@lib-theme";
+
+const useMenuItemRadioClasses = makeStyles({
+  root: {
+    fontSize: tokens.fontSizeBase100,
+  },
+});
+
+export default useMenuItemRadioClasses;
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/index.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/index.ts
new file mode 100644
index 0000000..9e7ebbd
--- /dev/null
+++ b/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";
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index 442c269..295896e 100644
--- a/libs/components/src/index.ts
+++ b/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";
 
diff --git a/package-lock.json b/package-lock.json
index cb1af74..c84b38e 100644
--- a/package-lock.json
+++ b/package-lock.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"
@@ -9951,9 +9951,9 @@
       "dev": true
     },
     "node_modules/fluentui-helpers": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fluentui-helpers/-/fluentui-helpers-0.2.1.tgz",
-      "integrity": "sha512-yVTr0yz2ZQLwGX3bgph1pOt4zP7W3b30iNEyNFlWyOPuqUlxMl2JDEGeg/8QOcObsyPPY2D27svFoxz7QT4aag==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/fluentui-helpers/-/fluentui-helpers-0.3.0.tgz",
+      "integrity": "sha512-syhmFb/HbGzCL9T/dkeHbQ3CTeeBJuJfgitfK2Jxj7T+JseLztIZDgwdLmakJusqkbBLXdEuTO6KHhHyI1ociQ==",
       "license": "MIT",
       "peerDependencies": {
         "@fluentui/react-components": "^9",
diff --git a/package.json b/package.json
index 84ac324..7deff09 100644
--- a/package.json
+++ b/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"

From 6dc7d2fae7625251f3f2e8f7e927118868e780f8 Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Wed, 29 Jan 2025 21:17:31 +0000
Subject: [PATCH 3/9] core done, tests missing

---
 .../partials/OptionConcepts/func.tsx          | 31 +++++--------------
 .../partials/OptionConcepts/hooks.ts          | 18 +++++++++++
 .../partials/OptionConcepts/stories.ts        | 21 ++++++++++++-
 .../partials/OptionConcepts/styles.ts         |  2 +-
 .../template/MenuItemRadio/func.tsx           | 15 ++++++---
 .../template/MenuItemRadio/styles.ts          |  9 ------
 6 files changed, 56 insertions(+), 40 deletions(-)
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts
 delete mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/styles.ts

diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
index c36b135..603e6ea 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
@@ -1,11 +1,11 @@
-import { useState } from "react";
 import type { JSX } from "react";
 
-import { Flex, Button, MenuItemRadio, MenuList } from "@lib-components";
+import { Flex, Button, MenuList } from "@lib-components";
 import { Subtitle2, Caption2 } from "@lib-theme";
-import type { MenuProps as TMenuProps } from "@fluentui/react-components";
 
 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[];
@@ -17,15 +17,7 @@ export default function OptionConcepts({
   onSearch,
 }: TProps): JSX.Element {
   const classes = useOptionConceptsClasses();
-  const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({
-    option: [],
-  });
-  const onChange: TMenuProps["onCheckedValueChange"] = (
-    _,
-    { name, checkedItems },
-  ) => {
-    setCheckedValues((s) => ({ ...s, [name]: checkedItems }));
-  };
+  const { checkedValues, onChange } = useSelectionState();
   return (
     <Flex className={classes.root} direction="column" padding={["M"]} gap="M">
       <Flex direction="column" gap="XS">
@@ -37,18 +29,9 @@ export default function OptionConcepts({
         checkedValues={checkedValues}
         onCheckedValueChange={onChange}
       >
-        <MenuItemRadio name="option" value="option1">
-          Option 1
-        </MenuItemRadio>
-        <MenuItemRadio name="option" value="option2">
-          Option 2
-        </MenuItemRadio>
-        <MenuItemRadio name="option" value="option3">
-          Option 3
-        </MenuItemRadio>
-        <MenuItemRadio name="option" value="option4">
-          Option 4
-        </MenuItemRadio>
+        {concepts.map((concept) => (
+          <MenuItemRadioTemplate value={concept} />
+        ))}
       </MenuList>
       <Button
         appearance="primary"
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts
new file mode 100644
index 0000000..87777a4
--- /dev/null
+++ b/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[]>>({
+    option: [],
+  });
+  const onChange: TMenuProps["onCheckedValueChange"] = (
+    _,
+    { name, checkedItems },
+  ) => {
+    setCheckedValues((s) => ({ ...s, [name]: checkedItems }));
+  };
+
+  return { checkedValues, onChange };
+}
+
+export { useSelectionState };
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts
index 58304b6..28cd5bd 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/stories.ts
@@ -5,7 +5,10 @@ import OptionConcepts from "@app-ui/navigation/partials/OptionConcepts";
 const meta: Meta = {
   title: "App/UI/Navigation/Partials/OptionConcepts",
   component: OptionConcepts,
-  args: {},
+  args: {
+    concepts: ["Partiality", "Signaling", "Connectivity", "Transformativity"],
+    onSearch: () => {},
+  },
 };
 
 export default meta;
@@ -13,3 +16,19 @@ 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",
+    ],
+  },
+};
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
index bb5d96f..d63050b 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
@@ -8,7 +8,7 @@ const useOptionConceptsClasses = makeStyles({
   },
   list: {
     width: "100%",
-    maxHeight: EThemeDimensions.L6,
+    height: EThemeDimensions.M4,
     overflow: "auto",
     backgroundColor: tokens.colorNeutralBackground1,
     borderRadius: tokens.borderRadiusMedium,
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
index 28bd997..0c3dea5 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
@@ -1,10 +1,15 @@
 import type { JSX } from "react";
 
-import useMenuItemRadioClasses from "./styles";
+import { MenuItemRadio as MenuItemRadioOrigin } from "@lib-components";
 
-type TProps = {};
+type TProps = {
+  value: string;
+};
 
-export default function MenuItemRadio({}: TProps): JSX.Element {
-  const classes = useMenuItemRadioClasses();
-  return <div className={classes.root}>MenuItemRadio</div>;
+export default function MenuItemRadio({ value }: TProps): JSX.Element {
+  return (
+    <MenuItemRadioOrigin name="option" value={value}>
+      {value}
+    </MenuItemRadioOrigin>
+  );
 }
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/styles.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/styles.ts
deleted file mode 100644
index 3d5ae16..0000000
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/styles.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { makeStyles, tokens } from "@lib-theme";
-
-const useMenuItemRadioClasses = makeStyles({
-  root: {
-    fontSize: tokens.fontSizeBase100,
-  },
-});
-
-export default useMenuItemRadioClasses;

From 15905128302e22c619d6c48faa53aa95ae9f0a27 Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Wed, 29 Jan 2025 21:43:47 +0000
Subject: [PATCH 4/9] first test, fix for render

---
 .../partials/OptionConcepts/func.tsx          |  2 +-
 .../template/MenuItemRadio/func.tsx           |  2 +-
 .../partials/OptionConcepts/tests.tsx         | 39 +++++++++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx

diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
index 603e6ea..cb20a7d 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
@@ -30,7 +30,7 @@ export default function OptionConcepts({
         onCheckedValueChange={onChange}
       >
         {concepts.map((concept) => (
-          <MenuItemRadioTemplate value={concept} />
+          <MenuItemRadioTemplate key={`${concept}-key`} value={concept} />
         ))}
       </MenuList>
       <Button
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
index 0c3dea5..be548fc 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/template/MenuItemRadio/func.tsx
@@ -8,7 +8,7 @@ type TProps = {
 
 export default function MenuItemRadio({ value }: TProps): JSX.Element {
   return (
-    <MenuItemRadioOrigin name="option" value={value}>
+    <MenuItemRadioOrigin name="concept" value={value}>
       {value}
     </MenuItemRadioOrigin>
   );
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
new file mode 100644
index 0000000..ab4a378
--- /dev/null
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
@@ -0,0 +1,39 @@
+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, without overflow", () => {
+    const onSearch = jest.fn((value: string) => value);
+
+    render(
+      <OptionConcepts
+        concepts={["concept1", "concept2", "concept3"]}
+        onSearch={onSearch}
+      />,
+    );
+
+    const menuList = screen.getByRole("menu");
+    expect(menuList).toBeInTheDocument();
+    const isScrollable = menuList.scrollHeight > menuList.clientHeight;
+    expect(isScrollable).toBe(false);
+
+    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();
+    expect(onSearch).not.toHaveBeenCalled();
+
+    fireEvent.click(concept1.parentElement as HTMLElement);
+    expect(searchButton).not.toBeDisabled();
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toHaveBeenCalledWith("concept1");
+  });
+});

From 68098a07cb2d535133a6d10f0c711e6db307069b Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Wed, 29 Jan 2025 21:55:25 +0000
Subject: [PATCH 5/9] still issues, later

---
 .../ui/src/navigation/partials/OptionConcepts/tests.tsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
index ab4a378..271ad40 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
@@ -31,8 +31,14 @@ describe("OptionConcepts", () => {
     expect(searchButton).toBeDisabled();
     expect(onSearch).not.toHaveBeenCalled();
 
-    fireEvent.click(concept1.parentElement as HTMLElement);
+    // issues around here
+    const concept1Radio = concept1.closest("[role='menuitemradio']");
+    expect(concept1Radio).toBeInTheDocument();
+
+    fireEvent.click(concept1Radio as HTMLElement);
     expect(searchButton).not.toBeDisabled();
+    // issues around here
+
     expect(onSearch).toHaveBeenCalledTimes(1);
     expect(onSearch).toHaveBeenCalledWith("concept1");
   });

From e5ea4733b5c3ba2297d9010082759eecfa95e952 Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Thu, 30 Jan 2025 20:08:58 +0000
Subject: [PATCH 6/9] overflow test fails

---
 .../partials/OptionConcepts/func.tsx          |  4 +-
 .../partials/OptionConcepts/hooks.ts          |  2 +-
 .../partials/OptionConcepts/tests.tsx         | 66 ++++++++++++++++---
 3 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
index cb20a7d..c1a50f1 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
@@ -35,9 +35,9 @@ export default function OptionConcepts({
       </MenuList>
       <Button
         appearance="primary"
-        disabled={checkedValues.option.length === 0}
+        disabled={checkedValues.concept.length === 0}
         onClick={() => {
-          onSearch(checkedValues.option[0]);
+          onSearch(checkedValues.concept[0]);
         }}
       >
         Search
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts
index 87777a4..3d0dd7a 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/hooks.ts
@@ -3,7 +3,7 @@ import type { MenuProps as TMenuProps } from "@fluentui/react-components";
 
 function useSelectionState() {
   const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({
-    option: [],
+    concept: [],
   });
   const onChange: TMenuProps["onCheckedValueChange"] = (
     _,
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
index 271ad40..2047ee6 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
@@ -29,17 +29,67 @@ describe("OptionConcepts", () => {
     const searchButton = screen.getByRole("button", { name: "Search" });
     expect(searchButton).toBeInTheDocument();
     expect(searchButton).toBeDisabled();
-    expect(onSearch).not.toHaveBeenCalled();
 
-    // issues around here
-    const concept1Radio = concept1.closest("[role='menuitemradio']");
-    expect(concept1Radio).toBeInTheDocument();
+    fireEvent.click(concept1);
+    expect(searchButton).toBeEnabled();
 
-    fireEvent.click(concept1Radio as HTMLElement);
-    expect(searchButton).not.toBeDisabled();
-    // issues around here
+    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);
+  });
+
+  it("should render with given concepts, with overflow", () => {
+    const onSearch = jest.fn((value: string) => value);
+
+    render(
+      <OptionConcepts
+        concepts={Array.from(
+          { length: 100 },
+          (_, i) => `concept${i.toString()}`,
+        )}
+        onSearch={onSearch}
+      />,
+    );
+
+    const menuList = screen.getByRole("menu");
+    expect(menuList).toBeInTheDocument();
+    const isScrollable = menuList.scrollHeight > menuList.clientHeight;
+    expect(isScrollable).toBe(true);
+
+    const concept1 = screen.getByText("concept1");
+    expect(concept1).toBeInTheDocument();
+    const concept50 = screen.getByText("concept50");
+    expect(concept50).toBeInTheDocument();
+    const concept100 = screen.getByText("concept99");
+    expect(concept100).toBeInTheDocument();
+
+    const searchButton = screen.getByRole("button", { name: "Search" });
+    expect(searchButton).toBeInTheDocument();
+    expect(searchButton).toBeDisabled();
+
+    fireEvent.click(concept1);
+    expect(searchButton).toBeEnabled();
 
-    expect(onSearch).toHaveBeenCalledTimes(1);
+    fireEvent.click(searchButton);
     expect(onSearch).toHaveBeenCalledWith("concept1");
+
+    fireEvent.click(concept50);
+    fireEvent.click(searchButton);
+    expect(onSearch).toHaveBeenCalledWith("concept50");
+
+    fireEvent.click(concept100);
+    fireEvent.click(searchButton);
+    expect(onSearch).toHaveBeenCalledWith("concept99");
+
+    expect(onSearch).toHaveBeenCalledTimes(3);
   });
 });

From 8ea19e30d917d2543d1f42f91774eb1cd51e2c74 Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Thu, 30 Jan 2025 20:14:37 +0000
Subject: [PATCH 7/9] update

---
 .../partials/OptionConcepts/tests.tsx         | 52 ++++---------------
 1 file changed, 11 insertions(+), 41 deletions(-)

diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
index 2047ee6..6257313 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/tests.tsx
@@ -4,7 +4,7 @@ import "@testing-library/jest-dom";
 import OptionConcepts from "@app-ui/navigation/partials/OptionConcepts";
 
 describe("OptionConcepts", () => {
-  it("should render with given concepts, without overflow", () => {
+  it("should render with given concepts", () => {
     const onSearch = jest.fn((value: string) => value);
 
     render(
@@ -16,8 +16,6 @@ describe("OptionConcepts", () => {
 
     const menuList = screen.getByRole("menu");
     expect(menuList).toBeInTheDocument();
-    const isScrollable = menuList.scrollHeight > menuList.clientHeight;
-    expect(isScrollable).toBe(false);
 
     const concept1 = screen.getByText("concept1");
     expect(concept1).toBeInTheDocument();
@@ -25,52 +23,24 @@ describe("OptionConcepts", () => {
     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);
   });
 
-  it("should render with given concepts, with overflow", () => {
+  it("should be able to select different concepts", () => {
     const onSearch = jest.fn((value: string) => value);
 
     render(
       <OptionConcepts
-        concepts={Array.from(
-          { length: 100 },
-          (_, i) => `concept${i.toString()}`,
-        )}
+        concepts={["concept1", "concept2", "concept3"]}
         onSearch={onSearch}
       />,
     );
 
-    const menuList = screen.getByRole("menu");
-    expect(menuList).toBeInTheDocument();
-    const isScrollable = menuList.scrollHeight > menuList.clientHeight;
-    expect(isScrollable).toBe(true);
-
     const concept1 = screen.getByText("concept1");
     expect(concept1).toBeInTheDocument();
-    const concept50 = screen.getByText("concept50");
-    expect(concept50).toBeInTheDocument();
-    const concept100 = screen.getByText("concept99");
-    expect(concept100).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();
@@ -82,13 +52,13 @@ describe("OptionConcepts", () => {
     fireEvent.click(searchButton);
     expect(onSearch).toHaveBeenCalledWith("concept1");
 
-    fireEvent.click(concept50);
+    fireEvent.click(concept2);
     fireEvent.click(searchButton);
-    expect(onSearch).toHaveBeenCalledWith("concept50");
+    expect(onSearch).toHaveBeenCalledWith("concept2");
 
-    fireEvent.click(concept100);
+    fireEvent.click(concept3);
     fireEvent.click(searchButton);
-    expect(onSearch).toHaveBeenCalledWith("concept99");
+    expect(onSearch).toHaveBeenCalledWith("concept3");
 
     expect(onSearch).toHaveBeenCalledTimes(3);
   });

From 3d5a4ee5cb8b8f3d5390ca7dacffb04ce138483b Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Thu, 30 Jan 2025 20:28:45 +0000
Subject: [PATCH 8/9] layout done

---
 .../templates/OptionLayout/func.tsx           | 36 +++++++++++++++++++
 .../templates/OptionLayout/index.ts           |  3 ++
 .../templates/OptionLayout/styles.ts          | 11 ++++++
 .../ui/src/navigation/templates/index.ts      |  1 +
 4 files changed, 51 insertions(+)
 create mode 100644 apps/frontend/ui/src/navigation/templates/OptionLayout/func.tsx
 create mode 100644 apps/frontend/ui/src/navigation/templates/OptionLayout/index.ts
 create mode 100644 apps/frontend/ui/src/navigation/templates/OptionLayout/styles.ts
 create mode 100644 apps/frontend/ui/src/navigation/templates/index.ts

diff --git a/apps/frontend/ui/src/navigation/templates/OptionLayout/func.tsx b/apps/frontend/ui/src/navigation/templates/OptionLayout/func.tsx
new file mode 100644
index 0000000..2ed218b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/frontend/ui/src/navigation/templates/OptionLayout/index.ts b/apps/frontend/ui/src/navigation/templates/OptionLayout/index.ts
new file mode 100644
index 0000000..22f5e55
--- /dev/null
+++ b/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;
diff --git a/apps/frontend/ui/src/navigation/templates/OptionLayout/styles.ts b/apps/frontend/ui/src/navigation/templates/OptionLayout/styles.ts
new file mode 100644
index 0000000..dcca2f4
--- /dev/null
+++ b/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;
diff --git a/apps/frontend/ui/src/navigation/templates/index.ts b/apps/frontend/ui/src/navigation/templates/index.ts
new file mode 100644
index 0000000..0773614
--- /dev/null
+++ b/apps/frontend/ui/src/navigation/templates/index.ts
@@ -0,0 +1 @@
+export { default as OptionLayoutTemplate } from "@app-ui/navigation/templates/OptionLayout";

From e61ff3b842c8d1cb965d66a201a7c4f8e9c4bab2 Mon Sep 17 00:00:00 2001
From: Samuil Berenzon <samus.dev.space@gmail.com>
Date: Thu, 30 Jan 2025 20:32:28 +0000
Subject: [PATCH 9/9] update

---
 .../partials/OptionConcepts/func.tsx          | 28 ++++++++-----------
 .../partials/OptionConcepts/styles.ts         |  5 ----
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
index c1a50f1..499db14 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/func.tsx
@@ -1,8 +1,8 @@
 import type { JSX } from "react";
 
-import { Flex, Button, MenuList } from "@lib-components";
-import { Subtitle2, Caption2 } from "@lib-theme";
+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";
@@ -19,11 +19,14 @@ export default function OptionConcepts({
   const classes = useOptionConceptsClasses();
   const { checkedValues, onChange } = useSelectionState();
   return (
-    <Flex className={classes.root} direction="column" padding={["M"]} gap="M">
-      <Flex direction="column" gap="XS">
-        <Subtitle2>Search through recongizable concepts</Subtitle2>
-        <Caption2>Choose from the given list below</Caption2>
-      </Flex>
+    <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}
@@ -33,15 +36,6 @@ export default function OptionConcepts({
           <MenuItemRadioTemplate key={`${concept}-key`} value={concept} />
         ))}
       </MenuList>
-      <Button
-        appearance="primary"
-        disabled={checkedValues.concept.length === 0}
-        onClick={() => {
-          onSearch(checkedValues.concept[0]);
-        }}
-      >
-        Search
-      </Button>
-    </Flex>
+    </OptionLayoutTemplate>
   );
 }
diff --git a/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts b/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
index d63050b..bc7f86e 100644
--- a/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
+++ b/apps/frontend/ui/src/navigation/partials/OptionConcepts/styles.ts
@@ -1,11 +1,6 @@
 import { makeStyles, EThemeDimensions, tokens } from "@lib-theme";
 
 const useOptionConceptsClasses = makeStyles({
-  root: {
-    width: EThemeDimensions.L8,
-    backgroundColor: tokens.colorNeutralBackground2,
-    borderRadius: tokens.borderRadiusLarge,
-  },
   list: {
     width: "100%",
     height: EThemeDimensions.M4,