feat(fields): add AutoComplete

.eslintrc.js

@@ -123,6 +123,8 @@ module.exports = {
 
         'import/no-default-export': 'off',
 
+        'react/function-component-definition': 'off',
+
         'sort-keys-fix/sort-keys-fix': 'off'
       }
     }

package.json

@@ -97,6 +97,7 @@
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.2.0",
     "jest-environment-node": "29.3.1",
+    "ky": "0.33.0",
     "lint-staged": "13.0.4",
     "lodash.throttle": "4.1.1",
     "microbundle": "0.15.1",

src/fields/AutoComplete.tsx

@@ -0,0 +1,113 @@
+import ky from 'ky'
+import { useCallback, useMemo, useState } from 'react'
+import { AutoComplete as RsuiteAutoComplete } from 'rsuite'
+import styled from 'styled-components'
+
+import { Field } from '../elements/Field'
+import { Label } from '../elements/Label'
+
+import type { Option } from '../types'
+import type { AutoCompleteProps as RsuiteAutoCompleteProps } from 'rsuite'
+import type { Promisable } from 'type-fest'
+
+export type AutoCompleteProps = Omit<
+  RsuiteAutoCompleteProps,
+  'as' | 'data' | 'id' | 'onChange' | 'onSelect' | 'value'
+> & {
+  isLabelHidden?: boolean
+  isLight?: boolean
+  label: string
+  name: string
+  onChange?: (nextValue: string | undefined) => Promisable<void>
+  onQuery?: (nextQuery: string | undefined) => Promisable<void>
+  options?: Option[]
+  queryMap?: (record: Record<string, any>) => Option
+  queryUrl?: string
+}
+export function AutoComplete({
+  isLabelHidden,
+  isLight = false,
+  label,
+  onChange,
+  onQuery,
+  options,
+  queryMap,
+  queryUrl,
+  ...originalProps
+}: AutoCompleteProps) {
+  const [autoGeneratedOptions, setAutoGeneratedOptions] = useState<Option[]>([])
+
+  const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options])
+  const key = useMemo(
+    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,
+    [originalProps.defaultValue, originalProps.name]
+  )
+
+  const handleChange = useCallback(
+    async (nextQuery: string) => {
+      // console.log(nextQuery)
+      // console.log(nextQuery.length)
+
+      if (queryUrl && queryMap) {
+        const url = queryUrl.replace('%s', nextQuery)
+        const rawData: Record<string, any>[] = await ky.get(url).json()
+        const nextData = rawData.map(queryMap)
+
+        setAutoGeneratedOptions(nextData)
+      }
+
+      const normalizedNextQuery = nextQuery && nextQuery.trim().length ? nextQuery : undefined
+
+      if (onChange && !normalizedNextQuery) {
+        onChange(undefined)
+      }
+
+      if (onQuery) {
+        onQuery(normalizedNextQuery)
+      }
+    },
+    [onChange, onQuery, queryMap, queryUrl]
+  )
+
+  const handleSelect = useCallback(
+    (nextValue: string) => {
+      if (!onChange) {
+        return
+      }
+
+      onChange(nextValue)
+    },
+    [onChange]
+  )
+
+  return (
+    <Field>
+      <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>
+        {label}
+      </Label>
+
+      <StyledAutoComplete
+        key={key}
+        $isLight={isLight}
+        data={controlledOptions}
+        id={originalProps.name}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        {...originalProps}
+      />
+    </Field>
+  )
+}
+
+const StyledAutoComplete = styled(RsuiteAutoComplete)<{
+  $isLight: boolean
+}>`
+  font-size: 13px;
+
+  > input {
+    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+    border: 0;
+    font-size: 13px;
+    width: 100%;
+  }
+`

src/fields/TextInput.tsx

@@ -46,7 +46,7 @@ export function TextInput({ isLabelHidden = false, label, onChange, ...originalP
   )
 }
 
-export const StyledInput = styled(Input)<{
+const StyledInput = styled(Input)<{
   isLight: boolean
 }>`
   background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)};

src/fields/Textarea.tsx

@@ -65,7 +65,7 @@ export function Textarea({
   )
 }
 
-export const StyledInput = styled(Input)<{
+const StyledInput = styled(Input)<{
   isLight: boolean
 }>`
   background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)};

src/index.ts

@@ -17,6 +17,7 @@ export { Label } from './elements/Label'
 export { Legend } from './elements/Legend'
 export { Tag } from './elements/Tag'
 
+export { AutoComplete } from './fields/AutoComplete'
 export { Checkbox } from './fields/Checkbox'
 export { DateRangePicker } from './fields/DateRangePicker'
 export { DatePicker } from './fields/DatePicker'
@@ -57,6 +58,7 @@ export type { LabelProps } from './elements/Label'
 export type { LegendProps } from './elements/Legend'
 export type { TagProps } from './elements/Tag'
 
+export type { AutoCompleteProps } from './fields/AutoComplete'
 export type { CheckboxProps } from './fields/Checkbox'
 export type { DateRangePickerProps } from './fields/DateRangePicker'
 export type { DatePickerProps } from './fields/DatePicker'

stories/fields/AutoComplete/WithOptions.stories.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+
+import { AutoComplete } from '../../../src'
+import { Output } from '../../_components/Output'
+
+import type { AutoCompleteProps } from '../../../src'
+
+const args: AutoCompleteProps = {
+  defaultValue: undefined,
+  isLabelHidden: false,
+  isLight: false,
+  label: 'An autocompletable select',
+  name: 'autoComplete',
+  options: [
+    { label: 'Nemo', value: 'NEMO' },
+    { label: 'Doris', value: 'DORIS' }
+  ]
+}
+
+export default {
+  title: 'Elements/AutoComplete',
+  component: AutoComplete,
+
+  argTypes: {
+    defaultValue: {
+      control: 'text'
+    }
+  },
+
+  args
+}
+
+export function WithOptions(props: AutoCompleteProps) {
+  const [outputValue, setOutputValue] = useState<string | undefined | '∅'>('∅')
+
+  return (
+    <>
+      <AutoComplete {...props} onChange={setOutputValue} />
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}

stories/fields/AutoComplete/WithQuery.stories.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+
+import { AutoComplete } from '../../../src'
+import { Output } from '../../_components/Output'
+
+import type { AutoCompleteProps } from '../../../src'
+
+const args: AutoCompleteProps = {
+  isLabelHidden: false,
+  isLight: false,
+  label: 'An autocompletable select',
+  name: 'autoComplete',
+  queryMap: ({ id, name }) => ({
+    label: name,
+    value: id
+  }),
+  queryUrl: 'https://api.openbrewerydb.org/breweries?by_name=%s'
+}
+
+export default {
+  title: 'Elements/AutoComplete',
+  component: AutoComplete,
+
+  argTypes: {},
+
+  args
+}
+
+export function WithQuery(props: AutoCompleteProps) {
+  const [outputValue, setOutputValue] = useState<string | undefined | '∅'>('∅')
+
+  return (
+    <>
+      <AutoComplete {...props} onChange={setOutputValue} />
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}

yarn.lock

@@ -3351,6 +3351,7 @@ __metadata:
     jest: 29.3.1
     jest-environment-jsdom: 29.2.0
     jest-environment-node: 29.3.1
+    ky: 0.33.0
     lint-staged: 13.0.4
     lodash.throttle: 4.1.1
     microbundle: 0.15.1
@@ -15966,6 +15967,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ky@npm:0.33.0":
+  version: 0.33.0
+  resolution: "ky@npm:0.33.0"
+  checksum: 9354833866c723f607ae4b16fb6c5edc018360a7500d35e023bb895d19f0724d5d6c97d42525990bca056ecb439d7ec1b08a0afa0f6596e4e53b386ac359f15a
+  languageName: node
+  linkType: hard
+
 "language-subtag-registry@npm:~0.3.2":
   version: 0.3.21
   resolution: "language-subtag-registry@npm:0.3.21"