feat: Edit mode (#347)

feat: add page structure editor

Author: gorgeousvlad

.devexp.json

@@ -61,15 +61,16 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@doc-tools/transform": "^2.6.1",
     "@gravity-ui/uikit": "^4.1.0",
-    "@doc-tools/transform": "^2.6.1"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@doc-tools/transform": "2.12.0",
     "@gravity-ui/eslint-config": "^2.0.0",
+    "@gravity-ui/icons": "^2.1.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",

package-lock.json

@@ -2,19 +2,19 @@
   "default": {
     "content": {
       "type": "companies-block",
-      "title": "Our Clients",
+      "title": "Page constructor",
       "images": {
         "light": {
           "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_light.svg",
           "tablet": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_light.svg",
           "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_light.svg",
-          "alt": "Our Clients"
+          "alt": "Page constructor"
         },
         "dark": {
           "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_dark.svg",
           "tablet": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_dark.svg",
           "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_dark.svg",
-          "alt": "Our Clients"
+          "alt": "Page constructor"
         }
       }
     }

package.json

@@ -1,15 +1,16 @@
-import React from 'react';
+import React, {PropsWithChildren} from 'react';
 
+import {BlockDecoration} from '../../customization/BlockDecoration';
 import {Col} from '../../grid';
-import {BlockBaseProps, ClassNameProps, WithChildren} from '../../models';
+import {BlockBaseProps, ClassNameProps} from '../../models';
 import {block} from '../../utils';
 import Anchor from '../Anchor/Anchor';
 
 import './BlockBase.scss';
 
 const b = block('block-base');
 
-const BlockBase = (props: WithChildren<BlockBaseProps & ClassNameProps>) => {
+const BlockBase = (props: PropsWithChildren<BlockBaseProps & ClassNameProps>) => {
     const {anchor, visible, children, className, resetPaddings, qa} = props;
 
     return (
@@ -19,8 +20,10 @@ const BlockBase = (props: WithChildren<BlockBaseProps & ClassNameProps>) => {
             reset={true}
             dataQa={qa}
         >
-            {anchor && <Anchor id={anchor.url} className={b('anchor')} />}
-            {children}
+            <BlockDecoration>
+                {anchor && <Anchor id={anchor.url} className={b('anchor')} />}
+                {children}
+            </BlockDecoration>
         </Col>
     );
 };

src/blocks/Companies/__stories__/data.json

@@ -4,7 +4,13 @@ import {Spin} from '@gravity-ui/uikit';
 import blockCn from 'bem-cn-lite';
 
 import ErrorWrapper from '../../components/ErrorWrapper/ErrorWrapper';
-import {Block, CustomItem, FetchLoadableData, LoadableData, LoadableProps} from '../../models';
+import {
+    ConstructorItem,
+    CustomItem,
+    FetchLoadableData,
+    LoadableData,
+    LoadableProps,
+} from '../../models';
 
 import i18n from './i18n';
 
@@ -21,7 +27,7 @@ export interface LoadableState {
 export interface LoadableComponentsProps extends Omit<PropsWithChildren<LoadableProps>, 'source'> {
     Component: CustomItem;
     ChildComponent: CustomItem;
-    block: Block;
+    block: ConstructorItem;
     blockKey: string;
     fetch: FetchLoadableData;
 }

src/components/BlockBase/BlockBase.tsx

@@ -9,7 +9,6 @@ import {InnerContext} from '../../context/innerContext';
 import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
 import {Grid} from '../../grid';
 import {
-    Block,
     BlockType,
     BlockTypes,
     CustomConfig,
@@ -27,6 +26,8 @@ import {
     getCustomHeaderTypes,
     getCustomItems,
     getCustomSubBlockTypes,
+    getHeaderBlock,
+    getOrderedBlocks,
     getThemedValue,
 } from '../../utils';
 
@@ -71,6 +72,9 @@ export const Constructor = (props: PageConstructorProps) => {
                 },
                 loadables: custom?.loadable,
                 shouldRenderBlock,
+                customization: {
+                    decorators: custom?.decorators,
+                },
             },
         }),
         [custom, shouldRenderBlock],
@@ -79,9 +83,8 @@ export const Constructor = (props: PageConstructorProps) => {
     const {themeValue: theme} = useContext(ThemeValueContext);
 
     const hasFootnotes = footnotes.length > 0;
-    const isHeaderBlock = (block: Block) => context.headerBlockTypes.includes(block.type);
-    const header = blocks?.find(isHeaderBlock);
-    const restBlocks = blocks?.filter((block) => !isHeaderBlock(block));
+    const header = getHeaderBlock(blocks, context.headerBlockTypes);
+    const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
     const themedBackground = getThemedValue(background, theme);
 
     return (

src/containers/Loadable/Loadable.tsx

@@ -2,6 +2,7 @@ import React, {Fragment, ReactElement, useContext} from 'react';
 
 import _ from 'lodash';
 
+import {BlockIdContext} from '../../../../context/blockIdContext';
 import {InnerContext} from '../../../../context/innerContext';
 import {Block, ConstructorItem as ConstructorItemType} from '../../../../models';
 import {getBlockKey} from '../../../../utils';
@@ -57,18 +58,20 @@ export const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) =>
             }
 
             itemElement = (
-                <ConstructorItem data={item} key={blockId} blockKey={blockId}>
+                <ConstructorItem data={item} blockKey={blockId}>
                     {children}
                 </ConstructorItem>
             );
         }
 
-        return blockTypes.includes(item.type) ? (
-            <ConstructorBlock data={item as Block} key={blockId}>
-                {itemElement}
-            </ConstructorBlock>
-        ) : (
-            itemElement
+        return (
+            <BlockIdContext.Provider value={blockId} key={blockId}>
+                {blockTypes.includes(item.type) ? (
+                    <ConstructorBlock data={item as Block}>{itemElement}</ConstructorBlock>
+                ) : (
+                    itemElement
+                )}
+            </BlockIdContext.Provider>
         );
     };
 

src/containers/PageConstructor/PageConstructor.tsx

@@ -1,32 +1,30 @@
 import React, {useContext} from 'react';
 
-import {BlockIdContext} from '../../../../context/blockIdContext';
 import {InnerContext} from '../../../../context/innerContext';
+import {BlockDecoration} from '../../../../customization/BlockDecoration';
 import {ConstructorItem as ConstructorItemType, WithChildren} from '../../../../models';
 
 export interface ConstructorItemProps {
     data: ConstructorItemType;
     blockKey: string;
 }
 
-export const ConstructorItem = ({data, blockKey, children}: WithChildren<ConstructorItemProps>) => {
+export const ConstructorItem = ({data, children}: WithChildren<ConstructorItemProps>) => {
     const {itemMap} = useContext(InnerContext);
     const {type, ...rest} = data;
 
     const Component = itemMap[type] as React.ComponentType<
         React.ComponentProps<typeof itemMap[typeof type]>
     >;
 
-    return (
-        <BlockIdContext.Provider value={blockKey}>
-            <Component {...rest}>{children}</Component>
-        </BlockIdContext.Provider>
-    );
+    return <Component {...rest}>{children}</Component>;
 };
 
 export const ConstructorHeader = ({
     data,
     blockKey,
 }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => (
-    <ConstructorItem data={data} key={data.type} blockKey={blockKey} />
+    <BlockDecoration id={data.type}>
+        <ConstructorItem data={data} key={data.type} blockKey={blockKey} />
+    </BlockDecoration>
 );

src/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {ItemMap} from '../../containers/PageConstructor/PageConstructor';
-import {LoadableConfig, ShouldRenderBlock} from '../../models';
+import {CustomConfig, LoadableConfig, ShouldRenderBlock} from '../../models';
 
 export interface InnerContextType {
     blockTypes: string[];
@@ -10,6 +10,7 @@ export interface InnerContextType {
     itemMap: ItemMap;
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
+    customization?: Pick<CustomConfig, 'decorators'>;
 }
 
 export const InnerContext = React.createContext<InnerContextType>({