@gravity-ui/page-constructor 1.19.1 → 1.20.1

package/build/esm/components/YandexForm/YandexForm.js

@@ -3,16 +3,19 @@ import { HEADER_HEIGHT } from '../constants';
 import { LocaleContext } from '../../context/localeContext';
 import { MobileContext } from '../../context/mobileContext';
 import { block } from '../../utils';
+import { DefaultEventNames } from '../../models/common';
 import { useMetrika } from '../../hooks/useMetrika';
+import { useAnalytics } from '../../hooks';
 export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const b = block('yandex-form');
 const YandexForm = (props) => {
-    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, customFormOrigin, } = props;
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
     const formContainerRef = useRef(null);
     const iframeRef = useRef();
     const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
     const handleMetrika = useMetrika();
+    const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);
     const isMobile = useContext(MobileContext);
     const locale = useContext(LocaleContext);
     const updateFormIframe = useCallback((container) => {
@@ -53,10 +56,19 @@ const YandexForm = (props) => {
             window.scrollBy(0, top - headerHeight);
         }
         handleMetrika({ metrikaGoals, pixelEvents });
+        handleAnalytics(analyticsEvents);
         if (onSubmit) {
             onSubmit();
         }
-    }, [handleMetrika, metrikaGoals, pixelEvents, onSubmit, headerHeight]);
+    }, [
+        handleMetrika,
+        metrikaGoals,
+        pixelEvents,
+        handleAnalytics,
+        analyticsEvents,
+        onSubmit,
+        headerHeight,
+    ]);
     const handleMessage = useCallback(({ origin, data }) => {
         if (origin !== yaFormOrigin) {
             return;

package/build/esm/containers/PageConstructor/Provider.d.ts

@@ -1,4 +1,5 @@
 import { MetrikaContextProps } from '../../context/metrikaContext';
+import { AnalyticsContextProps } from '../../context/analyticsContext';
 import { MapsContextType } from '../../context/mapsContext/mapsContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
@@ -15,5 +16,6 @@ export interface PageConstructorProviderProps {
     theme?: ConstructorTheme;
     mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
+    analytics?: AnalyticsContextProps;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

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

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { MetrikaContext } from '../../context/metrikaContext';
+import { AnalyticsContext } from '../../context/analyticsContext';
 import { MobileContext } from '../../context/mobileContext';
 import { MapsContext, initialMapValue } from '../../context/mapsContext/mapsContext';
 import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
@@ -9,7 +10,7 @@ import { LocationContext } from '../../context/locationContext';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { DEFAULT_THEME } from '../../components/constants';
 export const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, metrika = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, } = props;
+    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         React.createElement(ThemeValueContext.Provider, { value: { themeValue: theme } }),
@@ -19,6 +20,7 @@ export const PageConstructorProvider = (props) => {
         React.createElement(MobileContext.Provider, { value: Boolean(isMobile) }),
         React.createElement(MapsContext.Provider, { value: mapsContext }),
         React.createElement(MetrikaContext.Provider, { value: metrika }),
+        React.createElement(AnalyticsContext.Provider, { value: analytics }),
         React.createElement(SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */

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

@@ -2,18 +2,20 @@ import _ from 'lodash';
 import React, { Fragment, useContext } from 'react';
 import { getBlockKey } from '../../../../utils';
 import { InnerContext } from '../../../../context/innerContext';
+import { BlockIdContext } from '../../../../context/blockIdContext';
 import { ConstructorLoadable } from '../ConstructorLoadable';
 import { ConstructorItem } from '../ConstructorItem';
 import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
 export const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
     const { blockTypes, loadables, itemMap } = useContext(InnerContext);
-    const renderer = (item, index) => {
+    const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
             return null;
         }
         let children;
         let itemElement;
         const key = getBlockKey(item, index);
+        const blockId = parentId ? `${parentId}_${key}` : key;
         if (shouldRenderBlock && !shouldRenderBlock(item, key)) {
             return null;
         }
@@ -27,11 +29,12 @@ export const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
         }
         else {
             if ('children' in item && item.children) {
-                children = item.children.map(renderer);
+                children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (React.createElement(ConstructorItem, { data: item, key: key }, children));
+            itemElement = (React.createElement(BlockIdContext.Provider, { value: blockId },
+                React.createElement(ConstructorItem, { data: item, key: key }, children)));
         }
         return blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item, key: key, Component: itemElement })) : (itemElement);
     };
-    return React.createElement(Fragment, null, items.map(renderer));
+    return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
 };

package/build/esm/context/analyticsContext/analyticsContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AnalyticsEvent } from '../../models';
+export interface AnalyticsContextProps {
+    sendEvents?: (events: AnalyticsEvent[]) => void;
+    autoEvents?: boolean;
+}
+export declare const AnalyticsContext: React.Context<AnalyticsContextProps>;

package/build/esm/context/analyticsContext/analyticsContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const AnalyticsContext = React.createContext({});

package/build/esm/context/analyticsContext/index.d.ts

@@ -0,0 +1 @@
+export * from './analyticsContext';

package/build/esm/context/analyticsContext/index.js

@@ -0,0 +1 @@
+export * from './analyticsContext';

package/build/esm/context/blockIdContext/blockIdContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type BlockIdContextProp = string;
+export declare const BlockIdContext: React.Context<string>;

package/build/esm/context/blockIdContext/blockIdContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const BlockIdContext = React.createContext('');

package/build/esm/context/blockIdContext/index.d.ts

@@ -0,0 +1 @@
+export * from './blockIdContext';

package/build/esm/context/blockIdContext/index.js

@@ -0,0 +1 @@
+export * from './blockIdContext';

package/build/esm/context/metrikaContext/metrikaContext.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
 import { Metrika, Pixel } from '../../models';
 export interface MetrikaContextProps {
+    /**
+     * @deprecated Metrika will be deleted
+     */
     metrika?: Metrika;
+    /**
+     * @deprecated Metrika will be deleted
+     */
     pixel?: Pixel;
 }
 export declare const MetrikaContext: React.Context<MetrikaContextProps>;

package/build/esm/hooks/index.d.ts

@@ -2,4 +2,5 @@ export { default as useFocus } from './useFocus';
 export { default as useWindowBreakpoint } from './useWindowBreakpoint';
 export { useIntersection } from './useIntersection';
 export { default as useMount } from './useMount';
+export * from './useAnalytics';
 export * from './hubspot';

package/build/esm/hooks/index.js

@@ -2,4 +2,5 @@ export { default as useFocus } from './useFocus';
 export { default as useWindowBreakpoint } from './useWindowBreakpoint';
 export { useIntersection } from './useIntersection';
 export { default as useMount } from './useMount';
+export * from './useAnalytics';
 export * from './hubspot';

package/build/esm/hooks/useAnalytics.d.ts

@@ -0,0 +1,2 @@
+import { AnalyticsEvent } from '../models';
+export declare const useAnalytics: (name?: string, target?: string) => ((e?: AnalyticsEvent | AnalyticsEvent[]) => void) & import("lodash").MemoizedFunction;

package/build/esm/hooks/useAnalytics.js

@@ -0,0 +1,31 @@
+import { memoize } from 'lodash';
+import { useContext, useMemo } from 'react';
+import { BlockIdContext } from '../context/blockIdContext';
+import { AnalyticsContext } from '../context/analyticsContext';
+import { PredefinedEventTypes } from '../models';
+export const useAnalytics = (name = '', target) => {
+    const { sendEvents, autoEvents } = useContext(AnalyticsContext);
+    const context = useContext(BlockIdContext);
+    const defaultEvent = useMemo(() => name
+        ? {
+            name,
+            context,
+            type: PredefinedEventTypes.Default,
+            target: target,
+        }
+        : undefined, [context, name, target]);
+    if (!sendEvents) {
+        return memoize(() => { });
+    }
+    const defaultEvents = defaultEvent && autoEvents ? [defaultEvent] : [];
+    return memoize((e) => {
+        let events = defaultEvents;
+        if (e) {
+            events = Array.isArray(e) ? [...events, ...e] : [...events, e];
+        }
+        if (!events) {
+            return;
+        }
+        sendEvents(events);
+    });
+};

package/build/esm/hooks/useMetrika.d.ts

@@ -1,7 +1,13 @@
 import { ButtonPixel, MetrikaGoal, PixelEvent } from '../models';
+/**
+ * @deprecated Metrika will be deleted
+ */
 type UseMetrikaProps = {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
 };
+/**
+ * @deprecated useMetrika will be deleted
+ */
 export declare const useMetrika: () => ({ metrikaGoals, pixelEvents }: UseMetrikaProps) => void;
 export {};

package/build/esm/hooks/useMetrika.js

@@ -2,12 +2,20 @@ import { useContext } from 'react';
 import { MetrikaContext } from '../context/metrikaContext';
 import { PixelEventType } from '../models';
 import { isNewMetrikaFormat } from '../models/guards';
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated Metrika will be deleted, which uses this logic
+ */
 function isButtonPixel(pixelEvents) {
     if (Array.isArray(pixelEvents) && pixelEvents.length && 'name' in pixelEvents) {
         return true;
     }
     return false;
 }
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated useMetrika will be deleted
+ */
 export const useMetrika = () => {
     const { metrika, pixel } = useContext(MetrikaContext);
     return ({ metrikaGoals, pixelEvents }) => {

package/build/esm/models/common.d.ts

@@ -7,12 +7,21 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+/**
+ * @deprecated Pixel will be deleted
+ */
 type PixelCommand = 'track' | 'trackCustom';
+/**
+ * @deprecated Pixel will be deleted
+ */
 export interface PixelEvent {
     command: PixelCommand;
     event: PixelEventType | string;
     data?: Object;
 }
+/**
+ * @deprecated Pixel will be deleted from package
+ */
 export declare enum PixelEventType {
     AddPaymentInfo = "AddPaymentInfo",
     AddToCart = "AddToCart",
@@ -36,11 +45,17 @@ export declare enum PixelEventType {
 export type Modifiers = {
     [name: string]: string | boolean | undefined;
 };
+/**
+ * @deprecated Pixel will be deleted
+ */
 export interface Pixel<TEvent = string> {
     trackStandard: (event: TEvent, data?: Object) => void;
     trackCustom: (event: string, data?: Object) => void;
     track: (trackEvents: string | string[] | PixelEvent[] | PixelEvent) => void;
 }
+/**
+ * @deprecated Metrika will be deleted
+ */
 export interface Metrika {
     reachGoal: (counterName: string, ...args: any) => void;
     reachGoals: (goals: MetrikaGoal, counterName?: string) => void;
@@ -49,4 +64,34 @@ export interface ClassNameProps {
     className?: string;
 }
 export type Timeout = ReturnType<typeof setTimeout> | undefined;
+export declare enum PredefinedEventTypes {
+    Default = "default-event",
+    Play = "play",
+    Stop = "stop"
+}
+export declare enum DefaultEventNames {
+    ShareButton = "share-button-click",
+    Button = "button-click",
+    CardBase = "card-base-click",
+    Link = "link-click",
+    ReactPlayerControls = "react-player-controls-click",
+    YandexFormSubmit = "yandex-form-submit",
+    HubspotFormSubmit = "hubspot-form-submit",
+    QuoteButton = "quote-button-click",
+    BackLink = "back-link-click"
+}
+export type AnalyticsCounters = {
+    include?: string[];
+    exclude?: string[];
+};
+export type AnalyticsEvent<T = {}> = T & {
+    name: string;
+    type?: string;
+    counters?: AnalyticsCounters;
+    context?: string;
+    target?: string;
+};
+export interface AnalyticsEventsBase {
+    analyticsEvents?: AnalyticsEvent | AnalyticsEvent[];
+}
 export {};

package/build/esm/models/common.js

@@ -3,6 +3,9 @@ export var Theme;
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme || (Theme = {}));
+/**
+ * @deprecated Pixel will be deleted from package
+ */
 export var PixelEventType;
 (function (PixelEventType) {
     PixelEventType["AddPaymentInfo"] = "AddPaymentInfo";
@@ -24,3 +27,21 @@ export var PixelEventType;
     PixelEventType["Subscribe"] = "Subscribe";
     PixelEventType["ViewContent"] = "ViewContent";
 })(PixelEventType || (PixelEventType = {}));
+export var PredefinedEventTypes;
+(function (PredefinedEventTypes) {
+    PredefinedEventTypes["Default"] = "default-event";
+    PredefinedEventTypes["Play"] = "play";
+    PredefinedEventTypes["Stop"] = "stop";
+})(PredefinedEventTypes || (PredefinedEventTypes = {}));
+export var DefaultEventNames;
+(function (DefaultEventNames) {
+    DefaultEventNames["ShareButton"] = "share-button-click";
+    DefaultEventNames["Button"] = "button-click";
+    DefaultEventNames["CardBase"] = "card-base-click";
+    DefaultEventNames["Link"] = "link-click";
+    DefaultEventNames["ReactPlayerControls"] = "react-player-controls-click";
+    DefaultEventNames["YandexFormSubmit"] = "yandex-form-submit";
+    DefaultEventNames["HubspotFormSubmit"] = "hubspot-form-submit";
+    DefaultEventNames["QuoteButton"] = "quote-button-click";
+    DefaultEventNames["BackLink"] = "back-link-click";
+})(DefaultEventNames || (DefaultEventNames = {}));

package/build/esm/models/constructor-items/common.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
-import { ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -100,7 +100,7 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     imageClassName?: string;
     hide?: boolean;
 }
-export interface MediaVideoProps {
+export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];
     type?: MediaVideoType;
     loop?: LoopProps | boolean;
@@ -111,7 +111,7 @@ export interface MediaVideoProps {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
 }
-export interface LinkProps extends Stylable {
+export interface LinkProps extends AnalyticsEventsBase, Stylable {
     url: string;
     text?: string;
     textSize?: TextSize;
@@ -130,7 +130,7 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
-export interface ButtonProps {
+export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
@@ -163,7 +163,7 @@ export interface MediaVideoProps {
     metrika?: MetrikaVideo;
 }
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
-export interface MediaComponentVideoProps {
+export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
     metrika?: MetrikaVideo;

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

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 import { ContentBlockProps } from './blocks';
-import { PixelEvent } from '../common';
+import { AnalyticsEventsBase, PixelEvent } from '../common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -38,7 +38,7 @@ export interface DividerProps {
     size?: DividerSize;
     border?: boolean;
 }
-export interface HubspotFormProps extends HubspotEventHandlers {
+export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {
     className?: string;
     theme?: ContentTheme;
     isMobile?: boolean;

package/build/esm/models/navigation.d.ts

@@ -4,19 +4,13 @@ export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
     Button = "button",
-    Social = "social",
-    GithubStars = "github-stars"
+    Social = "social"
 }
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;
     url?: string;
 }
-export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
-    type: NavigationItemType.GithubStars;
-    url: string;
-    label?: string;
-}
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
@@ -35,8 +29,8 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     icon: ImageProps;
     url: string;
 }
-export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem | NavigationGithubButton;
-export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData | NavigationGithubButton;
+export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
+export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
 export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export interface NavigationLogoData {
     icon: ImageProps;

package/build/esm/models/navigation.js

@@ -4,5 +4,4 @@ export var NavigationItemType;
     NavigationItemType["Dropdown"] = "dropdown";
     NavigationItemType["Button"] = "button";
     NavigationItemType["Social"] = "social";
-    NavigationItemType["GithubStars"] = "github-stars";
 })(NavigationItemType || (NavigationItemType = {}));

package/build/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -2,10 +2,11 @@ import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import { NavigationItemType } from '../../../models';
 import SocialIcon from '../SocialIcon/SocialIcon';
+import { BlockIdContext } from '../../../context/blockIdContext';
 import { NavigationButton } from './components/NavigationButton/NavigationButton';
 import { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
 import { NavigationLink } from './components/NavigationLink/NavigationLink';
-import { GithubStars } from './components/GithubStars/GithubStars';
+const ANALYTICS_ID = 'navigation';
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
@@ -13,13 +14,13 @@ const NavigationItemsMap = {
     [NavigationItemType.Social]: SocialIcon,
     [NavigationItemType.Dropdown]: NavigationDropdown,
     [NavigationItemType.Link]: NavigationLink,
-    [NavigationItemType.GithubStars]: GithubStars,
 };
 const NavigationItem = (_a) => {
     var { data, className } = _a, props = __rest(_a, ["data", "className"]);
     const { type = NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
     const componentProps = useMemo(() => (Object.assign(Object.assign({ className }, data), props)), [className, data, props]);
-    return React.createElement(Component, Object.assign({}, componentProps));
+    return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID },
+        React.createElement(Component, Object.assign({}, componentProps))));
 };
 export default NavigationItem;

package/build/esm/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { block } from '../../../../../utils';
 import { RouterLink, Button } from '../../../../../components';
+import { BlockIdContext } from '../../../../../context/blockIdContext';
 import './NavigationButton.css';
 const b = block('navigation-button');
+const ANALYTICS_ID = 'navigation';
 export const NavigationButton = (props) => {
     const { url, target, className } = props;
     const classes = b(null, className);
-    return target ? (React.createElement(Button, Object.assign({ className: classes }, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
-        React.createElement(Button, Object.assign({}, props, { className: classes, url: url }))));
+    return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID }, target ? (React.createElement(Button, Object.assign({ className: classes }, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
+        React.createElement(Button, Object.assign({}, props, { className: classes, url: url }))))));
 };