diff --git a/README.md b/README.md index d3f683b..aa29256 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,149 @@ -gnexus-ui-kit -=============== +# GNexus UI Kit + +UI-kit для веб-интерфейсов GNexus. Текущий стиль: темная cyber/terminal панель, 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 + + + +``` + +JS bundle публикует API в `window`: + +```js +Toasts.createSuccess("Success", "Saved").show(); + +const modal = Modals.create("example-modal", { + title: "Modal", + body: () => "
Content
" +}); + +modal.show(); +``` + +Также доступен global namespace: + +```js +GNexusUIKit.Toasts.createInfo("Info", "Message").show(); +``` + +## Компоненты + +Сейчас в demo/docs представлены: + +- Typography +- Palette +- Buttons +- Forms +- Editable String +- Lists +- Badges +- Alerts +- Tables +- Toasts +- Cards +- Modals + +Каждая секция demo содержит визуальный пример, короткое описание и копируемый блок кода. + +## 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: моноширинная типографика, 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` является локальным служебным файлом и не должен попадать в коммиты. diff --git a/demo/index.html b/demo/index.html index 623100a..e5d6a90 100644 --- a/demo/index.html +++ b/demo/index.html @@ -7,7 +7,7 @@ - + diff --git a/demo/partials/cards.html b/demo/partials/cards.html index 4f080f7..0a056f4 100644 --- a/demo/partials/cards.html +++ b/demo/partials/cards.html @@ -10,7 +10,7 @@Карточка для контента, виджетов, статусов.
<div class="card device-action card-success">
- <span class="card-title">Device alias</span>
+ <div class="card status-card card-success">
+ <span class="card-title">Status title</span>
<div class="card-content">
- <div class="device-icon-container">
- <div class="device-online-status status-online">•</div>
- <div class="device-icon">
- <i class="ph ph-power"></i>
- ON
+ <div class="status-icon-container">
+ <div class="status-icon">
+ <i class="ph ph-check-circle"></i>
+ OK
</div>
</div>
- <p class="device-name">Kitchen Light</p>
+ <p class="status-name">Primary status card.</p>
</div>
</div>
<div class="form-group">
<label class="label error">
- Device name
+ Project name
<i class="ph ph-user"></i>
- <input class="input" type="text" placeholder="Kitchen Light">
+ <input class="input" type="text" placeholder="Launch Plan">
</label>
<div class="input-info">
<i class="ph ph-warning-circle"></i>
diff --git a/demo/partials/lists.html b/demo/partials/lists.html
index b5263e6..db1b5ac 100644
--- a/demo/partials/lists.html
+++ b/demo/partials/lists.html
@@ -14,8 +14,8 @@
- Dashboard
- - Devices
- - Scenes
+ - Projects
+ - Reports
- Automations
- Settings
@@ -26,9 +26,9 @@
Ordered list
- - Connect device to Wi-Fi
- - Register device on server
- - Assign device to area
+ - Create workspace
+ - Invite team
+ - Configure permissions
- Verify status
Любой контент: текст, формы, списки.
| Device | +Project | Status | -IP | -Ping | +Owner | +Updated | Actions |
|---|---|---|---|---|---|---|---|
| Kitchen Light | +Website Redesign | Online |
- 192.168.1.21
+ @design
|
- 12 ms | +2 min ago | @@ -38,14 +38,14 @@ | |
| Hall Sensor | +Billing API | Degraded |
- 192.168.1.34
+ @backend
|
- 88 ms | +1 hour ago | @@ -53,14 +53,14 @@ | |
| Garage Relay | +Archive Import | Offline |
- —
+ @ops
|
- — | +Yesterday | @@ -71,7 +71,7 @@ | |
| - + | |||||||