@gravity-ui/blog-constructor 1.0.0-alpha.1

package/build/esm/internal-typings/bem-cn-lite.d.ts

@@ -0,0 +1,17 @@
+declare module 'bem-cn-lite' {
+    interface Modifications {
+        [name: string]: string | boolean | number | undefined;
+    }
+
+    interface Inner {
+        (elem: string, mods: Modifications | null, mixin?: string): string;
+        (elem: string, mixin?: string): string;
+        (elem: string, mods: Modifications): string;
+        (mods: Modifications | null, mixin?: string): string;
+        (elem: string): string;
+        (mods: Modifications);
+        (): string;
+    }
+
+    export default function Outer(name: string): Inner;
+}

package/build/esm/internal-typings/global.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+    const path: string;
+
+    export default path;
+}

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

@@ -0,0 +1,84 @@
+import { ReactElement } from 'react';
+import { ContentBlockProps, HeaderBlockProps, MediaProps as PCMediaProps, TextTheme } from '@gravity-ui/page-constructor';
+import { PaddingsYFMProps } from './paddings';
+import { ClassNameProps, PostData, BlockType } from './common';
+export type AuthorProps = ClassNameProps & {
+    authorId: number;
+    image: string;
+} & PaddingsYFMProps;
+export type BannerProps = ContentBlockProps & {
+    background?: string;
+    color?: string;
+    image?: string;
+    imageSize?: 's' | 'm';
+} & PaddingsYFMProps;
+export type ColoredTextProps = ContentBlockProps & {
+    background?: {
+        color?: string;
+        image?: string;
+        altText?: string;
+    };
+} & PaddingsYFMProps;
+export type CTAProps = {
+    items: Array<ContentBlockProps>;
+    columnCount?: number;
+} & PaddingsYFMProps;
+export type HeaderProps = HeaderBlockProps & PaddingsYFMProps;
+export type LayoutProps = {
+    fullWidth?: boolean;
+    mobileOrder?: string;
+    children: ReactElement[];
+} & PaddingsYFMProps;
+export type MediaProps = ClassNameProps & PaddingsYFMProps & Partial<Pick<PCMediaProps, 'youtube' | 'previewImg' | 'image' | 'video' | 'dataLens'>> & {
+    text?: string;
+};
+export type MetaProps = {
+    locale: string;
+    theme?: TextTheme;
+} & PaddingsYFMProps;
+export type SuggestProps = ClassNameProps & {
+    posts: PostData[];
+} & PaddingsYFMProps;
+export type YFMProps = {
+    text: string;
+} & PaddingsYFMProps;
+export type FeedProps = {
+    image: string;
+};
+export type AuthorBlockModel = {
+    type: BlockType.Author;
+} & AuthorProps;
+export type BannerBlockModel = {
+    type: BlockType.Banner;
+} & BannerProps;
+export type ColoredTextBlockModel = {
+    type: BlockType.ColoredText;
+} & ColoredTextProps;
+export type CTABlockModel = {
+    type: BlockType.CTA;
+} & CTAProps;
+export type HeaderBlockModel = {
+    type: BlockType.Header;
+} & HeaderProps;
+export type LayoutBlockModel = {
+    type: BlockType.Layout;
+} & LayoutProps;
+export type MediaBlockModel = {
+    type: BlockType.Media;
+} & MediaProps;
+export type MetaBlockModel = {
+    type: BlockType.Meta;
+} & MetaProps;
+export type SuggestBlockModel = {
+    type: BlockType.Suggest;
+} & SuggestProps;
+export type YFMBlockModel = {
+    type: BlockType.YFM;
+} & YFMProps;
+export type FeedBlockModel = {
+    type: BlockType.Feed;
+} & FeedProps;
+export type BlockModel = AuthorBlockModel | BannerBlockModel | ColoredTextBlockModel | CTABlockModel | HeaderBlockModel | LayoutBlockModel | MediaBlockModel | MetaBlockModel | SuggestBlockModel | YFMBlockModel | FeedBlockModel;
+export type Block = BlockModel & {
+    [x: string]: any;
+};

package/build/esm/models/blocks.js

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

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

@@ -0,0 +1,151 @@
+import { IDevice, IBrowser } from 'ua-parser-js';
+import { ReactNode } from 'react';
+import { HeaderBlockProps as PageConstructorHeaderBlockProps } from '@gravity-ui/page-constructor';
+import { Locale } from '../models/locale';
+export declare enum Theme {
+    Light = "light",
+    Dark = "dark"
+}
+export interface ClassNameProps {
+    className?: string;
+}
+export type Author = {
+    id: number;
+    avatar: string | null;
+    createdAt: string;
+    updatedAt: string;
+    firstName: string | null;
+    secondName: string | null;
+    description: string | null;
+    fullDescription: string | null;
+} & {
+    [x: string]: string | null;
+};
+export type Service = {
+    id: number;
+    slug: string;
+    name: string;
+} & {
+    [x: string]: string | null;
+};
+export type Query = Record<string, number | string | null>;
+export interface Menu {
+    title: string;
+}
+export interface WithDeviceProps {
+    device: IDevice;
+    browser: IBrowser;
+    isRobot: boolean;
+}
+export interface PostsProps {
+    posts: PostData[];
+    count: number;
+    totalCount: number;
+    pinnedPost?: PostData;
+}
+export type Tag = {
+    slug: string;
+    name: string;
+    createdAt?: string;
+    updatedAt?: string;
+    icon?: string;
+    isDeleted?: boolean;
+    locale?: string;
+    blogTagId?: number;
+    count?: number;
+};
+export interface PostData {
+    author?: string;
+    authors?: Author[];
+    blogPostId?: number;
+    content?: string;
+    date: string;
+    description?: string;
+    hasUserLike: boolean;
+    htmlTitle: string;
+    id: number;
+    image: string;
+    isPublished?: boolean;
+    sharedImage?: string;
+    likes: number;
+    locale: Locale;
+    metaDescription?: string | null;
+    metaTitle?: string | null;
+    readingTime?: number;
+    shareDescription?: string;
+    shareImage?: string;
+    shareTitle?: string;
+    slug: string;
+    keywords?: string[];
+    tags: Tag[];
+    textTitle: string;
+    title: string;
+    url: string;
+    noIndex?: boolean;
+}
+export declare enum BlockType {
+    Header = "blog-header-block",
+    YFM = "blog-yfm-block",
+    Layout = "blog-layout-block",
+    Media = "blog-media-block",
+    Banner = "blog-banner-block",
+    CTA = "blog-cta-block",
+    ColoredText = "blog-colored-text-block",
+    Author = "blog-author-block",
+    Suggest = "blog-suggest-block",
+    Meta = "blog-meta-block",
+    Feed = "blog-feed-block"
+}
+export type MetaProps = {
+    metaComponent: JSX.Element;
+    needHelmetWrapper: boolean;
+};
+export type MetaOrganizationType = {
+    url: string;
+    appTitle: string;
+    legalName: string;
+    supportEmail: string;
+};
+export interface PostMetaProps {
+    title: string;
+    date: string;
+    image: string;
+    canonicalUrl: string;
+    content?: string;
+    description?: string;
+    sharing: {
+        shareTitle: string;
+        shareDescription: string;
+        shareImage: string;
+        shareGenImage: string;
+        shareGenTitle: string;
+    };
+    keywords?: string[];
+    noIndex?: boolean;
+    authors?: Author[];
+    tags?: Tag[];
+    organization: MetaOrganizationType;
+}
+export type ToggleLikeCallbackType = ({ postId, hasLike, }: {
+    postId?: number;
+    hasLike?: boolean;
+}) => void;
+export interface HeaderBlockProps extends PageConstructorHeaderBlockProps {
+    backLink?: {
+        url: string;
+        title: ReactNode;
+    };
+}
+export type GetPostsRequest = {
+    tags: string | undefined;
+    page: number;
+    perPage: number;
+    savedOnly: boolean;
+    search: string | undefined;
+    services: string | undefined;
+};
+export type GetPostsType = (query: GetPostsRequest) => Promise<PostsProps>;
+export type HandleChangeQueryParams = (params: Query) => void;
+export type SetQueryType = (params: Query, options?: {
+    [y: string]: boolean;
+}) => Promise<void> | void;

package/build/esm/models/common.js

@@ -0,0 +1,19 @@
+export var Theme;
+(function (Theme) {
+    Theme["Light"] = "light";
+    Theme["Dark"] = "dark";
+})(Theme || (Theme = {}));
+export var BlockType;
+(function (BlockType) {
+    BlockType["Header"] = "blog-header-block";
+    BlockType["YFM"] = "blog-yfm-block";
+    BlockType["Layout"] = "blog-layout-block";
+    BlockType["Media"] = "blog-media-block";
+    BlockType["Banner"] = "blog-banner-block";
+    BlockType["CTA"] = "blog-cta-block";
+    BlockType["ColoredText"] = "blog-colored-text-block";
+    BlockType["Author"] = "blog-author-block";
+    BlockType["Suggest"] = "blog-suggest-block";
+    BlockType["Meta"] = "blog-meta-block";
+    BlockType["Feed"] = "blog-feed-block";
+})(BlockType || (BlockType = {}));

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

@@ -0,0 +1,29 @@
+export declare enum Lang {
+    Ru = "ru",
+    En = "en"
+}
+export declare enum Currency {
+    RUB = "RUB",
+    USD = "USD",
+    KZT = "KZT"
+}
+export interface LangData {
+    lang: Lang;
+    langName: string;
+    regions: Record<string, RegionData>;
+    pathPrefix: string;
+}
+export interface RegionData {
+    regionName: string;
+    tld: string;
+    currency: string;
+    order: number;
+    default: boolean;
+    local: boolean;
+}
+export interface LocaleData extends Pick<LangData, 'lang'>, Omit<RegionData, 'regionName'> {
+    code: string;
+    region: string;
+}
+export interface Locale extends Partial<Pick<LangData, 'langName'>>, Pick<LangData, 'lang'>, Partial<Pick<LangData, 'pathPrefix'>>, Partial<Pick<LocaleData, 'code'>> {
+}

package/build/esm/models/locale.js

@@ -0,0 +1,11 @@
+export var Lang;
+(function (Lang) {
+    Lang["Ru"] = "ru";
+    Lang["En"] = "en";
+})(Lang || (Lang = {}));
+export var Currency;
+(function (Currency) {
+    Currency["RUB"] = "RUB";
+    Currency["USD"] = "USD";
+    Currency["KZT"] = "KZT";
+})(Currency || (Currency = {}));

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

@@ -0,0 +1,16 @@
+export declare enum PaddingsDirections {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right"
+}
+export type PaddingSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+export type Paddings = {
+    [key in PaddingsDirections]?: PaddingSize;
+};
+export type PaddingsYFMProps = {
+    paddingTop?: PaddingSize;
+    paddingBottom?: PaddingSize;
+    paddingRight?: PaddingSize;
+    paddingLeft?: PaddingSize;
+};

package/build/esm/models/paddings.js

@@ -0,0 +1,7 @@
+export var PaddingsDirections;
+(function (PaddingsDirections) {
+    PaddingsDirections["top"] = "top";
+    PaddingsDirections["bottom"] = "bottom";
+    PaddingsDirections["left"] = "left";
+    PaddingsDirections["right"] = "right";
+})(PaddingsDirections || (PaddingsDirections = {}));

package/build/esm/utils/cn.d.ts

@@ -0,0 +1,4 @@
+import blockOrigin from 'bem-cn-lite';
+export declare const NAMESPACE = "bc-";
+export type CnBlock = ReturnType<typeof blockOrigin>;
+export declare function block(name: string): CnBlock;

package/build/esm/utils/cn.js

@@ -0,0 +1,5 @@
+import blockOrigin from 'bem-cn-lite';
+export const NAMESPACE = 'bc-';
+export function block(name) {
+    return blockOrigin(`${NAMESPACE}${name}`);
+}

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

@@ -0,0 +1,42 @@
+/// <reference types="lodash" />
+import { ContentBlockProps, HeaderBreadCrumbsProps, MetrikaGoal, NewMetrikaGoal } from '@gravity-ui/page-constructor';
+import { RouterContextProps } from '../contexts/RouterContext';
+import { Tag, GetPostsRequest, Query } from '../models/common';
+export interface QueryParam {
+    name: string;
+    value?: string | number | null;
+}
+export interface RouterActionOptions {
+    shallow?: boolean;
+}
+export declare function getAbsolutePath(router: RouterContextProps, url?: string): string;
+export declare const getPageSearchParams: (query?: Query) => URLSearchParams;
+export declare const scrollToHash: (hash: string, browser?: string) => void;
+type CloudListTagStub = {};
+export declare const getTags: ((tags: Tag[], prefix?: string) => CloudListTagStub[]) & import("lodash").MemoizedFunction;
+export declare const postLikeStatus: import("lodash").DebouncedFunc<(postId: number, hasUserLike: boolean) => void>;
+export declare const getTagFilterUrl: (tagId: string | number, prefix: string) => string;
+export declare const updateContentSizes: ({ size, colSizes, theme, ...contentData }: ContentBlockProps) => {
+    size: import("@gravity-ui/page-constructor").ContentSize;
+    colSizes: {
+        all: number;
+        md: number;
+    } | Partial<Record<import("@gravity-ui/page-constructor").GridColumnSize, number>>;
+    theme: import("@gravity-ui/page-constructor").ContentTheme;
+    title?: string | import("@gravity-ui/page-constructor").TitleBaseProps | undefined;
+    text?: string | undefined;
+    additionalInfo?: string | undefined;
+    links?: import("@gravity-ui/page-constructor").LinkProps[] | undefined;
+    buttons?: import("@gravity-ui/page-constructor").ButtonProps[] | undefined;
+    centered?: boolean | undefined;
+};
+type GetBreadcrumbsProps = {
+    tags?: Tag[];
+    pathPrefix?: string;
+};
+export declare const getBreadcrumbs: ({ tags, pathPrefix }: GetBreadcrumbsProps) => HeaderBreadCrumbsProps;
+export declare const isMetrikaExist: (goal: NewMetrikaGoal, existGoals: NewMetrikaGoal[]) => boolean;
+export declare const getBlogElementMetrika: (blogCustomGoal: NewMetrikaGoal, existingGoals?: MetrikaGoal) => string | string[] | NewMetrikaGoal[];
+export declare const getFeedQueryParams: (queryString: Query, pageNumber?: number) => GetPostsRequest;
+export declare const scrollOnPageChange: (containerId: string) => void;
+export {};

package/build/esm/utils/common.js

@@ -0,0 +1,107 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { format, parse } from 'url';
+import { memoize, debounce } from 'lodash';
+import { isNewMetrikaFormat, } from '@gravity-ui/page-constructor';
+import { i18, Keyset } from '../i18n';
+import { CONTENT_DEFAULT_COL_SIZES, CONTENT_DEFAULT_SIZE, CONTENT_DEFAULT_THEME, DEFAULT_ROWS_PER_PAGE, DEFAULT_PAGE, } from '../blocks/constants';
+export function getAbsolutePath(router, url) {
+    if (!router || !router.pathname) {
+        return url !== null && url !== void 0 ? url : '';
+    }
+    const parsed = parse(url || router.as || '');
+    return format(Object.assign(Object.assign({}, parsed), { protocol: parsed.protocol || 'https', hostname: parsed.hostname || router.hostname, pathname: parsed.pathname || router.pathname }));
+}
+export const getPageSearchParams = (query = {}) => {
+    const searchParams = new URLSearchParams();
+    Object.entries(query).forEach(([key, value]) => {
+        searchParams.set(key, String(value));
+    });
+    return searchParams;
+};
+export const scrollToHash = (hash, browser) => {
+    if (!hash) {
+        return;
+    }
+    const element = document.getElementById(hash);
+    if (!element) {
+        return;
+    }
+    setTimeout(() => element.scrollIntoView({ behavior: browser === 'Yandex' ? 'auto' : 'smooth' }), 0);
+};
+export const getTags = memoize((tags, prefix) => {
+    return tags.map((_a) => {
+        var { slug } = _a, tag = __rest(_a, ["slug"]);
+        const queryParams = new URLSearchParams();
+        queryParams.set('tags', slug);
+        return Object.assign(Object.assign({}, tag), { id: slug, url: `${prefix}blog?${queryParams}` });
+    });
+});
+const stub = (postId) => postId;
+export const postLikeStatus = debounce((postId, hasUserLike) => {
+    (hasUserLike ? stub : stub)(postId);
+}, 300);
+export const getTagFilterUrl = (tagId, prefix) => {
+    return `${prefix}blog?tags=` + tagId;
+};
+export const updateContentSizes = (_a) => {
+    var { size, colSizes, theme } = _a, contentData = __rest(_a, ["size", "colSizes", "theme"]);
+    return (Object.assign(Object.assign({}, contentData), { size: size || CONTENT_DEFAULT_SIZE, colSizes: colSizes || CONTENT_DEFAULT_COL_SIZES, theme: theme || CONTENT_DEFAULT_THEME }));
+};
+export const getBreadcrumbs = ({ tags, pathPrefix }) => {
+    const prefix = pathPrefix ? `/${pathPrefix}/` : '/';
+    const breadcrumbs = {
+        items: [{ text: i18(Keyset.TitleBreadcrumbs), url: `${prefix}blog` }],
+        theme: 'light',
+    };
+    if (tags === null || tags === void 0 ? void 0 : tags.length) {
+        const localizedTags = getTags(tags, prefix);
+        const tag = localizedTags[0];
+        // @ts-ignore todo fix
+        breadcrumbs.items.push({ text: tag.name, url: getTagFilterUrl(tag.id, prefix) });
+    }
+    return breadcrumbs;
+};
+export const isMetrikaExist = (goal, existGoals) => {
+    return Boolean(existGoals.find((existGoal) => goal.name === existGoal.name));
+};
+export const getBlogElementMetrika = (blogCustomGoal, existingGoals) => {
+    if (existingGoals) {
+        if (isNewMetrikaFormat(existingGoals) && !isMetrikaExist(blogCustomGoal, existingGoals)) {
+            const goals = [...existingGoals];
+            goals.push(blogCustomGoal);
+            return goals;
+        }
+        return existingGoals;
+    }
+    else {
+        return [blogCustomGoal];
+    }
+};
+export const getFeedQueryParams = (queryString, pageNumber) => {
+    const queryParams = getPageSearchParams(queryString);
+    const tags = queryParams.get('tags') || undefined;
+    const page = pageNumber || Number(queryParams.get('page') || DEFAULT_PAGE);
+    const perPage = Number(queryParams.get('perPage') || DEFAULT_ROWS_PER_PAGE);
+    const savedOnly = queryParams.get('savedOnly') === 'true';
+    const search = queryParams.get('search') || undefined;
+    const serviceIds = queryParams.get('services') || undefined;
+    return { tags, page, perPage, savedOnly, search, services: serviceIds };
+};
+export const scrollOnPageChange = (containerId) => {
+    var _a;
+    const cardsContainerEl = document.getElementById(containerId);
+    const y = ((_a = cardsContainerEl === null || cardsContainerEl === void 0 ? void 0 : cardsContainerEl.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.y) || 0;
+    if (y < 0) {
+        scrollToHash(containerId);
+    }
+};

package/build/esm/utils/date.d.ts

@@ -0,0 +1,13 @@
+interface DateTimeFormatter {
+    longDate: Intl.DateTimeFormat;
+    shortDate: Intl.DateTimeFormat;
+    longMonthDay: Intl.DateTimeFormat;
+    shortMonthDay: Intl.DateTimeFormat;
+    longDateTime: Intl.DateTimeFormat;
+    shortDateTime: Intl.DateTimeFormat;
+    shortTime: Intl.DateTimeFormat;
+    nanoTime: Intl.DateTimeFormat;
+    year: Intl.DateTimeFormat;
+}
+export declare const format: (date: string | number, formatCode: keyof DateTimeFormatter, localeCode?: string) => string;
+export {};

package/build/esm/utils/date.js

@@ -0,0 +1,55 @@
+const defaultRegion = 'ru-RU';
+const dateTimeFormatters = new Map();
+function getDateTimeFormatter(localeCode) {
+    if (!dateTimeFormatters.has(localeCode)) {
+        const formatters = {
+            // December 20, 2012
+            longDate: new Intl.DateTimeFormat(localeCode, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            }),
+            // 4/30/2021
+            shortDate: new Intl.DateTimeFormat(localeCode, {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric',
+            }),
+            // December 20
+            longMonthDay: new Intl.DateTimeFormat(localeCode, { month: 'long', day: 'numeric' }),
+            // 12/20
+            shortMonthDay: new Intl.DateTimeFormat(localeCode, { month: 'numeric', day: 'numeric' }),
+            // April 27, 2021, 3:03 PM
+            longDateTime: new Intl.DateTimeFormat(localeCode, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+            }),
+            // 4/30/2021, 2:30 PM
+            shortDateTime: new Intl.DateTimeFormat(localeCode, {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+            }),
+            // 12:30
+            shortTime: new Intl.DateTimeFormat(localeCode, { hour: 'numeric', minute: 'numeric' }),
+            // 30:58
+            nanoTime: new Intl.DateTimeFormat(localeCode, {
+                minute: 'numeric',
+                second: 'numeric',
+            }),
+            // 2023
+            year: new Intl.DateTimeFormat(localeCode, {
+                year: 'numeric',
+            }),
+        };
+        dateTimeFormatters.set(localeCode, formatters);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- formatter will be always inserted above
+    return dateTimeFormatters.get(localeCode);
+}
+export const format = (date, formatCode, localeCode = defaultRegion) => getDateTimeFormatter(localeCode)[formatCode].format(new Date(date));

package/build/esm/utils/svg.d.ts

@@ -0,0 +1,3 @@
+export declare const a11yHiddenSvgProps: {
+    'aria-hidden': boolean;
+};

package/build/esm/utils/svg.js

@@ -0,0 +1,4 @@
+export const a11yHiddenSvgProps = {
+    // Hides element from a11y tree
+    'aria-hidden': true,
+};