ADS3-Design-System/src/components/atoms/Autocomplete/Autocomplete.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Autocomplete } from './Autocomplete'

const states = [
  { value: 'nsw', label: 'New South Wales' },
  { value: 'vic', label: 'Victoria' },
  { value: 'qld', label: 'Queensland' },
  { value: 'wa', label: 'Western Australia' },
  { value: 'sa', label: 'South Australia' },
  { value: 'tas', label: 'Tasmania' },
  { value: 'act', label: 'Australian Capital Territory' },
  { value: 'nt', label: 'Northern Territory' },
]

const meta: Meta<typeof Autocomplete> = {
  title: 'Atoms/Autocomplete',
  component: Autocomplete,
  tags: ['autodocs'],
  parameters: { layout: 'padded' },
}

export default meta
type Story = StoryObj<typeof Autocomplete>

const BasicTemplate = () => {
  const [value, setValue] = useState('')
  return (
    <div className="w-96">
      <Autocomplete
        label="State"
        placeholder="Search states…"
        options={states}
        value={value}
        onChange={setValue}
      />
    </div>
  )
}

export const Default: Story = {
  render: () => <BasicTemplate />,
}

const FreeSoloTemplate = () => {
  const [value, setValue] = useState('')
  return (
    <div className="w-96">
      <Autocomplete
        label="School name"
        placeholder="Type to search or enter a new name…"
        options={states}
        value={value}
        onChange={setValue}
        freeSolo
        hint="Select from the list or type a custom value"
      />
    </div>
  )
}

export const FreeSolo: Story = {
  name: 'Free solo (Combobox)',
  render: () => <FreeSoloTemplate />,
}

export const WithError: Story = {
  name: 'With error',
  render: () => (
    <div className="w-96">
      <Autocomplete
        label="State"
        options={states}
        error="Please select a valid state"
      />
    </div>
  ),
}

export const Disabled: Story = {
  render: () => (
    <div className="w-96">
      <Autocomplete
        label="State"
        options={states}
        value="nsw"
        disabled
      />
    </div>
  ),
}