+ {initialUrl && (
+ {}}
+ />
+ )}
+
+
+
+ {title}
+
+
+ );
+};
diff --git a/playground/src/pages/form/form.scss b/playground/src/pages/form/form.scss
new file mode 100644
index 000000000..fe6834284
--- /dev/null
+++ b/playground/src/pages/form/form.scss
@@ -0,0 +1,56 @@
+$block: '.form';
+
+#{$block} {
+ width: 100%;
+ height: 100vh;
+ overflow: hidden;
+
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 4px;
+ margin-bottom: 16px;
+ }
+
+ &__header-buttons {
+ display: flex;
+ gap: 8px;
+ }
+
+ &__panel-group {
+ width: 100%;
+ height: 100%;
+ }
+
+ &__panel-content {
+ padding: 20px;
+ height: 100%;
+ overflow: auto;
+ background-color: var(--g-color-base-background);
+ box-sizing: border-box;
+ }
+
+ &__resize-handle {
+ background-color: var(--g-color-line-generic);
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: var(--g-color-line-generic-hover);
+ }
+
+ &_horizontal {
+ height: 8px;
+ cursor: row-resize;
+ }
+
+ &_vertical {
+ width: 8px;
+ cursor: col-resize;
+ }
+ }
+
+ &__form {
+ margin-top: 20px;
+ }
+}
diff --git a/playground/src/pages/form/form.tsx b/playground/src/pages/form/form.tsx
new file mode 100644
index 000000000..dfe03bf51
--- /dev/null
+++ b/playground/src/pages/form/form.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import {Button, Text, ThemeProvider} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import {Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels';
+import {useNavigate} from 'react-router';
+import DynamicForm from '../../../../src/form-generator/FormGenerator';
+import {FormOutput} from './components/FormOutput/FormOutput';
+import {FormBuilder, FormField} from '../../../../src/form-builder';
+
+import './form.scss';
+
+const b = block('form');
+
+const FormContent = () => {
+ const [formFields, setFormFields] = React.useState{JSON.stringify(data, null, 2)}
+
+
+ {/* Left Panel Group */}
+
+
+ {/* Form Builder Panel */}
+
+
+
+ {/* Resize Handle */}
+
+
+
+
+
+ {/* Resize Handle */}
+
+
+ {/* Form Preview Panel */}
+
+
+
+ {/* Resize Handle */}
+
+
+
+
+
+
+ );
+};
+
+// Главный компонент формы, оборачивающий содержимое в провайдер
+export default function FormPage() {
+ return (
+
+
+
+ Form Builder
+
+
+
+
+
+
+
+
+ rest)}
+ />
+
+
+ Form Preview
+
+
+
+ Мы в Яндексе верим, что вклад в опенсорс — это вклад в технологическую эволюцию: без открытости, совместной работы и поддержки развитие IT‑индустрии сильно затруднено. Уже много лет мы используем в своих продуктах сторонние открытые технологии, а также делимся собственными и активно вовлекаем в их развитие разработчиков по всему миру.
", + "width": "s", + "verticalOffset": "l", + "offset": "default", + "resetPaddings": true, + "background": { + "image": { + "mobile": "https://storage.yandexcloud.net/yandex-opensource/pages/index/yos-index-cover-m.png", + "desktop": "https://storage.yandexcloud.net/yandex-opensource/pages/index/yos-index-cover.png" + }, + "color": "#EFF2F8", + "fullWidth": false, + "fullWidthMedia": true + } + }, + { + "type": "extended-features-block", + "title": { + "text": "Почему мы выкладываем наши технологии в открытый доступ?" + }, + "items": [ + { + "title": "Ответственность", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-01.svg", + "text": "Мы верим, что вкладываться в развитие опенсорс‑технологий — это ответственность каждого технологического лидера на рынке. Без опенсорс‑решений не появились бы многие продукты и сервисы не только Яндекса, но и других крупных компаний, и мы хотим отдавать обратно, делиться теми нашими решениями, которые, как мы считаем, принесут реальную пользу.
" + }, + { + "title": "Польза для сообщества", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-02.svg", + "text": "Технологии, которые мы разрабатываем, ежедневно помогают нам эффективно решать огромное количество самых разных задач в наших сервисах. Мы знаем, что разработчики вне Яндекса часто сталкиваются с теми же самыми задачами — и верим, что наши технологии могут быть полезны и им.
" + }, + { + "title": "Качество сервисов", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-03.svg", + "text": "Для нас важно разрабатывать и использовать только качественные технологические решения. В особенности это касается опенсорса: зная, что наши решения увидят и будут использовать другие, мы уделяем их качеству особое внимание. А уже в открытом доступе у технологии больше шансов развиваться и улучшаться — в том числе, при участии сообщества разработчиков.
" + }, + { + "title": "Бизнес‑потенциал", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-04.svg", + "text": "Мы верим, что при условии роста популярности наших решений и спроса на них со стороны сообщества, то, что мы выкладываем в опенсорс, может далее стать для нас бизнесом. То, что мы выкладываем в опенсорс, можно использовать и во внешних коммерческих проектах.
" + }, + { + "title": "Поиск талантов", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/os-index-icon-05.svg", + "text": "Мы ценим каждого, кто вкладывается в сторонние опенсорс‑решения или делится с миром своими. Контрибьюторы в наши продукты нам особенно важны: среди них мы ищем и находим тех, кто сможет развивать технологии уже будучи частью команды Яндекса.
" + } + ] + }, + { + "type": "card-layout-block", + "animated": false, + "title": "Краткая история опенсорса в Яндексе", + "description": "С начала истории развития опенсорса в Яндексе мы успели выложить в открытый доступ десятки собственных проектов, использовать в разработке наших продуктов внешние технологии, а также внесли существенный вклад в их развитие.
", + "colSizes": { + "all": 12, + "lg": 3, + "md": 4, + "sm": 6 + }, + "anchor": { + "url": "history", + "text": "history" + }, + "children": [ + { + "type": "layout-item", + "content": { + "title": "2010", + "text": "Методология веб‑разработки БЭМ (Блок‑Элемент‑Модификатор) выходит в оперсорс
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-01.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2012", + "text": "Запуск Яндекс Браузера на базе Blink (Chromium)
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-02.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2013", + "text": "Яндекс начинает контрибьютить в ядро Linux
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-03.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2016", + "text": "Выход в опенсорс ClickHouse
\\nВыход в опенсорс Hermione (с 2024 года — Testplane)
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-2016.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2017", + "text": "Выход в опенсорс CatBoost
\\nЯндекс начинает контрибьютить в PostgreSQL
Выход в опенсорс Одиссея
\\nЯндекс — топ‑контрибьютор в WAL‑G
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-06.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2019", + "text": "В Яндексе появляется команда разработки СУБД с открытым исходным кодом
\\nЯндекс — спонсор разработки PostgreSQL
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-07.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2020", + "text": "Выход в опенсорс Testsuite
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-2020.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2022", + "text": "Яндекс — один из основных спонсоров разработки PostgreSQL
\\nВыход в опенсорс YDB, userver, YaLM 100B, DivKit, Yatagan
\\nСтарт программы «Код для всех»
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-09.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2023", + "text": "Выход в опенсорс YTsaurus, Gravity UI, AppMetrica, Diplodoc, DataLens и счётчика Метрики
\\nСтарт Программы грантов Yandex Open Source
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-2023.png" + } + }, + { + "type": "layout-item", + "content": { + "title": "2024", + "text": "Первый Yandex Open Source Jam
\\nВыход в опенсорс YaFSDP
" + }, + "media": { + "image": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-timeline-2024.png" + } + } + ] + }, + { + "type": "card-layout-block", + "title": "Наши проекты", + "description": "В Яндексе мы разрабатываем и развиваем технологические решения самых разных сфер применения, размеров и сложности. Поэтому и в открытый доступ попадают самые разные проекты — главное, чтобы они приносили пользу не только нам, но и другим.
", + "colSizes": { + "all": 12, + "lg": 3, + "md": 4, + "sm": 6 + }, + "anchor": { + "url": "projects", + "text": "projects" + }, + "children": [ + { + "type": "background-card", + "title": "YDB", + "text": "Отказоустойчивая распределённая SQL база данных
", + "backgroundColor": "#2399FF", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-ydb.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "dark" + }, + { + "type": "background-card", + "title": "YTsaurus", + "text": "Платформа для хранения и обработки больших данных
", + "backgroundColor": "#FFB23E", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-yt.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "light" + }, + { + "type": "background-card", + "title": "GravityUI", + "text": "Библиотеки для создания интерфейсов
", + "backgroundColor": "#262626", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-gui.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "dark" + }, + { + "type": "background-card", + "title": "DivKit", + "text": "Фреймворк для server‑driven интерфейсов
", + "backgroundColor": "#F1F1F1", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-dk.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "light" + }, + { + "type": "background-card", + "title": "Diplodoc", + "text": "Платформа для написания документации в концепции Docs as Code
", + "backgroundColor": "#79F985", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-dd.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "light" + }, + { + "type": "background-card", + "title": "userver", + "text": "Фреймворк для создания высоконагруженных приложений
", + "backgroundColor": "#FF9D73", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-u.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "light" + }, + { + "type": "background-card", + "title": "DataLens", + "text": "BI-платформа для анализа и визуализации данных
", + "backgroundColor": "#FF7132", + "background": { + "src": "https://storage.yandexcloud.net/yandex-opensource/pages/index/os-index-card-dl.png", + "alt": "card-background" + }, + "paddingBottom": "m", + "theme": "dark" + }, + { + "type": "basic-card", + "title": "И это ещё не всё", + "text": "Узнать про наши опенсорс‑проекты больше вы можете на другой странице
", + "border": "none", + "buttons": [ + { + "text": "Все проекты", + "primary": true, + "theme": "monochrome", + "size": "promo", + "url": "/projects" + } + ] + } + ] + }, + { + "largeMedia": true, + "mediaOnly": false, + "size": "l", + "type": "media-block", + "direction": "content-media", + "anchor": { + "url": "1", + "text": "Фильм" + }, + "title": "Смотрите фильм с YaC 22
", + "description": "Руководители опенсорс‑проектов рассказывают про историю и культуру открытого кода в Яндексе.
", + "media": { + "youtube": "https://www.youtube.com/watch?v=G7G286S8ntc", + "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/video-cover.png" + }, + "disableShadow": true + }, + { + "type": "content-layout-block", + "size": "l", + "centered": true, + "textContent": { + "title": "", + "text": "", + "additionalInfo": "", + "buttons": [ + { + "text": "Сделано на GravityUI", + "theme": "monochrome", + "img": "https://storage.yandexcloud.net/cloud-www-assets/pages/open-source/open-source-gravity-ui-button.svg", + "url": "https://gravity-ui.com/" + } + ] + } + } + ] +} diff --git a/playground/src/pages/pc/example-2/content.json b/playground/src/pages/pc/example-2/content.json new file mode 100644 index 000000000..568c1b8d2 --- /dev/null +++ b/playground/src/pages/pc/example-2/content.json @@ -0,0 +1,402 @@ +{ + "meta": { + "title": "YDB — распределённая SQL база данных с открытым исходным кодом", + "description": "YDB — это открытая распределённая SQL база данных, которая сочетает высокую доступность и масштабируемость со строгой согласованностью и ACID транзакциями.", + "sharing": { + "image": "https://storage.yandexcloud.net/ydb-site-assets/share-ydb-eng.png" + } + }, + "blocks": [ + { + "type": "header-block", + "title": "YDB", + "description": "YDB — это распределённая отказоустойчивая Distributed SQL база данных с открытым исходным кодом, которая сочетает в себе высокую доступность и масштабируемость со строгой согласованностью и транзакциями ACID. Она поддерживает одновременное выполнение транзакционных (OLTP), аналитических (OLAP) и потоковых нагрузок.", + "width": "s", + "verticalOffset": "m", + "imageSize": "m", + "background": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/cover.png", + "disableCompress": true, + "alt": "Фон YDB" + }, + "color": "#e2eaff", + "fullWidth": false + }, + "buttons": [ + { + "text": "Быстрый старт", + "theme": "accent", + "url": "/../docs/ru/quickstart" + }, + { + "text": "Документация", + "theme": "outlined", + "url": "/../docs/ru/" + } + ] + }, + { + "type": "card-layout-block", + "title": "Что я могу делать с YDB?", + "animated": false, + "colSizes": { + "all": 12, + "sm": 6, + "md": 4 + }, + "anchor": { + "url": "whatcanido", + "text": "Что я могу делать с YDB?" + }, + "description": "", + "children": [ + { + "type": "background-card", + "backgroundColor": "#CCE7FF", + "title": "Транзакционные нагрузки (OLTP)", + "text": "Вы можете использовать YDB для хранения состояния вашего приложения, независимо от объема данных или частоты их изменения. Обрабатывать петабайты при миллионах транзакций в секунду — не проблема.", + "controlPosition": "footer", + "buttons": [ + { + "text": "Узнать больше", + "theme": "outlined", + "url": "/docs/ru/concepts/" + } + ] + }, + { + "type": "background-card", + "backgroundColor": "rgba(107,132,153,.12)", + "title": "Аналитические нагрузки (OLAP)", + "text": "Вы можете создавать аналитические отчёты на основе хранимых в YDB данных с производительностью, сопоставимой со специализированными аналитическими СУБД. При этом никаких компромиссов по согласованности и доступности не потребуется.", + "controlPosition": "footer", + "buttons": [ + { + "text": "Узнать больше", + "theme": "outlined", + "url": "/docs/ru/concepts/datamodel/table#column-oriented-tables" + } + ] + }, + { + "type": "background-card", + "backgroundColor": "rgba(107,132,153,.12)", + "title": "Потоковые нагрузки", + "text": "Вы можете использовать функциональность YDB-топиков для надёжной отправки данных между вашими приложениями или отслеживания изменений в таблицах YDB. Можно выбрать как семантику доставки сообщений ровно один раз (exactly once), так и не менее одного раза (at least once).", + "controlPosition": "footer", + "buttons": [ + { + "text": "Узнать больше", + "theme": "outlined", + "url": "/docs/ru/concepts/topic" + } + ] + } + ] + }, + { + "type": "extended-features-block", + "title": "Почему YDB?", + "animated": false, + "colSizes": { + "all": 12, + "sm": 6, + "md": 4 + }, + "items": [ + { + "title": "Эластичность и масштабируемость", + "text": "Добавляйте или удаляйте узлы на лету, чтобы легко масштабировать кластер по мере необходимости. YDB имеет отдельные слои вычисления и хранения, что позволяет независимо добавлять дисковую ёмкость или вычислительные ресурсы в зависимости от того, чего не хватает при текущей нагрузке.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_01.svg" + }, + { + "title": "Отказоустойчивость", + "text": "YDB спроектирована для работы в трёх зонах доступности и обеспечивает работоспособность даже в случае выхода из строя одной из них. Она автоматически восстанавливается после сбоя диска, сервера или датацентра с минимальной задержкой для приложений.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_03.svg" + }, + { + "title": "Простота в использовании", + "text": "Работа с кластером YDB ощущается как работа с одноузловой СУБД с безграничными ресурсами благодаря строгой согласованности, ACID-транзакциям, высокопроизводительным запросам, возможности загрузки больших объёмов данных, а также поддержке знакомого диалекта SQL и JSON API.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_02.svg" + }, + { + "title": "Универсальность", + "text": "Благодаря поддержке различных видов нагрузок в одной системе YDB может заменить несколько систем хранения и обработки данных или всю корпоративную экосистему данных в компании.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_06.svg" + }, + { + "title": "Открытый исходный код", + "text": "[Исходный код YDB](https://github.com/ydb-platform/ydb) опубликован под лицензией Apache 2.0, накладывающей минимум ограничений на использование. Таким образом, нет рисков, связанных с привязкой к конкретному поставщику или провайдеру облачных услуг.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_05.svg" + }, + { + "title": "Совместимость с любым окружением", + "text": "YDB можно развернуть в [Kubernetes](https://github.com/ydb-platform/ydb-kubernetes-operator), в любом облачном окружении или в корпоративных ЦОД. Либо можно использовать YDB как [управляемый сервис в Yandex Cloud](https://cloud.yandex.ru/services/ydb). Также возможны локальные эксперименты на любом компьютере.", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/features-icons/icon_04.svg" + } + ] + }, + { + "type": "banner-block", + "animated": false, + "title": "Оценка производительности PostgreSQL vs Distributed DBMS", + "subtitle": "TPC-C является наиболее известным набором тестов производительности для OLTP. Мы подготовили исследование производительности, сравнивающее PostgreSQL, YDB и CockroachDB в отказоустойчивых конфигурациях.", + "image": "https://storage.yandexcloud.net/ydb-site-assets/banner-block-pg.png", + "color": "#CCE7FF", + "button": { + "text": "Читать дальше", + "theme": "raised", + "url": "https://habr.com/ru/companies/ydb/articles/801587/" + } + }, + { + "type": "card-layout-block", + "title": "Кто использует YDB?", + "animated": false, + "colSizes": { + "all": 12, + "sm": 6, + "md": 4 + }, + "anchor": { + "url": "whouses", + "text": "Кто использует YDB?" + }, + "description": "", + "children": [ + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/metrika.png", + "disableCompress": true + } + }, + "content": { + "title": "Метрика", + "text": "[Метрика](https://metrika.yandex.ru/) - одна из крупнейших в мире платформ мобильной и веб-аналитики. Она полагается на YDB для создания пользовательских сессий на лету.\n\nПереход на YDB позволил Метрике расширить объём хранимых данных и бесконечно наращивать обрабатываемую нагрузку. Теперь одна из баз данных Метрики в YDB содержит более 400 ТБ данных и выдерживает нагрузку более 1 000 000 RPS." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/yandex-cloud-new.png", + "disableCompress": true + } + }, + "content": { + "title": "Yandex Cloud", + "text": "YDB отвечает за слой хранения для сетевых дисков [Yandex Cloud](https://cloud.yandex.ru), используется в качестве СУБД для хранения данных и метаданных облачной инфраструктуры и сервисов платформы, а также в качестве базы данных для облачного Control Plane.\n\nИнфраструктурным и платформенным сервисам Yandex Cloud необходима высокая доступность и масштабируемость, поэтому платформа выбрала YDB в качестве ключевого компонента." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/praktikum.jpg", + "disableCompress": true + } + }, + "content": { + "title": "Практикум", + "text": "[Практикум](https://practicum.yandex.ru/) - это онлайн-ориентированная образовательная платформа. Она использует YDB в качестве гибкого хранилища состояний для своих микросервисов.\n\nНативная поддержка многоарендности в YDB позволяет им избежать создания и управления выделенными базами данных для каждого компонента сервиса." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/market.png", + "disableCompress": true + } + }, + "content": { + "title": "Яндекс Маркет", + "text": "[Яндекс Маркет](https://market.yandex.ru) - один из крупнейших сервисов электронной коммерции в СНГ. Многие ключевые функции сервиса, такие как корзина, скидки, и оформление заказа, используют YDB для хранения своего состояния.\n\nВыбор YDB в качестве базы данных позволил Яндекс Маркету выдержать стократное увеличение нагрузки на корзину при соблюдении строгих гарантий времени отклика." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/jaeger.png", + "disableCompress": true + } + }, + "content": { + "title": "Auto.ru", + "text": "[Auto.ru](https://auto.ru) снизила потребление CPU для трассировочной базы данных [Jaeger](https://www.jaegertracing.io/) в три раза после перехода на YDB, что позволило записывать 500 000 трассировок в секунду без семплирования.\n\nУспешная реализация YDB в качестве хранилища трассировок доказала применимость и ключевые свойства, такие как масштабируемость, отказоустойчивость и строгая согласованность. В результате Auto.ru выбрала YDB в качестве реляционной базы данных для некоторых своих микросервисов." + }, + "fullScreen": false, + "border": true + }, + { + "type": "layout-item", + "media": { + "image": { + "src": "https://storage.yandexcloud.net/ydb-site-assets/clients/alice-new-speakers.png", + "disableCompress": "true\"" + } + }, + "content": { + "title": "Алиса", + "text": "[Алиса](https://yandex.ru/alice) - это голосовой помощник и экосистема умного дома. После перехода на YDB команда Алисы решила проблемы синхронизации между дата‑центрами, простоев при переключении основных серверов, снизила нагрузку на команду DevOps, увеличила объём хранимых данных до сотен терабайт и нагрузку до сотен тысяч запросов в секунду.\n\nПереход на YDB позволил отказаться от ручного шардинга данных и добиться строгой согласованности в кросс-датацентровом кластере. Сейчас команда Алисы использует YDB как реляционную базу данных и как базу для хранения логов и трейсов." + }, + "fullScreen": false, + "border": true + } + ] + }, + { + "type": "slider-block", + "animated": false, + "anchor": { + "url": "scenarios", + "text": "scenarios" + }, + "title": { + "text": "В каких типовых сценариях стоит использовать YDB?", + "textSize": "m" + }, + "children": [ + { + "type": "basic-card", + "title": "Работа с внезапным ростом нагрузки", + "text": "Эластичность YDB позволяет быстро изменять количество ресурсов, выделенных базе данных, чтобы обеспечить необходимую пропускную способность в соответствии с нагрузкой. Вы можете легко увеличить или уменьшить количество вычислительных ресурсов в зависимости от предстоящих нагрузок, например, на «Чёрную пятницу» или для маркетинговых кампаний." + }, + { + "type": "basic-card", + "title": "Хранение Observability данных", + "text": "[Колоночные таблицы YDB](/docs/ru/concepts/column-table) отлично подходят для хранения логов и метрик с простым доступом к ним через SQL интерфейс. Также, низкое потребление вычислительных ресурсов и масштабируемость YDB делают запись [Jaeger трейсов](https://www.jaegertracing.io/) выгодной по себестоимости и лёгкой в использовании." + }, + { + "type": "basic-card", + "title": "Документоориентированная СУБД", + "text": "Не смотря на строгую систему типов данных YDB, поддержка [типа данных JSON и связанных с ним функций](/docs/ru/yql/reference/builtins/json), расширяет возможности YDB в роли системы хранения неструктурированных документов." + }, + { + "type": "basic-card", + "title": "Кеш с SQL-интерфейсом", + "text": "Быстрый отклик и масштабируемость пропускной способности позволяют использовать YDB одновременно в качестве онлайн-базы данных и предварительно посчитанного кеша. Возможности SQL значительно повышают удобство использования и позволяют проводить оперативную аналитику данных в кеше. Например, сайты туроператоров и агрегаторов путешествий могут использовать базу данных для кеширования результатов поиска авиабилетов или туров, а также для пересчёта цен и проверки сезонной доступности." + }, + { + "type": "basic-card", + "title": "Централизованная система учёта запасов", + "text": "YDB обеспечивает строгую целостность транзакций. Это позволяет предоставлять консистентные данные о запасах на всех складах и торговых объектах, и делает YDB подходящим решением для электронной коммерции, приложений складской или транспортной логистики." + }, + { + "type": "basic-card", + "title": "Система хранения данных для Internet of Things (IoT) экосистемы", + "text": "Поддержка автоматического шардирования YDB позволяет обрабатывать потоки данных от большого количества устройств — профиль нагрузки, который встречается в проектах интернета вещей." + } + ] + }, + { + "type": "media-block", + "animated": false, + "direction": "content-media", + "title": "Можете вкратце объяснить, что такое YDB, в видеоформате?", + "description": "Конечно, смотрите →", + "anchor": { + "url": "video", + "text": "Video" + }, + "largeMedia": true, + "media": { + "youtube": "https://youtu.be/QVmhR__wAJg" + } + }, + { + "type": "banner-block", + "animated": false, + "title": "Учебный курс по YDB от участника сообщества пользователей", + "subtitle": "_Сторонняя разработка - Contribution_\n\nНачальный [учебный курс по YDB](https://stepik.org/course/186264/promo), разработанный одним из наших пользователей - Владом Бурмистровым, позволяет ознакомиться с ключевыми свойствами, возможностями и архитектурой YDB, а также научиться основным приемам по работе с YDB.", + "color": "#CCE7FF", + "image": "https://storage.yandexcloud.net/ydb-site-assets/careers/img_4.png", + "button": { + "text": "Описание и программа курса", + "theme": "raised", + "url": "https://stepik.org/course/186264/promo" + } + }, + { + "type": "tabs-block", + "title": { + "text": "Как начать?" + }, + "anchor": { + "url": "howtostart", + "text": "Как начать?" + }, + "items": [ + { + "tabName": "Docker", + "title": "Docker", + "text": " Создайте рабочий каталог и запустите локальный контейнер YDB из этого каталога:\n```bash mkdir ydb-local && cd ydb-local \ndocker run -d --rm --name ydb-local -h localhost \\\n--platform linux/amd64 \\\n-p 2135:2135 -p 2136:2136 -p 8765:8765 \\\n-v $(pwd)/ydb_certs:/ydb_certs -v $(pwd)/ydb_data:/ydb_data \\\n-e GRPC_TLS_PORT=2135 -e GRPC_PORT=2136 -e MON_PORT=8765 \\\nydbplatform/local-ydb:latest\n```\nПерейдите в раздел [«Быстрый старт»](/docs/ru/quickstart) в документации YDB, чтобы получить дополнительную информацию. " + }, + { + "tabName": "Minikube", + "title": "Minikube", + "text": " Установите Kubernetes CLI [kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl) и менеджер пакетов [Helm 3](https://helm.sh/docs/intro/install/).\nУстановите и запустите [Minikube](https://kubernetes.io/ru/docs/tasks/tools/install-minikube/).\nСклонируйте репозиторий с [YDB Kubernetes Operator](https://github.com/ydb-platform/ydb-kubernetes-operator).\n```\ngit clone https://github.com/ydb-platform/ydb-kubernetes-operator && cd ydb-kubernetes-operator\n```\nУстановите контроллер YDB на кластер.\n```\nhelm upgrade --install ydb-operator deploy/ydb-operator --set metrics.enabled=false\n```\nПримените манифест для создания кластера YDB.\n```\nkubectl apply -f samples/minikube/storage.yaml\n```\nДождитесь, пока `kubectl get storages.ydb.tech` не станет `Ready`.\nПримените манифест для создания базы данных.\n```\nkubectl apply -f samples/minikube/database.yaml\n```\nДождитесь, пока `kubectl get databases.ydb.tech` не станет `Ready`.\n\nПосле обработки манифеста будет создан объект StatefulSet, описывающий набор динамических узлов. Созданная база данных будет доступна изнутри кластера Kubernetes по DNS имени `database-minikube-sample` на порту 2135.\n\nПерейдите в раздел [«Быстрый старт»](/docs/ru/quickstart) в документации YDB, чтобы получить дополнительную информацию. " + }, + { + "tabName": "Установка вручную", + "title": "Установка вручную (только для Linux x86_64)", + "text": " Создайте рабочий каталог, запустите скрипт установки из него, а затем запустите одноузловую базу данных YDB с включенным режимом работы в оперативной памяти:\n``` mkdir ydb-local && cd ydb-local\ncurl https://install.ydb.tech | bash\n./start.sh ram\n```\nПерейдите в раздел [«Быстрый старт»](/docs/ru/quickstart) в документации YDB, чтобы получить дополнительную информацию. " + } + ] + }, + { + "type": "icons-block", + "size": "s", + "title": "Как оставаться на связи?", + "items": [ + { + "url": "https://github.com/ydb-platform/ydb", + "text": "GitHub", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/git.svg" + }, + { + "url": "https://t.me/ydb_ru", + "text": "Telegram", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/telegram.svg" + }, + { + "url": "https://habr.com/ru/companies/ydb/articles/", + "text": "Habr", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/habr.svg" + }, + { + "url": "https://blog.ydb.tech", + "text": "Medium", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/medium.svg" + }, + { + "url": "https://twitter.com/YDBPlatform", + "text": "Twitter", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/twitter.svg" + }, + { + "url": "https://www.linkedin.com/company/ydb-platform/", + "text": "LinkedIn", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/linkedin.svg" + }, + { + "url": "https://www.youtube.com/c/YDBPlatform", + "text": "YouTube", + "src": "https://storage.yandexcloud.net/ydb-site-assets/community/youtube.svg" + } + ] + } + ] +} diff --git a/playground/src/pages/pc/example-2/navigation.json b/playground/src/pages/pc/example-2/navigation.json new file mode 100644 index 000000000..8df0e9ccc --- /dev/null +++ b/playground/src/pages/pc/example-2/navigation.json @@ -0,0 +1,48 @@ +{ + "logo": { + "text": "", + "icon": "https://storage.yandexcloud.net/ydb-site-assets/ydb_icon.svg" + }, + "header": { + "leftItems": [ + { + "type": "link", + "text": "Документация", + "url": "/../docs/ru", + "target": "_self" + }, + { + "type": "link", + "text": "Команда", + "url": "/careers/" + }, + { + "type": "link", + "text": "Студентам", + "url": "/students/" + }, + { + "type": "link", + "text": "Поддержка", + "url": "/support/" + }, + { + "type": "link", + "text": "Блог", + "url": "/blog/" + } + ], + "rightItems": [ + { + "type": "github-button", + "text": "Star", + "label": "Star ydb-platform/ydb on GitHub", + "url": "https://github.com/ydb-platform/ydb" + } + ] + }, + "meta": { + "title": "", + "description": "" + } +} diff --git a/playground/src/pages/pc/example-2/styles.scss b/playground/src/pages/pc/example-2/styles.scss new file mode 100644 index 000000000..158d94216 --- /dev/null +++ b/playground/src/pages/pc/example-2/styles.scss @@ -0,0 +1,116 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); + +.g-root_theme_light { + --g-border-radius-xs: 0px; + --g-border-radius-s: 0px; + --g-border-radius-m: 0px; + --g-border-radius-l: 0px; + --g-border-radius-xl: 0px; + + --g-font-family-sans: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + --g-font-family-monospace: 'Roboto Mono', 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', + 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', 'Courier', monospace; + + --g-color-private-brand-50: rgba(203, 255, 92, 0.1); + --g-color-private-brand-100: rgba(203, 255, 92, 0.15); + --g-color-private-brand-150: rgba(203, 255, 92, 0.2); + --g-color-private-brand-200: rgba(203, 255, 92, 0.3); + --g-color-private-brand-250: rgba(203, 255, 92, 0.4); + --g-color-private-brand-300: rgba(203, 255, 92, 0.5); + --g-color-private-brand-350: rgba(203, 255, 92, 0.6); + --g-color-private-brand-400: rgba(203, 255, 92, 0.7); + --g-color-private-brand-450: rgba(203, 255, 92, 0.8); + --g-color-private-brand-500: rgba(203, 255, 92, 0.9); + --g-color-private-brand-550-solid: rgb(203, 255, 92); + --g-color-private-brand-1000-solid: rgb(59, 63, 43); + --g-color-private-brand-950-solid: rgb(68, 74, 46); + --g-color-private-brand-900-solid: rgb(85, 97, 51); + --g-color-private-brand-850-solid: rgb(102, 119, 57); + --g-color-private-brand-800-solid: rgb(119, 142, 63); + --g-color-private-brand-750-solid: rgb(135, 165, 69); + --g-color-private-brand-700-solid: rgb(152, 187, 75); + --g-color-private-brand-650-solid: rgb(169, 210, 80); + --g-color-private-brand-600-solid: rgb(186, 232, 86); + --g-color-private-brand-500-solid: rgb(208, 255, 108); + --g-color-private-brand-450-solid: rgb(213, 255, 125); + --g-color-private-brand-400-solid: rgb(219, 255, 141); + --g-color-private-brand-350-solid: rgb(224, 255, 157); + --g-color-private-brand-300-solid: rgb(229, 255, 174); + --g-color-private-brand-250-solid: rgb(234, 255, 190); + --g-color-private-brand-200-solid: rgb(239, 255, 206); + --g-color-private-brand-150-solid: rgb(245, 255, 222); + --g-color-private-brand-100-solid: rgb(247, 255, 231); + --g-color-private-brand-50-solid: rgb(250, 255, 239); + + --g-color-base-brand: rgb(203, 255, 92); + --g-color-base-background: rgb(255, 255, 255); + --g-color-base-brand-hover: var(--g-color-private-brand-600-solid); + --g-color-base-selection: var(--g-color-private-brand-200); + --g-color-base-selection-hover: var(--g-color-private-brand-300); + --g-color-line-brand: var(--g-color-private-brand-600-solid); + --g-color-text-brand: var(--g-color-private-brand-700-solid); + --g-color-text-brand-heavy: var(--g-color-private-brand-700-solid); + --g-color-text-brand-contrast: rgba(0, 0, 0, 0.85); + --g-color-text-link: var(--g-color-private-brand-600-solid); + --g-color-text-link-hover: var(--g-color-private-brand-800-solid); + --g-color-text-link-visited: var(--g-color-private-purple-550-solid); + --g-color-text-link-visited-hover: var(--g-color-private-purple-800-solid); +} + +.g-root_theme_dark { + --g-border-radius-xs: 0px; + --g-border-radius-s: 0px; + --g-border-radius-m: 0px; + --g-border-radius-l: 0px; + --g-border-radius-xl: 0px; + + --g-font-family-sans: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + --g-font-family-monospace: 'Roboto Mono', 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', + 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', 'Courier', monospace; + + --g-color-private-brand-50: rgba(203, 255, 92, 0.1); + --g-color-private-brand-100: rgba(203, 255, 92, 0.15); + --g-color-private-brand-150: rgba(203, 255, 92, 0.2); + --g-color-private-brand-200: rgba(203, 255, 92, 0.3); + --g-color-private-brand-250: rgba(203, 255, 92, 0.4); + --g-color-private-brand-300: rgba(203, 255, 92, 0.5); + --g-color-private-brand-350: rgba(203, 255, 92, 0.6); + --g-color-private-brand-400: rgba(203, 255, 92, 0.7); + --g-color-private-brand-450: rgba(203, 255, 92, 0.8); + --g-color-private-brand-500: rgba(203, 255, 92, 0.9); + --g-color-private-brand-550-solid: rgb(203, 255, 92); + --g-color-private-brand-1000-solid: rgb(247, 255, 231); + --g-color-private-brand-950-solid: rgb(245, 255, 222); + --g-color-private-brand-900-solid: rgb(239, 255, 206); + --g-color-private-brand-850-solid: rgb(234, 255, 190); + --g-color-private-brand-800-solid: rgb(229, 255, 174); + --g-color-private-brand-750-solid: rgb(224, 255, 157); + --g-color-private-brand-700-solid: rgb(219, 255, 141); + --g-color-private-brand-650-solid: rgb(213, 255, 125); + --g-color-private-brand-600-solid: rgb(208, 255, 108); + --g-color-private-brand-500-solid: rgb(186, 232, 86); + --g-color-private-brand-450-solid: rgb(169, 210, 80); + --g-color-private-brand-400-solid: rgb(152, 187, 75); + --g-color-private-brand-350-solid: rgb(135, 165, 69); + --g-color-private-brand-300-solid: rgb(119, 142, 63); + --g-color-private-brand-250-solid: rgb(102, 119, 57); + --g-color-private-brand-200-solid: rgb(85, 97, 51); + --g-color-private-brand-150-solid: rgb(68, 74, 46); + --g-color-private-brand-100-solid: rgb(59, 63, 43); + --g-color-private-brand-50-solid: rgb(51, 52, 40); + + --g-color-base-brand: rgb(203, 255, 92); + --g-color-base-background: rgb(34, 29, 34); + --g-color-base-brand-hover: var(--g-color-private-brand-650-solid); + --g-color-base-selection: var(--g-color-private-brand-150); + --g-color-base-selection-hover: var(--g-color-private-brand-200); + --g-color-line-brand: var(--g-color-private-brand-600-solid); + --g-color-text-brand: var(--g-color-private-brand-600-solid); + --g-color-text-brand-heavy: var(--g-color-private-brand-700-solid); + --g-color-text-brand-contrast: rgba(0, 0, 0, 0.9); + --g-color-text-link: var(--g-color-private-brand-550-solid); + --g-color-text-link-hover: var(--g-color-private-brand-700-solid); + --g-color-text-link-visited: var(--g-color-private-purple-700-solid); + --g-color-text-link-visited-hover: var(--g-color-private-purple-850-solid); +} diff --git a/playground/src/pages/pc/pc.tsx b/playground/src/pages/pc/pc.tsx new file mode 100644 index 000000000..2d46b8b2b --- /dev/null +++ b/playground/src/pages/pc/pc.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import {NavigationData, PageConstructor, PageConstructorProvider} from '../../../../src'; + +// Example 1 +import contentExample1 from './example-1/content.json'; + +// Example 2 +import contentExample2 from './example-2/content.json'; +import navigationExample2 from './example-2/navigation.json'; + +interface PCPageProps { + id?: string | null; +} + +export default function PCPage({id}: PCPageProps) { + const pageId = id || '1'; + + const page = React.useMemo(() => { + switch (Number(pageId)) { + case 2: + import('./example-2/styles.scss'); + return { + content: contentExample2, + navigation: navigationExample2, + }; + default: + case 1: + return { + content: contentExample1, + navigation: undefined, + }; + } + }, [pageId]); + + return ( +
-
- {React.Children.map(children, (child, index) => (
-
-
+
+
+ {React.Children.map(children, (child, index) => (
+ {child}
+
+ ))}
+
+
+
-
-
);
};
diff --git a/src/blocks/ExtendedFeatures/index.ts b/src/blocks/ExtendedFeatures/index.ts
new file mode 100644
index 000000000..07db00ba6
--- /dev/null
+++ b/src/blocks/ExtendedFeatures/index.ts
@@ -0,0 +1,82 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import ExtendedFeaturesBlock from './ExtendedFeatures';
+import {ExtendedFeaturesBlock as ExtendedFeaturesBlockSchema} from './schema';
+
+const ExtendedFeaturesBlockConfig = {
+ component: ExtendedFeaturesBlock,
+ schema: {
+ name: 'Extended Features Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(
+ ExtendedFeaturesBlockSchema['extended-features-block'] as unknown as JSONSchemaType<{}>,
+ ),
+ default: {
+ type: 'extended-features-block',
+ title: {
+ text: 'Lorem ipsum dolor sit amet',
+ textSize: 'm',
+ },
+ description:
+ 'Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.',
+ items: [
+ {
+ title: 'Sed do eiusmod tempor incididunt',
+ text: 'Ut enim ad minim veniam quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ additionalInfo:
+ 'Duis aute irure dolor in reprehenderit n voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+ },
+ {
+ title: 'Sed do eiusmod tempor',
+ text: 'Ut enim ad minim veniam quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ buttons: [
+ {
+ text: 'Button',
+ theme: 'action',
+ url: 'https://example.com',
+ },
+ {
+ text: 'Button',
+ theme: 'outlined',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ {
+ title: 'Sed do eiusmod tempor incididunt',
+ text: 'Ut enim ad minim veniam quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ links: [
+ {
+ text: 'Go',
+ url: '#',
+ arrow: true,
+ theme: 'normal',
+ },
+ ],
+ },
+ {
+ title: 'Sed do eiusmod tempor incididunt',
+ text: 'Ut enim ad minim veniam quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+ list: [
+ {
+ title: 'Lorem ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ ],
+ },
+ ],
+ },
+ },
+};
+
+export default ExtendedFeaturesBlockConfig;
diff --git a/src/blocks/ExtendedFeatures/schema.ts b/src/blocks/ExtendedFeatures/schema.ts
index a7705dfc1..eae9ea2e5 100644
--- a/src/blocks/ExtendedFeatures/schema.ts
+++ b/src/blocks/ExtendedFeatures/schema.ts
@@ -20,6 +20,7 @@ export const ExtendedFeaturesItem = {
text: {
type: 'string',
contentType: 'yfm',
+ inputType: 'textarea',
},
label: {
type: 'string',
diff --git a/src/blocks/FilterBlock/FilterBlock.tsx b/src/blocks/FilterBlock/FilterBlock.tsx
index 2f6439223..6563b8a0a 100644
--- a/src/blocks/FilterBlock/FilterBlock.tsx
+++ b/src/blocks/FilterBlock/FilterBlock.tsx
@@ -4,7 +4,7 @@ import {CardLayoutBlock} from '..';
import {AnimateBlock, Title} from '../../components';
import ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';
import {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';
-import {Col, Row} from '../../grid';
+import {Col, Grid, Row} from '../../grid';
import {FilterBlockProps, FilterItem} from '../../models';
import {block, getBlockKey} from '../../utils';
@@ -19,7 +19,7 @@ const FilterBlock: React.FC = ({
tags,
tagButtonSize,
allTag,
- items,
+ items = [],
colSizes,
centered,
animated,
@@ -53,35 +53,36 @@ const FilterBlock: React.FC = ({
return (
- {title && (
-
-
+ {title && (
+
+
+ )}
+
+
+ {cards.map((card, index) => {
+ const key = getBlockKey(card, index);
+ return
- )}
-
-
- {cards.map((card, index) => {
- const key = getBlockKey(card, index);
-
- return
-
+
);
};
diff --git a/src/blocks/FilterBlock/index.ts b/src/blocks/FilterBlock/index.ts
new file mode 100644
index 000000000..525887680
--- /dev/null
+++ b/src/blocks/FilterBlock/index.ts
@@ -0,0 +1,100 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import FilterBlock from './FilterBlock';
+import {FilterProps} from './schema';
+
+const FilterBlockConfig = {
+ component: FilterBlock,
+ schema: {
+ name: 'Filter Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(FilterProps as unknown as JSONSchemaType<{}>),
+ default: {
+ allTag: true,
+ description:
+ 'Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.',
+ items: [
+ {
+ card: {
+ content: {
+ title: 'Layout Item 1',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['one'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 2',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['two'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 3',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['three'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 4',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['one'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 5',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['two'],
+ },
+ {
+ card: {
+ content: {
+ title: 'Layout Item 6',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ type: 'layout-item',
+ },
+ tags: ['three'],
+ },
+ ],
+ tags: [
+ {
+ id: 'one',
+ label: 'First very long label',
+ },
+ {
+ id: 'two',
+ label: 'Second very long label',
+ },
+ {
+ id: 'three',
+ label: 'Third very long label',
+ },
+ ],
+ title: 'Card Layout',
+ type: 'filter-block',
+ },
+ },
+};
+
+export default FilterBlockConfig;
diff --git a/src/blocks/Form/index.ts b/src/blocks/Form/index.ts
new file mode 100644
index 000000000..12a54bb5b
--- /dev/null
+++ b/src/blocks/Form/index.ts
@@ -0,0 +1,21 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import FormBlock from './Form';
+import {FormBlock as FormBlockSchema} from './schema';
+
+const FormBlockConfig = {
+ component: FormBlock,
+ schema: {
+ name: 'Form Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(FormBlockSchema['form-block'] as unknown as JSONSchemaType<{}>),
+ default: {
+ title: 'Form Block',
+ formData: {},
+ },
+ },
+};
+
+export default FormBlockConfig;
diff --git a/src/blocks/Header/dynamic-form.ts b/src/blocks/Header/dynamic-form.ts
new file mode 100644
index 000000000..c76efcdc2
--- /dev/null
+++ b/src/blocks/Header/dynamic-form.ts
@@ -0,0 +1,732 @@
+import {BlockConfig, ConfigInput} from '../../form-generator';
+import {imageInputs} from '../../components/Image/dynamic-form';
+import {Theme} from '../../models';
+
+const mediaInputs: ConfigInput[] = [
+ {
+ type: 'oneOf',
+ name: '',
+ key: 'mediaType',
+ title: 'Media Type',
+ options: [
+ {
+ title: 'Empty',
+ value: 'emptyMedia',
+ properties: [
+ {
+ type: 'text',
+ name: 'color',
+ title: 'Color',
+ },
+ ],
+ },
+ {
+ title: 'Image',
+ value: 'image',
+ properties: [
+ {
+ type: 'oneOf',
+ name: 'image',
+ key: 'imagesCount',
+ title: 'Images Count',
+ options: [
+ {title: 'Single Image', value: 'singleImage', properties: imageInputs},
+ {
+ title: 'Multiple Images',
+ value: 'multipleImages',
+ properties: [
+ {
+ type: 'array',
+ name: '',
+ arrayType: 'object',
+ title: 'Images',
+ properties: imageInputs,
+ buttonText: 'Add Image',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: 'Youtube',
+ value: 'youtube',
+ properties: [
+ {
+ type: 'text',
+ name: 'youtube',
+ title: 'Youtube',
+ },
+ {
+ type: 'text',
+ name: 'previewImg',
+ title: 'Preview Image',
+ },
+ ],
+ },
+ {
+ title: 'Datalens',
+ value: 'datalens',
+ properties: [],
+ },
+ {
+ title: 'Iframe',
+ value: 'iframe',
+ properties: [],
+ },
+ {
+ title: 'Video',
+ value: 'video',
+ properties: [],
+ },
+ ],
+ },
+ {
+ type: 'boolean',
+ name: 'disableImageSliderForArrayInput',
+ title: 'Disable Image Slider For Array Input',
+ },
+ {
+ type: 'boolean',
+ name: 'parallax',
+ title: 'Parallax',
+ },
+ {
+ type: 'number',
+ name: 'height',
+ title: 'Height',
+ },
+ {
+ type: 'boolean',
+ name: 'fullscreen',
+ title: 'Fullscreen',
+ },
+ {
+ type: 'number',
+ name: 'ratio',
+ title: 'Ratio',
+ },
+ {
+ type: 'boolean',
+ name: 'margins',
+ title: 'Margins',
+ },
+];
+
+const headerBackgroundInputs: ConfigInput[] = [
+ {
+ type: 'boolean',
+ name: 'fullWidthMedia',
+ title: 'Full width Media',
+ },
+ {
+ type: 'boolean',
+ name: 'fullWidth',
+ title: 'Full width',
+ },
+];
+
+const backgroundProperty = (properties: ConfigInput[]): ConfigInput => ({
+ type: 'oneOf',
+ name: 'background',
+ title: 'Background',
+ options: [
+ {
+ value: 'noThemes',
+ title: 'No Themes',
+ properties: properties,
+ },
+ {
+ value: 'withThemes',
+ title: 'With Themes',
+ properties: Object.values(Theme).map((theme) => ({
+ type: 'object',
+ name: theme,
+ title: theme,
+ properties: properties,
+ })),
+ },
+ ],
+});
+
+export const blockConfig: BlockConfig = {
+ name: 'Header Block',
+ inputs: [
+ {
+ type: 'text',
+ name: 'title',
+ title: 'Title',
+ },
+ {
+ type: 'text',
+ name: 'overtitle',
+ title: 'Overtitle',
+ },
+ {
+ type: 'textarea',
+ name: 'description',
+ title: 'Description',
+ },
+ backgroundProperty([...mediaInputs, ...headerBackgroundInputs]),
+ /* {
+ type: 'text',
+ name: 'when',
+ title: 'when',
+ },
+ {
+ type: 'object',
+ name: 'anchor',
+ title: 'anchor',
+ properties: [
+ {
+ type: 'text',
+ name: 'text',
+ title: 'text',
+ },
+ {
+ type: 'text',
+ name: 'url',
+ title: 'url',
+ },
+ {
+ type: 'text',
+ name: 'urlTitle',
+ title: 'urlTitle',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'visible',
+ title: 'visible',
+ enum: [
+ {
+ content: 'sm',
+ value: 'sm',
+ },
+ {
+ content: 'md',
+ value: 'md',
+ },
+ {
+ content: 'lg',
+ value: 'lg',
+ },
+ {
+ content: 'xl',
+ value: 'xl',
+ },
+ {
+ content: 'all',
+ value: 'all',
+ },
+ ],
+ },
+ {
+ type: 'text',
+ name: 'context',
+ title: 'context',
+ },
+ {
+ type: 'object',
+ name: 'indent',
+ title: 'indent',
+ properties: [],
+ },
+ {
+ type: 'select',
+ name: 'width',
+ title: 'width',
+ enum: [
+ {
+ content: 's',
+ value: 's',
+ },
+ {
+ content: 'm',
+ value: 'm',
+ },
+ {
+ content: 'l',
+ value: 'l',
+ },
+ ],
+ },
+ {
+ type: 'array',
+ name: 'buttons',
+ title: 'buttons',
+ properties: [
+ {
+ type: 'text',
+ name: 'when',
+ title: 'when',
+ },
+ {
+ type: 'text',
+ name: 'text',
+ title: 'text',
+ },
+ {
+ type: 'text',
+ name: 'url',
+ title: 'url',
+ },
+ {
+ type: 'text',
+ name: 'urlTitle',
+ title: 'urlTitle',
+ },
+ {
+ type: 'select',
+ name: 'size',
+ title: 'size',
+ enum: [
+ {
+ content: 'xs',
+ value: 'xs',
+ },
+ {
+ content: 'ns',
+ value: 'ns',
+ },
+ {
+ content: 's',
+ value: 's',
+ },
+ {
+ content: 'n',
+ value: 'n',
+ },
+ {
+ content: 'm',
+ value: 'm',
+ },
+ {
+ content: 'l',
+ value: 'l',
+ },
+ {
+ content: 'xl',
+ value: 'xl',
+ },
+ {
+ content: 'head',
+ value: 'head',
+ },
+ {
+ content: 'promo',
+ value: 'promo',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'theme',
+ title: 'theme',
+ enum: [
+ {
+ content: 'normal',
+ value: 'normal',
+ },
+ {
+ content: 'action',
+ value: 'action',
+ },
+ {
+ content: 'outlined',
+ value: 'outlined',
+ },
+ {
+ content: 'outlined-info',
+ value: 'outlined-info',
+ },
+ {
+ content: 'outlined-danger',
+ value: 'outlined-danger',
+ },
+ {
+ content: 'raised',
+ value: 'raised',
+ },
+ {
+ content: 'flat',
+ value: 'flat',
+ },
+ {
+ content: 'flat-info',
+ value: 'flat-info',
+ },
+ {
+ content: 'flat-danger',
+ value: 'flat-danger',
+ },
+ {
+ content: 'flat-secondary',
+ value: 'flat-secondary',
+ },
+ {
+ content: 'clear',
+ value: 'clear',
+ },
+ {
+ content: 'normal-contrast',
+ value: 'normal-contrast',
+ },
+ {
+ content: 'outlined-contrast',
+ value: 'outlined-contrast',
+ },
+ {
+ content: 'flat-contrast',
+ value: 'flat-contrast',
+ },
+ {
+ content: 'link',
+ value: 'link',
+ },
+ {
+ content: 'pseudo',
+ value: 'pseudo',
+ },
+ {
+ content: 'pseudo-special',
+ value: 'pseudo-special',
+ },
+ {
+ content: 'websearch',
+ value: 'websearch',
+ },
+ {
+ content: 'normal-dark',
+ value: 'normal-dark',
+ },
+ {
+ content: 'normal-special',
+ value: 'normal-special',
+ },
+ {
+ content: 'accent',
+ value: 'accent',
+ },
+ {
+ content: 'dark-grey',
+ value: 'dark-grey',
+ },
+ {
+ content: 'app-store',
+ value: 'app-store',
+ },
+ {
+ content: 'google-play',
+ value: 'google-play',
+ },
+ {
+ content: 'scale',
+ value: 'scale',
+ },
+ {
+ content: 'github',
+ value: 'github',
+ },
+ {
+ content: 'monochrome',
+ value: 'monochrome',
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'img',
+ title: 'img',
+ options: [
+ {
+ value: 'url',
+ title: 'url',
+ properties: [],
+ },
+ {
+ value: 'options',
+ title: 'options',
+ properties: [],
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'analyticsEvents',
+ title: 'analyticsEvents',
+ options: [
+ {
+ value: 'single',
+ title: 'single',
+ properties: [
+ {
+ type: 'text',
+ name: 'additionalProperties',
+ title: 'additionalProperties',
+ },
+ ],
+ },
+ {
+ value: 'list',
+ title: 'list',
+ properties: [
+ {
+ type: 'object',
+ name: 'items',
+ title: 'items',
+ properties: [
+ {
+ type: 'text',
+ name: 'name',
+ title: 'name',
+ },
+ {
+ type: 'text',
+ name: 'type',
+ title: 'type',
+ },
+ {
+ type: 'object',
+ name: 'counters',
+ title: 'counters',
+ properties: [],
+ },
+ {
+ type: 'text',
+ name: 'context',
+ title: 'context',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'target',
+ title: 'target',
+ enum: [
+ {
+ content: '_self',
+ value: '_self',
+ },
+ {
+ content: '_blank',
+ value: '_blank',
+ },
+ {
+ content: '_parent',
+ value: '_parent',
+ },
+ {
+ content: '_top',
+ value: '_top',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'width',
+ title: 'width',
+ enum: [
+ {
+ content: 'auto',
+ value: 'auto',
+ },
+ {
+ content: 'max',
+ value: 'max',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'offset',
+ title: 'offset',
+ enum: [
+ {
+ content: 'default',
+ value: 'default',
+ },
+ {
+ content: 'large',
+ value: 'large',
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'image',
+ title: 'image',
+ options: [
+ {
+ value: 'no theme',
+ title: 'no theme',
+ properties: [],
+ },
+ {
+ value: 'themes',
+ title: 'themes',
+ properties: [],
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'video',
+ title: 'video',
+ options: [
+ {
+ value: 'no theme',
+ title: 'no theme',
+ properties: [],
+ },
+ {
+ value: 'themes',
+ title: 'themes',
+ properties: [],
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'mediaView',
+ title: 'mediaView',
+ enum: [
+ {
+ content: 'fit',
+ value: 'fit',
+ },
+ {
+ content: 'full',
+ value: 'full',
+ },
+ ],
+ },
+ {
+ type: 'object',
+ name: 'backLink',
+ title: 'backLink',
+ properties: [
+ {
+ type: 'text',
+ name: 'url',
+ title: 'url',
+ },
+ {
+ type: 'text',
+ name: 'title',
+ title: 'title',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'imageSize',
+ title: 'imageSize',
+ enum: [
+ {
+ content: 's',
+ value: 's',
+ },
+ {
+ content: 'm',
+ value: 'm',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'verticalOffset',
+ title: 'verticalOffset',
+ enum: [
+ {
+ content: '0',
+ value: '0',
+ },
+ {
+ content: 's',
+ value: 's',
+ },
+ {
+ content: 'm',
+ value: 'm',
+ },
+ {
+ content: 'l',
+ value: 'l',
+ },
+ {
+ content: 'xl',
+ value: 'xl',
+ },
+ ],
+ },
+
+ {
+ type: 'select',
+ name: 'theme',
+ title: 'theme',
+ enum: [
+ {
+ content: 'default',
+ value: 'default',
+ },
+ {
+ content: 'dark',
+ value: 'dark',
+ },
+ ],
+ },
+ {
+ type: 'object',
+ name: 'breadcrumbs',
+ title: 'breadcrumbs',
+ properties: [
+ {
+ type: 'array',
+ name: 'items',
+ title: 'items',
+ properties: [
+ {
+ type: 'text',
+ name: 'url',
+ title: 'url',
+ },
+ {
+ type: 'text',
+ name: 'text',
+ title: 'text',
+ },
+ ],
+ },
+ {
+ type: 'select',
+ name: 'theme',
+ title: 'theme',
+ enum: [
+ {
+ content: 'light',
+ value: 'light',
+ },
+ {
+ content: 'dark',
+ value: 'dark',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'text',
+ name: 'status',
+ title: 'status',
+ },*/
+ ],
+};
diff --git a/src/blocks/Header/index.ts b/src/blocks/Header/index.ts
new file mode 100644
index 000000000..df7b962ad
--- /dev/null
+++ b/src/blocks/Header/index.ts
@@ -0,0 +1,36 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import HeaderBlock from './Header';
+import {HeaderBlock as HeaderBlockSchema} from './schema';
+
+const HeaderBlockConfig = {
+ component: HeaderBlock,
+ schema: {
+ name: 'Header Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(HeaderBlockSchema['header-block'] as unknown as JSONSchemaType<{}>),
+ default: {
+ type: 'header-block',
+ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+ description:
+ 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+ buttons: [
+ {
+ text: 'Button\r',
+ theme: 'action',
+ url: 'https://example.com',
+ },
+ {
+ text: 'Button',
+ theme: 'outlined',
+ url: 'https://example.com',
+ },
+ ],
+ },
+ previewImg: 'https://storage.cloud-preprod.yandex.net/qradle-test/header-block.svg',
+ },
+};
+
+export default HeaderBlockConfig;
diff --git a/src/blocks/HeaderSlider/HeaderSlider.tsx b/src/blocks/HeaderSlider/HeaderSlider.tsx
index 02e0c11d2..c621ae7e4 100644
--- a/src/blocks/HeaderSlider/HeaderSlider.tsx
+++ b/src/blocks/HeaderSlider/HeaderSlider.tsx
@@ -25,15 +25,16 @@ export const HeaderSliderBlock = ({items, arrows, ...props}: HeaderSliderBlockPr
blockClassName={b()}
arrowSize={20}
>
- {items.map((item, index) => (
-
);
diff --git a/src/blocks/HeaderSlider/index.ts b/src/blocks/HeaderSlider/index.ts
new file mode 100644
index 000000000..2d98982e2
--- /dev/null
+++ b/src/blocks/HeaderSlider/index.ts
@@ -0,0 +1,45 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import HeaderSliderBlock from './HeaderSlider';
+import {HeaderSliderBlock as HeaderSliderBlockSchema} from './schema';
+
+const HeaderSliderBlockConfig = {
+ component: HeaderSliderBlock,
+ schema: {
+ name: 'Header Slider Block',
+ group: '@gravity-ui/page-constructor/Card Containers',
+ inputs: generateFromAJV(
+ HeaderSliderBlockSchema['header-slider-block'] as unknown as JSONSchemaType<{}>,
+ ),
+ default: {
+ type: 'header-slider-block',
+ items: [
+ {
+ title: 'Header Slide 1',
+ overtitle: 'Header Slider Block presents',
+ description:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ },
+ {
+ image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_light.png',
+ mediaView: 'fit',
+ title: 'Header Slide 2',
+ overtitle: 'Header Slider Block presents',
+ description:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ width: 'm',
+ buttons: [
+ {
+ text: 'Button',
+ theme: 'action',
+ },
+ ],
+ },
+ ],
+ },
+ },
+};
+
+export default HeaderSliderBlockConfig;
diff --git a/src/blocks/Icons/Icons.scss b/src/blocks/Icons/Icons.scss
index d098159d6..bd0cc7d3e 100644
--- a/src/blocks/Icons/Icons.scss
+++ b/src/blocks/Icons/Icons.scss
@@ -48,6 +48,7 @@ $block: '.#{$ns}icons-block';
@include reset-link-style();
margin: 0 $indentXXXS $indentSM;
}
+
a#{$block}__item {
@include focusable();
border-radius: var(--g-focus-border-radius);
diff --git a/src/blocks/Icons/Icons.tsx b/src/blocks/Icons/Icons.tsx
index e6ce8c667..8d966d4aa 100644
--- a/src/blocks/Icons/Icons.tsx
+++ b/src/blocks/Icons/Icons.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
import {Image, Title} from '../../components';
import {LocationContext} from '../../context/locationContext';
import {useTheme} from '../../context/theme';
+import {Grid} from '../../grid';
import {useAnalytics} from '../../hooks';
import {IconsBlockItemProps, IconsBlockProps} from '../../models';
import {block, getLinkProps, getThemedValue} from '../../utils';
@@ -31,38 +32,41 @@ const Icons = ({title, description, size = 's', colSizes = {all: 12}, items}: Ic
);
return (
-
-
+
+
);
};
diff --git a/src/blocks/Companies/index.ts b/src/blocks/Companies/index.ts
new file mode 100644
index 000000000..e1319489b
--- /dev/null
+++ b/src/blocks/Companies/index.ts
@@ -0,0 +1,24 @@
+import {JSONSchemaType} from 'ajv';
+
+import {BlockData} from '../../constructor-items';
+import {generateFromAJV} from '../../utils/form-generator';
+
+import CompaniesBlock from './Companies';
+import {CompaniesBlock as CompaniesBlockSchema} from './schema';
+
+const CompaniesBlockConfig: BlockData = {
+ component: CompaniesBlock,
+ schema: {
+ name: 'Companies Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(
+ CompaniesBlockSchema['companies-block'] as unknown as JSONSchemaType<{}>,
+ ),
+ default: {
+ title: 'Companies Block',
+ description: 'Here is the list',
+ },
+ },
+};
+
+export default CompaniesBlockConfig;
diff --git a/src/blocks/ContentLayout/ContentLayout.tsx b/src/blocks/ContentLayout/ContentLayout.tsx
index 7706d229a..ba26121d9 100644
--- a/src/blocks/ContentLayout/ContentLayout.tsx
+++ b/src/blocks/ContentLayout/ContentLayout.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import {BackgroundImage, FileLink} from '../../components';
import {MobileContext} from '../../context/mobileContext';
import {useTheme} from '../../context/theme';
-import {Col} from '../../grid';
+import {Col, Grid} from '../../grid';
import {ContentLayoutBlockProps, ContentSize, ContentTextSize} from '../../models';
import {Content} from '../../sub-blocks';
import {block, getThemedValue} from '../../utils';
@@ -51,39 +51,41 @@ export const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {
const themedBackground = getThemedValue(background, globalTheme);
return (
-
+
-
+
-
+
+
);
};
export default ContentLayoutBlock;
diff --git a/src/blocks/ContentLayout/index.ts b/src/blocks/ContentLayout/index.ts
new file mode 100644
index 000000000..7c17d6953
--- /dev/null
+++ b/src/blocks/ContentLayout/index.ts
@@ -0,0 +1,85 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import ContentLayoutBlock from './ContentLayout';
+import {ContentLayoutBlock as ContentLayoutBlockSchema} from './schema';
+
+const ContentLayoutBlockConfig = {
+ component: ContentLayoutBlock,
+ schema: {
+ name: 'Content Layout Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(
+ ContentLayoutBlockSchema['content-layout-block'] as unknown as JSONSchemaType<{}>,
+ ),
+ default: {
+ textContent: {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ additionalInfo:
+ 'Duis aute irure dolor in reprehenderit n voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+ buttons: [
+ {
+ text: 'Button',
+ theme: 'action',
+ url: 'https://example.com',
+ },
+ {
+ text: 'Button',
+ theme: 'outlined',
+ url: 'https://example.com',
+ },
+ ],
+ links: [
+ {
+ url: 'https://example.com',
+ text: 'Link',
+ theme: 'normal',
+ arrow: true,
+ },
+ ],
+ fileContent: [
+ {
+ href: 'https://example.xls',
+ text: 'File xls',
+ },
+ {
+ href: 'https://example.fig',
+ text: 'File PNG, JPG, and SVG format',
+ },
+ {
+ href: 'https://example.pdf',
+ text: 'Pdf file',
+ },
+ {
+ href: 'https://example.zip',
+ text: 'Archive file',
+ },
+ {
+ href: 'https://example.doc',
+ text: 'Microsoft Word document',
+ },
+ {
+ href: 'https://example.ppt',
+ text: 'PPT file',
+ },
+ ],
+ list: [
+ {
+ title: 'Lorem ipsum',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum ipsum',
+ },
+ ],
+ },
+ },
+};
+
+export default ContentLayoutBlockConfig;
diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
index 0d034fa00..094d8b2de 100644
--- a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
+++ b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
@@ -4,7 +4,7 @@ import {AnimateBlock, HTML, Title} from '../../components/';
import Image from '../../components/Image/Image';
import {getMediaImage} from '../../components/Media/Image/utils';
import {useTheme} from '../../context/theme';
-import {Col, Row} from '../../grid';
+import {Col, Grid, Row} from '../../grid';
import {ExtendedFeaturesProps} from '../../models';
import {Content} from '../../sub-blocks';
import {block, getThemedValue} from '../../utils';
@@ -31,69 +31,75 @@ export const ExtendedFeaturesBlock = ({
return (
+
+ )}
+
+
+
-
- )}
-
-
- {items.map(
- ({
- title: itemTitle,
- text,
- list,
- link,
- links,
- label,
- icon,
- buttons,
- additionalInfo,
- }) => {
- const itemLinks = links || [];
+
+
+
+
+
+ {items &&
+ items.map(
+ (
+ {
+ title: itemTitle,
+ text,
+ list,
+ link,
+ links,
+ label,
+ icon,
+ buttons,
+ additionalInfo,
+ },
+ index,
+ ) => {
+ const itemLinks = links || [];
- const iconThemed = icon && getThemedValue(icon, theme);
- const iconData = iconThemed && getMediaImage(iconThemed);
+ const iconThemed = icon && getThemedValue(icon, theme);
+ const iconData = iconThemed && getMediaImage(iconThemed);
- if (link) {
- itemLinks.push(link);
- }
+ if (link) {
+ itemLinks.push(link);
+ }
- return (
-
-
+
-
- )}
-
- {itemTitle &&
- React.createElement(
- itemTitleHeadingTag,
- {
- className: b('item-title'),
- },
-
- {itemTitle}
- {label && (
-
- {label}
-
- )}
- ,
+ return (
+
-
- );
- },
- )}
-
+
)}
-
+ {itemTitle &&
+ React.createElement(
+ itemTitleHeadingTag,
+ {
+ className: b('item-title'),
+ },
+
+ {itemTitle}
+ {label && (
+
+ {label}
+
+ )}
+ ,
+ )}
+
+
+ );
+ },
+ )}
+
-
- ))}
+ {items &&
+ items.map((item, index) => (
+
+
+ ))}
- {(title || description) && (
-
+
- {itemContent}
-
- );
- })}
-
+ {(title || description) && (
+
+
+ {itemContent}
+
+ );
+ })}
+
-
);
diff --git a/src/blocks/Share/index.ts b/src/blocks/Share/index.ts
new file mode 100644
index 000000000..6c458c374
--- /dev/null
+++ b/src/blocks/Share/index.ts
@@ -0,0 +1,21 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import ShareBlock from './Share';
+import {ShareBlock as ShareBlockSchema} from './schema';
+
+const ShareBlockConfig = {
+ component: ShareBlock,
+ schema: {
+ name: 'Share Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(ShareBlockSchema['share-block'] as unknown as JSONSchemaType<{}>),
+ default: {
+ items: ['vk', 'telegram', 'facebook'],
+ title: 'Share Block',
+ },
+ },
+};
+
+export default ShareBlockConfig;
diff --git a/src/blocks/Slider/Slider.tsx b/src/blocks/Slider/Slider.tsx
index eaadacfac..75b94f7a9 100644
--- a/src/blocks/Slider/Slider.tsx
+++ b/src/blocks/Slider/Slider.tsx
@@ -10,10 +10,12 @@ import Anchor from '../../components/Anchor/Anchor';
import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
import OutsideClick from '../../components/OutsideClick/OutsideClick';
import Title from '../../components/Title/Title';
+import ItemWrap from '../../components/editor/ItemWrap/ItemWrap';
import {BREAKPOINTS} from '../../constants';
import {MobileContext} from '../../context/mobileContext';
import {SSRContext} from '../../context/ssrContext';
import {StylesContext} from '../../context/stylesContext/StylesContext';
+import {Grid} from '../../grid';
import useFocus from '../../hooks/useFocus';
import {
ClassNameProps,
@@ -97,14 +99,16 @@ export const SliderBlock = (props: React.PropsWithChildren) => {
const isAutoplayEnabled = autoplaySpeed !== undefined && autoplaySpeed > 0;
const isUserInteractionRef = React.useRef(false);
- const [slidesToShow] = React.useState(
- getSlidesToShowWithDefaults({
- contentLength: childrenCount,
- breakpoints: props.slidesToShow,
- mobileFullscreen: Boolean(
- props.type && Object.values(SliderType).includes(props.type as SliderType),
- ),
- }),
+ const slidesToShow = React.useMemo(
+ () =>
+ getSlidesToShowWithDefaults({
+ contentLength: childrenCount,
+ breakpoints: props.slidesToShow,
+ mobileFullscreen: Boolean(
+ props.type && Object.values(SliderType).includes(props.type as SliderType),
+ ),
+ }),
+ [childrenCount, props.slidesToShow, props.type],
);
const slidesToShowCount = getSlidesToShowCount(slidesToShow);
@@ -424,7 +428,12 @@ export const SliderBlock = (props: React.PropsWithChildren) => {
return (
- {disclosedChildren}
+
+ {React.Children.map(disclosedChildren, (child, index) => (
+ {child}
+ ))}
+
+
-
- );
- })}
-
-
+ );
+ })}
+
+
+
);
};
diff --git a/src/blocks/PromoFeaturesBlock/index.ts b/src/blocks/PromoFeaturesBlock/index.ts
new file mode 100644
index 000000000..c2436c3d4
--- /dev/null
+++ b/src/blocks/PromoFeaturesBlock/index.ts
@@ -0,0 +1,52 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import PromoFeaturesBlock from './PromoFeaturesBlock';
+import {PromoFeaturesBlock as PromoFeaturesBlockSchema} from './schema';
+
+const PromoFeaturesBlockConfig = {
+ component: PromoFeaturesBlock,
+ schema: {
+ name: 'Promo Features Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(
+ PromoFeaturesBlockSchema['promo-features-block'] as unknown as JSONSchemaType<{}>,
+ ),
+ default: {
+ title: 'Promo Features Block',
+ theme: 'default',
+ items: [
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ theme: 'accent',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ theme: 'accent-light',
+ },
+ {
+ title: 'Lorem ipsum dolor sit amet',
+ text: 'Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+ theme: 'primary',
+ },
+ ],
+ },
+ },
+};
+
+export default PromoFeaturesBlockConfig;
diff --git a/src/blocks/Questions/Questions.tsx b/src/blocks/Questions/Questions.tsx
index dc70729e7..0f4b5840c 100644
--- a/src/blocks/Questions/Questions.tsx
+++ b/src/blocks/Questions/Questions.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import {Col, Row} from '../../grid';
+import {Col, Grid, Row} from '../../grid';
import {QuestionsProps} from '../../models';
import {Content} from '../../sub-blocks';
import {block} from '../../utils';
@@ -29,48 +29,54 @@ const QuestionsBlock = (props: QuestionsProps) => {
};
return (
- {cardTitle}
-
-
- {media &&
+
-
+
+ {media && {cardTitle}
+
+
+
-
-
+
+
+
);
};
diff --git a/src/blocks/Questions/index.ts b/src/blocks/Questions/index.ts
new file mode 100644
index 000000000..db781a918
--- /dev/null
+++ b/src/blocks/Questions/index.ts
@@ -0,0 +1,52 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import QuestionsBlock from './Questions';
+import {QuestionsBlock as QuestionsBlockSchema} from './schema';
+
+const QuestionsBlockConfig = {
+ component: QuestionsBlock,
+ schema: {
+ name: 'Questions Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(
+ QuestionsBlockSchema['questions-block'] as unknown as JSONSchemaType<{}>,
+ ),
+ default: {
+ type: 'questions-block',
+ title: 'Questions Block',
+ text: 'Here you can find answers.',
+ links: [
+ {
+ text: 'Report for 2024',
+ url: 'file.doc',
+ },
+ ],
+ buttons: [
+ {
+ text: 'Get more',
+ theme: 'outlined-info',
+ },
+ ],
+ list: [
+ {
+ title: 'Report for 2024',
+ text: 'Some advice here',
+ },
+ ],
+ items: [
+ {
+ title: 'Question 1',
+ text: 'Answer for question 1',
+ },
+ {
+ title: 'Question 2',
+ text: 'Answer for question 2',
+ },
+ ],
+ },
+ },
+};
+
+export default QuestionsBlockConfig;
diff --git a/src/blocks/Share/Share.tsx b/src/blocks/Share/Share.tsx
index f3450836b..8a911261b 100644
--- a/src/blocks/Share/Share.tsx
+++ b/src/blocks/Share/Share.tsx
@@ -40,31 +40,34 @@ const Share = ({items, title}: ShareBlockProps) => {
-
-
-
+
+
-
+ return (
+
+
+
+ {title || i18n('constructor-share')}
- {items.map((type) => {
- const url = getAbsolutePath(hostname, pathname);
- const socialUrl = getShareLink(url, type);
- const icon = icons[type];
- const urlTitle = i18n(`${type}-title`);
- const buttonLabel = i18n(`${type}-label`);
+ {items &&
+ items.map((type) => {
+ const url = getAbsolutePath(hostname, pathname);
+ const socialUrl = getShareLink(url, type);
+ const icon = icons[type];
+ const urlTitle = i18n(`${type}-title`);
+ const buttonLabel = i18n(`${type}-label`);
- return (
-
- );
- })}
+ return (
+
+ );
+ })}
{renderDisclaimer()}
{renderNavigation()}
@@ -435,28 +444,30 @@ export const SliderBlock = (props: React.PropsWithChildren) => {
return (
-
+
);
};
diff --git a/src/blocks/Slider/__tests__/Slider.test.tsx b/src/blocks/Slider/__tests__/Slider.test.tsx
index 7b8d2f8a6..defcfb704 100644
--- a/src/blocks/Slider/__tests__/Slider.test.tsx
+++ b/src/blocks/Slider/__tests__/Slider.test.tsx
@@ -1,5 +1,6 @@
import {queryHelpers, render} from '@testing-library/react';
+import {PageConstructorProvider} from '../../../containers/PageConstructor';
import {BasicCard} from '../../../sub-blocks';
import Slider from '../Slider';
@@ -14,18 +15,20 @@ const slidesToShowValues = [3, 2, 1];
describe('Slider', () => {
test.each(slidesToShowValues)('Has correct slider labels', async (slidesToShow) => {
const {container} = render(
-
- {Array(CARDS_COUNT)
- .fill(null)
- .map((_, index) => (
- ,
+
+
+ {Array(CARDS_COUNT)
+ .fill(null)
+ .map((_, index) => (
+
+ ,
);
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
diff --git a/src/blocks/Slider/dynamic-form.ts b/src/blocks/Slider/dynamic-form.ts
new file mode 100644
index 000000000..4da00da9c
--- /dev/null
+++ b/src/blocks/Slider/dynamic-form.ts
@@ -0,0 +1,226 @@
+import {BlockConfig, ConfigInput} from '../../form-generator';
+import {sliderSizesArray, textSize} from '../../schema/validators/common';
+
+const textSizeEnum = textSize.map((size) => ({value: size, content: size}));
+
+export const blockConfig: BlockConfig = {
+ name: 'Slider Block',
+ inputs: [
+ {
+ type: 'oneOf',
+ name: 'title',
+ title: 'Title Object',
+ options: [
+ {
+ title: 'Simple',
+ value: 'simple',
+ properties: [
+ {
+ type: 'text',
+ name: '',
+ title: 'Title',
+ },
+ ],
+ },
+ {
+ title: 'Complex',
+ value: 'complex',
+ properties: [
+ {
+ type: 'text',
+ name: 'text',
+ title: 'Title',
+ },
+ {
+ type: 'select',
+ name: 'textSize',
+ title: 'Text Size',
+ enum: textSizeEnum,
+ view: 'select',
+ mode: 'single',
+ },
+ {
+ type: 'text',
+ name: 'url',
+ title: 'Url',
+ },
+ {
+ type: 'text',
+ name: 'urlTitle',
+ title: 'Url',
+ },
+ {
+ type: 'boolean',
+ name: 'resetMargin',
+ title: 'Reset Margin',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'textarea',
+ name: 'description',
+ title: 'Description',
+ },
+ {
+ type: 'boolean',
+ name: 'dots',
+ title: 'With dots',
+ },
+ {
+ type: 'boolean',
+ name: 'arrows',
+ title: 'With Arrows',
+ },
+ {
+ type: 'boolean',
+ name: 'randomOrder',
+ title: 'Random Order',
+ },
+ {
+ type: 'number',
+ name: 'autoplay',
+ title: 'Autoplay',
+ },
+ {
+ type: 'object',
+ name: 'disclaimer',
+ title: 'Disclaimer',
+ properties: [
+ {
+ type: 'text',
+ name: 'text',
+ title: 'Text',
+ },
+ {
+ type: 'select',
+ name: 'size',
+ title: 'Size',
+ enum: textSizeEnum,
+ view: 'select',
+ mode: 'single',
+ },
+ ],
+ },
+ {
+ type: 'oneOf',
+ name: 'slidesToShow',
+ title: 'Slides to Show',
+ options: [
+ {
+ title: 'Simple',
+ value: 'simple',
+ properties: [
+ {
+ type: 'number',
+ name: '',
+ title: 'Slides',
+ },
+ ],
+ },
+ {
+ title: 'Complex',
+ value: 'complex',
+ properties: sliderSizesArray.reduce((acc, size) => {
+ acc.push({type: 'number', name: size, title: size});
+ return acc;
+ }, [] as Array),
+ },
+ ],
+ },
+ {
+ type: 'array',
+ name: 'array',
+ title: 'Array Properties',
+ buttonText: 'Add new',
+ arrayType: 'object',
+ properties: [
+ {
+ type: 'text',
+ name: 'text',
+ title: 'Property',
+ },
+ {
+ type: 'boolean',
+ name: 'boolean',
+ title: 'Property',
+ },
+ ],
+ },
+ ],
+};
+
+export const exampleConfig: BlockConfig = {
+ name: 'Slider Block',
+ inputs: [
+ {
+ type: 'text',
+ name: 'title',
+ title: 'Text Property',
+ },
+ {
+ type: 'boolean',
+ name: '',
+ title: 'Boolean Property',
+ },
+ {
+ type: 'number',
+ name: '',
+ title: 'Number Property',
+ },
+ {
+ type: 'textarea',
+ name: '',
+ title: 'TextArea Property',
+ showIf: `block.description === 'Test'`,
+ },
+ {
+ type: 'select',
+ name: 'select',
+ title: 'Select Property',
+ enum: [
+ {content: 'Option 1', value: 'option-1'},
+ {content: 'Option 2', value: 'option-2'},
+ ],
+ mode: 'single',
+ view: 'select',
+ },
+ {
+ type: 'object',
+ name: 'object_data',
+ title: 'Object Property',
+ properties: [
+ {
+ type: 'text',
+ name: 'text',
+ title: 'Property',
+ },
+ {
+ type: 'boolean',
+ name: 'boolean',
+ title: 'Property',
+ },
+ ],
+ },
+ {
+ type: 'array',
+ name: 'array',
+ title: 'Array Properties',
+ buttonText: 'Add new',
+ arrayType: 'object',
+ properties: [
+ {
+ type: 'text',
+ name: 'text',
+ title: 'Property',
+ },
+ {
+ type: 'boolean',
+ name: 'boolean',
+ title: 'Property',
+ },
+ ],
+ },
+ ],
+};
diff --git a/src/blocks/Slider/index.ts b/src/blocks/Slider/index.ts
new file mode 100644
index 000000000..8e57471e1
--- /dev/null
+++ b/src/blocks/Slider/index.ts
@@ -0,0 +1,48 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import SliderBlock from './Slider';
+import {SliderBlock as SliderBlockSchema} from './schema';
+
+const SliderBlockConfig = {
+ component: SliderBlock,
+ schema: {
+ name: 'Slider Block',
+ group: '@gravity-ui/page-constructor/Card Containers',
+ inputs: generateFromAJV(SliderBlockSchema['slider-block'] as unknown as JSONSchemaType<{}>),
+ default: {
+ dots: true,
+ type: 'slider-block',
+ title: 'Slider Block with Quote Cards',
+ description: 'You can insert any card inside block',
+ slidesToShow: 1,
+ arrows: true,
+ children: [
+ {
+ type: 'quote',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ url: 'https://example.com',
+ author: {
+ firstName: 'Lorem',
+ secondName: 'ipsum',
+ description: 'Lorem ipsum',
+ },
+ },
+ {
+ type: 'quote',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ url: 'https://example.com',
+ author: {
+ firstName: 'Lorem',
+ secondName: 'ipsum',
+ description: 'Lorem ipsum',
+ },
+ },
+ ],
+ },
+ previewImg: 'https://storage.cloud-preprod.yandex.net/qradle-test/card-layout-block.svg',
+ },
+};
+
+export default SliderBlockConfig;
diff --git a/src/blocks/Table/index.ts b/src/blocks/Table/index.ts
new file mode 100644
index 000000000..fdf6abb97
--- /dev/null
+++ b/src/blocks/Table/index.ts
@@ -0,0 +1,33 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import TableBlock from './Table';
+import {TableBlock as TableBlockSchema} from './schema';
+
+const TableBlockConfig = {
+ component: TableBlock,
+ schema: {
+ name: 'Table Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(TableBlockSchema['table-block'] as unknown as JSONSchemaType<{}>),
+ default: {
+ type: 'table-block',
+ title: 'Lorem ipsum dolor sit amet',
+ table: {
+ content: [
+ ['Lorem', 'ipsum 1', 'dolor 2', 'sit 3'],
+ ['Lorem 1', '0', '0', '0'],
+ ['Lorem 2', '0', '0', '1'],
+ ['Lorem 3', '0', '0', '1'],
+ ['Lorem 4', '0', '1', '1'],
+ ['Lorem 5', '1', '1', '1'],
+ ],
+ legend: ['ipsum 1', 'ipsum 2'],
+ justify: ['start', 'center', 'center', 'center'],
+ },
+ },
+ },
+};
+
+export default TableBlockConfig;
diff --git a/src/blocks/Table/schema.ts b/src/blocks/Table/schema.ts
index a6b1ecd2e..30fc6765e 100644
--- a/src/blocks/Table/schema.ts
+++ b/src/blocks/Table/schema.ts
@@ -11,6 +11,7 @@ export const TableBlock = {
contentType: 'text',
},
table: {
+ type: 'object',
additionalProperties: false,
required: ['content'],
properties: {
diff --git a/src/blocks/Tabs/Tabs.tsx b/src/blocks/Tabs/Tabs.tsx
index 889b6215d..347b273d4 100644
--- a/src/blocks/Tabs/Tabs.tsx
+++ b/src/blocks/Tabs/Tabs.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
import ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';
import Title from '../../components/Title/Title';
-import {Col, GridJustifyContent, Row} from '../../grid';
+import {Col, Grid, GridJustifyContent, Row} from '../../grid';
import {TabsBlockProps} from '../../models';
import {block} from '../../utils';
import './Tabs.scss';
@@ -53,42 +53,44 @@ export const TabsBlock = ({
);
return (
- setPlay(true)} animate={animated}>
-
-
- {items.map((tabData) => {
- const {tabName} = tabData;
+
+ setPlay(true)} animate={animated}>
+
+
+ {items.map((tabData) => {
+ const {tabName} = tabData;
- return (
-
+ return (
+
+
);
};
diff --git a/src/blocks/Tabs/index.ts b/src/blocks/Tabs/index.ts
new file mode 100644
index 000000000..4b252984f
--- /dev/null
+++ b/src/blocks/Tabs/index.ts
@@ -0,0 +1,32 @@
+import {JSONSchemaType} from 'ajv';
+
+import {generateFromAJV} from '../../utils/form-generator';
+
+import TabsBlock from './Tabs';
+import {TabsBlock as TabsBlockSchema} from './schema';
+
+const TabsBlockConfig = {
+ component: TabsBlock,
+ schema: {
+ name: 'Tabs Block',
+ group: '@gravity-ui/page-constructor/Blocks',
+ inputs: generateFromAJV(TabsBlockSchema['tabs-block'] as unknown as JSONSchemaType<{}>),
+ default: {
+ title: 'Tabs Block',
+ items: [
+ {
+ tabName: 'First Tab',
+ text: 'First Tab Content',
+ title: 'First Tab Title',
+ },
+ {
+ text: 'Second Tab Content',
+ title: 'Second Tab Title',
+ tabName: 'Second Tab',
+ },
+ ],
+ },
+ },
+};
+
+export default TabsBlockConfig;
diff --git a/src/blocks/TestEditorBlock/TestEditorBlock.tsx b/src/blocks/TestEditorBlock/TestEditorBlock.tsx
new file mode 100644
index 000000000..a9922bd37
--- /dev/null
+++ b/src/blocks/TestEditorBlock/TestEditorBlock.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import {block} from '../../utils';
+
+const b = block('test-editor-block');
+
+export interface TestEditorBlockProps extends React.PropsWithChildren {}
+
+export const TestEditorBlock = (props: TestEditorBlockProps) => {
+ return (
+ action: K,
+ data: ActionMessageTypes[K],
+ destinationElement: Window,
+) {
+ const message = {action, data} as PostMessageAPIMessage;
+ destinationElement.postMessage(message);
+}
+
+export function listenPostMessageEvents(
+ action: K,
+ callback: (data: EventMessageTypes[K]) => void,
+) {
+ const onMessage = (e: MessageEvent) => {
+ const message = e.data as PostMessageAPIMessage;
+
+ if ('action' in message && message.action === action) {
+ return callback(message.data);
+ }
+
+ return undefined;
+ };
+
+ window.addEventListener('message', onMessage);
+
+ return () => {
+ window.removeEventListener('message', onMessage);
+ };
+}
+
+export function usePostMessageAPIListener(
+ action: K,
+ callback: (data: EventMessageTypes[K]) => void,
+ deps: unknown[] = [],
+) {
+ React.useEffect(() => {
+ return listenPostMessageEvents(action, callback);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [...deps]);
+}
diff --git a/src/common/store.ts b/src/common/store.ts
new file mode 100644
index 000000000..b9bb8a3e4
--- /dev/null
+++ b/src/common/store.ts
@@ -0,0 +1,44 @@
+import _ from 'lodash';
+
+import {PageContentWithNavigation} from '../models';
+
+import {ConfigInput} from '../form-generator';
+import {ItemConfig} from './types';
+import {initializeStore} from './utils';
+
+export interface EditorState {
+ height?: number;
+ deviceWidth?: string;
+ zoom: number;
+
+ manipulateOverlayMode: 'insert' | 'reorder' | false;
+ selectedBlock: number[] | null;
+ initialized: boolean;
+ isPreviewMode: boolean;
+
+ content: PageContentWithNavigation;
+ blocks: Array;
+ subBlocks: Array;
+ global: Array;
+
+ preInsertBlockType: string | null;
+ preReorderBlockPath: number[] | null;
+}
+
+export const initialStore: EditorState = {
+ height: 100,
+ deviceWidth: '100%',
+ zoom: 100,
+ manipulateOverlayMode: false,
+ selectedBlock: null,
+ initialized: false,
+ isPreviewMode: false,
+ content: {blocks: []},
+ blocks: [],
+ subBlocks: [],
+ global: [],
+ preInsertBlockType: null,
+ preReorderBlockPath: null,
+};
+
+export const createPCEditorStore = initializeStore(initialStore, () => ({}));
diff --git a/src/common/types/actions.ts b/src/common/types/actions.ts
new file mode 100644
index 000000000..1fbf0fdc5
--- /dev/null
+++ b/src/common/types/actions.ts
@@ -0,0 +1,21 @@
+import {PageContentWithNavigation} from '../../models';
+import {EditorState} from '../store';
+
+export type MessageTypes = EventMessageTypes & ActionMessageTypes;
+
+export type EventMessageTypes = {
+ ON_INIT: {height: number};
+ ON_RESIZE: {height: number};
+ ON_MOUSE_UP: {path?: number[]; rect?: DOMRect; position?: string};
+ ON_MOUSE_MOVE: {x: number; y: number};
+ ON_HOVER_BLOCK: {rect?: DOMRect; position?: string};
+ ON_CLICK_BLOCK: {path: number[]};
+ ON_UPDATE_BLOCK_SELECTION: {rect: DOMRect};
+ ON_SUPPORTED_BLOCKS: Pick;
+ ON_INITIAL_CONTENT: PageContentWithNavigation;
+};
+
+export type ActionMessageTypes = {
+ GET_SUPPORTED_BLOCKS: {};
+ GET_INITIAL_CONTENT: {};
+};
diff --git a/src/common/types/common.ts b/src/common/types/common.ts
new file mode 100644
index 000000000..f7051d27c
--- /dev/null
+++ b/src/common/types/common.ts
@@ -0,0 +1,6 @@
+import {BlockConfig} from '../../form-generator/types';
+
+export interface ItemConfig {
+ type: string;
+ schema: BlockConfig;
+}
diff --git a/src/common/types/index.ts b/src/common/types/index.ts
new file mode 100644
index 000000000..cfb7cdbf1
--- /dev/null
+++ b/src/common/types/index.ts
@@ -0,0 +1,3 @@
+export * from './actions';
+export * from './common';
+export * from './messages';
diff --git a/src/common/types/messages.ts b/src/common/types/messages.ts
new file mode 100644
index 000000000..aa9ec2a62
--- /dev/null
+++ b/src/common/types/messages.ts
@@ -0,0 +1,12 @@
+import {EditorState} from '../store';
+
+import {MessageTypes} from './actions';
+
+export type PostMessageAPIMessage = {
+ action: K;
+ data: MessageTypes[K];
+};
+
+export type StoreSyncMessage = {
+ state: EditorState;
+};
diff --git a/src/common/utils.ts b/src/common/utils.ts
new file mode 100644
index 000000000..666e53573
--- /dev/null
+++ b/src/common/utils.ts
@@ -0,0 +1,35 @@
+import {StoreApi, create} from 'zustand';
+import {devtools, subscribeWithSelector} from 'zustand/middleware';
+
+export function initializeStore(
+ initialState: State,
+ methods: (
+ set: StoreApi['setState'],
+ get: StoreApi['getState'],
+ ) => Methods,
+) {
+ return (overrideInitialState?: Partial) => {
+ return create<
+ State & Methods,
+ [
+ ['zustand/subscribeWithSelector', State & Methods],
+ ['zustand/devtools', never],
+ ['zustand/persist', State & Methods],
+ ]
+ >(
+ subscribeWithSelector(
+ devtools((set, get) => {
+ return {
+ ...initialState,
+ ...overrideInitialState,
+ ...methods(set, get),
+ };
+ }),
+ ),
+ );
+ };
+}
+
+export const removeFn = (object: object) => {
+ return JSON.parse(JSON.stringify(object));
+};
diff --git a/src/components/BlockBase/BlockBase.scss b/src/components/BlockBase/BlockBase.scss
index 01221dfc3..88c2fc656 100644
--- a/src/components/BlockBase/BlockBase.scss
+++ b/src/components/BlockBase/BlockBase.scss
@@ -14,12 +14,12 @@ $block: '.#{$ns}block-base';
@include add-specificity(&) {
@media only screen and (max-width: map-get($gridBreakpoints, 'sm')) {
- margin-top: $indentM;
+ padding-top: $indentM;
padding-bottom: $indentM;
- &:first-child {
- margin-top: var(--pc-first-block-mobile-indent, #{$indentXL});
- }
+ //&:first-child {
+ // padding-top: var(--pc-first-block-mobile-indent, #{$indentXL});
+ //}
}
}
diff --git a/src/components/Image/dynamic-form.ts b/src/components/Image/dynamic-form.ts
new file mode 100644
index 000000000..4871a5d26
--- /dev/null
+++ b/src/components/Image/dynamic-form.ts
@@ -0,0 +1,87 @@
+import _ from 'lodash';
+
+import {ConfigInput} from '../../form-generator';
+
+const devices = ['desktop', 'tablet', 'mobile'];
+
+const imageBaseInputs: ConfigInput[] = [
+ {
+ type: 'text',
+ name: 'alt',
+ title: 'Alternative',
+ },
+ {
+ type: 'boolean',
+ name: 'disableCompress',
+ title: 'Disable Compress',
+ },
+];
+
+const imageStyleInputs: ConfigInput[] = [
+ {
+ type: 'text',
+ name: 'style.backgroundColor',
+ title: 'Background Color',
+ },
+ {
+ type: 'text',
+ name: 'style.height',
+ title: 'Height',
+ },
+ {
+ type: 'text',
+ name: 'style.width',
+ title: 'Width',
+ },
+ {
+ type: 'text',
+ name: 'style.color',
+ title: 'Color',
+ },
+];
+
+const devicesInputs: ConfigInput[] = devices.map((device) => ({
+ type: 'text',
+ title: _.capitalize(device),
+ name: `${device}`,
+}));
+
+export const imageInputs: ConfigInput[] = [
+ {
+ type: 'oneOf',
+ name: '',
+ key: 'imageType',
+ title: 'Image Type',
+ options: [
+ {
+ title: 'Simple',
+ value: 'simple',
+ properties: [
+ {
+ type: 'text',
+ name: '', // image props
+ title: 'Image URL',
+ },
+ ],
+ },
+ {
+ title: 'Complex',
+ value: 'complex',
+ properties: [
+ {
+ type: 'text',
+ name: 'src',
+ title: 'Source',
+ },
+ ...imageStyleInputs,
+ ...imageBaseInputs,
+ ],
+ },
+ {
+ title: 'Device Based',
+ value: 'deviseBased',
+ properties: [...devicesInputs, ...imageBaseInputs],
+ },
+ ],
+ },
+];
diff --git a/src/components/editor/ItemWrap/ItemWrap.scss b/src/components/editor/ItemWrap/ItemWrap.scss
new file mode 100644
index 000000000..40bbfad31
--- /dev/null
+++ b/src/components/editor/ItemWrap/ItemWrap.scss
@@ -0,0 +1,12 @@
+@import '../../../../styles/mixins.scss';
+@import '../../../../styles/variables.scss';
+
+$block: '.#{$ns}item-wrap';
+
+#{$block} {
+ height: 100%;
+}
+
+.pc-page-constructor_with-editor #{$block} {
+ cursor: pointer;
+}
diff --git a/src/components/editor/ItemWrap/ItemWrap.tsx b/src/components/editor/ItemWrap/ItemWrap.tsx
new file mode 100644
index 000000000..cca5b199c
--- /dev/null
+++ b/src/components/editor/ItemWrap/ItemWrap.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import {usePCEditorItemWrap} from '../../../hooks/usePCEditorItemWrap';
+import {block} from '../../../utils';
+
+import './ItemWrap.scss';
+
+const b = block('item-wrap');
+
+export interface ItemWrapProps extends React.PropsWithChildren {
+ index: number;
+}
+
+const ItemWrap = ({index, children}: ItemWrapProps) => {
+ const {blockRef, adminBlockMouseEvents} = usePCEditorItemWrap(index);
+ return (
+ ;
+ schema: BlockConfig;
+}
+
+export const blockDataMap: Record = {
+ [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlockConfig,
+ [BlockType.PromoFeaturesBlock]: PromoFeaturesBlockConfig,
+ [BlockType.QuestionsBlock]: QuestionsBlockConfig,
+ [BlockType.BannerBlock]: BannerBlockConfig,
+ [BlockType.CompaniesBlock]: CompaniesBlockConfig,
+ [BlockType.MediaBlock]: MediaBlockConfig,
+ [BlockType.InfoBlock]: InfoBlockConfig,
+ [BlockType.TableBlock]: TableBlockConfig,
+ [BlockType.TabsBlock]: TabsBlockConfig,
+ [BlockType.HeaderBlock]: HeaderBlockConfig,
+ [BlockType.IconsBlock]: IconsBlockConfig,
+ [BlockType.HeaderSliderBlock]: HeaderSliderBlockConfig,
+ [BlockType.CardLayoutBlock]: CardLayoutBlockConfig,
+ [BlockType.ContentLayoutBlock]: ContentLayoutBlockConfig,
+ [BlockType.ShareBlock]: ShareBlockConfig,
+ [BlockType.MapBlock]: MapBlockConfig,
+ // TODO: fix items prop for editor compatibility
+ // [BlockType.FilterBlock]: FilterBlockConfig,
+ [BlockType.FormBlock]: FormBlockConfig,
+ [BlockType.TestEditorBlock]: TestEditorBlockConfig,
+ [BlockType.SliderBlock]: SliderBlockConfig,
+
+ [SubBlockType.Divider]: DividerConfig,
+ [SubBlockType.MediaCard]: MediaCardConfig,
+ [SubBlockType.BannerCard]: BannerCardConfig,
+ [SubBlockType.LayoutItem]: LayoutItemConfig,
+ [SubBlockType.BackgroundCard]: BackgroundCardConfig,
+ [SubBlockType.BasicCard]: BasicCardConfig,
+ [SubBlockType.Content]: ContentConfig,
+ [SubBlockType.Quote]: QuoteConfig,
+ [SubBlockType.PriceCard]: PriceCardConfig,
+ [SubBlockType.ImageCard]: ImageCardConfig,
+};
diff --git a/src/containers/PageConstructor/PageConstructor.tsx b/src/containers/PageConstructor/PageConstructor.tsx
index ccb8a8a24..988fd5754 100644
--- a/src/containers/PageConstructor/PageConstructor.tsx
+++ b/src/containers/PageConstructor/PageConstructor.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
-import '@diplodoc/transform/dist/js/yfm.js';
+import '@diplodoc/transform/dist/js/yfm';
+import {ThemeProvider} from '@gravity-ui/uikit';
import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
import BrandFooter from '../../components/BrandFooter/BrandFooter';
@@ -10,9 +11,9 @@ import {AnimateContext} from '../../context/animateContext';
import {InnerContext} from '../../context/innerContext';
import {ProjectSettingsContext} from '../../context/projectSettingsContext';
import {useTheme} from '../../context/theme';
-import {Grid} from '../../grid';
+import {usePCEditorInitializeEvents} from '../../hooks/usePCEditorInitializeEvents';
+import {usePCEditorStore} from '../../hooks/usePCEditorStore';
import {
- BlockType,
BlockTypes,
CustomConfig,
CustomItems,
@@ -20,21 +21,14 @@ import {
NavigationData,
NavigationItemTypes,
PageContent,
+ PageContentWithNavigation,
ShouldRenderBlock,
SubBlockTypes,
} from '../../models';
import Layout from '../../navigation/containers/Layout/Layout';
-import {
- block as cnBlock,
- getCustomItems,
- getCustomTypes,
- getHeaderBlock,
- getOrderedBlocks,
- getThemedValue,
-} from '../../utils';
-
-import {ConstructorBlocks} from './components/ConstructorBlocks';
-import {ConstructorHeader} from './components/ConstructorItem';
+import {block as cnBlock, getCustomItems, getCustomTypes, getThemedValue} from '../../utils';
+
+import {ConstructorBlocks} from './components';
import {ConstructorRow} from './components/ConstructorRow';
import './PageConstructor.scss';
@@ -68,6 +62,19 @@ export const Constructor = (props: PageConstructorProps) => {
microdata,
} = props;
+ const [content, setContent] = React.useState({
+ blocks,
+ background,
+ navigation,
+ });
+
+ const theme = useTheme();
+
+ const store = usePCEditorStore();
+ const {initialized, isPreviewMode} = store;
+
+ usePCEditorInitializeEvents({initialContent: {blocks, background, navigation}, setContent});
+
const {context} = React.useMemo(
() => ({
context: {
@@ -98,31 +105,42 @@ export const Constructor = (props: PageConstructorProps) => {
[custom, shouldRenderBlock, microdata],
);
- const theme = useTheme();
+ const restBlocks = content.blocks;
+ const themedBackground = getThemedValue(content.background, theme);
+
+ // disable click events
+ React.useEffect(() => {
+ if (!initialized || isPreviewMode) {
+ return;
+ }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const handler: React.EventHandler = (e) => {
+ e?.preventDefault();
+ const blockElement = e.target.closest('[data-editor-item]');
+ blockElement.click(e);
+ };
+ document.body.addEventListener('click', handler);
- const header = getHeaderBlock(blocks, context.headerBlockTypes);
- const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
- const themedBackground = getThemedValue(background, theme);
+ // eslint-disable-next-line consistent-return
+ return () => {
+ document.body.removeEventListener('click', handler);
+ };
+ }, [initialized, isPreviewMode]);
return (
-
+
-
+
+
+
+
);
};
diff --git a/src/containers/PageConstructor/Provider.tsx b/src/containers/PageConstructor/Provider.tsx
index 3df2de962..389c852d2 100644
--- a/src/containers/PageConstructor/Provider.tsx
+++ b/src/containers/PageConstructor/Provider.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import {DEFAULT_THEME} from '../../components/constants';
import {AnalyticsContext, AnalyticsContextProps} from '../../context/analyticsContext';
+import {PCEditorStoreProvider} from '../../context/editorStoreContext';
import {
DEFAULT_FORMS_CONTEXT_VALUE,
FormsContext,
@@ -62,6 +63,7 @@ export const PageConstructorProvider = (
) => {
+ const {blockRef, adminBlockMouseEvents} = usePCEditorItemWrap(index);
+
const {type} = data;
const blockBaseProps = React.useMemo(
() => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']),
@@ -27,10 +30,12 @@ export const ConstructorBlock = ({
);
return (
-
-
- {children}
-
-
+ = ({items}) => {
- const {blockTypes, loadables, itemMap, shouldRenderBlock} = React.useContext(InnerContext);
+ const {blockTypes, subBlockTypes, loadables, itemMap, shouldRenderBlock} =
+ React.useContext(InnerContext);
+
+ const allBlocks = [...blockTypes, ...subBlockTypes];
const renderer = (
parentId = '',
+ withoutConstructorBlockWrapper = false,
item: ConstructorBlockType,
index: number,
): React.ReactElement | null => {
@@ -63,17 +67,17 @@ export const ConstructorBlocks: React.FC = ({items}) =>
} else {
let children;
if ('children' in item && item.children) {
- children = (item.children as SubBlock[]).map(renderer.bind(null, blockId));
+ children = (item.children as SubBlock[]).map(renderer.bind(null, blockId, true));
}
itemElement = (
-
+
{children}
);
}
- return blockTypes.includes(item.type) ? (
+ return allBlocks.includes(item.type) && !withoutConstructorBlockWrapper ? (
//TODO: replace ConstructorBlock (and delete it) with BlockBase when all
// components relying on constructor inner structure like Slider or blog-constructor will be refactored
@@ -84,5 +88,5 @@ export const ConstructorBlocks: React.FC = ({items}) =>
);
};
- return {items.map(renderer.bind(null, ''))} ;
+ return {items.map(renderer.bind(null, '', false))} ;
};
diff --git a/src/containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx b/src/containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx
index 182f20641..7b80cda6d 100644
--- a/src/containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx
+++ b/src/containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx
@@ -7,7 +7,7 @@ import {BlockType, ConstructorBlock} from '../../../../models';
export interface ConstructorItemProps {
data: ConstructorBlock;
- blockKey: string;
+ blockKey: number;
}
export const ConstructorItem = ({
@@ -16,6 +16,7 @@ export const ConstructorItem = ({
children,
}: React.PropsWithChildren) => {
const {itemMap} = React.useContext(InnerContext);
+ const parentId = React.useContext(BlockIdContext);
const {type, ...rest} = data;
const Component = itemMap[type] as React.ComponentType<
@@ -23,7 +24,7 @@ export const ConstructorItem = ({
>;
return (
-
+
{children}
);
diff --git a/src/containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.tsx b/src/containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.tsx
index 4488dd6f2..21ca4b234 100644
--- a/src/containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.tsx
+++ b/src/containers/PageConstructor/components/ConstructorLoadable/ConstructorLoadable.tsx
@@ -18,9 +18,10 @@ export const ConstructorLoadable = (props: ConstructorLoadableProps) => {
const Component = itemMap[type] as React.Component<
React.ComponentProps<(typeof itemMap)[typeof type]>
>;
+ const parentId = React.useContext(BlockIdContext);
return (
-
+
) =>
- children ? (
-
-
- ) : null;
+ children ? ('');
+export const BlockIdContext = React.createContext([]);
diff --git a/src/context/editorStoreContext/PCEditorStoreContext.tsx b/src/context/editorStoreContext/PCEditorStoreContext.tsx
new file mode 100644
index 000000000..1b9e53899
--- /dev/null
+++ b/src/context/editorStoreContext/PCEditorStoreContext.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import {StoreApi} from 'zustand';
+
+import {EditorState, createPCEditorStore} from '../../common/store';
+
+export interface PCEditorStoreContextProps {
+ state: StoreApi;
+}
+
+export const PCEditorStoreContext = React.createContext({
+ state: createPCEditorStore(),
+});
diff --git a/src/context/editorStoreContext/PCEditorStoreProvider.tsx b/src/context/editorStoreContext/PCEditorStoreProvider.tsx
new file mode 100644
index 000000000..b3d851565
--- /dev/null
+++ b/src/context/editorStoreContext/PCEditorStoreProvider.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import {StoreApi} from 'zustand';
+
+import {EditorState, createPCEditorStore} from '../../common/store';
+import {StoreSyncMessage} from '../../common/types';
+
+import {PCEditorStoreContext} from './PCEditorStoreContext';
+
+interface PCEditorStoreProviderProps extends React.PropsWithChildren {}
+
+export const PCEditorStoreProvider = ({children}: PCEditorStoreProviderProps) => {
+ const storeRef = React.useRef>();
+
+ const syncStore = React.useCallback((message: StoreSyncMessage) => {
+ if (storeRef.current && message.state) {
+ storeRef.current.setState(message.state);
+ }
+ }, []);
+
+ React.useEffect(() => {
+ const onMessage = (e: MessageEvent) => {
+ const message = e.data as StoreSyncMessage;
+ syncStore(message);
+ };
+
+ window.addEventListener('message', onMessage);
+
+ return () => {
+ window.removeEventListener('message', onMessage);
+ };
+ }, [syncStore]);
+
+ if (!storeRef.current) {
+ storeRef.current = createPCEditorStore();
+ }
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/context/editorStoreContext/index.ts b/src/context/editorStoreContext/index.ts
new file mode 100644
index 000000000..2cb38452e
--- /dev/null
+++ b/src/context/editorStoreContext/index.ts
@@ -0,0 +1,2 @@
+export * from './PCEditorStoreContext';
+export * from './PCEditorStoreProvider';
diff --git a/src/editor-v2/components/BlockCard/BlockCard.scss b/src/editor-v2/components/BlockCard/BlockCard.scss
new file mode 100644
index 000000000..a55639b92
--- /dev/null
+++ b/src/editor-v2/components/BlockCard/BlockCard.scss
@@ -0,0 +1,39 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}block-card';
+
+#{$block} {
+ padding: 8px;
+ cursor: grab;
+ user-select: none;
+ margin-bottom: 8px;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ text-align: center;
+ gap: 4px;
+ max-width: 300px;
+
+ &:active {
+ background-color: var(--g-color-base-generic-hover);
+ cursor: grabbing;
+ }
+
+ &__image {
+ &-img {
+ pointer-events: none;
+ }
+ }
+
+ &__name {
+ justify-self: flex-end;
+ color: var(--g-color-text-secondary);
+ }
+
+ &__icon {
+ color: var(--g-color-text-complementary);
+ }
+}
diff --git a/src/editor-v2/components/BlockCard/BlockCard.tsx b/src/editor-v2/components/BlockCard/BlockCard.tsx
new file mode 100644
index 000000000..4e1dd4896
--- /dev/null
+++ b/src/editor-v2/components/BlockCard/BlockCard.tsx
@@ -0,0 +1,38 @@
+import {SquareBars} from '@gravity-ui/icons';
+import {Card, Icon} from '@gravity-ui/uikit';
+import * as React from 'react';
+
+import {editorCn} from '../../utils/cn';
+
+import './BlockCard.scss';
+
+const b = editorCn('block-card');
+
+export interface BlockCardProps {
+ className?: string;
+ type: string;
+ name: string;
+ previewImg?: string;
+ onMouseDown: (type: string) => void;
+}
+
+const BlockCard = ({className, type, name, previewImg, onMouseDown}: BlockCardProps) => {
+ const handleMouseDown = React.useCallback(() => {
+ onMouseDown(type);
+ }, [onMouseDown, type]);
+
+ return (
+
+
+ );
+};
+
+export default BlockCard;
diff --git a/src/editor-v2/components/MessageCard/MessageCard.scss b/src/editor-v2/components/MessageCard/MessageCard.scss
new file mode 100644
index 000000000..a3c19f548
--- /dev/null
+++ b/src/editor-v2/components/MessageCard/MessageCard.scss
@@ -0,0 +1,68 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}message-card';
+
+#{$block} {
+ padding: 16px;
+ border-radius: 8px;
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+
+ &__icon {
+ flex-shrink: 0;
+ margin-top: 2px;
+ }
+
+ &__content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ &__title {
+ margin: 0;
+ }
+
+ &__description {
+ margin: 0;
+ }
+
+ &_theme_success {
+ border: 1px solid var(--g-color-text-positive);
+ background-color: var(--g-color-base-positive-light);
+
+ #{$block}__icon {
+ color: var(--g-color-text-positive);
+ }
+ }
+
+ &_theme_error {
+ border: 1px solid var(--g-color-text-danger);
+ background-color: var(--g-color-base-danger-light);
+
+ #{$block}__icon {
+ color: var(--g-color-text-danger);
+ }
+ }
+
+ &_theme_warning {
+ border: 1px solid var(--g-color-text-warning);
+ background-color: var(--g-color-base-warning-light);
+
+ #{$block}__icon {
+ color: var(--g-color-text-warning);
+ }
+ }
+
+ &_theme_info {
+ border: 1px solid var(--g-color-text-info);
+ background-color: var(--g-color-base-info-light);
+
+ #{$block}__icon {
+ color: var(--g-color-text-info);
+ }
+ }
+}
diff --git a/src/editor-v2/components/MessageCard/MessageCard.tsx b/src/editor-v2/components/MessageCard/MessageCard.tsx
new file mode 100644
index 000000000..1ae773ab7
--- /dev/null
+++ b/src/editor-v2/components/MessageCard/MessageCard.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {Icon, IconData, Text} from '@gravity-ui/uikit';
+import {Check, CircleInfo, TriangleExclamation, Xmark} from '@gravity-ui/icons';
+
+import {editorCn} from '../../utils/cn';
+
+const b = editorCn('message-card');
+
+import './MessageCard.scss';
+
+export type MessageTheme = 'success' | 'error' | 'warning' | 'info';
+
+const DEFAULT_ICONS: Record = {
+ success: Check,
+ error: Xmark,
+ warning: TriangleExclamation,
+ info: CircleInfo,
+};
+
+export interface MessageCardProps {
+ title: string;
+ description: string;
+ theme: MessageTheme;
+ icon?: IconData;
+}
+
+export const MessageCard: React.FC = ({title, description, theme, icon}) => {
+ const IconComponent = icon || DEFAULT_ICONS[theme];
+
+ return (
+ (null);
+ const rightPanel = React.useRef(null);
+
+ const expandPanel = (reference: React.RefObject) => {
+ const panel = reference.current;
+ if (panel) {
+ panel.expand();
+ }
+ };
+
+ const isCollapsed = {
+ left: leftPanel.current?.isCollapsed() || false,
+ right: rightPanel.current?.isCollapsed() || false,
+ };
+
+ return (
+
+
+ {left}
+
+
+
+ {middle}
+
+
+
+ {right}
+
+
+ );
+};
diff --git a/src/editor-v2/components/Sidebar/Sidebar.scss b/src/editor-v2/components/Sidebar/Sidebar.scss
new file mode 100644
index 000000000..1ece6f738
--- /dev/null
+++ b/src/editor-v2/components/Sidebar/Sidebar.scss
@@ -0,0 +1,20 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}sidebar';
+
+#{$block} {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ height: 100%;
+
+ &__block {
+ width: 100%;
+ border-bottom: 1px solid var(--g-color-line-generic);
+ }
+
+ &__tabs {
+ @include custom-scrollbar();
+ }
+}
diff --git a/src/editor-v2/components/Sidebar/Sidebar.tsx b/src/editor-v2/components/Sidebar/Sidebar.tsx
new file mode 100644
index 000000000..267ad9a93
--- /dev/null
+++ b/src/editor-v2/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import {editorCn} from '../../utils/cn';
+import Tabs, {TabItemProps} from '../Tabs/Tabs';
+
+import './Sidebar.scss';
+
+const b = editorCn('sidebar');
+
+interface SidebarProps {
+ tabs: TabItemProps[];
+ defaultTab?: string;
+ top?: React.ElementType[];
+ className?: string;
+}
+
+export const Sidebar = ({className, tabs, top = []}: SidebarProps) => {
+ return (
+ (
+ activeTab?.withPadding || true,
+ );
+
+ const handleClick = React.useCallback(
+ (tabItem: TabItemProps) => () => {
+ setCurrentTab(tabItem.id);
+ setIsPaddingEnabled(tabItem.withPadding || false);
+ },
+ [],
+ );
+
+ const TabComponent = React.useMemo(() => {
+ return activeTab?.component;
+ }, [activeTab]);
+
+ return (
+ >(new Set());
+
+ const onMouseDown = React.useCallback(
+ (blockType: string) => {
+ enableInsertMode(blockType);
+ },
+ [enableInsertMode],
+ );
+
+ const toggleGroup = React.useCallback((groupKey: string) => {
+ setCollapsedGroups((prev) => {
+ const newSet = new Set(prev);
+ if (newSet.has(groupKey)) {
+ newSet.delete(groupKey);
+ } else {
+ newSet.add(groupKey);
+ }
+ return newSet;
+ });
+ }, []);
+
+ const expandAll = React.useCallback(() => {
+ setCollapsedGroups(new Set());
+ }, []);
+
+ const groups = React.useMemo(() => {
+ return blocks.reduce((acc, currentBlock) => {
+ const group = currentBlock.schema.group;
+ if (
+ search &&
+ currentBlock.type.toLowerCase().indexOf(search.toLowerCase()) === -1 &&
+ currentBlock.schema.name.toLowerCase().indexOf(search.toLowerCase()) === -1
+ ) {
+ return acc;
+ }
+ if (group) {
+ if (!acc[group]) {
+ /* eslint-disable no-param-reassign */
+ acc[group] = [];
+ }
+ acc[group].push(currentBlock);
+ } else {
+ if (!acc['Other']) {
+ /* eslint-disable no-param-reassign */
+ acc['Other'] = [];
+ }
+ acc['Other'].push(currentBlock);
+ }
+
+ return acc;
+ }, {} as BlockGroups);
+ }, [blocks, search]);
+
+ const collapseAll = React.useCallback(() => {
+ setCollapsedGroups(new Set(Object.keys(groups)));
+ }, [groups]);
+
+ const allGroupsExpanded = collapsedGroups.size === 0;
+ const allGroupsCollapsed = collapsedGroups.size === Object.keys(groups).length;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/src/editor-v2/containers/GlobalConfig/GlobalConfig.scss b/src/editor-v2/containers/GlobalConfig/GlobalConfig.scss
new file mode 100644
index 000000000..78efa4cf6
--- /dev/null
+++ b/src/editor-v2/containers/GlobalConfig/GlobalConfig.scss
@@ -0,0 +1,10 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}global-config';
+
+#{$block} {
+ &__title {
+ @include text-subheader-3;
+ }
+}
diff --git a/src/editor-v2/containers/GlobalConfig/GlobalConfig.tsx b/src/editor-v2/containers/GlobalConfig/GlobalConfig.tsx
new file mode 100644
index 000000000..d53b31a0b
--- /dev/null
+++ b/src/editor-v2/containers/GlobalConfig/GlobalConfig.tsx
@@ -0,0 +1,32 @@
+import {DynamicFormValue, FormGenerator} from '../../../form-generator';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+
+import './GlobalConfig.scss';
+
+const b = editorCn('global-config');
+
+export interface GlobalConfigProps {
+ className?: string;
+}
+
+const GlobalConfig = ({className}: GlobalConfigProps) => {
+ const {global, content, updateField} = useMainEditorStore();
+
+ const onUpdate = (key: string, value: DynamicFormValue) => {
+ updateField('navigation.' + key, value);
+ };
+
+ return (
+ (null);
+ const [height, setHeight] = React.useState(0);
+
+ const canvasStyle = React.useMemo(
+ () => ({
+ transform: isPreviewMode ? 'none' : `scale(${zoom}%)`,
+ height: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+ width: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+ maxWidth: isPreviewMode ? '100%' : `${(100 / zoom) * 100}%`,
+ }),
+ [isPreviewMode, zoom],
+ );
+
+ const onResize = React.useCallback(
+ (newHeight: number) => {
+ setHeight(newHeight + 100);
+ },
+ [setHeight],
+ );
+
+ usePostMessageAPIListener('ON_RESIZE', ({height: newHeight}) => {
+ onResize(newHeight);
+ });
+
+ usePostMessageAPIListener('ON_INIT', ({height: newHeight}) => {
+ onResize(newHeight);
+ });
+
+ return (
+
- {anchorId &&
- {renderSlider()}
-
-
+
+ {anchorId &&
+ {renderSlider()}
+
+
+ {JSON.stringify(props, null, 2)}
;
+};
+
+export default TestEditorBlock;
diff --git a/src/blocks/TestEditorBlock/form.ts b/src/blocks/TestEditorBlock/form.ts
new file mode 100644
index 000000000..21aca45d5
--- /dev/null
+++ b/src/blocks/TestEditorBlock/form.ts
@@ -0,0 +1,114 @@
+import {
+ ArrayObjectInput,
+ ArrayTextInput,
+ BooleanInput,
+ NumberInput,
+ ObjectInput,
+ OneOfInput,
+ SelectMultipleInput,
+ SelectSingleInput,
+ TextAreaInput,
+ TextInput,
+} from '../../form-generator';
+
+const textInput: TextInput = {
+ type: 'text',
+ name: 'text',
+ title: 'Text Input',
+};
+
+const textAreaInput: TextAreaInput = {
+ type: 'textarea',
+ name: 'textarea',
+ title: 'TextArea Input',
+};
+
+const booleanInput: BooleanInput = {
+ type: 'boolean',
+ name: 'boolean',
+ title: 'Boolean Input',
+};
+
+const numberInput: NumberInput = {
+ type: 'number',
+ name: 'number',
+ title: 'Number Input',
+};
+
+const selectInput: SelectSingleInput = {
+ type: 'select',
+ name: 'selectSingle',
+ title: 'Select Single Input',
+ mode: 'single',
+ view: 'select',
+ enum: [
+ {value: 'id_1', content: 'Option 1'},
+ {value: 'id_2', content: 'Option 2'},
+ ],
+};
+
+const radioButtonsViewSingleInput: SelectSingleInput = {
+ ...selectInput,
+ name: 'radioButtons',
+ title: 'Radio Button Input',
+
+ view: 'radiobutton',
+};
+
+// @ts-ignore
+const selectMultipleModeInput: SelectMultipleInput = {
+ ...selectInput,
+ name: 'selectMultiple',
+ title: 'Select Multiple Input',
+
+ mode: 'multiple',
+};
+
+const objectInput: ObjectInput = {
+ type: 'object',
+ name: 'object',
+ title: 'Object Input',
+ properties: [textInput, textAreaInput, selectInput],
+};
+
+const arrayTextInput: ArrayTextInput = {
+ type: 'array',
+ name: 'arrayText',
+ title: 'Array Text Input',
+ buttonText: 'Add Array Item',
+ arrayType: 'text',
+};
+
+const arrayObjectInput: ArrayObjectInput = {
+ type: 'array',
+ name: 'arrayObject',
+ title: 'Array Object Input',
+ buttonText: 'Add Array Item',
+ arrayType: 'object',
+ properties: [textInput, textAreaInput, selectInput],
+};
+
+const oneOfInput: OneOfInput = {
+ type: 'oneOf',
+ name: 'oneOf',
+ key: 'oneOfKey',
+ title: 'Array Text Input',
+ options: [
+ {value: 'text', title: 'Text', properties: [textInput]},
+ {value: 'textarea', title: 'TextArea', properties: [textAreaInput]},
+ ],
+};
+
+export default [
+ textInput,
+ textAreaInput,
+ booleanInput,
+ numberInput,
+ selectInput,
+ radioButtonsViewSingleInput,
+ selectMultipleModeInput,
+ objectInput,
+ arrayTextInput,
+ arrayObjectInput,
+ oneOfInput,
+];
diff --git a/src/blocks/TestEditorBlock/index.ts b/src/blocks/TestEditorBlock/index.ts
new file mode 100644
index 000000000..b999fdf7e
--- /dev/null
+++ b/src/blocks/TestEditorBlock/index.ts
@@ -0,0 +1,16 @@
+import TestEditorBlock from './TestEditorBlock';
+import testEditorBlockInputs from './form';
+
+const TestEditorBlockConfig = {
+ component: TestEditorBlock,
+ schema: {
+ name: 'Test Editor Block',
+ inputs: testEditorBlockInputs,
+ },
+};
+
+export const TestEditorBlockSchema = {
+ ['test-editor-block']: {},
+};
+
+export default TestEditorBlockConfig;
diff --git a/src/common/postMessage.ts b/src/common/postMessage.ts
new file mode 100644
index 000000000..54fe90f93
--- /dev/null
+++ b/src/common/postMessage.ts
@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import {ActionMessageTypes, EventMessageTypes, PostMessageAPIMessage} from './types';
+
+export function requestActionPostMessage
+ {children}
+
+ );
+};
+
+export default ItemWrap;
diff --git a/src/constructor-items.ts b/src/constructor-items.ts
index 6416046ad..2bd6b2123 100644
--- a/src/constructor-items.ts
+++ b/src/constructor-items.ts
@@ -1,3 +1,7 @@
+import * as React from 'react';
+
+import {BlockConfig} from './form-generator';
+
import {
BannerBlock,
CardLayoutBlock,
@@ -20,14 +24,30 @@ import {
TableBlock,
TabsBlock,
} from './blocks';
+import BannerBlockConfig from './blocks/Banner';
+import CardLayoutBlockConfig from './blocks/CardLayout';
+import CompaniesBlockConfig from './blocks/Companies';
+import ContentLayoutBlockConfig from './blocks/ContentLayout';
+import ExtendedFeaturesBlockConfig from './blocks/ExtendedFeatures';
+// import FilterBlockConfig from './blocks/FilterBlock';
+import FormBlockConfig from './blocks/Form';
+import HeaderBlockConfig from './blocks/Header';
+import HeaderSliderBlockConfig from './blocks/HeaderSlider';
+import IconsBlockConfig from './blocks/Icons';
+import InfoBlockConfig from './blocks/Info';
+import MapBlockConfig from './blocks/Map';
+import MediaBlockConfig from './blocks/Media';
+import PromoFeaturesBlockConfig from './blocks/PromoFeaturesBlock';
+import QuestionsBlockConfig from './blocks/Questions';
+import ShareBlockConfig from './blocks/Share';
+import SliderBlockConfig from './blocks/Slider';
+import TableBlockConfig from './blocks/Table';
+import TabsBlockConfig from './blocks/Tabs';
+import TestEditorBlockConfig from './blocks/TestEditorBlock';
+import TestEditorBlock from './blocks/TestEditorBlock/TestEditorBlock';
import {SliderNewBlock} from './blocks/unstable';
import {BlockType, NavigationItemType, SubBlockType} from './models';
-import {
- GithubButton,
- NavigationButton,
- NavigationDropdown,
- NavigationLink,
-} from './navigation/components/NavigationItem';
+import {GithubButton, NavigationButton, NavigationDropdown, NavigationLink} from './navigation';
import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
import {
BackgroundCard,
@@ -42,7 +62,21 @@ import {
PriceDetailed,
Quote,
} from './sub-blocks';
+import BackgroundCardConfig from './sub-blocks/BackgroundCard';
+import BannerCardConfig from './sub-blocks/BannerCard';
+import BasicCardConfig from './sub-blocks/BasicCard';
+import ContentConfig from './sub-blocks/Content';
+import DividerConfig from './sub-blocks/Divider';
+import ImageCardConfig from './sub-blocks/ImageCard';
+import LayoutItemConfig from './sub-blocks/LayoutItem';
+import MediaCardConfig from './sub-blocks/MediaCard';
+import PriceCardConfig from './sub-blocks/PriceCard';
+import QuoteConfig from './sub-blocks/Quote';
+/**
+ * TODO: remove it
+ * @deprecated use blockDataMap
+ **/
export const blockMap = {
[BlockType.SliderBlock]: SliderBlock,
[BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
@@ -66,8 +100,13 @@ export const blockMap = {
[BlockType.FormBlock]: FormBlock,
// unstable
[BlockType.SliderNewBlock]: SliderNewBlock,
+ [BlockType.TestEditorBlock]: TestEditorBlock,
};
+/**
+ * TODO: remove it
+ * @deprecated use blockDataMap
+ **/
export const subBlockMap = {
[SubBlockType.Divider]: Divider,
[SubBlockType.PriceDetailed]: PriceDetailed,
@@ -89,3 +128,45 @@ export const navItemMap = {
[NavigationItemType.Link]: NavigationLink,
[NavigationItemType.GithubButton]: GithubButton,
};
+
+export interface BlockData {
+ // TODO: remove any
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ component: React.ComponentType
{themedBackground && (
+
{renderMenu && renderMenu()}
- {header && (
-
+
)}
-
- {restBlocks && (
-
-
- )}
-
{isBranded &&
@@ -136,8 +154,10 @@ export const PageConstructor = (props: PageConstructorProps) => {
const {content: {animated = isAnimationEnabled} = {}, ...rest} = props;
return (
-
+
+
+ {children}
+
+
+
);
};
diff --git a/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx b/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx
index 9903e2f88..2c9f43204 100644
--- a/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx
+++ b/src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx
@@ -20,10 +20,14 @@ export interface ConstructorBlocksProps {
}
export const ConstructorBlocks: React.FC{children}
: null;
diff --git a/src/context/blockIdContext/blockIdContext.ts b/src/context/blockIdContext/blockIdContext.ts
index 289ed964d..bc82a8b72 100644
--- a/src/context/blockIdContext/blockIdContext.ts
+++ b/src/context/blockIdContext/blockIdContext.ts
@@ -1,5 +1,5 @@
import * as React from 'react';
-export type BlockIdContextProp = string;
+export type BlockIdContextProp = number[];
-export const BlockIdContext = React.createContext
+ {previewImg ? (
+ 
+ ) : (
+
+ {name}
+
+
+ );
+};
diff --git a/src/editor-v2/components/MessageCard/index.ts b/src/editor-v2/components/MessageCard/index.ts
new file mode 100644
index 000000000..6dea415f5
--- /dev/null
+++ b/src/editor-v2/components/MessageCard/index.ts
@@ -0,0 +1,2 @@
+export {MessageCard} from './MessageCard';
+export type {MessageCardProps, MessageTheme} from './MessageCard';
diff --git a/src/editor-v2/components/Panels/Panels.scss b/src/editor-v2/components/Panels/Panels.scss
new file mode 100644
index 000000000..a7601adb5
--- /dev/null
+++ b/src/editor-v2/components/Panels/Panels.scss
@@ -0,0 +1,37 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}panels';
+
+#{$block} {
+ &__button-wrap {
+ --pceditor-panels-button-gap: 8px;
+ position: absolute;
+ z-index: 1000;
+
+ &_left {
+ bottom: var(--pceditor-panels-button-gap);
+ left: calc(100% + var(--pceditor-panels-button-gap));
+ }
+
+ &_right {
+ bottom: var(--pceditor-panels-button-gap);
+ right: calc(100% + var(--pceditor-panels-button-gap));
+ }
+ }
+
+ &__draggable {
+ position: relative;
+
+ width: 8px;
+ height: 100%;
+ cursor: col-resize;
+ background-color: var(--g-color-line-generic);
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ color: var(--g-color-base-background);
+ }
+}
diff --git a/src/editor-v2/components/Panels/Panels.tsx b/src/editor-v2/components/Panels/Panels.tsx
new file mode 100644
index 000000000..0c128a44b
--- /dev/null
+++ b/src/editor-v2/components/Panels/Panels.tsx
@@ -0,0 +1,77 @@
+import {ArrowLeftFromLine, ArrowRightFromLine, Grip} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import * as React from 'react';
+import {ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels';
+
+import {editorCn} from '../../utils/cn';
+
+import './Panels.scss';
+
+const b = editorCn('panels');
+
+interface PanelsProps {
+ left: React.ReactElement;
+ middle: React.ReactElement;
+ right: React.ReactElement;
+}
+
+export const Panels = ({left, right, middle}: PanelsProps) => {
+ const leftPanel = React.useRef
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+ )}
+
+
+
+ )}
+
+ {top.map((TopComponent, idx) => (
+
+ );
+};
diff --git a/src/editor-v2/components/Tabs/Tabs.scss b/src/editor-v2/components/Tabs/Tabs.scss
new file mode 100644
index 000000000..ca98b0cdb
--- /dev/null
+++ b/src/editor-v2/components/Tabs/Tabs.scss
@@ -0,0 +1,73 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}tabs';
+
+#{$block} {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ height: 100%;
+
+ .g-button#{$block}__item {
+ color: var(--g-color-text-hint);
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ cursor: pointer;
+ font-size: var(--g-text-code-inline-1-font-size);
+ line-height: var(--g-text-code-inline-2-line-height);
+ align-items: center;
+
+ &_active {
+ pointer-events: none;
+ color: var(--g-color-text-primary);
+ }
+ }
+
+ &__tabs-wrapper {
+ width: 100%;
+ border-bottom: 1px solid var(--g-color-line-generic);
+ display: inline-flex;
+ flex-direction: row;
+ padding: 12px 4px;
+ flex: 0 0 auto;
+ box-sizing: border-box;
+ overflow-x: auto;
+ position: sticky;
+ top: 0;
+ background-color: var(--g-color-base-background);
+ /* This ensures the background is visible when sticky */
+ z-index: 2;
+ /* Higher z-index for parent tabs-wrapper */
+ }
+
+ /* Make sure any nested tabs component also has proper overflow behavior */
+ #{$block} {
+ overflow: visible;
+
+ /* Ensure nested tabs-wrapper elements are also sticky but positioned below parent tabs-wrapper */
+ /* This selector specifically targets tabs-wrapper elements inside a nested tabs component */
+ #{$block} &__tabs-wrapper {
+ position: sticky;
+ /* Position below parent tabs-wrapper */
+ z-index: 1;
+ background-color: var(--g-color-base-background);
+ }
+ }
+
+ &__body {
+ flex: 1;
+ min-height: 1px;
+ height: 100%;
+ }
+
+ &__item {
+ @include custom-scrollbar();
+ overflow-y: auto;
+ max-height: 100%;
+
+ &_padding {
+ padding: 16px 12px;
+ }
+ }
+}
diff --git a/src/editor-v2/components/Tabs/Tabs.tsx b/src/editor-v2/components/Tabs/Tabs.tsx
new file mode 100644
index 000000000..e15087b32
--- /dev/null
+++ b/src/editor-v2/components/Tabs/Tabs.tsx
@@ -0,0 +1,86 @@
+import {Button} from '@gravity-ui/uikit';
+import * as React from 'react';
+
+import {editorCn} from '../../utils/cn';
+
+import './Tabs.scss';
+
+const b = editorCn('tabs');
+
+export interface TabItemProps {
+ id: string;
+ title: string;
+ component: React.ElementType;
+ withPadding?: boolean;
+}
+
+export interface TabsProps {
+ className?: string;
+ items: TabItemProps[];
+ defaultTab?: string | null;
+}
+
+const Tabs = ({className, items, defaultTab}: TabsProps) => {
+ const [currentTab, setCurrentTab] = React.useState(defaultTab);
+
+ const activeTab = React.useMemo(() => {
+ if (currentTab) {
+ const findTab = items.find(({id}) => id === currentTab);
+ if (findTab) {
+ return findTab;
+ }
+ }
+
+ return items[0] || null;
+ }, [currentTab, items]);
+
+ const [isPaddingEnabled, setIsPaddingEnabled] = React.useState
+
+ ))}
+
+ {items.length > 1 && (
+
+ );
+};
+
+export default Tabs;
diff --git a/src/editor-v2/constants.ts b/src/editor-v2/constants.ts
new file mode 100644
index 000000000..22c3e53f2
--- /dev/null
+++ b/src/editor-v2/constants.ts
@@ -0,0 +1 @@
+export const ZOOM_STEPS = [25, 33, 50, 75, 100, 125, 150, 200, 250, 300];
diff --git a/src/editor-v2/constants/messages.ts b/src/editor-v2/constants/messages.ts
new file mode 100644
index 000000000..21fc10854
--- /dev/null
+++ b/src/editor-v2/constants/messages.ts
@@ -0,0 +1,12 @@
+export const MESSAGES = {
+ NO_BLOCK_SELECTED: {
+ title: 'Блок не выбран',
+ description:
+ 'Выберите блок на экране или в слоях в левом меню для редактирования его свойств',
+ },
+ UNSUPPORTED_BLOCK: {
+ title: 'Неподдерживаемый блок',
+ description:
+ 'Данный тип блока не поддерживается в редакторе. Но вы также можете отредактировать его конфигурацию вручную в меню RAW.',
+ },
+} as const;
diff --git a/src/editor-v2/containers/BigOverlay/BigOverlay.scss b/src/editor-v2/containers/BigOverlay/BigOverlay.scss
new file mode 100644
index 000000000..1d09dfdb1
--- /dev/null
+++ b/src/editor-v2/containers/BigOverlay/BigOverlay.scss
@@ -0,0 +1,31 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}big-overlay';
+
+#{$block} {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ overflow: hidden;
+
+ $border: 3px var(--g-color-base-brand) solid;
+
+ &__border {
+ pointer-events: none;
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ margin-left: -20px;
+ margin-top: -20px;
+ background-color: var(--g-color-base-brand);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 10px;
+ //transition: top .1s ease, left .1s ease, height .1s ease, width .1s ease;
+ }
+}
diff --git a/src/editor-v2/containers/BigOverlay/BigOverlay.tsx b/src/editor-v2/containers/BigOverlay/BigOverlay.tsx
new file mode 100644
index 000000000..34d50fefc
--- /dev/null
+++ b/src/editor-v2/containers/BigOverlay/BigOverlay.tsx
@@ -0,0 +1,81 @@
+import {Stop} from '@gravity-ui/icons';
+import * as React from 'react';
+
+import {usePostMessageAPIListener} from '../../../common/postMessage';
+import {IframeContext} from '../../context/iframeContext';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+
+import './BigOverlay.scss';
+
+const b = editorCn('big-overlay');
+
+const BigOverlay = ({className}: {className?: string}) => {
+ const {zoom, manipulateOverlayMode} = useMainEditorStore();
+ const {iframeElement} = React.useContext(IframeContext);
+ const [mousePosition, setMousePosition] = React.useState<{x: number; y: number} | undefined>(
+ undefined,
+ );
+ const [source, setSource] = React.useState<'main' | 'iframe'>('main');
+
+ const onMouseUp = React.useCallback(() => {
+ setMousePosition(undefined);
+ }, []);
+
+ const onIframeMouseEvent = React.useCallback((position: {x: number; y: number}) => {
+ setMousePosition(position);
+ setSource('iframe');
+ }, []);
+
+ usePostMessageAPIListener('ON_MOUSE_UP', onMouseUp);
+ usePostMessageAPIListener('ON_MOUSE_MOVE', onIframeMouseEvent);
+
+ React.useEffect(() => {
+ const onEditorMouseEvent = (event: MouseEvent) => {
+ setMousePosition({x: event.clientX, y: event.clientY});
+ setSource('main');
+ };
+
+ document.addEventListener('mousemove', onEditorMouseEvent);
+ document.addEventListener('mousedown', onEditorMouseEvent);
+
+ return () => {
+ document.removeEventListener('mousemove', onEditorMouseEvent);
+ document.removeEventListener('mousedown', onEditorMouseEvent);
+ };
+ }, []);
+
+ const realPositions = React.useMemo(() => {
+ if (mousePosition) {
+ const {x, y} = mousePosition;
+ const iframeRect = iframeElement?.getClientRects().item(0);
+ if (iframeRect) {
+ const zoomedX = (x * zoom) / 100;
+ const zoomedY = (y * zoom) / 100;
+ const newX = source === 'main' ? x : zoomedX + iframeRect.x;
+ const newY = source === 'main' ? y : zoomedY + iframeRect.y;
+ return {x: newX, y: newY};
+ }
+ }
+
+ return undefined;
+ }, [mousePosition, source, iframeElement, zoom]);
+
+ return (
+
+ {items.map((item) => {
+ const isActive = item.id === activeTab.id;
+
+ return (
+
+ );
+ })}
+
+ )}
+
+ {TabComponent && (
+
+
+ {realPositions && manipulateOverlayMode ? (
+
+ );
+};
+
+export default BigOverlay;
diff --git a/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.scss b/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.scss
new file mode 100644
index 000000000..ceb6c8859
--- /dev/null
+++ b/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.scss
@@ -0,0 +1,28 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}block-config-form';
+
+#{$block} {
+ &_empty {
+ padding: 16px 12px;
+ }
+
+ &__title {
+ @include text-subheader-3;
+ }
+
+ &__form {
+ padding: 12px 0;
+ }
+
+ &__empty {
+ padding: 12px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ height: 100%;
+ width: 100%;
+ }
+}
diff --git a/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx b/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx
new file mode 100644
index 000000000..52e878203
--- /dev/null
+++ b/src/editor-v2/containers/BlockConfigForm/BlockConfigForm.tsx
@@ -0,0 +1,68 @@
+import _ from 'lodash';
+
+import {DynamicFormValue, FormGenerator} from '../../../form-generator';
+import {MessageCard} from '../../components/MessageCard';
+import {MESSAGES} from '../../constants/messages';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {generateChildrenPathFromArray} from '../../utils';
+import {editorCn} from '../../utils/cn';
+
+import './BlockConfigForm.scss';
+
+const b = editorCn('block-config-form');
+
+interface BlockConfigFormProps {
+ className?: string;
+}
+
+const BlockConfigForm = ({className}: BlockConfigFormProps) => {
+ const {selectedBlock, content, blocks, subBlocks, updateField} = useMainEditorStore();
+
+ const currentBlockPath = selectedBlock ? generateChildrenPathFromArray(selectedBlock) : '[]';
+
+ const currentConfig = _.get(content.blocks, currentBlockPath || '');
+ const currentSchema = [...blocks, ...subBlocks].find(({type}) => type === currentConfig?.type);
+
+ const onUpdate = (key: string, value: DynamicFormValue) => {
+ updateField('blocks' + currentBlockPath + '.' + key, value);
+ };
+
+ if (!currentConfig) {
+ return (
+
+
+ ) : null}
+
+
+ );
+ }
+
+ if (!currentSchema) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default BlockConfigForm;
diff --git a/src/editor-v2/containers/BlocksList/BlocksList.scss b/src/editor-v2/containers/BlocksList/BlocksList.scss
new file mode 100644
index 000000000..3fb3d3438
--- /dev/null
+++ b/src/editor-v2/containers/BlocksList/BlocksList.scss
@@ -0,0 +1,88 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}blocks-list';
+
+#{$block} {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ &__search {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ }
+
+ &__title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ width: 100%;
+ text-align: left;
+ user-select: none;
+ outline: none;
+
+ color: var(--g-color-text-secondary);
+ font-size: var(--g-text-subheader-1-font-size);
+ line-height: var(--g-text-subheader-1-line-height);
+ font-weight: 500;
+
+ border-radius: $editorControlBorderRadius;
+ transition: background-color $editorTransitionTime;
+
+ &:hover {
+ background-color: var(--g-color-base-generic-hover);
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ &-icon {
+ flex-shrink: 0;
+ color: var(--g-color-text-hint);
+ transition: transform $editorTransitionTime;
+ }
+ }
+
+ &__group {
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &_collapsed {
+ #{$block}__title-icon {
+ transform: rotate(0deg);
+ }
+ }
+
+ &:not(&_collapsed) {
+ #{$block}__title-icon {
+ transform: rotate(0deg);
+ }
+ }
+
+ &-items {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 8px;
+ margin-top: 8px;
+ }
+ }
+
+ &__search {
+ &-icon {
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+ }
+}
diff --git a/src/editor-v2/containers/BlocksList/BlocksList.tsx b/src/editor-v2/containers/BlocksList/BlocksList.tsx
new file mode 100644
index 000000000..2a658e5bb
--- /dev/null
+++ b/src/editor-v2/containers/BlocksList/BlocksList.tsx
@@ -0,0 +1,148 @@
+import {ChevronDown, ChevronRight, Folder, FolderOpen, Magnifier} from '@gravity-ui/icons';
+import {DropdownMenu, Icon, TextInput} from '@gravity-ui/uikit';
+import * as React from 'react';
+
+import {ItemConfig} from '../../../common/types';
+import {ClassNameProps} from '../../../models';
+import BlockCard from '../../components/BlockCard/BlockCard';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+
+import './BlocksList.scss';
+
+const b = editorCn('blocks-list');
+
+interface BlockGroups {
+ [key: string]: ItemConfig[];
+}
+
+interface BlockListProps extends ClassNameProps {}
+
+const BlocksList = ({className}: BlockListProps) => {
+ const {blocks, enableInsertMode} = useMainEditorStore();
+ const [search, setSearch] = React.useState('');
+ const [collapsedGroups, setCollapsedGroups] = React.useState{currentSchema.schema.name}
+
+
+
+
+ );
+};
+
+export default BlocksList;
diff --git a/src/editor-v2/containers/Editor/Editor.scss b/src/editor-v2/containers/Editor/Editor.scss
new file mode 100644
index 000000000..da304c330
--- /dev/null
+++ b/src/editor-v2/containers/Editor/Editor.scss
@@ -0,0 +1,48 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}editor';
+
+#{$block} {
+ margin: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ position: relative;
+
+ &__header {
+ height: $headerHeight;
+ width: 100%;
+ border-bottom: 1px solid var(--g-color-line-generic);
+ }
+
+ &__body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ width: 100%;
+ max-height: calc(100% - $headerHeight);
+ }
+
+ &__canvas {
+ flex: 1;
+ }
+
+ &__overlay {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ z-index: 100;
+ }
+
+ &__debug-store {
+ position: fixed;
+ right: 8px;
+ bottom: 8px;
+ z-index: 1000;
+ }
+}
diff --git a/src/editor-v2/containers/Editor/Editor.tsx b/src/editor-v2/containers/Editor/Editor.tsx
new file mode 100644
index 000000000..edc2c39ec
--- /dev/null
+++ b/src/editor-v2/containers/Editor/Editor.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+import {PageContentWithNavigation} from '../../../models';
+import {Panels} from '../../components/Panels/Panels';
+import {Sidebar} from '../../components/Sidebar/Sidebar';
+import BigOverlay from '../../containers/BigOverlay/BigOverlay';
+import MiddleScreen from '../../containers/MiddleScreen/MiddleScreen';
+import {MainEditorStoreProvider} from '../../context/editorStore';
+import {IframeProvider} from '../../context/iframeContext';
+import {useEditorTabs} from '../../hooks/useEditorTabs';
+import useMainEditorInitialize from '../../hooks/useMainEditorInitialize';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+import Source from '../Source/Source';
+import ViewSwitches from '../ViewSwitches/ViewSwitches';
+
+import './Editor.scss';
+
+const b = editorCn('editor');
+
+interface SidebarTabComponent {
+ id: string;
+ title: string;
+ component: React.ElementType;
+}
+interface EditorViewProps {
+ onUpdate?: (pageContent: PageContentWithNavigation) => void;
+ initialUrl: string;
+ initialContent?: PageContentWithNavigation;
+ disableUrlField?: boolean;
+ componentsConfig?: {
+ middleTop?: React.ElementType;
+ leftTop?: React.ElementType[];
+ rightTop?: React.ElementType[];
+ leftTabs?: SidebarTabComponent[];
+ rightTabs?: SidebarTabComponent[];
+ };
+}
+
+const EditorView = ({componentsConfig = {}, initialContent}: EditorViewProps) => {
+ const store = useMainEditorStore();
+ const {manipulateOverlayMode, disableMode} = store;
+
+ useMainEditorInitialize(initialContent);
+
+ // Disable insert mode on any MouseUp event
+ // Maybe should be attached to body
+ const onMouseUp = React.useCallback(
+ (e: React.MouseEvent) => {
+ if (manipulateOverlayMode) {
+ e.preventDefault();
+ disableMode();
+ }
+ },
+ [disableMode, manipulateOverlayMode],
+ );
+ const {left, right} = useEditorTabs(componentsConfig);
+
+ return (
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+
+
+ {Object.entries(groups).map(([key, groupBlocks]) => {
+ const isCollapsed = collapsedGroups.has(key);
+ return (
+
+
+ {!isCollapsed && (
+
+ );
+ })}
+
+ {groupBlocks.map(({type, schema: {name, previewImg}}) => (
+
+ )}
+
+
+ );
+};
+
+export const Editor = (props: EditorViewProps) => {
+ return (
+
+
+
+
+ );
+};
+
+export default GlobalConfig;
diff --git a/src/editor-v2/containers/MiddleScreen/MiddleScreen.scss b/src/editor-v2/containers/MiddleScreen/MiddleScreen.scss
new file mode 100644
index 000000000..d815aa207
--- /dev/null
+++ b/src/editor-v2/containers/MiddleScreen/MiddleScreen.scss
@@ -0,0 +1,108 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+$block: '.#{$ns}middle-screen';
+
+#{$block} {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ &__topbar {
+ flex: 0 0 auto;
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ overflow-y: auto;
+ // height: 100%;
+ background-color: var(--g-color-text-secondary);
+
+ &_fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 1000;
+ background-color: #000;
+ }
+ }
+
+ &__wrapper {
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ overflow: hidden;
+ position: relative;
+ }
+
+ &__canvas {
+ @include custom-scrollbar();
+ background-color: var(--g-color-base-background);
+ transform-origin: center top;
+ position: absolute;
+ height: 100%;
+ max-width: 100%;
+
+ &_fullscreen {
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ max-width: 100%;
+ }
+ }
+
+ &__iframe {
+ display: block;
+ margin: 0 auto;
+
+ &_fullscreen {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &__exit-preview {
+ position: fixed;
+ opacity: 0.5;
+ top: 16px;
+ right: 16px;
+ z-index: 1001;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__overlay {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ }
+
+ &__border {
+ position: absolute;
+ border: 3px var(--g-color-line-brand) solid;
+ border-radius: 10px;
+ }
+
+ &__loading {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--g-color-base-background);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/src/editor-v2/containers/MiddleScreen/MiddleScreen.tsx b/src/editor-v2/containers/MiddleScreen/MiddleScreen.tsx
new file mode 100644
index 000000000..65573135b
--- /dev/null
+++ b/src/editor-v2/containers/MiddleScreen/MiddleScreen.tsx
@@ -0,0 +1,105 @@
+import {Xmark} from '@gravity-ui/icons';
+import {Button, Icon, Loader} from '@gravity-ui/uikit';
+import * as React from 'react';
+
+import {usePostMessageAPIListener} from '../../../common/postMessage';
+import {IframeContext} from '../../context/iframeContext';
+import {useMainEditorStore} from '../../hooks/useMainEditorStore';
+import {editorCn} from '../../utils/cn';
+import Overlay from '../Overlay/Overlay';
+
+import './MiddleScreen.scss';
+
+const b = editorCn('middle-screen');
+
+interface MiddleScreenProps {
+ className?: string;
+ CustomTop?: React.ElementType;
+}
+
+const MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {
+ const {zoom, initialized, deviceWidth, isPreviewMode, togglePreviewMode} = useMainEditorStore();
+ const {url, setIframeElement} = React.useContext(IframeContext);
+ const [canvasRef, setCanvasRef] = React.useStateGlobal Config
+
+ {CustomTop && !isPreviewMode ? (
+
+
+ ) : null}
+
+
+
+