@gravity-ui/page-constructor 1.15.0-alpha.1 → 1.15.0-alpha.11

package/README.md

@@ -43,7 +43,8 @@ interface PageConstructorProviderProps {
   isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
   locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
   location?: Location; //API of the browser or router history, the page URL.
-  metrika?: Metrika; //Functions for sending analytics
+  analytics?: AnalyticsContextProps; // function to handle analytics event
+
   ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
   theme?: 'light' | 'dark'; //Theme to render the page with.
 }
@@ -81,10 +82,17 @@ interface SSR {
   isServer?: boolean;
 }
 
-interface Metrika {
-  metrika?: any;
-  pixel?: any;
-}
+type AnalyticsCounters = {
+  include?: string[];
+  exclude?: string[];
+};
+
+type AnalyticsEvent<T = {}> = T & {
+  name: string;
+  type?: string;
+  counters?: AnalyticsCounters;
+  blockName?: string;
+};
 
 interface NavigationData {
   logo: NavigationLogo;
@@ -211,6 +219,103 @@ import {configure, Lang} from '@gravity-ui/page-constructor';
 configure({lang: Lang.En});
 ```
 
+### Analytics
+
+#### Init
+
+To start using any analytics, pass a handler to the constructor. The handler must be created on a project side. The handler will receive the `default` and `custom` event objects. The passed handler will be fired on a button, link, navigation, and control clicks. As one handler is used for all events treatment, pay attention to how to treat different events while creating the handler. There are predefined fields that serve to help you to build complex logic.
+
+Pass `autoEvents: true` to constructor to fire automatically configured events.
+
+```ts
+function sendEvents(events: MyEventType []) {
+  ...
+}
+
+<PageConstructorProvider
+    ...
+
+    analytics={{sendEvents, autoEvents: true}}
+
+    ...
+/>
+```
+
+An event object has only one required field - `name`. It also has predefined fields, which serve to help manage complex logic. For example, `counter.include` can help to send event in a particular counter if several analytics systems are used in a project.
+
+```ts
+type AnalyticsCounters = {
+  include?: string[];
+  exclude?: string[];
+};
+
+type AnalyticsEvent<T = {}> = T & {
+  name: string;
+  type?: string;
+  counters?: AnalyticsCounters;
+  blockName?: string;
+};
+```
+
+It is possible to configure an event type needed for a project.
+
+```ts
+type MyEventType = AnalyticsEvent<{
+  anyParameterName?: string; // only a 'string' type is supported
+}>;
+```
+
+#### Counter selector
+
+It is possible to configure an event to which an analytics system to sent.
+
+```ts
+type AnalyticsCounters = {
+  include?: string[];
+  exclude?: string[];
+};
+```
+
+#### blockName parameter
+
+Pass `blockName` value to define place on a project where an event is fired.
+
+Use selector below or create logic that serves project needs.
+
+```ts
+// utils.ts
+const isCounterAllowed = (counter: Counter, counters?: AnalyticsCounters) => {
+  if (!counters) {
+    return true;
+  }
+
+  if (counters.exclude?.includes(counter)) {
+    return false;
+  } else if (counters.include?.includes(counter)) {
+    return true;
+  }
+
+  return false;
+};
+
+// analyticsHandler.ts
+if (isCounterAllowed(counterName, counters)) {
+  analyticsCounter.reachGoal(counterName, name, parameters);
+}
+```
+
+#### Reserved event types
+
+Several predefined event types are used to mark automatically configured events. Use the types to filter default events, for example.
+
+```ts
+enum PredefinedEventTypes {
+  Default = 'default-event', // default events which fire on every button click
+  Play = 'play', // React player event
+  Stop = 'stop', // React player event
+}
+```
+
 ## Development
 
 ```bash

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

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

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

@@ -206,6 +206,9 @@ export declare const BannerCardProps: {
                                     };
                                 };
                             };
+                            blockName: {
+                                type: string;
+                            };
                         };
                     } | {
                         type: string;
@@ -241,6 +244,9 @@ export declare const BannerCardProps: {
                                         };
                                     };
                                 };
+                                blockName: {
+                                    type: string;
+                                };
                             };
                         };
                     })[];
@@ -264,6 +270,9 @@ export declare const BannerCardProps: {
                 required: string[];
             };
         };
+        blockName: {
+            type: string;
+        };
         animated: {
             type: string;
         };
@@ -480,6 +489,9 @@ export declare const BannerBlock: {
                                         };
                                     };
                                 };
+                                blockName: {
+                                    type: string;
+                                };
                             };
                         } | {
                             type: string;
@@ -515,6 +527,9 @@ export declare const BannerBlock: {
                                             };
                                         };
                                     };
+                                    blockName: {
+                                        type: string;
+                                    };
                                 };
                             };
                         })[];
@@ -538,6 +553,9 @@ export declare const BannerBlock: {
                     required: string[];
                 };
             };
+            blockName: {
+                type: string;
+            };
             animated: {
                 type: string;
             };
@@ -755,6 +773,9 @@ export declare const BannerCard: {
                                         };
                                     };
                                 };
+                                blockName: {
+                                    type: string;
+                                };
                             };
                         } | {
                             type: string;
@@ -790,6 +811,9 @@ export declare const BannerCard: {
                                             };
                                         };
                                     };
+                                    blockName: {
+                                        type: string;
+                                    };
                                 };
                             };
                         })[];
@@ -813,6 +837,9 @@ export declare const BannerCard: {
                     required: string[];
                 };
             };
+            blockName: {
+                type: string;
+            };
             animated: {
                 type: string;
             };

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

@@ -20,7 +20,9 @@ exports.BannerCardProps = {
         }), theme: common_1.ThemeProps, width: {
             type: 'string',
             enum: ['s', 'm', 'l'],
-        }, button: common_1.ButtonBlock }),
+        }, button: common_1.ButtonBlock, blockName: {
+            type: 'string',
+        } }),
 };
 exports.BannerBlock = {
     'banner-block': exports.BannerCardProps,

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

@@ -66,6 +66,9 @@ export declare const CardLayoutProps: {
         resetPaddings: {
             type: string;
         };
+        blockName: {
+            type: string;
+        };
         type: {};
         when: {};
     };
@@ -139,6 +142,9 @@ export declare const CardLayoutBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

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

@@ -4,6 +4,7 @@ exports.ContentLayoutBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const sub_blocks_1 = require("../../sub-blocks");
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
@@ -31,11 +32,11 @@ function getTextWidth(size) {
 }
 const ContentLayoutBlock = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { textContent, fileContent, properties: cardLayoutProperties = { size: 'l' } } = props;
+    const { textContent, fileContent, properties: cardLayoutProperties = { size: 'l' }, blockName = models_1.BlockType.ContentLayoutBlock, } = props;
     const { size = 'l', background, centered, theme = 'default', textWidth = 'm', } = cardLayoutProperties;
     const colSizes = (0, react_1.useMemo)(() => getTextWidth(textWidth), [textWidth]);
     return (react_1.default.createElement("div", { className: b({ size, background: Boolean(background) }) },
-        react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
+        react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme, blockName: blockName })),
         fileContent && (react_1.default.createElement(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (react_1.default.createElement(components_1.FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
         background && (react_1.default.createElement("div", { className: b('background') },
             react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('background-item') }, background, { hide: isMobile }))))));

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

@@ -144,6 +144,9 @@ export declare const ContentLayoutBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.d.ts

@@ -1,3 +1,3 @@
 import { ExtendedFeaturesProps } from '../../models';
-export declare const ExtendedFeaturesBlock: ({ title, description, items, colSizes, animated, }: ExtendedFeaturesProps) => JSX.Element;
+export declare const ExtendedFeaturesBlock: ({ title, description, items, colSizes, animated, blockName, }: ExtendedFeaturesProps) => JSX.Element;
 export default ExtendedFeaturesBlock;

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

@@ -4,6 +4,7 @@ exports.ExtendedFeaturesBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const grid_1 = require("../../grid");
 const components_1 = require("../../components/");
 const sub_blocks_1 = require("../../sub-blocks");
@@ -16,7 +17,7 @@ const DEFAULT_SIZES = {
     sm: 6,
     md: 4,
 };
-const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
+const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, blockName = models_1.BlockType.ExtendedFeaturesBlock, }) => {
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         react_1.default.createElement(components_1.BlockHeader, { title: title, description: description, className: b('header') }),
@@ -34,7 +35,7 @@ const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_S
                         itemTitle && (react_1.default.createElement("h5", { className: b('item-title') },
                             react_1.default.createElement(components_1.HTML, null, itemTitle),
                             label && (react_1.default.createElement("div", { className: b('item-label') }, label)))),
-                        react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
+                        react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo, blockName: blockName }))));
             })))));
 };
 exports.ExtendedFeaturesBlock = ExtendedFeaturesBlock;

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

@@ -124,6 +124,9 @@ export declare const ExtendedFeaturesBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Header/Header.js

@@ -4,6 +4,7 @@ exports.HeaderBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
+const models_1 = require("../../models");
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const utils_2 = require("./utils");
@@ -13,15 +14,15 @@ const HeaderBreadcrumbs_1 = tslib_1.__importDefault(require("../../components/He
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const utils_3 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('header-block');
-const Background = ({ background, isMobile }) => {
+const Background = ({ background, isMobile, blockName }) => {
     const { url, image, fullWidthMedia, video, color } = background;
     const imageObject = url ? (0, utils_3.getMediaImage)(url) : image;
     const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
-    return (react_1.default.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color } }, renderMedia && (react_1.default.createElement(components_1.Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject })))));
+    return (react_1.default.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color } }, renderMedia && (react_1.default.createElement(components_1.Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject, blockName: blockName })))));
 };
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 const HeaderBlock = (props) => {
-    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
+    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, blockName = models_1.BlockType.HeaderBlock, } = props;
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const hasRightSideImage = Boolean(image || video);
@@ -60,9 +61,9 @@ const HeaderBlock = (props) => {
                                     react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } }))),
                                 buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons &&
                                     buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },
-                                        react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
+                                        react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button, { blockName: models_1.BlockType.HeaderBlock }))))))),
                                 children))),
-                    hasRightSideImage && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
+                    hasRightSideImage && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed, blockName: blockName })))))));
 };
 exports.HeaderBlock = HeaderBlock;
 exports.default = exports.HeaderBlock;

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

@@ -274,6 +274,84 @@ export declare const HeaderProperties: {
                 type: string;
                 contentType: string;
             };
+            analyticsEvents: {
+                anyOf: ({
+                    type: string;
+                    additionalProperties: {
+                        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;
+                                    };
+                                };
+                            };
+                        };
+                        blockName: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            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;
+                                        };
+                                    };
+                                };
+                            };
+                            blockName: {
+                                type: string;
+                            };
+                        };
+                    };
+                })[];
+            };
         };
     };
     imageSize: {
@@ -607,6 +685,84 @@ export declare const HeaderBlock: {
                         type: string;
                         contentType: string;
                     };
+                    analyticsEvents: {
+                        anyOf: ({
+                            type: string;
+                            additionalProperties: {
+                                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;
+                                            };
+                                        };
+                                    };
+                                };
+                                blockName: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties: {
+                                    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;
+                                                };
+                                            };
+                                        };
+                                    };
+                                    blockName: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                 };
             };
             imageSize: {
@@ -821,6 +977,9 @@ export declare const HeaderBlock: {
             resetPaddings: {
                 type: string;
             };
+            blockName: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/cjs/blocks/Header/schema.js

@@ -4,6 +4,7 @@ exports.HeaderBlock = exports.HeaderProperties = exports.HeaderBackgroundProps =
 const common_1 = require("../../schema/validators/common");
 const utils_1 = require("../../schema/validators/utils");
 const schema_1 = require("../../components/Image/schema");
+const event_1 = require("src/schema/validators/event");
 exports.HeaderBackgroundProps = {
     type: 'object',
     additionalProperties: false,
@@ -45,6 +46,9 @@ exports.HeaderProperties = {
                 type: 'string',
                 contentType: 'text',
             },
+            analyticsEvents: {
+                anyOf: [event_1.AnalyticsEventSchema, { type: 'array', items: event_1.AnalyticsEventSchema }],
+            },
         },
     },
     imageSize: {