@tnsu/ui-kit (0.15.0)
Installation
@tnsu:registry=https://git.tnsu.kz/api/packages/tansu/npm/npm install @tnsu/ui-kit@0.15.0"@tnsu/ui-kit": "0.15.0"About this package
@tnsu/ui-kit
Общие UI-компоненты для SPFx web part'ов ТНСУ. Единый дизайн, один источник правды.
Внутренняя память проекта (решения, план, прогресс) — в PROJECT.md.
Установка в проект
Пакет лежит в реестре организации tansu на git.tnsu.kz. Реестр публичный, а сам git.tnsu.kz доступен только из внутренней сети, поэтому токен для установки не нужен (из сети или по VPN).
В корне проекта — файл .npmrc со строкой:
@tnsu:registry=https://git.tnsu.kz/api/packages/tansu/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)
Публикация новой версии
Публикует пайплайн publish в Gitea — по кнопке: Actions → publish → Run workflow. Сначала юнит-тесты и сборка, потом публикация в реестр tansu.
- Версию поднимает пайплайн. В
package.jsonзадаются только major.minor (патч там не важен): новая функциональность — поднять minor руками (0.14.x→0.15.0). Патч — следующий после самого большого опубликованного с тем же major.minor. В git ничего не коммитится. - Тот же код не публикуется. Пайплайн считает хэш исходников (
srcбез тестов и историй Storybook,package.json, конфиги сборки, README), кладёт его в публикуемыйpackage.json(полеsourceHash) и сравнивает с последней опубликованной версией. Совпало — пайплайн падает с «Публиковать нечего». - Секрет:
PACKAGES_TOKEN— токен Gitea со scopewrite:package(владелец — участник организации tansu с правом записи). Логин не нужен.
Пробный прогон без публикации: DRY_RUN=1 bash ci/publish.sh.
Версии до 0.14.0 скопированы из прежнего реестра timur.gorodetskiy без хэша, поэтому первая публикация
пайплайном выпустит 0.14.1 даже без изменений кода; дальше проверка работает как обычно.
На каждый push и pull request пайплайн test гоняет юнит-тесты и сборку.
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 |