Тимур Городецкий
97 lines
4.2 KiB
Markdown
97 lines
4.2 KiB
Markdown
# @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.
|