init libs

Author: bubulux

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

@@ -1,10 +1,24 @@
 import type { JSX } from "react";
 
-import useOptionTraceClasses from "./styles";
+import { useComboboxFilter, useId } from "@lib-hooks";
+import { Combobox, Flex } from "@lib-components";
+import type { TComboboxProps } from "@lib-components";
+
+import { OptionLayoutTemplate } from "../../templates";
+import useClasses from "./styles";
 
 type TProps = {};
 
 export default function OptionTrace({}: TProps): JSX.Element {
-  const classes = useOptionTraceClasses();
-  return <div className={classes.root}>OptionTrace</div>;
+  const classes = useClasses();
+  return (
+    <OptionLayoutTemplate
+      header="Trace a Word"
+      subtitle="Use a word as a anchor and find words that are related to it."
+      onClick={() => {}}
+      isLoading={false}
+      disableClick={false}
+      buttonLabel="Construct trace tree"
+    ></OptionLayoutTemplate>
+  );
 }

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

@@ -9,6 +9,7 @@ type TProps = {
   header: string;
   onClick: () => void;
   disableClick?: boolean;
+  buttonLabel?: string;
   isLoading?: boolean;
   subtitle?: string;
   children?: ReactNode;
@@ -17,6 +18,7 @@ type TProps = {
 export default function OptionLayout({
   header,
   onClick,
+  buttonLabel = "Search",
   subtitle = undefined,
   children = undefined,
   disableClick = false,
@@ -31,7 +33,11 @@ export default function OptionLayout({
       </Flex>
       {children}
       <Button appearance="primary" disabled={disableClick} onClick={onClick}>
-        {isLoading ? <Spinner size="tiny" appearance="inverted" /> : "Search"}
+        {isLoading ? (
+          <Spinner size="tiny" appearance="inverted" />
+        ) : (
+          buttonLabel
+        )}
       </Button>
     </Flex>
   );

libs/components/src/index.ts

@@ -5,8 +5,11 @@ export { Button } from "@fluentui/react-components";
 export { MenuList } from "@fluentui/react-components";
 export { MenuItemRadio } from "@fluentui/react-components";
 export { Spinner } from "@fluentui/react-components";
+export { Combobox } from "@fluentui/react-components";
 
 export { Collapse } from "@fluentui/react-motion-components-preview";
 
 export { Tooltip } from "@lib-components/atoms";
 export { Flex } from "fluentui-helpers";
+
+export type { ComboboxProps as TComboboxProps } from "@fluentui/react-components";

libs/hooks/.eslintrc.yml

@@ -0,0 +1,2 @@
+extends:
+  - "../../.eslintrc.frontend.yml"

libs/hooks/src/index.ts

@@ -0,0 +1,2 @@
+export { useComboboxFilter } from "@fluentui/react-components";
+export { useId } from "@fluentui/react-components";

libs/hooks/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.frontend.json",
+  "include": ["src"]
+}

tsconfig.json

@@ -18,7 +18,9 @@
       "@lib-components": ["libs/components/src"],
       "@lib-components/*": ["libs/components/src/*"],
       "@lib-theme": ["libs/theme/src"],
-      "@lib-theme/*": ["libs/theme/src/*"]
+      "@lib-theme/*": ["libs/theme/src/*"],
+      "@lib-hooks": ["libs/hooks/src"],
+      "@lib-hooks/*": ["libs/hooks/src/*"]
     }
   }
 }