import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { ListSelector } from './list-selector.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

<Meta title="Components/Inputs/ListSelector" component={ListSelector} />

# List Selector

A `ListSelector` displays a list of items and allows the user to select one or more of them.

This is a controlled component - it accepts as a `value` the list of items that are selected. When an item is selected or deselected, the `onChange` callback is called with the list of currently selected items. Note that in single-select (radio) mode this will always be a single element array.

## Usage Examples:

### Basic usage:

```tsx
const items = [
  { id: 'APPLE', label: 'Apple' },
  { id: 'PEAR', label: 'Pear' },
];
const Basic = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  return (
    <ListSelector
      label="Favorite Fruit"
      items={items}
      name="favorite-fruit"
      value={selectedIds}
      onChange={setSelectedIds}
    />
  );
};
```

### Custom Item Rendering:

```tsx
const LARGE = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  return (
    <ListSelector
      label="Favorite Fruit"
      items={items.map(
        item => ({
          ...item,
          label: (<Box spacing="p5"><Text fontSize='f6'>{item.label}</Box>),
        })
      )}
      name="favorite-fruit"
      value={selectedIds}
      onChange={setSelectedIds}
    />
  );
};
```

## Stories

### Single Selection

<Canvas>
  <Story id="components-inputs-listselector--single" />
</Canvas>

### Multi Selection

<Canvas>
  <Story id="components-inputs-listselector--multiple" />
</Canvas>

### Custom Items

<Canvas>
  <Story id="components-inputs-listselector--large-single" />
</Canvas>

<Canvas>
  <Story id="components-inputs-listselector--large-multiple" />
</Canvas>

<Canvas>
  <Story id="components-inputs-listselector--secondary-text-single" />
</Canvas>

<Canvas>
  <Story id="components-inputs-listselector--secondary-text-multiple" />
</Canvas>

<Canvas>
  <Story id="components-inputs-listselector--custom-items-single" />
</Canvas>

<Canvas>
  <Story id="components-inputs-listselector--custom-items-multiple" />
</Canvas>

<Canvas>
  <Story id="components-inputs-listselector--free-form-single" />
</Canvas>

<Canvas>
  <Story id="components-inputs-listselector--free-form-multiple" />
</Canvas>

Spacing:

<Canvas>
  <Story id="components-inputs-listselector--mixins-spacing" />
</Canvas>

Stackee:

<Canvas>
  <Story id="components-inputs-listselector--mixins-stackee" />
</Canvas>

## Props

<FlowPropsTable ofComponent={ListSelector} />

## External Reference

<ExternalReferenceLink src="" type="figma" />
<ExternalReferenceLink
  src="https://github.com/wealthsimple/patchwork/tree/master/core/forms/list-selector"
  type="github"
/>
```
