import {
  Story,
  Canvas,
  ArgsTable,
  Meta,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { ORIENTATION } from "../../types";
import { Stack } from "../Stack";
import { Textarea } from "./Textarea";

<Meta title="Components/Forms/Textarea" component={Textarea} />

<ComponentHeading
  componentName="Textarea"
  description="Multi-line text input with automatic resizing"
  sourcePath="src/components/Textarea/Textarea.tsx"
/>

## Installation

```jsx
import { Textarea } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Default">
    <Textarea placeholder="This Textarea expands automatically up to eight rows" />
  </Story>
</Canvas>

## API

These props extend `TextareaHTMLAttributes<HTMLTextAreaElement>`.

<ArgsTable of={Textarea} />

## Demos

### Sizing

The `rows` prop defines the default/minimum size. The `maxRows` prop is the
number of rows allowed before making the `Textarea` scrollable.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Sizing">
    <Textarea rows={2} maxRows={3} placeholder="Two or three rows" />
  </Story>
</Canvas>

### Resizing

The `resize` prop sets whether an element is resizable, and if so, in which
directions.

The `maxRows` prop is not compatible with the `resize` prop and should throw a
TS error if you try to use both.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Resizing">
    <Stack orientation={ORIENTATION.VERTICAL}>
      <Textarea placeholder="vertical" resize="vertical" />
      <Textarea placeholder="horizontal" resize="horizontal" />
      <Textarea placeholder="both" resize="both" />
      <Textarea placeholder="none" resize="none" />
    </Stack>
  </Story>
</Canvas>

### With monospace font

<Canvas withSource={SourceState.OPEN}>
  <Story name="Code editor">
    <Textarea placeholder="Monospace font" rows={10} className="font-mono" />
  </Story>
</Canvas>