@gravity-ui/page-constructor 3.6.2 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [3.8.0](https://github.com/gravity-ui/page-constructor/compare/v3.7.0...v3.8.0) (2023-06-22)
+
+
+### Features
+
+* add yfm transoform for editor demo ([#420](https://github.com/gravity-ui/page-constructor/issues/420)) ([1c1a2aa](https://github.com/gravity-ui/page-constructor/commit/1c1a2aa134a3c4d18e01537c1ca874720f23649d))
+* update dynamic forms and fix form render performance ([#418](https://github.com/gravity-ui/page-constructor/issues/418)) ([eb9437d](https://github.com/gravity-ui/page-constructor/commit/eb9437df0d38a9a3433e85d111c45b3a49dbd9aa))
+
+## [3.7.0](https://github.com/gravity-ui/page-constructor/compare/v3.6.2...v3.7.0) (2023-06-21)
+
+
+### Features
+
+* **Tabs:** provide an to change tab text size ([#417](https://github.com/gravity-ui/page-constructor/issues/417)) ([005a686](https://github.com/gravity-ui/page-constructor/commit/005a68662ecc29ee07eff7d958a27842c38206f7))
+
 ## [3.6.2](https://github.com/gravity-ui/page-constructor/compare/v3.6.1...v3.6.2) (2023-06-19)
 
 

package/README.md

@@ -325,6 +325,16 @@ When you receive the approval of your pull-request from the code owners and pass
 4. Check your changes in CHANGELOG.md and approve robot's PR.
 5. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
 
+### Alpha versions release
+
+If you want to release alpha version of the package from your branch you can do it manually:
+
+1. Go to tab Actions
+2. Select workflow "Release alpha version" on the left page's side
+3. You can see on the right side the button "Run workflow". Here you can choose the branch.
+4. You can also see field with manually version. If you release alpha in your branch for the first time, do not set anything here. After first release you have to set the new version manually because we don't change package.json in case that the branch can expire very soon. Use the prefix `alpha` in you manual version otherwise you will get error.
+5. Push "Run workflow" and wait until the action will finish. You can release versions as many as you want but do not abuse it and release versions if you really need it. In other cases use [npm pack](https://docs.npmjs.com/cli/v7/commands/npm-pack).
+
 ### Beta-major versions release
 
 If you want to release a new major version, you will probably need for a beta versions before a stable one, please do the following:

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

@@ -1,3 +1,3 @@
 import { TabsBlockProps } from '../../models';
-export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, }: TabsBlockProps) => JSX.Element;
+export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: TabsBlockProps) => JSX.Element;
 export default TabsBlock;

package/build/cjs/blocks/Tabs/Tabs.js

@@ -15,7 +15,7 @@ const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const utils_2 = require("../../utils");
 const b = (0, utils_2.block)('tabs-block');
-const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
+const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
     var _a;
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
     const [play, setPlay] = (0, react_1.useState)(false);
@@ -37,7 +37,7 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
         react_1.default.createElement("div", { className: b('content-wrapper', {
                 margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
             }) },
-            react_1.default.createElement(sub_blocks_1.Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: "s", links: [
+            react_1.default.createElement(sub_blocks_1.Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: contentSize, links: [
                     ...(activeTabData.link ? [activeTabData.link] : []),
                     ...(activeTabData.links || []),
                 ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));

package/build/cjs/blocks/Tabs/schema.d.ts

@@ -474,6 +474,10 @@ export declare const TabsBlock: {
                     };
                 };
             };
+            contentSize: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/cjs/blocks/Tabs/schema.js

@@ -31,6 +31,9 @@ exports.TabsBlock = {
         properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.BlockHeaderProps), { tabsColSizes: common_1.containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: common_1.sizeNumber })), {}), direction: {
                 type: 'string',
                 enum: common_1.mediaDirection,
-            }, centered: { type: 'boolean' }, items: (0, utils_1.filteredArray)(exports.tabsItem) }),
+            }, centered: { type: 'boolean' }, items: (0, utils_1.filteredArray)(exports.tabsItem), contentSize: {
+                type: 'string',
+                enum: common_1.contentSizes,
+            } }),
     },
 };

package/build/cjs/constructor-items.d.ts

@@ -8,7 +8,7 @@ export declare const blockMap: {
     "media-block": (props: import("./models").MediaBlockProps) => JSX.Element;
     "info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
-    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, }: import("./models").TabsBlockProps) => JSX.Element;
+    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("./models").TabsBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;

package/build/cjs/editor/components/BlockForm/BlockForm.js

@@ -10,24 +10,19 @@ const config_1 = require("../../dynamic-forms-custom/config");
 const usePreviousValue_1 = tslib_1.__importDefault(require("../../hooks/usePreviousValue"));
 exports.BlockForm = (0, react_1.memo)((_a) => {
     var _b = _a.data, { type } = _b, content = tslib_1.__rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
-    // get initial values only at first render, then the form manages data
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const initialValues = (0, react_1.useMemo)(() => ({ content }), []);
+    const initialValues = (0, react_1.useMemo)(() => ({ content }), [content]);
     const prevContent = (0, usePreviousValue_1.default)(content);
     const spec = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
-    return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement("div", { onClick: () => {
-            if (!active) {
-                onSelect();
-            }
-        } },
+    if (!active) {
+        return (react_1.default.createElement(dynamic_forms_1.SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, 1));
+    }
+    return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement("div", null,
         react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => {
                 // fix for FormSpy onChange called twice without content changes
                 if (!lodash_1.default.isEqual(values.content, prevContent)) {
                     onChange(Object.assign({ type }, values.content));
                 }
             }, subscription: { values: true } }),
-        react_1.default.createElement(dynamic_forms_1.DynamicField, { name: "content", 
-            // there is no way other way to manage with form open/close state now
-            key: String(active), spec: spec, config: config_1.dynamicConfig })))));
+        react_1.default.createElement(dynamic_forms_1.DynamicField, { name: "content", spec: spec, config: config_1.dynamicConfig, withoutInsertFFDebounce: true })))));
 });
 exports.BlockForm.displayName = 'BlockForm';

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -210,6 +210,7 @@ export interface TabsBlockProps extends Animatable {
     centered?: boolean;
     direction?: MediaDirection;
     items: TabsBlockItem[];
+    contentSize?: ContentSize;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
     title?: TitleItemProps | string;

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

@@ -1,4 +1,4 @@
 import { TabsBlockProps } from '../../models';
 import './Tabs.css';
-export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, }: TabsBlockProps) => JSX.Element;
+export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: TabsBlockProps) => JSX.Element;
 export default TabsBlock;

package/build/esm/blocks/Tabs/Tabs.js

@@ -12,7 +12,7 @@ import { Content } from '../../sub-blocks';
 import { block, getThemedValue } from '../../utils';
 import './Tabs.css';
 const b = block('tabs-block');
-export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
+export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
     var _a;
     const [activeTab, setActiveTab] = useState(items[0].tabName);
     const [play, setPlay] = useState(false);
@@ -34,7 +34,7 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         React.createElement("div", { className: b('content-wrapper', {
                 margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
             }) },
-            React.createElement(Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: "s", links: [
+            React.createElement(Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: contentSize, links: [
                     ...(activeTabData.link ? [activeTabData.link] : []),
                     ...(activeTabData.links || []),
                 ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));

package/build/esm/blocks/Tabs/schema.d.ts

@@ -474,6 +474,10 @@ export declare const TabsBlock: {
                     };
                 };
             };
+            contentSize: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/esm/blocks/Tabs/schema.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { ImageProps } from '../../components/Image/schema';
-import { BlockBaseProps, BlockHeaderProps, LinkProps, MediaProps, containerSizesArray, mediaDirection, sizeNumber, withTheme, } from '../../schema/validators/common';
+import { BlockBaseProps, BlockHeaderProps, LinkProps, MediaProps, containerSizesArray, contentSizes, mediaDirection, sizeNumber, withTheme, } from '../../schema/validators/common';
 import { filteredArray } from '../../schema/validators/utils';
 import { ContentBase } from '../../sub-blocks/Content/schema';
 const TabsItemContentProps = _.omit(ContentBase, ['size', 'colSizes', 'centered', 'theme']);
@@ -27,6 +27,9 @@ export const TabsBlock = {
         properties: Object.assign(Object.assign(Object.assign({}, BlockBaseProps), BlockHeaderProps), { tabsColSizes: containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: sizeNumber })), {}), direction: {
                 type: 'string',
                 enum: mediaDirection,
-            }, centered: { type: 'boolean' }, items: filteredArray(tabsItem) }),
+            }, centered: { type: 'boolean' }, items: filteredArray(tabsItem), contentSize: {
+                type: 'string',
+                enum: contentSizes,
+            } }),
     },
 };

package/build/esm/constructor-items.d.ts

@@ -8,7 +8,7 @@ export declare const blockMap: {
     "media-block": (props: import("./models").MediaBlockProps) => JSX.Element;
     "info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
-    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, }: import("./models").TabsBlockProps) => JSX.Element;
+    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("./models").TabsBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;

package/build/esm/editor/components/BlockForm/BlockForm.js

@@ -1,30 +1,25 @@
 import { __rest } from "tslib";
 import React, { memo, useMemo } from 'react';
-import { DynamicField } from '@gravity-ui/dynamic-forms';
+import { DynamicField, SimpleVerticalAccordeon } from '@gravity-ui/dynamic-forms';
 import _ from 'lodash';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
 import { dynamicConfig } from '../../dynamic-forms-custom/config';
 import usePreviousValue from '../../hooks/usePreviousValue';
 export const BlockForm = memo((_a) => {
     var _b = _a.data, { type } = _b, content = __rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
-    // get initial values only at first render, then the form manages data
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const initialValues = useMemo(() => ({ content }), []);
+    const initialValues = useMemo(() => ({ content }), [content]);
     const prevContent = usePreviousValue(content);
     const spec = useMemo(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
-    return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement("div", { onClick: () => {
-            if (!active) {
-                onSelect();
-            }
-        } },
+    if (!active) {
+        return (React.createElement(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, 1));
+    }
+    return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement("div", null,
         React.createElement(FormSpy, { onChange: ({ values }) => {
                 // fix for FormSpy onChange called twice without content changes
                 if (!_.isEqual(values.content, prevContent)) {
                     onChange(Object.assign({ type }, values.content));
                 }
             }, subscription: { values: true } }),
-        React.createElement(DynamicField, { name: "content", 
-            // there is no way other way to manage with form open/close state now
-            key: String(active), spec: spec, config: dynamicConfig })))));
+        React.createElement(DynamicField, { name: "content", spec: spec, config: dynamicConfig, withoutInsertFFDebounce: true })))));
 });
 BlockForm.displayName = 'BlockForm';

package/build/esm/models/constructor-items/blocks.d.ts

@@ -210,6 +210,7 @@ export interface TabsBlockProps extends Animatable {
     centered?: boolean;
     direction?: MediaDirection;
     items: TabsBlockItem[];
+    contentSize?: ContentSize;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
     title?: TitleItemProps | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.6.2",
+  "version": "3.8.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -77,7 +77,7 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@gravity-ui/dynamic-forms": "1.7.1",
+    "@gravity-ui/dynamic-forms": "^1.9.2",
     "@gravity-ui/i18n": "^1.0.0",
     "bem-cn-lite": "^4.0.0",
     "final-form": "^4.20.9",
@@ -89,7 +89,7 @@
     "react-spring": "^9.3.0",
     "react-transition-group": "^4.4.2",
     "react-waypoint": "^10.1.0",
-    "sanitize-html": "^2.6.1",
+    "sanitize-html": "2.6.1",
     "snakecase-keys": "^5.1.0",
     "typograf": "^6.14.0",
     "uuid": "^9.0.0"
@@ -125,7 +125,7 @@
     "@types/react-dom": "^18.0.10",
     "@types/react-slick": "^0.23.7",
     "@types/react-transition-group": "^4.4.4",
-    "@types/sanitize-html": "^2.6.0",
+    "@types/sanitize-html": "2.6.1",
     "@types/uuid": "^9.0.0",
     "es5-ext": "0.10.53",
     "eslint": "^8.34.0",
@@ -137,6 +137,7 @@
     "gulp-replace": "^1.1.3",
     "gulp-typescript": "^6.0.0-alpha.1",
     "html-loader": "^1.3.2",
+    "htmlparser2": "^6.1.0",
     "husky": "^7.0.4",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",

package/server/models/constructor-items/blocks.d.ts

@@ -210,6 +210,7 @@ export interface TabsBlockProps extends Animatable {
     centered?: boolean;
     direction?: MediaDirection;
     items: TabsBlockItem[];
+    contentSize?: ContentSize;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
     title?: TitleItemProps | string;