indicator-ui 0.1.124 → 0.1.132

package/docs/ForDev.md

@@ -1,106 +1,106 @@
-[🔙 Назад](../README.md)
-
-# 📌 Для разработки
-
----
-
-## 🔥 Точки входа
-
-В проекте есть два ключевых входа для модулей — **js/ts** и **scss**.
-
-#### 📂 `src/index.ts` (js/ts модули)
-
-Добавляем сюда все модули, которые должны быть доступны через:
-
-```ts
-import {} from 'indicator-ui';
-```
-
-#### 🎨 `src/index.scss` (scss модули)
-
-Добавляем сюда все стили, которые должны быть доступны через:
-
-```scss
-@use 'indicator-ui' as *;
-```
-
----
-
-## ⚙️ Сборка проекта
-
-Чтобы собрать проект, используйте:
-
-```sh
-npm run lib:build
-```
-
-Результаты сборки появятся в папке `dist`. Там, возможно, живёт магия. 🧙‍♂️✨
-
----
-
-## 🧪 Тестирование во время разработки
-
-Для быстрого тестирования и проверки работы библиотеки используйте **React приложение** в папке с исходным кодом. Оно
-доступно по следующему пути:
-
-**[Жмак](../src/test/index.tsx)**
-
-В этом приложении настроен роутинг с несколькими страницами. Для тестирования просто добавляйте нужные элементы и
-страницы, следуя шаблону.
-
-Для добавления страниц в роутинг откройте и отредактируйте файл:
-
-**[Жмyк](../src/test/App.tsx)**
-
-### 🏃‍♂️ Запуск dev-сервера
-
-Чтобы запустить локальный сервер для разработки, выполните команду:
-
-```sh
-npm run dev:dev
-```
-
-**Важно:** Стремитесь создавать страницы, максимально приближенные к финальному дизайну, чтобы дизайнер мог проверить
-вашу работу в реальном времени и удостовериться, что она соответствует его ожиданиям.
-
-## 🛠 Тестирование перед публикацией
-
-Перед публикацией можно протестировать библиотеку на локальном **React**-проекте `test-project`. Для этого используется
-**yalc** — аналог npm, но для локальных пакетов.
-
-### 🚀 Установка `yalc`
-
-```sh
-npm install -g yalc
-```
-
-### 📦 Публикация в локальное хранилище
-
-```sh
-yalc publish
-```
-
-Есть вторая команда, которая по идее должна еще и обновлять библу, где она используется.
-
-```sh
-yalc publish --push
-```
-
-### 📥 Установка библиотеки в проект
-
-```sh
-yalc add indicator-ui
-```
-
-### 🔄 Обновление библиотеки
-
-```sh
-yalc update
-```
-
-Также советую делать удаление библы, так как `yalc` и `npm` очень странно работают и иногда могут добавлять изменения.
-
-```sh 
-npm uninstall indicator-ui
-```
-
+[🔙 Назад](../README.md)
+
+# 📌 Для разработки
+
+---
+
+## 🔥 Точки входа
+
+В проекте есть два ключевых входа для модулей — **js/ts** и **scss**.
+
+#### 📂 `src/index.ts` (js/ts модули)
+
+Добавляем сюда все модули, которые должны быть доступны через:
+
+```ts
+import {} from 'indicator-ui';
+```
+
+#### 🎨 `src/index.scss` (scss модули)
+
+Добавляем сюда все стили, которые должны быть доступны через:
+
+```scss
+@use 'indicator-ui' as *;
+```
+
+---
+
+## ⚙️ Сборка проекта
+
+Чтобы собрать проект, используйте:
+
+```sh
+npm run lib:build
+```
+
+Результаты сборки появятся в папке `dist`. Там, возможно, живёт магия. 🧙‍♂️✨
+
+---
+
+## 🧪 Тестирование во время разработки
+
+Для быстрого тестирования и проверки работы библиотеки используйте **React приложение** в папке с исходным кодом. Оно
+доступно по следующему пути:
+
+**[Жмак](../src/test/index.tsx)**
+
+В этом приложении настроен роутинг с несколькими страницами. Для тестирования просто добавляйте нужные элементы и
+страницы, следуя шаблону.
+
+Для добавления страниц в роутинг откройте и отредактируйте файл:
+
+**[Жмyк](../src/test/App.tsx)**
+
+### 🏃‍♂️ Запуск dev-сервера
+
+Чтобы запустить локальный сервер для разработки, выполните команду:
+
+```sh
+npm run dev:dev
+```
+
+**Важно:** Стремитесь создавать страницы, максимально приближенные к финальному дизайну, чтобы дизайнер мог проверить
+вашу работу в реальном времени и удостовериться, что она соответствует его ожиданиям.
+
+## 🛠 Тестирование перед публикацией
+
+Перед публикацией можно протестировать библиотеку на локальном **React**-проекте `test-project`. Для этого используется
+**yalc** — аналог npm, но для локальных пакетов.
+
+### 🚀 Установка `yalc`
+
+```sh
+npm install -g yalc
+```
+
+### 📦 Публикация в локальное хранилище
+
+```sh
+yalc publish
+```
+
+Есть вторая команда, которая по идее должна еще и обновлять библу, где она используется.
+
+```sh
+yalc publish --push
+```
+
+### 📥 Установка библиотеки в проект
+
+```sh
+yalc add indicator-ui
+```
+
+### 🔄 Обновление библиотеки
+
+```sh
+yalc update
+```
+
+Также советую делать удаление библы, так как `yalc` и `npm` очень странно работают и иногда могут добавлять изменения.
+
+```sh 
+npm uninstall indicator-ui
+```
+

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