baseline

Author: bubulux

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

@@ -1,72 +1,66 @@
 import { useState } from "react";
 import type { JSX } from "react";
 
-import { useComboboxFilter, useId } from "@lib-hooks";
-import { Combobox, Field } from "@lib-components";
+import { useId } from "@lib-hooks";
+import { Combobox, Field, Option, Spinner } from "@lib-components";
 import type { TComboboxProps } from "@lib-components";
 
 import { OptionLayoutTemplate } from "../../templates";
 import useClasses from "./styles";
 
-const options = [
-  // { children: "Alligator", value: "Alligator" },
-  // { children: "Bee", value: "Bee" },
-  // { children: "Bird", value: "Bird" },
-  // { children: "Dog", value: "Dog" },
-  // { children: "Dolphin", value: "Dolphin" },
-  // { children: "Ferret", value: "Ferret" },
-  // { children: "Firefly", value: "Firefly" },
-  // { children: "Fish", value: "Fish" },
-  // { children: "Goat", value: "Goat" },
-  // { children: "Horse", value: "Horse" },
-  // { children: "Lion", value: "Lion" },
-];
+type TProps = {
+  results: string[];
+  isBouncing: boolean;
+  isFetching: boolean;
+  onChange: TComboboxProps["onChange"];
+  onOptionSelect: () => void;
+};
 
-type TProps = {};
-
-export default function OptionTrace({}: TProps): JSX.Element {
+export default function OptionTrace({
+  results,
+  isBouncing,
+  isFetching,
+  onChange,
+  onOptionSelect,
+}: TProps): JSX.Element {
   const classes = useClasses();
-  const comboId = useId();
-  const [query, setQuery] = useState<string>("");
-  const currentQueryHasExactMatch = options.some(
-    (option) => option.children === query,
-  );
-
-  const children = useComboboxFilter(query, options, {
-    noOptionsMessage: "No animals match your search.",
-  });
-  const onOptionSelect: TComboboxProps["onOptionSelect"] = (_, data) => {
-    setQuery(data.optionText ?? "");
-  };
+  const comboId = useId("combobox");
 
   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"
+      withoutButton
     >
-      <Field
-        label="Search"
-        validationState={currentQueryHasExactMatch ? "success" : "error"}
-        validationMessage={
-          currentQueryHasExactMatch
-            ? "This word is known."
-            : "This word is not known."
-        }
-      >
+      <Field id={comboId} label="Select a known word">
         <Combobox
-          onOptionSelect={onOptionSelect}
           aria-labelledby={comboId}
-          placeholder="Select a known word from the dictionary"
-          onChange={(ev) => {
-            setQuery(ev.target.value);
-          }}
-          value={query}
+          placeholder="Start typing for suggestions"
+          onChange={onChange}
         >
-          {children}
+          {isFetching ? (
+            <Option text="" disabled className={classes.loading}>
+              <Spinner size="extra-small" label="Searching, hold on..." />
+            </Option>
+          ) : (
+            results.map((word) => (
+              <Option
+                key={word}
+                text={word}
+                disabled={isBouncing}
+                onClick={onOptionSelect}
+              >
+                {word}
+              </Option>
+            ))
+          )}
+
+          {results.length === 0 && (
+            <Option text="" disabled className={classes.optionReadOnly}>
+              No matching words found...
+            </Option>
+          )}
         </Combobox>
       </Field>
     </OptionLayoutTemplate>

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

@@ -11,4 +11,22 @@ export default meta;
 
 type Story = StoryObj<typeof OptionTrace>;
 
-export const Index: Story = {};
+export const Index: Story = {
+  args: {
+    // results: [],
+    results: [
+      "apple",
+      "banana",
+      "cherry",
+      "date",
+      "elderberry",
+      "fig",
+      "grape",
+      "honeydew",
+      "kiwi",
+    ],
+    isBouncing: false,
+    isFetching: false,
+    onChange: () => {},
+  },
+};

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

@@ -1,7 +1,16 @@
-import { makeStyles } from "@lib-theme";
+import { makeStyles, tokens } from "@lib-theme";
 
 const useClasses = makeStyles({
   root: {},
+  optionReadOnly: {
+    color: tokens.colorNeutralForeground1,
+  },
+  loading: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    marginLeft: "-12px",
+  },
 });
 
 export default useClasses;

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

@@ -7,38 +7,43 @@ import useOptionLayoutClasses from "@app-ui/navigation/templates/OptionLayout/st
 
 type TProps = {
   header: string;
-  onClick: () => void;
+  onClick?: () => void;
   disableClick?: boolean;
   buttonLabel?: string;
   isLoading?: boolean;
   subtitle?: string;
   children?: ReactNode;
+  withoutButton?: boolean;
 };
 
 export default function OptionLayout({
   header,
-  onClick,
   buttonLabel = "Search",
+  onClick = () => {},
   subtitle = undefined,
   children = undefined,
   disableClick = false,
   isLoading = false,
+  withoutButton = false,
 }: TProps): JSX.Element {
   const classes = useOptionLayoutClasses();
   return (
-    <Flex className={classes.root} direction="column" padding={["M"]} gap="M">
+    <Flex className={classes.root} direction="column" padding={["M"]} gap="L">
       <Flex direction="column" gap="XS">
         <Subtitle2>{header}</Subtitle2>
         {subtitle && <Caption2>{subtitle}</Caption2>}
       </Flex>
       {children}
-      <Button appearance="primary" disabled={disableClick} onClick={onClick}>
-        {isLoading ? (
-          <Spinner size="tiny" appearance="inverted" />
-        ) : (
-          buttonLabel
-        )}
-      </Button>
+
+      {!withoutButton && (
+        <Button appearance="primary" disabled={disableClick} onClick={onClick}>
+          {isLoading ? (
+            <Spinner size="tiny" appearance="inverted" />
+          ) : (
+            buttonLabel
+          )}
+        </Button>
+      )}
     </Flex>
   );
 }

libs/components/src/index.ts

@@ -6,6 +6,7 @@ export { MenuList } from "@fluentui/react-components";
 export { MenuItemRadio } from "@fluentui/react-components";
 export { Spinner } from "@fluentui/react-components";
 export { Field } from "@fluentui/react-components";
+export { Option } from "@fluentui/react-components";
 
 export { Collapse } from "@fluentui/react-motion-components-preview";