import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
import { Input, InputVariants } from "foundations/components/presentation";

<Meta
  title="Basic Presentation/Input"
  component={Input}
  argTypes={{
    type: {
      control: {
        type: "select",
        options: ["text", "number", "password", "date"]
      }
    }
  }}
/>

# Input

#### Single-line input form element.

<br />
<br />
<br />

## Interactive props

export const Template = args => <Input {...args} />;

<Canvas>
  <Story
    name="Default"
    args={{
      placeholder: "Interactive Input",
      disabled: false,
      type: "text"
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Usage examples

<br />
<br />

### Variants

<Canvas>
  <Story
    name="Variants"
    args={{ placeholder: "Dark Input", variant: InputVariants.DARK }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
<Input placeholder="Dark Input" variant={InputVariants.DARK} />
```

### Initial Value

<Canvas>
  <Story name="Initial Value" args={{ value: "Initial value", disabled: true }}>
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
<Input value="Initial value" disabled />
```

### Types

<Canvas>
  <Story name="Types" args={{ type: "number", placeholder: 7 }}>
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
<Input type="number" placeholder="7" />
```
