# @tnsu/ui-kit

Общие UI-компоненты для SPFx web part'ов ТНСУ. Единый дизайн, один источник правды.

> Внутренняя память проекта (решения, план, прогресс) — в [PROJECT.md](./PROJECT.md).

## Первичная настройка (один раз на каждого разработчика)

Пакет лежит в приватном registry (Gitea), поэтому перед первой установкой нужно один
раз настроить доступ. Дальше про это можно забыть.

**Шаг 1. Создать токен в Gitea:**
1. Открой http://git.tnsu.kz → кликни на свой аватар справа вверху → **Настройки**.
2. Слева: **Приложения**.
3. В блоке «Управление токенами» → **Создать новый токен**:
   - Имя: например `npm-read`.
   - Права (scopes): найди строку **`package`** и поставь **«Прочитанные»** (Read).
     Остальное — «Нет доступа».
4. Нажми **Генерировать токен** и **сразу скопируй** его (показывается один раз).

**Шаг 2. Прописать токен у себя на компьютере.**
Создай (или дополни) файл `.npmrc` в своей домашней папке
(`C:\Users\<твоё-имя>\.npmrc`) одной строкой:

```
//git.tnsu.kz/api/packages/timur.gorodetskiy/npm/:_authToken=ВСТАВЬ_СВОЙ_ТОКЕН
```

> ⚠️ Токен — это как пароль. Он лежит в домашней папке, **вне проекта**, и в git не попадает.
> Никогда не коммить его и не вставляй в код.

Всё. Теперь `npm i` в любом проекте, где подключён `@tnsu/ui-kit`, будет работать.

## Установка в проект

Убедись, что в корне проекта есть файл `.npmrc` со строкой (для request-portal он уже
закоммичен):

```
@tnsu:registry=http://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/
```

Затем:

```powershell
npm i @tnsu/ui-kit
```

Пакет требует, чтобы в проекте уже были (peerDependencies):
`react@17`, `react-dom@17`, `@fluentui/react@8`, `tslib`.
У любого SPFx-решения этого поколения они есть.

## Использование

```ts
import { Button } from '@tnsu/ui-kit';
import '@tnsu/ui-kit/styles.css'; // один раз в корневом компоненте web part

<Button variant="primary">Отправить</Button>;
```

## Компоненты

_Наполняется по мере переноса. Полная витрина со всеми состояниями — в Storybook._

**Кнопки:** `Button`, `PrintButton`
**Сообщения:** `Alert`, `RequestNumber`
**Форма (оболочка/раскладка):** `FormCard`, `FormGrid`, `FormField`, `FormActions`, `CollapseSection`
**Поля ввода:** `TextInput`, `TextArea`, `PhoneInput`, `MoneyInput`, `Select`, `Toggle`
**Режим чтения:** `FormModeProvider`, `useFormReadOnly`
**Иконки:** `Icon`, `IconSprite`
**Файлы:** `FileDropzone`, `AttachmentList`
**Модалка:** `ConfirmHost`, `confirmModal`
**Хуки:** `useFlipRows`

> ⏳ В планах: `DataTable` (обобщение ItemsTable), `Badge`, `ErrorOverlay`, навигация (Tabs/Sidebar/Breadcrumbs).

## Разработка пакета

```powershell
npm i             # поставить зависимости
npm run build     # собрать пакет в dist/
npm run dev       # сборка в watch-режиме
npm run storybook # витрина компонентов (localhost:6006)
```

### Публикация новой версии

```powershell
# 1. поднять version в package.json (напр. 0.0.1 → 0.0.2)
npm run build
npm publish
```

> npm не даёт перезаписать уже опубликованную версию — перед публикацией всегда
> бампай `version` в package.json.