@gravity-ui/blog-constructor 1.0.0-aplha.0

package/build/esm/blocks/Author/Author.js

@@ -0,0 +1,34 @@
+import React, { useMemo, useContext } from 'react';
+import { Author as PCAuthor, AuthorType } from '@gravity-ui/page-constructor';
+import { PostPageContext } from '../../contexts/PostPageContext';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { PaddingsDirections } from '../../models/paddings';
+import { block } from '../../utils/cn';
+import './Author.css';
+const b = block('author');
+export const Author = (props) => {
+    var _a;
+    const { image, paddingTop, paddingBottom, authorId } = props;
+    const { post } = useContext(PostPageContext);
+    const author = (_a = post === null || post === void 0 ? void 0 : post.authors) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === authorId);
+    const authorItem = useMemo(() => {
+        var _a;
+        const imageUrl = (_a = author === null || author === void 0 ? void 0 : author.avatar) !== null && _a !== void 0 ? _a : image;
+        const authorAvatar = React.createElement("img", { src: imageUrl, alt: "author" });
+        return {
+            firstName: (author === null || author === void 0 ? void 0 : author.firstName) || '',
+            secondName: (author === null || author === void 0 ? void 0 : author.secondName) || '',
+            description: (author === null || author === void 0 ? void 0 : author.fullDescription) || '',
+            avatar: authorAvatar,
+        };
+    }, [author === null || author === void 0 ? void 0 : author.avatar, author === null || author === void 0 ? void 0 : author.firstName, author === null || author === void 0 ? void 0 : author.fullDescription, author === null || author === void 0 ? void 0 : author.secondName, image]);
+    if (!(authorItem === null || authorItem === void 0 ? void 0 : authorItem.firstName) || !(authorItem === null || authorItem === void 0 ? void 0 : authorItem.secondName)) {
+        return null;
+    }
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        }, className: b('content') },
+        React.createElement("div", { className: b('layout'), "data-qa": "blog-author-layout" },
+            React.createElement(PCAuthor, { type: AuthorType.Column, author: authorItem, authorContainerClassName: b('container') }))));
+};

package/build/esm/blocks/Banner/Banner.css

@@ -0,0 +1,58 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-banner {
+  margin-top: 16px;
+  padding-bottom: 16px;
+}
+.bc-banner__content {
+  width: 100%;
+  border-radius: var(--bc-border-radius);
+  position: relative;
+  display: flex;
+  flex-direction: row;
+}
+.bc-banner__container {
+  width: 100%;
+  border-radius: var(--bc-border-radius);
+  display: flex;
+  min-height: 220px;
+}
+.bc-banner__container_offset_large {
+  padding: calc(128px - 96px) 0 16px;
+  margin-bottom: -48px;
+}
+.bc-banner__info, .bc-banner__image {
+  flex: 1;
+}
+.bc-banner__info {
+  padding: 32px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: baseline;
+}
+.bc-banner__image {
+  margin: var(--pc-image-padding);
+  border-radius: calc(var(--pc-border-radius) - var(--pc-image-padding));
+  width: calc(100% - 8px);
+  height: calc(100% - 8px);
+  object-fit: cover;
+}
+.bc-banner__image-container {
+  height: 100%;
+}
+.bc-banner__image-container_image-size_s {
+  width: 25%;
+}
+.bc-banner__image-container_image-size_m {
+  width: 50%;
+}
+@media (max-width: 577px) {
+  .bc-banner__content {
+    flex-direction: column;
+  }
+  .bc-banner__image-container_image-size_s, .bc-banner__image-container_image-size_m {
+    width: 100%;
+    height: 236px;
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BannerProps } from '../../models/blocks';
+import './Banner.css';
+export declare const Banner: React.FC<BannerProps>;

package/build/esm/blocks/Banner/Banner.js

@@ -0,0 +1,45 @@
+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 React from 'react';
+import { Content, Image } from '@gravity-ui/page-constructor';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { getBlogElementMetrika, updateContentSizes } from '../../utils/common';
+import { block } from '../../utils/cn';
+import { PaddingsDirections } from '../../models/paddings';
+import { BlogMetrikaGoalIds } from '../../constants';
+import './Banner.css';
+const b = block('banner');
+export const Banner = (_a) => {
+    var _b;
+    var { color, imageSize = 's', image, paddingTop, paddingBottom } = _a, content = __rest(_a, ["color", "imageSize", "image", "paddingTop", "paddingBottom"]);
+    const contentStyle = {};
+    if (color) {
+        contentStyle.backgroundColor = color;
+    }
+    const contentData = updateContentSizes(content);
+    const metrikaGoal = {
+        name: BlogMetrikaGoalIds.bannerCommon,
+        isCrossSite: true,
+    };
+    (_b = contentData.buttons) === null || _b === void 0 ? void 0 : _b.forEach((button) => {
+        button.metrikaGoals = getBlogElementMetrika(metrikaGoal, button.metrikaGoals);
+    });
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        }, className: b('container') },
+        React.createElement("div", { className: b('content'), style: contentStyle, "data-qa": "blog-banner-content" },
+            React.createElement("div", { className: b('info') },
+                React.createElement(Content, Object.assign({}, contentData))),
+            image && (React.createElement("div", { className: b('image-container', { ['image-size']: imageSize }) },
+                React.createElement(Image, { className: b('image'), src: image }))))));
+};

package/build/esm/blocks/CTA/CTA.css

@@ -0,0 +1,56 @@
+.bc-cta__card {
+  display: flex;
+  background-color: var(--yc-color-base-float);
+  border-radius: var(--bc-border-radius);
+  min-height: 80px;
+  align-content: center;
+  justify-content: center;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 32px;
+}
+.bc-cta__button {
+  display: flex;
+  padding-bottom: 16px;
+}
+.bc-cta__content {
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 577px) {
+  .bc-cta__content {
+    display: flex;
+    flex-direction: row;
+  }
+  .bc-cta__button {
+    padding-bottom: 0px;
+  }
+  .bc-cta__button_layout {
+    width: 100%;
+    max-width: 100%;
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_2 {
+    width: calc(50% - (16px / 2));
+    max-width: 50%;
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_2:nth-child(2n) {
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_3 {
+    width: calc(33.3333333333% - (32px / 3));
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_3:nth-child(3n) {
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_4 {
+    width: calc(25% - (48px / 4));
+    max-width: 50%;
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_4:nth-child(4n) {
+    margin-right: 0px;
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CTAProps } from '../../models/blocks';
+import './CTA.css';
+export declare const CTA: React.FC<CTAProps>;

package/build/esm/blocks/CTA/CTA.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Content } from '@gravity-ui/page-constructor';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { getBlogElementMetrika, updateContentSizes } from '../../utils/common';
+import { PaddingsDirections } from '../../models/paddings';
+import { BlogMetrikaGoalIds } from '../../constants';
+import { block } from '../../utils/cn';
+import './CTA.css';
+const b = block('cta');
+const MAX_COLUMN_COUNT = 4, MIN_COLUMN_COUNT = 2, DEFAULT_COLUMN_COUNT = 3;
+export const CTA = ({ items, paddingTop, paddingBottom }) => {
+    let count = items ? items.length : DEFAULT_COLUMN_COUNT;
+    if (count < MIN_COLUMN_COUNT) {
+        count = MIN_COLUMN_COUNT;
+    }
+    else if (count > MAX_COLUMN_COUNT) {
+        count = MAX_COLUMN_COUNT;
+    }
+    const metrikaGoal = {
+        name: BlogMetrikaGoalIds.cta,
+        isCrossSite: true,
+    };
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        }, className: b('content'), dataQa: "blog-cta-content" }, items.slice(0, count).map((content, index) => {
+        var _a;
+        const contentData = updateContentSizes(content);
+        (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
+            link.metrikaGoals = getBlogElementMetrika(metrikaGoal, link.metrikaGoals);
+        });
+        return (React.createElement("div", { key: index, className: b('button', {
+                ['layout']: count,
+            }), "data-qa": "blog-cta-card" },
+            React.createElement("div", { className: b('card') },
+                React.createElement(Content, Object.assign({}, contentData)))));
+    })));
+};

package/build/esm/blocks/ColoredText/ColoredText.css

@@ -0,0 +1,28 @@
+.bc-colored-text__container {
+  display: flex;
+  border-radius: var(--bc-border-radius);
+  overflow: hidden;
+  position: relative;
+}
+.bc-colored-text__picture-container {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--bc-border-radius);
+  z-index: 1;
+  top: 0;
+  left: 0;
+}
+.bc-colored-text__picture {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+.bc-colored-text__text-content {
+  position: inherit;
+  z-index: 2;
+  height: 100%;
+  width: 100%;
+  padding: 32px;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColoredTextProps } from '../../models/blocks';
+import './ColoredText.css';
+export declare const ColoredText: React.FC<ColoredTextProps>;

package/build/esm/blocks/ColoredText/ColoredText.js

@@ -0,0 +1,31 @@
+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 React from 'react';
+import { BackgroundImage, Content } from '@gravity-ui/page-constructor';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { PaddingsDirections } from '../../models/paddings';
+import { updateContentSizes } from '../../utils/common';
+import { block } from '../../utils/cn';
+import './ColoredText.css';
+const b = block('colored-text');
+export const ColoredText = (_a) => {
+    var { background, paddingTop, paddingBottom } = _a, content = __rest(_a, ["background", "paddingTop", "paddingBottom"]);
+    const contentData = updateContentSizes(content);
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        } },
+        React.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": "blog-colored-text-content" },
+            React.createElement("div", { className: b('picture-container') }, (background === null || background === void 0 ? void 0 : background.image) && (React.createElement(BackgroundImage, { className: b('picture'), alt: background === null || background === void 0 ? void 0 : background.altText, src: background === null || background === void 0 ? void 0 : background.image }))),
+            React.createElement("div", { className: b('text-content') },
+                React.createElement(Content, Object.assign({}, contentData))))));
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FeedProps } from '../../models/blocks';
+export declare const Feed: React.FC<FeedProps>;

package/build/esm/blocks/Feed/Feed.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useCallback, useReducer, useMemo, useContext } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { FeedContext } from '../../contexts/FeedContext';
+import { RouterContext } from '../../contexts/RouterContext';
+import { LocaleContext } from '../../contexts/LocaleContext';
+import { DEFAULT_PAGE, DEFAULT_ROWS_PER_PAGE } from '../constants';
+import { BlogMetrikaGoalIds } from '../../constants';
+import { getFeedQueryParams, scrollOnPageChange } from '../../utils/common';
+import { FeedHeader } from '../../components/FeedHeader/FeedHeader';
+import { PostsError } from '../../components/PostsError/PostsError';
+import { Posts } from '../../components/Posts/Posts';
+import metrika from '../../counters/metrika.js';
+import { MetrikaCounter } from '../../counters/utils';
+import { ActionTypes, reducer } from './reducer';
+const CONTAINER_ID = 'blog-cards';
+const PAGE_QUERY = 'page';
+const FIRST_PAGE = 1;
+export const Feed = ({ image }) => {
+    var _a;
+    const { posts, totalCount, tags, services, pinnedPost, getPosts, pageCountForShowSupportButtons, } = useContext(FeedContext);
+    const router = useContext(RouterContext);
+    const { locale } = useContext(LocaleContext);
+    const [{ errorLoad, errorShowMore, isFetching, isShowMoreFetching, isShowMoreVisible, lastLoadedCount, postCountOnPage, postsOnPage, pinnedPostOnPage, currentPage, queryParams, }, dispatch,] = useReducer(reducer, {
+        errorLoad: false,
+        errorShowMore: false,
+        isFetching: false,
+        isShowMoreFetching: false,
+        isShowMoreVisible: true,
+        lastLoadedCount: (posts === null || posts === void 0 ? void 0 : posts.length) || 0,
+        postCountOnPage: totalCount || 0,
+        postsOnPage: posts,
+        pinnedPostOnPage: pinnedPost,
+        currentPage: ((_a = router === null || router === void 0 ? void 0 : router.query) === null || _a === void 0 ? void 0 : _a.page) ? Number(router.query.page) : DEFAULT_PAGE,
+        queryParams: router.query || {},
+    });
+    const perPageInQuery = (queryParams === null || queryParams === void 0 ? void 0 : queryParams.perPage)
+        ? Number(queryParams.perPage)
+        : DEFAULT_ROWS_PER_PAGE;
+    const pageChange = (value) => {
+        dispatch({ type: ActionTypes.PageChange, payload: value });
+    };
+    const handleChangeQueryParams = (value) => {
+        dispatch({ type: ActionTypes.QueryParamsChange, payload: value });
+    };
+    const handlePageChange = async (value) => {
+        pageChange(value);
+        handleChangeQueryParams({ page: value });
+    };
+    const fetchData = useCallback(async (pageNumber) => {
+        if (queryParams && getPosts) {
+            const query = getFeedQueryParams(queryParams, pageNumber);
+            const data = await getPosts(query);
+            return data;
+        }
+        else {
+            throw new Error('cant get request');
+        }
+    }, [getPosts, queryParams]);
+    const setIsFetching = (value) => {
+        dispatch({ type: ActionTypes.SetIsFetching, payload: value });
+    };
+    const fetchAndReplaceData = useCallback(async (pageNumber) => {
+        try {
+            dispatch({ type: ActionTypes.SetErrorLoad, payload: false });
+            const fetchedData = await fetchData(pageNumber);
+            if (fetchedData) {
+                dispatch({
+                    type: ActionTypes.SetPosts,
+                    payload: {
+                        posts: fetchedData.posts,
+                        pinnedPost: fetchedData.pinnedPost,
+                        count: fetchedData.count,
+                        page: pageNumber,
+                    },
+                });
+            }
+        }
+        catch (err) {
+            dispatch({ type: ActionTypes.SetErrorLoad, payload: true });
+        }
+        scrollOnPageChange(CONTAINER_ID);
+        setIsFetching(false);
+    }, [fetchData]);
+    const handleShowMore = async () => {
+        dispatch({ type: ActionTypes.SetIsShowMoreFetching, payload: true });
+        metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.showMore);
+        try {
+            const fetchedData = await fetchData(currentPage + 1);
+            handleChangeQueryParams({
+                page: currentPage + 1,
+            });
+            if (fetchedData) {
+                dispatch({
+                    type: ActionTypes.SetShowMore,
+                    payload: {
+                        posts: (postsOnPage !== null && postsOnPage !== void 0 ? postsOnPage : []).concat(fetchedData.posts),
+                        count: fetchedData.count,
+                        currentPage: currentPage + 1,
+                        lastLoadedCount: fetchedData.posts.length,
+                    },
+                });
+            }
+        }
+        catch (err) {
+            dispatch({ type: ActionTypes.SetErrorShowMore, payload: true });
+        }
+        dispatch({ type: ActionTypes.SetIsShowMoreFetching, payload: false });
+    };
+    useEffect(() => {
+        if (isFetching) {
+            fetchAndReplaceData(Number(queryParams.page || DEFAULT_PAGE));
+        }
+    }, [fetchAndReplaceData, isFetching, queryParams.page]);
+    useEffect(() => {
+        const loadedPostsCount = currentPage * perPageInQuery;
+        dispatch({
+            type: ActionTypes.SetIsShowMoreVisible,
+            payload: loadedPostsCount < postCountOnPage,
+        });
+    }, [currentPage, lastLoadedCount, perPageInQuery, postCountOnPage]);
+    const serviceItems = useMemo(() => services === null || services === void 0 ? void 0 : services.map((service) => ({
+        content: service.name,
+        value: `${service.id}`,
+    })), [services]);
+    const tagItems = useMemo(() => tags === null || tags === void 0 ? void 0 : tags.map((tag) => ({
+        content: tag.name,
+        value: tag.slug,
+        icon: tag.icon && React.createElement(Icon, { data: tag.icon }),
+    })), [tags]);
+    useEffect(() => {
+        const queryString = Object.keys(queryParams)
+            .reduce((acc, curr) => {
+            if (curr === PAGE_QUERY && queryParams[curr] === FIRST_PAGE) {
+                return acc;
+            }
+            if (queryParams[curr]) {
+                acc.push(`${curr}=${queryParams[curr]}`);
+            }
+            return acc;
+        }, [])
+            .join('&');
+        const pathPrefix = (locale === null || locale === void 0 ? void 0 : locale.pathPrefix) ? `/${locale === null || locale === void 0 ? void 0 : locale.pathPrefix}/` : '/';
+        const newUrl = `${pathPrefix}blog${queryString ? `?${queryString}` : ''}`;
+        window.history.replaceState(Object.assign(Object.assign({}, window.history.state), { as: newUrl, url: newUrl }), '', newUrl);
+    }, [locale === null || locale === void 0 ? void 0 : locale.pathPrefix, queryParams]);
+    return (React.createElement("div", null,
+        React.createElement(FeedHeader, { verticalOffset: "s", tags: tagItems, services: serviceItems, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQueryParams, queryParams: queryParams, background: {
+                fullWidth: true,
+                url: image,
+                disableCompress: true,
+            } }),
+        errorLoad ? (React.createElement(PostsError, { onButtonClick: () => fetchAndReplaceData(Number(queryParams.page || DEFAULT_PAGE)) })) : (React.createElement(Posts, { containerId: CONTAINER_ID, currentPage: currentPage, isShowMoreVisible: isShowMoreVisible, errorShowMore: errorShowMore, postCountOnPage: postCountOnPage, perPageInQuery: perPageInQuery, handleShowMore: handleShowMore, handlePageChange: handlePageChange, postsOnPage: postsOnPage, pinnedPostOnPage: pinnedPostOnPage, isFetching: isFetching, isShowMoreFetching: isShowMoreFetching, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))));
+};

package/build/esm/blocks/Feed/reducer.d.ts

@@ -0,0 +1,65 @@
+import { Query, PostData } from '../../models/common';
+export declare enum ActionTypes {
+    SetErrorLoad = "setErrorLoad",
+    SetErrorShowMore = "setErrorShowMore",
+    SetIsShowMoreVisible = "setIsShowMoreVisible",
+    SetPosts = "setPosts",
+    SetShowMore = "setShowMore",
+    SetIsFetching = "setIsFetching",
+    SetIsShowMoreFetching = "setIsShowMoreFetching",
+    PageChange = "pageChange",
+    QueryParamsChange = "queryParamsChange"
+}
+export type State = {
+    currentPage: number;
+    errorLoad: boolean;
+    errorShowMore: boolean;
+    isFetching: boolean;
+    isShowMoreFetching: boolean;
+    isShowMoreVisible: boolean;
+    lastLoadedCount: number;
+    pinnedPostOnPage?: PostData;
+    postCountOnPage: number;
+    postsOnPage?: PostData[];
+    queryParams: Query;
+};
+type Action = {
+    type: ActionTypes.PageChange;
+    payload: number;
+} | {
+    type: ActionTypes.SetIsFetching;
+    payload: boolean;
+} | {
+    type: ActionTypes.SetIsShowMoreFetching;
+    payload: boolean;
+} | {
+    type: ActionTypes.SetPosts;
+    payload: {
+        posts: PostData[];
+        pinnedPost?: PostData;
+        count: number;
+        page: number;
+    };
+} | {
+    type: ActionTypes.SetShowMore;
+    payload: {
+        posts: PostData[];
+        count: number;
+        currentPage: number;
+        lastLoadedCount: number;
+    };
+} | {
+    type: ActionTypes.SetErrorLoad;
+    payload: boolean;
+} | {
+    type: ActionTypes.SetErrorShowMore;
+    payload: boolean;
+} | {
+    type: ActionTypes.SetIsShowMoreVisible;
+    payload: boolean;
+} | {
+    type: ActionTypes.QueryParamsChange;
+    payload: Query;
+};
+export declare const reducer: (state: State, { type, payload }: Action) => State;
+export {};

package/build/esm/blocks/Feed/reducer.js

@@ -0,0 +1,36 @@
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes["SetErrorLoad"] = "setErrorLoad";
+    ActionTypes["SetErrorShowMore"] = "setErrorShowMore";
+    ActionTypes["SetIsShowMoreVisible"] = "setIsShowMoreVisible";
+    ActionTypes["SetPosts"] = "setPosts";
+    ActionTypes["SetShowMore"] = "setShowMore";
+    ActionTypes["SetIsFetching"] = "setIsFetching";
+    ActionTypes["SetIsShowMoreFetching"] = "setIsShowMoreFetching";
+    ActionTypes["PageChange"] = "pageChange";
+    ActionTypes["QueryParamsChange"] = "queryParamsChange";
+})(ActionTypes || (ActionTypes = {}));
+export const reducer = (state, { type, payload }) => {
+    switch (type) {
+        case ActionTypes.SetIsShowMoreVisible:
+            return Object.assign(Object.assign({}, state), { isShowMoreVisible: payload });
+        case ActionTypes.SetPosts:
+            return Object.assign(Object.assign({}, state), { lastLoadedCount: payload.count, postCountOnPage: payload.count, pinnedPostOnPage: payload.pinnedPost, postsOnPage: payload.posts, currentPage: payload.page });
+        case ActionTypes.SetShowMore:
+            return Object.assign(Object.assign({}, state), { lastLoadedCount: payload.lastLoadedCount, postCountOnPage: payload.count, currentPage: payload.currentPage, postsOnPage: payload.posts, errorShowMore: false, isShowMoreFetching: true });
+        case ActionTypes.SetIsFetching:
+            return Object.assign(Object.assign({}, state), { isFetching: payload });
+        case ActionTypes.SetIsShowMoreFetching:
+            return Object.assign(Object.assign({}, state), { isShowMoreFetching: payload });
+        case ActionTypes.PageChange:
+            return Object.assign(Object.assign({}, state), { currentPage: payload, isFetching: true });
+        case ActionTypes.SetErrorLoad:
+            return Object.assign(Object.assign({}, state), { errorLoad: payload });
+        case ActionTypes.SetErrorShowMore:
+            return Object.assign(Object.assign({}, state), { errorShowMore: payload });
+        case ActionTypes.QueryParamsChange:
+            return Object.assign(Object.assign({}, state), { queryParams: Object.assign(Object.assign({}, state.queryParams), payload) });
+        default:
+            return state;
+    }
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { HeaderProps } from '../../models/blocks';
+export declare const Header: React.FC<HeaderProps>;

package/build/esm/blocks/Header/Header.js

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+import { HeaderBlock } from '@gravity-ui/page-constructor';
+import { PostPageContext } from '../../contexts/PostPageContext';
+import { LocaleContext } from '../../contexts/LocaleContext';
+import { PostInfo } from '../../components/PostInfo/PostInfo';
+import { Wrapper } from '../../components/Wrapper/Wrapper';
+import { PaddingsDirections } from '../../models/paddings';
+import { getBreadcrumbs } from '../../utils/common';
+import { BlogMetrikaGoalIds } from '../../constants';
+const metrikaGoals = {
+    sharing: BlogMetrikaGoalIds.shareTop,
+    save: BlogMetrikaGoalIds.saveTop,
+};
+const breadcrumbsGoals = [
+    {
+        name: BlogMetrikaGoalIds.breadcrumbsTop,
+        isCrossSite: true,
+    },
+];
+export const Header = (props) => {
+    const { theme, paddingTop, paddingBottom } = props;
+    const { post } = useContext(PostPageContext);
+    const { locale } = useContext(LocaleContext);
+    const { description, title, id, date, readingTime, tags } = post;
+    const breadcrumbs = getBreadcrumbs({ tags, pathPrefix: (locale === null || locale === void 0 ? void 0 : locale.pathPrefix) || '' });
+    if (theme === 'dark' && breadcrumbs) {
+        breadcrumbs.theme = 'dark';
+    }
+    breadcrumbs.metrikaGoals = breadcrumbsGoals;
+    return (React.createElement(Wrapper, { paddings: {
+            [PaddingsDirections.top]: paddingTop,
+            [PaddingsDirections.bottom]: paddingBottom,
+        } },
+        React.createElement(HeaderBlock, Object.assign({}, props, { title: title, description: description, breadcrumbs: breadcrumbs }),
+            React.createElement(PostInfo, { postId: id, date: date, readingTime: readingTime, metrikaGoals: metrikaGoals, theme: theme, dataQa: "blog-header-meta-container" }))));
+};

package/build/esm/blocks/Layout/Layout.css

@@ -0,0 +1,22 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-layout {
+  margin: 0;
+  padding: 0;
+}
+.bc-layout__left-col.bc-layout__left-col {
+  padding: 0;
+}
+
+.bc-layout__right-col.bc-layout__right-col {
+  padding: 0;
+}
+
+.bc-layout__row {
+  padding: 0;
+  margin: 0;
+}
+.bc-layout__item {
+  margin: 0;
+  padding: 0 8px;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LayoutProps } from '../../models/blocks';
+import './Layout.css';
+export declare const Layout: React.FC<LayoutProps>;