1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, { useState } from 'react'
import styled from 'styled-components'
import { Meta } from '@storybook/react'
import AutocompleteInput from '../src/AutocompleteInput'
import { DOCTORS_OPTIONS, FRUITS_OPTIONS } from './fixtures'

const StyledWrapper = styled.div`
  width: 400px;
  margin-top: -140px;
`
const StyledForm = styled.form`
  width: 100%;
  margin: 0;
`

export default {
  title: 'AutocompleteInput',
  parameters: { docs: { page: null }, layout: 'centered' },
  decorators: [
    (Story) => (
      <StyledWrapper>
        <Story />
      </StyledWrapper>
    ),
  ],
} as Meta

export const Default = () => (
  <AutocompleteInput options={FRUITS_OPTIONS} placeholder="Start typing “Apple” or “Orange”…" />
)

export const Controlled = () => {
  const [value, setValue] = useState<string>('')
  return (
    <StyledForm
      onSubmit={(e) => {
        e.preventDefault()
        alert(`Submitted: ${value}`)
      }}
    >
      <AutocompleteInput
        value={value}
        onValueChange={setValue}
        onOptionSelect={(selectedValue) => {
          alert(`Selected: ${selectedValue}`)
        }}
        options={DOCTORS_OPTIONS}
        placeholder="Start typing “Neuro” or “Surgery”…"
      />
    </StyledForm>
  )
}