# FormBuilder

### Установка

Для установки плагина используйте следующую команду:

```bash
npm install form-builder-npm-lib
```

**Важно**: для работы необходимы дополнительные зависимости. Установите их командой:

```bash
npm install clsx react-imask
```

---

## Описание

`FormBuilder` — клиентский React-компонент, предназначенный для упрощения создания форм. Основная его цель — интеграция с хуком `useFormBuilder`, который обеспечивает гибкость и управление состоянием формы. В компонент передается основной пропс — `schema`, где можно задать поля и логику их работы.

---

## Актуальные типы полей:

- `FORM_WRAPPER_SCHEMA`
- `REACT_NODE_SCHEMA`
- `INPUT_FIELD_SCHEMA`
- `ARRAY_FIELDS_SCHEMA`
- `BLOCK_WRAPPER_SCHEMA`

### Неактуальные типы полей:

- `BLOCK_SCHEMA`
- `CUSTOM_FIELD_WRAPPER_SCHEMA`
- `ADDITION_PROPS`

**Рекомендуется избегать использования устаревших типов, так как они будут постепенно удаляться из проекта.**

---

## Схемы полей

### `INPUT_FIELD_SCHEMA`

Часто используемая схема для создания полей ввода.

Пример:

```ts
const schema: INPUT_FIELD_SCHEMA = {
  type: 'input_field',
  props: {
    name: 'test',
    labelText: 'label',
    hintText: 'hint',
  },
};
```

**Результат:**

```ts
const formData = {
  test: 'data',
};
```

#### Дополнительные пропсы:

- **`keyWay`**  
  Позволяет задать вложенность поля:

  ```ts
  const schema: INPUT_FIELD_SCHEMA = {
    type: 'input_field',
    props: {
      keyWay: ['test1', 'test2', 'test3'],
      labelText: 'label',
      hintText: 'hint',
    },
  };
  ```

  **Результат:**

  ```ts
  const formData = {
    test1: {
      test2: {
        test3: 'data',
      },
    },
  };
  ```

- **`onBlurValidation`**  
  Добавляет проверку при событии `onBlur`.

  Тип:

  ```ts
  type onBlurValidation = { required: boolean; fun: (data: any) => boolean };
  ```

  - `required`: указывает, обязательно ли поле.

- **`ownerInputComponent`**  
  Позволяет использовать кастомный компонент ввода. Обязательные параметры: `value` и `onChange`. Все переданные пропсы будут доступны в вашем компоненте, но `value`, `onChange`, `isError`, `isErrorMessage`, `onBlur` будут перезаписаны.

---

### `ARRAY_FIELDS_SCHEMA`

Схема для создания массивов в форме.

Пример:

```ts
const schemes: ARRAY_FIELDS_SCHEMA = [
  {
    type: 'array_fields',
    props: {
      name: 'test_arr',
      children: [
        {
          type: 'input_field',
          props: {
            name: 'test',
            labelText: 'label',
            hintText: 'hint',
            placeholder: 'placeholder',
          },
        },
      ],
    },
  },
];
```

**Результат:**

```ts
const formData = {
  test_arr: [
    {
      test: '123213',
    },
  ],
};
```

Если не указать `name` в поле, результат будет:

```ts
const formData = {
  test_arr: ['123123123123'],
};
```

---

### `FORM_WRAPPER_SCHEMA`

Используется как обертка для формы. Сбрасывает счетчик массива в `ARRAY_FIELDS_SCHEMA`, поэтому данные не будут добавлены в массив.

Пример:

```ts
const schemes: ARRAY_FIELDS_SCHEMA = [
  {
    type: 'form_wrapper',
    props: {
      name: 'test_arr',
      children: [
        {
          type: 'input_field',
          props: {
            name: 'test',
            labelText: 'label',
            hintText: 'hint',
            placeholder: 'placeholder',
          },
        },
      ],
    },
  },
];
```

**Результат:**

```ts
const formData = {
  test_arr: {
    test: '123123132132',
  },
};
```

---

### `BLOCK_WRAPPER_SCHEMA`

Создает обертку, которая не сбрасывает счетчик массива. Полезно для добавления вспомогательных компонентов.

---

### `REACT_NODE_SCHEMA`

Позволяет встроить произвольный `ReactNode` в схему.

---

#### Для разработки

* Для патча версии

```bash
npm version patch
```

* Для сборки

```bash
npm run rollup
```