From a068681220cfd5a58f508a3e589dba6608c772ed Mon Sep 17 00:00:00 2001 From: Ferruccio Balestreri Date: Wed, 17 Apr 2024 19:32:40 +0200 Subject: [PATCH 1/7] [WIP] Combobox component - Missing tests and polish design --- lib/components/Command/CommandInput.tsx | 62 + lib/components/Command/CommandList.tsx | 28 + lib/components/Command/CommandOption.tsx | 48 + lib/components/Command/Lifecycle.tsx | 16 + lib/components/Command/index.tsx | 32 + lib/components/EmptyState/index.tsx | 2 +- lib/components/NoData/index.tsx | 29 + lib/{assets => icons}/EventIcon.tsx | 0 lib/icons/MagnifyingGlassIcon.tsx | 14 + lib/main.ts | 2 +- package.json | 1 + src/stories/Combobox.stories.tsx | 35 + ....stories.ts => DefaultTooltip.stories.tsx} | 0 yarn.lock | 7968 +++++++++++++++++ 14 files changed, 8235 insertions(+), 2 deletions(-) create mode 100644 lib/components/Command/CommandInput.tsx create mode 100644 lib/components/Command/CommandList.tsx create mode 100644 lib/components/Command/CommandOption.tsx create mode 100644 lib/components/Command/Lifecycle.tsx create mode 100644 lib/components/Command/index.tsx create mode 100644 lib/components/NoData/index.tsx rename lib/{assets => icons}/EventIcon.tsx (100%) create mode 100644 lib/icons/MagnifyingGlassIcon.tsx create mode 100644 src/stories/Combobox.stories.tsx rename src/stories/{DefaultTooltip.stories.ts => DefaultTooltip.stories.tsx} (100%) create mode 100644 yarn.lock diff --git a/lib/components/Command/CommandInput.tsx b/lib/components/Command/CommandInput.tsx new file mode 100644 index 0000000..cf49920 --- /dev/null +++ b/lib/components/Command/CommandInput.tsx @@ -0,0 +1,62 @@ +import { useEffect, useRef } from 'react'; +import { Combobox } from '@headlessui/react'; +import { cx } from '../common/utils'; +import { MagnifyingGlassIcon } from '../../icons/MagnifyingGlassIcon'; + +interface ICommandInputProps { + placeholder?: string; + value?: string; + onChange: (e: React.ChangeEvent) => void; + icon?: React.ReactNode; + className?: string; +} + +export const CommandInput: React.FC = ({ + placeholder = "Search...", + onChange, + icon = ( +