cerc-io/snowballtools-base-mirror
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base.git synced 2024-12-22 12:37:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ProjectSearchBarDialog): getMenuProps error (#221)

Browse Source 
- 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

---
This commit is contained in:
Vivian Phung 2024-06-24 18:48:32 -04:00 committed by GitHub
parent dee84f18cb
commit f981f1a3f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx
View File

@ -1,7 +1,7 @@
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { useCombobox } from 'downshift'; import { useCombobox } from 'downshift';
import { Project } from 'gql-client'; import { Project } from 'gql-client';
import { useDebounce } from 'usehooks-ts'; import { useDebounceValue } from 'usehooks-ts';
import SearchBar from 'components/SearchBar'; import SearchBar from 'components/SearchBar';
import { useGQLClient } from 'context/GQLClientContext'; 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( const fetchProjects = useCallback(
async (inputValue: string) => { async (inputValue: string) => {

45
packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx
View File

@ -5,7 +5,7 @@ import { CrossIcon, SearchIcon } from 'components/shared/CustomIcon';
import { Input } from 'components/shared/Input'; import { Input } from 'components/shared/Input';
import { useGQLClient } from 'context/GQLClientContext'; import { useGQLClient } from 'context/GQLClientContext';
import { Project } from 'gql-client'; import { Project } from 'gql-client';
import { useDebounce } from 'usehooks-ts'; import { useDebounceValue } from 'usehooks-ts';
import { ProjectSearchBarItem } from './ProjectSearchBarItem'; import { ProjectSearchBarItem } from './ProjectSearchBarItem';
import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty'; import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -27,25 +27,30 @@ export const ProjectSearchBarDialog = ({
const client = useGQLClient(); const client = useGQLClient();
const navigate = useNavigate(); const navigate = useNavigate();
const { getInputProps, getItemProps, inputValue, setInputValue } = const {
useCombobox({ getInputProps,
items, getItemProps,
itemToString(item) { getMenuProps,
return item ? item.name : ''; inputValue,
}, setInputValue,
selectedItem, } = useCombobox({
onSelectedItemChange: ({ selectedItem: newSelectedItem }) => { items,
if (newSelectedItem) { itemToString(item) {
setSelectedItem(newSelectedItem); return item ? item.name : '';
onClickItem?.(newSelectedItem); },
navigate( selectedItem,
`/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`, 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( const fetchProjects = useCallback(
async (inputValue: string) => { async (inputValue: string) => {
@ -86,7 +91,7 @@ export const ProjectSearchBarDialog = ({
</Button> </Button>
</div> </div>
{/* Content */} {/* 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.length > 0
? items.map((item, index) => ( ? items.map((item, index) => (
<> <>

2
packages/frontend/src/layouts/ProjectSearch.tsx
View File

@ -32,7 +32,7 @@ const ProjectSearch = () => {
return ( return (
<section className="h-full flex flex-col"> <section className="h-full flex flex-col">
{/* Header */} {/* 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 pr-6 pl-2 py-2 items-center">
<div className="flex-1"> <div className="flex-1">
<ProjectSearchBar <ProjectSearchBar

20
packages/frontend/src/stories/Components/ProjectSearchBar.stories.tsx Normal file
View File

@ -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 = {};