basic unstyled typeahead component implementation

packages/flourish-ui/src/components/Typeahead/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  ComboBox,
+  Input,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover
+} from 'react-aria-components'
+
+interface TypeaheadProps {
+  label: string
+  options: string[]
+}
+
+export const Typeahead = ({ label, options }: TypeaheadProps) => {
+  return (
+    <ComboBox>
+      <Label>{label}</Label>
+      <Input />
+      <Popover>
+        <ListBox>
+          {options.map((option) => (
+            <ListBoxItem key={option}>{option}</ListBoxItem>
+          ))}
+        </ListBox>
+      </Popover>
+    </ComboBox>
+  )
+}

packages/flourish-ui/src/stories/Typeahead.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Typeahead } from '../components/Typeahead'
+
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Example/Typeahead',
+  component: Typeahead,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered'
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    label: { control: 'text' },
+    options: {
+        control: {
+            type: 'array',
+            of: { type: 'text'}
+        }
+    }
+  }
+} satisfies Meta<typeof Typeahead>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const primary: Story = {
+  args: {
+    label: 'Select an animal',
+    options: ['Aardvark', 'Cat', 'Dog', 'Kangaroo', 'Panda', 'Snake']
+  }
+}