import { Meta, Story, Canvas, Title, Subtitle, ArgsTable, Source } from '@storybook/addon-docs';
import { DollarField } from '@lendi/ui/DollarField';
import * as stories from './DollarField.stories.tsx';
import {TITLE_COMPONENTS_DECOMISSIONED, TITLE_INPUTS} from "../../../../../docs/content";

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/${TITLE_INPUTS}/DollarField`} component={DollarField}/>

<Title>Dollar Field</Title>
<Subtitle>A form field that transforms user input into a currency format.</Subtitle>

<Source language='tsx' dark={true} code={`import { DollarField } from '@lendi/ui/DollarField';`} />

<Canvas>
  <Story name="Interactive" story={stories.Interactive} />
</Canvas>

<ArgsTable story="Interactive" include={['isDisabled', 'label', 'placeholder', 'labelSuffix', 'helpText', 'variant', 'validationState', 'errorText', 'inlineAction']} />

Note: this props table is not complete. See <a href="#props">below</a> for full props.

## Options

### Clear action
<Canvas>
  <Story name="Clear action" story={stories.ClearAction} />
  <Story name="Clear action with value" story={stories.ClearActionWithValue} />
</Canvas>

### Width options
<Canvas>
  <Story name="Widths" story={stories.Widths} />
</Canvas>

## Controlled vs Uncontrolled
We provide both an uncontrolled and controlled API. You may use either depending on your use case.

### Controlled
In the controlled version, you can keep `value` in state and update it via `onValueChange`.

#### onValueChange
This function returns the value of the input _without the formatting_, and **does not** return a change event.

Note: You can still pass a `onChange` to retrieve the original `event` however, it will only be useful for gathering other event meta data besides the value itself.
<Canvas>
  <Story name="Controlled" story={stories.Controlled} />
</Canvas>

### Uncontrolled
When using the uncontrolled API, you'll need to pass a ref to the component in order to read its value.
<Canvas withSource="open">
  <Story name="Uncontrolled" story={stories.Uncontrolled} />
</Canvas>

## Error states
Use the `validationState` and `errorText` props to produce an error style.
<Canvas>
  <Story name="Errors" story={stories.Errors} />
</Canvas>

## Helper functions
### Dollar to number
The DollarField returns the value in the formatted string, you may use the `dollarToNumber` helper to parse this into a Float without the formatting.

<Source language='tsx' dark={true} code={`import { dollarToNumber } from @lendi/ui;`} />

### Validation
This field does not provide client side validation by default. However, it does specify that only numbers may be entered via the pattern attribute, which you may hook into using the browser [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#constraint_validation_process).

We also still support min and maxCharCount, which will prevent typing more than the provided number of digits.
<Canvas withSource="open">
  <Story name="Validation" story={stories.Validation} />
</Canvas>

## Accessibility
### Labels
Labels are required in all cases. In the rare case where a label exists elsewhere or a label should be non-visible, use the appropriate aria props.

By default, the component generates an id and associates the input with its help and error text via aria-describedby, so don't worry about implementing that behavior.

## Props
<ArgsTable />

## LUI Now Migration guide
This is a new component within LUI Next, that covers uses cases that were previously covered by [Numeric Field](?path=/docs/components-input-fields-text-field-now-text-input--sizes)'s "Dollar" variant.