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

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import './Panels.css';
+interface PanelsProps {
+    left: ReactElement;
+    middle: ReactElement;
+    right: ReactElement;
+}
+export declare const Panels: (props: PanelsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react';
+import { ArrowLeftFromLine, ArrowRightFromLine, Grip } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { block } from '../../../utils';
+import './Panels.css';
+const b = block('panels');
+export const Panels = (props) => {
+    var _a, _b;
+    const { left, right, middle } = props;
+    const leftPanel = useRef(null);
+    const rightPanel = useRef(null);
+    const expandPanel = (reference) => {
+        const panel = reference.current;
+        if (panel) {
+            panel.expand();
+        }
+    };
+    const isCollapsed = {
+        left: ((_a = leftPanel.current) === null || _a === void 0 ? void 0 : _a.isCollapsed()) || false,
+        right: ((_b = rightPanel.current) === null || _b === void 0 ? void 0 : _b.isCollapsed()) || false,
+    };
+    return (React.createElement(PanelGroup, { className: b('panel'), autoSaveId: "page-constructor-editor", direction: "horizontal" },
+        React.createElement(Panel, { ref: leftPanel, collapsible: true, defaultSize: 25, minSize: 15 }, left),
+        React.createElement(PanelResizeHandle, { className: b('draggable') },
+            React.createElement(Grip, { className: b('grip') }),
+            isCollapsed.left && (React.createElement("div", { className: b('button-wrap', { left: true }) },
+                React.createElement(Button, { className: b('button'), view: "action", onClick: () => expandPanel(leftPanel) },
+                    React.createElement(Icon, { data: ArrowRightFromLine }))))),
+        React.createElement(Panel, { minSize: 20 }, middle),
+        React.createElement(PanelResizeHandle, { className: b('draggable') },
+            React.createElement(Grip, { className: b('grip') }),
+            isCollapsed.right && (React.createElement("div", { className: b('button-wrap', { right: true }) },
+                React.createElement(Button, { className: b('button'), view: "action", onClick: () => expandPanel(rightPanel) },
+                    React.createElement(Icon, { data: ArrowLeftFromLine }))))),
+        React.createElement(Panel, { ref: rightPanel, collapsible: true, minSize: 15, defaultSize: 25 }, right)));
+};

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/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/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.2",
+  "version": "5.14.4-alpha.3",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {