Как структурировать масштабируемые данные для конструктора страниц с возможностью перетаскивания и адаптивным стилем? ⇐ CSS

[Anonymous]

Я создаю конструктор страниц с возможностью перетаскивания с помощью React и пытаюсь создать масштабируемую структуру данных для холста. Целью является поддержка динамических макетов (с использованием Flexbox/Grid) и адаптивного стиля для экранов разных размеров.
Вот текущая структура данных, которую я использую:

Код: Выделить всё

const canvasData = [
{
canvasItemId: uuidv4(),
elType: 'Container',
id: uuidv4(),
settings: {
containerType: 'flex',
flexDirection: 'row',
gap: '24px',
size: '2',
unit: 'fr',
},
elements: [
{
canvasItemId: uuidv4(),
settings: {
title: 'Add Your Heading Text Here',
titleLink: {
url: '',
isExternal: false,
target: false,
},
width: { unit: '%', size: '100%' }, // Desktop
widthTablet: { unit: '%', size: '100%' },
widthMobile: { unit: '%', size: '100%' },
title_color: '',
font_family: 'Poppins',
tagType: 'h1',
style: 'normal',
decoration: 'none',
background_color: 'transparent',
weight: '400',
size: 20,
typographyFontSize: {
unit: 'px',
size: 36,
},
typographyFontSizeTablet: {
unit: 'px',
size: 30,
},
typographyFontSizeMObile: {
unit: 'px',
size: 20,
},
transform: 'capitalize',
textAlign: 'left',
padding: {
bottom: 0,
left: 0,
right: 0,
top: 0,
},
margin: {
bottom: 0,
left: 0,
right: 0,
top: 0,
},
},
},
],
},
];

Для адаптивного стиля я сейчас динамически генерирую CSS для каждого элемента и внедряю его в DOM:

Код: Выделить всё

{`
.${item.canvasItemId} .heading {
font-size: ${settings.typographyFontSizeMobile.size}${settings.typographyFontSizeMobile.unit};
}
@media (min-width: 768px) {
.${item.canvasItemId} .heading {
font-size: ${settings.typographyFontSizeTablet.size}${settings.typographyFontSizeTablet.unit};
}
}
@media (min-width: 1024px) {
.${item.canvasItemId} .heading {
font-size: ${settings.typographyFontSize.size}${settings.typographyFontSize.unit};
}
}
`}
{item.settings.title}

Вопросы:
Масштабируемость:
Можно ли масштабировать эту структуру данных для компоновщика страниц, поддерживающего вложенные макеты , контейнеры и динамические элементы?
Существуют ли лучшие способы управления макетом и настройками элементов?
Адаптивный стиль:
Является ли встраивание динамических тегов эффективным подходом или стоит ли его использовать? Я использую другой метод, например CSS-in-JS (например, стилизованные компоненты)?
Поддержка Flexbox и Grid:
Как мне спроектировать структуру CanvasData для эффективной обработки макетов Flexbox и Grid?
Будем очень признательны за любые рекомендации и предложения!
Я попробовал несколько способов избежать встроенного CSS.

Подробнее здесь: https://stackoverflow.com/questions/793 ... responsive