import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Inline } from "@components/layout";
import { InnerTextArea, TextArea } from "@components/text-area";

<Meta
    title="Components/TextArea"
    id="textarea"
/>

# TextArea

<Tagline>A textarea is a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text.</Tagline>

<ComponentInfo
    usage={"import { TextArea } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/text-area/src"
/>

## Usage

### Default

A default textarea.

<Preview>
    <Story name="default">
        <TextArea placeholder="Why should you go to space?" />
    </Story>
</Preview>

### Value

A textarea can have a value.

<Preview>
    <Story name="value">
        <TextArea defaultValue="To fly high!" placeholder="Why should you go to space?" />
    </Story>
</Preview>

### Max Rows

A textarea can be limited to a maximum number of rows.

<Preview>
    <Story name="max rows">
        <Inline>
            <TextArea maxRows={5} placeholder="Why should you go to space?" />
        </Inline>
    </Story>
</Preview>

### Disabled

A textarea can be disabled.

<Preview>
    <Story name="disabled">
        <TextArea disabled placeholder="Why should you go to space?" />
    </Story>
</Preview>

### Readonly

A textarea can be readonly.

<Preview>
    <Story name="readonly">
        <TextArea readOnly defaultValue="NASA selected SpaceX to develop a lunar optimized Starship to transport crew between lunar orbit and the surface of the Moon as part of NASA's Artemis program." placeholder="Winner announcement" />
    </Story>
</Preview>

### Loading

A textarea can show that it is currently loading data.

<Preview>
    <Story name="loading">
        <TextArea loading placeholder="Why should you go to space?" />
    </Story>
</Preview>

### Fluid

A textarea can take the width of its container.

<Preview>
    <Story name="fluid">
        <TextArea fluid placeholder="Why should you go to space?" />
    </Story>
</Preview>

### Validation

A textarea 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 that a text area doesn't exceed 25 characters (yes it could also be done with maxLength).

<Preview filePath="/text-area/docs/LengthValidation" />

### Controlled

A textarea `value` can be handled in controlled mode.

<Preview filePath="/text-area/docs/ControlledTextArea" />

## API

### TextArea

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

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


