craft-codeless-designer-craft-codeless-designer: Это инструмент для проектирования и генерации кода, основанный на React и Craft.js с использованием low-code/no-code подхода.

CCD: Craft Codeless Designer

1. Введение

Craft Codeless Designer — это визуальный низкокодовый или безкодовый конструктор страниц, основанный на расширении craft.js.

🚀 Онлайн-пример.

2. Использование

Установите зависимости в вашем React-проекте: yarn add craft-codeless-designer;
Добавьте компонент <CraftDesigner>.

render() {
    // Достаточно передать pageData в CraftDesigner, и он сам десериализует его в страницу.
    const pageData = this.state.pageEntity.pageData;
    return (
        &lt;CraftDesigner
            onSaveData={this.onSaveData.bind(this)}
            onLoadData={this.loadData.bind(this)}
            onPreview={this.onPreview.bind(this)}
            pageData={pageData}
            &gt;
        &lt;/CraftDesigner&gt;
    );
}

Полный пример проекта можно найти здесь: https://github.com/craft-codeless-designer/craft-codeless-designer-demo.

3. Основной API

<CraftDesigner> — единственный основной компонент, который объединяет все функции.

Основные свойства компонента <CraftDesigner>:

Свойства	Описание
onPreview	Функция обратного вызова для кнопки предварительного просмотра
onDelete	Функция обратного вызова для кнопки удаления
onUndo	Функция обратного вызова для отмены
onRedo	Функция обратного вызова для повтора
onSaveData	Функция обратного вызова для сохранения
onLoadData	Функция обратного вызова для загрузки
onHelp	Функция обратного вызова для справки
showNavBar	Отображать ли верхнюю навигационную панель (по умолчанию true)
showSiderBar	Отображать ли боковую панель инструментов (по умолчанию true)
componentTypes	Список типов компонентов, все встроенные компоненты CraftDesigner уже добавлены в список
iconList	Список иконок компонентов, все иконки встроенных компонентов CraftDesigner уже добавлены в список
pageData	Данные страницы, передача и изменение pageData вызовет повторную визуализацию страницы CraftDesigner
enabled	Включать ли режим редактирования (по умолчанию true), если необходимо перейти в режим предварительного просмотра, установите для этого параметра значение false

4. Продолжение разработки

Клонируйте этот проект;
Выполните установку зависимостей;
Запустите npm start.

Этот проект использует storybook для написания тестовых примеров и документации.

5. Основные преимущества

Поддержка бесконечной вложенности макетов, что позволяет создавать очень сложные страницы;
Поддержка перетаскивания всех исходных HTML-тегов макета;
Поддерживает перетаскивание макетов любых React-компонентов, включая открытые исходные коды, без необходимости изменять существующие компоненты;
Поддержка встраивания компонентов через iframe;
Поддержка ECharts для перетаскивания макетов графиков;
Вся страница сериализуется в данные JSON, код не генерируется;
CraftDesigner сам по себе является обычным компонентом React, который можно свободно интегрировать в любой проект React;
CraftDesigner не зависит от сервера, только ввод и вывод данных JSON.