@gravity-ui/page-constructor 5.26.0 → 5.27.0

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

@@ -8,8 +8,8 @@ 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 },
+    const { animated, className } = props, bannerProps = tslib_1.__rest(props, ["animated", "className"]);
+    return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), animate: animated },
         react_1.default.createElement(sub_blocks_1.BannerCard, Object.assign({}, bannerProps))));
 };
 exports.BannerBlock = BannerBlock;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -9,6 +9,7 @@ const RootCn_1 = tslib_1.__importDefault(require("../../components/RootCn"));
 const constructor_items_1 = require("../../constructor-items");
 const animateContext_1 = require("../../context/animateContext");
 const innerContext_1 = require("../../context/innerContext");
+const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const models_1 = require("../../models");
@@ -54,7 +55,8 @@ const Constructor = (props) => {
 };
 exports.Constructor = Constructor;
 const PageConstructor = (props) => {
-    const { content: { animated = true } = {} } = props, rest = tslib_1.__rest(props, ["content"]);
+    const { isAnimationEnabled = true } = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
+    const { content: { animated = isAnimationEnabled } = {} } = props, rest = tslib_1.__rest(props, ["content"]);
     return (react_1.default.createElement(animateContext_1.AnimateContext.Provider, { value: { animated } },
         react_1.default.createElement(exports.Constructor, Object.assign({ content: props.content }, rest))));
 };

package/build/cjs/context/projectSettingsContext/ProjectSettingsContext.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface ProjectSettingsContextProps {
     disableCompress?: boolean;
+    isAnimationEnabled?: boolean;
 }
 export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;

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

@@ -9,16 +9,30 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const constructor_items_1 = require("../../../constructor-items");
 const utils_1 = require("../../../utils");
-const data_1 = tslib_1.__importDefault(require("../../data"));
+const data_1 = require("../../data");
 const b = (0, utils_1.block)('add-block');
 const sortedBlockNames = Object.keys(constructor_items_1.blockMap).sort();
 const AddBlock = ({ onAdd, className }) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [search, setSearch] = (0, react_1.useState)('');
+    const [editorBlocksData, setEditorBlocksData] = (0, react_1.useState)(null);
     const ref = (0, react_1.useRef)(null);
-    const blocks = (0, react_1.useMemo)(() => sortedBlockNames.filter((blockName) => data_1.default[blockName].meta.title
-        .toLocaleLowerCase()
-        .startsWith(search.toLocaleLowerCase())), [search]);
+    const blocks = (0, react_1.useMemo)(() => {
+        if (!editorBlocksData) {
+            return [];
+        }
+        return sortedBlockNames.filter((blockName) => {
+            var _a;
+            return (_a = editorBlocksData[blockName]) === null || _a === void 0 ? void 0 : _a.meta.title.toLocaleLowerCase().startsWith(search.toLocaleLowerCase());
+        });
+    }, [editorBlocksData, search]);
+    (0, react_1.useEffect)(() => {
+        const loadEditorBlocksData = async () => {
+            const data = await (0, data_1.getEditorBlocksData)();
+            setEditorBlocksData(data);
+        };
+        loadEditorBlocksData();
+    }, []);
     return (react_1.default.createElement("div", { className: b(null, className), ref: ref },
         react_1.default.createElement("button", { className: b('button'), type: "button", onClick: () => {
                 setIsOpened(!isOpened);
@@ -30,8 +44,11 @@ const AddBlock = ({ onAdd, className }) => {
                 react_1.default.createElement(uikit_1.TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
             react_1.default.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
                 var _a;
-                const blockData = data_1.default[blockName];
-                const Preview = blockData === null || blockData === void 0 ? void 0 : blockData.preview;
+                const blockData = editorBlocksData === null || editorBlocksData === void 0 ? void 0 : editorBlocksData[blockName];
+                if (!blockData) {
+                    return null;
+                }
+                const Preview = blockData.preview;
                 return (react_1.default.createElement("div", { key: blockName, className: b('block'), onClick: () => {
                         onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
                         setIsOpened(false);

package/build/cjs/editor/data/index.d.ts

@@ -9,5 +9,6 @@ export interface EdiorBlockData {
         description?: string;
     };
 }
-declare const EditorBlocksData: Record<BlockType, EdiorBlockData>;
-export default EditorBlocksData;
+type EditorBlocksData = Partial<Record<BlockType, EdiorBlockData>>;
+declare function getEditorBlocksData(): Promise<EditorBlocksData>;
+export { EditorBlocksData, getEditorBlocksData };

package/build/cjs/editor/data/index.js

@@ -1,13 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEditorBlocksData = void 0;
 const tslib_1 = require("tslib");
 const models_1 = require("../../models");
 const utils_1 = require("../utils");
 const default_preview_1 = tslib_1.__importDefault(require("./previews/default-preview"));
-const getBlockTemplate = (blockType) => require(`./templates/${blockType}.json`);
+const header_block_1 = tslib_1.__importDefault(require("./previews/header-block"));
+const getBlockTemplate = (blockType) => { var _a; return (_a = `./templates/${blockType}.json`, Promise.resolve().then(() => tslib_1.__importStar(require(_a)))).then((data) => data.default); };
 const getBlockPreview = (blockType) => {
     try {
-        return require(`./previews/${blockType}.tsx`).default;
+        if (blockType === models_1.BlockType.HeaderBlock) {
+            return header_block_1.default;
+        }
+        return default_preview_1.default;
     }
     catch (err) {
         /*eslint-disable no-console */
@@ -15,13 +20,15 @@ const getBlockPreview = (blockType) => {
         return default_preview_1.default;
     }
 };
-const EditorBlocksData = Object.values(models_1.BlockType).reduce((previewData, blockType) => {
-    const template = getBlockTemplate(blockType);
-    const preview = getBlockPreview(blockType);
-    template.meta = template.meta || {};
-    template.meta.title = template.meta.title || (0, utils_1.formatBlockName)(blockType);
-    /* eslint-disable no-param-reassign */
-    previewData[blockType] = Object.assign(Object.assign({}, template), { preview });
-    return previewData;
-}, {});
-exports.default = EditorBlocksData;
+async function getEditorBlocksData() {
+    const EdiorBlockData = {};
+    for (const blockType of Object.values(models_1.BlockType)) {
+        const template = await getBlockTemplate(blockType);
+        const preview = getBlockPreview(blockType);
+        template.meta = template.meta || {};
+        template.meta.title = template.meta.title || (0, utils_1.formatBlockName)(blockType);
+        EdiorBlockData[blockType] = Object.assign(Object.assign({}, template), { preview });
+    }
+    return EdiorBlockData;
+}
+exports.getEditorBlocksData = getEditorBlocksData;

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

package/build/cjs/sub-blocks/BannerCard/BannerCard.js

@@ -8,7 +8,7 @@ const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('banner-card');
 const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
+    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' } = {}, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
     const theme = (0, theme_1.useTheme)();
     const contentStyle = {};
     if (color) {
@@ -21,8 +21,8 @@ const BannerCard = (props) => {
                     react_1.default.createElement("h2", { className: b('title') },
                         react_1.default.createElement(components_1.HTML, null, title)),
                     subtitle && (react_1.default.createElement(components_1.YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                react_1.default.createElement(components_1.RouterLink, { href: url },
-                    react_1.default.createElement(components_1.Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
+                url && (react_1.default.createElement(components_1.RouterLink, { href: url },
+                    react_1.default.createElement(components_1.Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text !== null && text !== void 0 ? text : '', url: url, target: target })))),
             react_1.default.createElement(components_1.BackgroundImage, { className: b('image'), src: (0, utils_1.getThemedValue)(image, theme), disableCompress: disableCompress }))));
 };
 exports.BannerCard = BannerCard;

package/build/esm/blocks/Banner/Banner.js

@@ -6,8 +6,8 @@ import { block } from '../../utils';
 import './Banner.css';
 const b = block('banner-block');
 export const BannerBlock = (props) => {
-    const { animated } = props, bannerProps = __rest(props, ["animated"]);
-    return (React.createElement(AnimateBlock, { className: b(), animate: animated },
+    const { animated, className } = props, bannerProps = __rest(props, ["animated", "className"]);
+    return (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
         React.createElement(BannerCard, Object.assign({}, bannerProps))));
 };
 export default BannerBlock;

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,11 +1,12 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import '@diplodoc/transform/dist/js/yfm';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import RootCn from '../../components/RootCn';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
+import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
@@ -51,7 +52,8 @@ export const Constructor = (props) => {
                         React.createElement(ConstructorBlocks, { items: restBlocks })))))))));
 };
 export const PageConstructor = (props) => {
-    const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);
+    const { isAnimationEnabled = true } = useContext(ProjectSettingsContext);
+    const { content: { animated = isAnimationEnabled } = {} } = props, rest = __rest(props, ["content"]);
     return (React.createElement(AnimateContext.Provider, { value: { animated } },
         React.createElement(Constructor, Object.assign({ content: props.content }, rest))));
 };

package/build/esm/context/projectSettingsContext/ProjectSettingsContext.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface ProjectSettingsContextProps {
     disableCompress?: boolean;
+    isAnimationEnabled?: boolean;
 }
 export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;

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

@@ -1,22 +1,36 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 // TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Popup, TextInput } from '@gravity-ui/uikit';
 import { blockMap } from '../../../constructor-items';
 import { block } from '../../../utils';
-import EditorBlocksData from '../../data';
+import { getEditorBlocksData } from '../../data';
 import './AddBlock.css';
 const b = block('add-block');
 const sortedBlockNames = Object.keys(blockMap).sort();
 const AddBlock = ({ onAdd, className }) => {
     const [isOpened, setIsOpened] = useState(false);
     const [search, setSearch] = useState('');
+    const [editorBlocksData, setEditorBlocksData] = useState(null);
     const ref = useRef(null);
-    const blocks = useMemo(() => sortedBlockNames.filter((blockName) => EditorBlocksData[blockName].meta.title
-        .toLocaleLowerCase()
-        .startsWith(search.toLocaleLowerCase())), [search]);
+    const blocks = useMemo(() => {
+        if (!editorBlocksData) {
+            return [];
+        }
+        return sortedBlockNames.filter((blockName) => {
+            var _a;
+            return (_a = editorBlocksData[blockName]) === null || _a === void 0 ? void 0 : _a.meta.title.toLocaleLowerCase().startsWith(search.toLocaleLowerCase());
+        });
+    }, [editorBlocksData, search]);
+    useEffect(() => {
+        const loadEditorBlocksData = async () => {
+            const data = await getEditorBlocksData();
+            setEditorBlocksData(data);
+        };
+        loadEditorBlocksData();
+    }, []);
     return (React.createElement("div", { className: b(null, className), ref: ref },
         React.createElement("button", { className: b('button'), type: "button", onClick: () => {
                 setIsOpened(!isOpened);
@@ -28,8 +42,11 @@ const AddBlock = ({ onAdd, className }) => {
                 React.createElement(TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
             React.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
                 var _a;
-                const blockData = EditorBlocksData[blockName];
-                const Preview = blockData === null || blockData === void 0 ? void 0 : blockData.preview;
+                const blockData = editorBlocksData === null || editorBlocksData === void 0 ? void 0 : editorBlocksData[blockName];
+                if (!blockData) {
+                    return null;
+                }
+                const Preview = blockData.preview;
                 return (React.createElement("div", { key: blockName, className: b('block'), onClick: () => {
                         onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
                         setIsOpened(false);

package/build/esm/editor/data/index.d.ts

@@ -9,5 +9,6 @@ export interface EdiorBlockData {
         description?: string;
     };
 }
-declare const EditorBlocksData: Record<BlockType, EdiorBlockData>;
-export default EditorBlocksData;
+type EditorBlocksData = Partial<Record<BlockType, EdiorBlockData>>;
+declare function getEditorBlocksData(): Promise<EditorBlocksData>;
+export { EditorBlocksData, getEditorBlocksData };

package/build/esm/editor/data/index.js

@@ -1,10 +1,14 @@
 import { BlockType } from '../../models';
 import { formatBlockName } from '../utils';
 import DefaultPreview from './previews/default-preview';
-const getBlockTemplate = (blockType) => require(`./templates/${blockType}.json`);
+import HeaderBlock from './previews/header-block';
+const getBlockTemplate = (blockType) => import(`./templates/${blockType}.json`).then((data) => data.default);
 const getBlockPreview = (blockType) => {
     try {
-        return require(`./previews/${blockType}.tsx`).default;
+        if (blockType === BlockType.HeaderBlock) {
+            return HeaderBlock;
+        }
+        return DefaultPreview;
     }
     catch (err) {
         /*eslint-disable no-console */
@@ -12,13 +16,15 @@ const getBlockPreview = (blockType) => {
         return DefaultPreview;
     }
 };
-const EditorBlocksData = Object.values(BlockType).reduce((previewData, blockType) => {
-    const template = getBlockTemplate(blockType);
-    const preview = getBlockPreview(blockType);
-    template.meta = template.meta || {};
-    template.meta.title = template.meta.title || formatBlockName(blockType);
-    /* eslint-disable no-param-reassign */
-    previewData[blockType] = Object.assign(Object.assign({}, template), { preview });
-    return previewData;
-}, {});
-export default EditorBlocksData;
+async function getEditorBlocksData() {
+    const EdiorBlockData = {};
+    for (const blockType of Object.values(BlockType)) {
+        const template = await getBlockTemplate(blockType);
+        const preview = getBlockPreview(blockType);
+        template.meta = template.meta || {};
+        template.meta.title = template.meta.title || formatBlockName(blockType);
+        EdiorBlockData[blockType] = Object.assign(Object.assign({}, template), { preview });
+    }
+    return EdiorBlockData;
+}
+export { getEditorBlocksData };

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

package/build/esm/sub-blocks/BannerCard/BannerCard.js

@@ -5,7 +5,7 @@ import { block, getThemedValue } from '../../utils';
 import './BannerCard.css';
 const b = block('banner-card');
 export const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
+    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' } = {}, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
     const theme = useTheme();
     const contentStyle = {};
     if (color) {
@@ -18,8 +18,8 @@ export const BannerCard = (props) => {
                     React.createElement("h2", { className: b('title') },
                         React.createElement(HTML, null, title)),
                     subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                React.createElement(RouterLink, { href: url },
-                    React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
+                url && (React.createElement(RouterLink, { href: url },
+                    React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text !== null && text !== void 0 ? text : '', url: url, target: target })))),
             React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
 };
 export default BannerCard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.26.0",
+  "version": "5.27.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -202,6 +202,8 @@
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.0",
     "typescript": "^4.9.4",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vite-plugin-svgr": "^4.2.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-shell-plugin-next": "^2.3.1"

package/server/models/constructor-items/sub-blocks.d.ts

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {