import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
import EmailChips from "./";
import * as stories from "./email-chips.stories.js";

<Meta
  title="Components/EmailChips"
  component={EmailChips}
  argTypes={{
    onChange: { required: true },
  }}
/>

# EmailChips

Custom email-chips

### Usage

```js
import EmailChips from "@docspace/components/email-chips";
```

### EmailChips - Default

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

#### Properties

<ArgsTable story="Default" />

#### Options - an array of objects that contains the following fields:

```js
const options = [
  {
    name: "Ivan Petrov",
    email: "myname@gmul.com",
    isValid: true,
  },
];
```

Options have options:

- name - Display text
- email - Email address
- isValid - Displays whether the email is valid

### EmailChips - Empty

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

#### Properties

<ArgsTable story="Empty" />

#### Actions that can be performed on chips and input:

- Enter a chip into the input (chips are checked for a valid email, and the same chips).
- Add chips by pressing Enter or NumpadEnter.
- By double-clicking on the mouse button or pressing enter on a specific selected chip, you can switch to the chip editing mode.
- You can exit the editing mode by pressing Escape, Enter, NumpadEnter or by clicking ouside.
- Remove the chips by clicking on the button in the form of a cross.
- Click on the chip once, thereby highlighting it.
- Hold down the shift button by moving the arrows to the left, right or clicking the mouse on the chips, thereby highlighting several chips.
- The highlighted chip(s) can be removed by clicking on the button Backspace or Delete.
- The selected chip(s) can be copied to the clipboard by pressing "ctrl + c".
- You can remove all chips by clicking on the button "Clear list".