Документы Yellowbe

2025-08-14 16:14:08 +03:00
10 changed files with 348 additions and 59 deletions
@@ -90,8 +90,8 @@ export default defineConfig({
      }
    },
    // https://vitepress.dev/reference/default-theme-config
-  // nav: [
-  //   ],
+    // nav: [
+    //   ],

    //  socialLinks: [
    //    { icon: { svg: gitlab }, link: 'https://git.vimpelcom.ru/common/vega/docs' }
@@ -118,94 +118,124 @@ export default defineConfig({
      label: 'Содержание'
    },
    sidebar: {
-    '/platform/': [
-      {
-        text: 'Платформа Beeline Cloud', link: '/platform/index.md',
-        collapsed: true,
+      '/platform/': [
+        {
+          text: 'Платформа Beeline Cloud', link: '/platform/index.md',
+          collapsed: true,
          items: [
-            {text: 'Сервисы', link: '/platform/services/services.md'},
-            {text: 'Техническая поддержка', link: '/platform/support/support-overview.md'}, 
+            { text: 'Сервисы', link: '/platform/services/services.md' },
+            { text: 'Техническая поддержка', link: '/platform/support/support-overview.md' },
          ],
        },
      ],
-    '/start/': [
-      {
-        text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
-        collapsed: true,
+      '/start/': [
+        {
+          text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
+          collapsed: true,
          items: [
-            {text: 'Начать работу', link: '/start/getting-started.md'},
-            {text: 'Бесплатный период', link: '/start/trial.md'}, 
-            {text: 'Платное использование', link: '/start/organization.md'},
+            { text: 'Начать работу', link: '/start/getting-started.md' },
+            { text: 'Бесплатный период', link: '/start/trial.md' },
+            { text: 'Платное использование', link: '/start/organization.md' },
          ],
        },
      ],
-    //  '/billing/': [
- 
-    //   ],
+      //  '/billing/': [
+
+      //   ],
      '/vdc/': [
        {
-        text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
-        collapsed: true,
+          text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
+          collapsed: true,
          items: [
-            {text: 'Обзор сервиса', link: '/vdc/vdc-overview.md'},
-            {text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md'}, 
-            {text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
-            collapsed: true,
-            items: [
-            { text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
-            { text: 'Вход в дата-центр', link: '/vdc/vdc-how-to/vdc-enter.md' },
-            { text: 'Управление дата-центром', link: '/vdc/vdc-how-to/vdc-manage.md' },
-            { text: 'Двухфакторная аутентификация', link: '/vdc/vdc-how-to/vdc-2fa.md', 
+            { text: 'Обзор сервиса', link: '/vdc/vdc-overview.md' },
+            { text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md' },
+            {
+              text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
              collapsed: true,
              items: [
-              {text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md'},
-              {text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md'},      
-              ],  
+                { text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
+                { text: 'Вход в дата-центр', link: '/vdc/vdc-how-to/vdc-enter.md' },
+                { text: 'Управление дата-центром', link: '/vdc/vdc-how-to/vdc-manage.md' },
+                {
+                  text: 'Двухфакторная аутентификация', link: '/vdc/vdc-how-to/vdc-2fa.md',
+                  collapsed: true,
+                  items: [
+                    { text: 'Подключение 2FA', link: '/vdc/vdc-how-to/vdc-2fa-start.md' },
+                    { text: 'Управление 2FA', link: '/vdc/vdc-how-to/vdc-2fa-manage.md' },
+                  ],
+                },
+              ],
            },
-           ],
-          },
-           // { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
+            // { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
          ],
        },
-       ],
+      ],
      '/compute/': [
        {
-        text: 'Виртуальные машины', link: '/compute/index.md',
-        collapsed: true,
+          text: 'Виртуальные машины', link: '/compute/index.md',
+          collapsed: true,
          items: [
-            {text: 'Обзор сервиса', link: '/compute/compute-overview.md'},
-          //  {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'}, 
-            {text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
-                collapsed: true,
-                items: [
+            { text: 'Обзор сервиса', link: '/compute/compute-overview.md' },
+            //  {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'}, 
+            {
+              text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
+              collapsed: true,
+              items: [
                { text: 'Создание ВМ', link: '/compute/compute-how-to/compute-servers-create.md' },
                { text: 'Подключение к ВМ', link: '/compute/compute-how-to/compute-connect.md' },
                { text: 'Управление ВМ', link: '/compute/compute-how-to/compute-servers-manage.md' },
-                ],
-              },
+              ],
+            },
            { text: 'Диски', link: '/compute/compute-how-to/compute-disks.md' },
            { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip.md' },
            { text: 'Группы размещения', link: '/compute/compute-how-to/compute-affinity.md' },
-            {text: 'Практические руководства', link: '/compute/compute-guide/compute-guide-index.md',
-                collapsed: true,
-                items: [
+            {
+              text: 'Практические руководства', link: '/compute/compute-guide/compute-guide-index.md',
+              collapsed: true,
+              items: [
                { text: 'Подключение по SSH к ВМ закрытого контура', link: '/compute/compute-guide/compute-guide-ssh-inside.md' },
-                  ],
-              },  
+              ],
+            },
          ],
        },
-       
-          ],
+
+      ],
      '/admin/': [
-      {
-        text: 'Аккаунт Beeline Cloud', link: '/admin/index.md',
-        collapsed: true,
+        {
+          text: 'Аккаунт Beeline Cloud', link: '/admin/index.md',
+          collapsed: true,
          items: [
-            {text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
+            { text: 'Управление ключевыми парами', link: '/admin/ssh.md' },
          ],
        },
-      ],    
-      },  
+      ],
+      '/yellowbe/': [
+        {
+          text: 'Дизайн-платформа Yellowbe', link: '/yellowbe/index.md',
+          collapsed: false,
+          items: [
+            {
+              text: 'Начать работу',
+              link: '/yellowbe/get-started/index.md',
+              collapsed: true,
+              items: [
+                {
+                  text: 'Разработчику',
+                  link: '/yellowbe/get-started/dev.md',
+                }, {
+                  text: 'Дизайнеру',
+                  link: '/yellowbe/get-started/design.md',
+                },
+              ]
+            },
+            {
+                  text: 'Состав дизайн-платформы',
+                  link: '/yellowbe/about.md',
+            }
+          ],
+        },
+      ],
    },
-  }
+  },
+}
 )
@@ -26,6 +26,9 @@ features:
  - title: Аккаунт Beeline Cloud
    details: Аккаунт пользователя Beeline Cloud.
    link: /admin/index
+  - title: Дизайн-платформа Yellowbe
+    details: Инструкця по работе с Yellowbe.
+    link: /yellowbe/index
 
 ---

@@ -0,0 +1,22 @@
+# Из чего состоит дизайн-платформа
+
+## Ресурсы
+
+### Frontend
+
+- Компоненты на React. Реализованные в коде компоненты дизайн-платформы для фреймворка React
+- Токены компонентов. Готовые переменные всех свойств и стилей, которые при изменении дизайна автоматически обновляются в коде.
+- Мигратор. Инструмент для миграции устаревших токенов.
+
+### Дизайн
+
+- Web компоненты. Набор готовых и актуальных компонентов, которые значительно ускоряют процесс проектирования для веб-продуктов.
+- Набор базовых стилей. Обширная библиотека базовых стилей с готовыми палитрами, шрифтовой архитектурой и системой отступов.
+- Плагин icon finder. Плагин для поиска нужной иконки в иконочном шрифте Yellowbe.
+
+### Основы
+
+- Базовые токены. Набор базовых переменных (цвет, типографика, форма или свойство объекта) представленный в виде данных.
+- Иконки. Иконки Дизайн-платформы объединены в иконочный шрифт, который легко подключается к любому продукту. Шрифт имеет актуальную версию и автоматически дополняется новыми иконками.
+- Перестилизация элементов. Файлы, упрощающие глобальные настройки (подключение шрифтов, перестилизация скроллбара и т.д).
+- Гайды. Руководства по использованию инструментов дизайн-платформы.
@@ -0,0 +1,54 @@
+
+# Установка
+
+### Подготовительные действия
+- Скачайте файлы с библиотекой [Yellowbe_Trial.pix](https://yellowbe.beeline.ru/consumer/assets/files/Yellowbe_Trial.pix)
+- Импортируйте скачанный файл библиотеки в черновики (Drafts) ![Импорт библиотеки](../assets/import.png)
+
+### Подключение библиотеки Pixso
+- Если у вас бесплатный аккаунт в Figma, то вы можете работать в файле. Создавайте новые страницы и проектируйте в них, используя локальные компоненты «Yellowbe».
+- Платный (Enterprise) аккаунт даёт вам возможность опубликовать файл как библиотеку и подключать её к другим файлам. Переместите файл в команду и опубликуйте его.
+- Теперь вы можете подключить опубликованную библиотеку к файлам проекта: Component &gt; Library &gt; Enterprise libraries &gt; Switch ON
+
+![Импорт библиотеки](../assets//imp.png)
+![Импорт библиотеки](../assets//on_lib.png)
+
+# Работа с компонентами
+ Компоненты — это часто повторяющиеся элементы интерфейса. Они помогают создавать и поддерживать консистентный дизайн в продуктах. Мы пытаемся покрывать все потребности дизайнеров и постоянно работаем над развитием системы. 
+
+### Принципы работы с компонентами
+При использовании библиотеки компонентов следуйте принципам:
+- Выбирать компоненты через вкладку Component
+- Не отвязывать компоненты, с целью их “доработать”
+- Не копировать мастер-компонент из библиотеки в Pixso
+
+
+### Типы компонентов
+
+- Сквозной компонент. Это компонент, который переиспользуется во всех макетах. Его стоит обернуть в локальный компонент в вашем проекте, чтобы все изменения происходили автоматически. 
+- Кастомизируемый компонент.Это компонент, который предполагает изменения под нужды продуктов. Например, добавить в Header дополнительные кнопки или иконки. 
+- Сборный компонент. Это группа компонентов-деталей, из которых собирается компонент или целый элемент интерфейса. К таким составным компонентам относятся: Autocomplete, Cell, List, Side sheet. 
+
+#### Сквозной компонент
+ Настраивается под продукт, и затем дублируется во всем проекте. Например, Navigation drawer или Header. 
+
+ Следует обернуть копию компонента из библиотеки в&nbsp;свой локальный компонент и дать название в соответствии со значением. 
+ При редактирование локального компонента, изменения наследуются на остальные инстансы, а связь с Дизайн-платформой сохраняется. 
+ Детачить компонент из библиотеки нельзя. 
+
+#### Кастомизируемый компонент
+ Кастомизируется под запрос продукта, но полностью соответствуют правилам дизайн-платформы и следует единому дизайну. 
+
+ Бывает что компонент не до конца соответствует запросу продукта, и в этом случае можно доработать компонент под частный случай. 
+
+ Все элементы добавляются в единый фрейм/группу, объединяющую базовый компонент Yellowbe и другие элементы. При создании такого компонента необходимо соблюдать правила дизайн-платформы и здравого смысла. 
+
+ Скрывать ненужные элементы можно через панель управления вариантами. Детачить компонент из библиотеки нельзя. 
+
+#### Сборный компонент из&nbsp;компонентов Yellowbe
+ Состоит из нескольких компонентов, или групп, которые помогают формировать свой уникальный элемент интерфейса.   
+ Может собираться из компонентов: list item, cell, notification, sideshit, autocomplete и др. 
+
+ Из маленьких элементов следует собирать более крупные и формирующие группы, блоки или страницы. Сборный компонент легко изменить в любом месте и любом объёме, убрав или заменив нужный элемент. 
+
+ Сборка компонента похожа на конструктор, и даёт больше гибкости в реализации. 
@@ -0,0 +1,122 @@
+# 📦 Установка
+
+### Установка из локального архива
+Для установки библиотеки из скачанного архива выполните:
+- Скачайте архив <code>yellowbe-ui-vX.X.X.tgz</code> из <a href="https://github.com/beeline-design/yellowbe-ui/releases" target="_blank">релизов GitHub</a>
+- Переместите архив в папку вашего проекта
+- Выполните команду установки:
+
+
+```bash
+npm install ./yellowbe-ui-vX.X.X.tgz
+# или
+yarn add ./yellowbe-ui-vX.X.X.tgz
+```
+
+### 🔨 Быстрый старт
+
+```jsx
+import { ThemeProvider, Button, Input } from "@yellowbe/design-system-react";
+
+function App() {
+  return (
+    <ThemeProvider isRoot theme='light'>
+      <Input label="Email" type="email" />
+      <Button variant="primary">Отправить</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+## 🎨 Настройка темизации
+
+Оберните корневой компонент приложения:
+
+```jsx
+import { ThemeProvider } from "@yellowbe/design-system-react";
+
+function RootComponent() {
+  return (
+    <ThemeProvider isRoot theme='light'>  {/* или 'dark' */}
+      <App />
+    </ThemeProvider>
+  );
+}
+```
+
+## 🔤 Подключение шрифтов и стилей
+
+### Шрифт Roboto
+Библиотека использует шрифт **Roboto** от Google, распространяемый под лицензией **Apache License 2.0**:
+
+- [Лицензия Roboto](https://github.com/google/roboto/blob/main/LICENSE)
+- [Официальный сайт шрифта](https://fonts.google.com/specimen/Roboto)
+
+**Условия использования:**
+✅ Разрешено:
+- Бесплатное использование в коммерческих и некоммерческих проектах
+- Модификация шрифта
+- Распространение в продуктах
+
+### Для полной интеграции дизайн-платформы добавьте:
+
+#### В глобальном CSS/SCSS
+```css
+@import '~@yellowbe/design-tokens/css/iconfont/iconfont.css';
+@import '~@yellowbe/design-tokens/css/font-face.css';
+@import '~@yellowbe/design-tokens/css/scrollbar.css';
+```
+#### Или через JS:
+
+```js
+// В корневом JS/TS файле
+import '@yellowbe/design-tokens/css/iconfont/iconfont.css';
+import '@yellowbe/design-tokens/css/font-face.css';
+import '@yellowbe/design-tokens/css/scrollbar.css';
+```
+
+#### После подключения:
+
+- Доступен шрифт "Roboto" (автоматически используется в Typography)
+- Работает иконочный шрифт "Yellowbe Icons" (для компонента Icon)
+- Скроллбар с поддержкой темизации (Chromium/Firefox)
+
+**Для работы компонента Icon необходимо подключить шрифт иконок**
+
+## ⚠️ Внимание: При проблемах со сборкой:
+
+- Проверьте настройки сборщика для обработки CSS и шрифтов
+- Убедитесь что пакет @yellowbe/design-tokens установлен
+- Обратитесь к документации 
+
+## 🧩 Использование компонентов
+Библиотека поддерживает оба формата импорта:
+
+### ESM (рекомендуется)
+```jsx
+import { Button, Typography, Icon } from '@yellowbe/design-system-react';
+
+function Component() {
+  return (
+    <>
+      <Button variant="primary">Действие</Button>
+      <Typography variant="h1">Заголовок</Typography>
+      <Icon name="arrow-right" size={24} />
+    </>
+  );
+}
+```
+
+### CommonJS
+```jsx
+const { Button, Typography } = require('@yellowbe/design-system-react');
+
+function Component() {
+  return (
+    <>
+      <Button>Кнопка</Button>
+      <Typography>Текст</Typography>
+    </>
+  );
+}
+```
@@ -0,0 +1,13 @@
+---
+section_links:
+  - title: Для разработчика
+    link: /yellowbe/get-started/dev.md
+    description: Как начать работу с библиотеками Yellowbe
+  - title: Для дизайнера
+    link: /yellowbe/get-started/design.md
+    description:  Как начать работу с библиотеками Yellowbe
+---    
+
+# Начать работу
+
+Как бастро начать использовать дизайн-платформу
@@ -0,0 +1,45 @@
+---
+section_links:
+  - title: Начать работу
+    link: /yellowbe/get-started/index.md
+    description: Как начать работу с библиотеками Yellowbe
+  - title: Из чего состоит дизайн-платформа
+    link: /yellowbe/about.md
+    description: Список компонентов Yellowbe
+---    
+
+# Дизайн-платформа Yellowbe
+
+Готовые UI компоненты для разработчиков и дизайнеров, без санкций и ограничений с поддержкой темизации. 
+
+Дизайн-платформа Yellowbe входит в Реестр российского ПО, [Реестровая запись №27198 от 19.03.2025](https://reestr.digital.gov.ru/reestr/3166609/)
+
+
+## Ссылки на ресурсы
+
+<div class="cards-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin: 30px 0;">
+
+<div class="card" style="border: 1px solid #e1e4e8; border-radius: 10px; padding: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);display:flex; flex-direction:column">
+    <h3 style="margin-top: 0;">📚 Официальная документация</h3>
+    <p style="margin:auto">Полное руководство по использованию компонентов, API и примеры кода</p>
+    <a href="https://yellowbe.beeline.ru/consumer/main" style="display: inline-block; background: #f0f4f8; color: #0366d6; padding: 8px 15px; border-radius: 6px; text-decoration: none; font-weight: 500; margin-top: 10px;">
+        Перейти к документации →
+    </a>
+</div>
+
+<div class="card" style="border: 1px solid #e1e4e8; border-radius: 10px; padding: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); display:flex; flex-direction:column">
+    <h3 style="margin-top: 0;">🎨 Pixso</h3>
+    <p style="margin:auto">Файлы библиотеки компонентов для Pixso</p>
+    <a href="https://yellowbe.beeline.ru/consumer/get-started/design/pixso-components" style="display: inline-block; background: #f0f4f8; color: #0366d6; padding: 8px 15px; border-radius: 6px; text-decoration: none; font-weight: 500; margin-top: 10px;">
+        Перейти к установке →
+    </a>
+</div>
+
+<div class="card" style="border: 1px solid #e1e4e8; border-radius: 10px; padding: 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);display:flex; flex-direction:column">
+    <h3 style="margin-top: 0;">💬 Вопросы</h3>
+    <p style="margin:auto">По вопросам можно обращаться на почту</p>
+    <a href="mailto:designsystem@beeline.ru&subject=Обращение из GitHub" style="display: inline-block; background: #f0f4f8; color: #0366d6; padding: 8px 15px; border-radius: 6px; text-decoration: none; font-weight: 500; margin-top: 10px;">
+        Написать нам →
+    </a>
+</div>
+</div>