Merge pull request #5 from couvq/autocomplete

basic autocomplete component

Author: couvq

apps/flourish-rapid/src/components/examplePages/AutocompletePage/index.tsx

@@ -0,0 +1,45 @@
+import ExampleGroup from '@/components/common-components/ExampleGroup'
+import ExamplePage from '@/components/common-components/ExamplePage'
+import { Autocomplete, AutocompleteItem } from 'flourish-ui'
+import { useState } from 'react'
+
+const options = [
+  { id: 1, name: 'Aerospace' },
+  { id: 2, name: 'Mechanical' },
+  { id: 3, name: 'Civil' },
+  { id: 4, name: 'Biomedical' },
+  { id: 5, name: 'Nuclear' },
+  { id: 6, name: 'Industrial' },
+  { id: 7, name: 'Chemical' },
+  { id: 8, name: 'Agricultural' },
+  { id: 9, name: 'Electrical' }
+]
+
+const AutocompletePage = () => {
+  const [majorId, setMajorId] = useState()
+
+  // @ts-ignore
+  const onSelectionChange = (id) => {
+    setMajorId(id)
+  }
+
+  return (
+    <ExamplePage exampleName="Autocomplete examples">
+      <ExampleGroup groupName="Basic autocomplete">
+        Selected id is {majorId}
+        <Autocomplete
+          label="Pick a major"
+          onSelectionChange={onSelectionChange}
+        >
+          {options.map((option) => (
+            <AutocompleteItem key={option.id} id={option.id}>
+              {option.name}
+            </AutocompleteItem>
+          ))}
+        </Autocomplete>
+      </ExampleGroup>
+    </ExamplePage>
+  )
+}
+
+export default AutocompletePage

apps/flourish-rapid/src/routes/index.tsx

@@ -1,3 +1,4 @@
+import AutocompletePage from '@/components/examplePages/AutocompletePage'
 import ButtonPage from '@/components/examplePages/ButtonPage'
 import DrawerPage from '@/components/examplePages/DrawerPage'
 import FlexPage from '@/components/examplePages/FlexPage'
@@ -59,5 +60,10 @@ export const routes: RouteEntry[] = [
     path: '/text-field',
     label: 'Text Field',
     element: <TextFieldPage />
+  },
+  {
+    path: '/autocomplete',
+    label: 'Autocomplete',
+    element: <AutocompletePage />
   }
 ]