@gravity-ui/page-constructor 5.14.3 → 5.14.4-alpha.1

package/build/esm/blocks/Slider/dynamic-form.js

@@ -0,0 +1,222 @@
+import { sliderSizesArray, textSize } from '../../schema/validators/common';
+const textSizeEnum = textSize.map((size) => ({ value: size, content: size }));
+export const 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;
+                    }, []),
+                },
+            ],
+        },
+        {
+            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 = {
+    name: 'Slider Block',
+    inputs: [
+        {
+            type: 'text',
+            name: 'title',
+            title: 'Text Property',
+        },
+        {
+            type: 'boolean',
+            name: '<ID>',
+            title: 'Boolean Property',
+        },
+        {
+            type: 'number',
+            name: '<ID>',
+            title: 'Number Property',
+        },
+        {
+            type: 'textarea',
+            name: '<ID>',
+            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',
+                },
+            ],
+        },
+    ],
+};

package/build/esm/blocks/Slider/index.d.ts

@@ -0,0 +1,8 @@
+declare const SliderBlockConfig: {
+    component: (props: import("../..").WithChildren<import("./Slider").SliderProps>) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../editor-v2").ConfigInput[];
+    };
+};
+export default SliderBlockConfig;

package/build/esm/blocks/Slider/index.js

@@ -0,0 +1,11 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import SliderBlock from './Slider';
+import { SliderBlock as SliderBlockSchema } from './schema';
+const SliderBlockConfig = {
+    component: SliderBlock,
+    schema: {
+        name: 'Slider Block',
+        inputs: generateFromAJV(SliderBlockSchema['slider-block']),
+    },
+};
+export default SliderBlockConfig;

package/build/esm/blocks/Table/index.d.ts

@@ -0,0 +1,8 @@
+declare const TableBlockConfig: {
+    component: (props: import("../..").TableBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../editor-v2").ConfigInput[];
+    };
+};
+export default TableBlockConfig;

package/build/esm/blocks/Table/index.js

@@ -0,0 +1,11 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import TableBlock from './Table';
+import { TableBlock as TableBlockSchema } from './schema';
+const TableBlockConfig = {
+    component: TableBlock,
+    schema: {
+        name: 'Table Block',
+        inputs: generateFromAJV(TableBlockSchema['table-block']),
+    },
+};
+export default TableBlockConfig;

package/build/esm/blocks/Table/schema.d.ts

@@ -8,6 +8,7 @@ export declare const TableBlock: {
                 contentType: string;
             };
             table: {
+                type: string;
                 additionalProperties: boolean;
                 required: string[];
                 properties: {

package/build/esm/blocks/Table/schema.js

@@ -7,6 +7,7 @@ export const TableBlock = {
                 type: 'string',
                 contentType: 'text',
             }, table: {
+                type: 'object',
                 additionalProperties: false,
                 required: ['content'],
                 properties: Object.assign(Object.assign({}, BaseProps), { content: {

package/build/esm/blocks/Tabs/Tabs.js

@@ -9,7 +9,7 @@ import Title from '../../components/Title/Title';
 import { getHeight } from '../../components/VideoBlock/VideoBlock';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { useTheme } from '../../context/theme';
-import { Col, GridColumnOrderClasses, Row } from '../../grid';
+import { Col, Grid, GridColumnOrderClasses, Row } from '../../grid';
 import { block, getThemedValue } from '../../utils';
 import TabsTextContent from './TabsTextContent/TabsTextContent';
 import './Tabs.css';
@@ -72,13 +72,14 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
             React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption'), id: captionId },
             React.createElement(YFMWrapper, { content: activeTabData.caption, modifiers: { constructor: true }, id: captionId })))));
-    return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        React.createElement(Title, { title: title, subtitle: description, className: b('title', { centered: centered }) }),
-        React.createElement(Row, null,
-            React.createElement(Col, { sizes: tabsColSizes },
-                React.createElement(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
-        activeTabData && (React.createElement(Row, { className: b('row', { reverse: isReverse }) },
-            mediaContent,
-            textContent))));
+    return (React.createElement(Grid, null,
+        React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
+            React.createElement(Title, { title: title, subtitle: description, className: b('title', { centered: centered }) }),
+            React.createElement(Row, null,
+                React.createElement(Col, { sizes: tabsColSizes },
+                    React.createElement(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+            activeTabData && (React.createElement(Row, { className: b('row', { reverse: isReverse }) },
+                mediaContent,
+                textContent)))));
 };
 export default TabsBlock;

package/build/esm/blocks/Tabs/index.d.ts

@@ -0,0 +1,16 @@
+declare const TabsBlockConfig: {
+    component: ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("../..").TabsBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../editor-v2").ConfigInput[];
+        default: {
+            title: string;
+            items: {
+                tabName: string;
+                text: string;
+                title: string;
+            }[];
+        };
+    };
+};
+export default TabsBlockConfig;

package/build/esm/blocks/Tabs/index.js

@@ -0,0 +1,26 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import TabsBlock from './Tabs';
+import { TabsBlock as TabsBlockSchema } from './schema';
+const TabsBlockConfig = {
+    component: TabsBlock,
+    schema: {
+        name: 'Tabs Block',
+        inputs: generateFromAJV(TabsBlockSchema['tabs-block']),
+        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;

package/build/esm/blocks/TestEditorBlock/TestEditorBlock.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export interface TestEditorBlockProps extends PropsWithChildren {
+}
+export declare const TestEditorBlock: (props: TestEditorBlockProps) => JSX.Element;
+export default TestEditorBlock;

package/build/esm/blocks/TestEditorBlock/TestEditorBlock.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { block } from '../../utils';
+const b = block('test-editor-block');
+export const TestEditorBlock = (props) => {
+    return React.createElement("div", { className: b() }, JSON.stringify(props, null, 2));
+};
+export default TestEditorBlock;

package/build/esm/blocks/TestEditorBlock/form.d.ts

@@ -0,0 +1,3 @@
+import { ArrayObjectInput, ArrayTextInput, BooleanInput, NumberInput, ObjectInput, OneOfInput, SelectMultipleInput, SelectSingleInput, TextAreaInput, TextInput } from '../../common/types';
+declare const _default: (TextInput | BooleanInput | NumberInput | TextAreaInput | SelectSingleInput | SelectMultipleInput | ObjectInput | ArrayTextInput | ArrayObjectInput | OneOfInput)[];
+export default _default;

package/build/esm/blocks/TestEditorBlock/form.js

@@ -0,0 +1,78 @@
+const textInput = {
+    type: 'text',
+    name: 'text',
+    title: 'Text Input',
+};
+const textAreaInput = {
+    type: 'textarea',
+    name: 'textarea',
+    title: 'TextArea Input',
+};
+const booleanInput = {
+    type: 'boolean',
+    name: 'boolean',
+    title: 'Boolean Input',
+};
+const numberInput = {
+    type: 'number',
+    name: 'number',
+    title: 'Number Input',
+};
+const selectInput = {
+    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 = Object.assign(Object.assign({}, selectInput), { name: 'radioButtons', title: 'Radio Button Input', view: 'radiobutton' });
+// @ts-ignore
+const selectMultipleModeInput = Object.assign(Object.assign({}, selectInput), { name: 'selectMultiple', title: 'Select Multiple Input', mode: 'multiple' });
+const objectInput = {
+    type: 'object',
+    name: 'object',
+    title: 'Object Input',
+    properties: [textInput, textAreaInput, selectInput],
+};
+const arrayTextInput = {
+    type: 'array',
+    name: 'arrayText',
+    title: 'Array Text Input',
+    buttonText: 'Add Array Item',
+    arrayType: 'text',
+};
+const arrayObjectInput = {
+    type: 'array',
+    name: 'arrayObject',
+    title: 'Array Object Input',
+    buttonText: 'Add Array Item',
+    arrayType: 'object',
+    properties: [textInput, textAreaInput, selectInput],
+};
+const 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,
+];

package/build/esm/blocks/TestEditorBlock/index.d.ts

@@ -0,0 +1,11 @@
+declare const TestEditorBlockConfig: {
+    component: (props: import("./TestEditorBlock").TestEditorBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: (import("../../editor-v2").TextInput | import("../../editor-v2").BooleanInput | import("../../editor-v2").NumberInput | import("../../editor-v2").TextAreaInput | import("../../editor-v2").SelectSingleInput | import("../../editor-v2").SelectMultipleInput | import("../../editor-v2").ObjectInput | import("../../editor-v2").ArrayTextInput | import("../../editor-v2").ArrayObjectInput | import("../../editor-v2").OneOfInput)[];
+    };
+};
+export declare const TestEditorBlockSchema: {
+    "test-editor-block": {};
+};
+export default TestEditorBlockConfig;

package/build/esm/blocks/TestEditorBlock/index.js

@@ -0,0 +1,13 @@
+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;

package/build/esm/common/hooks/usePostMessage.d.ts

@@ -0,0 +1,11 @@
+import { Action, SendOptions, Subscriber, WithStoreReducer } from '../../common/types';
+interface UsePostMessageProps {
+    subscribers: Subscriber[];
+    storesWithReducer: WithStoreReducer[];
+    targetIframeElement?: HTMLIFrameElement;
+    urlOrigin?: string;
+}
+export declare const usePostMessage: (props: UsePostMessageProps) => {
+    sendMessage: (action: Action, { debug, direction }?: SendOptions) => void;
+};
+export {};

package/build/esm/common/hooks/usePostMessage.js

@@ -0,0 +1,90 @@
+import { useCallback, useEffect } from 'react';
+// TODO: enable/disable via env variables
+const DEBUG_MODE = false;
+export const usePostMessage = (props) => {
+    const { subscribers, storesWithReducer, targetIframeElement, urlOrigin } = props;
+    const metaSource = targetIframeElement ? 'editor' : 'pc';
+    const receiveMetaSource = targetIframeElement ? 'pc' : 'editor';
+    const notifySubscribers = useCallback((action, source) => {
+        const meta = { source };
+        const { type, payload } = action;
+        if (!type) {
+            return;
+        }
+        if (subscribers) {
+            const foundedSubscribers = subscribers.filter((subscriber) => subscriber.action === type);
+            for (const storeWithReducer of storesWithReducer) {
+                storeWithReducer.reducer(action, meta);
+            }
+            if (foundedSubscribers.length) {
+                for (const subscriber of foundedSubscribers) {
+                    subscriber.handler(payload, meta);
+                }
+            }
+        }
+    }, [storesWithReducer, subscribers]);
+    const sendPostMessage = useCallback((args) => {
+        if (targetIframeElement && targetIframeElement.contentWindow) {
+            if (targetIframeElement.contentWindow) {
+                targetIframeElement.contentWindow.postMessage(args, '*');
+            }
+            else {
+                // eslint-disable-next-line no-console
+                console.error('No Iframe element in Editor');
+            }
+        }
+        else {
+            window.parent.postMessage(args, '*');
+        }
+    }, [targetIframeElement]);
+    const sendMessage = useCallback((action, { debug = DEBUG_MODE, direction = 'both' } = {}) => {
+        if (debug) {
+            if (metaSource === 'editor') {
+                // eslint-disable-next-line no-console
+                console.log(`🔵 Editor ➡️ ${action.type}`, action.payload);
+            }
+            if (metaSource === 'pc') {
+                // eslint-disable-next-line no-console
+                console.log(`🟢 Website ➡️ ${action.type}`, action.payload);
+            }
+        }
+        if (direction === 'both') {
+            sendPostMessage({ action, debug });
+            notifySubscribers(action, metaSource);
+        }
+        else if (direction === metaSource) {
+            notifySubscribers(action, metaSource);
+        }
+        else {
+            sendPostMessage({ action, debug });
+        }
+    }, [metaSource, notifySubscribers, sendPostMessage]);
+    useEffect(() => {
+        const onMessage = (e) => {
+            const { action, debug } = e.data;
+            if (urlOrigin && e.origin !== urlOrigin) {
+                return;
+            }
+            if (action && action.type) {
+                if (debug) {
+                    if (metaSource === 'editor') {
+                        // eslint-disable-next-line no-console
+                        console.log(`🔵 ➡️ Editor ${action.type}`, action.payload);
+                    }
+                    if (metaSource === 'pc') {
+                        // eslint-disable-next-line no-console
+                        console.log(`🟢 ➡️ Website ${action.type}`, action.payload);
+                    }
+                }
+                notifySubscribers(action, receiveMetaSource);
+            }
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+            window.removeEventListener('message', onMessage);
+        };
+    }, [metaSource, notifySubscribers, receiveMetaSource, targetIframeElement, urlOrigin]);
+    return {
+        sendMessage,
+    };
+};

package/build/esm/common/types/actions/codes.d.ts

@@ -0,0 +1,16 @@
+export declare enum ActionTypes {
+    UpdateConfigs = "UPDATE_CONFIGS",
+    SetHeight = "SET_HEIGHT",
+    IframeReady = "IFRAME_READY",
+    EditorReady = "EDITOR_READY",
+    BlocksConfigs = "BLOCKS_CONFIGS",
+    InsertBlock = "INSERT_BLOCK",
+    InsertModeEnable = "INSERT_MODE_ENABLE",
+    InsertModeDisable = "INSERT_MODE_DISABLE",
+    ReorderBlocks = "REORDER_BLOCKS",
+    ReorderModeEnable = "REORDER_MODE_ENABLE",
+    ReorderModeDisable = "REORDER_MODE_DISABLE",
+    OverlayModeOnMove = "OVERLAY_MODE_ON_MOVE",
+    SelectBlock = "SELECT_BLOCK",
+    UpdateSelectedBlockRect = "UPDATE_SELECTED_BLOCK_RECT"
+}

package/build/esm/common/types/actions/codes.js

@@ -0,0 +1,23 @@
+export var ActionTypes;
+(function (ActionTypes) {
+    // Other Events
+    ActionTypes["UpdateConfigs"] = "UPDATE_CONFIGS";
+    ActionTypes["SetHeight"] = "SET_HEIGHT";
+    // Initial Events
+    ActionTypes["IframeReady"] = "IFRAME_READY";
+    ActionTypes["EditorReady"] = "EDITOR_READY";
+    ActionTypes["BlocksConfigs"] = "BLOCKS_CONFIGS";
+    // Insert Events
+    ActionTypes["InsertBlock"] = "INSERT_BLOCK";
+    ActionTypes["InsertModeEnable"] = "INSERT_MODE_ENABLE";
+    ActionTypes["InsertModeDisable"] = "INSERT_MODE_DISABLE";
+    // Reorder Events
+    ActionTypes["ReorderBlocks"] = "REORDER_BLOCKS";
+    ActionTypes["ReorderModeEnable"] = "REORDER_MODE_ENABLE";
+    ActionTypes["ReorderModeDisable"] = "REORDER_MODE_DISABLE";
+    // Overlay Mode
+    ActionTypes["OverlayModeOnMove"] = "OVERLAY_MODE_ON_MOVE";
+    // Select Events
+    ActionTypes["SelectBlock"] = "SELECT_BLOCK";
+    ActionTypes["UpdateSelectedBlockRect"] = "UPDATE_SELECTED_BLOCK_RECT";
+})(ActionTypes || (ActionTypes = {}));

package/build/esm/common/types/actions/index.d.ts

@@ -0,0 +1,20 @@
+import { InitialActions } from './initial';
+import { InsertActions } from './insert';
+import { OtherActions } from './other';
+import { OverlayActions } from './overlay';
+import { ReorderActions } from './reorder';
+import { SelectActions } from './select';
+export type BaseAction<T extends string = string> = {
+    type: T;
+};
+export interface UnknownAction extends BaseAction {
+    [extraProps: string]: unknown;
+}
+export type Action = InitialActions | InsertActions | OverlayActions | ReorderActions | SelectActions | OtherActions;
+export * from './codes';
+export * from './initial';
+export * from './insert';
+export * from './other';
+export * from './overlay';
+export * from './reorder';
+export * from './select';

package/build/esm/common/types/actions/index.js

@@ -0,0 +1,7 @@
+export * from './codes';
+export * from './initial';
+export * from './insert';
+export * from './other';
+export * from './overlay';
+export * from './reorder';
+export * from './select';