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

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -2,7 +2,9 @@ import { __rest } from "tslib";
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { AnimateBlock, BackgroundImage, Title } from '../../components';
-import { Col, Row } from '../../grid';
+import ChildrenWrap from '../../components/editor/ChildrenWrap/ChildrenWrap';
+import ItemWrap from '../../components/editor/ItemWrap/ItemWrap';
+import { Col, Grid, Row } from '../../grid';
 import { block } from '../../utils';
 import './CardLayout.css';
 const DEFAULT_SIZES = {
@@ -14,11 +16,14 @@ const b = block('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
     const _a = background || {}, { border } = _a, backgroundImageProps = __rest(_a, ["border"]);
     return (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
-        (title || description) && (React.createElement(Title, { title: title, subtitle: description, className: titleClassName })),
-        React.createElement("div", { className: b('content', {
-                'with-background': !isEmpty(background),
-            }) },
-            React.createElement(BackgroundImage, Object.assign({ className: b('image', { border }) }, backgroundImageProps)),
-            React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child)))))));
+        React.createElement(Grid, null,
+            (title || description) && (React.createElement(Title, { title: title, subtitle: description, className: titleClassName })),
+            React.createElement("div", { className: b('content', {
+                    'with-background': !isEmpty(background),
+                }) },
+                React.createElement(BackgroundImage, Object.assign({ className: b('image', { border }) }, backgroundImageProps)),
+                React.createElement(ChildrenWrap, null,
+                    React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') },
+                        React.createElement(ItemWrap, { index: index }, child))))))))));
 };
 export default CardLayout;

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

@@ -0,0 +1,5 @@
+import { BlockData } from '../../constructor-items';
+import { ConfigInput } from '../../types/dynamic-form';
+export declare const blockConfig: ConfigInput[];
+declare const CardLayoutBlockConfig: BlockData;
+export default CardLayoutBlockConfig;

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

@@ -0,0 +1,162 @@
+import { sliderSizesArray, textSize } from '../../schema/validators/common';
+import CardLayout from './CardLayout';
+const textSizeEnum = textSize.map((size) => ({ value: size, content: size }));
+export const blockConfig = [
+    {
+        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',
+            },
+        ],
+    },
+];
+const CardLayoutBlockConfig = {
+    component: CardLayout,
+    schema: {
+        name: 'Card Layout Block',
+        inputs: blockConfig,
+        // inputs: generateFromAJV(CardLayoutProps as unknown as JSONSchemaType<{}>),
+        default: {
+            type: 'card-layout-block',
+            children: [],
+            title: 'Card Layout Block',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+    },
+};
+export default CardLayoutBlockConfig;

package/build/esm/blocks/Companies/Companies.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Image, Title } from '../../components';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import { useTheme } from '../../context/theme';
+import { Grid } from '../../grid';
 import { block, getThemedValue } from '../../utils';
 import './Companies.css';
 const b = block('companies-block');
@@ -9,9 +10,10 @@ export const CompaniesBlock = ({ title, description, images, animated }) => {
     const theme = useTheme();
     const themedImages = getThemedValue(images, theme) || {};
     return (React.createElement(AnimateBlock, { className: b(), offset: 150, animate: animated },
-        React.createElement("div", { className: b('content') },
-            React.createElement(Title, { title: title, subtitle: description, colSizes: { all: 12, sm: 12 } }),
-            React.createElement("div", { className: b('images') },
-                React.createElement(Image, Object.assign({}, themedImages, { className: b('image') }))))));
+        React.createElement(Grid, null,
+            React.createElement("div", { className: b('content') },
+                React.createElement(Title, { title: title, subtitle: description, colSizes: { all: 12, sm: 12 } }),
+                React.createElement("div", { className: b('images') },
+                    React.createElement(Image, Object.assign({}, themedImages, { className: b('image') })))))));
 };
 export default CompaniesBlock;

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

@@ -0,0 +1,3 @@
+import { BlockData } from '../../constructor-items';
+declare const CompaniesBlockConfig: BlockData;
+export default CompaniesBlockConfig;

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

@@ -0,0 +1,15 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import CompaniesBlock from './Companies';
+import { CompaniesBlock as CompaniesBlockSchema } from './schema';
+const CompaniesBlockConfig = {
+    component: CompaniesBlock,
+    schema: {
+        name: 'Companies Block',
+        inputs: generateFromAJV(CompaniesBlockSchema['companies-block']),
+        default: {
+            title: 'Companies Block',
+            description: 'Here is the list',
+        },
+    },
+};
+export default CompaniesBlockConfig;

package/build/esm/blocks/ContentLayout/ContentLayout.js

@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import { BackgroundImage, FileLink } from '../../components';
 import { MobileContext } from '../../context/mobileContext';
-import { Col } from '../../grid';
+import { Col, Grid } from '../../grid';
 import { Content } from '../../sub-blocks';
 import { block } from '../../utils';
 import './ContentLayout.css';
@@ -30,10 +30,11 @@ export const ContentLayoutBlock = (props) => {
     const isMobile = useContext(MobileContext);
     const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = useMemo(() => getTextWidth(textWidth), [textWidth]);
-    return (React.createElement("div", { className: b({ size, theme, background: Boolean(background) }) },
-        React.createElement(Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
-        fileContent && (React.createElement(Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (React.createElement(FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
-        background && (React.createElement("div", { className: b('background') },
-            React.createElement(BackgroundImage, Object.assign({ className: b('background-item') }, background, { hide: isMobile }))))));
+    return (React.createElement(Grid, null,
+        React.createElement("div", { className: b({ size, theme, background: Boolean(background) }) },
+            React.createElement(Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
+            fileContent && (React.createElement(Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (React.createElement(FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
+            background && (React.createElement("div", { className: b('background') },
+                React.createElement(BackgroundImage, Object.assign({ className: b('background-item') }, background, { hide: isMobile })))))));
 };
 export default ContentLayoutBlock;

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

@@ -0,0 +1,11 @@
+declare const ContentLayoutBlockConfig: {
+    component: (props: import("../..").ContentLayoutBlockProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            title: string;
+        };
+    };
+};
+export default ContentLayoutBlockConfig;

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

@@ -0,0 +1,14 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import ContentLayoutBlock from './ContentLayout';
+import { ContentLayoutBlock as ContentLayoutBlockSchema } from './schema';
+const ContentLayoutBlockConfig = {
+    component: ContentLayoutBlock,
+    schema: {
+        name: 'Content Layout Block',
+        inputs: generateFromAJV(ContentLayoutBlockSchema['content-layout-block']),
+        default: {
+            title: 'Content Layout Block',
+        },
+    },
+};
+export default ContentLayoutBlockConfig;

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

@@ -85,6 +85,7 @@ export declare const ContentLayoutBlock: {
                 enum: string[];
             };
             textContent: {
+                type: string;
                 additionalProperties: boolean;
                 properties: {
                     colSizes: {};

package/build/esm/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -3,7 +3,7 @@ import { AnimateBlock, HTML, Title } from '../../components/';
 import Image from '../../components/Image/Image';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import { useTheme } from '../../context/theme';
-import { Col, Row } from '../../grid';
+import { Col, Grid, Row } from '../../grid';
 import { Content } from '../../sub-blocks';
 import { block, getThemedValue } from '../../utils';
 import './ExtendedFeatures.css';
@@ -17,25 +17,27 @@ export const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DE
     const theme = useTheme();
     const itemTitleHeadingTag = title ? 'h3' : 'h2';
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
-        React.createElement(Title, { title: title, subtitle: description, className: b('header') }),
-        React.createElement("div", { className: b('items') },
-            React.createElement(Row, null, items.map(({ title: itemTitle, text, list, link, links, label, icon, buttons, additionalInfo, }) => {
-                const itemLinks = links || [];
-                const iconThemed = icon && getThemedValue(icon, theme);
-                const iconData = iconThemed && getMediaImage(iconThemed);
-                if (link) {
-                    itemLinks.push(link);
-                }
-                return (React.createElement(Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
-                    iconData && React.createElement(Image, Object.assign({}, iconData, { className: b('icon') })),
-                    React.createElement("div", { className: b('container') },
-                        itemTitle &&
-                            React.createElement(itemTitleHeadingTag, {
-                                className: b('item-title'),
-                            }, React.createElement(React.Fragment, null,
-                                React.createElement(HTML, null, itemTitle),
-                                label && (React.createElement("span", { className: b('item-label') }, label)))),
-                        React.createElement(Content, { text: text, links: itemLinks, size: "s", list: list, colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
-            })))));
+        React.createElement(Grid, null,
+            React.createElement(Title, { title: title, subtitle: description, className: b('header') }),
+            React.createElement("div", { className: b('items') },
+                React.createElement(Row, null, items &&
+                    items.map(({ title: itemTitle, text, list, link, links, label, icon, buttons, additionalInfo, }) => {
+                        const itemLinks = links || [];
+                        const iconThemed = icon && getThemedValue(icon, theme);
+                        const iconData = iconThemed && getMediaImage(iconThemed);
+                        if (link) {
+                            itemLinks.push(link);
+                        }
+                        return (React.createElement(Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
+                            iconData && (React.createElement(Image, Object.assign({}, iconData, { className: b('icon') }))),
+                            React.createElement("div", { className: b('container') },
+                                itemTitle &&
+                                    React.createElement(itemTitleHeadingTag, {
+                                        className: b('item-title'),
+                                    }, React.createElement(React.Fragment, null,
+                                        React.createElement(HTML, null, itemTitle),
+                                        label && (React.createElement("span", { className: b('item-label') }, label)))),
+                                React.createElement(Content, { text: text, links: itemLinks, size: "s", list: list, colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
+                    }))))));
 };
 export default ExtendedFeaturesBlock;

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

@@ -0,0 +1,12 @@
+declare const ExtendedFeaturesBlockConfig: {
+    component: ({ title, description, items, colSizes, animated, }: import("../..").ExtendedFeaturesProps) => JSX.Element;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            title: string;
+            items: {}[];
+        };
+    };
+};
+export default ExtendedFeaturesBlockConfig;

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

@@ -0,0 +1,15 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import ExtendedFeaturesBlock from './ExtendedFeatures';
+import { ExtendedFeaturesBlock as ExtendedFeaturesBlockSchema } from './schema';
+const ExtendedFeaturesBlockConfig = {
+    component: ExtendedFeaturesBlock,
+    schema: {
+        name: 'Extended Features Block',
+        inputs: generateFromAJV(ExtendedFeaturesBlockSchema['extended-features-block']),
+        default: {
+            title: 'Extended Features Block',
+            items: [{}],
+        },
+    },
+};
+export default ExtendedFeaturesBlockConfig;

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

@@ -9,6 +9,7 @@ export declare const ExtendedFeaturesItem: {
         text: {
             type: string;
             contentType: string;
+            inputType: string;
         };
         label: {
             type: string;

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

@@ -12,6 +12,7 @@ export const ExtendedFeaturesItem = {
         text: {
             type: 'string',
             contentType: 'yfm',
+            inputType: 'textarea',
         },
         label: {
             type: 'string',

package/build/esm/blocks/FilterBlock/FilterBlock.js

@@ -3,12 +3,12 @@ import { CardLayoutBlock } from '..';
 import { AnimateBlock, Title } from '../../components';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
 import { ConstructorItem } from '../../containers/PageConstructor/components/ConstructorItem';
-import { Col, Row } from '../../grid';
+import { Col, Grid, Row } from '../../grid';
 import { block, getBlockKey } from '../../utils';
 import { i18n } from './i18n';
 import './FilterBlock.css';
 const b = block('filter-block');
-const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }) => {
+const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items = [], colSizes, centered, animated, }) => {
     const tabButtons = useMemo(() => {
         const allButton = allTag
             ? { id: null, title: typeof allTag === 'boolean' ? i18n('label-all-tag') : allTag }
@@ -29,14 +29,15 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
         return itemsToShow.map((item) => item.card);
     }, [actualTag, items]);
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
-        title && (React.createElement(Title, { className: b('title', { centered: centered }), title: title, subtitle: description })),
-        tabButtons.length && (React.createElement(Row, null,
-            React.createElement(Col, null,
-                React.createElement(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
-        React.createElement(Row, { className: b('block-container') },
-            React.createElement(CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container') }, cards.map((card, index) => {
-                const key = getBlockKey(card, index);
-                return React.createElement(ConstructorItem, { data: card, blockKey: key, key: key });
-            })))));
+        React.createElement(Grid, null,
+            title && (React.createElement(Title, { className: b('title', { centered: centered }), title: title, subtitle: description })),
+            tabButtons.length && (React.createElement(Row, null,
+                React.createElement(Col, null,
+                    React.createElement(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
+            React.createElement(Row, { className: b('block-container') },
+                React.createElement(CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container') }, cards.map((card, index) => {
+                    const key = getBlockKey(card, index);
+                    return React.createElement(ConstructorItem, { data: card, blockKey: index, key: key });
+                }))))));
 };
 export default FilterBlock;

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

@@ -0,0 +1,11 @@
+declare const FilterBlockConfig: {
+    component: import("react").FC<import("../..").FilterBlockProps>;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            title: string;
+        };
+    };
+};
+export default FilterBlockConfig;

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

@@ -0,0 +1,14 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import FilterBlock from './FilterBlock';
+import { FilterProps } from './schema';
+const FilterBlockConfig = {
+    component: FilterBlock,
+    schema: {
+        name: 'Filter Block',
+        inputs: generateFromAJV(FilterProps),
+        default: {
+            title: 'Filter Block',
+        },
+    },
+};
+export default FilterBlockConfig;

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

@@ -0,0 +1,12 @@
+declare const FormBlockConfig: {
+    component: import("react").FC<import("../..").FormBlockProps>;
+    schema: {
+        name: string;
+        inputs: import("../../types/dynamic-form").ConfigInput[];
+        default: {
+            title: string;
+            formData: {};
+        };
+    };
+};
+export default FormBlockConfig;

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

@@ -0,0 +1,15 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import FormBlock from './Form';
+import { FormBlock as FormBlockSchema } from './schema';
+const FormBlockConfig = {
+    component: FormBlock,
+    schema: {
+        name: 'Form Block',
+        inputs: generateFromAJV(FormBlockSchema['form-block']),
+        default: {
+            title: 'Form Block',
+            formData: {},
+        },
+    },
+};
+export default FormBlockConfig;

package/build/esm/blocks/Header/dynamic-form.d.ts

@@ -0,0 +1,2 @@
+import { BlockFormSchema } from '../../types/dynamic-form';
+export declare const blockConfig: BlockFormSchema;