@donkit-ai/design-system 0.2.3

package/README.md

@@ -0,0 +1,795 @@
+# Donkit Design System
+
+Минимальная дизайн система на основе дизайн токенов с поддержкой светлой и темной темы.
+
+## 🚀 Быстрый старт для команды
+
+### Вариант 1: Через GitLab Package Registry (БЫСТРО ⚡)
+
+**Рекомендуется** - в 10 раз быстрее чем через Git!
+
+1. **Настройте доступ к GitLab Package Registry (один раз):**
+
+Создайте файл `.npmrc` в корне вашего проекта:
+
+```
+@donkit-ai:registry=https://gitlab.com/api/v4/packages/npm/
+//gitlab.com/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}
+```
+
+Или используйте свой Personal Access Token вместо `${CI_JOB_TOKEN}`:
+
+```
+@donkit-ai:registry=https://gitlab.com/api/v4/packages/npm/
+//gitlab.com/api/v4/packages/npm/:_authToken=YOUR_GITLAB_TOKEN
+```
+
+> **Создать токен:**
+> 1. GitLab → Settings → Access Tokens
+> 2. Name: `npm-packages` (любое имя)
+> 3. **Scope:** `api` или `read_api` (для чтения пакетов)
+> 4. **Role:** `Developer` (минимум для доступа к Package Registry)
+> 5. Create token → скопируйте токен в `.npmrc`
+
+2. **Добавьте пакет в `package.json`:**
+
+```json
+{
+  "dependencies": {
+    "@donkit-ai/design-system": "^0.1.2"
+  }
+}
+```
+
+3. **Установите:**
+
+```bash
+npm install
+```
+
+Установка займет **5-10 секунд** вместо 1-2 минут! 🚀
+
+---
+
+### Вариант 2: Через Git (МЕДЛЕННО 🐢)
+
+1. **Добавьте пакет через Git в `package.json`:**
+
+```json
+{
+  "dependencies": {
+    "@donkit-ai/design-system": "git+https://gitlab.com/donkit-ai/platform/design/design-system.git#main"
+  }
+}
+```
+
+Для приватных репозиториев используйте SSH:
+```json
+{
+  "dependencies": {
+    "@donkit-ai/design-system": "git+ssh://[email protected]:donkit-ai/platform/design/design-system.git#main"
+  }
+}
+```
+
+2. **Установите зависимости:**
+
+```bash
+npm install
+```
+
+**Готово!** Дизайн-система установлена и готова к использованию.
+
+> 💡 **Совет:** Для ускорения установки используйте флаг `--prefer-offline`:
+> ```bash
+> npm install --prefer-offline
+> ```
+> Это использует локальный кэш npm и ускоряет повторные установки.
+
+### Обновление до последней версии
+
+Когда дизайн-система обновляется, выполните:
+
+```bash
+npm update @donkit-ai/design-system
+# или
+npm install @donkit-ai/design-system@latest
+```
+
+### Использование конкретной версии
+
+Можно зафиксировать конкретную версию через Git теги:
+
+```json
+{
+  "dependencies": {
+    "@donkit-ai/design-system": "git+...#v0.1.2"
+  }
+}
+```
+
+## Особенности
+
+- 🎨 **Дизайн токены** - семантические CSS переменные для цветов, отступов, типографики
+- 🌓 **Две темы** - автоматическое переключение между светлой и темной темой
+- 📱 **Адаптивность** - responsive spacing и typography для mobile/tablet/desktop
+- ⚛️ **React компоненты** - готовые к использованию компоненты
+- 🎯 **Lucide Icons** - фиксированные размеры иконок (20/24/28px, stroke 1.5)
+- 📖 **Интерактивная документация** - страница с примерами всех компонентов
+
+## Компоненты
+
+- **Button** - кнопки с вариантами (primary, secondary, ghost) и размерами (small, medium, large)
+- **Tabs** - вкладки с вариантами secondary (с border) и ghost (без border), состоянием selected (small, medium, large)
+- **Input** - текстовые поля с поддержкой иконок, ошибок и подсказок (small, medium)
+- **Stepper** - числовое поле с кнопками +/- для изменения значения (small, medium)
+- **Card** - карточки двух типов: info (информационная, прозрачный фон) и interactive (интерактивная с hover эффектом)
+- **Typography** - H1-H4, P1-P3 компоненты
+- **Code** - inline и block код с monospace шрифтом
+- **Link** - ссылки акцентным цветом, при hover цвет меняется и появляется подчеркивание
+- **Badge** - бейджи для статусов (success, error, warning, accent) в двух размерах (small, medium)
+- **Modal** - модальные окна с header и footer
+- **Select** - выпадающий список с кастомным дизайном (small, medium)
+
+## Использование в проекте
+
+### 1. Импорт токенов (обязательно в корне приложения)
+
+В главном файле вашего приложения (например, `main.tsx` или `App.tsx`):
+
+```javascript
+// Подключите CSS токены ОДИН РАЗ в корне приложения
+import '@donkit-ai/design-system/tokens.css';
+```
+
+### 2. Использование компонентов
+
+```javascript
+import { Button, Tabs, Tab, Input, Card, H1, P1, P3, Badge, Code, Link } from '@donkit-ai/design-system';
+import { Mail } from 'lucide-react';
+
+function MyComponent() {
+  return (
+    <Card padding="medium">
+      <H1>Welcome</H1>
+      <P1 secondary>This is a demo</P1>
+      <Button
+        variant="primary"
+        size="medium"
+        icon={<Mail size={24} strokeWidth={1.5} />}
+      >
+        Send Email
+      </Button>
+    </Card>
+  );
+}
+```
+
+### 3. Иконки
+
+Все иконки используются из библиотеки `lucide-react` (уже включена в зависимости).
+
+#### Размеры иконок
+
+**Важно:** Размеры иконок фиксированные (не адаптивные) и зависят от контекста использования:
+
+- **20px** - компактные элементы
+  - Small кнопки (`size="small"`)
+  - Tabs (вкладки)
+  - Modal (иконка закрытия)
+
+- **24px** - стандартные элементы
+  - Medium кнопки (`size="medium"`, по умолчанию)
+  - Input (иконки в полях ввода)
+  - Alert (иконки статусов)
+
+- **28px** - крупные элементы
+  - Large кнопки (`size="large"`)
+
+**Всегда используется `strokeWidth={1.5}`** для единообразия дизайна.
+
+#### Примеры использования
+
+```javascript
+import { Mail, Search, Eye, EyeOff, AlertCircle, Check, X } from 'lucide-react';
+
+// Small button / Tabs / Modal
+<Button size="small" icon={<Mail size={20} strokeWidth={1.5} />}>
+  Send
+</Button>
+<Tab icon={<AlertCircle size={20} strokeWidth={1.5} />}>
+  Alerts
+</Tab>
+
+// Medium button / Input / Alert
+<Button size="medium" icon={<Search size={24} strokeWidth={1.5} />}>
+  Search
+</Button>
+<Input
+  icon={<Search size={24} strokeWidth={1.5} />}
+  placeholder="Search..."
+/>
+<Alert
+  type="success"
+  icon={<Check size={24} strokeWidth={1.5} />}
+/>
+
+// Large button
+<Button size="large" icon={<Mail size={28} strokeWidth={1.5} />}>
+  Send Email
+</Button>
+```
+
+### 3. Переключение темы
+
+```javascript
+// Темная тема (по умолчанию)
+document.documentElement.setAttribute('data-theme', 'dark');
+
+// Светлая тема
+document.documentElement.setAttribute('data-theme', 'light');
+```
+
+## Дизайн токены
+
+### Цвета
+
+#### Базовые примитивы
+- `--color-white`: #FFFAFA
+- `--color-white-65/50/40/20/15/13/06`: rgba с прозрачностью 65%, 50%, 40%, 20%, 15%, 13%, 6%
+- `--color-black`: #0E0F11
+- `--color-black-65/60/50/40/20/10/08/04`: rgba с прозрачностью 65%, 60%, 50%, 40%, 20%, 10%, 8%, 4%
+- `--color-red`: #EA6464
+- `--color-red-90`: rgba с прозрачностью 90%
+
+#### Status/Alert Colors
+- `--color-error`: #FF1200 - Error/destructive actions
+- `--color-neutral`: #FFBB00 - Warning/neutral states
+- `--color-success`: #00C86E - Success/positive states
+
+#### Семантические (меняются в зависимости от темы)
+- `--color-bg` - фон
+- `--color-border` - границы
+- `--color-border-hover` - границы при hover (Dark: white-40, Light: black-40)
+- `--color-border-selected` - границы выбранного элемента (Dark: white-50, Light: black-50)
+- `--color-txt-icon-1` - основной текст/иконки (100%)
+- `--color-txt-icon-2` - вторичный текст/иконки (65%)
+- `--color-accent` - акцентный цвет
+- `--color-accent-hover` - акцент при hover
+- `--color-item-bg` - фон элементов (subtle) (Dark: white-06, Light: black-04)
+- `--color-item-bg-selected` - выделенный элемент (Dark: white-06, Light: black-04)
+- `--color-item-bg-hover` - hover состояние (Dark: white-13, Light: black-08)
+- `--color-code-bg` - фон элементов кода (Dark: white-15, Light: black-10)
+
+### Отступы (adaptive)
+
+Используются для padding, margin, gap, а также для border-radius скругления углов.
+
+- `--space-xs`: 8px
+- `--space-s`: 12px → 16px → 16px (mobile → tablet → desktop)
+- `--space-m`: 16px → 20px → 24px
+- `--space-l`: 24px → 28px → 32px
+- `--space-xl`: 32px → 40px → 48px
+
+### Типографика (adaptive)
+
+**Основной шрифт:**
+- Font Family: **Inter** (fallback: system-ui, Avenir, Helvetica, Arial, sans-serif)
+- Font Weight: **300** (Light) - для всех заголовков и текста
+- Line Height: 1.2-1.3 (заголовки), 1.5 (текст)
+
+**Monospace шрифт (для Code):**
+- Font Family: **Fira Mono** (fallback: SF Mono, Monaco, Cascadia Code, Roboto Mono, monospace)
+
+**Размеры шрифтов (mobile → tablet → desktop):**
+- `--font-size-h1`: 36px → 40px → 48px
+- `--font-size-h2`: 28px → 32px → 36px
+- `--font-size-h3`: 24px → 28px → 32px
+- `--font-size-h4`: 16px → 20px → 24px
+- `--font-size-p1`: 16px → 16px → 20px
+- `--font-size-p2`: 12px → 16px → 16px
+- `--font-size-p3`: 12px → 12px → 14px
+
+**Letter Spacing (трекинг для мелких кеглей):**
+- Меньше 20px → +2% (0.02em)
+- Меньше 16px → +4% (0.04em)
+- Меньше 14px → +6% (0.06em)
+
+Адаптивные значения трекинга:
+- `--letter-spacing-h4`: 0.02em → 0 → 0 (16px / 20px / 24px)
+- `--letter-spacing-p1`: 0.02em → 0.02em → 0 (16px / 16px / 20px)
+- `--letter-spacing-p2`: 0.06em → 0.02em → 0.02em (12px / 16px / 16px)
+- `--letter-spacing-p3`: 0.06em → 0.06em → 0.04em (12px / 12px / 14px)
+
+### Переходы
+
+- `--transition-fast`: 0.15s ease
+- `--transition-normal`: 0.2s ease
+- `--transition-slow`: 0.3s ease
+
+## Disabled States (состояния недоступности)
+
+Базовые правила для disabled состояний интерактивных компонентов:
+
+### Стили
+
+```css
+/* Для кнопок */
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Для полей ввода - применяется ко всему wrapper */
+.input-wrapper--disabled,
+.select-wrapper--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Отключение hover эффектов */
+.component:hover:not(:disabled) {
+  /* hover стили */
+}
+```
+
+### Правила
+
+- **Прозрачность**: `opacity: 0.5` (50%) - единственный визуальный эффект для всех disabled элементов
+- **Курсор**: `cursor: not-allowed` - указывает на недоступность
+- **Область применения**:
+  - Для **Button** - применяется к самой кнопке
+  - Для **Input/Select** - применяется ко всему полю целиком (wrapper), включая label, input/select, hint/error
+- **Hover эффекты**: отключаются через `:hover:not(:disabled)`
+- **Цвет текста**: не меняется (сохраняет семантический цвет в зависимости от состояния поля)
+- **Применимо к**: Button, Input, Select и другие интерактивные компоненты
+
+### Примеры
+
+```jsx
+<Button variant="primary" disabled>Disabled Button</Button>
+<Input label="Name" value="Cannot edit" disabled />
+<Select label="Choose" options={[...]} disabled />
+```
+
+## Структура проекта
+
+```
+/src
+  /styles
+    tokens.css           # Дизайн токены
+  /components
+    Button.jsx/.css      # Компонент кнопки
+    Tabs.jsx/.css        # Компонент вкладок
+    Input.jsx/.css       # Компонент input
+    Card.jsx/.css        # Компонент карточки
+    Typography.jsx/.css  # Типографика
+    Code.jsx/.css        # Inline и block код
+    Link.jsx/.css        # Ссылки
+    Badge.jsx/.css       # Бейджи
+    Modal.jsx/.css       # Модальное окно
+    Select.jsx/.css      # Выпадающий список
+  /docs
+    App.jsx              # Страница документации
+    main.jsx             # Точка входа
+    docs.css             # Стили документации
+  index.js               # Экспорт всех компонентов
+```
+
+## Примеры использования
+
+### Кнопки
+
+```jsx
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="ghost">Ghost</Button>
+
+// Размеры с соответствующими иконками
+<Button size="small" icon={<Mail size={20} strokeWidth={1.5} />}>
+  Small
+</Button>
+<Button size="medium" icon={<Mail size={24} strokeWidth={1.5} />}>
+  Medium
+</Button>
+<Button size="large" icon={<Mail size={28} strokeWidth={1.5} />}>
+  Large
+</Button>
+
+// С fullWidth
+<Button
+  variant="primary"
+  size="medium"
+  icon={<Mail size={24} strokeWidth={1.5} />}
+  fullWidth
+>
+  Send Email
+</Button>
+```
+
+### Tabs
+
+Вкладки с двумя вариантами оформления: secondary (с border) и ghost (без border).
+
+```jsx
+import { Tabs, Tab } from '@donkit-ai/design-system';
+import { AlertCircle } from 'lucide-react';
+
+// Secondary tabs (default) - с border
+<Tabs size="medium" variant="secondary">
+  <Tab selected={selectedTab === 'tab1'} onClick={() => setSelectedTab('tab1')}>
+    Overview
+  </Tab>
+  <Tab selected={selectedTab === 'tab2'} onClick={() => setSelectedTab('tab2')}>
+    Details
+  </Tab>
+  <Tab selected={selectedTab === 'tab3'} onClick={() => setSelectedTab('tab3')}>
+    Settings
+  </Tab>
+</Tabs>
+
+// Ghost tabs - без border, минималистичный стиль
+<Tabs size="medium" variant="ghost">
+  <Tab selected={selectedTab === 'tab1'} onClick={() => setSelectedTab('tab1')}>
+    Overview
+  </Tab>
+  <Tab selected={selectedTab === 'tab2'} onClick={() => setSelectedTab('tab2')}>
+    Details
+  </Tab>
+  <Tab selected={selectedTab === 'tab3'} onClick={() => setSelectedTab('tab3')}>
+    Settings
+  </Tab>
+</Tabs>
+
+// With icons (всегда 20px для Tabs)
+<Tabs size="small" variant="secondary">
+  <Tab
+    selected={selectedTab === 'alerts'}
+    onClick={() => setSelectedTab('alerts')}
+    icon={<AlertCircle size={20} strokeWidth={1.5} />}
+  >
+    Alerts
+  </Tab>
+  <Tab selected={selectedTab === 'other'} onClick={() => setSelectedTab('other')}>
+    Other
+  </Tab>
+</Tabs>
+
+// Disabled tab
+<Tabs size="medium" variant="secondary">
+  <Tab selected>Active</Tab>
+  <Tab disabled>Disabled</Tab>
+</Tabs>
+```
+
+**Варианты:**
+- **secondary** (default) - с border, как вторичные кнопки
+  - Selected: фон `--color-item-bg-selected`, border `--color-border-selected`
+  - Hover: фон `--color-item-bg-hover`, border `--color-border-hover`
+- **ghost** - без border, минималистичный
+  - Selected: фон `--color-item-bg-selected`
+  - Hover: фон `--color-item-bg-hover`
+
+**Размеры:** small, medium, large
+
+**Дополнительно:** поддержка иконок и disabled состояния
+
+### Input
+
+```jsx
+// Basic input
+<Input
+  label="Email"
+  size="medium"
+  type="email"
+  placeholder="email@example.com"
+  hint="We'll never share your email"
+/>
+
+// Left icon (informational) - size small
+<Input
+  label="Search"
+  size="small"
+  icon={<Search size={20} strokeWidth={1.5} />}
+  placeholder="Search..."
+/>
+
+// Left icon - size medium
+<Input
+  label="Search"
+  size="medium"
+  icon={<Search size={24} strokeWidth={1.5} />}
+  placeholder="Search..."
+/>
+
+// Right icon (action with hover) - size medium
+<Input
+  label="Password"
+  size="medium"
+  type={showPassword ? 'text' : 'password'}
+  iconRight={showPassword ? <EyeOff size={24} strokeWidth={1.5} /> : <Eye size={24} strokeWidth={1.5} />}
+  onIconRightClick={() => setShowPassword(!showPassword)}
+/>
+
+// Error state
+<Input
+  label="Name"
+  error="This field is required"
+/>
+```
+
+**Работа с иконками:**
+- **Иконки слева** (`icon`) - информационные, не интерактивные (email, phone, user, search)
+- **Иконки справа** (`iconRight`) - действия с hover (показать/скрыть пароль, копировать)
+- **Цвет**: по умолчанию `--color-txt-icon-2`, при hover `--color-txt-icon-1`
+- **Обработчик**: используйте `onIconRightClick` для действий правой иконки
+
+### Select
+
+```jsx
+<Select
+  label="Choose option"
+  size="medium"
+  value={value}
+  onChange={setValue}
+  options={[
+    { value: 'opt1', label: 'Option 1' },
+    { value: 'opt2', label: 'Option 2' },
+  ]}
+  placeholder="Select..."
+/>
+```
+
+### Stepper
+
+Числовое поле с кнопками увеличения и уменьшения значения.
+
+```jsx
+// Basic stepper
+<Stepper
+  label="Quantity"
+  size="medium"
+  value={quantity}
+  onChange={setQuantity}
+  min={1}
+  max={10}
+  step={1}
+/>
+
+// Small size
+<Stepper
+  label="Price"
+  size="small"
+  value={price}
+  onChange={setPrice}
+  min={0}
+  max={1000}
+  step={10}
+  hint="In increments of 10"
+/>
+
+// With error
+<Stepper
+  label="Age"
+  value={age}
+  onChange={setAge}
+  min={0}
+  max={120}
+  error="Age is required"
+/>
+
+// Disabled
+<Stepper
+  label="Fixed value"
+  value={50}
+  disabled
+/>
+```
+
+**Параметры:**
+- `value` - текущее значение (число)
+- `onChange` - функция обработки изменения значения
+- `min` - минимальное значение (default: 0)
+- `max` - максимальное значение (default: 100)
+- `step` - шаг изменения (default: 1)
+- `size` - размер: "small" или "medium" (default: "medium")
+- `label` - подпись поля
+- `hint` - подсказка под полем
+- `error` - текст ошибки (показывается вместо hint)
+- `disabled` - отключить поле
+
+**Иконки в кнопках:**
+- Small: 16px (Minus, Plus)
+- Medium: 20px (Minus, Plus)
+
+### Card
+
+Карточки бывают двух типов:
+
+```jsx
+// Card Info (по умолчанию)
+// Информационная карточка без интерактивности
+// Прозрачный фон, только border
+<Card padding="medium" variant="info">
+  <H4>Card Title</H4>
+  <P1>Information content</P1>
+</Card>
+
+// Card Interactive
+// Интерактивная карточка с hover эффектом
+// При hover меняется фон и border
+<Card padding="large" variant="interactive" onClick={handleClick}>
+  <H4>Clickable Card</H4>
+  <P1>Interactive content</P1>
+</Card>
+
+// Размеры padding
+<Card padding="small">Small padding</Card>
+<Card padding="medium">Medium padding</Card>
+<Card padding="large">Large padding</Card>
+```
+
+**Стиль:**
+- **variant="info"** (по умолчанию): прозрачный фон, border `--color-border`
+- **variant="interactive"**: фон `--color-item-bg`, при hover фон `--color-item-bg-hover` и border `--color-border-hover`, курсор pointer
+
+### Code
+
+```jsx
+// Inline code
+<p>Use <Code>--color-accent</Code> variable</p>
+
+// Code block
+<Code block>{`function example() {
+  return "Hello World";
+}`}</Code>
+```
+
+### Link
+
+Ссылки акцентным цветом, подчеркивание появляется при hover.
+
+**Стиль:**
+- Цвет: `--color-accent`
+- Без подчеркивания по умолчанию
+- При hover: цвет меняется на `--color-accent-hover` + появляется подчеркивание
+- При active: цвет `--color-accent-hover`
+
+### Badge
+
+Бейджи для отображения статусов и категорий в двух размерах.
+
+```jsx
+// Medium size (default)
+<Badge variant="success" size="medium">Success</Badge>
+<Badge variant="error" size="medium">Error</Badge>
+<Badge variant="warning" size="medium">Warning</Badge>
+<Badge variant="info" size="medium">Info</Badge>
+
+// Small size
+<Badge variant="success" size="small">Success</Badge>
+<Badge variant="error" size="small">Error</Badge>
+<Badge variant="warning" size="small">Warning</Badge>
+
+// Variants
+<Badge variant="default">Default</Badge>
+<Badge variant="accent">Accent</Badge>
+```
+
+**Размеры:**
+- `small` - компактный размер (font-size: p3, padding: 0 4px, radius: xs)
+- `medium` - стандартный размер (font-size: p2, padding: 2px 8px, radius: s)
+
+**Варианты:**
+- `default` - серый с border
+- `info` - синий (информация)
+- `success` - зелёный (успех)
+- `warning` - жёлтый (предупреждение)
+- `error` - красный (ошибка)
+- `accent` - красный акцентный
+
+Цвета адаптируются для светлой и тёмной темы для обеспечения контраста минимум 4.5:1.
+
+### Modal
+
+```jsx
+<Modal
+  title="Modal Title"
+  onClose={handleClose}
+  size="medium"
+>
+  <P1>Modal content here...</P1>
+  <Input label="Name" placeholder="Enter name" />
+
+  <ModalFooter>
+    <Button variant="secondary" size="medium" onClick={handleClose}>
+      Cancel
+    </Button>
+    <Button variant="primary" size="medium">
+      Submit
+    </Button>
+  </ModalFooter>
+</Modal>
+
+{/* Modal использует иконку закрытия 20px (автоматически) */}
+```
+
+---
+
+## 🛠 Для мейнтейнеров дизайн-системы
+
+### Публикация в GitLab Package Registry (рекомендуется)
+
+1. **Внесите изменения** в компоненты или токены
+
+2. **Обновите версию** в `package.json`:
+
+```bash
+npm version patch   # 0.1.0 → 0.1.2 (багфиксы)
+npm version minor   # 0.1.0 → 0.2.0 (новые фичи)
+npm version major   # 0.1.0 → 1.0.0 (breaking changes)
+```
+
+3. **Создайте тег и запушьте:**
+
+```bash
+git push --follow-tags
+```
+
+**Готово!** GitLab CI автоматически опубликует новую версию в Package Registry.
+
+### Команда получит обновления
+
+```bash
+npm update @donkit-ai/design-system
+# или
+npm install @donkit-ai/design-system@latest
+```
+
+---
+
+### Публикация через Git (альтернатива)
+
+Если не используете Package Registry:
+
+```bash
+git add .
+git commit -m "Update button styles"
+git push origin main
+
+# Опционально: создать тег
+git tag v0.1.2
+git push --tags
+```
+
+Команда обновляет:
+
+```bash
+npm update @donkit-ai/design-system
+```
+
+### Локальная разработка
+
+Для тестирования изменений локально используйте `npm link`:
+
+```bash
+# В папке Donkit-desing-tokens
+npm link
+
+# В папке вашего проекта (agent-platform/frontend)
+npm link @donkit-ai/design-system
+```
+
+Теперь изменения в дизайн-системе сразу видны в вашем проекте без переустановки.
+
+### Структура версионирования
+
+- **Главная ветка:** `main` - стабильная версия
+- **Теги:** `v0.1.0`, `v0.1.2` - релизные версии
+- **Фичи:** создавайте ветки для больших изменений, мерджите в `main` после ревью
+
+---
+
+## Лицензия
+
+MIT