@gravity-ui/blog-constructor 1.0.0-aplha.0 → 1.1.0-alpha.0

package/README.md

@@ -1,4 +1,4 @@
-# @gravity-ui/blog-constructor ·
+# @gravity-ui/blog-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/blog-constructor)](https://www.npmjs.com/package/@gravity-ui/blog-constructor)
 
 ## Install
 
@@ -6,6 +6,66 @@
 npm install @gravity-ui/blog-constructor
 ```
 
+## Blog-constructor
+
+`Blog-constructor` is a library based on the [Page-constructor](https://github.com/gravity-ui/page-constructor) library for creating blog format web pages. Blog-constructor uses the [`custom`](https://github.com/gravity-ui/page-constructor#custom-blocks) prop from page-constructor to add the components needed for the blog.
+
+### Getting started
+
+The blog-constructor has both client components and server components for import. The blog pages is imported as a React component. To make sure it runs properly, wrap it in `BlogConstructorProvider`:
+
+```jsx
+import {BlogPage, BlogConstructorProvider} from '@gravity-ui/blog-constructor';
+
+// Main blog page
+<BlogConstructorProvider>
+    <BlogPage
+        content={content}
+        posts={posts}
+        tags={tags}
+        getPosts={handleGetPosts}
+        settings={settings}
+    />
+</BlogConstructorProvider>
+
+---
+
+import {BlogPostPage, BlogConstructorProvider} from '@gravity-ui/blog-constructor';
+
+// Post page
+<BlogConstructorProvider {...providerProps}>
+    <BlogPostPage
+        content={content}
+        post={post}
+        suggestedPosts={suggestedPosts}
+        settings={settings}
+        shareOptions={shareOptions}
+    />
+</BlogConstructorProvider>
+
+```
+
+Also blog-constructor have server components to help you transform your data if you need
+
+```jsx
+import {
+  transformPost,
+  sanitizeMeta,
+  createReadableContent,
+  transformPageContent,
+} from '@gravity-ui/blog-constructor/server';
+```
+
+## i18n
+
+To make sure the i18n library used in your project runs properly, perform its initialization and set the project's current locale value in `lang`. For example:
+
+```typescript
+import {configure, Lang} from '@gravity-ui/blog-constructor';
+
+configure({lang: Lang.En});
+```
+
 ## Development
 
 ```bash

package/build/cjs/blocks/YFM/__tests__/YFM.test.d.ts

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

package/build/cjs/blocks/YFM/__tests__/YFM.test.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const YFM_1 = require("../YFM");
+const text = 'YFM block';
+describe('YFM', () => {
+    test('Has id', async () => {
+        (0, react_2.render)(react_1.default.createElement(YFM_1.YFM, { text: text }));
+        const yfm = react_2.screen.getByText(text);
+        expect(yfm).toHaveClass('yfm');
+    });
+});

package/build/cjs/components/FeedHeader/components/Controls/Controls.css

@@ -36,23 +36,22 @@ unpredictable css rules order in build */
 .bc-feed-controls__popup.bc-feed-controls__popup {
   border-radius: 12px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list {
-  max-height: 350px !important;
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-select-filter + .yc-select-list {
   margin-top: 0;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list::-webkit-scrollbar {
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-select-filter + .yc-select-list::-webkit-scrollbar {
   display: none;
 }
 .bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
   margin: 4px;
   border-radius: 8px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter {
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-select-filter {
   margin-top: 4px;
   padding: 4px;
   border-bottom: 1px solid var(--yc-color-line-generic);
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter .yc-text-input__control.yc-text-input__control_type_input {
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-select-filter .yc-text-input__control.yc-text-input__control_type_input {
   border: none;
 }
 
@@ -72,12 +71,14 @@ unpredictable css rules order in build */
   border-radius: 10px;
 }
 .bc-feed-controls__saved-only-button_savedOnly {
-  --yc-button-background-color: var(--pc-monochrome-button);
-  --yc-button-background-color-hover: var(--pc-monochrome-button-hover);
-  color: var(--yc-color-text-light-primary);
+  --yc-button-background-color: var(--pc-monochrome-button-background-color);
+  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
+}
+.bc-feed-controls__saved-only-button_savedOnly, .bc-feed-controls__saved-only-button_savedOnly:link, .bc-feed-controls__saved-only-button_savedOnly:visited, .bc-feed-controls__saved-only-button_savedOnly:active, .bc-feed-controls__saved-only-button_savedOnly:focus {
+  color: var(--pc-monochrome-button-color);
 }
 .bc-feed-controls__saved-only-button_savedOnly:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--pc-monochrome-button-color);
 }
 .bc-feed-controls__saved-only-button_savedOnly:focus {
   color: var(--yc-color-base-background);

package/build/cjs/components/FeedHeader/components/Controls/Controls.js

@@ -97,7 +97,7 @@ const Controls = ({ setIsFetching, tags = [], services = [], handleChangeQuery,
                         initial: servicesItems,
                         list: services,
                         defaultLabel: (0, i18n_1.i18)(i18n_1.Keyset.AllServices),
-                    }), disablePortal: true, renderOption: customRenders_1.renderOption, renderFilter: customRenders_1.renderFilter }))) : null,
+                    }), renderOption: customRenders_1.renderOption, renderFilter: customRenders_1.renderFilter }))) : null,
             hasLikes ? (react_1.default.createElement("div", { className: b('filter-item', { 'width-auto': true }) },
                 react_1.default.createElement(uikit_1.Button, { view: 'outlined', className: b('saved-only-button', { savedOnly }), size: "xl", onClick: handleSavedOnly },
                     react_1.default.createElement(uikit_1.Icon, { data: Save_1.Save, size: ICON_SIZE, className: b('icon', { savedOnly }) }),

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

@@ -49,6 +49,6 @@ const Sharing = ({ theme, 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 }))));
+            react_1.default.createElement(uikit_1.ShareTooltip, { 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, socialNets: shareOptions, handleMetrika: handleMetrika }))));
 };
 exports.Sharing = Sharing;

package/build/cjs/components/Search/Search.css

@@ -7,7 +7,6 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  max-width: 376px;
   height: 44px;
   transition: width 0.3s;
 }

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

@@ -1,10 +1,11 @@
-import { PageContent, PageConstructorProviderProps } from '@gravity-ui/page-constructor';
+import { PageContent, PageConstructorProviderProps, NavigationData } from '@gravity-ui/page-constructor';
 import { Tag, PostsProps, ToggleLikeCallbackType, MetaProps, GetPostsType, SetQueryType, Service } from '../../models/common';
 export type BlogPageProps = {
     content: PageContent;
     posts: PostsProps;
     tags: Tag[];
     services?: Service[];
+    navigation?: NavigationData;
     getPosts: GetPostsType;
     toggleLike?: ToggleLikeCallbackType;
     metaData?: MetaProps;
@@ -12,4 +13,4 @@ export type BlogPageProps = {
     settings?: PageConstructorProviderProps;
     pageCountForShowSupportButtons?: number;
 };
-export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, toggleLike, settings, pageCountForShowSupportButtons, }: BlogPageProps) => JSX.Element;
+export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, toggleLike, navigation, settings, pageCountForShowSupportButtons, }: BlogPageProps) => JSX.Element;

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

@@ -10,7 +10,7 @@ const FeedContext_1 = require("../../contexts/FeedContext");
 const LikesContext_1 = require("../../contexts/LikesContext");
 const MetaWrapper_1 = require("../../components/MetaWrapper/MetaWrapper");
 const blocksMap_1 = __importDefault(require("../../constructor/blocksMap"));
-const BlogPage = ({ content, posts, tags, services, getPosts, metaData, toggleLike, settings, pageCountForShowSupportButtons, }) => (react_1.default.createElement("main", null,
+const BlogPage = ({ content, posts, tags, services, getPosts, metaData, toggleLike, navigation, settings, pageCountForShowSupportButtons, }) => (react_1.default.createElement("main", null,
     react_1.default.createElement(LikesContext_1.LikesContext.Provider, { value: {
             toggleLike: toggleLike,
             hasLikes: Boolean(toggleLike),
@@ -26,5 +26,5 @@ const BlogPage = ({ content, posts, tags, services, getPosts, metaData, toggleLi
             } },
             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 }))))));
+                react_1.default.createElement(page_constructor_1.PageConstructor, { content: content, custom: blocksMap_1.default, navigation: navigation }))))));
 exports.BlogPage = BlogPage;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageContent, PageConstructorProviderProps } from '@gravity-ui/page-constructor';
+import { PageContent, PageConstructorProviderProps, NavigationData } from '@gravity-ui/page-constructor';
 import { ShareOptions } from '@gravity-ui/uikit';
 import { PostData, ToggleLikeCallbackType, MetaProps } from '../../models/common';
 export interface BlogPostPageProps {
@@ -13,6 +13,7 @@ export interface BlogPostPageProps {
     content: PageContent;
     post: PostData;
     settings?: PageConstructorProviderProps;
+    navigation?: NavigationData;
     shareOptions?: ShareOptions[];
 }
 export declare const BlogPostPage: React.FC<BlogPostPageProps>;

package/build/cjs/containers/BlogPostPage/BlogPostPage.js

@@ -11,7 +11,7 @@ const PostPageContext_1 = require("../../contexts/PostPageContext");
 const LikesContext_1 = require("../../contexts/LikesContext");
 const useLikes_1 = require("../../hooks/useLikes");
 const MetaWrapper_1 = require("../../components/MetaWrapper/MetaWrapper");
-const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings, shareOptions, }) => {
+const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings, navigation, shareOptions, }) => {
     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,
@@ -37,6 +37,6 @@ const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings
                 } },
                 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 }))))));
+                    react_1.default.createElement(page_constructor_1.PageConstructor, { content: content, custom: blocksMap_1.default, navigation: navigation }))))));
 };
 exports.BlogPostPage = BlogPostPage;

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

@@ -7,7 +7,6 @@ export type AuthorProps = ClassNameProps & {
     image: string;
 } & PaddingsYFMProps;
 export type BannerProps = ContentBlockProps & {
-    background?: string;
     color?: string;
     image?: string;
     imageSize?: 's' | 'm';

package/build/esm/blocks/YFM/__tests__/YFM.test.d.ts

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

package/build/esm/blocks/YFM/__tests__/YFM.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { YFM } from '../YFM';
+const text = 'YFM block';
+describe('YFM', () => {
+    test('Has id', async () => {
+        render(React.createElement(YFM, { text: text }));
+        const yfm = screen.getByText(text);
+        expect(yfm).toHaveClass('yfm');
+    });
+});

package/build/esm/components/FeedHeader/components/Controls/Controls.css

@@ -36,23 +36,22 @@ unpredictable css rules order in build */
 .bc-feed-controls__popup.bc-feed-controls__popup {
   border-radius: 12px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list {
-  max-height: 350px !important;
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-select-filter + .yc-select-list {
   margin-top: 0;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter + .g-select-list::-webkit-scrollbar {
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-select-filter + .yc-select-list::-webkit-scrollbar {
   display: none;
 }
 .bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
   margin: 4px;
   border-radius: 8px;
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter {
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-select-filter {
   margin-top: 4px;
   padding: 4px;
   border-bottom: 1px solid var(--yc-color-line-generic);
 }
-.bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter .yc-text-input__control.yc-text-input__control_type_input {
+.bc-feed-controls__popup.bc-feed-controls__popup .yc-select-filter .yc-text-input__control.yc-text-input__control_type_input {
   border: none;
 }
 
@@ -72,12 +71,14 @@ unpredictable css rules order in build */
   border-radius: 10px;
 }
 .bc-feed-controls__saved-only-button_savedOnly {
-  --yc-button-background-color: var(--pc-monochrome-button);
-  --yc-button-background-color-hover: var(--pc-monochrome-button-hover);
-  color: var(--yc-color-text-light-primary);
+  --yc-button-background-color: var(--pc-monochrome-button-background-color);
+  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
+}
+.bc-feed-controls__saved-only-button_savedOnly, .bc-feed-controls__saved-only-button_savedOnly:link, .bc-feed-controls__saved-only-button_savedOnly:visited, .bc-feed-controls__saved-only-button_savedOnly:active, .bc-feed-controls__saved-only-button_savedOnly:focus {
+  color: var(--pc-monochrome-button-color);
 }
 .bc-feed-controls__saved-only-button_savedOnly:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--pc-monochrome-button-color);
 }
 .bc-feed-controls__saved-only-button_savedOnly:focus {
   color: var(--yc-color-base-background);

package/build/esm/components/FeedHeader/components/Controls/Controls.js

@@ -69,7 +69,7 @@ export const Controls = ({ setIsFetching, tags = [], services = [], handleChange
                         initial: servicesItems,
                         list: services,
                         defaultLabel: i18(Keyset.AllServices),
-                    }), disablePortal: true, renderOption: renderOption, renderFilter: renderFilter }))) : null,
+                    }), renderOption: renderOption, renderFilter: renderFilter }))) : null,
             hasLikes ? (React.createElement("div", { className: b('filter-item', { 'width-auto': true }) },
                 React.createElement(Button, { view: 'outlined', className: b('saved-only-button', { savedOnly }), size: "xl", onClick: handleSavedOnly },
                     React.createElement(Icon, { data: Save, size: ICON_SIZE, className: b('icon', { savedOnly }) }),

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

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { SharePopover } from '@gravity-ui/uikit';
+import { ShareTooltip } from '@gravity-ui/uikit';
 import { MobileContext } from '../../../contexts/MobileContext';
 import { RouterContext } from '../../../contexts/RouterContext';
 import { PostPageContext } from '../../../contexts/PostPageContext';
@@ -21,5 +21,5 @@ export const Sharing = ({ theme, metrikaGoal }) => {
     };
     return (React.createElement("div", { className: b('item') },
         React.createElement("span", { className: b('icon') },
-            React.createElement(SharePopover, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, shareOptions: shareOptions, handleMetrika: handleMetrika }))));
+            React.createElement(ShareTooltip, { url: getAbsolutePath(router), className: b('share'), iconClass: b('share-icon'), switcherClassName: b('switcher', { theme }), tooltipClassName: b('popup'), useWebShareApi: isMobile, direction: 'column', buttonTitle: i18(Keyset.ActionShare), customIcon: ShareArrowUp, placement: "bottom", openByHover: false, socialNets: shareOptions, handleMetrika: handleMetrika }))));
 };

package/build/esm/components/Search/Search.css

@@ -7,7 +7,6 @@ unpredictable css rules order in build */
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  max-width: 376px;
   height: 44px;
   transition: width 0.3s;
 }

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

@@ -1,4 +1,4 @@
-import { PageContent, PageConstructorProviderProps } from '@gravity-ui/page-constructor';
+import { PageContent, PageConstructorProviderProps, NavigationData } from '@gravity-ui/page-constructor';
 import { Tag, PostsProps, ToggleLikeCallbackType, MetaProps, GetPostsType, SetQueryType, Service } from '../../models/common';
 import './BlogPage.css';
 export type BlogPageProps = {
@@ -6,6 +6,7 @@ export type BlogPageProps = {
     posts: PostsProps;
     tags: Tag[];
     services?: Service[];
+    navigation?: NavigationData;
     getPosts: GetPostsType;
     toggleLike?: ToggleLikeCallbackType;
     metaData?: MetaProps;
@@ -13,4 +14,4 @@ export type BlogPageProps = {
     settings?: PageConstructorProviderProps;
     pageCountForShowSupportButtons?: number;
 };
-export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, toggleLike, settings, pageCountForShowSupportButtons, }: BlogPageProps) => JSX.Element;
+export declare const BlogPage: ({ content, posts, tags, services, getPosts, metaData, toggleLike, navigation, settings, pageCountForShowSupportButtons, }: BlogPageProps) => JSX.Element;

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

@@ -5,7 +5,7 @@ import { LikesContext } from '../../contexts/LikesContext';
 import { MetaWrapper } from '../../components/MetaWrapper/MetaWrapper';
 import componentMap from '../../constructor/blocksMap';
 import './BlogPage.css';
-export const BlogPage = ({ content, posts, tags, services, getPosts, metaData, toggleLike, settings, pageCountForShowSupportButtons, }) => (React.createElement("main", null,
+export const BlogPage = ({ content, posts, tags, services, getPosts, metaData, toggleLike, navigation, settings, pageCountForShowSupportButtons, }) => (React.createElement("main", null,
     React.createElement(LikesContext.Provider, { value: {
             toggleLike: toggleLike,
             hasLikes: Boolean(toggleLike),
@@ -21,4 +21,4 @@ export const BlogPage = ({ content, posts, tags, services, getPosts, metaData, t
             } },
             React.createElement(PageConstructorProvider, Object.assign({}, settings),
                 metaData ? React.createElement(MetaWrapper, Object.assign({}, metaData)) : null,
-                React.createElement(PageConstructor, { content: content, custom: componentMap }))))));
+                React.createElement(PageConstructor, { content: content, custom: componentMap, navigation: navigation }))))));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageContent, PageConstructorProviderProps } from '@gravity-ui/page-constructor';
+import { PageContent, PageConstructorProviderProps, NavigationData } from '@gravity-ui/page-constructor';
 import { ShareOptions } from '@gravity-ui/uikit';
 import { PostData, ToggleLikeCallbackType, MetaProps } from '../../models/common';
 import './BlogPostPage.css';
@@ -14,6 +14,7 @@ export interface BlogPostPageProps {
     content: PageContent;
     post: PostData;
     settings?: PageConstructorProviderProps;
+    navigation?: NavigationData;
     shareOptions?: ShareOptions[];
 }
 export declare const BlogPostPage: React.FC<BlogPostPageProps>;

package/build/esm/containers/BlogPostPage/BlogPostPage.js

@@ -6,7 +6,7 @@ import { LikesContext } from '../../contexts/LikesContext';
 import { useLikes } from '../../hooks/useLikes';
 import { MetaWrapper } from '../../components/MetaWrapper/MetaWrapper';
 import './BlogPostPage.css';
-export const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings, shareOptions, }) => {
+export const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, settings, navigation, shareOptions, }) => {
     const { hasUserLike, likesCount, handleLike } = useLikes({
         hasLike: likes === null || likes === void 0 ? void 0 : likes.hasUserLike,
         count: likes === null || likes === void 0 ? void 0 : likes.likesCount,
@@ -32,5 +32,5 @@ export const BlogPostPage = ({ metaData, suggestedPosts, likes, content, post, s
                 } },
                 React.createElement(PageConstructorProvider, Object.assign({}, settings),
                     metaData ? React.createElement(MetaWrapper, Object.assign({}, metaData)) : null,
-                    React.createElement(PageConstructor, { content: content, custom: componentMap }))))));
+                    React.createElement(PageConstructor, { content: content, custom: componentMap, navigation: navigation }))))));
 };

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

@@ -7,7 +7,6 @@ export type AuthorProps = ClassNameProps & {
     image: string;
 } & PaddingsYFMProps;
 export type BannerProps = ContentBlockProps & {
-    background?: string;
     color?: string;
     image?: string;
     imageSize?: 's' | 'm';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "1.0.0-aplha.0",
+  "version": "1.1.0-alpha.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -40,62 +40,57 @@
     "prepublishOnly": "npm run lint && npm run build",
     "prepare": "husky install",
     "svgo": "svgo --config svgo.config.js",
-    "svgo:all": "svgo --config svgo.config.js -r -f assets"
+    "svgo:all": "svgo --config svgo.config.js -r -f assets",
+    "test": "jest --maxWorkers=50%",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watchAll --maxWorkers=25%"
   },
   "dependencies": {
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/uikit": "^4.0.4",
-    "@types/fast-html-parser": "^1.0.2",
-    "@types/recompose": "^0.30.10",
     "bem-cn-lite": "^4.0.0",
     "fast-html-parser": "^1.0.1",
-    "gulp": "^4.0.2",
-    "gulp-dart-sass": "^1.0.2",
-    "gulp-rename": "^2.0.0",
-    "gulp-replace": "^1.1.3",
-    "gulp-typescript": "^6.0.0-alpha.1",
-    "html-loader": "^1.3.2",
     "isomorphic-dompurify": "^0.20.0",
     "lodash": "^4.17.21",
-    "markdown-loader": "^6.0.0",
     "react-helmet": "^6.1.0",
     "react-player": "^2.9.0",
     "react-slick": "^0.28.1",
-    "react-spring": "^9.3.0",
+    "react-spring": "~9.6.0",
     "react-transition-group": "^4.4.2",
     "react-waypoint": "^10.1.0",
-    "recompose": "^0.30.0",
-    "rimraf": "^3.0.2",
     "sanitize-html": "^2.6.1",
-    "sass": "^1.54.4",
     "snakecase-keys": "^5.1.0",
     "typograf": "^6.14.0",
     "ua-parser-js": "^0.7.28",
     "url": "^0.11.0",
-    "url-join": "^5.0.0",
-    "webpack": "^4.46.0"
+    "url-join": "^5.0.0"
   },
   "peerDependencies": {
-    "@doc-tools/components": "^2.0.0",
-    "@doc-tools/transform": "^2.6.1",
-    "@gravity-ui/page-constructor": "^1.1.0",
+    "@doc-tools/transform": "^2.9.0",
+    "@gravity-ui/uikit": "^3.20.0",
+    "@gravity-ui/page-constructor": "^1.22.0",
     "react": "^16.0.0 || ^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
-    "@doc-tools/components": "^2.1.0",
+    "@commitlint/config-conventional": "^17.4.3",
     "@doc-tools/transform": "^2.9.0",
     "@gravity-ui/eslint-config": "^1.0.2",
-    "@gravity-ui/page-constructor": "^1.4.1",
+    "@gravity-ui/page-constructor": "^1.23.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
+    "@gravity-ui/uikit": "^3.20.0",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-knobs": "^6.3.1",
     "@storybook/addon-viewport": "^6.3.12",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.10",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/fast-html-parser": "^1.0.2",
+    "@types/jest": "^29.2.5",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.176",
     "@types/react": "^18.0.26",
@@ -104,22 +99,37 @@
     "@types/react-transition-group": "^4.4.4",
     "@types/sanitize-html": "^2.6.0",
     "@types/ua-parser-js": "^0.7.36",
-    "eslint": "^7.32.0",
+    "eslint": "^8.0.0",
     "eslint-plugin-local": "./eslint-plugin-local",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "gulp": "^4.0.2",
+    "gulp-dart-sass": "^1.0.2",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.3",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "html-loader": "^1.3.2",
     "husky": "^7.0.4",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-transform-css": "^6.0.1",
     "js-yaml": "^3.14.1",
     "lint-staged": "^11.2.6",
+    "markdown-loader": "^6.0.0",
     "move-file-cli": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.14",
     "prettier": "2.4.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.54.4",
     "sass-loader": "^10.3.1",
     "stylelint": "^14.11.0",
-    "stylelint-scss": "^3.21.0",
+    "stylelint-scss": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
-    "typescript": "^4.9.3"
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.9.3",
+    "webpack": "^4.46.0"
   },
   "lint-staged": {
     "*.{css,scss}": [
@@ -133,8 +143,5 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
-  },
-  "publishConfig": {
-    "tag": "alpha"
   }
 }

package/server/models/blocks.d.ts

@@ -7,7 +7,6 @@ export type AuthorProps = ClassNameProps & {
     image: string;
 } & PaddingsYFMProps;
 export type BannerProps = ContentBlockProps & {
-    background?: string;
     color?: string;
     image?: string;
     imageSize?: 's' | 'm';

package/styles/mixins.scss

@@ -47,13 +47,3 @@
         }
     }
 }
-
-@mixin monochromeButton() {
-    --yc-button-background-color: var(--pc-monochrome-button);
-    --yc-button-background-color-hover: var(--pc-monochrome-button-hover);
-    color: var(--yc-color-text-light-primary);
-
-    &:hover {
-        color: var(--yc-color-text-light-primary);
-    }
-}