@gravity-ui/page-constructor 1.14.0 → 1.15.0-alpha.0

package/build/cjs/schema/validators/event.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsEventV2Schema = exports.AnalyticsEventSchema = void 0;
+exports.AnalyticsEventSchema = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['name'],
+    properties: {
+        name: {
+            type: 'string',
+        },
+        type: {
+            type: 'string',
+        },
+        counters: {
+            type: 'object',
+            additionalProperties: false,
+            required: [],
+            properties: {
+                include: {
+                    type: 'array',
+                    items: {
+                        type: 'string',
+                    },
+                },
+                exclude: {
+                    type: 'array',
+                    items: {
+                        type: 'string',
+                    },
+                },
+            },
+        },
+        category: {
+            type: 'string',
+        },
+        label: {
+            type: 'string',
+        },
+        params: {
+            type: 'array',
+            items: {
+                type: 'object',
+                additionalProperties: false,
+                required: ['key', 'value'],
+                properties: {
+                    key: {
+                        type: 'string',
+                    },
+                    value: {
+                        type: 'string',
+                    },
+                },
+            },
+        },
+    },
+};
+exports.AnalyticsEventV2Schema = {
+    type: 'object',
+    propertyNames: { type: 'string' },
+    additionalProperty: { type: 'number' },
+    required: ['name'],
+    properties: {
+        name: {
+            type: 'string',
+        },
+        type: {
+            type: 'string',
+        },
+        counters: {
+            type: 'object',
+            additionalProperties: false,
+            required: [],
+            properties: {
+                include: {
+                    type: 'array',
+                    items: {
+                        type: 'string',
+                    },
+                },
+                exclude: {
+                    type: 'array',
+                    items: {
+                        type: 'string',
+                    },
+                },
+            },
+        },
+    },
+};

package/build/cjs/sub-blocks/HubspotForm/index.js

@@ -12,8 +12,9 @@ const b = (0, utils_1.block)('hubspot-form');
 const HubspotForm = (props) => {
     const { className, theme: themeProp, isMobile: isMobileProp, formId, formInstanceId, portalId, region, formClassName, pixelEvents, 
     // hubspotEvents, // TODO: decide how to handle them
-    onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, } = props;
+    analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
+    const handleAnalytics = (0, hooks_1.useAnalytics)();
     const { themeValue } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const isMobileValue = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const theme = themeProp !== null && themeProp !== void 0 ? themeProp : themeValue;
@@ -24,9 +25,19 @@ const HubspotForm = (props) => {
         onLoad,
         onSubmit: (e) => {
             handleMetrika === null || handleMetrika === void 0 ? void 0 : handleMetrika({ pixelEvents });
+            handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
         },
-    }), [onBeforeLoad, onBeforeSubmit, onLoad, handleMetrika, pixelEvents, onSubmit]);
+    }), [
+        onBeforeLoad,
+        onBeforeSubmit,
+        onLoad,
+        handleMetrika,
+        pixelEvents,
+        handleAnalytics,
+        analyticsEvents,
+        onSubmit,
+    ]);
     (0, hooks_1.useHandleHubspotEvents)(handlers, formId);
     return (react_1.default.createElement(HubspotFormContainer_1.default, { key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
 };

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

@@ -173,6 +173,84 @@ export declare const BannerCardProps: {
                         };
                     };
                 };
+                analyticsEvents: {
+                    anyOf: ({
+                        type: string;
+                        propertyNames: {
+                            type: string;
+                        };
+                        additionalProperty: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                        };
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            propertyNames: {
+                                type: string;
+                            };
+                            additionalProperty: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        };
+                    })[];
+                };
                 target: {
                     type: string;
                     enum: string[];
@@ -375,6 +453,84 @@ export declare const BannerBlock: {
                             };
                         };
                     };
+                    analyticsEvents: {
+                        anyOf: ({
+                            type: string;
+                            propertyNames: {
+                                type: string;
+                            };
+                            additionalProperty: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                propertyNames: {
+                                    type: string;
+                                };
+                                additionalProperty: {
+                                    type: string;
+                                };
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    type: {
+                                        type: string;
+                                    };
+                                    counters: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: never[];
+                                        properties: {
+                                            include: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                            exclude: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                     target: {
                         type: string;
                         enum: string[];
@@ -578,6 +734,84 @@ export declare const BannerCard: {
                             };
                         };
                     };
+                    analyticsEvents: {
+                        anyOf: ({
+                            type: string;
+                            propertyNames: {
+                                type: string;
+                            };
+                            additionalProperty: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                propertyNames: {
+                                    type: string;
+                                };
+                                additionalProperty: {
+                                    type: string;
+                                };
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    type: {
+                                        type: string;
+                                    };
+                                    counters: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: never[];
+                                        properties: {
+                                            include: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                            exclude: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                     target: {
                         type: string;
                         enum: string[];

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

@@ -426,6 +426,84 @@ export declare const MediaBlock: {
                             };
                         };
                     };
+                    analyticsEvents: {
+                        anyOf: ({
+                            type: string;
+                            propertyNames: {
+                                type: string;
+                            };
+                            additionalProperty: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                propertyNames: {
+                                    type: string;
+                                };
+                                additionalProperty: {
+                                    type: string;
+                                };
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    type: {
+                                        type: string;
+                                    };
+                                    counters: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: never[];
+                                        properties: {
+                                            include: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                            exclude: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                     target: {
                         type: string;
                         enum: string[];

package/build/esm/components/Button/Button.js

@@ -5,20 +5,23 @@ import { block, setUrlTld } from '../../utils';
 import { toCommonSize, toCommonView } from './utils';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { useMetrika } from '../../hooks/useMetrika';
+import { useAnalytics } from '../../hooks';
 import { Github } from '../../icons';
 import './Button.css';
 const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
+    const handleAnalytics = useAnalytics();
     const { lang, tld } = useContext(LocaleContext);
-    const { className, metrikaGoals, pixelEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "size", "theme", "url", "img", "onClick", "text"]);
+    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
     const defaultImgPosition = 'left';
     const onClick = useCallback(() => {
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
         if (onClickOrigin) {
             onClickOrigin();
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, onClickOrigin]);
+    }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };

package/build/esm/components/CardBase/CardBase.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactElement, HTMLAttributeAnchorTarget } from 'react';
 import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
+import { AnalyticsEventV2 } from '../../models/common';
 import './CardBase.css';
 export interface CardBaseProps extends CardBaseParams {
     className?: string;
@@ -10,6 +11,7 @@ export interface CardBaseProps extends CardBaseParams {
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
 }
 export interface CardHeaderBaseProps {
     className?: string;

package/build/esm/components/CardBase/CardBase.js

@@ -3,14 +3,16 @@ import { block } from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
 import { useMetrika } from '../../hooks/useMetrika';
+import { useAnalytics } from '../../hooks';
 import './CardBase.css';
 const b = block('card-base-block');
 const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, contentClassName, children, url, target, border = 'shadow', } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
     const handleMetrika = useMetrika();
+    const handleAnalytics = useAnalytics();
     let header, content, footer, image, headerClass, footerClass;
     function handleChild(child) {
         switch (child.type) {
@@ -43,6 +45,7 @@ export const Layout = (props) => {
     const fullClassName = b({ border }, className);
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
     };
     return url ? (React.createElement(RouterLink, { href: url },
         React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (React.createElement("div", { className: fullClassName }, cardContent));

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import { block } from '../../utils';
 import { useMetrika } from '../../hooks/useMetrika';
+import { useAnalytics } from '../../hooks';
 import './HeaderBreadcrumbs.css';
 const b = block('header-breadcrumbs');
 export default function HeaderBreadcrumbs(props) {
-    const { items, metrikaGoals, pixelEvents, theme = 'light', className } = props;
+    const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', className } = props;
     const handleMetrika = useMetrika();
+    const handleAnalytics = useAnalytics();
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
     };
     return (React.createElement("div", { className: b({ theme }, className) }, items.map((item) => (React.createElement("div", { className: b('item'), key: item.url },
         React.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));

package/build/esm/components/Link/Link.js

@@ -7,6 +7,7 @@ import BackLink from '../BackLink/BackLink';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { LocationContext } from '../../context/locationContext/locationContext';
 import { useMetrika } from '../../hooks/useMetrika';
+import { useAnalytics } from '../../hooks';
 import './Link.css';
 const b = block('link-block');
 const WORD_JOINER_SYM = '\u200b';
@@ -23,14 +24,16 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
     const handleMetrika = useMetrika();
+    const handleAnalytics = useAnalytics();
     const { hostname } = useContext(LocationContext);
     const { tld } = useContext(LocaleContext);
     const href = setUrlTld(props.url, tld);
     const defaultTextSize = theme === 'back' ? 'l' : 'm';
     const onClick = () => {
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
     };
     const getLinkByType = () => {
         switch (theme) {

package/build/esm/components/Media/Media.js

@@ -7,7 +7,7 @@ import YoutubeBlock from '../VideoBlock/VideoBlock';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, analyticsEvents, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const content = useMemo(() => {
@@ -16,7 +16,7 @@ export const Media = (props) => {
             result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
         }
         if (video) {
-            result.push(React.createElement(Video, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
+            result.push(React.createElement(Video, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
         }
         if (youtube) {
             result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
@@ -37,6 +37,7 @@ export const Media = (props) => {
         hasVideoFallback,
         videoClassName,
         metrika,
+        analyticsEvents,
         playVideo,
         previewImg,
         playButton,

package/build/esm/components/Media/Video/Video.js

@@ -6,7 +6,7 @@ import { block } from '../../../utils';
 import './Video.css';
 const b = block('media-component-video');
 const Video = (props) => {
-    const { video, height, metrika, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
+    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
     const ref = useRef(null);
     useEffect(() => {
         if (ref && ref.current) {
@@ -29,16 +29,17 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
-        return (React.createElement(ReactPlayerBlock, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, height: height }));
+        return (React.createElement(ReactPlayerBlock, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height }));
     }, [
         video,
-        height,
         videoClassName,
         previewImg,
         playVideo,
         commonPlayButton,
         customBarControlsClassName,
         metrika,
+        analyticsEvents,
+        height,
     ]);
     const defaultVideoBlock = useMemo(() => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },