# GNexus UI Kit

UI-kit для веб-интерфейсов GNexus. Текущий стиль: темная cyber/terminal панель с легкой примесью Tokyo Night, IBM Plex Mono, Phosphor Icons, жесткие прямые формы, акцентные бордеры и яркие состояния.

Проект выделен из старого `webclient`, но развивается как отдельный набор UI-компонентов с demo/docs страницей.

## Быстрый старт

```bash
npm install
npm run dev
```

Dev server:

```text
http://localhost:3000
```

Production build:

```bash
npm run build
```

## Структура

```text
demo/                 Demo/docs страница и HTML partials
public/assets/        Шрифты, иконки, highlight.js и изображения
src/js/               Browser JS entry и UI-компоненты
src/scss/             SCSS entry, tokens, utilities и компоненты
dist/                 Результат сборки, не коммитится
webclient/            Исходный старый клиент, игнорируется git
```

Ключевые entry points:

```text
src/scss/kit.scss     Основной CSS UI-kit
src/scss/demo.scss    CSS для demo/docs страницы
src/js/index.js       Browser JS bundle entry
demo/index.html       Demo/docs страница
```

## Команды

```bash
npm run dev
```

Собирает проект, запускает BrowserSync и следит за изменениями.

```bash
npm run build
```

Собирает:

- `dist/css/kit.css`
- `dist/css/demo.css`
- `dist/js/gnexus-ui-kit.js`
- `dist/index.html`
- `dist/assets/*`

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

Для подключения kit в обычную HTML-страницу нужны CSS, иконки и JS bundle:

```html
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/css/kit.css">
<script src="/js/gnexus-ui-kit.js"></script>
```

JS bundle публикует API в `window`:

```js
Toasts.createSuccess("Success", "Saved").show();

const modal = Modals.create("example-modal", {
  title: "Modal",
  bodyText: "Content"
});

modal.show();
```

Также доступен global namespace:

```js
GNexusUIKit.Toasts.createInfo("Info", "Message").show();
```

## JS API

Bundle публикует компоненты и helper-модули двумя способами:

```js
Toasts.createSuccess("Success", "Saved").show();
GNexusUIKit.Toasts.createInfo("Info", "Message").show();
```

Текущий публичный namespace:

```text
GNexusUIKit.Helper
GNexusUIKit.Toasts
GNexusUIKit.Modals
GNexusUIKit.advancedSelect
GNexusUIKit.editableString
GNexusUIKit.confirmPopup
GNexusUIKit.Overlays
GNexusUIKit.InputPatterns
```

`Overlays.init()` и `InputPatterns.init()` запускаются автоматически на `DOMContentLoaded`.

## Компоненты

Сейчас в demo/docs представлены:

- Typography
- Palette
- Buttons
- Forms
- Editable String
- Navigation & Overlays
- Lists
- Badges
- Alerts
- Tables
- Data Patterns
- Toasts
- Cards
- Modals

Каждая секция demo содержит визуальный пример, короткое описание и копируемый блок кода.

### Navigation & Overlays

Секция включает:

- Tabs
- Dropdown
- Tooltip
- Popover

JS-модуль: `src/js/components/overlays.js`.

### Data Patterns

Секция включает:

- Toolbar
- Search Field
- Input Group
- Pagination
- Empty State
- Skeleton

JS-модуль: `src/js/components/input-patterns.js` добавляет поведение для `data-input-clear`.

## SCSS

Базовые файлы:

```text
src/scss/_palette-colors.scss
src/scss/_design-tokens.scss
src/scss/_spacing.scss
src/scss/_mixins.scss
src/scss/_utils.scss
```

Компоненты находятся в:

```text
src/scss/components/
```

Основная идея стиля сохраняется от исходного UI: моноширинная типографика, Tokyo Night influenced dark surface, sharp edges, толстые акцентные бордеры, цветовая инверсия на hover/focus и яркие status colors.

## Assets

Локально подключены:

- IBM Plex Mono
- Phosphor Icons
- highlight.js для подсветки кода в demo/docs

`dist/` генерируется из `public/assets`, `src` и `demo`.

## Текущие замечания

- Сборка работает на Gulp, Sass, esbuild и gulp-file-include.
- Sass сейчас использует старый `@import`. Сборка проходит, но Dart Sass выводит deprecation warnings. Позже стоит мигрировать на `@use`.
- `webclient/` оставлен как источник старого клиента и игнорируется git.
- `.codex` является локальным служебным файлом и не должен попадать в коммиты.

## Запланировано

Ближайшие полезные компоненты:

- Page Header: заголовок страницы, subtitle, actions, status.
- Key-Value / Description List: компактный read-only блок для деталей сущности.
- Progress: progress bar, usage meter, staged progress.
- Stepper / Steps: пошаговые сценарии и wizard-flow.
- Chip / Tag: selectable/removable метки для фильтров и labels.
- Avatar / Identity: initials, icon avatar, image avatar, status marker.
- Timeline / Activity Log: история событий, audit log, jobs.
- Accordion / Disclosure: раскрываемые группы настроек и деталей.
- Drawer / Side Panel: контекстные детали и quick edit без полной модалки.
- Confirm Dialog docs: `confirm-popup.js` уже есть в JS, но его нужно вынести в demo/docs.

Технические задачи:

- Мигрировать Sass с `@import` на `@use`.
- Заменить deprecated Sass functions на `sass:map` и `sass:color`.
- Пересмотреть Gulp-зависимости или заменить сборку на более свежий простой pipeline.
- Добавить отдельную demo-секцию для loader/progress states.