granat2.0-react 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Granat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# granat2.0-react
+
+Корпоративная библиотека компонентов на React 18 + Vite. Архитектура и структура каталогов ориентированы на PrimeReact, но компоненты реализуются с нуля.
+
+## Состав
+- `button/`, `spinner/` — реализованные компоненты
+- `resources/` — базовые стили и токены (шрифты, темы, типографика)
+- `icons/` — набор иконок MTS
+- `dev/` — кастомный сторибук (меню слева, отображается только выбранный компонент)
+
+## Запуск dev
+```bash
+npm install --cache ./.npm-cache
+npm run dev
+```
+
+## Сборка библиотеки
+```bash
+npm run build
+```
+
+## Storybook
+Dev‑сторибук показывает варианты компонентов. Каждый компонент добавляется в `dev/stories/`.
+
+## Документация по правилам
+См. `STYLE_GUIDE.md`.

package/STYLE_GUIDE.md

@@ -0,0 +1,36 @@
+# Granat UI — working rules
+
+## Структура и подход
+- Стек: React 18 + Vite, структура каталогов как у PrimeReact.
+- Компоненты лежат в корне проекта по папкам (`button/`, `spinner/` и т.д.).
+- Каждый компонент экспортируется в корневом `index.ts`.
+
+## Стили и токены
+- Только наши подключенные стили из `resources/`.
+- Без inline‑стилей. Все правила — в `.css` файлах компонента или в `dev/storybook/`.
+- Если нет нужного токена — добавляем локальную CSS‑переменную в компонент.
+- Маппинг Figma → CSS токены напрямую по именам:
+  - `Brand/MTS Red` → `--color-brand`
+  - `Icons/Primary` → `--color-icon-primary`
+  - `Icons/Secondary` → `--color-icon-secondary`
+  - `Constant/Greyscale 0` → `--color-constant-greyscale-0`
+  - `Constant/Greyscale 900` → `--color-constant-greyscale-900`
+
+## Иконки
+- Используем только иконки из `icons/`.
+- Если в Figma есть имя/папка, стараемся найти одноимённую иконку у нас.
+
+## Пропсы
+- Компоненты должны быть максимально параметризованы пропсами.
+- Дефолты соответствуют дизайн‑системе.
+
+## Dev / Storybook
+- `npm run dev` запускает визуальный сторибук.
+- Сторибук:
+  - `dev/storybook/` — оболочка, меню, стили
+  - `dev/stories/` — истории компонентов
+- После разработки каждого компонента добавляем его историю.
+- Сайдбар содержит список по папкам компонентов.
+
+## Темы
+- Сейчас активна тема light через `data-mts-theme="light"` на `html`.