@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.1

package/README.md

@@ -1,11 +1,5 @@
 # @gravity-ui/page-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/page-constructor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/page-constructor/)
 
-## Install
-
-```shell
-npm install @gravity-ui/page-constructor
-```
-
 ## Page constructor
 
 `Page-constructor` is a library for rendering web pages or their parts based on `JSON` data (support for `YAML` format is to be added later).
@@ -14,6 +8,12 @@ When creating pages, component-based approach is used: a page is built using a s
 
 For the format of input data and list of available blocks, see the [documentation](https://preview.yandexcloud.dev/page-constructor/?path=/story/information--blocks).
 
+## Install
+
+```shell
+npm install @gravity-ui/page-constructor
+```
+
 ### Getting started
 
 The page constructor is imported as a React component. To make sure it runs properly, wrap it in `PageConstructorProvider`:
@@ -184,6 +184,8 @@ Sub-blocks are components that can be used in the block `children` property. In
 
 6. In the block directory, add the `README.md` file with a description of input parameters.
 7. In the block directory add storybook demo in `__stories__` folder. All demo content for story should be placed in `data.json` at story dir. The generic `Story` must accept the type of block props, otherwise incorrect block props will be displayed in Storybook.
+8. Add block data template to `src/editor/data/templates/` folder, file name should match block type
+9. (optional) Add block preview icon to `src/editor/data/previews/` folder, file name should match block type
 
 ### Themes
 
@@ -193,7 +195,7 @@ To add a theme to a block property:
 
 1. In the `models/blocks.ts` file, define the type of the respective block property using the `ThemeSupporting<T>` generic, where `T` is the type of the property.
 
-2. In the file with the block's `react` component, get the value of the property with the theme via `getThemedValue` and `ThemeValueContext` (see examples in the `Banner.tsx` block).
+2. In the file with the block's `react` component, get the value of the property with the theme via `getThemedValue` and `useTheme` hook (see examples in the `MediaBlock.tsx` block).
 
 3. Add theme support to the property validator: in the block's `schema.ts` file, wrap this property in `withTheme`.
 
@@ -323,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:
@@ -339,3 +351,38 @@ Release-As: 3.0.0-beta.0' --allow-empty
 
 4. Release please robot will create a new PR to the branch `beta` with updated CHANGELOG.md and bump version of the package
 5. You can repeat it as many as you want. When you ready to release the latest major version without beta tag, you have to create PR from branch `beta` to branch `main`. Notice that it is normal that your package version will be with beta tag. Robot knows that and change it properly. `3.0.0-beta.0` will become `3.0.0`
+
+### Release flow for previous major-versions
+
+If you want to release a new version in previous major after commit it to the main, please do the following:
+
+1. Update necessary branch, the previous major release branch names are:
+   1. `version-1.x.x/fixes` - for major 1.x.x
+   2. `version-2.x.x` - for major 2.x.x
+2. Checkout a new branch from the previous major release branch
+3. Cherry-pick your commit from the branch `main`
+4. Create PR, get an approval and merge into the previous major release branch
+5. Squash and merge your PR (It is important to release a new version with Github-Actions)
+6. Wait until robot creates a PR with a new version of the package and information about your changes in CHANGELOG.md. You can see the process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
+7. Check your changes in CHANGELOG.md and approve robot's PR.
+8. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
+
+## Page constructor editor
+
+Editor provides user interface for page content management with realtime preview.
+
+How to use:
+
+```tsx
+import {Editor} from '@gravity-ui/page-constructor/editor';
+
+interface MyAppEditorProps {
+  initialContent: PageContent;
+  transformContent: ContentTransformer;
+  onChange: (content: PageContent) => void;
+}
+
+export const MyAppEditor = ({initialContent, onChange, transformContent}: MyAppEditorProps) => (
+  <Editor content={initialContent} onChange={onChange} transformContent={transformContent} />
+);
+```

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

@@ -11,26 +11,32 @@ export declare const BannerCardProps: {
             contentType: string;
         };
         image: {
-            oneOf: ({
+            oneOf: (({
                 type: string;
-            } | {
+            } & {
+                optionName: string;
+            }) | {
                 type: string;
                 additionalProperties: boolean;
                 required: import("../..").Theme[];
                 properties: {};
+                optionName: string;
             })[];
         };
         disableCompress: {
             type: string;
         };
         color: {
-            oneOf: ({
+            oneOf: (({
                 type: string;
-            } | {
+            } & {
+                optionName: string;
+            }) | {
                 type: string;
                 additionalProperties: boolean;
                 required: import("../..").Theme[];
                 properties: {};
+                optionName: string;
             })[];
         };
         theme: {
@@ -64,8 +70,9 @@ export declare const BannerCardProps: {
                     enum: string[];
                 };
                 img: {
-                    anyOf: ({
+                    oneOf: ({
                         type: string;
+                        optionName: string;
                         additionalProperties?: undefined;
                         required?: undefined;
                         properties?: undefined;
@@ -86,11 +93,13 @@ export declare const BannerCardProps: {
                                 contentType: string;
                             };
                         };
+                        optionName: string;
                     })[];
                 };
                 metrikaGoals: {
-                    anyOf: ({
+                    oneOf: ({
                         type: string;
+                        optionName: string;
                         items?: undefined;
                     } | {
                         type: string;
@@ -100,6 +109,7 @@ export declare const BannerCardProps: {
                             required?: undefined;
                             properties?: undefined;
                         };
+                        optionName: string;
                     } | {
                         type: string;
                         items: {
@@ -115,6 +125,7 @@ export declare const BannerCardProps: {
                                 };
                             };
                         };
+                        optionName: string;
                     })[];
                 };
                 pixelEvents: {
@@ -174,7 +185,8 @@ export declare const BannerCardProps: {
                     };
                 };
                 analyticsEvents: {
-                    anyOf: ({
+                    oneOf: ({
+                        optionName: string;
                         type: string;
                         additionalProperties: {
                             type: string;
@@ -210,6 +222,7 @@ export declare const BannerCardProps: {
                                 type: string;
                             };
                         };
+                        items?: undefined;
                     } | {
                         type: string;
                         items: {
@@ -249,6 +262,7 @@ export declare const BannerCardProps: {
                                 };
                             };
                         };
+                        optionName: string;
                     })[];
                 };
                 target: {
@@ -274,7 +288,9 @@ export declare const BannerCardProps: {
             type: string;
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };
 export declare const BannerBlock: {
@@ -291,26 +307,32 @@ export declare const BannerBlock: {
                 contentType: string;
             };
             image: {
-                oneOf: ({
+                oneOf: (({
                     type: string;
-                } | {
+                } & {
+                    optionName: string;
+                }) | {
                     type: string;
                     additionalProperties: boolean;
                     required: import("../..").Theme[];
                     properties: {};
+                    optionName: string;
                 })[];
             };
             disableCompress: {
                 type: string;
             };
             color: {
-                oneOf: ({
+                oneOf: (({
                     type: string;
-                } | {
+                } & {
+                    optionName: string;
+                }) | {
                     type: string;
                     additionalProperties: boolean;
                     required: import("../..").Theme[];
                     properties: {};
+                    optionName: string;
                 })[];
             };
             theme: {
@@ -344,8 +366,9 @@ export declare const BannerBlock: {
                         enum: string[];
                     };
                     img: {
-                        anyOf: ({
+                        oneOf: ({
                             type: string;
+                            optionName: string;
                             additionalProperties?: undefined;
                             required?: undefined;
                             properties?: undefined;
@@ -366,11 +389,13 @@ export declare const BannerBlock: {
                                     contentType: string;
                                 };
                             };
+                            optionName: string;
                         })[];
                     };
                     metrikaGoals: {
-                        anyOf: ({
+                        oneOf: ({
                             type: string;
+                            optionName: string;
                             items?: undefined;
                         } | {
                             type: string;
@@ -380,6 +405,7 @@ export declare const BannerBlock: {
                                 required?: undefined;
                                 properties?: undefined;
                             };
+                            optionName: string;
                         } | {
                             type: string;
                             items: {
@@ -395,6 +421,7 @@ export declare const BannerBlock: {
                                     };
                                 };
                             };
+                            optionName: string;
                         })[];
                     };
                     pixelEvents: {
@@ -454,7 +481,8 @@ export declare const BannerBlock: {
                         };
                     };
                     analyticsEvents: {
-                        anyOf: ({
+                        oneOf: ({
+                            optionName: string;
                             type: string;
                             additionalProperties: {
                                 type: string;
@@ -490,6 +518,7 @@ export declare const BannerBlock: {
                                     type: string;
                                 };
                             };
+                            items?: undefined;
                         } | {
                             type: string;
                             items: {
@@ -529,6 +558,7 @@ export declare const BannerBlock: {
                                     };
                                 };
                             };
+                            optionName: string;
                         })[];
                     };
                     target: {
@@ -554,7 +584,9 @@ export declare const BannerBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };
@@ -572,26 +604,32 @@ export declare const BannerCard: {
                 contentType: string;
             };
             image: {
-                oneOf: ({
+                oneOf: (({
                     type: string;
-                } | {
+                } & {
+                    optionName: string;
+                }) | {
                     type: string;
                     additionalProperties: boolean;
                     required: import("../..").Theme[];
                     properties: {};
+                    optionName: string;
                 })[];
             };
             disableCompress: {
                 type: string;
             };
             color: {
-                oneOf: ({
+                oneOf: (({
                     type: string;
-                } | {
+                } & {
+                    optionName: string;
+                }) | {
                     type: string;
                     additionalProperties: boolean;
                     required: import("../..").Theme[];
                     properties: {};
+                    optionName: string;
                 })[];
             };
             theme: {
@@ -625,8 +663,9 @@ export declare const BannerCard: {
                         enum: string[];
                     };
                     img: {
-                        anyOf: ({
+                        oneOf: ({
                             type: string;
+                            optionName: string;
                             additionalProperties?: undefined;
                             required?: undefined;
                             properties?: undefined;
@@ -647,11 +686,13 @@ export declare const BannerCard: {
                                     contentType: string;
                                 };
                             };
+                            optionName: string;
                         })[];
                     };
                     metrikaGoals: {
-                        anyOf: ({
+                        oneOf: ({
                             type: string;
+                            optionName: string;
                             items?: undefined;
                         } | {
                             type: string;
@@ -661,6 +702,7 @@ export declare const BannerCard: {
                                 required?: undefined;
                                 properties?: undefined;
                             };
+                            optionName: string;
                         } | {
                             type: string;
                             items: {
@@ -676,6 +718,7 @@ export declare const BannerCard: {
                                     };
                                 };
                             };
+                            optionName: string;
                         })[];
                     };
                     pixelEvents: {
@@ -735,7 +778,8 @@ export declare const BannerCard: {
                         };
                     };
                     analyticsEvents: {
-                        anyOf: ({
+                        oneOf: ({
+                            optionName: string;
                             type: string;
                             additionalProperties: {
                                 type: string;
@@ -771,6 +815,7 @@ export declare const BannerCard: {
                                     type: string;
                                 };
                             };
+                            items?: undefined;
                         } | {
                             type: string;
                             items: {
@@ -810,6 +855,7 @@ export declare const BannerCard: {
                                     };
                                 };
                             };
+                            optionName: string;
                         })[];
                     };
                     target: {
@@ -835,7 +881,9 @@ export declare const BannerCard: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -15,6 +15,10 @@ export declare const CardLayoutProps: {
         };
         title: {
             oneOf: ({
+                type: string;
+                optionName: string;
+            } | {
+                optionName: string;
                 type: string;
                 additionalProperties: boolean;
                 required: string[];
@@ -34,13 +38,12 @@ export declare const CardLayoutProps: {
                         type: string;
                     };
                 };
-            } | {
-                type: string;
             })[];
         };
         description: {
             type: string;
             contentType: string;
+            inputType: string;
         };
         animated: {
             type: string;
@@ -70,7 +73,9 @@ export declare const CardLayoutProps: {
             type: string;
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };
 export declare const CardLayoutBlock: {
@@ -91,6 +96,10 @@ export declare const CardLayoutBlock: {
             };
             title: {
                 oneOf: ({
+                    type: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -110,13 +119,12 @@ export declare const CardLayoutBlock: {
                             type: string;
                         };
                     };
-                } | {
-                    type: string;
                 })[];
             };
             description: {
                 type: string;
                 contentType: string;
+                inputType: string;
             };
             animated: {
                 type: string;
@@ -146,7 +154,9 @@ export declare const CardLayoutBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

package/build/cjs/blocks/Companies/Companies.css

@@ -8,15 +8,15 @@ unpredictable css rules order in build */
   text-align: center;
 }
 .pc-companies-block__title {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
 }
 @media (max-width: 576px) {
   .pc-companies-block__title {
-    font-size: var(--yc-text-display-1-font-size);
-    line-height: var(--yc-text-display-1-line-height);
+    font-size: var(--g-text-display-1-font-size);
+    line-height: var(--g-text-display-1-line-height);
   }
 }
 .pc-companies-block__images {

package/build/cjs/blocks/Companies/Companies.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompaniesBlock = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("../../components");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('companies-block');
 const CompaniesBlock = ({ title, images, animated }) => {
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const themedImages = (0, utils_1.getThemedValue)(images, theme) || {};
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), offset: 150, animate: animated },
         react_1.default.createElement("div", { className: b('content') },

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

@@ -8,7 +8,7 @@ export declare const CompaniesBlock: {
                 contentType: string;
             };
             images: {
-                oneOf: ({
+                oneOf: (({
                     type: string;
                     required: string[];
                     properties: {
@@ -26,18 +26,23 @@ export declare const CompaniesBlock: {
                             contentType: string;
                         };
                     };
-                } | {
+                } & {
+                    optionName: string;
+                }) | {
                     type: string;
                     additionalProperties: boolean;
                     required: import("../..").Theme[];
                     properties: {};
+                    optionName: string;
                 })[];
             };
             animated: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

package/build/cjs/blocks/ContentLayout/ContentLayout.css

@@ -15,12 +15,12 @@ unpredictable css rules order in build */
   margin-top: 24px;
 }
 .pc-content-layout-block__files_size_s {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-content-layout-block__files_size_l {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
 }
 .pc-content-layout-block__files_centered {
   margin-left: auto;
@@ -53,7 +53,4 @@ unpredictable css rules order in build */
   .pc-content-layout-block_background {
     padding: 32px;
   }
-  .pc-content-layout-block_background picture {
-    display: none;
-  }
 }

package/build/cjs/blocks/ContentLayout/ContentLayout.js

@@ -31,8 +31,7 @@ function getTextWidth(size) {
 }
 const ContentLayoutBlock = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { textContent, fileContent, properties: cardLayoutProperties = { size: 'l' } } = props;
-    const { size = 'l', background, centered, theme = 'default', textWidth = 'm', } = cardLayoutProperties;
+    const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = (0, react_1.useMemo)(() => getTextWidth(textWidth), [textWidth]);
     return (react_1.default.createElement("div", { className: b({ size, background: Boolean(background) }) },
         react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),