DocSpace-client/packages/components/email-input/email-input.mdx

import { Meta, Story, ArgsTable, Canvas } from "@storybook/blocks";

import EmailInput from "./";
import * as stories from "./email-input.stories.js";

<Meta
  title="Components/EmailInput"
  component={EmailInput}
  parameters={{
    source: {
      code: stories.basic,
    },
  }}
  argTypes={{
    onValidateInput: { action: "onValidateInput", table: { disable: true } },
    onChange: { action: "onChange", table: { disable: true } },
  }}
/>

# EmailInput

Email entry field with advanced capabilities for validation based on setting

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

### Properties

You can apply all properties of the `TextInput` component to the component

<ArgsTable story="Default" />

### Validate email

Our validation algorithm based on [RFC 5322 email address parser](https://www.npmjs.com/package/email-addresses).

For email validating you should use instance of EmailSettings class with following settings:

```js
const settings = new EmailSettings();
settings.allowDomainPunycode = false;
settings.allowLocalPartPunycode = false;
settings.allowDomainIp = false;
settings.allowStrictLocalPart = true;
settings.allowSpaces = false;
settings.allowName = false;
settings.allowLocalDomainName = false;
```

```js
import { EmailInput, utils } from "@docspace/components";
const { EmailSettings } = utils.email;
const emailSettings = new EmailSettings();
emailSettings.toObject(); /* returned Object with default settings:
  {
    allowDomainPunycode: false,
    allowLocalPartPunycode: false,
    allowDomainIp: false,
    allowStrictLocalPart: true,
    allowSpaces: false,
    allowName: false,
    allowLocalDomainName: false
  }
*/

email.allowName = true; // set allowName setting to true
emailSettings.toObject(); /* returned Object with NEW settings:
  {
    allowDomainPunycode: false,
    allowLocalPartPunycode: false,
    allowDomainIp: false,
    allowStrictLocalPart: true,
    allowSpaces: false,
    allowName: true,
    allowLocalDomainName: false
  }
*/
```

### Custom validate email

You should use custom validation with the `customValidate` prop. This prop contains function for your custom validation input value. Function must return object with following parameters: `value`: string value of input, `isValid`: boolean result of validating, `errors`(optional): array of errors.

#### Base colors:

| Сomponent actions | isValid |                           border-color                           |
| ----------------- | :-----: | :--------------------------------------------------------------: |
| `:focus`          | `false` |     ![#c30](https://placehold.it/15/c30/000000?text=+) #c30      |
| `:focus`          | `true`  | ![#2DA7DB](https://placehold.it/15/2DA7DB/000000?text=+) #2DA7DB |
| `:hover`          | `false` |     ![#c30](https://placehold.it/15/c30/000000?text=+) #c30      |
| `:hover`          | `true`  | ![#D0D5DA](https://placehold.it/15/D0D5DA/000000?text=+) #D0D5DA |
| `default`         | `false` |     ![#c30](https://placehold.it/15/c30/000000?text=+) #c30      |
| `default`         | `true`  | ![#D0D5DA](https://placehold.it/15/D0D5DA/000000?text=+) #D0D5DA |

```jsx
import React from "react";
import EmailInput from "@docspace/components/email-input";

const onChange = (e) => {
  // your event handling
  customValidate(e.target.value);
};

const customValidate = (value) => {
  const isValid = !!(value && value.length > 0);
  return {
    value,
    isValid: isValid,
    errors: isValid ? [] : ["incorrect email"],
  };
};

const onValidateInput = (result) => {
  console.log("onValidateInput", result);
};

<EmailInput
  customValidate={customValidate}
  onChange={onChange}
  onValidateInput={onValidateInput}
/>;
```

```jsx
import { EmailSettings } from "@docspace/components/utils/email";
const settings = new EmailSettings();
settings.allowDomainPunycode = true;
```

```jsx
  <EmailInput
    name="email"
    placeholder="email"
    emailSettings={settings}
    onValidateInput={result =>
      console.log("onValidateInput", result.value, result.isValid, result.errors);
    }
  />
```