import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { PencilMajorIcon } from "@components/icons";
import { Inline } from "@components/layout";
import { InnerNumberInput, NumberInput } from "@components/number-input";

<Meta
    title="Components/NumberInput"
    id="number-input"
/>

# NumberInput

<Tagline>A number input is used to let the user enter a numeric value.</Tagline>

<ComponentInfo
    usage={"import { NumberInput } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/number-input/src"
/>

## Usage

### Default

A default number input.

<Preview>
    <Story name="default">
        <NumberInput placeholder="Age" />
    </Story>
</Preview>

### Value

A number input can have a value.

<Preview>
    <Story name="value">
        <Inline>
            <NumberInput defaultValue={18} placeholder="Age" />
            <NumberInput defaultValue={155.75} step={0.1} placeholder="Weight" />
        </Inline>
    </Story>
</Preview>

### Min / Max

A number input value can be forced between min & max boundaries.

<Preview>
    <Story name="min / max">
        <NumberInput min={15} max={30} defaultValue={18} placeholder="Age" />
    </Story>
</Preview>

### Icon

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

<Preview>
    <Story name="icon">
        <NumberInput icon={<PencilMajorIcon />} placeholder="Age" />
    </Story>
</Preview>

### Disabled

A number input can be disabled.

<Preview>
    <Story name="disabled">
        <NumberInput disabled placeholder="Age" />
    </Story>
</Preview>

### Readonly

A number input can be readonly.

<Preview>
    <Story name="readonly">
        <NumberInput readOnly defaultValue={18} placeholder="Age" />
    </Story>
</Preview>

### Loading

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

<Preview>
    <Story name="loading">
        <NumberInput loading placeholder="Age" />
    </Story>
</Preview>

### Fluid

A number input can take the width of its container.

<Preview>
    <Story name="fluid">
        <NumberInput fluid placeholder="Age" />
    </Story>
</Preview>

### Validation

A number 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 a required age value.

<Preview filePath="/number-input/docs/RequiredAgeValidation" />

### Controlled

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

<Preview filePath="/number-input/docs/ControlledNumberInput" />

## API

### NumberInput

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

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