@gravity-ui/page-constructor 1.0.0

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

@@ -0,0 +1,338 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+import { ThemeSupporting } from '../../utils/theme';
+import { ClassNameProps, PixelEventType } from '../common';
+export declare enum AuthorType {
+    Column = "column",
+    Line = "line"
+}
+export declare enum PriceDetailsType {
+    MARKED_LIST = "marked-list",
+    SETTINGS = "settings"
+}
+export declare enum PriceLabelColor {
+    BLUE = "blue",
+    GREEN = "green",
+    YELLOW = "yellow",
+    PURPLE = "purple",
+    RED = "red"
+}
+export declare enum PreviewItemType {
+    Video = "video",
+    Image = "image"
+}
+export declare enum PlayButtonType {
+    Default = "default",
+    Text = "text"
+}
+export declare enum PlayButtonThemes {
+    Blue = "blue",
+    Grey = "grey"
+}
+export declare enum MediaVideoType {
+    Default = "default",
+    Player = "player"
+}
+export declare enum MediaVideoControlsType {
+    Default = "default",
+    Custom = "custom"
+}
+export declare type TextTheme = 'light' | 'dark';
+export declare type TextSize = 's' | 'm' | 'l';
+export declare type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+export declare type HeaderWidth = 's' | 'm' | 'l';
+export declare type HeaderImageSize = 's' | 'm';
+export declare type HeaderOffset = 'default' | 'large';
+export declare type Justify = 'start' | 'center' | 'end';
+export declare type ColumnsCount = 1 | 2 | 3 | 4;
+export declare type LegendTableMarkerType = 'disk';
+export declare type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';
+export declare type MediaDirection = 'media-content' | 'content-media';
+export declare type PriceDescriptionColor = 'cornflower' | 'black';
+export declare type PreviewRatioMediaContent = '2-1' | '1-1';
+export declare type ContentSize = 's' | 'l';
+export declare type ContentTextSize = 's' | 'm' | 'l';
+export declare type ContentTheme = 'default' | 'dark' | 'light';
+export declare type FileLinkType = 'vertical' | 'horizontal';
+export interface Themable {
+    theme?: TextTheme;
+}
+export interface Justifyable {
+    justify?: Justify;
+}
+export interface Stylable {
+    className?: string;
+}
+export interface Animatable {
+    animated?: boolean;
+}
+export interface Background {
+    image?: string;
+    color?: string;
+}
+export interface AnchorProps {
+    text: string;
+    url: string;
+}
+/**
+ * @deprecated Component VideoBlock will be deleted, which uses this logic
+ */
+interface LoopProps {
+    start: number;
+    end?: number;
+}
+export interface ImageObjectProps {
+    src: string;
+    alt?: string;
+    disableCompress?: boolean;
+}
+export declare type ImageProps = string | ImageObjectProps;
+export declare type ThemedImage = ThemeSupporting<ImageProps>;
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    disableCompress?: boolean;
+    style?: CSSProperties;
+    imageClassName?: string;
+    hide?: boolean;
+}
+export interface MediaVideoProps {
+    src: string[];
+    type?: MediaVideoType;
+    loop?: LoopProps | boolean;
+    muted?: boolean;
+    autoplay?: boolean;
+    elapsedTime?: number;
+    playButton?: PlayButtonProps;
+    controls?: MediaVideoControlsType;
+    metrika?: MetrikaVideo;
+}
+export interface LinkProps extends Stylable {
+    url: string;
+    text?: string;
+    textSize?: TextSize;
+    theme?: LinkTheme;
+    colorTheme?: TextTheme;
+    arrow?: boolean;
+    target?: string;
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: ButtonPixel;
+}
+export interface FileLinkProps extends ClassNameProps {
+    href: string;
+    text: ReactNode;
+    type?: FileLinkType;
+    textSize?: TextSize;
+    theme?: ContentTheme;
+    onClick?: () => void;
+}
+export interface ButtonProps {
+    text: string;
+    url: string;
+    primary?: boolean;
+    size?: ButtonSize;
+    theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
+    img?: ButtonImageProps | string;
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: ButtonPixel;
+    target?: string;
+}
+export interface ButtonImageProps {
+    url: string;
+    position?: 'left' | 'right';
+    alt?: string;
+}
+export interface PlayButtonProps extends ClassNameProps {
+    type?: PlayButtonType;
+    theme?: PlayButtonThemes;
+    text?: string;
+}
+export interface MediaVideoProps {
+    src: string[];
+    type?: MediaVideoType;
+    loop?: LoopProps | boolean;
+    muted?: boolean;
+    autoplay?: boolean;
+    elapsedTime?: number;
+    playButton?: PlayButtonProps;
+    controls?: MediaVideoControlsType;
+    metrika?: MetrikaVideo;
+}
+export declare type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
+export interface MediaComponentVideoProps {
+    video: MediaVideoProps;
+    height?: number;
+    metrika?: MetrikaVideo;
+    previewImg?: string;
+}
+export interface MediaComponentYoutubeProps {
+    youtube: string;
+    previewImg?: string;
+}
+export interface MediaComponentImageProps {
+    image: ImageProps | ImageProps[];
+    video?: MediaVideoProps;
+    parallax?: boolean;
+    height?: number;
+}
+export interface MediaComponentDataLensProps {
+    dataLens: DataLensProps;
+}
+export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
+    color?: string;
+}
+export declare type ThemedMediaProps = ThemeSupporting<MediaProps>;
+export interface NewMetrikaGoal {
+    name: string;
+    isCrossSite?: boolean;
+    counterName?: string;
+    params?: Record<string, string>;
+}
+export declare type MetrikaGoal = string | string[] | NewMetrikaGoal[];
+export interface MetrikaVideo {
+    counterName?: string;
+    play?: MetrikaGoal;
+    stop?: MetrikaGoal;
+}
+export interface ButtonPixelEvent {
+    name: PixelEventType;
+    data?: Object;
+}
+export declare type ButtonPixel = ButtonPixelEvent[];
+export interface DataLensObjectProps {
+    id: string;
+    theme: 'dark' | 'light';
+}
+export declare type DataLensProps = string | DataLensObjectProps;
+export interface AuthorItem {
+    firstName: string;
+    secondName: string;
+    description?: string;
+    avatar?: string | JSX.Element;
+}
+export interface HeaderBreadCrumbsProps extends ClassNameProps {
+    items: {
+        url: string;
+        text: ReactNode;
+    }[];
+    theme?: TextTheme;
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: ButtonPixel;
+}
+export interface PreviewContentItemProps {
+    title: string;
+    description?: string;
+}
+export interface PreviewItemProps {
+    type: PreviewItemType;
+    media: ThemedMediaProps;
+    content: PreviewContentItemProps;
+}
+export interface TitleProps extends Justifyable, TitleBaseProps {
+    navTitle?: string;
+    anchor?: string;
+}
+export interface TitleBaseProps {
+    text: string;
+    textSize?: TextSize;
+    url?: string;
+    custom?: string | ReactNode;
+    onClick?: () => void;
+}
+export interface CardData {
+    header?: CardHeader;
+    text?: string;
+    title?: string;
+    link?: LinkProps;
+    footer?: string;
+    url?: string;
+    service?: {
+        slug: string;
+        name: string;
+    };
+    links?: LinkProps[];
+}
+export declare type CardBorder = 'shadow' | 'line' | 'none';
+export interface CardBaseProps {
+    border?: CardBorder;
+}
+export interface CardProps extends CardBaseProps, CardData {
+}
+export interface CardHeader {
+    title?: string;
+    image?: ImageProps;
+}
+export interface PriceDescriptionProps {
+    title: string;
+    detailedTitle?: string;
+    description: string;
+    label?: {
+        color: PriceLabelColor;
+        text?: string;
+        size?: TextSize;
+    };
+}
+export interface PriceDetailsSettingsProps {
+    title: string;
+    description: string;
+}
+export interface PriceDetailsListProps {
+    text: string;
+}
+export interface PriceDetailsProps {
+    items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[];
+}
+export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps {
+}
+export interface PriceFoldableDetailsProps {
+    title: string;
+    size?: TextSize;
+    titleColor?: PriceDescriptionColor;
+}
+export interface PriceDetailedProps extends CardBaseProps {
+    items: PriceItemProps[];
+    description?: {
+        titleSize?: TextSize;
+        descriptionSize?: TextSize;
+        titleColor?: PriceDescriptionColor;
+    };
+    details?: {
+        titleSize?: TextSize;
+        descriptionSize?: TextSize;
+    };
+    priceType?: PriceDetailsType;
+    numberGroupItems?: 3 | 4 | 5;
+    isCombined?: boolean;
+    useMixedView?: boolean;
+    foldable?: PriceFoldableDetailsProps;
+    labelsDefaultText?: Record<PriceLabelColor, string>;
+}
+export interface PriceDetailedProps extends CardBaseProps {
+    items: PriceItemProps[];
+    description?: {
+        titleSize?: TextSize;
+        descriptionSize?: TextSize;
+        titleColor?: PriceDescriptionColor;
+    };
+    details?: {
+        titleSize?: TextSize;
+        descriptionSize?: TextSize;
+    };
+    priceType?: PriceDetailsType;
+    numberGroupItems?: 3 | 4 | 5;
+    isCombined?: boolean;
+    useMixedView?: boolean;
+    foldable?: PriceFoldableDetailsProps;
+    labelsDefaultText?: Record<PriceLabelColor, string>;
+}
+export interface AuthorProps {
+    author: AuthorItem;
+    className?: string;
+    authorContainerClassName?: string;
+    type?: AuthorType;
+}
+export interface BlockHeaderProps {
+    title?: TitleProps | string;
+    description?: string;
+}
+export {};

package/build/esm/models/constructor-items/common.js

@@ -0,0 +1,44 @@
+// enums
+export var AuthorType;
+(function (AuthorType) {
+    AuthorType["Column"] = "column";
+    AuthorType["Line"] = "line";
+})(AuthorType || (AuthorType = {}));
+export var PriceDetailsType;
+(function (PriceDetailsType) {
+    PriceDetailsType["MARKED_LIST"] = "marked-list";
+    PriceDetailsType["SETTINGS"] = "settings";
+})(PriceDetailsType || (PriceDetailsType = {}));
+export var PriceLabelColor;
+(function (PriceLabelColor) {
+    PriceLabelColor["BLUE"] = "blue";
+    PriceLabelColor["GREEN"] = "green";
+    PriceLabelColor["YELLOW"] = "yellow";
+    PriceLabelColor["PURPLE"] = "purple";
+    PriceLabelColor["RED"] = "red";
+})(PriceLabelColor || (PriceLabelColor = {}));
+export var PreviewItemType;
+(function (PreviewItemType) {
+    PreviewItemType["Video"] = "video";
+    PreviewItemType["Image"] = "image";
+})(PreviewItemType || (PreviewItemType = {}));
+export var PlayButtonType;
+(function (PlayButtonType) {
+    PlayButtonType["Default"] = "default";
+    PlayButtonType["Text"] = "text";
+})(PlayButtonType || (PlayButtonType = {}));
+export var PlayButtonThemes;
+(function (PlayButtonThemes) {
+    PlayButtonThemes["Blue"] = "blue";
+    PlayButtonThemes["Grey"] = "grey";
+})(PlayButtonThemes || (PlayButtonThemes = {}));
+export var MediaVideoType;
+(function (MediaVideoType) {
+    MediaVideoType["Default"] = "default";
+    MediaVideoType["Player"] = "player";
+})(MediaVideoType || (MediaVideoType = {}));
+export var MediaVideoControlsType;
+(function (MediaVideoControlsType) {
+    MediaVideoControlsType["Default"] = "default";
+    MediaVideoControlsType["Custom"] = "custom";
+})(MediaVideoControlsType || (MediaVideoControlsType = {}));

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

@@ -0,0 +1,6 @@
+import { Block } from './blocks';
+import { SubBlock } from './sub-blocks';
+export * from './sub-blocks';
+export * from './blocks';
+export * from './common';
+export declare type ConstructorItem = Block | SubBlock;

package/build/esm/models/constructor-items/index.js

@@ -0,0 +1,3 @@
+export * from './sub-blocks';
+export * from './blocks';
+export * from './common';

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

@@ -0,0 +1,165 @@
+import { ClassNameProps } from '../../models';
+import { ThemeSupporting } from '../../utils';
+import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
+import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, CardProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { ContentBlockProps } from './blocks';
+import { PixelEvent } from '../common';
+export declare enum SubBlockType {
+    Divider = "divider",
+    Quote = "quote",
+    NewsCard = "news-card",
+    /**
+     * @deprecated Will be moved to params use BasicCard instead
+     */
+    Partner = "partner",
+    PriceDetailed = "price-detailed",
+    MediaCard = "media-card",
+    BannerCard = "banner-card",
+    /**
+     * @deprecated Will be moved to params use BasicCard instead
+     */
+    TutorialCard = "tutoral-card",
+    CardWithImage = "card-with-image",
+    BackgroundCard = "background-card",
+    BasicCard = "basic-card",
+    Content = "content",
+    HubspotForm = "hubspot-form",
+    /**
+     * @deprecated Will be moved to params use BasicCard instead
+     */
+    Card = "card"
+}
+export declare const SubBlockTypes: SubBlockType[];
+export interface DividerProps {
+    size?: DividerSize;
+    border?: boolean;
+}
+export interface HubspotFormProps extends HubspotEventHandlers {
+    className?: string;
+    theme?: ContentTheme;
+    isMobile?: boolean;
+    region?: string;
+    portalId: string;
+    formId: string;
+    formInstanceId?: string;
+    formClassName?: string;
+    /**
+     * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame
+     */
+    onBeforeLoad?: (arg: HubspotEventData) => void;
+    /**
+     * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame
+     */
+    onBeforeSubmit?: (arg: HubspotEventData) => void;
+    /**
+     * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame
+     */
+    onSubmit?: (arg: HubspotEventData) => void;
+    /**
+     * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame
+     */
+    onLoad?: (arg: HubspotEventData) => void;
+    pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
+    hubspotEvents?: string[];
+}
+export interface PartnerProps extends CardBaseProps {
+    text: string;
+    logo: ImageProps;
+    url: string;
+}
+export interface QuoteProps extends Themable, CardBaseProps {
+    text: string;
+    image: ThemedImage;
+    logo: string;
+    color?: string;
+    url?: string;
+    author?: AuthorItem;
+    buttonText?: string;
+    theme?: TextTheme;
+}
+export interface NewsCardData {
+    id: number;
+    slug: string;
+    title: string;
+    date: string;
+    url: string;
+    isoDate?: string;
+}
+export declare type NewsCardProps = Pick<NewsCardData, 'title' | 'url' | 'date' | 'isoDate'> & CardBaseProps;
+export interface TutorialCardProps extends CardBaseProps {
+    url: string;
+    title: string;
+    text: string;
+    icon?: ImageProps;
+}
+export interface BackgroundCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
+    url?: string;
+    background?: ThemeSupporting<ImageObjectProps>;
+    paddingBottom?: 's' | 'm' | 'l' | 'xl';
+    backgroundColor?: string;
+}
+export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+    url: string;
+    icon?: ImageProps;
+}
+export interface BannerCardProps {
+    title: string;
+    subtitle?: string;
+    image?: ThemeSupporting<string>;
+    disableCompress?: boolean;
+    color?: ThemeSupporting<string>;
+    theme?: TextTheme;
+    button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
+}
+export interface MediaCardProps extends MediaProps, CardBaseProps {
+}
+export interface CardWithImageLinkProps extends Omit<LinkProps, 'text' | 'url'> {
+    title: string;
+    link: string;
+}
+export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockProps, 'title' | 'additionalInfo' | 'buttons' | 'theme'> {
+    image: string;
+    description?: string;
+    disableCompress?: boolean;
+    border?: boolean;
+    fullScreen?: boolean;
+    links?: CardWithImageLinkProps[];
+}
+export declare type DividerModel = {
+    type: SubBlockType.Divider;
+} & DividerProps;
+export declare type CardModel = {
+    type: SubBlockType.Card;
+} & CardProps;
+export declare type QuoteModel = {
+    type: SubBlockType.Quote;
+} & QuoteProps;
+export declare type NewsCardModel = {
+    type: SubBlockType.NewsCard;
+} & NewsCardProps;
+export declare type CardWithImageModel = {
+    type: SubBlockType.CardWithImage;
+} & CardWithImageProps;
+export declare type TutorialCardModel = {
+    type: SubBlockType.TutorialCard;
+} & TutorialCardProps;
+export declare type BackgroundCardModel = {
+    type: SubBlockType.BackgroundCard;
+} & BackgroundCardProps;
+export declare type PartnerModel = {
+    type: SubBlockType.Partner;
+} & PartnerProps;
+export declare type PriceDetailedModel = {
+    type: SubBlockType.PriceDetailed;
+} & PriceDetailedProps;
+export declare type MediaCardModel = {
+    type: SubBlockType.MediaCard;
+} & MediaCardProps;
+export declare type HubspotFormModel = {
+    type: SubBlockType.HubspotForm;
+} & HubspotFormProps;
+export declare type BannerCardModel = {
+    type: SubBlockType.BannerCard;
+} & BannerCardProps;
+export declare type SubBlockModels = DividerModel | CardModel | QuoteModel | NewsCardModel | PartnerModel | PriceDetailedModel | MediaCardModel | TutorialCardModel | CardWithImageModel | BackgroundCardModel | HubspotFormModel | BannerCardModel;
+export declare type SubBlock = SubBlockModels;

package/build/esm/models/constructor-items/sub-blocks.js

@@ -0,0 +1,27 @@
+export var SubBlockType;
+(function (SubBlockType) {
+    SubBlockType["Divider"] = "divider";
+    SubBlockType["Quote"] = "quote";
+    SubBlockType["NewsCard"] = "news-card";
+    /**
+     * @deprecated Will be moved to params use BasicCard instead
+     */
+    SubBlockType["Partner"] = "partner";
+    SubBlockType["PriceDetailed"] = "price-detailed";
+    SubBlockType["MediaCard"] = "media-card";
+    SubBlockType["BannerCard"] = "banner-card";
+    /**
+     * @deprecated Will be moved to params use BasicCard instead
+     */
+    SubBlockType["TutorialCard"] = "tutoral-card";
+    SubBlockType["CardWithImage"] = "card-with-image";
+    SubBlockType["BackgroundCard"] = "background-card";
+    SubBlockType["BasicCard"] = "basic-card";
+    SubBlockType["Content"] = "content";
+    SubBlockType["HubspotForm"] = "hubspot-form";
+    /**
+     * @deprecated Will be moved to params use BasicCard instead
+     */
+    SubBlockType["Card"] = "card";
+})(SubBlockType || (SubBlockType = {}));
+export const SubBlockTypes = Object.values(SubBlockType);

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

@@ -0,0 +1,45 @@
+import React, { PropsWithChildren } from 'react';
+import { Animatable, ThemedMediaProps, ConstructorItem, Block, WithChildren } from './';
+export interface PageData {
+    content: PageContent;
+}
+export interface Menu {
+    title: string;
+}
+export interface PageContent extends Animatable {
+    blocks: Block[];
+    menu?: Menu;
+    background?: ThemedMediaProps;
+    footnotes?: string[];
+}
+export interface InitConstrucorState {
+    hasMenu: boolean;
+}
+export interface CustomBlock {
+    type: string;
+    [key: string]: unknown;
+}
+export declare type ConstructorBlock = ConstructorItem | CustomBlock;
+export declare type LoadableData = any;
+export declare type FetchLoadableDataParams = {
+    blockKey: string;
+    serviceId?: number;
+};
+export declare type FetchLoadableData<TData = LoadableData> = (params: FetchLoadableDataParams) => Promise<TData>;
+export declare type ShouldRenderBlock = (block: ConstructorBlock, blockKey: string) => Boolean;
+export declare type OnInit = (data: InitConstrucorState) => void;
+declare type ComponentProps = React.ComponentProps<React.ComponentClass<any>>;
+export declare type CustomItem = WithChildren<ComponentProps> | React.ComponentType<PropsWithChildren<ComponentProps>>;
+export declare type CustomItems = Record<string, CustomItem>;
+export interface LoadableConfigItem {
+    fetch: FetchLoadableData;
+    component: CustomItem;
+}
+export declare type LoadableConfig = Record<string, LoadableConfigItem>;
+export interface CustomConfig {
+    blocks?: CustomItems;
+    subBlocks?: CustomItems;
+    headers?: CustomItems;
+    loadable?: LoadableConfig;
+}
+export {};

package/build/esm/models/constructor.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import { Block, ConstructorItem, HeaderBlockBackground } from './';
+import { MediaProps, MetrikaGoal, NewMetrikaGoal } from './index';
+export declare function isBlock(block: ConstructorItem): block is Block;
+export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
+export declare function headerHasMediaBackground(background: HeaderBlockBackground): background is MediaProps;

package/build/esm/models/guards.js

@@ -0,0 +1,10 @@
+import { BlockTypes } from './';
+export function isBlock(block) {
+    return block.type in BlockTypes;
+}
+export function isNewMetrikaFormat(metrika) {
+    return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
+}
+export function headerHasMediaBackground(background) {
+    return 'image' in background || 'video' in background || 'youtube' in background;
+}

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

@@ -0,0 +1,6 @@
+export * from './constructor';
+export * from './constructor-items';
+export * from './common';
+export * from './components';
+export * from './guards';
+export * from './react';

package/build/esm/models/index.js

@@ -0,0 +1,6 @@
+export * from './constructor';
+export * from './constructor-items';
+export * from './common';
+export * from './components';
+export * from './guards';
+export * from './react';

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare type WithChildren<T = {}> = T & {
+    children?: React.ReactNode;
+};

package/build/esm/models/react.js

@@ -0,0 +1 @@
+export {};