Fork: 0
root / gnexus-ui-kit
Transfer to URL with SHA Find file
Newer
Older
gnexus-ui-kit / README.md
@root root 5 hours ago 6 KB Tech
Raw Blame History

GNexus UI Kit

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

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

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

npm install
npm run dev

Dev server:

http://localhost:3000

Production build:

npm run build

Структура

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:

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 страница

Команды

npm run dev

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

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:

<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:

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

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

modal.show();

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

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

JS API

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

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

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

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 содержит визуальный пример, короткое описание и копируемый блок кода.

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

  • 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

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

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

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

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.