feat: add AutocompleteField

src/Autocomplete/index.stories.tsx

@@ -0,0 +1,21 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+
+import { toFormInputOption } from '../Select';
+
+import { AutocompleteProps, Autocomplete } from './index';
+
+export default {
+  title: 'Autocomplete',
+};
+
+export const WithOptions: Story<AutocompleteProps> = function WithOptions(
+  args,
+) {
+  return (
+    <Autocomplete
+      options={['food', 'foo', 'foobar', 'bar'].map(toFormInputOption)}
+      {...args}
+    />
+  );
+};

src/Fields/AutocompleteField.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  useController,
+  FieldValues,
+  UseControllerProps,
+  FieldPath,
+} from 'react-hook-form';
+
+import { Autocomplete, AutocompleteProps } from '../Autocomplete';
+
+import { useFieldContext } from './FieldProvider';
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
+
+type AutocompleteFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> &
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
+    component?: AutocompleteProps;
+  };
+
+/**
+ * This component appears unstyled in Storybook because it is not properly prefixing its class names.
+ * However, if this library is used alongside globally included antd styles, it works somewhat fine.
+ * When we rip out antd 3 from our projects, we may want to remove the class prefix in this library to fix this.
+ */
+export function AutocompleteField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  formItem,
+  component,
+  ...controller
+}: AutocompleteFieldProps<TFieldValues, TName>) {
+  const { field } = useController<TFieldValues, TName>(controller);
+
+  const { disabled } = useFieldContext();
+
+  return (
+    <FieldWrapper controller={controller} formItem={formItem}>
+      <Autocomplete
+        {...field}
+        value={field.value ?? undefined}
+        disabled={disabled}
+        {...component}
+      />
+    </FieldWrapper>
+  );
+}

src/Fields/index.stories.tsx

@@ -8,6 +8,7 @@ import { TextAreaRef } from '../Input';
 import { toFormInputOption } from '../Select';
 import { Space } from '../Space';
 
+import { AutocompleteField } from './AutocompleteField';
 import { CheckboxField } from './CheckboxField';
 import { FieldProvider, FieldProviderProps } from './FieldProvider';
 import { InputField } from './InputField';
@@ -23,6 +24,7 @@ export default {
 };
 
 type FormType = {
+  autocomplete: string;
   checkbox: boolean;
   input: string;
   input_number: number;
@@ -124,6 +126,14 @@ function AllFields() {
   const formMethods = useFormContext<FormType>();
   return (
     <Form>
+      <AutocompleteField
+        name="autocomplete"
+        control={formMethods.control}
+        formItem={{ label: 'Autocomplete' }}
+        component={{
+          options: ['foo', 'bar'].map(toFormInputOption),
+        }}
+      />
       <CheckboxField
         name="checkbox"
         control={formMethods.control}