import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { CrossButton } from "@components/button";
import { PencilMajorIcon } from "@components/icons";
import { InnerPasswordInput, InnerSearchInput, InnerTextInput, PasswordInput, SearchInput, TextInput } from "@components/text-input";

<Meta
    title="Components/TextInput"
    id="text-input"
/>

# TextInput

<Tagline>A text input allow a user to enter and edit a text.</Tagline>

<ComponentInfo
    usage={"import { TextInput, SearchInput, PasswordInput } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/text-input/src"
/>

## Usage

### Default

A default text input.

<Preview>
    <Story name="default">
        <TextInput placeholder="Where to?" />
    </Story>
</Preview>

### Value

A text input can have a value.

<Preview>
    <Story name="value">
        <TextInput defaultValue="Deep space" placeholder="Where to?" />
    </Story>
</Preview>

### Icon

A text input can contain an [icon](?path=/docs/icon-gallery--page).

<Preview>
    <Story name="icon">
        <TextInput icon={<PencilMajorIcon />} placeholder="Where to?" />
    </Story>
</Preview>

### Button

A text input can contain a [button](?path=/docs/button--default-story).

<Preview>
    <Story name="button">
        <TextInput button={<CrossButton aria-label="Clear value" />} placeholder="Where to?" />
    </Story>
</Preview>

### Disabled

A text input can be disabled.

<Preview>
    <Story name="disabled">
        <TextInput disabled placeholder="Where to?" />
    </Story>
</Preview>

### Readonly

A text input can be readonly.

<Preview>
    <Story name="readonly">
        <TextInput readOnly defaultValue="Deep space" placeholder="Where to?" />
    </Story>
</Preview>

### Loading

A text input can show that it is currently loading data.

<Preview>
    <Story name="loading">
        <TextInput loading placeholder="Where to?" />
    </Story>
</Preview>

### Fluid

A text input can take the width of its container.

<Preview>
    <Story name="fluid">
        <TextInput fluid placeholder="Where to?" />
    </Story>
</Preview>

### Validation

A text input can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either `"valid"` or `"invalid"` to the input via the `validationState` prop.

The example below illustrates how one would validate if the user has entered a valid email.

<Preview filePath="/text-input/docs/EmailValidation" />

### Controlled

A text input `value` can be handled in controlled mode.

<Preview filePath="/text-input/docs/ControlledTextInput" />

## SearchInput

A specialized text input for [search input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search).

<Preview>
    <Story name="search">
        <SearchInput placeholder="Where to?" />
    </Story>
</Preview>

## PasswordInput

A specialized text input which show / hide a password.

<Preview>
    <Story name="password">
        <PasswordInput placeholder="What's your secret?" />
    </Story>
</Preview>

## API

### TextInput

<ComponentInfo
    usage={"import { TextInput } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerTextInput.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerTextInput} sort="alpha" />

### SearchInput

<ComponentInfo
    usage={"import { SearchInput } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerSearchInput.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerSearchInput} sort="alpha" />

### PasswordInput

<ComponentInfo
    usage={"import { PasswordInput } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerPasswordInput.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerPasswordInput} sort="alpha" />
