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

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

<Title>Phone Field</Title>
<Subtitle>A form field for phone number</Subtitle>

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

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

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

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

## Options

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

### 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 `onChange`.
<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>

### 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 exclude={['hasRightItem']} />

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