Add story

Author: kapantzak

src/components/input/input.js

@@ -1,7 +1,10 @@
-import React from "react"
+import React, { useRef } from "react"
 import Flex from "@/components/templates/flex"
 import { TextMicro } from "@/components/typography"
+import Drop from "@/components/drops/drop"
 import { Input, LabelText } from "./styled"
+import { useEffect } from "react"
+import { useState } from "react"
 
 const Error = ({ error }) => {
   const errorMessage = error === true ? "invalid" : error
@@ -13,6 +16,18 @@ const Error = ({ error }) => {
   )
 }
 
+const Suggestions = ({ suggestions = [] } = {}) => {
+  return (
+    <ul role="listbox">
+      {suggestions.map(({ value, label }) => (
+        <li key={value} role="option">
+          {label}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
 export const TextInput = ({
   error,
   disabled,
@@ -32,12 +47,23 @@ export const TextInput = ({
   containerStyles,
   inputContainerStyles,
   hideErrorMessage,
+  autocompleteProps,
   ...props
 }) => {
+  const inputContainerRef = useRef()
+  const [autocompleteOpen, setAutocompleteOpen] = useState()
+  const { suggestions = [] } = autocompleteProps || {}
+
+  useEffect(() => {
+    if (suggestions.length) {
+      setAutocompleteOpen(!!value.length)
+    }
+  }, [suggestions, value, setAutocompleteOpen])
+
   return (
     <Flex gap={0.5} column className={className} {...containerStyles} as="label">
       {typeof label === "string" ? <LabelText size={size}>{label}</LabelText> : label}
-      <Flex position="relative" {...inputContainerStyles}>
+      <Flex ref={inputContainerRef} position="relative" {...inputContainerStyles}>
         {iconLeft && (
           <Flex position="absolute" left={1} top={0} bottom={0} alignItems="center">
             {iconLeft}
@@ -71,6 +97,22 @@ export const TextInput = ({
       </Flex>
       {typeof hint === "string" ? <TextMicro color="textLite">{hint}</TextMicro> : !!hint && hint}
       {!hideErrorMessage ? <Error error={error} /> : null}
+      {autocompleteOpen && inputContainerRef?.current && (
+        <Drop
+          width={60}
+          target={inputContainerRef.current}
+          align={{ top: "bottom", left: "left" }}
+          animation
+          background="inputBg"
+          margin={[1, 0, 0]}
+          round={1}
+          close={() => {}}
+          onClickOutside={() => {}}
+          onEsc={() => {}}
+        >
+          <Suggestions suggestions={suggestions} />
+        </Drop>
+      )}
     </Flex>
   )
 }

src/components/input/input.stories.js

@@ -1,6 +1,7 @@
 import React from "react"
 import { Icon } from "@/components/icon"
 import { TextInput } from "."
+import { useState } from "react"
 
 export const WithIcons = args => (
   <TextInput
@@ -12,6 +13,21 @@ export const WithIcons = args => (
 
 export const Basic = args => <TextInput {...args} />
 
+export const WithAutocomplete = () => {
+  const [value, setValue] = useState("")
+  const autocompleteProps = {
+    suggestions: [{ value: "one", label: "one" }],
+  }
+
+  return (
+    <TextInput
+      value={value}
+      onChange={e => setValue(e.target.value)}
+      autocompleteProps={autocompleteProps}
+    />
+  )
+}
+
 export default {
   component: TextInput,
   args: {