indicator-ui 0.1.47 → 0.1.48

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

package/docs/Notes.md

@@ -1,55 +1,189 @@
-[🔙 Назад](../README.md)
-
-# Всякие интересные заметки
-
----
-
----
-
-## Перетаскивание файлов на ios (на других os apple тоже наверное)
-
-У *__Apple__* есть система перетаскивания файлов (к примеру изображений).
-
-Вот так
-
----
-
-<img src="./assets/Notes/apple/dragImage.png" style="width:200px;padding: 20px;">
-
----
-
-И при правильно написанном коде должен быть такой эффект.
-
-___
-
-<img src="./assets/Notes/apple/dragging.png" style="width:200px;padding: 20px;">
-
----
-
-Чтобы его получить надо навесить на элемент `dragover` слушатель и обязательно отменить ванильное поведение события.
-
-
-```typescript
-newEl.addEventListener("dragover", e => {
-    // Отменяем ванильное поведение события
-    e.preventDefault()
-    console.log('dragover')
-})
-```
-
----
-
----
-
-## Как дать возможность фокусироваться на элементе
-
-`TabIndex` дает возможность фокусироваться на элементе, нужно просто указать его.
-
----
-
----
-
-## `Keydown` событие
-
-`Keydown` событие срабатывает только на сфокусированном объекте и всплывает вверх по дереву, пока не встретит слушатель. 
-После обработки слушателем идет дальше - искать следующий (если не отменить всплытие). 
+[🔙 Назад](../README.md)
+
+# Всякие интересные заметки
+
+---
+
+---
+
+## Перетаскивание файлов на ios (на других os apple тоже наверное)
+
+У *__Apple__* есть система перетаскивания файлов (к примеру изображений).
+
+Вот так
+
+---
+
+<img src="./assets/Notes/apple/dragImage.png" style="width:200px;padding: 20px;">
+
+---
+
+И при правильно написанном коде должен быть такой эффект.
+
+___
+
+<img src="./assets/Notes/apple/dragging.png" style="width:200px;padding: 20px;">
+
+---
+
+Чтобы его получить надо навесить на элемент `dragover` слушатель и обязательно отменить ванильное поведение события.
+
+
+```typescript
+newEl.addEventListener("dragover", e => {
+    // Отменяем ванильное поведение события
+    e.preventDefault()
+    console.log('dragover')
+})
+```
+
+---
+
+---
+
+## Как дать возможность фокусироваться на элементе
+
+`TabIndex` дает возможность фокусироваться на элементе, нужно просто указать его.
+
+---
+
+---
+
+## `Keydown` событие
+
+`Keydown` событие срабатывает только на сфокусированном объекте и всплывает вверх по дереву, пока не встретит слушатель. 
+После обработки слушателем идет дальше - искать следующий (если не отменить всплытие). 
+
+
+
+## Про `TS`
+
+### Бесконечная рекурсия в типах или ***Type instantiation is excessively deep and possibly infinite.***
+
+Давайте рассмотрим такой пример рекурсивных типов.
+
+```typescript
+type GetBaseKeyChains<P extends string, T> =
+    IsAny<T> extends false
+        ? P | `${P}${GetDeepKeyChains<T> | GetArrayKeyChains<T>}`
+        : P | `${P}${'.' | '['}${string}`
+
+type GetArrayKeyChains<T> =
+    IsArray<T> extends false
+        ? never
+        : ClearArrayType<T> extends infer Arr
+            ? IsTuple<Arr> extends true
+                ? {
+                    [K in Extract<keyof Arr, `${number}`>]: GetBaseKeyChains<`[${K}]`, Arr[K]>
+                }[Extract<keyof Arr, `${number}`>]
+                : Arr extends any[]
+                    ? `[${number}]` | GetBaseKeyChains<`[${number}]`, Arr[number]>
+                    : never
+            : never
+
+type GetDeepKeyChains<T> =
+    IsObjectType<T> extends false
+        ? never
+        : ClearObjectType<T> extends infer Form
+            ? {
+                [K in Extract<keyof Form, string>]: GetBaseKeyChains<`.${K}`, Form[K]>
+            }[Extract<keyof Form, string>]
+            : never
+
+
+export type FormPath<T> = '' |
+    (
+        IsObjectType<T> extends false
+            ? GetArrayKeyChains<T>
+            : ClearObjectType<T> extends infer Form
+                ? {
+                    [K in Extract<keyof Form, string>]: GetBaseKeyChains<`${K}`, Form[K]>
+                }[Extract<keyof Form, string>]
+                : never
+        )
+```
+
+Как видно из примера, `GetBaseKeyChains` вызывает `GetArrayKeyChains` и `GetDeepKeyChains`,
+а они в свою очередь вызывают его, что создаёт рекурсию.
+
+Все бы хорошо, тип рабочий, всё правильно делает, но когда ты начинаешь его использовать в других типах,
+которые используются в других типах и т. д., `ts` начинает офигевать от "глубины" наших намерений и предлагает поумерить пыл.
+
+```
+TS2589: Type instantiation is excessively deep and possibly infinite.
+```
+
+Ошибка говорит о том, что слишком глубоко и, возможно, бесконечно.
+Чтобы не было бесконечно, у рекурсии обязательно должно быть условие выхода.
+Есть ли оно у этой?
+
+Да, есть — `IsObjectType<T> extends false ? never : ...` или `IsArray<T> extends false ? never :` или `IsAny<T> extends false ...`
+
+Но почему же `ts` всё равно ругается на `possibly infinite`? Ах да — `excessively deep`, `ts` ленивый.
+Если он видит, что тип вывести слишком тяжело, он такой: "Не братан, по-моему, тут слишком глубоко и бесконечно".
+
+На самом деле это круто, что есть такой защитный механизм, но как всё же победить это? Давайте разбираться.
+
+Один из способов (и это единственный, который мы рассмотрим, но он довольно логичный и исходит из защиты от слишком
+глубокой рекурсии в нормальных языках программирования) — это ограничить глубину рекурсии.
+
+```typescript
+type SafeRecursiveArr = [1, 2, 3, 4, 5]
+type SafeRecursiveStep<T> = T extends [infer _, ...infer Rest] ? Rest : never
+type CanContinueRecursive<T> = SafeRecursiveStep<T> extends never ? false : true
+```
+
+Здесь мы создали пару конструкций, которые помогут отслеживать возможность продолжать спуск и
+уменьшать счётчик допустимой глубины.
+
+Круто, теперь имплементируем это в наши изначальные типы.
+
+```typescript
+type GetBaseKeyChains<P extends string, T, SafeArr> =
+    CanContinueRecursive<SafeArr> extends false
+        ? never
+        : IsAny<T> extends false
+            ? P | `${P}${GetDeepKeyChains<T, SafeRecursiveStep<SafeArr>> | GetArrayKeyChains<T, SafeRecursiveStep<SafeArr>>}`
+            : P | `${P}${'.' | '['}${string}`
+
+type GetArrayKeyChains<T, SafeArr> =
+    CanContinueRecursive<SafeArr> extends false
+        ? never
+        : IsArray<T> extends false
+            ? never
+            : ClearArrayType<T> extends infer Arr
+                ? IsTuple<Arr> extends true
+                    ? {
+                        [K in Extract<keyof Arr, `${number}`>]: GetBaseKeyChains<`[${K}]`, Arr[K], SafeRecursiveStep<SafeArr>>
+                    }[Extract<keyof Arr, `${number}`>]
+                    : Arr extends any[]
+                        ? `[${number}]` | GetBaseKeyChains<`[${number}]`, Arr[number], SafeRecursiveStep<SafeArr>>
+                        : never
+                : never
+
+type GetDeepKeyChains<T, SafeArr> =
+    CanContinueRecursive<SafeArr> extends false
+        ? never
+        : IsObjectType<T> extends false
+            ? never
+            : ClearObjectType<T> extends infer Form
+                ? {
+                    [K in Extract<keyof Form, string>]: GetBaseKeyChains<`.${K}`, Form[K], SafeRecursiveStep<SafeArr>>
+                }[Extract<keyof Form, string>]
+                : never
+
+
+export type FormPath<T> = '' |
+    (
+        IsObjectType<T> extends false
+            ? GetArrayKeyChains<T, SafeRecursiveArr>
+            : ClearObjectType<T> extends infer Form
+                ? {
+                    [K in Extract<keyof Form, string>]: GetBaseKeyChains<`${K}`, Form[K], SafeRecursiveArr>
+                }[Extract<keyof Form, string>]
+                : never
+        )
+```
+
+Теперь `ts` будет нормально реагировать на использование типа `FormPath` в других типах,
+и можно не бояться увидеть сообщение об ошибке.