feat(form): autocomplete input

Author: oSobolieva

src/components/form/autocomplete/form-autocomplete.stories.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import { useForm, FormProvider } from "react-hook-form";
+import FormAutocompleteInput, {
+  AutocompleteInputProps,
+} from "./form-autocomplete";
+
+interface Option {
+  id: number;
+  name: string;
+}
+
+export default {
+  title: "Components/Form/AutocompleteInput",
+  component: FormAutocompleteInput,
+} as Meta;
+
+const Template: StoryFn<AutocompleteInputProps<Option> & { name: string }> = (
+  args
+) => {
+  const methods = useForm({
+    defaultValues: {
+      sampleAutocomplete: [],
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <FormAutocompleteInput {...args} />
+      </form>
+    </FormProvider>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Autocomplete",
+  name: "sampleAutocomplete",
+  options: [
+    { id: 1, name: "Option 1" },
+    { id: 2, name: "Option 2" },
+    { id: 3, name: "Option 3" },
+    { id: 4, name: "Option 4" },
+    { id: 5, name: "Option 5" },
+  ],
+  renderOption: (option: Option) => option.name,
+  testId: "sampleAutocomplete",
+  value: { id: 2, name: "Option 2" },
+  getOptionLabel: (option) => option.name,
+};

src/components/form/autocomplete/form-autocomplete.tsx

@@ -12,32 +12,31 @@ import Autocomplete from "@mui/material/Autocomplete";
 import TextField from "@mui/material/TextField";
 import FormHelperText from "@mui/material/FormHelperText";
 
-type AutocompleteInputProps<T> = {
+export type AutocompleteInputProps<T> = {
   label: string;
-  type?: string;
   autoFocus?: boolean;
   disabled?: boolean;
   readOnly?: boolean;
   error?: string;
   testId?: string;
   size?: "small" | "medium";
-  keyValue: keyof T;
   value: T | null;
   options: T[];
   renderOption: (option: T) => React.ReactNode;
+  getOptionLabel: (option: T) => string;
 };
 
 function AutocompleteInputRaw<T>(
   props: AutocompleteInputProps<T> & {
     name: string;
-    value: T[] | undefined | null;
+    value: T | undefined | null;
     onChange: (value: T) => void;
     onBlur: () => void;
   },
   ref?: ForwardedRef<HTMLDivElement | null>
 ) {
   return (
-    <FormControl error={!!props.error} disabled={props.disabled}>
+    <FormControl error={!!props.error} disabled={props.disabled} fullWidth>
       <Autocomplete
         ref={ref}
         id={`autocomplete-${props.name}`}
@@ -50,7 +49,7 @@ function AutocompleteInputRaw<T>(
         }}
         onBlur={props.onBlur}
         data-testid={props.testId}
-        getOptionLabel={(option) => option?.[props.keyValue]?.toString() ?? ""}
+        getOptionLabel={props.getOptionLabel}
         renderOption={(htmlProps, option) => (
           <li {...htmlProps}>{props.renderOption(option)}</li>
         )}
@@ -70,8 +69,8 @@ function AutocompleteInputRaw<T>(
 const AutocompleteInput = forwardRef(AutocompleteInputRaw) as never as <T>(
   props: AutocompleteInputProps<T> & {
     name: string;
-    value: T[] | undefined | null;
-    onChange: (value: T[]) => void;
+    value: T | undefined | null;
+    onChange: (value: T) => void;
     onBlur: () => void;
   } & { ref?: ForwardedRef<HTMLDivElement | null> }
 ) => ReturnType<typeof AutocompleteInputRaw>;
@@ -93,15 +92,15 @@ function FormAutocompleteInput<
           {...field}
           label={props.label}
           autoFocus={props.autoFocus}
-          type={props.type}
           error={fieldState.error?.message}
           disabled={props.disabled}
           readOnly={props.readOnly}
           testId={props.testId}
           options={props.options}
           renderOption={props.renderOption}
-          keyValue={props.keyValue}
+          getOptionLabel={props.getOptionLabel}
           size={props.size}
+          value={props.value}
         />
       )}
     />