@gravity-ui/page-constructor 1.0.0

package/server/utils/configure.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfig = exports.subscribeConfigure = exports.configure = exports.Lang = void 0;
+var Lang;
+(function (Lang) {
+    Lang["Ru"] = "ru";
+    Lang["En"] = "en";
+})(Lang = exports.Lang || (exports.Lang = {}));
+let subs = [];
+const config = {};
+const configure = (newConfig) => {
+    Object.assign(config, newConfig);
+    subs.forEach((sub) => {
+        sub(config);
+    });
+};
+exports.configure = configure;
+const subscribeConfigure = (sub) => {
+    subs.push(sub);
+    return () => {
+        subs = subs.filter((item) => item !== sub);
+    };
+};
+exports.subscribeConfigure = subscribeConfigure;
+const getConfig = () => config;
+exports.getConfig = getConfig;

package/server/utils/hubspot.d.ts

@@ -0,0 +1,16 @@
+export declare type HubspotEventName = 'onBeforeFormInit' | 'onFormReady' | 'onFormSubmit' | 'onFormSubmitted' | `_${string}`;
+export interface HubspotEventData {
+    type: HubspotEventName | string;
+    eventName: HubspotEventName;
+    id: string;
+    data?: unknown;
+}
+export declare function isHubspotEventData(maybeData: unknown): maybeData is HubspotEventData;
+export interface HubspotEventHandlers {
+    onBeforeLoad?: (arg: HubspotEventData) => void;
+    onBeforeSubmit?: (arg: HubspotEventData) => void;
+    onSubmit?: (arg: HubspotEventData) => void;
+    onLoad?: (arg: HubspotEventData) => void;
+}
+export declare function loopBackHabspotEvents(formId: string): ({ data, source, origin }: MessageEvent) => void;
+export declare function handleHubspotEvents(handlers: HubspotEventHandlers, formId: string): ({ data }: MessageEvent) => void;

package/server/utils/hubspot.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleHubspotEvents = exports.loopBackHabspotEvents = exports.isHubspotEventData = void 0;
+function isHubspotEventData(maybeData) {
+    return (typeof maybeData === 'object' &&
+        maybeData !== null &&
+        'type' in maybeData &&
+        maybeData['type'] === 'hsFormCallback');
+}
+exports.isHubspotEventData = isHubspotEventData;
+function loopBackHabspotEvents(formId) {
+    return ({ data, source, origin }) => {
+        var _a;
+        if (!isHubspotEventData(data)) {
+            return;
+        }
+        if (data.id !== formId) {
+            return;
+        }
+        if (source === window) {
+            return;
+        }
+        (_a = source) === null || _a === void 0 ? void 0 : _a.postMessage(data, origin);
+    };
+}
+exports.loopBackHabspotEvents = loopBackHabspotEvents;
+function handleHubspotEvents(handlers, formId) {
+    return ({ data }) => {
+        var _a, _b, _c, _d;
+        if (!isHubspotEventData(data)) {
+            return;
+        }
+        if (data.id !== formId) {
+            return;
+        }
+        switch (data.eventName) {
+            case 'onBeforeFormInit': {
+                (_a = handlers.onBeforeLoad) === null || _a === void 0 ? void 0 : _a.call(handlers, data);
+                break;
+            }
+            case 'onFormReady': {
+                (_b = handlers.onLoad) === null || _b === void 0 ? void 0 : _b.call(handlers, data);
+                break;
+            }
+            case 'onFormSubmit': {
+                (_c = handlers.onBeforeSubmit) === null || _c === void 0 ? void 0 : _c.call(handlers, data);
+                break;
+            }
+            case 'onFormSubmitted': {
+                (_d = handlers.onSubmit) === null || _d === void 0 ? void 0 : _d.call(handlers, data);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+}
+exports.handleHubspotEvents = handleHubspotEvents;

package/server/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './blocks';
+export * from './scroll';
+export * from './url';
+export * from './cn';
+export * from './url';
+export * from './theme';
+export { Lang, configure } from './configure';
+export type { HubspotEventData, HubspotEventHandlers, HubspotEventName } from './hubspot';
+export { isHubspotEventData } from './hubspot';

package/server/utils/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isHubspotEventData = exports.configure = exports.Lang = void 0;
+__exportStar(require("./blocks"), exports);
+__exportStar(require("./scroll"), exports);
+__exportStar(require("./url"), exports);
+__exportStar(require("./cn"), exports);
+__exportStar(require("./url"), exports);
+__exportStar(require("./theme"), exports);
+var configure_1 = require("./configure");
+Object.defineProperty(exports, "Lang", { enumerable: true, get: function () { return configure_1.Lang; } });
+Object.defineProperty(exports, "configure", { enumerable: true, get: function () { return configure_1.configure; } });
+var hubspot_1 = require("./hubspot");
+Object.defineProperty(exports, "isHubspotEventData", { enumerable: true, get: function () { return hubspot_1.isHubspotEventData; } });

package/server/utils/scroll.d.ts

@@ -0,0 +1,15 @@
+export declare enum ScrollDirection {
+    HORIZONTAL = "scrollLeft",
+    VERTICAL = "scrollTop"
+}
+export interface ScrollReverseParams {
+    distance?: number;
+}
+export interface ScrollOptions {
+    distance: number;
+    timeSeconds: number;
+    speed: number;
+    direction?: ScrollDirection;
+    reverseParams?: ScrollReverseParams;
+}
+export declare function doSmoothScroll(element: HTMLDivElement, startPosition: number, scrollOptions: ScrollOptions): void;

package/server/utils/scroll.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.doSmoothScroll = exports.ScrollDirection = void 0;
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection["HORIZONTAL"] = "scrollLeft";
+    ScrollDirection["VERTICAL"] = "scrollTop";
+})(ScrollDirection = exports.ScrollDirection || (exports.ScrollDirection = {}));
+function doSmoothScroll(element, startPosition, scrollOptions) {
+    const { distance, timeSeconds, speed, direction = ScrollDirection.HORIZONTAL, reverseParams, } = scrollOptions;
+    let scrollShift = 0;
+    let currentTimeChanges = 0;
+    const changeScrollFunction = getChangeScrollFunction(direction, Boolean(reverseParams));
+    const scrollDistance = (reverseParams === null || reverseParams === void 0 ? void 0 : reverseParams.distance) || distance;
+    const timeChanges = getTimeChanges(scrollDistance, timeSeconds, speed);
+    while (scrollShift < scrollDistance) {
+        window.setTimeout(changeScrollFunction, currentTimeChanges, element, scrollShift, startPosition);
+        currentTimeChanges += timeChanges;
+        scrollShift++;
+    }
+}
+exports.doSmoothScroll = doSmoothScroll;
+function getChangeScrollFunction(direction, isReverse) {
+    return (element, scrollPosition, startPosition) => {
+        element[direction] = isReverse
+            ? startPosition - scrollPosition
+            : startPosition + scrollPosition;
+    };
+}
+function getTimeChanges(distance, timeSeconds, acceleration) {
+    const physicalSpeed = distance / timeSeconds;
+    const programSpeedMilliseconds = (1 / physicalSpeed) * 1000;
+    return programSpeedMilliseconds / acceleration;
+}

package/server/utils/theme.d.ts

@@ -0,0 +1,7 @@
+import { DEFAULT_THEME } from '../components/constants';
+export interface ThemedValue<T> extends Partial<Record<string, T>> {
+    [DEFAULT_THEME]: T;
+}
+export declare type ThemeSupporting<T> = T | ThemedValue<T>;
+export declare function isThemedValue<T>(value: ThemeSupporting<T>): value is ThemedValue<T>;
+export declare function getThemedValue<T>(value: ThemeSupporting<T>, theme?: string): T;

package/server/utils/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemedValue = exports.isThemedValue = void 0;
+const constants_1 = require("../components/constants");
+function isThemedValue(value) {
+    return typeof value === 'object' && value !== null && constants_1.DEFAULT_THEME in value;
+}
+exports.isThemedValue = isThemedValue;
+function getThemedValue(value, theme = constants_1.DEFAULT_THEME) {
+    if (isThemedValue(value)) {
+        return value[theme] || value[constants_1.DEFAULT_THEME];
+    }
+    else {
+        return value;
+    }
+}
+exports.getThemedValue = getThemedValue;

package/server/utils/url.d.ts

@@ -0,0 +1,13 @@
+export declare type Query = Record<string, number | string | null>;
+export declare const EXTERNAL_LINK_PROPS: {
+    target: string;
+    rel: string;
+};
+export declare function getLinkProps(url: string, hostname?: string, target?: string): {
+    target: string | undefined;
+};
+export declare function isLinkExternal(url: string, routerHostname?: string): boolean;
+export declare function getNonLocaleHostName(hostname: string): string;
+export declare function setUrlTld(url: string, tld?: string): string;
+export declare const getPageSearchParams: (query?: Query) => URLSearchParams;
+export declare function getAbsolutePath(hostname?: string, pathname?: string, url?: string): string;

package/server/utils/url.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAbsolutePath = exports.getPageSearchParams = exports.setUrlTld = exports.getNonLocaleHostName = exports.isLinkExternal = exports.getLinkProps = exports.EXTERNAL_LINK_PROPS = void 0;
+const url_1 = require("url");
+exports.EXTERNAL_LINK_PROPS = { target: '_blank', rel: 'noopener noreferrer' };
+function getLinkProps(url, hostname, target) {
+    let linkProps = { target };
+    if (target === '_blank' || isLinkExternal(url, hostname)) {
+        linkProps = Object.assign(Object.assign({}, linkProps), exports.EXTERNAL_LINK_PROPS);
+    }
+    return linkProps;
+}
+exports.getLinkProps = getLinkProps;
+function isLinkExternal(url, routerHostname) {
+    if (!routerHostname) {
+        return true;
+    }
+    const { hostname } = (0, url_1.parse)(url);
+    if (!hostname) {
+        return false;
+    }
+    return getNonLocaleHostName(hostname) !== getNonLocaleHostName(routerHostname);
+}
+exports.isLinkExternal = isLinkExternal;
+function getNonLocaleHostName(hostname) {
+    return hostname.replace(/\.(ru|com)$/, '');
+}
+exports.getNonLocaleHostName = getNonLocaleHostName;
+function setUrlTld(url, tld = 'ru') {
+    return typeof url === 'string' ? url === null || url === void 0 ? void 0 : url.replace(/\${tld}/g, tld) : url;
+}
+exports.setUrlTld = setUrlTld;
+const getPageSearchParams = (query = {}) => {
+    const searchParams = new URLSearchParams();
+    Object.entries(query).forEach(([key, value]) => {
+        searchParams.set(key, String(value));
+    });
+    return searchParams;
+};
+exports.getPageSearchParams = getPageSearchParams;
+function getAbsolutePath(hostname, pathname, url) {
+    if (!pathname) {
+        return url !== null && url !== void 0 ? url : '';
+    }
+    const parsed = (0, url_1.parse)(url || '');
+    return (0, url_1.format)(Object.assign(Object.assign({}, parsed), { protocol: parsed.protocol || 'https', hostname: parsed.hostname || hostname, pathname: parsed.pathname || pathname }));
+}
+exports.getAbsolutePath = getAbsolutePath;

package/styles/fonts.scss

@@ -0,0 +1,223 @@
+@font-face {
+    font-family: 'YS Display';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Display';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/display-light.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/display-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Display';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Display';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Display';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Display';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/text-light.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/text-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src: url('https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}
+
+.YSDisplay-Thin {
+    font-family: 'YS Display', sans-serif;
+    font-weight: 100;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSDisplay-Light {
+    font-family: 'YS Display', sans-serif;
+    font-weight: 300;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSDisplay-Regular {
+    font-family: 'YS Display', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSDisplay-Medium {
+    font-family: 'YS Display', sans-serif;
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSDisplay-Bold {
+    font-family: 'YS Display', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSDisplay-Heavy {
+    font-family: 'YS Display', sans-serif;
+    font-weight: 900;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSText-Light {
+    font-family: 'YS Text', sans-serif;
+    font-weight: 300;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSText-LightItalic {
+    font-family: 'YS Text', sans-serif;
+    font-weight: 300;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+.YSText-Regular {
+    font-family: 'YS Text', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSText-RegularItalic {
+    font-family: 'YS Text', sans-serif;
+    font-weight: 400;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+.YSText-Medium {
+    font-family: 'YS Text', sans-serif;
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSText-MediumItalic {
+    font-family: 'YS Text', sans-serif;
+    font-weight: 500;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+.YSText-Bold {
+    font-family: 'YS Text', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+.YSText-BoldItalic {
+    font-family: 'YS Text', sans-serif;
+    font-weight: 700;
+    font-style: italic;
+    font-stretch: normal;
+}