diff --git a/src/.vitepress/config.mts b/src/.vitepress/config.mts index c10b8e5..e1350a4 100644 --- a/src/.vitepress/config.mts +++ b/src/.vitepress/config.mts @@ -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', + } + ], + }, + ], }, - } + }, +} ) diff --git a/src/index.md b/src/index.md index 8ef5b1f..c734d91 100644 --- a/src/index.md +++ b/src/index.md @@ -26,6 +26,9 @@ features: - title: Аккаунт Beeline Cloud details: Аккаунт пользователя Beeline Cloud. link: /admin/index + - title: Дизайн-платформа Yellowbe + details: Инструкця по работе с Yellowbe. + link: /yellowbe/index --- diff --git a/src/yellowbe/about.md b/src/yellowbe/about.md new file mode 100644 index 0000000..85aa61a --- /dev/null +++ b/src/yellowbe/about.md @@ -0,0 +1,22 @@ +# Из чего состоит дизайн-платформа + +## Ресурсы + +### Frontend + +- Компоненты на React. Реализованные в коде компоненты дизайн-платформы для фреймворка React +- Токены компонентов. Готовые переменные всех свойств и стилей, которые при изменении дизайна автоматически обновляются в коде. +- Мигратор. Инструмент для миграции устаревших токенов. + +### Дизайн + +- Web компоненты. Набор готовых и актуальных компонентов, которые значительно ускоряют процесс проектирования для веб-продуктов. +- Набор базовых стилей. Обширная библиотека базовых стилей с готовыми палитрами, шрифтовой архитектурой и системой отступов. +- Плагин icon finder. Плагин для поиска нужной иконки в иконочном шрифте Yellowbe. + +### Основы + +- Базовые токены. Набор базовых переменных (цвет, типографика, форма или свойство объекта) представленный в виде данных. +- Иконки. Иконки Дизайн-платформы объединены в иконочный шрифт, который легко подключается к любому продукту. Шрифт имеет актуальную версию и автоматически дополняется новыми иконками. +- Перестилизация элементов. Файлы, упрощающие глобальные настройки (подключение шрифтов, перестилизация скроллбара и т.д). +- Гайды. Руководства по использованию инструментов дизайн-платформы. \ No newline at end of file diff --git a/src/yellowbe/assets/imp.png b/src/yellowbe/assets/imp.png new file mode 100644 index 0000000..9bc043c Binary files /dev/null and b/src/yellowbe/assets/imp.png differ diff --git a/src/yellowbe/assets/import.png b/src/yellowbe/assets/import.png new file mode 100644 index 0000000..d37f695 Binary files /dev/null and b/src/yellowbe/assets/import.png differ diff --git a/src/yellowbe/assets/on_lib.png b/src/yellowbe/assets/on_lib.png new file mode 100644 index 0000000..5f3e35f Binary files /dev/null and b/src/yellowbe/assets/on_lib.png differ diff --git a/src/yellowbe/get-started/design.md b/src/yellowbe/get-started/design.md new file mode 100644 index 0000000..c051df2 --- /dev/null +++ b/src/yellowbe/get-started/design.md @@ -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 > Library > Enterprise libraries > Switch ON + +![Импорт библиотеки](../assets//imp.png) +![Импорт библиотеки](../assets//on_lib.png) + +# Работа с компонентами + Компоненты — это часто повторяющиеся элементы интерфейса. Они помогают создавать и поддерживать консистентный дизайн в продуктах. Мы пытаемся покрывать все потребности дизайнеров и постоянно работаем над развитием системы. + +### Принципы работы с компонентами +При использовании библиотеки компонентов следуйте принципам: +- Выбирать компоненты через вкладку Component +- Не отвязывать компоненты, с целью их “доработать” +- Не копировать мастер-компонент из библиотеки в Pixso + + +### Типы компонентов + +- Сквозной компонент. Это компонент, который переиспользуется во всех макетах. Его стоит обернуть в локальный компонент в вашем проекте, чтобы все изменения происходили автоматически. +- Кастомизируемый компонент.Это компонент, который предполагает изменения под нужды продуктов. Например, добавить в Header дополнительные кнопки или иконки. +- Сборный компонент. Это группа компонентов-деталей, из которых собирается компонент или целый элемент интерфейса. К таким составным компонентам относятся: Autocomplete, Cell, List, Side sheet. + +#### Сквозной компонент + Настраивается под продукт, и затем дублируется во всем проекте. Например, Navigation drawer или Header. + + Следует обернуть копию компонента из библиотеки в свой локальный компонент и дать название в соответствии со значением. + При редактирование локального компонента, изменения наследуются на остальные инстансы, а связь с Дизайн-платформой сохраняется. + Детачить компонент из библиотеки нельзя. + +#### Кастомизируемый компонент + Кастомизируется под запрос продукта, но полностью соответствуют правилам дизайн-платформы и следует единому дизайну. + + Бывает что компонент не до конца соответствует запросу продукта, и в этом случае можно доработать компонент под частный случай. + + Все элементы добавляются в единый фрейм/группу, объединяющую базовый компонент Yellowbe и другие элементы. При создании такого компонента необходимо соблюдать правила дизайн-платформы и здравого смысла. + + Скрывать ненужные элементы можно через панель управления вариантами. Детачить компонент из библиотеки нельзя. + +#### Сборный компонент из компонентов Yellowbe + Состоит из нескольких компонентов, или групп, которые помогают формировать свой уникальный элемент интерфейса. + Может собираться из компонентов: list item, cell, notification, sideshit, autocomplete и др. + + Из маленьких элементов следует собирать более крупные и формирующие группы, блоки или страницы. Сборный компонент легко изменить в любом месте и любом объёме, убрав или заменив нужный элемент. + + Сборка компонента похожа на конструктор, и даёт больше гибкости в реализации. diff --git a/src/yellowbe/get-started/dev.md b/src/yellowbe/get-started/dev.md new file mode 100644 index 0000000..dc79d9b --- /dev/null +++ b/src/yellowbe/get-started/dev.md @@ -0,0 +1,122 @@ +# 📦 Установка + +### Установка из локального архива +Для установки библиотеки из скачанного архива выполните: +- Скачайте архив yellowbe-ui-vX.X.X.tgz из релизов GitHub +- Переместите архив в папку вашего проекта +- Выполните команду установки: + + +```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 ( + + + + + ); +} +``` + +## 🎨 Настройка темизации + +Оберните корневой компонент приложения: + +```jsx +import { ThemeProvider } from "@yellowbe/design-system-react"; + +function RootComponent() { + return ( + {/* или 'dark' */} + + + ); +} +``` + +## 🔤 Подключение шрифтов и стилей + +### Шрифт 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 ( + <> + + Заголовок + + + ); +} +``` + +### CommonJS +```jsx +const { Button, Typography } = require('@yellowbe/design-system-react'); + +function Component() { + return ( + <> + + Текст + + ); +} +``` \ No newline at end of file diff --git a/src/yellowbe/get-started/index.md b/src/yellowbe/get-started/index.md new file mode 100644 index 0000000..804f61b --- /dev/null +++ b/src/yellowbe/get-started/index.md @@ -0,0 +1,13 @@ +--- +section_links: + - title: Для разработчика + link: /yellowbe/get-started/dev.md + description: Как начать работу с библиотеками Yellowbe + - title: Для дизайнера + link: /yellowbe/get-started/design.md + description: Как начать работу с библиотеками Yellowbe +--- + +# Начать работу + +Как бастро начать использовать дизайн-платформу diff --git a/src/yellowbe/index.md b/src/yellowbe/index.md new file mode 100644 index 0000000..369c07d --- /dev/null +++ b/src/yellowbe/index.md @@ -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/) + + +## Ссылки на ресурсы + +
+ +
+

📚 Официальная документация

+

Полное руководство по использованию компонентов, API и примеры кода

+ + Перейти к документации → + +
+ +
+

🎨 Pixso

+

Файлы библиотеки компонентов для Pixso

+ + Перейти к установке → + +
+ +
+

💬 Вопросы

+

По вопросам можно обращаться на почту

+ + Написать нам → + +
+
\ No newline at end of file