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

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("../../types/dynamic-form").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("../../types/dynamic-form").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("../../types/dynamic-form").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 '../../types/dynamic-form';
+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("../../types/dynamic-form").TextInput | import("../../types/dynamic-form").BooleanInput | import("../../types/dynamic-form").NumberInput | import("../../types/dynamic-form").TextAreaInput | import("../../types/dynamic-form").SelectSingleInput | import("../../types/dynamic-form").SelectMultipleInput | import("../../types/dynamic-form").ObjectInput | import("../../types/dynamic-form").ArrayTextInput | import("../../types/dynamic-form").ArrayObjectInput | import("../../types/dynamic-form").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/components/BlockBase/BlockBase.css

@@ -4,30 +4,25 @@ unpredictable css rules order in build */
   --anchor-offset: 48px;
 }
 .pc-block-base.pc-block-base {
-  margin-top: 48px;
-  padding: 0 0 48px;
+  padding: 48px 0;
 }
-.pc-block-base.pc-block-base:first-child {
-  margin-top: var(--pc-first-block-indent, 96px);
-}
-
 .pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_0 {
-  margin-top: 0;
+  padding-top: 0;
 }
 .pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_xs {
-  margin-top: 16px;
+  padding-top: 16px;
 }
 .pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_s {
-  margin-top: 24px;
+  padding-top: 24px;
 }
 .pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_m {
-  margin-top: 32px;
+  padding-top: 32px;
 }
 .pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_l {
-  margin-top: 48px;
+  padding-top: 48px;
 }
 .pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_xl {
-  margin-top: 64px;
+  padding-top: 64px;
 }
 .pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentBottom_0 {
   padding-bottom: 0;
@@ -50,12 +45,9 @@ unpredictable css rules order in build */
 
 @media only screen and (max-width: 577px) {
   .pc-block-base.pc-block-base {
-    margin-top: 32px;
+    padding-top: 32px;
     padding-bottom: 32px;
   }
-  .pc-block-base.pc-block-base:first-child {
-    margin-top: var(--pc-first-block-mobile-indent, 64px);
-  }
 }
 
 .pc-block-base_reset-paddings.pc-block-base.pc-block-base_reset-paddings.pc-block-base {

package/build/esm/components/Image/dynamic-form.d.ts

@@ -0,0 +1,2 @@
+import { ConfigInput } from '../../types/dynamic-form';
+export declare const imageInputs: ConfigInput[];

package/build/esm/components/Image/dynamic-form.js

@@ -0,0 +1,80 @@
+import _ from 'lodash';
+const devices = ['desktop', 'tablet', 'mobile'];
+const imageBaseInputs = [
+    {
+        type: 'text',
+        name: 'alt',
+        title: 'Alternative',
+    },
+    {
+        type: 'boolean',
+        name: 'disableCompress',
+        title: 'Disable Compress',
+    },
+];
+const imageStyleInputs = [
+    {
+        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 = devices.map((device) => ({
+    type: 'text',
+    title: _.capitalize(device),
+    name: `${device}`,
+}));
+export const imageInputs = [
+    {
+        type: 'oneOf',
+        name: '',
+        key: 'imageType',
+        title: 'Image Type',
+        options: [
+            {
+                title: 'Simple',
+                value: 'simple',
+                properties: [
+                    {
+                        type: 'text',
+                        name: '',
+                        title: 'Image URL',
+                    },
+                ],
+            },
+            {
+                title: 'Complex',
+                value: 'complex',
+                properties: [
+                    {
+                        type: 'text',
+                        name: 'src',
+                        title: 'Source',
+                    },
+                    ...imageStyleInputs,
+                    ...imageBaseInputs,
+                ],
+            },
+            {
+                title: 'Device Based',
+                value: 'deviseBased',
+                properties: [...devicesInputs, ...imageBaseInputs],
+            },
+        ],
+    },
+];

package/build/esm/components/editor/ChildrenWrap/ChildrenWrap.css

@@ -0,0 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-children-wrap {
+  min-height: 50px;
+}

package/build/esm/components/editor/ChildrenWrap/ChildrenWrap.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import './ChildrenWrap.css';
+export interface ChildrenWrapProps extends PropsWithChildren {
+    checkChildren?: ReactNode;
+}
+declare const ChildrenWrap: (props: ChildrenWrapProps) => JSX.Element;
+export default ChildrenWrap;

package/build/esm/components/editor/ChildrenWrap/ChildrenWrap.js

@@ -0,0 +1,13 @@
+import React, { useContext } from 'react';
+import useEditorBlockMouseEvents from '../../../containers/PageConstructor/components/ConstructorBlock/hooks/useEditorBlockMouseEvents';
+import { BlockIdContext } from '../../../context/blockIdContext';
+import { block } from '../../../utils';
+import './ChildrenWrap.css';
+const b = block('children-wrap');
+const ChildrenWrap = (props) => {
+    const { children } = props;
+    const parentBlockId = useContext(BlockIdContext);
+    const { onMouseUp, onMouseMove } = useEditorBlockMouseEvents([parentBlockId, 0]);
+    return (React.createElement("div", { className: b(), onMouseMove: onMouseMove, onMouseUp: onMouseUp }, children));
+};
+export default ChildrenWrap;

package/build/esm/components/editor/ItemWrap/ItemWrap.css

@@ -0,0 +1,9 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-item-wrap {
+  height: 100%;
+}
+
+.pc-page-constructor_with-editor .pc-item-wrap {
+  cursor: pointer;
+}