@gravity-ui/blog-constructor 2.0.0-alpha.1 → 2.0.0

package/CHANGELOG.md

@@ -1,231 +1,49 @@
-# Change log
+# Changelog
 
-## 0.20.1
+## [2.0.0](https://github.com/gravity-ui/blog-constructor/compare/v1.1.2...v2.0.0) (2023-04-03)
 
-- Rewrite storybook on ts
 
-## 0.20.0
+### ⚠ BREAKING CHANGES
 
-- Install @gravity-ui linters
+* update uikit up to 4 ([#11](https://github.com/gravity-ui/blog-constructor/issues/11))
 
-## 0.19.0
+### Features
 
-### Breaking changes
+* update uikit up to 4 ([#11](https://github.com/gravity-ui/blog-constructor/issues/11)) ([5d6f3d5](https://github.com/gravity-ui/blog-constructor/commit/5d6f3d51daf111a240871dbad721bbdd250d6b46))
 
-- Refactor and rename types
-- Update react to 18.2.0
-- Update TS to 4.9.3
+## [1.1.2](https://github.com/gravity-ui/blog-constructor/compare/v1.1.1...v1.1.2) (2023-03-28)
 
-## 0.18.1
 
-- Delete useless utils and small refactor
+### Bug Fixes
 
-## 0.18.0
+* add info about release ([#19](https://github.com/gravity-ui/blog-constructor/issues/19)) ([8a5824f](https://github.com/gravity-ui/blog-constructor/commit/8a5824f24c4ad85f0f122111f8f5c1e7c36becc5))
 
-### Breaking changes
+## [1.1.1](https://github.com/gravity-ui/blog-constructor/compare/v1.1.0...v1.1.1) (2023-03-28)
 
-- Refactor naming
 
-## 0.17.1
+### Bug Fixes
 
-- @gravity-ui/uikit 3.10.1 (fix share tooltip)
+* add info about ci in readme ([#17](https://github.com/gravity-ui/blog-constructor/issues/17)) ([b6cffaa](https://github.com/gravity-ui/blog-constructor/commit/b6cffaa1c255c53cd00d06d4fbe0330e117f42a0))
 
-## 0.17.0
+## 1.1.0 (2023-03-28)
 
-- @gravity-ui/uikit 3.9.0
+### Features
 
-## 0.16.1
+- add workflows, update @types/react, small refactors, update Select ([#2](https://github.com/gravity-ui/blog-constructor/issues/2)) ([326247a](https://github.com/gravity-ui/blog-constructor/commit/326247abe9411b50c82ed2cfa516ac6cd341bfa7))
+- Brush up stories, add content for CTA, Layout, Feed blocks. ([#4](https://github.com/gravity-ui/blog-constructor/issues/4)) ([0b73537](https://github.com/gravity-ui/blog-constructor/commit/0b73537b3bae35eca10610963369f3f5d8f9ecbd))
+- export author type ([9e5ee34](https://github.com/gravity-ui/blog-constructor/commit/9e5ee34c6b4d1b3288cda1258160e22073f9ad9d))
+- fix button savedOnly color ([#9](https://github.com/gravity-ui/blog-constructor/issues/9)) ([ef3b1ca](https://github.com/gravity-ui/blog-constructor/commit/ef3b1ca9048f1218817ec5c9c6a5b3e05492f062))
+- init tests ([#1](https://github.com/gravity-ui/blog-constructor/issues/1)) ([f8df32f](https://github.com/gravity-ui/blog-constructor/commit/f8df32f3eccb97abc7bfef222aca1ea56421619b))
+- **navigation:** pass the PageConstructor's navigation prop ([cb875ff](https://github.com/gravity-ui/blog-constructor/commit/cb875ff708832f5dd9e121d67cfccb387ae2499f))
+- uninstall doctools/components ([#14](https://github.com/gravity-ui/blog-constructor/issues/14)) ([16dc64c](https://github.com/gravity-ui/blog-constructor/commit/16dc64c3002b614831880dbe5b250c5637031c7d))
+- update license ([#3](https://github.com/gravity-ui/blog-constructor/issues/3)) ([aa4ee5b](https://github.com/gravity-ui/blog-constructor/commit/aa4ee5bdd01a7db5f6c6c457836658761eee1099))
+- update readme ([#15](https://github.com/gravity-ui/blog-constructor/issues/15)) ([3dbdf78](https://github.com/gravity-ui/blog-constructor/commit/3dbdf78b35f93024bebbcf64a6f06fb01509ae3e))
 
-- Fix for treating page number on fetch
+### Bug Fixes
 
-## 0.16.0
+- **general:** better deps ([8c22384](https://github.com/gravity-ui/blog-constructor/commit/8c223848e47faf8b9beee6700afce317359ee226))
+- search input width ([051c145](https://github.com/gravity-ui/blog-constructor/commit/051c14502110306964c4ec9a2bea47cea9364db5))
 
-- Show "-" in filters selector switchers when only one broken filter provided in a query
+## 1.0.0
 
-## 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
+Create public access for blog-constructor library for creating blog format web pages.

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) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/blog-constructor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/blog-constructor/actions/workflows/ci.yml?query=branch:main) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/blog-constructor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/blog-constructor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/blog-constructor/)
 
 ## Install
 
@@ -6,6 +6,68 @@
 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.
+
+### Documentation - [storybook](https://preview.yandexcloud.dev/blog-constructor/)
+
+### 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 {...providerProps}>
+    <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

@@ -46,6 +46,9 @@ unpredictable css rules order in build */
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-list::-webkit-scrollbar {
   display: none;
 }
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list .yc-list {
+  max-height: calc(500px - var(--yc-text-body-3-line-height) - 12px);
+}
 .bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
   margin: 4px;
   border-radius: 8px;
@@ -57,6 +60,9 @@ unpredictable css rules order in build */
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter .yc-text-input__control.yc-text-input__control_type_input {
   border: none;
 }
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list_size_xl .g-select-list__option {
+  padding: 0 16px;
+}
 
 .bc-feed-controls__popup-filter .yc-text-input__control {
   font-size: var(--yc-text-body-2-font-size);
@@ -74,12 +80,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/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

@@ -46,6 +46,9 @@ unpredictable css rules order in build */
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-list::-webkit-scrollbar {
   display: none;
 }
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list .yc-list {
+  max-height: calc(500px - var(--yc-text-body-3-line-height) - 12px);
+}
 .bc-feed-controls__popup.bc-feed-controls__popup .yc-list__item {
   margin: 4px;
   border-radius: 8px;
@@ -57,6 +60,9 @@ unpredictable css rules order in build */
 .bc-feed-controls__popup.bc-feed-controls__popup .g-select-filter .yc-text-input__control.yc-text-input__control_type_input {
   border: none;
 }
+.bc-feed-controls__popup.bc-feed-controls__popup .g-select-list_size_xl .g-select-list__option {
+  padding: 0 16px;
+}
 
 .bc-feed-controls__popup-filter .yc-text-input__control {
   font-size: var(--yc-text-body-2-font-size);
@@ -74,12 +80,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/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": "2.0.0-alpha.1",
+  "version": "2.0.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -40,62 +40,54 @@
     "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.1.0",
-    "@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-slick": "^0.29.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",
-    "react": "^16.0.0 || ^17.0.0"
+    "@doc-tools/transform": "^2.9.0",
+    "@gravity-ui/uikit": "^4.1.0",
+    "@gravity-ui/page-constructor": "^2.2.1",
+    "react": "^16.0.0 || ^17.0.0 | ^18.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": "^2.2.1",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
+    "@gravity-ui/uikit": "^4.4.0",
     "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-controls": "^6.5.16",
     "@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": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.5",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.176",
     "@types/react": "^18.0.26",
@@ -104,22 +96,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",
+    "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 +140,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);
-    }
-}

package/styles/storybook/index.scss

@@ -16,6 +16,6 @@
 }
 
 .docs-story {
-    // без этого в docs пропадают объекты с z-index меньше 0
+    // without this in docs objects with z-index < 0 dissapear
     z-index: 0 !important;
 }