Тимур Городецкий
89 lines
3.8 KiB
Markdown
89 lines
3.8 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 | Кнопка, варианты primary/accent/secondary/ghost/danger | ✅ готов |
|
|
|
|
## Разработка пакета
|
|
|
|
```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.
|