indicator-ui 0.0.8 → 0.0.10

package/dist/types/ui/InputFields/FlexField/types/FlexFieldTypes.d.ts

@@ -20,6 +20,12 @@ export type FlexFieldPropsType = {
     value?: any;
     type?: string;
     onChange?: (value: any) => void;
+    /**
+     * Маска imask, можно засунуть, как строку (к примеру 000-000-000),
+     * так и регулярное выражение. Важно!!!: не ставить маску undefined,
+     * т.к. для перехвата ввода используется onAccept, поэтому если `mask === undefined`,
+     * то при изменение строка не пройдет валидацию и функция не будет вызвана.
+     */
     mask?: any;
     placeholder?: string;
     required?: boolean;
@@ -28,15 +34,31 @@ export type FlexFieldPropsType = {
     onFocus?: (e: any) => void;
     onBlur?: (e: any) => void;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** Блокирует ввод без стиля `disabled`, просто показывает результат. */
     notInput?: boolean;
+    /** Компонент иконки.*/
     icon?: ReactNode;
+    /** Text Support. По умолчанию `'+7', можно передать свой компонент, он подставится без обертки, также можно передать строку, она подставится с оберткой`*/
     textSupport?: boolean | string | ReactNode;
+    /** Принимает url **Картинки пользователя**. Можно передать свой компонент **Картинки пользователя**.*/
     userPic?: string | ReactNode;
+    /** Подставляет **Help** при `help === true`. Можно передать свой компонент **Help**.*/
     help?: boolean | ReactNode;
+    /** Подставляет **Dropdown** при `dropdown === true`. Можно передать свой компонент **Dropdown**.*/
     dropdown?: boolean | ReactNode;
+    /** Подставляет кнопка при `button === true`. Можно передать свой компонент кнопки.*/
     button?: boolean | ReactNode;
-    dropdownState?: boolean;
-    buttonState?: 'gray' | 'red';
+    /**
+     * Если true иконка вверх, при false иконка вверх. Если dropdownState строка, то будет подставлено как className.
+     */
+    dropdownState?: boolean | string;
+    /**
+     * Серая и красные расцветки кнопок, по умолчанию - "gray". Если buttonState строка, то будет подставлено как className.
+     */
+    buttonState?: 'gray' | 'red' | string;
+    /**
+     * Событие нажатия на кнопку button.
+     */
     onButtonClick?: () => void;
     className?: FlexFieldClassNameType;
 };

package/docs/CSSVariables/CSSVariables.md

@@ -0,0 +1,63 @@
+[🔙 Назад](../../README.md)
+
+# CSS Variables
+
+В библиотеке используются **CSS-переменные** для цветов (в будущем, возможно, не только для них). Иногда может возникнуть необходимость изменить эти значения в вашем проекте.
+
+---
+
+## 🔧 Использование в разработке
+
+Для задания переменных в библиотеке используются **CSS Variables**, все переменные лучше складировать в файлах по типу `*-var.scss`:
+
+```css
+:root {
+    --var: #fff;
+}
+```
+
+При использовании в стилях:
+
+```scss
+@use 'variables' as *;
+
+background-color: var(--var);
+```
+
+📌 **Важно**: при разработке новых компонентов в библиотеке используйте **только** CSS-переменные, чтобы пользователи могли их переопределять в своих проектах.
+
+---
+
+## 🎨 Кастомизация в проекте
+
+### 1️⃣ Создайте файл с переопределением переменных
+
+Рекомендуется создать отдельный файл (например, `indicator-ui-variables.scss`), в котором будут переопределены значения CSS-переменных библиотеки. Все новые переменные должны находиться в `:root {}`.
+
+Пример:
+
+```scss
+:root {
+  --base-black: #000000;
+  --base-white: #ffffff;
+  /* Другие цвета */
+}
+```
+
+🔹 _(Автор не расист, все вопросы к [Rockstar](https://support.rockstargames.com/), так как цитата взята оттуда)_ 😁
+
+### 2️⃣ Импортируйте файл с переменными
+
+Чтобы переопределенные переменные применились корректно, **импортируйте их после подключения библиотеки**:
+
+```scss
+@import 'indicator-ui/dist/index.css';
+@import 'indicator-ui-variables.scss';
+```
+
+🎉 **Ура, победа. Вы переопределили переменные в библиотеке.**
+
+
+## PS
+
+[Если интересно, как выглядила бы документация, если ее автор был из Калифорнии](./CSSVariablesCalifornia.md)

package/docs/CSSVariables/CSSVariablesCalifornia.md

@@ -0,0 +1,62 @@
+[🔙 Назад](../../README.md)
+
+# CSS Variables 🌴🌊
+
+Йооо, чуваки, в этой библиотеке мы юзаем **CSS-переменные** для цветов (ну, возможно, в будущем не только для них, кто знает). Иногда захочешь немного покрутить их под свой проект, и вот тебе, как это сделать, если хочешь, чтобы всё было чётко! ✌️
+
+---
+
+## 🔧 Как это работает, чувак?
+
+Мы задаем переменные в библиотеке через **CSS Variables**:
+
+```css
+:root {
+    --var: #fff; /* Ну типа белый цвет, да */
+}
+```
+
+А когда хочешь использовать эту штуку, просто пиши так:
+
+```scss
+@use 'variables' as *;
+
+background-color: var(--var); /* Эй, хватит смотреть на меня, ты ж знаешь, что это делает */
+```
+
+📌 **Тупо важно**: Когда ты делаешь новые компоненты для библиотеки, **используй только** CSS-переменные, чтобы другие ребята могли под себя всё настроить. Просто чётко, понял? 😎
+
+---
+
+## 🎨 Как настроить свой проект, чувак?
+
+### 1️⃣ Создай файл, где ты всё переделаешь
+
+Эй, не усложняй, просто создай отдельный файл (например, `indicator-ui-variables.scss`), где будешь переделывать эти переменные на свой вкус. Все твои новые переменные должны быть в `:root {}`. Это как твоя домашка, только тут можно реально кайфануть. 😁
+
+Пример, ну типа так:
+
+```scss
+:root {
+  --base-black: #000000; /* Ну ты понял, базовый чёрный */
+  --base-white: #ffffff; /* Базовый белый, чтоб не скучно было */
+  /* Добавь что хочешь — зелёный для своей ласточки или оранжевый для веселья */
+}
+```
+
+🔹 _(Не переживай, я не расист, всё как-то так у Rockstar вон, если что 😜)_
+
+### 2️⃣ Импортируй файл с переменными
+
+Чувак, вот тут важный момент — тебе нужно импортировать твой файл **после** подключения самой библиотеки, иначе, ну, как бы, не прокатит. Это как печеньки после молока, понял? 😋
+
+```scss
+@import 'indicator-ui/dist/index.css';
+@import 'indicator-ui-variables.scss'; /* И вот тут ты подключаешь свои переменные */
+```
+
+🎉 **Йо! Ты переопределил переменные в библиотеке, теперь ты как бог в своём проекте.** 🔥
+
+---
+
+Теперь ты точно в игре! Не забывай — кастомизация это твоя фишка, а библиотека — твой инструмент. Давай, чувак, делай всё по-своему и кайфуй! 🌞🌴

package/docs/ForDev.md

@@ -0,0 +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
+```
+

package/docs/FormBuilderDocs.md

@@ -0,0 +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`
+
+Схема простого `React-компонента`. Можно посреди схемы вcтавить какой-нибудь `ReactNode`. 

package/docs/SCSSVariables.md

@@ -0,0 +1,28 @@
+[🔙 Назад](../README.md)
+
+### SCSS Переменные
+
+---
+
+#### 🚀 Для разработки
+
+Для создания цветов в библиотеке, которые будут использованы в проекте, нужно создать переменные и убедиться, что они попадут в конечный экспорт. Это несложно. Чтобы можно было переопределить переменную, добавьте `!default` после значения:
+
+```scss
+$color: #fff !default;
+```
+
+**Заметка**: `!default` говорит, что если переменная не была определена ранее, то будет использовано значение, указанное в данный момент (`#fff`). Если же переменная была определена выше, то будет использовано именно это значение.
+
+---
+
+#### 🔧 При использовании
+
+Самое сложное — это переопределение значений переменных `scss`. Вот как это можно сделать по порядку:
+
+1. Как уже было сказано, `!default` подставит новое значение, если переменная не была определена раньше. Поэтому нужно указать это до использования миксинов или импорта.
+
+2. Можно создать отдельный файл, где будут переопределены переменные, а затем импортировать его везде, где это нужно.
+
+3. Возможно, придет мысль импортировать файл в условный `global.scss` и использовать переменные без дополнительного импорта. Но это **не работает** (по крайней мере у автора, но стоит учитывать, что автор тупой), скорее всего потому, что в итоговом CSS файл `global.scss` находится ниже, чем остальные стили.
+

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "indicator-ui",
-  "version": "0.0.08",
+  "version": "0.0.10",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "style": "dist/index.css",
   "sass": "dist/scss/index.scss",
   "scripts": {
-    "dev:dev": "webpack serve --mode development",
+    "dev:dev": "webpack serve --mode=development",
     "dev:build": "webpack --mode=production && tsc --project tsconfig.json --outDir webpack",
     "lib:build": "webpack --config webpack.lib.config.js && tsc-alias"
   },
@@ -58,6 +58,7 @@
     "react-dom": "^18.3.1"
   },
   "files": [
-    "dist"
+    "dist",
+    "docs"
   ]
 }