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

package/build/cjs/components/PostInfo/PostInfo.css

@@ -0,0 +1,88 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-post-info__item {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+  padding-right: 24px;
+  padding-top: 12px;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.bc-post-info__item_size_s {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.bc-post-info__item_size_m {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}
+.bc-post-info__item:last-child {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+  padding-right: 0px;
+  padding-top: 12px;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.bc-post-info__switcher {
+  color: var(--yc-color-text-secondary);
+}
+.bc-post-info__switcher:hover {
+  color: var(--yc-color-text-primary);
+}
+.bc-post-info__switcher_theme_dark {
+  color: var(--yc-color-text-light-secondary);
+}
+.bc-post-info__switcher_theme_dark.yc-share-tooltip__container, .bc-post-info__switcher_theme_dark.yc-share-popover__container {
+  color: var(--yc-color-text-light-secondary);
+}
+.bc-post-info__switcher_theme_dark:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.bc-post-info__switcher_theme_dark:hover.yc-share-tooltip__container, .bc-post-info__switcher_theme_dark:hover.yc-share-popover__container {
+  color: var(--yc-color-text-light-primary);
+}
+.bc-post-info__container {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  padding-top: 12px;
+  color: var(--yc-color-text-secondary);
+}
+.bc-post-info__container_theme_dark {
+  color: var(--yc-color-text-light-secondary);
+}
+.bc-post-info__icon {
+  margin-right: 6px;
+  display: flex;
+  align-items: center;
+}
+.bc-post-info__title {
+  width: auto;
+  overflow: hidden;
+}
+.bc-post-info__title_cursor {
+  cursor: pointer;
+}
+.bc-post-info__content {
+  display: flex;
+}
+.bc-post-info__content_cursor {
+  cursor: pointer;
+}
+.bc-post-info__content_cursor:hover {
+  color: var(--yc-color-text-primary);
+}
+.bc-post-info__content_cursor.bc-post-info__content_theme_dark:hover {
+  color: var(--yc-color-text-light-primary);
+}
+.bc-post-info__likes {
+  display: flex;
+}
+.bc-post-info__suggest-container {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+}

package/build/cjs/components/PostInfo/PostInfo.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { PostData } from '../../models/common';
+export type BlogMetrikaGoals = {
+    sharing?: string;
+    save?: string;
+};
+type PostInfoProps = {
+    postId: PostData['id'];
+    readingTime: PostData['readingTime'];
+    date: PostData['date'];
+    theme?: 'light' | 'dark';
+    metrikaGoals?: BlogMetrikaGoals;
+    dataQa?: string;
+};
+/**
+ *  Blog post info panel component
+ *
+ * @param postId - post id
+ * @param readingTime - post reading time
+ * @param date - post create date
+ * @param theme - theme name
+ * @param metrikaGoals - metrika goals name
+ * @param dataQa - test-attr
+ *
+ * @returns jsx
+ */
+export declare const PostInfo: React.FC<PostInfoProps>;
+export {};

package/build/cjs/components/PostInfo/PostInfo.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PostInfo = void 0;
+const react_1 = __importStar(require("react"));
+const PostPageContext_1 = require("../../contexts/PostPageContext");
+const Date_1 = require("./components/Date");
+const ReadingTime_1 = require("./components/ReadingTime");
+const Sharing_1 = require("./components/Sharing");
+const Save_1 = require("./components/Save");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('post-info');
+/**
+ *  Blog post info panel component
+ *
+ * @param postId - post id
+ * @param readingTime - post reading time
+ * @param date - post create date
+ * @param theme - theme name
+ * @param metrikaGoals - metrika goals name
+ * @param dataQa - test-attr
+ *
+ * @returns jsx
+ */
+const PostInfo = ({ date, readingTime, postId, theme = 'light', metrikaGoals, dataQa, }) => {
+    const { likes } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
+    return (react_1.default.createElement("div", { className: b('container', { theme }) },
+        date && react_1.default.createElement(Date_1.Date, { date: date }),
+        readingTime && react_1.default.createElement(ReadingTime_1.ReadingTime, { readingTime: readingTime }),
+        react_1.default.createElement(Sharing_1.Sharing, { metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.sharing, theme: theme }),
+        likes && (react_1.default.createElement(Save_1.Save, { postId: postId, title: likes.likesCount, hasUserLike: likes.hasUserLike, handleUserLike: likes.handleUserLike, metrikaGoal: metrikaGoals === null || metrikaGoals === void 0 ? void 0 : metrikaGoals.save, theme: theme, dataQa: dataQa }))));
+};
+exports.PostInfo = PostInfo;

package/build/cjs/components/PostInfo/SuggestPostInfo.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { PostData, ToggleLikeCallbackType } from '../../models/common';
+export interface SuggestPostInfoProps extends Pick<PostData, 'date' | 'readingTime' | 'hasUserLike'> {
+    postId: PostData['blogPostId'];
+    size?: 's' | 'm';
+    dataQa?: string;
+    likes?: {
+        likesCount?: number;
+        hasUserLike?: boolean;
+        toggleLike?: ToggleLikeCallbackType;
+    };
+}
+/**
+ * Suggest blog card info component
+ *
+ * @param postId - post id
+ * @param date - post create date
+ * @param readingTime - post reading time
+ * @param hasUserLike - flag that the user liked the post
+ * @param likes - likes count
+ * @param dataQa - test-attr
+ * @param size - text size
+ * @param isModernIcon - flag what we need render 'bookmark' icon
+ *
+ * @returns jsx
+ */
+export declare const SuggestPostInfo: React.FC<SuggestPostInfoProps>;

package/build/cjs/components/PostInfo/SuggestPostInfo.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuggestPostInfo = void 0;
+const react_1 = __importDefault(require("react"));
+const useLikes_1 = require("../../hooks/useLikes");
+const Date_1 = require("./components/Date");
+const ReadingTime_1 = require("./components/ReadingTime");
+const Save_1 = require("./components/Save");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('post-info');
+/**
+ * Suggest blog card info component
+ *
+ * @param postId - post id
+ * @param date - post create date
+ * @param readingTime - post reading time
+ * @param hasUserLike - flag that the user liked the post
+ * @param likes - likes count
+ * @param dataQa - test-attr
+ * @param size - text size
+ * @param isModernIcon - flag what we need render 'bookmark' icon
+ *
+ * @returns jsx
+ */
+const SuggestPostInfo = ({ postId, date, readingTime, likes, size = 's', dataQa, }) => {
+    const { hasUserLike, likesCount, handleLike } = (0, useLikes_1.useLikes)({
+        hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
+        count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
+        toggleLikeCallback: likes === null || likes === void 0 ? void 0 : likes.toggleLike,
+        postId: postId,
+    });
+    return (react_1.default.createElement("div", { className: b('container') },
+        react_1.default.createElement("div", { className: b('suggest-container') },
+            date && react_1.default.createElement(Date_1.Date, { date: date, size: size }),
+            readingTime && react_1.default.createElement(ReadingTime_1.ReadingTime, { readingTime: readingTime, size: size })),
+        likes && postId && (react_1.default.createElement(Save_1.Save, { postId: postId, title: likesCount, hasUserLike: hasUserLike, handleUserLike: handleLike, size: size, dataQa: dataQa }))));
+};
+exports.SuggestPostInfo = SuggestPostInfo;

package/build/cjs/components/PostInfo/components/Date.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type DateProps = {
+    date: string | number;
+    size?: 's' | 'm';
+};
+export declare const Date: React.FC<DateProps>;
+export {};

package/build/cjs/components/PostInfo/components/Date.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Date = void 0;
+const react_1 = __importStar(require("react"));
+const LocaleContext_1 = require("../../../contexts/LocaleContext");
+const date_1 = require("../../../utils/date");
+const cn_1 = require("../../../utils/cn");
+const b = (0, cn_1.block)('post-info');
+const Date = ({ date, size = 's' }) => {
+    const { locale } = (0, react_1.useContext)(LocaleContext_1.LocaleContext);
+    return react_1.default.createElement("div", { className: b('item', { size }) }, (0, date_1.format)(date, 'longDate', locale === null || locale === void 0 ? void 0 : locale.code));
+};
+exports.Date = Date;

package/build/cjs/components/PostInfo/components/ReadingTime.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ReadingTimeProps = {
+    readingTime: number;
+    size?: 's' | 'm';
+};
+export declare const ReadingTime: React.FC<ReadingTimeProps>;
+export {};

package/build/cjs/components/PostInfo/components/ReadingTime.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadingTime = void 0;
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const i18n_1 = require("../../../i18n");
+const Time_1 = require("../../../icons/Time");
+const cn_1 = require("../../../utils/cn");
+const b = (0, cn_1.block)('post-info');
+const ICON_SIZE = 16;
+const ReadingTime = ({ readingTime, size = 's' }) => (react_1.default.createElement("div", { className: b('item', { size }) },
+    react_1.default.createElement("span", { className: b('icon') },
+        react_1.default.createElement(uikit_1.Icon, { data: Time_1.Time, size: ICON_SIZE, className: b('icon-color') })),
+    (0, i18n_1.i18)(i18n_1.Keyset.ContextReadingTime, { count: readingTime })));
+exports.ReadingTime = ReadingTime;

package/build/cjs/components/PostInfo/components/Save.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+type SaveProps = {
+    title: string | number;
+    postId: number;
+    hasUserLike: boolean;
+    handleUserLike: () => void;
+    theme?: 'light' | 'dark';
+    metrikaGoal?: string;
+    dataQa?: string;
+    size?: 's' | 'm';
+};
+/**
+ * Components for 'save' blog UI-component
+ *
+ * @param title - post title
+ * @param postId - post id
+ * @param hasUserLike - flag what blog has like from current user
+ * @param metrikaGoal - metrika goal name
+ * @param dataQa - test-attr
+ * @param size - text size
+ *
+ * @returns jsx
+ */
+export declare const Save: React.FC<SaveProps>;
+export {};

package/build/cjs/components/PostInfo/components/Save.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Save = void 0;
+const react_1 = __importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const common_1 = require("../../../utils/common");
+const cn_1 = require("../../../utils/cn");
+const utils_1 = require("../../../counters/utils");
+// @ts-ignore
+const metrika_js_1 = __importDefault(require("../../../counters/metrika.js"));
+const Save_1 = require("../../../icons/Save");
+const SaveFilled_1 = require("../../../icons/SaveFilled");
+const UserContext_1 = require("../../../contexts/UserContext");
+const ICON_SIZE = 16;
+const b = (0, cn_1.block)('post-info');
+/**
+ * Components for 'save' blog UI-component
+ *
+ * @param title - post title
+ * @param postId - post id
+ * @param hasUserLike - flag what blog has like from current user
+ * @param metrikaGoal - metrika goal name
+ * @param dataQa - test-attr
+ * @param size - text size
+ *
+ * @returns jsx
+ */
+const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, dataQa, }) => {
+    const { uid } = (0, react_1.useContext)(UserContext_1.UserContext);
+    return (react_1.default.createElement("div", { className: b('item', { size }), onClick: (event) => {
+            // both preventDefault and stopImmediatePropagation required to work properly
+            // https://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events
+            event.preventDefault();
+            event.nativeEvent.stopImmediatePropagation();
+            if (!uid) {
+                return;
+            }
+            (0, common_1.postLikeStatus)(postId, Boolean(hasUserLike));
+            handleUserLike();
+            metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, metrikaGoal);
+        }, "data-qa": `${dataQa ? dataQa + '-' : ''}save` },
+        react_1.default.createElement("div", { className: b('content', { cursor: Boolean(uid), theme }) },
+            react_1.default.createElement("span", { className: b('icon') },
+                react_1.default.createElement(uikit_1.Icon, { data: hasUserLike ? SaveFilled_1.SaveFilled : Save_1.Save, size: ICON_SIZE, className: b({ filled: Boolean(hasUserLike) }) })),
+            react_1.default.createElement("span", { className: b('title', { cursor: Boolean(uid) }) }, title))));
+};
+exports.Save = Save;

package/build/cjs/components/PostInfo/components/Sharing.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type SharingProps = {
+    theme?: 'light' | 'dark';
+    metrikaGoal?: string;
+};
+export declare const Sharing: React.FC<SharingProps>;
+export {};

package/build/cjs/components/PostInfo/components/Sharing.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sharing = void 0;
+const react_1 = __importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const MobileContext_1 = require("../../../contexts/MobileContext");
+const RouterContext_1 = require("../../../contexts/RouterContext");
+const PostPageContext_1 = require("../../../contexts/PostPageContext");
+const i18n_1 = require("../../../i18n");
+const common_1 = require("../../../utils/common");
+const cn_1 = require("../../../utils/cn");
+const utils_1 = require("../../../counters/utils");
+// @ts-ignore
+const metrika_js_1 = __importDefault(require("../../../counters/metrika.js"));
+const ShareArrowUp_1 = require("../../../icons/ShareArrowUp");
+const b = (0, cn_1.block)('post-info');
+const Sharing = ({ theme, metrikaGoal }) => {
+    const router = (0, react_1.useContext)(RouterContext_1.RouterContext);
+    const isMobile = (0, react_1.useContext)(MobileContext_1.MobileContext);
+    const { shareOptions } = (0, react_1.useContext)(PostPageContext_1.PostPageContext);
+    const handleMetrika = () => {
+        metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, metrikaGoal);
+    };
+    return (react_1.default.createElement("div", { className: b('item') },
+        react_1.default.createElement("span", { className: b('icon') },
+            react_1.default.createElement(uikit_1.SharePopover, { url: (0, common_1.getAbsolutePath)(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: (0, i18n_1.i18)(i18n_1.Keyset.ActionShare), customIcon: ShareArrowUp_1.ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleMetrika }))));
+};
+exports.Sharing = Sharing;

package/build/cjs/components/Posts/Posts.css

@@ -0,0 +1,28 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-posts__cards-container, .bc-posts__pinned-container {
+  padding-top: 24px;
+  scroll-margin: 48px;
+}
+.bc-posts__pagination {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 48px;
+  padding-bottom: 64px;
+}
+.bc-posts__more-button {
+  margin-bottom: 12px;
+}
+.bc-posts__error-show-more {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--yc-color-promo-base-tomato);
+  padding-bottom: 12px;
+}
+.bc-posts__paginator {
+  padding-top: 12px;
+}

package/build/cjs/components/Posts/Posts.d.ts

@@ -0,0 +1,19 @@
+import React, { MouseEvent } from 'react';
+import { PostData } from '../../models/common';
+type PostCardProps = {
+    containerId: string;
+    currentPage: number;
+    isShowMoreVisible: boolean;
+    errorShowMore: boolean;
+    postCountOnPage: number;
+    perPageInQuery: number;
+    isFetching: boolean;
+    isShowMoreFetching: boolean;
+    handleShowMore: (value?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void> | void;
+    handlePageChange: (value: number) => Promise<void> | void;
+    postsOnPage?: PostData[];
+    pinnedPostOnPage?: PostData;
+    pageCountForShowSupportButtons?: number;
+};
+export declare const Posts: React.FC<PostCardProps>;
+export {};

package/build/cjs/components/Posts/Posts.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Posts = void 0;
+const react_1 = __importDefault(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const uikit_1 = require("@gravity-ui/uikit");
+const i18n_1 = require("../../i18n");
+const Paginator_1 = require("../Paginator/Paginator");
+const PostCard_1 = require("../PostCard/PostCard");
+const PostsEmpty_1 = require("../PostsEmpty/PostsEmpty");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('posts');
+const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShowMoreVisible, errorShowMore, postCountOnPage, perPageInQuery, isFetching, isShowMoreFetching, handleShowMore, handlePageChange, pageCountForShowSupportButtons, }) => (react_1.default.createElement("div", { className: b() },
+    react_1.default.createElement("div", { id: containerId, className: b('cards-container') },
+        pinnedPostOnPage && currentPage === 1 && (react_1.default.createElement("div", { className: b('pinned-container') },
+            react_1.default.createElement(PostCard_1.PostCard, { post: pinnedPostOnPage, size: "m", fullWidth: true, showTag: true }))),
+        (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length) ? (react_1.default.createElement(page_constructor_1.CardLayoutBlock, { title: '', colSizes: {
+                all: 12,
+                lg: 4,
+                md: 6,
+            } }, postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, post: post, showTag: true }))))) : (react_1.default.createElement(PostsEmpty_1.PostsEmpty, null))),
+    react_1.default.createElement("div", { className: b('pagination') },
+        Boolean(isShowMoreVisible && (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length)) && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", className: b('more-button'), onClick: handleShowMore, loading: isShowMoreFetching }, (0, i18n_1.i18)(i18n_1.Keyset.ActionLoadMore))),
+        errorShowMore && (react_1.default.createElement("div", { className: b('error-show-more') },
+            react_1.default.createElement("div", null, (0, i18n_1.i18)(i18n_1.Keyset.ErrorTitle)),
+            react_1.default.createElement("div", null, (0, i18n_1.i18)(i18n_1.Keyset.PostLoadError)))),
+        Boolean(currentPage && postCountOnPage) && (react_1.default.createElement("div", { className: b('paginator') },
+            react_1.default.createElement(Paginator_1.Paginator, { onPageChange: handlePageChange, page: currentPage, totalItems: postCountOnPage, itemsPerPage: perPageInQuery, loading: isFetching, maxPages: Infinity, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))))));
+exports.Posts = Posts;

package/build/cjs/components/PostsEmpty/PostsEmpty.css

@@ -0,0 +1,25 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-posts-empty__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.bc-posts-empty__title, .bc-posts-empty__subtitle {
+  text-align: center;
+  word-wrap: break-word;
+  max-width: 400px;
+  width: 100%;
+}
+.bc-posts-empty__title {
+  margin-top: 24px;
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+.bc-posts-empty__subtitle {
+  margin-top: 16px;
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}

package/build/cjs/components/PostsEmpty/PostsEmpty.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PostsEmpty: React.FC;

package/build/cjs/components/PostsEmpty/PostsEmpty.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PostsEmpty = void 0;
+const react_1 = __importDefault(require("react"));
+const cn_1 = require("../../utils/cn");
+const i18n_1 = require("../../i18n");
+const b = (0, cn_1.block)('posts-empty');
+const PostsEmpty = () => (react_1.default.createElement("div", { className: b('container') },
+    react_1.default.createElement("div", { className: b('title') }, (0, i18n_1.i18)(i18n_1.Keyset.TitleEmptyContainer)),
+    react_1.default.createElement("div", { className: b('subtitle') }, (0, i18n_1.i18)(i18n_1.Keyset.ContextEmptyContainer))));
+exports.PostsEmpty = PostsEmpty;

package/build/cjs/components/PostsError/PostError.css

@@ -0,0 +1,30 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-posts-error__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 24px;
+  padding-bottom: 64px;
+}
+.bc-posts-error__title, .bc-posts-error__subtitle {
+  text-align: center;
+  word-wrap: break-word;
+  max-width: 400px;
+  width: 100%;
+}
+.bc-posts-error__title {
+  margin-top: 24px;
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+.bc-posts-error__subtitle {
+  margin-top: 16px;
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+}
+.bc-posts-error__button {
+  padding: 24px 0 48px;
+}

package/build/cjs/components/PostsError/PostsError.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type PostsErrorContainerProps = {
+    onButtonClick?: () => void | Promise<void>;
+};
+export declare const PostsError: React.FC<PostsErrorContainerProps>;
+export {};