@gravity-ui/page-constructor 5.14.3 → 5.14.4-alpha.1

package/build/esm/sub-blocks/PriceDetailed/index.js

@@ -0,0 +1,30 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import PriceDetailed from './PriceDetailed';
+import { PriceDetailedBlock as PriceDetailedSchema } from './schema';
+/** @deprecated */
+const PriceDetailedConfig = {
+    component: PriceDetailed,
+    schema: {
+        name: 'Price Detailed',
+        inputs: generateFromAJV(PriceDetailedSchema['price-detailed']),
+        default: {
+            priceType: 'marked-list',
+            items: [
+                {
+                    title: '100$',
+                    description: 'Basic edition',
+                    detailedTitle: 'per year',
+                    items: [
+                        {
+                            text: 'First item',
+                        },
+                        {
+                            text: 'Second item',
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+};
+export default PriceDetailedConfig;

package/build/esm/sub-blocks/Quote/index.d.ts

@@ -0,0 +1,3 @@
+import { BlockData } from '../../constructor-items';
+declare const QuoteConfig: BlockData;
+export default QuoteConfig;

package/build/esm/sub-blocks/Quote/index.js

@@ -0,0 +1,18 @@
+import { generateFromAJV } from '../../utils/form-generator';
+import Quote from './Quote';
+import { Quote as QuoteSchema } from './schema';
+const QuoteConfig = {
+    component: Quote,
+    schema: {
+        name: 'Quote',
+        inputs: generateFromAJV(QuoteSchema['quote']),
+        default: {
+            text: 'A good decision is based on knowledge and not on numbers.',
+            author: {
+                firstName: ' Plato',
+                description: 'Greek philosopher',
+            },
+        },
+    },
+};
+export default QuoteConfig;

package/build/esm/utils/editor.d.ts

@@ -0,0 +1,2 @@
+import { MouseEvent } from 'react';
+export declare const getCursorPositionOverElement: (elementRect: DOMRect, mouseEvent: MouseEvent) => "left" | "right" | "bottom" | "top";

package/build/esm/utils/editor.js

@@ -0,0 +1,20 @@
+export const getCursorPositionOverElement = (elementRect, mouseEvent) => {
+    const cursorPositionY = elementRect.height - (mouseEvent.clientY - elementRect.y);
+    const cursorPositionX = elementRect.width - (mouseEvent.clientX - elementRect.x);
+    const cursorRatioY = elementRect.height / 2 / cursorPositionY;
+    const cursorRatioX = elementRect.width / 2 / cursorPositionX;
+    if (cursorRatioY > cursorRatioX) {
+        if (cursorRatioY >= 1) {
+            return 'bottom';
+        }
+        else {
+            return 'left';
+        }
+    }
+    else if (cursorRatioX >= 1) {
+        return 'right';
+    }
+    else {
+        return 'top';
+    }
+};

package/build/esm/utils/form-generator.d.ts

@@ -0,0 +1,9 @@
+import { JSONSchemaType } from 'ajv';
+import { ArrayBaseInput, BooleanInput, ConfigInput, NumberInput, ObjectInput, SelectBaseInput, TextAreaInput, TextInput } from '../common/types';
+export declare const generateFromAJV: (schema: JSONSchemaType<{}>) => ConfigInput[];
+export declare const generateSingleEntity: (key: string, schema: JSONSchemaType<{}>) => TextInput | BooleanInput | NumberInput | TextAreaInput | SelectBaseInput | ObjectInput | ArrayBaseInput | {
+    type: string;
+    name: string;
+    title: string;
+    options: any;
+} | undefined;

package/build/esm/utils/form-generator.js

@@ -0,0 +1,121 @@
+export const generateFromAJV = (schema) => {
+    if (schema && schema.properties) {
+        const obj = Object.entries(schema.properties).map(([key, value]) => {
+            const innerSchema = value;
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            return generateSingleEntity(key, innerSchema);
+        });
+        return obj.filter(Boolean);
+    }
+    return [];
+};
+export const generateSingleEntity = (key, schema) => {
+    const type = schema.type;
+    if (!type && schema.enum) {
+        return {
+            type: 'select',
+            view: 'select',
+            name: key,
+            title: key,
+            enum: schema.enum.map((enumValue) => ({
+                content: enumValue,
+                value: enumValue,
+            })),
+        };
+    }
+    if (schema.oneOf) {
+        return {
+            type: 'oneOf',
+            name: key,
+            title: key,
+            options: schema.oneOf.map((item) => {
+                let properties;
+                if (item.properties) {
+                    properties = generateFromAJV(item);
+                }
+                else {
+                    properties = [
+                        generateSingleEntity('', Object.assign(Object.assign({}, item), { name: '', title: item.optionName })),
+                    ];
+                }
+                return {
+                    value: item.optionName,
+                    title: item.optionName,
+                    properties: properties,
+                };
+            }),
+        };
+    }
+    switch (type) {
+        case 'string': {
+            if (schema.inputType === 'textarea') {
+                return {
+                    type: 'textarea',
+                    name: key,
+                    title: key,
+                };
+            }
+            if (schema.enum) {
+                return {
+                    type: 'select',
+                    view: 'select',
+                    name: key,
+                    title: key,
+                    enum: schema.enum.map((enumValue) => ({
+                        content: enumValue,
+                        value: enumValue,
+                    })),
+                };
+            }
+            return {
+                type: 'text',
+                name: key,
+                title: key,
+            };
+        }
+        case 'number': {
+            return {
+                type: 'number',
+                name: key,
+                title: key,
+            };
+        }
+        case 'object': {
+            return {
+                type: 'object',
+                name: key,
+                title: key,
+                properties: generateFromAJV(schema),
+            };
+        }
+        case 'boolean': {
+            return {
+                type: 'boolean',
+                name: key,
+                title: key,
+                properties: generateFromAJV(schema),
+            };
+        }
+        case 'array': {
+            if (schema.items.type === 'string') {
+                return {
+                    type: 'array',
+                    name: key,
+                    title: key,
+                    properties: generateFromAJV(schema.items),
+                    buttonText: 'Add',
+                    arrayType: 'text',
+                };
+            }
+            return {
+                type: 'array',
+                name: key,
+                title: key,
+                properties: generateFromAJV(schema.items),
+                buttonText: 'Add',
+                arrayType: 'object',
+            };
+        }
+    }
+    return undefined;
+};

package/build/esm/utils/store.d.ts

@@ -0,0 +1,16 @@
+import { StoreApi } from 'zustand';
+export declare function initializeStore<State, Methods>(initialState: State, methods: (set: StoreApi<State & Methods>['setState'], get: StoreApi<State & Methods>['getState']) => Methods): (overrideInitialState?: Partial<State>) => import("zustand").UseBoundStore<Omit<Omit<StoreApi<State & Methods>, "setState"> & {
+    setState<A extends string | {
+        type: string;
+    }>(partial: (State & Methods) | Partial<State & Methods> | ((state: State & Methods) => (State & Methods) | Partial<State & Methods>), replace?: boolean | undefined, action?: A | undefined): void;
+}, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<State & Methods, State & Methods>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => void | Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: State & Methods) => void) => () => void;
+        onFinishHydration: (fn: (state: State & Methods) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<State & Methods, State & Methods>>;
+    };
+}>;

package/build/esm/utils/store.js

@@ -0,0 +1,5 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+export function initializeStore(initialState, methods) {
+    return (overrideInitialState) => create(devtools((set, get) => (Object.assign(Object.assign(Object.assign({}, initialState), overrideInitialState), methods(set, get)))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.14.3",
+  "version": "5.14.4-alpha.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -18,6 +18,11 @@
       "require": "./build/cjs/editor/index.js",
       "import": "./build/esm/editor/index.js"
     },
+    "./editor-v2": {
+      "types": "./build/esm/editor-v2/index.d.ts",
+      "require": "./build/cjs/editor-v2/index.js",
+      "import": "./build/esm/editor-v2/index.js"
+    },
     "./server": {
       "types": "./server/index.d.ts",
       "require": "./server/index.js",
@@ -53,7 +58,9 @@
     "*.scss"
   ],
   "scripts": {
-    "deps:install": "npm ci",
+    "deps:install:playground": "cd playground && npm ci",
+    "deps:install:package": "npm ci",
+    "deps:install": "run-p deps:install:playground deps:install:package",
     "deps:truncate": "npm prune --production",
     "lint:fix": "run-s lint:js:fix lint:styles:fix lint:prettier:fix typecheck",
     "lint:js": "eslint '**/*.{js,jsx,ts,tsx}' --max-warnings=0",
@@ -65,6 +72,7 @@
     "lint": "run-p lint:js lint:styles lint:prettier typecheck",
     "typecheck": "tsc --noEmit",
     "dev": "npm run storybook:start",
+    "dev:website": "next dev playground",
     "storybook:start": "storybook dev -p 7009",
     "storybook:build": "storybook build -c .storybook -o storybook-static",
     "start": "node dist",
@@ -95,12 +103,14 @@
     "ajv-keywords": "^5.1.0",
     "final-form": "^4.20.9",
     "github-buttons": "2.23.0",
+    "immutable": "^4.3.7",
     "js-yaml-source-map": "^0.2.2",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.38.0",
     "react-final-form": "^6.5.9",
     "react-monaco-editor": "^0.53.0",
     "react-player": "^2.9.0",
+    "react-resizable-panels": "^2.1.3",
     "react-slick": "^0.29.0",
     "react-transition-group": "^4.4.2",
     "react-waypoint": "^10.1.0",
@@ -108,7 +118,8 @@
     "snakecase-keys": "^5.1.0",
     "typograf": "^6.14.0",
     "utility-types": "^3.10.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zustand": "^4.5.2"
   },
   "peerDependencies": {
     "@diplodoc/transform": "^4.10.4",
@@ -179,6 +190,7 @@
     "markdown-loader": "^6.0.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "move-file-cli": "^3.0.0",
+    "next": "^14.2.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.16",
     "postcss-loader": "^4.3.0",

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

@@ -24,7 +24,8 @@ export declare enum BlockType {
     ShareBlock = "share-block",
     MapBlock = "map-block",
     FilterBlock = "filter-block",
-    FormBlock = "form-block"
+    FormBlock = "form-block",
+    TestEditorBlock = "test-editor-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];

package/server/models/constructor-items/blocks.js

@@ -22,6 +22,7 @@ var BlockType;
     BlockType["MapBlock"] = "map-block";
     BlockType["FilterBlock"] = "filter-block";
     BlockType["FormBlock"] = "form-block";
+    BlockType["TestEditorBlock"] = "test-editor-block";
 })(BlockType = exports.BlockType || (exports.BlockType = {}));
 exports.BlockTypes = Object.values(BlockType);
 exports.HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];

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

@@ -117,7 +117,7 @@ export interface BannerCardProps {
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

package/styles/mixins.scss

@@ -180,12 +180,12 @@
 
 @mixin block {
     @include add-specificity(&) {
-        margin-top: $indentL;
-        padding: 0 0 $indentL;
+        //margin-top: $indentL;
+        padding: $indentL 0;
 
         &:first-child {
             // @deprecated
-            margin-top: var(--pc-first-block-indent, #{$indentXXL});
+            //margin-top: var(--pc-first-block-indent, #{$indentXXL});
         }
     }
 }
@@ -563,27 +563,27 @@ unpredictable css rules order in build */
         @include add-specificity(&) {
             &_indentTop {
                 &_0 {
-                    margin-top: 0;
+                    padding-top: 0;
                 }
 
                 &_xs {
-                    margin-top: $indentXS;
+                    padding-top: $indentXS;
                 }
 
                 &_s {
-                    margin-top: $indentSM;
+                    padding-top: $indentSM;
                 }
 
                 &_m {
-                    margin-top: $indentM;
+                    padding-top: $indentM;
                 }
 
                 &_l {
-                    margin-top: $indentL;
+                    padding-top: $indentL;
                 }
 
                 &_xl {
-                    margin-top: $indentXL;
+                    padding-top: $indentXL;
                 }
             }