[ui][typeahead] implementation

apps/portal/src/components/global/ProductNavigation.tsx

@@ -25,11 +25,11 @@ export default function ProductNavigation({ items, title }: Props) {
         {items.map((item) =>
           item.children != null && item.children.length > 0 ? (
             <Menu key={item.name} as="div" className="relative text-left">
-              <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-sm font-medium text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
+              <Menu.Button className="focus:ring-primary-600 flex items-center rounded-md text-sm font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2">
                 <span>{item.name}</span>
                 <ChevronDownIcon
                   aria-hidden="true"
-                  className="ml-1 h-5 w-5 text-gray-500"
+                  className="ml-1 h-5 w-5 text-slate-500"
                 />
               </Menu.Button>
               <Transition
@@ -47,8 +47,8 @@ export default function ProductNavigation({ items, title }: Props) {
                         {({ active }) => (
                           <Link
                             className={clsx(
-                              active ? 'bg-gray-100' : '',
-                              'block px-4 py-2 text-sm text-gray-700',
+                              active ? 'bg-slate-100' : '',
+                              'block px-4 py-2 text-sm text-slate-700',
                             )}
                             href={child.href}>
                             {child.name}
@@ -63,7 +63,7 @@ export default function ProductNavigation({ items, title }: Props) {
           ) : (
             <Link
               key={item.name}
-              className="hover:text-primary-600 text-sm font-medium text-gray-900"
+              className="hover:text-primary-600 text-sm font-medium text-slate-900"
               href={item.href}>
               {item.name}
             </Link>

apps/storybook/stories/typeahead.stories.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import type { ComponentMeta } from '@storybook/react';
+import type { TypeaheadOption } from '@tih/ui';
+import { Typeahead } from '@tih/ui';
+
+export default {
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    isLabelHidden: {
+      control: 'boolean',
+    },
+    label: {
+      control: 'text',
+    },
+  },
+  component: Typeahead,
+  parameters: {
+    docs: {
+      iframeHeight: 400,
+      inlineStories: false,
+    },
+  },
+  title: 'Typeahead',
+} as ComponentMeta<typeof Typeahead>;
+
+export function Basic({
+  disabled,
+  isLabelHidden,
+  label,
+}: Pick<
+  React.ComponentProps<typeof Typeahead>,
+  'disabled' | 'isLabelHidden' | 'label'
+>) {
+  const people = [
+    { id: '1', label: 'Wade Cooper', value: '1' },
+    { id: '2', label: 'Arlene Mccoy', value: '2' },
+    { id: '3', label: 'Devon Webb', value: '3' },
+    { id: '4', label: 'Tom Cook', value: '4' },
+    { id: '5', label: 'Tanya Fox', value: '5' },
+    { id: '6', label: 'Hellen Schmidt', value: '6' },
+  ];
+  const [selectedEntry, setSelectedEntry] = useState<TypeaheadOption>(
+    people[0],
+  );
+  const [query, setQuery] = useState('');
+
+  const filteredPeople =
+    query === ''
+      ? people
+      : people.filter((person) =>
+          person.label
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .includes(query.toLowerCase().replace(/\s+/g, '')),
+        );
+
+  return (
+    <Typeahead
+      disabled={disabled}
+      isLabelHidden={isLabelHidden}
+      label={label}
+      options={filteredPeople}
+      selectedOption={selectedEntry}
+      onQueryChange={setQuery}
+      onSelectOption={setSelectedEntry}
+    />
+  );
+}
+
+Basic.args = {
+  disabled: false,
+  isLabelHidden: false,
+  label: 'Author',
+};