@tnsu/ui-kit (0.3.0)
Installation
@tnsu:registry=https://git.tnsu.kz/api/packages/tansu/npm/npm install @tnsu/ui-kit@0.3.0"@tnsu/ui-kit": "0.3.0"About this package
@tnsu/ui-kit
Общие UI-компоненты для SPFx web part'ов ТНСУ. Единый дизайн, один источник правды.
Внутренняя память проекта (решения, план, прогресс) — в PROJECT.md.
Первичная настройка (один раз на каждого разработчика)
Пакет лежит в приватном registry (Gitea), поэтому перед первой установкой нужно один раз настроить доступ. Дальше про это можно забыть.
Шаг 1. Создать токен в Gitea:
- Открой http://git.tnsu.kz → кликни на свой аватар справа вверху → Настройки.
- Слева: Приложения.
- В блоке «Управление токенами» → Создать новый токен:
- Имя: например
npm-read. - Права (scopes): найди строку
packageи поставь «Прочитанные» (Read). Остальное — «Нет доступа».
- Имя: например
- Нажми Генерировать токен и сразу скопируй его (показывается один раз).
Шаг 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.
Dependencies
Development Dependencies
| ID | Version |
|---|---|
| @chromatic-com/storybook | latest |
| @fluentui/react | ^8.125.7 |
| @storybook/addon-a11y | ^10.5.7 |
| @storybook/addon-docs | ^10.5.7 |
| @storybook/addon-mcp | latest |
| @storybook/addon-vitest | ^10.5.7 |
| @storybook/react-vite | ^10.5.7 |
| @types/react | ^17.0.45 |
| @types/react-dom | ^17.0.17 |
| @vitejs/plugin-react | ^6.0.5 |
| @vitest/browser-playwright | latest |
| @vitest/coverage-v8 | latest |
| playwright | latest |
| react | ^17.0.1 |
| react-dom | ^17.0.1 |
| sass | ^1.102.0 |
| storybook | ^10.5.7 |
| tslib | ^2.3.1 |
| typescript | ~5.8.0 |
| vite | ^8.2.1 |
| vite-plugin-dts | ^5.0.3 |
| vitest | latest |
Peer Dependencies
| ID | Version |
|---|---|
| @fluentui/react | ^8.106.4 |
| react | ^17.0.1 |
| react-dom | ^17.0.1 |
| tslib | ^2.3.1 |