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

package/build/cjs/blocks/Slider/dynamic-form.d.ts

@@ -0,0 +1,3 @@
+import { BlockConfig } from '../../common/types';
+export declare const blockConfig: BlockConfig;
+export declare const exampleConfig: BlockConfig;

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

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exampleConfig = exports.blockConfig = void 0;
+const common_1 = require("../../schema/validators/common");
+const textSizeEnum = common_1.textSize.map((size) => ({ value: size, content: size }));
+exports.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: common_1.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',
+                },
+            ],
+        },
+    ],
+};
+exports.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/cjs/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/cjs/blocks/Slider/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const Slider_1 = tslib_1.__importDefault(require("./Slider"));
+const schema_1 = require("./schema");
+const SliderBlockConfig = {
+    component: Slider_1.default,
+    schema: {
+        name: 'Slider Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.SliderBlock['slider-block']),
+    },
+};
+exports.default = SliderBlockConfig;

package/build/cjs/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/cjs/blocks/Table/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const Table_1 = tslib_1.__importDefault(require("./Table"));
+const schema_1 = require("./schema");
+const TableBlockConfig = {
+    component: Table_1.default,
+    schema: {
+        name: 'Table Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.TableBlock['table-block']),
+    },
+};
+exports.default = TableBlockConfig;

package/build/cjs/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/cjs/blocks/Table/schema.js

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

package/build/cjs/blocks/Tabs/Tabs.js

@@ -75,14 +75,15 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
             react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption'), id: captionId },
             react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.caption, modifiers: { constructor: true }, id: captionId })))));
-    return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        react_1.default.createElement(Title_1.default, { title: title, subtitle: description, className: b('title', { centered: centered }) }),
-        react_1.default.createElement(grid_1.Row, null,
-            react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
-                react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
-        activeTabData && (react_1.default.createElement(grid_1.Row, { className: b('row', { reverse: isReverse }) },
-            mediaContent,
-            textContent))));
+    return (react_1.default.createElement(grid_1.Grid, null,
+        react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
+            react_1.default.createElement(Title_1.default, { title: title, subtitle: description, className: b('title', { centered: centered }) }),
+            react_1.default.createElement(grid_1.Row, null,
+                react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
+                    react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+            activeTabData && (react_1.default.createElement(grid_1.Row, { className: b('row', { reverse: isReverse }) },
+                mediaContent,
+                textContent)))));
 };
 exports.TabsBlock = TabsBlock;
 exports.default = exports.TabsBlock;

package/build/cjs/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/cjs/blocks/Tabs/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const Tabs_1 = tslib_1.__importDefault(require("./Tabs"));
+const schema_1 = require("./schema");
+const TabsBlockConfig = {
+    component: Tabs_1.default,
+    schema: {
+        name: 'Tabs Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.TabsBlock['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',
+                },
+            ],
+        },
+    },
+};
+exports.default = TabsBlockConfig;

package/build/cjs/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/cjs/blocks/TestEditorBlock/TestEditorBlock.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestEditorBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('test-editor-block');
+const TestEditorBlock = (props) => {
+    return react_1.default.createElement("div", { className: b() }, JSON.stringify(props, null, 2));
+};
+exports.TestEditorBlock = TestEditorBlock;
+exports.default = exports.TestEditorBlock;

package/build/cjs/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/cjs/blocks/TestEditorBlock/form.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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] },
+    ],
+};
+exports.default = [
+    textInput,
+    textAreaInput,
+    booleanInput,
+    numberInput,
+    selectInput,
+    radioButtonsViewSingleInput,
+    selectMultipleModeInput,
+    objectInput,
+    arrayTextInput,
+    arrayObjectInput,
+    oneOfInput,
+];

package/build/cjs/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/cjs/blocks/TestEditorBlock/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestEditorBlockSchema = void 0;
+const tslib_1 = require("tslib");
+const TestEditorBlock_1 = tslib_1.__importDefault(require("./TestEditorBlock"));
+const form_1 = tslib_1.__importDefault(require("./form"));
+const TestEditorBlockConfig = {
+    component: TestEditorBlock_1.default,
+    schema: {
+        name: 'Test Editor Block',
+        inputs: form_1.default,
+    },
+};
+exports.TestEditorBlockSchema = {
+    ['test-editor-block']: {},
+};
+exports.default = TestEditorBlockConfig;

package/build/cjs/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/cjs/common/hooks/usePostMessage.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePostMessage = void 0;
+const react_1 = require("react");
+// TODO: enable/disable via env variables
+const DEBUG_MODE = false;
+const usePostMessage = (props) => {
+    const { subscribers, storesWithReducer, targetIframeElement, urlOrigin } = props;
+    const metaSource = targetIframeElement ? 'editor' : 'pc';
+    const receiveMetaSource = targetIframeElement ? 'pc' : 'editor';
+    const notifySubscribers = (0, react_1.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 = (0, react_1.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 = (0, react_1.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]);
+    (0, react_1.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,
+    };
+};
+exports.usePostMessage = usePostMessage;

package/build/cjs/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/cjs/common/types/actions/codes.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionTypes = void 0;
+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 = exports.ActionTypes || (exports.ActionTypes = {}));