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

Card title

- +

Карточка для контента, виджетов, статусов.

@@ -22,93 +22,87 @@
-
- Device alias +
+ Status title
-
-
-
- ON +
+
+ OK
-

Device display name. Maby letters, many words

+

Primary status card with a short description.

-
- Device alias +
+ Default
-
-
-
- +
+
+
-

Device display name. Maby letters, many words

+

Neutral card for a module, widget, or section.

-
- device_alias +
+ Pending
-
-
-
- OFF +
+
+
-

Device display name. Maby letters, many words

+

Warning state for items that need attention.

-
- device_alias +
+ Failed
-
-
-
- OFF +
+
+
-

Device display name. Maby letters, many words

+

Error state for failed actions or blocked flows.

-
- device_alias +
+ Info
-
-
-
- OFF +
+
+
-

Device display name. Maby letters, many words

+

Informational card for contextual metadata.

-
- device_alias +
+ Queued
-
-
-
- OFF +
+
+
-

Device display name. Maby letters, many words

+

Secondary state for queued or background work.

@@ -119,17 +113,16 @@ Cards HTML
-
<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>
diff --git a/demo/partials/forms.html b/demo/partials/forms.html index c3e7cda..d24d679 100644 --- a/demo/partials/forms.html +++ b/demo/partials/forms.html @@ -147,9 +147,9 @@
<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

    -
  1. Connect device to Wi-Fi
  2. -
  3. Register device on server
  4. -
  5. Assign device to area
  6. +
  7. Create workspace
  8. +
  9. Invite team
  10. +
  11. Configure permissions
  12. Verify status
@@ -59,18 +59,18 @@
-
Device
-
Физическое устройство в системе
+
Item
+
Базовая сущность интерфейса
-
Area
-
Логическая зона размещения устройств
+
Group
+
Логическая группа элементов
-
Scene
-
Набор действий, выполняемых одновременно
+
Flow
+
Набор действий, выполняемых последовательно
@@ -88,7 +88,7 @@
  • @@ -114,7 +114,7 @@
    • -
      Kitchen Light
      +
      Release Plan
      192.168.2.21 @@ -128,7 +128,7 @@
    • -
      Hall Sensor
      +
      Analytics Sync
      192.168.2.34 @@ -145,7 +145,7 @@
    • -
      Garage Relay
      +
      Archive Job
      Offline
      @@ -168,7 +168,7 @@ <button class="list-action" type="button"> <span class="list-label"> <i class="ph ph-lightbulb"></i> - Devices + Projects </span> <span class="list-meta">12</span> </button> diff --git a/demo/partials/modals.html b/demo/partials/modals.html index 68934fc..48b3667 100644 --- a/demo/partials/modals.html +++ b/demo/partials/modals.html @@ -69,16 +69,16 @@

      Любой контент: текст, формы, списки.

      -
      -
      `; diff --git a/demo/partials/tables.html b/demo/partials/tables.html index 2fcd391..d53de81 100644 --- a/demo/partials/tables.html +++ b/demo/partials/tables.html @@ -9,28 +9,28 @@

      Basic table

      - + - + - - + + - + - + - + - + - + - + @@ -84,16 +84,16 @@
      <table class="table">
      -  <caption class="table-caption">Devices list</caption>
      +  <caption class="table-caption">Projects list</caption>
         <thead class="table-head">
           <tr class="table-row">
      -      <th scope="col">Device</th>
      +      <th scope="col">Project</th>
             <th scope="col">Status</th>
           </tr>
         </thead>
         <tbody class="table-body">
           <tr class="table-row">
      -      <td>Kitchen Light</td>
      +      <td>Website Redesign</td>
             <td><span class="badge badge-success">Online</span></td>
           </tr>
         </tbody>
      diff --git a/public/assets/imgs/gnexus-mark.svg b/public/assets/imgs/gnexus-mark.svg
      new file mode 100644
      index 0000000..4776d34
      --- /dev/null
      +++ b/public/assets/imgs/gnexus-mark.svg
      @@ -0,0 +1,6 @@
      +
      +  GNexus UI Kit
      +  
      +  
      +  
      +
      diff --git a/public/assets/imgs/sh-icon.png b/public/assets/imgs/sh-icon.png
      deleted file mode 100644
      index 7d60f99..0000000
      --- a/public/assets/imgs/sh-icon.png
      +++ /dev/null
      Binary files differ
      diff --git a/src/js/components/helper.js b/src/js/components/helper.js
      index afb5ff4..bfcb1cb 100644
      --- a/src/js/components/helper.js
      +++ b/src/js/components/helper.js
      @@ -74,7 +74,7 @@
       
       	return `
       		
      -
      Devices listProjects list
      DeviceProject StatusIPPingOwnerUpdated Actions
      Kitchen LightWebsite Redesign Online - 192.168.1.21 + @design 12 ms2 min ago @@ -38,14 +38,14 @@
      Hall SensorBilling API Degraded - 192.168.1.34 + @backend 88 ms1 hour ago @@ -53,14 +53,14 @@
      Garage RelayArchive Import Offline - + @ops Yesterday @@ -71,7 +71,7 @@
      - Total: 3 devices + Total: 3 projects
      +
      ${tableCaption} ${tableHead} ${body} @@ -111,18 +111,7 @@ }, content); } -function deviceFieldsUnification(data) { - const map = { - "device_name": "name", - "device_hard_id": "device_id", - "device_ip": "ip", - "device_type": "type", - "ip_address": "ip", - "mac_address": "mac", - "device_mac": "mac", - "core_version": "firmware_core_version" - }; - +function fieldsUnification(data, map = {}) { const dataObj = {}; for(let field in data) { @@ -170,12 +159,12 @@ return btn; } -function cardScriptActionLoadingState(card, isLoading) { +function cardStatusLoadingState(card, isLoading) { if(card?.isLoading == isLoading) { return false; } - const iconContainer = card.querySelector(".device-icon"); + const iconContainer = card.querySelector(".status-icon"); if(isLoading) { card.isLoading = true; @@ -309,12 +298,12 @@ emptyHereHTML, }, unification: { - deviceFieldsUnification, + fieldsUnification, timeAgo, formatDate }, states: { btnLoadingState, - cardScriptActionLoadingState + cardStatusLoadingState } -} \ No newline at end of file +} diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss index 84f26d2..dcdaf5e 100644 --- a/src/scss/components/_cards.scss +++ b/src/scss/components/_cards.scss @@ -30,17 +30,17 @@ padding-bottom: $space-4; } - &.device-action { + &.status-card { max-width: 220px; overflow: hidden; transition-duration: .2s; transition-property: border-color; - .device-icon-container { + .status-icon-container { position: relative; - .device-online-status { + .status-indicator { position: absolute; top: -15px; left: -5px; @@ -53,7 +53,7 @@ } } - .device-icon { + .status-icon { display: flex; flex-direction: row; align-items: center; @@ -83,7 +83,7 @@ transition-property: background-color, color; } - .device-name { + .status-name { font-size: $font-size-sm; line-height: $line-height-normal; } @@ -91,7 +91,7 @@ &.card-success { @include state_panel($color-success); - .device-icon { + .status-icon { color: $color-success; } } @@ -99,7 +99,7 @@ &.card-warning { @include state_panel($color-warning); - .device-icon { + .status-icon { color: $color-warning; } } @@ -107,7 +107,7 @@ &.card-info { @include state_panel($color-info, $color-text-light); - .device-icon { + .status-icon { color: $color-info; } } @@ -115,7 +115,7 @@ &.card-secondary { @include state_panel($color-secondary, $color-text-light); - .device-icon { + .status-icon { color: $color-secondary; } } @@ -123,7 +123,7 @@ &.card-danger, &.card-error { @include state_panel($color-error); - .device-icon { + .status-icon { color: $color-error; } }