@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.0

package/build/cjs/editor/components/PagePropsForm/PagePropsForm.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagePropsForm = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const react_final_form_1 = require("react-final-form");
+const config_1 = require("../../dynamic-forms-custom/config");
+exports.PagePropsForm = (0, react_1.memo)(({ data: content, spec, onChange }) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const initialValues = (0, react_1.useMemo)(() => ({ content }), []);
+    return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => onChange(Object.assign({}, values.content)), subscription: { values: true } }),
+        react_1.default.createElement(dynamic_forms_1.DynamicField, { name: "content", spec: spec, config: config_1.dynamicConfig })))));
+});
+exports.PagePropsForm.displayName = 'PagePropsForm';

package/build/cjs/editor/components/YamlEditor/YamlEditor.css

@@ -0,0 +1,12 @@
+.pc-yaml-editor {
+  height: 100%;
+  position: relative;
+}
+.pc-yaml-editor__copy-button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+.pc-yaml-editor__copy-button_hidden {
+  visibility: hidden;
+}

package/build/cjs/editor/components/YamlEditor/YamlEditor.d.ts

@@ -0,0 +1,6 @@
+import { PageContent } from '../../../models';
+interface YamlEditorProps {
+    content: PageContent;
+}
+export declare const YamlEditor: ({ content }: YamlEditorProps) => JSX.Element;
+export {};

package/build/cjs/editor/components/YamlEditor/YamlEditor.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YamlEditor = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+const react_monaco_editor_1 = tslib_1.__importDefault(require("react-monaco-editor"));
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('yaml-editor');
+const YamlEditor = ({ content }) => {
+    const value = (0, react_1.useMemo)(() => {
+        return js_yaml_1.default.dump(content);
+    }, [content]);
+    const options = (0, react_1.useMemo)(() => {
+        return {
+            minimap: {
+                enabled: false,
+            },
+            renderWhitespace: 'all',
+            overviewRulerLanes: 0,
+            hideCursorInOverviewRuler: true,
+            scrollbar: {
+                vertical: 'hidden',
+            },
+            overviewRulerBorder: false,
+            readOnly: true,
+        };
+    }, []);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(react_monaco_editor_1.default, { value: value, language: "yaml", options: options }),
+        react_1.default.createElement(uikit_1.ClipboardButton, { className: b('copy-button'), text: value })));
+};
+exports.YamlEditor = YamlEditor;

package/build/cjs/editor/containers/Editor/Editor.d.ts

@@ -0,0 +1,2 @@
+import { EditorProps } from '../../types';
+export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, ...rest }: EditorProps) => JSX.Element;

package/build/cjs/editor/containers/Editor/Editor.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const PageConstructor_1 = require("../../../containers/PageConstructor");
+const AddBlock_1 = tslib_1.__importDefault(require("../../components/AddBlock/AddBlock"));
+const EditBlock_1 = tslib_1.__importDefault(require("../../components/EditBlock/EditBlock"));
+const ErrorBoundary_1 = require("../../components/ErrorBoundary/ErrorBoundary");
+const Layout_1 = tslib_1.__importDefault(require("../../components/Layout/Layout"));
+const NotFoundBlock_1 = require("../../components/NotFoundBlock/NotFoundBlock");
+const context_1 = require("../../context");
+const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
+const store_1 = require("../../store");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const Form_1 = require("../Form/Form");
+const Editor = (_a) => {
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
+    const { content, activeBlockIndex, errorBoundaryState, viewMode, theme, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, onThemeUpdate, } = (0, store_1.useEditorState)(rest);
+    const formSpecs = (0, useFormSpec_1.default)(customSchema);
+    const isEditingMode = viewMode === types_1.ViewModeItem.Edititng;
+    const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
+    const outgoingProps = (0, react_1.useMemo)(() => {
+        const custom = isEditingMode
+            ? (0, utils_1.addCustomDecorator)([
+                (props) => react_1.default.createElement(NotFoundBlock_1.NotFoundBlock, Object.assign({}, props)),
+                (props) => (react_1.default.createElement(EditBlock_1.default, Object.assign({}, injectEditBlockProps(props)))),
+                // need errorBoundaryState flag to reset error on content update
+                (props) => (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, Object.assign({}, props, { key: `${(0, utils_1.getBlockId)(props)}-${errorBoundaryState}` }))),
+            ], rest.custom)
+            : rest.custom;
+        return {
+            content: transformedContent,
+            custom,
+            viewMode,
+        };
+    }, [
+        injectEditBlockProps,
+        errorBoundaryState,
+        isEditingMode,
+        viewMode,
+        transformedContent,
+        rest.custom,
+    ]);
+    const context = (0, react_1.useMemo)(() => ({
+        constructorProps: {
+            content: transformedContent,
+            custom: rest.custom,
+        },
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode), theme }),
+        deviceEmulationSettings,
+    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings, theme]);
+    (0, react_1.useEffect)(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(content);
+    }, [content, onChange]);
+    return (react_1.default.createElement(context_1.EditorContext.Provider, { value: context },
+        react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate, theme: theme, onThemeChange: onThemeUpdate },
+            isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
+                react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
+            react_1.default.createElement(Layout_1.default.Right, null,
+                react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState },
+                    react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps, { theme: theme }),
+                        react_1.default.createElement(PageConstructor_1.PageConstructor, Object.assign({}, outgoingProps)))),
+                isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd })))));
+};
+exports.Editor = Editor;

package/build/cjs/editor/containers/Form/Form.css

@@ -0,0 +1,115 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-editor-form {
+  --top-level-font-size: var(--g-text-display-2-font-size);
+  --top-level-line-height: var(--g-text-display-2-line-height);
+  --block-level-complex-propery-font-size: var(--g-text-body-3-font-size);
+  --block-level-complex-property-line-height: var(--g-text-body-3-line-height);
+  --complex-property-font-size: var(--g-text-body-2-font-size);
+  --complex-property-line-height: var(--g-text-body-2-line-height);
+  --property-font-size: var(--g-text-body-1-font-size);
+  --property-line-height: var(--g-text-body-1-line-height);
+  --input-min-width: 150px;
+  --property-title-width: 96px;
+  --button-height: 48px;
+  --icon-size: 32px;
+  --icon-margin: 42px;
+  --property-font-weight: 500;
+  --header-text-size: var(--top-level-font-size);
+  --header-line-height: var(--top-level-line-height);
+  --text-size: var(--top-level-font-size);
+  --line-height: var(--top-level-line-height);
+}
+.pc-editor-form .df-use-search .df-use-search {
+  --button-height: 32px;
+  --icon-size: 20px;
+  --icon-margin: 30px;
+  --header-text-size: var(--block-level-complex-propery-font-size);
+  --header-line-height: var(--block-level-complex-property-line-height);
+  --text-size: var(--property-font-size);
+  --line-height: var(--property-line-height);
+  --property-font-weight: 400;
+}
+.pc-editor-form .df-use-search .df-use-search .df-use-search {
+  --button-height: 28px;
+  --icon-size: 16px;
+  --icon-margin: 25px;
+  --property-font-weight: 400;
+  --header-text-size: var(--complex-property-font-size);
+  --header-line-height: var(--complex-property-line-height);
+  --text-size: var(--property-font-size);
+  --line-height: var(--property-line-height);
+  --oneof-text-size: var(--complex-propery-font-size);
+  --oneof-line-height: var(--complex-property-line-height);
+}
+.pc-editor-form .df-row {
+  width: inherit;
+}
+.pc-editor-form .df-row__left {
+  width: var(--property-title-width);
+}
+.pc-editor-form .df-row__title {
+  font-size: var(--text-size);
+  line-height: var(--line-height);
+  font-weight: var(--property-font-weight);
+  white-space: nowrap;
+}
+.pc-editor-form .df-simple-vertical-accordeon textarea {
+  min-width: var(--input-min-width);
+  min-height: var(--input-min-width);
+}
+.pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
+  font-size: var(--header-text-size);
+  line-height: var(--header-line-height);
+}
+.pc-editor-form .df-simple-vertical-accordeon__header .yc-button {
+  --g-button-height: var(--button-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pc-editor-form .df-simple-vertical-accordeon__header .yc-button .yc-button__icon-inner > svg {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--g-color-text-hint);
+}
+.pc-editor-form .df-simple-vertical-accordeon__header .yc-button .yc-button__icon_side_right ~ .yc-button__text {
+  margin-right: var(--icon-margin);
+}
+.pc-editor-form .df-simple-vertical-accordeon__body {
+  margin-top: 0px;
+  padding-top: 12px;
+}
+.pc-editor-form .df-use-search {
+  margin: 4px 0;
+}
+.pc-editor-form .df-simple-vertical-accordeon__body,
+.pc-editor-form .df-group-indent > .df-use-search {
+  margin-top: 0;
+  margin-left: 1px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 12px;
+  border-left: 1px solid var(--g-color-line-generic-accent);
+}
+.pc-editor-form .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
+  padding-left: 12px;
+}
+.pc-editor-form .g-select,
+.pc-editor-form .yc-text-input {
+  min-width: var(--input-min-width);
+  width: 100%;
+}
+.pc-editor-form + .pc-editor-form {
+  margin-top: 12px;
+}
+.pc-editor-form__tabs {
+  --g-color-base-brand: var(--pc-color-base-neon);
+  margin-bottom: 20px;
+}
+.pc-editor-form__block-form {
+  margin-bottom: 16px;
+}
+.pc-editor-form_yaml-editor-enabled {
+  height: 100%;
+}

package/build/cjs/editor/containers/Form/Form.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PageContent } from '../../../models';
+import { FormSpecs } from '../../dynamic-forms-custom/parser/types';
+export interface FormProps {
+    content: PageContent;
+    activeBlockIndex: number;
+    spec: FormSpecs;
+    onChange: (content: PageContent) => void;
+    onSelect: (index: number) => void;
+}
+export declare const Form: React.MemoExoticComponent<({ content, onChange, activeBlockIndex, onSelect, spec }: FormProps) => JSX.Element>;

package/build/cjs/editor/containers/Form/Form.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const BlockForm_1 = require("../../components/BlockForm/BlockForm");
+const PagePropsForm_1 = require("../../components/PagePropsForm/PagePropsForm");
+const YamlEditor_1 = require("../../components/YamlEditor/YamlEditor");
+var FormTab;
+(function (FormTab) {
+    FormTab["Blocks"] = "blocks";
+    FormTab["Page"] = "page";
+    FormTab["Yaml"] = "yaml";
+})(FormTab || (FormTab = {}));
+const b = (0, utils_1.block)('editor-form');
+const tabsItems = Object.values(FormTab).map((tab) => ({
+    id: tab,
+    title: tab,
+}));
+exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelect, spec }) => {
+    const [activeTab, setActiveTab] = react_1.default.useState(FormTab.Blocks);
+    const _a = content || {}, { blocks } = _a, page = tslib_1.__rest(_a, ["blocks"]);
+    const { blocks: blocksSpec, page: pageSpec } = spec || {};
+    let form;
+    switch (activeTab) {
+        case FormTab.Page: {
+            form = (react_1.default.createElement(PagePropsForm_1.PagePropsForm, { spec: pageSpec, data: page, onChange: (data) => {
+                    return onChange(Object.assign(Object.assign({}, content), data));
+                } }));
+            break;
+        }
+        case FormTab.Blocks: {
+            form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement("div", { className: b('block-form'), key: (0, utils_1.getBlockKey)(blockData, index) },
+                react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+                        onChange(Object.assign(Object.assign({}, content), { blocks: [
+                                ...blocks.slice(0, index),
+                                data,
+                                ...blocks.slice(index + 1),
+                            ] }));
+                    }, onSelect: () => onSelect(index) }))) : null)));
+            break;
+        }
+        case FormTab.Yaml: {
+            form = react_1.default.createElement(YamlEditor_1.YamlEditor, { content: content });
+            break;
+        }
+    }
+    return (react_1.default.createElement("div", { className: b({ 'yaml-editor-enabled': activeTab === FormTab.Yaml }) },
+        react_1.default.createElement(uikit_1.Tabs, { activeTab: activeTab, className: b('tabs'), items: tabsItems, onSelectTab: setActiveTab }),
+        form));
+});
+exports.Form.displayName = 'Form';

package/build/cjs/editor/context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PageConstructorProps, PageConstructorProviderProps } from '../containers/PageConstructor';
+import { EditorProps } from './types';
+export interface EditorContextType {
+    constructorProps?: PageConstructorProps;
+    providerProps?: PageConstructorProviderProps;
+    deviceEmulationSettings?: EditorProps['deviceEmulationSettings'];
+}
+export declare const EditorContext: React.Context<Partial<EditorContextType>>;

package/build/cjs/editor/context.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.EditorContext = react_1.default.createContext({});

package/build/cjs/editor/data/previews/default-preview.js

@@ -13,6 +13,6 @@ const DefaultPreview = (props) => (react_1.default.createElement("svg", Object.a
     react_1.default.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#E7E7E7" }),
     react_1.default.createElement("rect", { x: "33.6977", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
     react_1.default.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
-    react_1.default.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
     react_1.default.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
 exports.default = DefaultPreview;

package/build/cjs/editor/data/previews/header-block.js

@@ -5,15 +5,15 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const svg_1 = require("../../../utils/svg");
 const Header = (props) => (react_1.default.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
     react_1.default.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
-    react_1.default.createElement("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
     react_1.default.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
-    react_1.default.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "currentColor" }),
     react_1.default.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
     react_1.default.createElement("rect", { x: "14.7674", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
     react_1.default.createElement("rect", { x: "14.7674", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
     react_1.default.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
-    react_1.default.createElement("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
-    react_1.default.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
-    react_1.default.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }),
+    react_1.default.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }),
+    react_1.default.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }),
     react_1.default.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
 exports.default = Header;

package/build/cjs/editor/data/templates/banner-block.json

@@ -0,0 +1,25 @@
+{
+  "template": {
+    "theme": "light",
+    "type": "banner-block",
+    "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+    "subtitle": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    "image": {
+      "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
+      "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png"
+    },
+    "disableCompress": true,
+    "color": {
+      "light": "#EFF2F8",
+      "dark": "#262626"
+    },
+    "button": {
+      "text": "Learn more",
+      "url": "https://example.com"
+    }
+  },
+  "meta": {
+    "title": "Banner",
+    "description": "This is banner block"
+  }
+}

package/build/cjs/editor/data/templates/card-layout-block.json

@@ -0,0 +1,39 @@
+{
+  "template": {
+    "type": "card-layout-block",
+    "title": "Card Layout",
+    "description": "Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.",
+    "children": [
+      {
+        "type": "layout-item",
+        "media": {
+          "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
+        },
+        "content": {
+          "title": "Lorem ipsum",
+          "text": "Dolor sit amet"
+        }
+      },
+      {
+        "type": "layout-item",
+        "media": {
+          "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
+        },
+        "content": {
+          "title": "Lorem ipsum",
+          "text": "Dolor sit amet"
+        }
+      },
+      {
+        "type": "layout-item",
+        "media": {
+          "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
+        },
+        "content": {
+          "title": "Lorem ipsum",
+          "text": "Dolor sit amet"
+        }
+      }
+    ]
+  }
+}

package/build/cjs/editor/data/templates/companies-block.json

@@ -0,0 +1,20 @@
+{
+  "template": {
+    "type": "companies-block",
+    "title": "Page constructor",
+    "images": {
+      "light": {
+        "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_light.svg",
+        "tablet": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_light.svg",
+        "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_light.svg",
+        "alt": "Page constructor"
+      },
+      "dark": {
+        "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_dark.svg",
+        "tablet": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_dark.svg",
+        "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_dark.svg",
+        "alt": "Page constructor"
+      }
+    }
+  }
+}

package/build/cjs/editor/data/templates/content-layout-block.json

@@ -0,0 +1,56 @@
+{
+  "template": {
+    "type": "content-layout-block",
+    "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    "textContent": {
+      "title": "Lorem ipsum dolor sit amet",
+      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+      "buttons": [
+        {
+          "text": "Button\r",
+          "theme": "action",
+          "url": "https://example.com"
+        },
+        {
+          "text": "Button",
+          "theme": "outlined",
+          "url": "https://example.com"
+        }
+      ],
+      "links": [
+        {
+          "url": "https://example.com",
+          "text": "Link",
+          "theme": "normal",
+          "arrow": true
+        }
+      ]
+    },
+    "fileContent": [
+      {
+        "href": "https://example.xls",
+        "text": "File xls"
+      },
+      {
+        "href": "https://example.fig",
+        "text": "File PNG, JPG, and SVG format"
+      },
+      {
+        "href": "https://example.pdf",
+        "text": "Pdf file"
+      },
+      {
+        "href": "https://example.zip",
+        "text": "Archive file"
+      },
+      {
+        "href": "https://example.doc",
+        "text": "Microsoft Word document"
+      },
+      {
+        "href": "https://example.ppt",
+        "text": "PPT file"
+      }
+    ]
+  }
+}

package/build/cjs/editor/data/templates/extended-features-block.json

@@ -0,0 +1,56 @@
+{
+  "template": {
+    "type": "extended-features-block",
+    "title": {
+      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+      "textSize": "m"
+    },
+    "items": [
+      {
+        "title": "Sed do eiusmod tempor incididunt",
+        "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        "icon": {
+          "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_dark.svg"
+        },
+        "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+      },
+      {
+        "title": "Sed do eiusmod tempor",
+        "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        "icon": {
+          "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_dark.svg"
+        },
+        "buttons": [
+          {
+            "text": "Button",
+            "theme": "action",
+            "url": "https://example.com"
+          },
+          {
+            "text": "Button",
+            "theme": "outlined",
+            "url": "https://example.com"
+          }
+        ]
+      },
+      {
+        "title": "Sed do eiusmod tempor incididunt",
+        "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        "icon": {
+          "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg"
+        },
+        "links": [
+          {
+            "text": "Go",
+            "url": "#",
+            "arrow": true,
+            "theme": "normal"
+          }
+        ]
+      }
+    ]
+  }
+}

package/build/cjs/editor/data/templates/filter-block.json

@@ -0,0 +1,62 @@
+{
+  "template": {
+    "type": "filter-block",
+    "title": "Card Layout",
+    "description": "Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.",
+    "tags": [
+      {
+        "id": "one",
+        "label": "First very long label"
+      },
+      {
+        "id": "two",
+        "label": "Second very long label"
+      },
+      {
+        "id": "three",
+        "label": "Third very long label"
+      }
+    ],
+    "items": [
+      {
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
+          },
+          "content": {
+            "title": "Lorem ipsum",
+            "text": "Dolor sit amet"
+          }
+        },
+        "tags": ["one"]
+      },
+      {
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
+          },
+          "content": {
+            "title": "Lorem ipsum",
+            "text": "Dolor sit amet"
+          }
+        },
+        "tags": ["two"]
+      },
+      {
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
+          },
+          "content": {
+            "title": "Lorem ipsum",
+            "text": "Dolor sit amet"
+          }
+        },
+        "tags": ["three"]
+      }
+    ]
+  }
+}