import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs/blocks";
import { DateField } from "./DateField";
import * as DateFieldStories from "./DateField.stories";

<Meta of={DateFieldStories} />

# DateField

DateField allows a user to input a Date. It includes a show/hide button on the right hand side.

Dates are displayed in the user's locale format, e.g. `DD/MM/YYYY` or `MM/DD/YYYY`. The input field is a native HTML5 date input, which means it will show a date picker on supported browsers.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { DateField } from "@simplybusiness/mobius";
```

## Examples

### Default

<Canvas of={DateFieldStories.Default} />

### ReadOnly

<Canvas of={DateFieldStories.ReadOnly} />

## Default value

Dates are formatted internally in `yyyy-mm-dd` format. The `defaultValue` prop can be used to set the initial value of the input field. It is expected in the format `yyyy-mm-dd`; if you want to use a different format, you can use the `format` prop to specify a custom format.

_NOTE: If you set a custom format, then you must use it for all other props (`defaultValue`, `min`, `max`, etc.) that expect a date. The component can only support one format._

```js
import { DateField } from "@simplybusiness/mobius";

// Fixed date
<DateField defaultValue="2023-10-01" />;

// Today's date
<DateField defaultValue={new Date().toISOString().split("T")[0]} />;

// Custom date format for UK
<DateField defaultValue="01/10/2023" format="dd/mm/yyyy" />;

// Custom date format for US
<DateField defaultValue="10/01/2023" format="mm/dd/yyyy" />;
```

<Canvas of={DateFieldStories.DefaultValue} />

## Limiting input with min and max

The default format for `min` and `max` props is `yyyy-mm-dd`. Min and max props can be used to limit the range of dates that can be selected. The input field will not allow dates outside of this range.

It is possible to set the min and max props to a date in the future or past. The input field will not allow dates outside of this range.

You can use a custom date format by passing a function to the `format` prop. The function should return a string in the format you want.

<Canvas of={DateFieldStories.LimitedDates} />

<Canvas of={DateFieldStories.LimitedDatesWithCustomFormat} />

## Validation

The `DateField` component supports validation. The `errorMessage` prop can be used to display error messages. The `isValid` prop can be used to indicate whether the input is valid or not.

The component has internal validation for invalid min and max date props, along with logical checks that max > min. The `min` and `max` props should be in the default format `yyyy-mm-dd`, or match a supplied custom `format` prop, to ensure proper validation.

<Canvas of={DateFieldStories.InvalidMin} />

<Canvas of={DateFieldStories.InvalidMax} />

<Canvas of={DateFieldStories.MaxBeforeMin} />

## Controlled component

The `DateField` component can be used as a controlled component. The value of the input field is controlled by the `value` prop. The `onChange` prop is used to update the value of the input field.

## Accessibility

It's recommended to pass a `label` prop in order to show a visual label. When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the text field is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.

## Events

The `onChange` prop can be used to listen to changes of the value of the input. See the prop table for the complete list of events supported.
See the example of controlled component using the `onChange` prop.

## Props

<ArgTypes of={DateField} />

## Component HTML Structure and Class names

The following HTML is rendered for a DateField:

```html
<div class="mobius-date-field">
  <label class="mobius-label">{label}</label>
  <input class="mobius-text-field__input" type="date" />
  <div class="mobius-error-message">{errors}</div>
</div>
```

Class names are augmented with the following flags if true:

- \--is-disabled
- \--is-selected
- \--is-valid
- \--is-invalid
