@gravity-ui/blog-constructor 3.4.1 → 3.5.0-alpha.0

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

@@ -53,7 +53,7 @@ const b = (0, cn_1.block)('post-info');
  * @returns jsx
  */
 const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, dataQa, }) => {
-    const { toggleLike } = (0, react_1.useContext)(LikesContext_1.LikesContext);
+    const { toggleLike, isSignedInUser, requireSignIn } = (0, react_1.useContext)(LikesContext_1.LikesContext);
     const handleAnalytics = (0, page_constructor_1.useAnalytics)(common_1.DefaultEventNames.SaveButton);
     const isLikeable = Boolean(toggleLike);
     return (react_1.default.createElement("div", { className: b('item', { size }), onClick: (event) => {
@@ -64,6 +64,11 @@ const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, t
             if (!isLikeable) {
                 return;
             }
+            // Open Popup to ask the User to sign in first
+            if (!isSignedInUser && requireSignIn) {
+                requireSignIn(event);
+                return;
+            }
             (0, common_2.postLikeStatus)(postId, Boolean(hasUserLike));
             handleUserLike();
             metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, metrikaGoal);

package/build/cjs/components/Prompt/Prompt.css

@@ -0,0 +1,61 @@
+.bc-prompt__content {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+@keyframes bc-prompt_open {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+@keyframes bc-prompt_close {
+  0% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+.bc-prompt {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+}
+.bc-prompt:not(.bc-prompt_mounted) {
+  display: none;
+}
+.bc-prompt__content {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 16px;
+  align-items: center;
+  margin: 24px;
+  padding: 16px 20px;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--yc-color-base-float);
+  font-size: 1rem;
+}
+.bc-prompt_close {
+  pointer-events: none;
+}
+.bc-prompt_open > .bc-prompt__content {
+  opacity: 0;
+  transform: translateY(100%);
+  animation: bc-prompt_open 600ms forwards;
+}
+.bc-prompt_close > .bc-prompt__content {
+  opacity: 1;
+  transform: translateY(0%);
+  animation: bc-prompt_close 600ms forwards;
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ButtonProps } from '@gravity-ui/uikit';
+export interface PromptProps {
+    text: string;
+    actions: ButtonProps[];
+    openTimestamp?: number;
+    openDuration?: number;
+    className?: string;
+    theme?: 'grey' | 'beige' | 'white';
+}
+/**
+ * Popup that appears with text message and button(s) for given `actions`.
+ * Features:
+ *  - Automatically disappears after `openDuration` in milliseconds
+ *  - `openTimestamp` (`Date.now()`) resets the visible duration
+ * @returns {JSX|null}
+ */
+export declare const Prompt: React.FC<PromptProps>;

package/build/cjs/components/Prompt/Prompt.js

@@ -0,0 +1,41 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Prompt = void 0;
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const useOpenCloseTimer_1 = require("../../hooks/useOpenCloseTimer");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('prompt');
+/**
+ * Popup that appears with text message and button(s) for given `actions`.
+ * Features:
+ *  - Automatically disappears after `openDuration` in milliseconds
+ *  - `openTimestamp` (`Date.now()`) resets the visible duration
+ * @returns {JSX|null}
+ */
+const Prompt = ({ text, actions, className, openTimestamp = 0, openDuration, theme, }) => {
+    const { open } = (0, useOpenCloseTimer_1.useOpenCloseTimer)(openTimestamp, openDuration);
+    const mounted = openTimestamp > 0;
+    return (react_1.default.createElement("div", { className: b({ theme, open, close: !open, mounted }, className) },
+        react_1.default.createElement("div", { className: b('content') },
+            react_1.default.createElement("span", { className: b('text') }, text),
+            react_1.default.createElement("div", { className: b('actions') }, actions.map((_a, i) => {
+                var { view = 'action', className: btnClass } = _a, btnProps = __rest(_a, ["view", "className"]);
+                return (react_1.default.createElement(uikit_1.Button, Object.assign({ key: i, className: b('action', btnClass), view: view }, btnProps)));
+            })))));
+};
+exports.Prompt = Prompt;

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

@@ -0,0 +1,10 @@
+import React, { SyntheticEvent } from 'react';
+import { PromptProps } from '../Prompt/Prompt';
+export interface PromptSignInProps extends Partial<PromptProps> {
+    onClickSignIn?: React.EventHandler<SyntheticEvent>;
+}
+/**
+ * Authentication Popup that appears when user action requires login
+ * @returns {JSX|null}
+ */
+export declare const PromptSignIn: React.FC<PromptSignInProps>;

package/build/cjs/components/PromptSignIn/PromptSignIn.js

@@ -0,0 +1,34 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptSignIn = void 0;
+const react_1 = __importDefault(require("react"));
+const i18n_1 = require("../../i18n");
+const Prompt_1 = require("../Prompt/Prompt");
+/**
+ * Authentication Popup that appears when user action requires login
+ * @returns {JSX|null}
+ */
+const PromptSignIn = (_a) => {
+    var { text = (0, i18n_1.i18)(i18n_1.Keyset.PromptSignInOnLike), onClickSignIn = () => alert((0, i18n_1.i18)(i18n_1.Keyset.SignIn)), actions = [
+        {
+            children: (0, i18n_1.i18)(i18n_1.Keyset.SignIn),
+            onClick: onClickSignIn,
+        },
+    ] } = _a, props = __rest(_a, ["text", "onClickSignIn", "actions"]);
+    return react_1.default.createElement(Prompt_1.Prompt, Object.assign({}, { text, actions }, props));
+};
+exports.PromptSignIn = PromptSignIn;

package/build/cjs/components/PromptSignIn/hooks/usePromptSignInProps.d.ts

@@ -0,0 +1,6 @@
+import React, { SyntheticEvent } from 'react';
+export declare function usePromptSignInProps(onClickSignIn?: React.EventHandler<SyntheticEvent>): {
+    onClickSignIn: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
+    openTimestamp: number;
+    requireSignIn: (() => void) | undefined;
+};

package/build/cjs/components/PromptSignIn/hooks/usePromptSignInProps.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePromptSignInProps = void 0;
+const react_1 = require("react");
+function usePromptSignInProps(onClickSignIn) {
+    const [openTimestamp, setTime] = (0, react_1.useState)(0);
+    const requireSignIn = (0, react_1.useMemo)(() => {
+        return onClickSignIn
+            ? () => {
+                setTime(Date.now());
+            }
+            : undefined;
+    }, [onClickSignIn, setTime]);
+    return { onClickSignIn, openTimestamp, requireSignIn };
+}
+exports.usePromptSignInProps = usePromptSignInProps;

package/build/cjs/containers/BlogPage/BlogPage.d.ts

@@ -1,3 +1,4 @@
+import React, { SyntheticEvent } from 'react';
 import { NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
 import { GetPostsType, MetaProps, PostsProps, Service, SetQueryType, Tag, ToggleLikeCallbackType } from '../../models/common';
 export type BlogPageProps = {
@@ -13,5 +14,7 @@ export type BlogPageProps = {
     setQuery?: SetQueryType;
     settings?: PageConstructorProviderProps;
     pageCountForShowSupportButtons?: number;
+    isSignedInUser?: boolean;
+    onClickSignIn?: React.EventHandler<SyntheticEvent>;
 };
-export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, hasLikes, toggleLike, navigation, settings, pageCountForShowSupportButtons, }: BlogPageProps) => JSX.Element;
+export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, hasLikes, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser, onClickSignIn, }: BlogPageProps) => JSX.Element;

package/build/cjs/containers/BlogPage/BlogPage.js

@@ -1,30 +1,68 @@
 "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 __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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlogPage = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const page_constructor_1 = require("@gravity-ui/page-constructor");
 const MetaWrapper_1 = require("../../components/MetaWrapper/MetaWrapper");
+const PromptSignIn_1 = require("../../components/PromptSignIn/PromptSignIn");
+const usePromptSignInProps_1 = require("../../components/PromptSignIn/hooks/usePromptSignInProps");
 const blocksMap_1 = __importDefault(require("../../constructor/blocksMap"));
 const FeedContext_1 = require("../../contexts/FeedContext");
 const LikesContext_1 = require("../../contexts/LikesContext");
-const BlogPage = ({ content, posts, tags, services, getPosts, metaData, hasLikes = false, toggleLike, navigation, settings, pageCountForShowSupportButtons, }) => (react_1.default.createElement("main", null,
-    react_1.default.createElement(LikesContext_1.LikesContext.Provider, { value: {
-            toggleLike: toggleLike,
-            hasLikes,
-        } },
-        react_1.default.createElement(FeedContext_1.FeedContext.Provider, { value: {
-                posts: posts.posts,
-                pinnedPost: posts.pinnedPost,
-                totalCount: posts.count,
-                tags,
-                services: services !== null && services !== void 0 ? services : [],
-                getPosts,
-                pageCountForShowSupportButtons,
-            } },
-            react_1.default.createElement(page_constructor_1.PageConstructorProvider, Object.assign({}, settings),
-                metaData ? react_1.default.createElement(MetaWrapper_1.MetaWrapper, Object.assign({}, metaData)) : null,
-                react_1.default.createElement(page_constructor_1.PageConstructor, { content: content, custom: blocksMap_1.default, navigation: navigation }))))));
+const BlogPage = ({ content, posts, tags, services, getPosts, metaData, hasLikes = false, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser = false, onClickSignIn, }) => {
+    const _a = (0, usePromptSignInProps_1.usePromptSignInProps)(onClickSignIn), { requireSignIn } = _a, promptSignInProps = __rest(_a, ["requireSignIn"]);
+    const likes = (0, react_1.useMemo)(() => ({ toggleLike, hasLikes, isSignedInUser, requireSignIn }), [toggleLike, hasLikes, isSignedInUser, requireSignIn]);
+    return (react_1.default.createElement("main", null,
+        react_1.default.createElement(LikesContext_1.LikesContext.Provider, { value: likes },
+            react_1.default.createElement(FeedContext_1.FeedContext.Provider, { value: {
+                    posts: posts.posts,
+                    pinnedPost: posts.pinnedPost,
+                    totalCount: posts.count,
+                    tags,
+                    services: services !== null && services !== void 0 ? services : [],
+                    getPosts,
+                    pageCountForShowSupportButtons,
+                } },
+                react_1.default.createElement(page_constructor_1.PageConstructorProvider, Object.assign({}, settings),
+                    metaData ? react_1.default.createElement(MetaWrapper_1.MetaWrapper, Object.assign({}, metaData)) : null,
+                    react_1.default.createElement(page_constructor_1.PageConstructor, { content: content, custom: blocksMap_1.default, navigation: navigation })))),
+        react_1.default.createElement(PromptSignIn_1.PromptSignIn, Object.assign({}, promptSignInProps))));
+};
 exports.BlogPage = BlogPage;

package/build/cjs/contexts/LikesContext.d.ts

@@ -3,5 +3,7 @@ import { ToggleLikeCallbackType } from '../models/common';
 export interface LikesContextProps {
     toggleLike?: ToggleLikeCallbackType;
     hasLikes?: boolean;
+    isSignedInUser?: boolean;
+    requireSignIn?: React.MouseEventHandler;
 }
 export declare const LikesContext: React.Context<LikesContextProps>;

package/build/cjs/hooks/useOpenCloseTimer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Timer to automatically update `open` state after a given duration
+ * @param {number} openTimestamp - UNIX timestamp in milliseconds
+ * @param {number} openDuration - in milliseconds
+ * @returns {{open: boolean}} {open} - whether the state is open
+ */
+export declare function useOpenCloseTimer(openTimestamp?: number, openDuration?: number): {
+    open: boolean;
+};

package/build/cjs/hooks/useOpenCloseTimer.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpenCloseTimer = void 0;
+const react_1 = require("react");
+/**
+ * Timer to automatically update `open` state after a given duration
+ * @param {number} openTimestamp - UNIX timestamp in milliseconds
+ * @param {number} openDuration - in milliseconds
+ * @returns {{open: boolean}} {open} - whether the state is open
+ */
+function useOpenCloseTimer(openTimestamp = Date.now(), openDuration = 4000) {
+    const open = Date.now() - openTimestamp < openDuration;
+    const [, reset] = (0, react_1.useState)(0); // time to reset `open` state
+    (0, react_1.useEffect)(() => {
+        const closeTime = openTimestamp + openDuration;
+        const delay = closeTime - Date.now();
+        if (delay <= 0) {
+            return;
+        }
+        const timer = setTimeout(() => {
+            reset(Date.now);
+        }, delay);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [openTimestamp, openDuration]);
+    return { open };
+}
+exports.useOpenCloseTimer = useOpenCloseTimer;

package/build/cjs/i18n/index.d.ts

@@ -17,6 +17,8 @@ export declare enum Keyset {
     Search = "search_placeholder",
     AllTags = "label_all_tags",
     ActionSavedOnly = "action_saved_only",
-    AllServices = "label_all_services"
+    AllServices = "label_all_services",
+    PromptSignInOnLike = "prompt_sign_in_on_like",
+    SignIn = "Sign In"
 }
 export declare const i18: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/i18n/index.js

@@ -24,6 +24,8 @@ var Keyset;
     Keyset["AllTags"] = "label_all_tags";
     Keyset["ActionSavedOnly"] = "action_saved_only";
     Keyset["AllServices"] = "label_all_services";
+    Keyset["PromptSignInOnLike"] = "prompt_sign_in_on_like";
+    Keyset["SignIn"] = "Sign In";
 })(Keyset = exports.Keyset || (exports.Keyset = {}));
 exports.i18n.registerKeyset(locale_1.Lang.En, KEYSET_NAME, {
     [Keyset.Title]: 'Blog',
@@ -42,11 +44,13 @@ exports.i18n.registerKeyset(locale_1.Lang.En, KEYSET_NAME, {
     [Keyset.AllTags]: 'All topics',
     [Keyset.ActionSavedOnly]: 'Saved',
     [Keyset.AllServices]: 'All Services',
+    [Keyset.PromptSignInOnLike]: 'Please sign in to save your bookmarks',
     [Keyset.ContextReadingTime]: [
         '{{count}} min to read',
         '{{count}} mins to read',
         '{{count}} mins to read',
     ],
+    [Keyset.SignIn]: 'Sign In',
 });
 exports.i18n.registerKeyset(locale_1.Lang.Ru, KEYSET_NAME, {
     [Keyset.Title]: 'Блог',
@@ -65,10 +69,12 @@ exports.i18n.registerKeyset(locale_1.Lang.Ru, KEYSET_NAME, {
     [Keyset.AllTags]: 'Все темы',
     [Keyset.ActionSavedOnly]: 'Сохранённые',
     [Keyset.AllServices]: 'Все сервисы',
+    [Keyset.PromptSignInOnLike]: 'Войдите, чтобы добавить доклад в своё расписание',
     [Keyset.ContextReadingTime]: [
         '{{count}} минута чтения',
         '{{count}} минуты чтения',
         '{{count}} минут чтения',
     ],
+    [Keyset.SignIn]: 'Войти',
 });
 exports.i18 = exports.i18n.keyset(KEYSET_NAME);

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

@@ -25,7 +25,7 @@ const b = block('post-info');
  * @returns jsx
  */
 export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal, size, theme, dataQa, }) => {
-    const { toggleLike } = useContext(LikesContext);
+    const { toggleLike, isSignedInUser, requireSignIn } = useContext(LikesContext);
     const handleAnalytics = useAnalytics(DefaultEventNames.SaveButton);
     const isLikeable = Boolean(toggleLike);
     return (React.createElement("div", { className: b('item', { size }), onClick: (event) => {
@@ -36,6 +36,11 @@ export const Save = ({ title, postId, hasUserLike, handleUserLike, metrikaGoal,
             if (!isLikeable) {
                 return;
             }
+            // Open Popup to ask the User to sign in first
+            if (!isSignedInUser && requireSignIn) {
+                requireSignIn(event);
+                return;
+            }
             postLikeStatus(postId, Boolean(hasUserLike));
             handleUserLike();
             metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);

package/build/esm/components/Prompt/Prompt.css

@@ -0,0 +1,61 @@
+.bc-prompt__content {
+  box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+@keyframes bc-prompt_open {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+@keyframes bc-prompt_close {
+  0% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+.bc-prompt {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+}
+.bc-prompt:not(.bc-prompt_mounted) {
+  display: none;
+}
+.bc-prompt__content {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 16px;
+  align-items: center;
+  margin: 24px;
+  padding: 16px 20px;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--yc-color-base-float);
+  font-size: 1rem;
+}
+.bc-prompt_close {
+  pointer-events: none;
+}
+.bc-prompt_open > .bc-prompt__content {
+  opacity: 0;
+  transform: translateY(100%);
+  animation: bc-prompt_open 600ms forwards;
+}
+.bc-prompt_close > .bc-prompt__content {
+  opacity: 1;
+  transform: translateY(0%);
+  animation: bc-prompt_close 600ms forwards;
+}

package/build/esm/components/Prompt/Prompt.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ButtonProps } from '@gravity-ui/uikit';
+import './Prompt.css';
+export interface PromptProps {
+    text: string;
+    actions: ButtonProps[];
+    openTimestamp?: number;
+    openDuration?: number;
+    className?: string;
+    theme?: 'grey' | 'beige' | 'white';
+}
+/**
+ * Popup that appears with text message and button(s) for given `actions`.
+ * Features:
+ *  - Automatically disappears after `openDuration` in milliseconds
+ *  - `openTimestamp` (`Date.now()`) resets the visible duration
+ * @returns {JSX|null}
+ */
+export declare const Prompt: React.FC<PromptProps>;

package/build/esm/components/Prompt/Prompt.js

@@ -0,0 +1,35 @@
+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 { Button } from '@gravity-ui/uikit';
+import { useOpenCloseTimer } from '../../hooks/useOpenCloseTimer';
+import { block } from '../../utils/cn';
+import './Prompt.css';
+const b = block('prompt');
+/**
+ * Popup that appears with text message and button(s) for given `actions`.
+ * Features:
+ *  - Automatically disappears after `openDuration` in milliseconds
+ *  - `openTimestamp` (`Date.now()`) resets the visible duration
+ * @returns {JSX|null}
+ */
+export const Prompt = ({ text, actions, className, openTimestamp = 0, openDuration, theme, }) => {
+    const { open } = useOpenCloseTimer(openTimestamp, openDuration);
+    const mounted = openTimestamp > 0;
+    return (React.createElement("div", { className: b({ theme, open, close: !open, mounted }, className) },
+        React.createElement("div", { className: b('content') },
+            React.createElement("span", { className: b('text') }, text),
+            React.createElement("div", { className: b('actions') }, actions.map((_a, i) => {
+                var { view = 'action', className: btnClass } = _a, btnProps = __rest(_a, ["view", "className"]);
+                return (React.createElement(Button, Object.assign({ key: i, className: b('action', btnClass), view: view }, btnProps)));
+            })))));
+};

package/build/esm/components/PromptSignIn/PromptSignIn.d.ts

@@ -0,0 +1,10 @@
+import React, { SyntheticEvent } from 'react';
+import { PromptProps } from '../Prompt/Prompt';
+export interface PromptSignInProps extends Partial<PromptProps> {
+    onClickSignIn?: React.EventHandler<SyntheticEvent>;
+}
+/**
+ * Authentication Popup that appears when user action requires login
+ * @returns {JSX|null}
+ */
+export declare const PromptSignIn: React.FC<PromptSignInProps>;

package/build/esm/components/PromptSignIn/PromptSignIn.js

@@ -0,0 +1,27 @@
+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 { Keyset, i18 } from '../../i18n';
+import { Prompt } from '../Prompt/Prompt';
+/**
+ * Authentication Popup that appears when user action requires login
+ * @returns {JSX|null}
+ */
+export const PromptSignIn = (_a) => {
+    var { text = i18(Keyset.PromptSignInOnLike), onClickSignIn = () => alert(i18(Keyset.SignIn)), actions = [
+        {
+            children: i18(Keyset.SignIn),
+            onClick: onClickSignIn,
+        },
+    ] } = _a, props = __rest(_a, ["text", "onClickSignIn", "actions"]);
+    return React.createElement(Prompt, Object.assign({}, { text, actions }, props));
+};

package/build/esm/components/PromptSignIn/hooks/usePromptSignInProps.d.ts

@@ -0,0 +1,6 @@
+import React, { SyntheticEvent } from 'react';
+export declare function usePromptSignInProps(onClickSignIn?: React.EventHandler<SyntheticEvent>): {
+    onClickSignIn: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
+    openTimestamp: number;
+    requireSignIn: (() => void) | undefined;
+};

package/build/esm/components/PromptSignIn/hooks/usePromptSignInProps.js

@@ -0,0 +1,12 @@
+import { useMemo, useState } from 'react';
+export function usePromptSignInProps(onClickSignIn) {
+    const [openTimestamp, setTime] = useState(0);
+    const requireSignIn = useMemo(() => {
+        return onClickSignIn
+            ? () => {
+                setTime(Date.now());
+            }
+            : undefined;
+    }, [onClickSignIn, setTime]);
+    return { onClickSignIn, openTimestamp, requireSignIn };
+}

package/build/esm/containers/BlogPage/BlogPage.d.ts

@@ -1,3 +1,4 @@
+import React, { SyntheticEvent } from 'react';
 import { NavigationData, PageConstructorProviderProps, PageContent } from '@gravity-ui/page-constructor';
 import { GetPostsType, MetaProps, PostsProps, Service, SetQueryType, Tag, ToggleLikeCallbackType } from '../../models/common';
 import './BlogPage.css';
@@ -14,5 +15,7 @@ export type BlogPageProps = {
     setQuery?: SetQueryType;
     settings?: PageConstructorProviderProps;
     pageCountForShowSupportButtons?: number;
+    isSignedInUser?: boolean;
+    onClickSignIn?: React.EventHandler<SyntheticEvent>;
 };
-export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, hasLikes, toggleLike, navigation, settings, pageCountForShowSupportButtons, }: BlogPageProps) => JSX.Element;
+export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, hasLikes, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser, onClickSignIn, }: BlogPageProps) => JSX.Element;

package/build/esm/containers/BlogPage/BlogPage.js

@@ -1,24 +1,39 @@
-import React from 'react';
+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, { useMemo } from 'react';
 import { PageConstructor, PageConstructorProvider, } from '@gravity-ui/page-constructor';
 import { MetaWrapper } from '../../components/MetaWrapper/MetaWrapper';
+import { PromptSignIn } from '../../components/PromptSignIn/PromptSignIn';
+import { usePromptSignInProps } from '../../components/PromptSignIn/hooks/usePromptSignInProps';
 import componentMap from '../../constructor/blocksMap';
 import { FeedContext } from '../../contexts/FeedContext';
 import { LikesContext } from '../../contexts/LikesContext';
 import './BlogPage.css';
-export const BlogPage = ({ content, posts, tags, services, getPosts, metaData, hasLikes = false, toggleLike, navigation, settings, pageCountForShowSupportButtons, }) => (React.createElement("main", null,
-    React.createElement(LikesContext.Provider, { value: {
-            toggleLike: toggleLike,
-            hasLikes,
-        } },
-        React.createElement(FeedContext.Provider, { value: {
-                posts: posts.posts,
-                pinnedPost: posts.pinnedPost,
-                totalCount: posts.count,
-                tags,
-                services: services !== null && services !== void 0 ? services : [],
-                getPosts,
-                pageCountForShowSupportButtons,
-            } },
-            React.createElement(PageConstructorProvider, Object.assign({}, settings),
-                metaData ? React.createElement(MetaWrapper, Object.assign({}, metaData)) : null,
-                React.createElement(PageConstructor, { content: content, custom: componentMap, navigation: navigation }))))));
+export const BlogPage = ({ content, posts, tags, services, getPosts, metaData, hasLikes = false, toggleLike, navigation, settings, pageCountForShowSupportButtons, isSignedInUser = false, onClickSignIn, }) => {
+    const _a = usePromptSignInProps(onClickSignIn), { requireSignIn } = _a, promptSignInProps = __rest(_a, ["requireSignIn"]);
+    const likes = useMemo(() => ({ toggleLike, hasLikes, isSignedInUser, requireSignIn }), [toggleLike, hasLikes, isSignedInUser, requireSignIn]);
+    return (React.createElement("main", null,
+        React.createElement(LikesContext.Provider, { value: likes },
+            React.createElement(FeedContext.Provider, { value: {
+                    posts: posts.posts,
+                    pinnedPost: posts.pinnedPost,
+                    totalCount: posts.count,
+                    tags,
+                    services: services !== null && services !== void 0 ? services : [],
+                    getPosts,
+                    pageCountForShowSupportButtons,
+                } },
+                React.createElement(PageConstructorProvider, Object.assign({}, settings),
+                    metaData ? React.createElement(MetaWrapper, Object.assign({}, metaData)) : null,
+                    React.createElement(PageConstructor, { content: content, custom: componentMap, navigation: navigation })))),
+        React.createElement(PromptSignIn, Object.assign({}, promptSignInProps))));
+};

package/build/esm/contexts/LikesContext.d.ts

@@ -3,5 +3,7 @@ import { ToggleLikeCallbackType } from '../models/common';
 export interface LikesContextProps {
     toggleLike?: ToggleLikeCallbackType;
     hasLikes?: boolean;
+    isSignedInUser?: boolean;
+    requireSignIn?: React.MouseEventHandler;
 }
 export declare const LikesContext: React.Context<LikesContextProps>;

package/build/esm/hooks/useOpenCloseTimer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Timer to automatically update `open` state after a given duration
+ * @param {number} openTimestamp - UNIX timestamp in milliseconds
+ * @param {number} openDuration - in milliseconds
+ * @returns {{open: boolean}} {open} - whether the state is open
+ */
+export declare function useOpenCloseTimer(openTimestamp?: number, openDuration?: number): {
+    open: boolean;
+};

package/build/esm/hooks/useOpenCloseTimer.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+/**
+ * Timer to automatically update `open` state after a given duration
+ * @param {number} openTimestamp - UNIX timestamp in milliseconds
+ * @param {number} openDuration - in milliseconds
+ * @returns {{open: boolean}} {open} - whether the state is open
+ */
+export function useOpenCloseTimer(openTimestamp = Date.now(), openDuration = 4000) {
+    const open = Date.now() - openTimestamp < openDuration;
+    const [, reset] = useState(0); // time to reset `open` state
+    useEffect(() => {
+        const closeTime = openTimestamp + openDuration;
+        const delay = closeTime - Date.now();
+        if (delay <= 0) {
+            return;
+        }
+        const timer = setTimeout(() => {
+            reset(Date.now);
+        }, delay);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [openTimestamp, openDuration]);
+    return { open };
+}

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

@@ -17,6 +17,8 @@ export declare enum Keyset {
     Search = "search_placeholder",
     AllTags = "label_all_tags",
     ActionSavedOnly = "action_saved_only",
-    AllServices = "label_all_services"
+    AllServices = "label_all_services",
+    PromptSignInOnLike = "prompt_sign_in_on_like",
+    SignIn = "Sign In"
 }
 export declare const i18: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/i18n/index.js

@@ -21,6 +21,8 @@ export var Keyset;
     Keyset["AllTags"] = "label_all_tags";
     Keyset["ActionSavedOnly"] = "action_saved_only";
     Keyset["AllServices"] = "label_all_services";
+    Keyset["PromptSignInOnLike"] = "prompt_sign_in_on_like";
+    Keyset["SignIn"] = "Sign In";
 })(Keyset || (Keyset = {}));
 i18n.registerKeyset(Lang.En, KEYSET_NAME, {
     [Keyset.Title]: 'Blog',
@@ -39,11 +41,13 @@ i18n.registerKeyset(Lang.En, KEYSET_NAME, {
     [Keyset.AllTags]: 'All topics',
     [Keyset.ActionSavedOnly]: 'Saved',
     [Keyset.AllServices]: 'All Services',
+    [Keyset.PromptSignInOnLike]: 'Please sign in to save your bookmarks',
     [Keyset.ContextReadingTime]: [
         '{{count}} min to read',
         '{{count}} mins to read',
         '{{count}} mins to read',
     ],
+    [Keyset.SignIn]: 'Sign In',
 });
 i18n.registerKeyset(Lang.Ru, KEYSET_NAME, {
     [Keyset.Title]: 'Блог',
@@ -62,10 +66,12 @@ i18n.registerKeyset(Lang.Ru, KEYSET_NAME, {
     [Keyset.AllTags]: 'Все темы',
     [Keyset.ActionSavedOnly]: 'Сохранённые',
     [Keyset.AllServices]: 'Все сервисы',
+    [Keyset.PromptSignInOnLike]: 'Войдите, чтобы добавить доклад в своё расписание',
     [Keyset.ContextReadingTime]: [
         '{{count}} минута чтения',
         '{{count}} минуты чтения',
         '{{count}} минут чтения',
     ],
+    [Keyset.SignIn]: 'Войти',
 });
 export const i18 = i18n.keyset(KEYSET_NAME);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "3.4.1",
+  "version": "3.5.0-alpha.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -141,5 +141,8 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
+  },
+  "publishConfig": {
+    "tag": "alpha"
   }
 }