import { Meta, Story, Preview, Source } from '@storybook/addon-docs/blocks';
import { View, Input } from '@tedconf/monterey';
import { number, text, boolean, select } from '@storybook/addon-knobs';

<Meta title="Forms|Input" component={Input} />

# Input

## Import the Input component

<Source
  code={`
import { Input } from '@tedconf/monterey';
`}
/>

## Use the input

Pick the appropriate input for your situation.

<Story name="kitchen sink">
  <View sx={{ width: '100%', maxWidth: '50%', padding: 5 }}>
    <Input
      label="Name"
      variant={select('variant', ['onGray', 'onBlack', 'onWhite'], 'onWhite')}
      disabled={boolean('disabled', false)}
      label="Name"
      placeholder="What’s your name?"
      required
      success={text('success', 'That looks like a name to me')}
      error={text('error', 'I don’t think that’s a name')}
      pattern={text('pattern', '[A-za-z]+')}
      type={text('type', 'text')}
      valid={boolean('valid', undefined)}
      invalid={boolean('invalid', undefined)}
    />
  </View>
</Story>

## Props

Inputs attempt to bake in everything you’d need: labels, validation, etc. They rely on the HTML input spec as much as is reasonable, passing through props to the `input` component inside. They also provide some additional props to fulfill the 90% use case ergonomically.

### variant

see the "Variants" section below for samples of each.

### disabled

makes an input uninteractible and visually distinguishes it as such. Uses the css `[disabled]` selector.

<Preview withSource="open">
  <Story name="disabled">
    <View sx={{ padding: 5, backgroundColor: 'white' }}>
      <Input
        variant="onWhite"
        disabled
        label="Disabled Input Sample"
        placeholder="Sample data"
      />
    </View>
  </Story>
</Preview>

### valid & invalid

force an input into valid/invalid state, regardless of the value and rules.

<Preview withSource="open">
  <Story name="valid/invalid">
    <View sx={{ padding: 5, backgroundColor: 'white' }}>
      <View sx={{ marginBottom: 3 }}>
        <Input label="Invalid Input Sample" placeholder="Sample data" valid />
      </View>
      <View sx={{ marginBottom: 3 }}>
        <Input label="Valid Input Sample" placeholder="Sample data" invalid />
      </View>
    </View>
  </Story>
</Preview>

### success & error

show a message on valid/invalid

<Preview withSource="open">
  <Story name="success/error messages">
    <View sx={{ padding: 5, backgroundColor: 'white' }}>
      <View sx={{ marginBottom: 3 }}>
        <Input
          label="Invalid Input Sample"
          placeholder="Sample data"
          valid
          success="That’s a name. Good job."
          error="That's not a name."
        />
      </View>
      <View sx={{ marginBottom: 3 }}>
        <Input
          label="Valid Input Sample"
          placeholder="Sample data"
          invalid
          success="That’s a name. Good job."
          error="That's not a name."
        />
      </View>
    </View>
  </Story>
</Preview>

## Variants

### onWhite

<Preview withSource="open">
  <Story name="onWhite">
    <View sx={{ padding: 5, backgroundColor: 'white' }}>
      <Input
        variant="onWhite"
        label="Name"
        placeholder="What’s your name?"
        required
        pattern="[A-za-z]+"
      />
    </View>
  </Story>
</Preview>

### onBlack

<Preview withSource="open">
  <Story name="onBlack">
    <View sx={{ padding: 5, backgroundColor: 'black' }}>
      <Input
        variant="onBlack"
        label="Name"
        placeholder="What’s your name?"
        required
        pattern="[A-za-z]+"
      />
    </View>
  </Story>
</Preview>

### onGray

<Preview withSource="open">
  <Story name="onGray">
    <View sx={{ padding: 5, backgroundColor: 'gray.2' }}>
      <Input
        variant="onGray"
        label="Name"
        placeholder="What’s your name?"
        required
        pattern="[A-za-z]+"
      />
    </View>
  </Story>
</Preview>