indicator-ui 0.1.123 → 0.1.131

package/docs/FormBuilderDocs.md

@@ -1,205 +1,205 @@
-[🔙 Назад](../README.md)
-
-# `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`
-
+[🔙 Назад](../README.md)
+
+# `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`.