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

package/README.md

@@ -383,7 +383,7 @@ If you want to release a new version in previous major after commit it to the ma
 7. Check your changes in CHANGELOG.md and approve robot's PR.
 8. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
 
-## Page constructor editor
+## Page Constructor Editor v1
 
 Editor provides user interface for page content management with realtime preview.
 
@@ -403,6 +403,36 @@ export const MyAppEditor = ({initialContent, onChange, transformContent}: MyAppE
 );
 ```
 
+## Page Constructor Editor v2
+
+Editor provides user interface for page content management with realtime preview.
+
+Based on Iframe postMessage communication.
+
+How to use:
+
+```tsx
+import {Editor} from '@gravity-ui/page-constructor/editor-v2';
+
+export const MyAppEditor = ({initialContent, onUpdate, disableUrlField}: MyAppEditorProps) => (
+  <Editor
+    initialUrl={'https://url-to-page-with-page-constructor.com'}
+    content={initialContent}
+    disableUrlField={disableUrlField}
+    onUpdate={onUpdate}
+  />
+);
+```
+
+### How to develop
+
+```shell
+npm run deps:install
+npm run dev:playground
+```
+
+Directory `/playground` contains NextJS service with integrated PC and Editor for development purposes.
+
 ## Tests
 
 Comprehensive documentation is available at the provided [link](./test-utils/docs/README.md).

package/build/cjs/blocks/Banner/Banner.js

@@ -4,13 +4,15 @@ exports.BannerBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
+const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('banner-block');
 const BannerBlock = (props) => {
     const { animated } = props, bannerProps = tslib_1.__rest(props, ["animated"]);
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), animate: animated },
-        react_1.default.createElement(sub_blocks_1.BannerCard, Object.assign({}, bannerProps))));
+        react_1.default.createElement(grid_1.Grid, null,
+            react_1.default.createElement(sub_blocks_1.BannerCard, Object.assign({}, bannerProps)))));
 };
 exports.BannerBlock = BannerBlock;
 exports.default = exports.BannerBlock;

package/build/cjs/blocks/Banner/index.d.ts

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

package/build/cjs/blocks/Banner/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const Banner_1 = tslib_1.__importDefault(require("./Banner"));
+const schema_1 = require("./schema");
+const BannerBlockConfig = {
+    component: Banner_1.default,
+    schema: {
+        name: 'Banner Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.BannerCardProps),
+        default: {
+            color: 'rgba(54, 151, 241, 0.4)',
+            title: 'Banner Block',
+            subtitle: 'Some sort of description.',
+            button: {
+                text: 'Read more',
+            },
+        },
+    },
+};
+exports.default = BannerBlockConfig;

package/build/cjs/blocks/CardLayout/CardLayout.css

@@ -21,6 +21,7 @@ unpredictable css rules order in build */
   width: 100%;
   height: 100%;
   border-radius: 32px;
+  pointer-events: none;
 }
 .pc-card-layout-block__image img {
   object-fit: cover;

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -4,6 +4,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
 const components_1 = require("../../components");
+const ChildrenWrap_1 = tslib_1.__importDefault(require("../../components/editor/ChildrenWrap/ChildrenWrap"));
+const ItemWrap_1 = tslib_1.__importDefault(require("../../components/editor/ItemWrap/ItemWrap"));
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const DEFAULT_SIZES = {
@@ -15,11 +17,14 @@ const b = (0, utils_1.block)('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
     const _a = background || {}, { border } = _a, backgroundImageProps = tslib_1.__rest(_a, ["border"]);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
-        (title || description) && (react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: titleClassName })),
-        react_1.default.createElement("div", { className: b('content', {
-                'with-background': !(0, isEmpty_1.default)(background),
-            }) },
-            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image', { border }) }, backgroundImageProps)),
-            react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child)))))));
+        react_1.default.createElement(grid_1.Grid, null,
+            (title || description) && (react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: titleClassName })),
+            react_1.default.createElement("div", { className: b('content', {
+                    'with-background': !(0, isEmpty_1.default)(background),
+                }) },
+                react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image', { border }) }, backgroundImageProps)),
+                react_1.default.createElement(ChildrenWrap_1.default, null,
+                    react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') },
+                        react_1.default.createElement(ItemWrap_1.default, { index: index }, child))))))))));
 };
 exports.default = CardLayout;

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

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

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

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockConfig = void 0;
+const tslib_1 = require("tslib");
+const common_1 = require("../../schema/validators/common");
+const CardLayout_1 = tslib_1.__importDefault(require("./CardLayout"));
+const textSizeEnum = common_1.textSize.map((size) => ({ value: size, content: size }));
+exports.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: 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',
+            },
+        ],
+    },
+];
+const CardLayoutBlockConfig = {
+    component: CardLayout_1.default,
+    schema: {
+        name: 'Card Layout Block',
+        inputs: exports.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.',
+        },
+    },
+};
+exports.default = CardLayoutBlockConfig;

package/build/cjs/blocks/Companies/Companies.js

@@ -6,16 +6,18 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("../../components");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
 const theme_1 = require("../../context/theme");
+const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('companies-block');
 const CompaniesBlock = ({ title, description, images, animated }) => {
     const theme = (0, theme_1.useTheme)();
     const themedImages = (0, utils_1.getThemedValue)(images, theme) || {};
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), offset: 150, animate: animated },
-        react_1.default.createElement("div", { className: b('content') },
-            react_1.default.createElement(components_1.Title, { title: title, subtitle: description, colSizes: { all: 12, sm: 12 } }),
-            react_1.default.createElement("div", { className: b('images') },
-                react_1.default.createElement(components_1.Image, Object.assign({}, themedImages, { className: b('image') }))))));
+        react_1.default.createElement(grid_1.Grid, null,
+            react_1.default.createElement("div", { className: b('content') },
+                react_1.default.createElement(components_1.Title, { title: title, subtitle: description, colSizes: { all: 12, sm: 12 } }),
+                react_1.default.createElement("div", { className: b('images') },
+                    react_1.default.createElement(components_1.Image, Object.assign({}, themedImages, { className: b('image') })))))));
 };
 exports.CompaniesBlock = CompaniesBlock;
 exports.default = exports.CompaniesBlock;

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const Companies_1 = tslib_1.__importDefault(require("./Companies"));
+const schema_1 = require("./schema");
+const CompaniesBlockConfig = {
+    component: Companies_1.default,
+    schema: {
+        name: 'Companies Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.CompaniesBlock['companies-block']),
+        default: {
+            title: 'Companies Block',
+            description: 'Here is the list',
+        },
+    },
+};
+exports.default = CompaniesBlockConfig;

package/build/cjs/blocks/ContentLayout/ContentLayout.js

@@ -33,11 +33,12 @@ const ContentLayoutBlock = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = (0, react_1.useMemo)(() => getTextWidth(textWidth), [textWidth]);
-    return (react_1.default.createElement("div", { className: b({ size, theme, background: Boolean(background) }) },
-        react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
-        fileContent && (react_1.default.createElement(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (react_1.default.createElement(components_1.FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
-        background && (react_1.default.createElement("div", { className: b('background') },
-            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('background-item') }, background, { hide: isMobile }))))));
+    return (react_1.default.createElement(grid_1.Grid, null,
+        react_1.default.createElement("div", { className: b({ size, theme, background: Boolean(background) }) },
+            react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
+            fileContent && (react_1.default.createElement(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (react_1.default.createElement(components_1.FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
+            background && (react_1.default.createElement("div", { className: b('background') },
+                react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('background-item') }, background, { hide: isMobile })))))));
 };
 exports.ContentLayoutBlock = ContentLayoutBlock;
 exports.default = exports.ContentLayoutBlock;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const ContentLayout_1 = tslib_1.__importDefault(require("./ContentLayout"));
+const schema_1 = require("./schema");
+const ContentLayoutBlockConfig = {
+    component: ContentLayout_1.default,
+    schema: {
+        name: 'Content Layout Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.ContentLayoutBlock['content-layout-block']),
+        default: {
+            title: 'Content Layout Block',
+        },
+    },
+};
+exports.default = ContentLayoutBlockConfig;

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

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

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -20,26 +20,28 @@ const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_S
     const theme = (0, theme_1.useTheme)();
     const itemTitleHeadingTag = title ? 'h3' : 'h2';
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
-        react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: b('header') }),
-        react_1.default.createElement("div", { className: b('items') },
-            react_1.default.createElement(grid_1.Row, null, items.map(({ title: itemTitle, text, list, link, links, label, icon, buttons, additionalInfo, }) => {
-                const itemLinks = links || [];
-                const iconThemed = icon && (0, utils_2.getThemedValue)(icon, theme);
-                const iconData = iconThemed && (0, utils_1.getMediaImage)(iconThemed);
-                if (link) {
-                    itemLinks.push(link);
-                }
-                return (react_1.default.createElement(grid_1.Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
-                    iconData && react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: b('icon') })),
-                    react_1.default.createElement("div", { className: b('container') },
-                        itemTitle &&
-                            react_1.default.createElement(itemTitleHeadingTag, {
-                                className: b('item-title'),
-                            }, react_1.default.createElement(react_1.default.Fragment, null,
-                                react_1.default.createElement(components_1.HTML, null, itemTitle),
-                                label && (react_1.default.createElement("span", { className: b('item-label') }, label)))),
-                        react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", list: list, colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
-            })))));
+        react_1.default.createElement(grid_1.Grid, null,
+            react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: b('header') }),
+            react_1.default.createElement("div", { className: b('items') },
+                react_1.default.createElement(grid_1.Row, null, items &&
+                    items.map(({ title: itemTitle, text, list, link, links, label, icon, buttons, additionalInfo, }) => {
+                        const itemLinks = links || [];
+                        const iconThemed = icon && (0, utils_2.getThemedValue)(icon, theme);
+                        const iconData = iconThemed && (0, utils_1.getMediaImage)(iconThemed);
+                        if (link) {
+                            itemLinks.push(link);
+                        }
+                        return (react_1.default.createElement(grid_1.Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
+                            iconData && (react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: b('icon') }))),
+                            react_1.default.createElement("div", { className: b('container') },
+                                itemTitle &&
+                                    react_1.default.createElement(itemTitleHeadingTag, {
+                                        className: b('item-title'),
+                                    }, react_1.default.createElement(react_1.default.Fragment, null,
+                                        react_1.default.createElement(components_1.HTML, null, itemTitle),
+                                        label && (react_1.default.createElement("span", { className: b('item-label') }, label)))),
+                                react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", list: list, colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
+                    }))))));
 };
 exports.ExtendedFeaturesBlock = ExtendedFeaturesBlock;
 exports.default = exports.ExtendedFeaturesBlock;

package/build/cjs/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("../../editor-v2").ConfigInput[];
+        default: {
+            title: string;
+            items: {}[];
+        };
+    };
+};
+export default ExtendedFeaturesBlockConfig;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const ExtendedFeatures_1 = tslib_1.__importDefault(require("./ExtendedFeatures"));
+const schema_1 = require("./schema");
+const ExtendedFeaturesBlockConfig = {
+    component: ExtendedFeatures_1.default,
+    schema: {
+        name: 'Extended Features Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.ExtendedFeaturesBlock['extended-features-block']),
+        default: {
+            title: 'Extended Features Block',
+            items: [{}],
+        },
+    },
+};
+exports.default = ExtendedFeaturesBlockConfig;

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

@@ -15,6 +15,7 @@ exports.ExtendedFeaturesItem = {
         text: {
             type: 'string',
             contentType: 'yfm',
+            inputType: 'textarea',
         },
         label: {
             type: 'string',

package/build/cjs/blocks/FilterBlock/FilterBlock.js

@@ -10,7 +10,7 @@ const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const i18n_1 = require("./i18n");
 const b = (0, utils_1.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 = (0, react_1.useMemo)(() => {
         const allButton = allTag
             ? { id: null, title: typeof allTag === 'boolean' ? (0, i18n_1.i18n)('label-all-tag') : allTag }
@@ -31,14 +31,15 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
         return itemsToShow.map((item) => item.card);
     }, [actualTag, items]);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
-        title && (react_1.default.createElement(components_1.Title, { className: b('title', { centered: centered }), title: title, subtitle: description })),
-        tabButtons.length && (react_1.default.createElement(grid_1.Row, null,
-            react_1.default.createElement(grid_1.Col, null,
-                react_1.default.createElement(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
-        react_1.default.createElement(grid_1.Row, { className: b('block-container') },
-            react_1.default.createElement(__1.CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container') }, cards.map((card, index) => {
-                const key = (0, utils_1.getBlockKey)(card, index);
-                return react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: card, blockKey: key, key: key });
-            })))));
+        react_1.default.createElement(grid_1.Grid, null,
+            title && (react_1.default.createElement(components_1.Title, { className: b('title', { centered: centered }), title: title, subtitle: description })),
+            tabButtons.length && (react_1.default.createElement(grid_1.Row, null,
+                react_1.default.createElement(grid_1.Col, null,
+                    react_1.default.createElement(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
+            react_1.default.createElement(grid_1.Row, { className: b('block-container') },
+                react_1.default.createElement(__1.CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container') }, cards.map((card, index) => {
+                    const key = (0, utils_1.getBlockKey)(card, index);
+                    return react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: card, blockKey: index, key: key });
+                }))))));
 };
 exports.default = FilterBlock;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const FilterBlock_1 = tslib_1.__importDefault(require("./FilterBlock"));
+const schema_1 = require("./schema");
+const FilterBlockConfig = {
+    component: FilterBlock_1.default,
+    schema: {
+        name: 'Filter Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.FilterProps),
+        default: {
+            title: 'Filter Block',
+        },
+    },
+};
+exports.default = FilterBlockConfig;

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const form_generator_1 = require("../../utils/form-generator");
+const Form_1 = tslib_1.__importDefault(require("./Form"));
+const schema_1 = require("./schema");
+const FormBlockConfig = {
+    component: Form_1.default,
+    schema: {
+        name: 'Form Block',
+        inputs: (0, form_generator_1.generateFromAJV)(schema_1.FormBlock['form-block']),
+        default: {
+            title: 'Form Block',
+            formData: {},
+        },
+    },
+};
+exports.default = FormBlockConfig;

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

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