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

package/build/esm/editor-v2/components/TopBar/TopBar.js

@@ -4,10 +4,10 @@ import Source from '../Source/Source';
 import ViewSwitches from '../ViewSwitches/ViewSwitches';
 import './TopBar.css';
 const b = block('topbar');
-const TopBar = ({ className }) => {
+const TopBar = ({ zoom, onDecreaseZoom, onIncreaseZoom, onZoomUpdate, className, }) => {
     return (React.createElement("div", { className: b(null, className) },
         React.createElement("div", { className: b('switches') },
-            React.createElement(ViewSwitches, null)),
+            React.createElement(ViewSwitches, { onZoomUpdate: onZoomUpdate, onDecreaseZoom: onDecreaseZoom, onIncreaseZoom: onIncreaseZoom, zoom: zoom })),
         React.createElement(Source, { className: b('source') })));
 };
 export default TopBar;

package/build/esm/editor-v2/components/Tree/Tree.css

@@ -13,6 +13,17 @@ body {
 .pc-tree {
   padding: 12px;
 }
+.pc-tree__head {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pc-tree__title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+}
 .pc-tree__item {
   padding: 8px;
   margin-bottom: 8px;

package/build/esm/editor-v2/components/Tree/Tree.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Card } from '@gravity-ui/uikit';
+import { TrashBin } from '@gravity-ui/icons';
+import { Button, Card, Icon } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import { useContentConfigStore } from '../../context/contentConfig';
 import './Tree.css';
@@ -18,13 +19,20 @@ const generateTree = (items) => {
     });
 };
 const Tree = (_p) => {
-    const { config } = useContentConfigStore();
+    const { config, resetBlocks } = useContentConfigStore();
     const blockTree = generateTree(config.blocks);
     const renderTree = (items, deepLevel = 0) => {
         return items.map(({ type, children }, index) => (React.createElement(React.Fragment, { key: index },
             React.createElement(Card, { className: b('item', { deep: deepLevel }) }, type),
             children && renderTree(children, deepLevel + 1))));
     };
-    return React.createElement("div", { className: b() }, renderTree(blockTree));
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('head') },
+            React.createElement("div", { className: b('title') }, "Tree"),
+            React.createElement("div", { className: b('actions') },
+                React.createElement(Button, { view: "outlined-danger", onClick: () => resetBlocks() },
+                    React.createElement(Icon, { data: TrashBin }),
+                    "Clear all"))),
+        React.createElement("div", { className: b('cards') }, renderTree(blockTree))));
 };
 export default Tree;

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.css

@@ -13,4 +13,11 @@ body {
 .pc-view-switches {
   display: inline-flex;
   gap: 12px;
+}
+.pc-view-switches__zoom {
+  display: flex;
+  gap: 4px;
+}
+.pc-view-switches__zoom-input {
+  width: 40px;
 }

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { RadioButtonOption } from '@gravity-ui/uikit';
 import { ClassNameProps } from '../../../models';
 import './ViewSwitches.css';
 interface ViewSwitchesProps extends ClassNameProps {
+    onZoomUpdate: (zoom: number) => void;
+    onDecreaseZoom: () => void;
+    onIncreaseZoom: () => void;
+    zoom: number;
 }
-export declare const options2: RadioButtonOption[];
 declare const ViewSwitches: React.FC<ViewSwitchesProps>;
 export default ViewSwitches;

package/build/esm/editor-v2/components/ViewSwitches/ViewSwitches.js

@@ -1,22 +1,20 @@
 import React from 'react';
-import { Display, Eye, Smartphone, Square, SquareDashedText } from '@gravity-ui/icons';
-import { Icon, RadioButton } from '@gravity-ui/uikit';
+import { Minus, Plus } from '@gravity-ui/icons';
+import { Button, Icon, Select } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
+import { ZOOM_STEPS } from '../../constants';
 import './ViewSwitches.css';
 const b = block('view-switches');
-const options1 = [
-    { value: 'edit-mode', content: React.createElement(Icon, { data: SquareDashedText }) },
-    { value: 'preview-mode', content: React.createElement(Icon, { data: Eye }) },
-];
-export const options2 = [
-    { value: 'desktop-mode', content: React.createElement(Icon, { data: Display }) },
-    { value: 'tablet-mode', content: React.createElement(Icon, { data: Square }) },
-    { value: 'phone-mode', content: React.createElement(Icon, { data: Smartphone }) },
-];
-// TODO: To be done
-const ViewSwitches = ({ className }) => {
+const ViewSwitches = ({ zoom, onIncreaseZoom, onDecreaseZoom, onZoomUpdate, className, }) => {
     return (React.createElement("div", { className: b(null, className) },
-        React.createElement(RadioButton, { className: b('switch'), name: "group1", defaultValue: options1[0].value, options: options1, size: "m", disabled: true }),
-        React.createElement(RadioButton, { className: b('switch'), name: "group2", defaultValue: options2[0].value, options: options2, size: "m", disabled: true })));
+        React.createElement("div", { className: b('zoom') },
+            React.createElement(Button, { view: 'flat', onClick: onDecreaseZoom },
+                React.createElement(Icon, { data: Minus })),
+            React.createElement(Select, { multiple: false, value: [String(zoom)], options: ZOOM_STEPS.map((step) => ({
+                    value: String(step),
+                    content: `${String(step)}%`,
+                })), onUpdate: (value) => onZoomUpdate(Number(value)) }),
+            React.createElement(Button, { view: 'flat', onClick: onIncreaseZoom },
+                React.createElement(Icon, { data: Plus })))));
 };
 export default ViewSwitches;

package/build/esm/editor-v2/constants.d.ts

@@ -0,0 +1 @@
+export declare const ZOOM_STEPS: number[];

package/build/esm/editor-v2/constants.js

@@ -0,0 +1 @@
+export const ZOOM_STEPS = [25, 33, 50, 75, 100, 125, 150, 200, 250, 300];

package/build/esm/editor-v2/containers/Editor/Editor.css

@@ -36,16 +36,6 @@ body {
 .pc-editor__canvas {
   flex: 1;
 }
-.pc-editor__draggable {
-  width: 12px;
-  height: 100%;
-  cursor: col-resize;
-  background-color: var(--g-color-line-generic);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--g-color-base-background);
-}
 .pc-editor__overlay {
   position: absolute;
   height: 100%;

package/build/esm/editor-v2/containers/Editor/Editor.js

@@ -1,10 +1,9 @@
 import React, { useCallback } from 'react';
-import { Grip } from '@gravity-ui/icons';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { ActionTypes } from '../../../common/types';
 import { block } from '../../../utils';
 import BigOverlay from '../../components/BigOverlay/BigOverlay';
 import MiddleScreen from '../../components/MiddleScreen/MiddleScreen';
+import { Panels } from '../../components/Panels/Panels';
 import { Sidebar } from '../../components/Sidebar/Sidebar';
 import { ContentConfigProvider } from '../../context/contentConfig';
 import { EditorProvider, useEditorStore } from '../../context/editorContext';
@@ -40,17 +39,7 @@ const EditorView = (_props) => {
     }, [manipulateOverlayMode, sendMessage]);
     return (React.createElement("div", { className: b(), onMouseUp: onMouseUp, onMouseMove: onMouseMove },
         React.createElement("div", { className: b('body') },
-            React.createElement(PanelGroup, { className: b('panel'), autoSaveId: "page-constructor-editor", direction: "horizontal" },
-                React.createElement(Panel, { collapsible: true, defaultSize: 25, minSize: 15 },
-                    React.createElement(Sidebar, { position: 'left' })),
-                React.createElement(PanelResizeHandle, { className: b('draggable') },
-                    React.createElement(Grip, { className: b('grip') })),
-                React.createElement(Panel, { minSize: 20 },
-                    React.createElement(MiddleScreen, null)),
-                React.createElement(PanelResizeHandle, { className: b('draggable') },
-                    React.createElement(Grip, { className: b('grip') })),
-                React.createElement(Panel, { collapsible: true, minSize: 15, defaultSize: 25 },
-                    React.createElement(Sidebar, { position: 'right', startMenu: "block-config" })))),
+            React.createElement(Panels, { left: React.createElement(Sidebar, { position: 'left' }), right: React.createElement(Sidebar, { position: 'right', startMenu: "block-config" }), middle: React.createElement(MiddleScreen, null) })),
         React.createElement(BigOverlay, { className: b('overlay') })));
 };
 export const Editor = (props) => {

package/build/esm/editor-v2/context/contentConfig/store.d.ts

@@ -18,6 +18,7 @@ export interface ContentConfigMethods extends WithStoreReducer {
     duplicateBlock: (path: number[]) => void;
     reorderBlock: (path: number[], destination: number[]) => void;
     updateField: (path: string, value: DynamicFormValue) => void;
+    resetBlocks: () => void;
 }
 export type ContentConfigStore = ContentConfigState & ContentConfigMethods;
 export declare const createContentConfigStore: (overrideInitialState?: Partial<ContentConfigState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<ContentConfigState & ContentConfigMethods>, "subscribe"> & {

package/build/esm/editor-v2/context/contentConfig/store.js

@@ -57,6 +57,9 @@ export const createContentConfigStore = initializeStore({
         }
         set((state) => (Object.assign(Object.assign({}, state), { config: Object.assign(Object.assign({}, state.config), { blocks: newBlocksConfig }) })));
     },
+    resetBlocks: () => {
+        set((state) => (Object.assign(Object.assign({}, state), { config: Object.assign(Object.assign({}, state.config), { blocks: [] }) })));
+    },
     reducer: function (action) {
         switch (action.type) {
             // Insert Actions

package/build/esm/editor-v2/context/iframeContext/store.d.ts

@@ -2,9 +2,13 @@ import { WithStoreReducer } from '../../../common/types';
 export interface IframeState {
     url: string;
     height?: number;
+    zoom: number;
 }
 export interface IframeMethods extends WithStoreReducer {
     setUrl: (url: string) => void;
+    setZoom: (zoom: number) => void;
+    increaseZoom: () => void;
+    decreaseZoom: () => void;
 }
 export type IframeStore = IframeState & IframeMethods;
 export declare const createIframeStore: (overrideInitialState?: Partial<IframeState> | undefined) => import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<IframeState & IframeMethods>, "subscribe"> & {

package/build/esm/editor-v2/context/iframeContext/store.js

@@ -1,9 +1,35 @@
 import { ActionTypes } from '../../../common/types';
+import { ZOOM_STEPS } from '../../constants';
 import { initializeStore } from '../../utils/store';
 export const createIframeStore = initializeStore({
     url: '',
     height: 400,
-}, (set) => ({
+    zoom: 100,
+}, (set, get) => ({
+    setZoom: function (zoom) {
+        if (zoom > 0) {
+            set((state) => (Object.assign(Object.assign({}, state), { zoom })));
+        }
+    },
+    increaseZoom: function () {
+        const currentZoom = get().zoom;
+        for (const step of ZOOM_STEPS) {
+            if (currentZoom < step) {
+                get().setZoom(step);
+                break;
+            }
+        }
+    },
+    decreaseZoom: function () {
+        const currentZoom = get().zoom;
+        const reverseSteps = ZOOM_STEPS.slice().reverse();
+        for (const step of reverseSteps) {
+            if (currentZoom > step) {
+                get().setZoom(step);
+                break;
+            }
+        }
+    },
     setUrl: (url) => set((state) => (Object.assign(Object.assign({}, state), { url }))),
     reducer: (action) => {
         switch (action.type) {

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

@@ -6,10 +6,12 @@ const BackgroundCardConfig = {
     schema: {
         name: 'Background Card',
         inputs: generateFromAJV(BackgroundCardSchema['background-card']),
+        group: 'cards',
         default: {
             title: 'Background Card',
             text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
             additionalInfo: 'Additional info',
+            backgroundColor: '#F0F0F0',
         },
     },
 };

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

@@ -5,6 +5,7 @@ const BannerCardConfig = {
     component: BannerCard,
     schema: {
         name: 'Banner Card',
+        group: 'cards',
         inputs: generateFromAJV(BannerCardProps),
         default: {
             color: 'rgba(54, 151, 241, 0.4)',

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

@@ -5,6 +5,7 @@ const BasicCardConfig = {
     component: BasicCard,
     schema: {
         name: 'Basic Card',
+        group: 'cards',
         inputs: generateFromAJV(BasicCardSchema['basic-card']),
         default: {
             title: 'Basic Card',

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

@@ -5,6 +5,7 @@ const ContentConfig = {
     component: Content,
     schema: {
         name: 'Content',
+        group: 'cards',
         inputs: generateFromAJV(ContentBlock['content']),
         default: {
             title: 'Content',

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

@@ -5,6 +5,7 @@ const ImageCardConfig = {
     component: ImageCard,
     schema: {
         name: 'Image Card',
+        group: 'cards',
         inputs: generateFromAJV(ImageCardSchema['image-card']),
         default: {
             title: 'Image Card',

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

@@ -5,11 +5,16 @@ const LayoutItemConfig = {
     component: LayoutItem,
     schema: {
         name: 'Layout Item',
+        group: 'cards',
         inputs: generateFromAJV(LayoutItemSchema),
         default: {
+            type: 'layout-item',
             content: {
-                title: 'Layout Item',
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                title: 'Lorem ipsum',
+                text: 'Dolor sit amet',
+            },
+            media: {
+                image: 'https://storage.yandexcloud.net/yc-www-community-images/event_ecaf1ef1-bc3a-40fa-adef-827b0959e6c3.jpg',
             },
         },
     },

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

@@ -5,12 +5,14 @@ const MediaCardConfig = {
     component: MediaCard,
     schema: {
         name: 'Media Card',
+        group: 'cards',
         inputs: generateFromAJV(MediaCardSchema['media-card']),
         default: {
             content: {
                 title: 'Media Card',
                 text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
             },
+            image: 'https://storage.yandexcloud.net/yc-www-community-images/event_ecaf1ef1-bc3a-40fa-adef-827b0959e6c3.jpg',
         },
     },
 };

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

@@ -5,6 +5,7 @@ const PriceCardConfig = {
     component: PriceCard,
     schema: {
         name: 'Price Card',
+        group: 'cards',
         inputs: generateFromAJV(PriceCardSchema['price-card']),
         default: {
             type: 'price-card',

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

@@ -6,6 +6,7 @@ const PriceDetailedConfig = {
     component: PriceDetailed,
     schema: {
         name: 'Price Detailed',
+        group: 'cards',
         inputs: generateFromAJV(PriceDetailedSchema['price-detailed']),
         default: {
             priceType: 'marked-list',

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

@@ -5,6 +5,7 @@ const QuoteConfig = {
     component: Quote,
     schema: {
         name: 'Quote',
+        group: 'cards',
         inputs: generateFromAJV(QuoteSchema['quote']),
         default: {
             text: 'A good decision is based on knowledge and not on numbers.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.14.4-alpha.1",
+  "version": "5.14.4-alpha.3",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {