# `FormBuilder`

### Важно

Для работы нужно установить библы: `npm install clsx react-imask`

---

Клиентский компонент, созданный для облегчения создания полей. По большей части он был создан для имплементации хука
`useFormBuilder` (чья цель, создать гибкое состояние формы). В `FormBuilder` передается основной пропс - `schema`.

`schema` - словарь, в котором перечислены все поля и другие компоненты. Fообще в билдере можно написать обсалютно любую
логику компонента (или почти любую), в этом и была основная идея `FormBuilder`.

---

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

* `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',
    }
}
```

Основной пропсы - это `name`, он отвечает за имя во вложенности формы

###### В результате получим:

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

#### Дополнительные поля, предоставляемые `FormBuilder`:

* `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` - свое собственное `input` поле. Для работы оно должно принимать параметры `value` и `onChange`,
  которые накидываются `FormBuilder`. Любые пропсы, переданные в `props` пойдут в компонент (можно накинуть на сам
  компонент в `ownerInputComponent`, разницы нет, но `value`, `onChange`, `isError`, `isErrorMessage`, `onBlur` будут
  перезаписаны).

---

### `ARRAY_FIELDS_SCHEMA`

Схема для создания массива в форме. Любой `input_field` будет класться в ячейку массива, а не в поле словаря.

```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` в `input_field`, то получим:

```ts
const formData = {
    test_arr: [
        "123123123123"
    ]
}
```

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

---

### `FORM_WRAPPER_SCHEMA`

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

```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`

Используется для обертки чего-то, не сбрасывает счетчик `ARRAY_FIELDS_SCHEMA`, но и прописать ключ значения в словаре
тоже нельзя (это значит, что поля внутри `FORM_WAPPER` **_пойдут_** в массив). Было сделано для того, чтобы можно было в
массиве (или просто в схеме) сделать обертку, а в нее передать схему поля. К примеру, у вас посреди схемы надо сделать
обертку для `input_field`, писать новый компонент поля не хочется, поэтому мы можем сделать компонент обертки и передать
его в `BLOCK_WRAPPER_SCHEMA`.

--- 

### `REACT_NODE_SCHEMA`

Схема простого `React-компонента`. Можно посреди схемы вcтавить какой-нибудь `ReactNode`.