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

package/CHANGELOG.md

@@ -0,0 +1,231 @@
+# Change log
+
+## 0.20.1
+
+- Rewrite storybook on ts
+
+## 0.20.0
+
+- Install @gravity-ui linters
+
+## 0.19.0
+
+### Breaking changes
+
+- Refactor and rename types
+- Update react to 18.2.0
+- Update TS to 4.9.3
+
+## 0.18.1
+
+- Delete useless utils and small refactor
+
+## 0.18.0
+
+### Breaking changes
+
+- Refactor naming
+
+## 0.17.1
+
+- @gravity-ui/uikit 3.10.1 (fix share tooltip)
+
+## 0.17.0
+
+- @gravity-ui/uikit 3.9.0
+
+## 0.16.1
+
+- Fix for treating page number on fetch
+
+## 0.16.0
+
+- Show "-" in filters selector switchers when only one broken filter provided in a query
+
+## 0.15.1
+
+- Do not show pointer cursor on save button title hover when the button is not clickable
+
+## 0.15.0
+
+- Prevent save button to be clickable when user is not logged in
+
+## 0.14.0
+
+- Refactor metaProps in BlogPostPage
+
+## 0.13.0
+
+- Remove temporal flag of icon selection
+
+## 0.12.4
+
+- Prevent collapse of a custom switcher on a blog feed
+
+## 0.12.2
+
+- Update types for getBlogPosts handler
+
+## 0.12.1
+
+- Render post card title via dangerouslySetInnerHTML
+
+## 0.12.0
+
+- Update page change logic when interactions with blog search panel
+
+## 0.11.1
+
+- **BlogYFM**: add `yfm_no-list-reset` class
+
+## 0.11.0
+
+- Refactor styles (kebab, prefix, variables)
+
+## 0.10.2
+
+- Add teamcity publish
+
+## 0.10.1
+
+- BlogPostTag types became Partial, BlogPostTagExtended is deleted
+
+## 0.10.0
+
+- add props for show support buttons in paginator
+
+## 0.9.2
+
+- added yfm headers weight style
+
+## 0.9.1
+
+- add specificity for search input styles
+
+## 0.9.0
+
+- add customization for sharing options in blog posts
+
+## 0.8.0
+
+- add BlogPage with gravity-ui requirements
+
+## 0.7.1
+
+- Add info about publish in readme
+
+## 0.7.0
+
+- Change packages @yandex-cloud => @gravity-ui
+- Remove i18n from peer dependencies
+
+## 0.6.30
+
+- add BlogPage
+
+## 0.5.10
+
+- fix yfm styles for table
+
+## 0.5.9
+
+- fix yfm styles
+
+## 0.5.8
+
+- delete selection of blog structure
+
+## 0.5.7
+
+- color variables updates
+
+## 0.5.6
+
+- change transformPostTags() routine
+
+## 0.5.5
+
+- add page-constructor in peer-dependencies
+
+## 0.5.3
+
+- fix yfm styles: add css variables to be able to redefine styles in projects
+
+## 0.5.2
+
+- condition for likes in cards
+
+## 0.5.1
+
+- refactor LocaleContext
+- refactor RouterContext
+- now likes is not required props
+
+## 0.4.3
+
+- Back previously patch
+
+## 0.4.2
+
+- Fix meta
+
+## 0.4.1
+
+- Fix share button
+- now region props is not required in TransformPageContentPropsType
+
+## 0.4.0
+
+- Add likes state update conditions
+
+## 0.3.1
+
+- Add metaData render condition
+
+## 0.3.0
+
+- Update props metaData
+
+## 0.2.3
+
+- Update types and namings
+
+## 0.2.2
+
+- Update styles
+
+## 0.2.1
+
+- Add default color for avatars (grey)
+
+## 0.2.0
+
+- Custom hook for likes
+
+- Change props for BlogPostPage
+  - delete:
+    - data
+  - add:
+    - likes
+    - content
+    - post
+
+## 0.1.0
+
+- Refactor business-logic BlogSuggets
+
+## 0.0.4
+
+- Delete extra requirements
+
+## 0.0.3
+
+- Refactor BlogContextProvider
+
+## 0.0.2
+
+- Meta fixes
+
+## 0.0.1
+
+- Create first version including Blog Post Page

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 YANDEX LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# @gravity-ui/blog-constructor ·
+
+## Install
+
+```shell
+npm install @gravity-ui/blog-constructor
+```
+
+## Development
+
+```bash
+npm ci
+npm run dev
+```

package/build/cjs/blocks/Author/Author.css

@@ -0,0 +1,31 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.bc-author__layout {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  overflow: hidden;
+}
+@media (max-width: 1081px) {
+  .bc-author__layout {
+    width: 50%;
+  }
+}
+@media (max-width: 577px) {
+  .bc-author__layout {
+    width: 100%;
+  }
+}
+.bc-author__description {
+  color: var(--yc-color-text-primary);
+}
+.bc-author__content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+  position: relative;
+}
+.bc-author__container {
+  background-color: var(--yc-color-promo-base-silver);
+}

package/build/cjs/blocks/Author/Author.d.ts

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

package/build/cjs/blocks/Author/Author.js

@@ -0,0 +1,60 @@
+"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.Author = void 0;
+const react_1 = __importStar(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const PostPageContext_1 = require("../../contexts/PostPageContext");
+const Wrapper_1 = require("../../components/Wrapper/Wrapper");
+const paddings_1 = require("../../models/paddings");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('author');
+const Author = (props) => {
+    var _a;
+    const { image, paddingTop, paddingBottom, authorId } = props;
+    const { post } = (0, react_1.useContext)(PostPageContext_1.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 = (0, react_1.useMemo)(() => {
+        var _a;
+        const imageUrl = (_a = author === null || author === void 0 ? void 0 : author.avatar) !== null && _a !== void 0 ? _a : image;
+        const authorAvatar = react_1.default.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_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
+            [paddings_1.PaddingsDirections.top]: paddingTop,
+            [paddings_1.PaddingsDirections.bottom]: paddingBottom,
+        }, className: b('content') },
+        react_1.default.createElement("div", { className: b('layout'), "data-qa": "blog-author-layout" },
+            react_1.default.createElement(page_constructor_1.Author, { type: page_constructor_1.AuthorType.Column, author: authorItem, authorContainerClassName: b('container') }))));
+};
+exports.Author = Author;

package/build/cjs/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/cjs/blocks/Banner/Banner.d.ts

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

package/build/cjs/blocks/Banner/Banner.js

@@ -0,0 +1,51 @@
+"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.Banner = void 0;
+const react_1 = __importDefault(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const Wrapper_1 = require("../../components/Wrapper/Wrapper");
+const common_1 = require("../../utils/common");
+const cn_1 = require("../../utils/cn");
+const paddings_1 = require("../../models/paddings");
+const constants_1 = require("../../constants");
+const b = (0, cn_1.block)('banner');
+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 = (0, common_1.updateContentSizes)(content);
+    const metrikaGoal = {
+        name: constants_1.BlogMetrikaGoalIds.bannerCommon,
+        isCrossSite: true,
+    };
+    (_b = contentData.buttons) === null || _b === void 0 ? void 0 : _b.forEach((button) => {
+        button.metrikaGoals = (0, common_1.getBlogElementMetrika)(metrikaGoal, button.metrikaGoals);
+    });
+    return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
+            [paddings_1.PaddingsDirections.top]: paddingTop,
+            [paddings_1.PaddingsDirections.bottom]: paddingBottom,
+        }, className: b('container') },
+        react_1.default.createElement("div", { className: b('content'), style: contentStyle, "data-qa": "blog-banner-content" },
+            react_1.default.createElement("div", { className: b('info') },
+                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))),
+            image && (react_1.default.createElement("div", { className: b('image-container', { ['image-size']: imageSize }) },
+                react_1.default.createElement(page_constructor_1.Image, { className: b('image'), src: image }))))));
+};
+exports.Banner = Banner;

package/build/cjs/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/cjs/blocks/CTA/CTA.d.ts

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

package/build/cjs/blocks/CTA/CTA.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CTA = void 0;
+const react_1 = __importDefault(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const Wrapper_1 = require("../../components/Wrapper/Wrapper");
+const common_1 = require("../../utils/common");
+const paddings_1 = require("../../models/paddings");
+const constants_1 = require("../../constants");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('cta');
+const MAX_COLUMN_COUNT = 4, MIN_COLUMN_COUNT = 2, DEFAULT_COLUMN_COUNT = 3;
+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: constants_1.BlogMetrikaGoalIds.cta,
+        isCrossSite: true,
+    };
+    return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
+            [paddings_1.PaddingsDirections.top]: paddingTop,
+            [paddings_1.PaddingsDirections.bottom]: paddingBottom,
+        }, className: b('content'), dataQa: "blog-cta-content" }, items.slice(0, count).map((content, index) => {
+        var _a;
+        const contentData = (0, common_1.updateContentSizes)(content);
+        (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
+            link.metrikaGoals = (0, common_1.getBlogElementMetrika)(metrikaGoal, link.metrikaGoals);
+        });
+        return (react_1.default.createElement("div", { key: index, className: b('button', {
+                ['layout']: count,
+            }), "data-qa": "blog-cta-card" },
+            react_1.default.createElement("div", { className: b('card') },
+                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData)))));
+    })));
+};
+exports.CTA = CTA;

package/build/cjs/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/cjs/blocks/ColoredText/ColoredText.d.ts

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

package/build/cjs/blocks/ColoredText/ColoredText.js

@@ -0,0 +1,37 @@
+"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.ColoredText = void 0;
+const react_1 = __importDefault(require("react"));
+const page_constructor_1 = require("@gravity-ui/page-constructor");
+const Wrapper_1 = require("../../components/Wrapper/Wrapper");
+const paddings_1 = require("../../models/paddings");
+const common_1 = require("../../utils/common");
+const cn_1 = require("../../utils/cn");
+const b = (0, cn_1.block)('colored-text');
+const ColoredText = (_a) => {
+    var { background, paddingTop, paddingBottom } = _a, content = __rest(_a, ["background", "paddingTop", "paddingBottom"]);
+    const contentData = (0, common_1.updateContentSizes)(content);
+    return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
+            [paddings_1.PaddingsDirections.top]: paddingTop,
+            [paddings_1.PaddingsDirections.bottom]: paddingBottom,
+        } },
+        react_1.default.createElement("div", { className: b('container'), style: { backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'none' }, "data-qa": "blog-colored-text-content" },
+            react_1.default.createElement("div", { className: b('picture-container') }, (background === null || background === void 0 ? void 0 : background.image) && (react_1.default.createElement(page_constructor_1.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_1.default.createElement("div", { className: b('text-content') },
+                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))))));
+};
+exports.ColoredText = ColoredText;

package/build/cjs/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>;