From f981f1a3f68fe080d3ce3c5c25a046cd0522a3ea Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Mon, 24 Jun 2024 18:48:32 -0400
Subject: [PATCH] fix(ProjectSearchBarDialog): `getMenuProps` error (#221)

- Replaced `useDebounce` with `useDebounceValue` for better type inference and simplicity
- Added `getMenuProps` to `useCombobox` to support better accessibility and usability
- Minor style tweak to improve `ProjectSearch` header hover effect
- Created Storybook stories for the `ProjectSearchBar` component

---
---
 .../ProjectSearchBar/ProjectSearchBar.tsx     |  4 +-
 .../ProjectSearchBarDialog.tsx                | 45 ++++++++++---------
 .../frontend/src/layouts/ProjectSearch.tsx    |  2 +-
 .../Components/ProjectSearchBar.stories.tsx   | 20 +++++++++
 4 files changed, 48 insertions(+), 23 deletions(-)
 create mode 100644 packages/frontend/src/stories/Components/ProjectSearchBar.stories.tsx

diff --git a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
index c5fb90ba..0c7e3b58 100644
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCombobox } from 'downshift';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 
 import SearchBar from 'components/SearchBar';
 import { useGQLClient } from 'context/GQLClientContext';
@@ -42,7 +42,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
     },
   });
 
-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
diff --git a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
index f6bf6492..3b645e86 100644
--- a/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
+++ b/packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
@@ -5,7 +5,7 @@ import { CrossIcon, SearchIcon } from 'components/shared/CustomIcon';
 import { Input } from 'components/shared/Input';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 import { ProjectSearchBarItem } from './ProjectSearchBarItem';
 import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
 import { useNavigate } from 'react-router-dom';
@@ -27,25 +27,30 @@ export const ProjectSearchBarDialog = ({
   const client = useGQLClient();
   const navigate = useNavigate();
 
-  const { getInputProps, getItemProps, inputValue, setInputValue } =
-    useCombobox({
-      items,
-      itemToString(item) {
-        return item ? item.name : '';
-      },
-      selectedItem,
-      onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
-        if (newSelectedItem) {
-          setSelectedItem(newSelectedItem);
-          onClickItem?.(newSelectedItem);
-          navigate(
-            `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
-          );
-        }
-      },
-    });
+  const {
+    getInputProps,
+    getItemProps,
+    getMenuProps,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
+    items,
+    itemToString(item) {
+      return item ? item.name : '';
+    },
+    selectedItem,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+      if (newSelectedItem) {
+        setSelectedItem(newSelectedItem);
+        onClickItem?.(newSelectedItem);
+        navigate(
+          `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
+        );
+      }
+    },
+  });
 
-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
@@ -86,7 +91,7 @@ export const ProjectSearchBarDialog = ({
               </Button>
             </div>
             {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2">
+            <div className="flex flex-col gap-1 px-2 py-2" {...getMenuProps()}>
               {items.length > 0
                 ? items.map((item, index) => (
                     <>
diff --git a/packages/frontend/src/layouts/ProjectSearch.tsx b/packages/frontend/src/layouts/ProjectSearch.tsx
index 69a082a5..a9360c17 100644
--- a/packages/frontend/src/layouts/ProjectSearch.tsx
+++ b/packages/frontend/src/layouts/ProjectSearch.tsx
@@ -32,7 +32,7 @@ const ProjectSearch = () => {
   return (
     <section className="h-full flex flex-col">
       {/* Header */}
-      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] z-30">
+      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] hover:z-30">
         <div className="flex pr-6 pl-2 py-2 items-center">
           <div className="flex-1">
             <ProjectSearchBar
diff --git a/packages/frontend/src/stories/Components/ProjectSearchBar.stories.tsx b/packages/frontend/src/stories/Components/ProjectSearchBar.stories.tsx
new file mode 100644
index 00000000..6d168889
--- /dev/null
+++ b/packages/frontend/src/stories/Components/ProjectSearchBar.stories.tsx
@@ -0,0 +1,20 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { ProjectSearchBar } from 'components/projects/ProjectSearchBar';
+
+const meta: Meta<typeof ProjectSearchBar> = {
+  title: 'Components/ProjectSearchBar',
+  component: ProjectSearchBar,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: {
+      action: 'change',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProjectSearchBar>;
+
+export const Default: Story = {};