import Input from '../Input';

import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: Input,
  title: 'Components/Input',
};

<Meta
  title="Components/Input"
  component={Input}
/>

export const InputTemplate = createComponentTemplate(Input);

<Heading
  title="Input"
  componentRelativePath="Input/Input.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)

## Overview

Input is a component that renders the Inputs.

<Canvas>
  <Story
    name="Overview"
    args={{
      label: 'Input',
    }}
  >
    {InputTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Input} />

## Usage

### Transparent

<Canvas>
  <Story
    name="Transparent"
    args={{
      transparent: true,
    }}
  >
    {InputTemplate.bind({})}
  </Story>
</Canvas>

### Small Input

<Canvas>
  <Story
    name="Small"
    args={{
      smallInput: true,
    }}
  >
    {InputTemplate.bind({})}
  </Story>
</Canvas>

### Classnames

You can change the appearance of the container and label.

<Canvas>
  <Story
    name="ClassNames"
    args={{
      label: 'Input',
      containerClassName: 'bg-gray-500',
      labelClassName: 'text-yellow-500',
    }}
  >
    {InputTemplate.bind({})}
  </Story>
</Canvas>

## Contribute

<Footer componentRelativePath="Input/__stories__/input.stories.mdx" />
