@tnsu/ui-kit

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

Внутренняя память проекта (решения, план, прогресс) — в 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/

Затем:

npm i @tnsu/ui-kit

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

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

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

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

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

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

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

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