fix: fix types conflict between content_transformer and page_content

src/containers/Loadable/Loadable.tsx

@@ -5,7 +5,7 @@ import blockCn from 'bem-cn-lite';
 
 import ErrorWrapper from '../../components/ErrorWrapper/ErrorWrapper';
 import {
-    ConstructorItem,
+    ConstructorBlock,
     CustomItem,
     FetchLoadableData,
     LoadableData,
@@ -27,7 +27,7 @@ export interface LoadableState {
 export interface LoadableComponentsProps extends Omit<PropsWithChildren<LoadableProps>, 'source'> {
     Component: CustomItem;
     ChildComponent: CustomItem;
-    block: ConstructorItem;
+    block: ConstructorBlock;
     blockKey: string;
     fetch: FetchLoadableData;
 }

src/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.tsx

@@ -4,11 +4,15 @@ import _ from 'lodash';
 
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import {BlockDecoration} from '../../../../customization/BlockDecoration';
-import {Block, BlockDecorationProps, WithChildren} from '../../../../models';
+import {
+    BlockDecorationProps,
+    ConstructorBlock as ConstructorBlockType,
+    WithChildren,
+} from '../../../../models';
 import {block} from '../../../../utils';
 
 interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
-    data: Block;
+    data: ConstructorBlockType;
 }
 
 const b = block('constructor-block');

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

@@ -4,22 +4,27 @@ import _ from 'lodash';
 
 import {InnerContext} from '../../../../context/innerContext';
 import {BlockDecoration} from '../../../../customization/BlockDecoration';
-import {Block, BlockType, ConstructorItem as ConstructorItemType} from '../../../../models';
+import {
+    BlockType,
+    ConstructorBlock as ConstructorBlockType,
+    LoadableProps,
+    SubBlock,
+} from '../../../../models';
 import {getBlockKey} from '../../../../utils';
 import {ConstructorBlock} from '../ConstructorBlock/ConstructorBlock';
 import {ConstructorItem} from '../ConstructorItem';
 import {ConstructorLoadable} from '../ConstructorLoadable';
 
 export interface ConstructorBlocksProps {
-    items: ConstructorItemType[];
+    items: ConstructorBlockType[];
 }
 
 export const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) => {
     const {blockTypes, loadables, itemMap, shouldRenderBlock} = useContext(InnerContext);
 
     const renderer = (
         parentId = '',
-        item: ConstructorItemType,
+        item: ConstructorBlockType,
         index: number,
     ): ReactElement | null => {
         if (!itemMap[item.type]) {
@@ -38,7 +43,7 @@ export const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) =>
         }
 
         if ('loadable' in item && item.loadable) {
-            const {source, serviceId, params} = item.loadable;
+            const {source, serviceId, params} = item.loadable as LoadableProps;
             const config = _.get(loadables, source);
 
             if (!config) {
@@ -58,7 +63,7 @@ export const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) =>
         } else {
             let children;
             if ('children' in item && item.children) {
-                children = item.children.map(renderer.bind(null, blockId));
+                children = (item.children as SubBlock[]).map(renderer.bind(null, blockId));
             }
 
             itemElement = (
@@ -71,7 +76,7 @@ export const ConstructorBlocks: React.FC<ConstructorBlocksProps> = ({items}) =>
         return blockTypes.includes(item.type) ? (
             //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
             // components relying on constructor inner structure like Slider or blog-constructor will be refactored
-            <ConstructorBlock data={item as Block} key={blockId} index={index}>
+            <ConstructorBlock data={item} key={blockId} index={index}>
                 {itemElement}
             </ConstructorBlock>
         ) : (

src/containers/PageConstructor/components/ConstructorItem/ConstructorItem.tsx

@@ -3,10 +3,10 @@ import React, {useContext} from 'react';
 import {BlockIdContext} from '../../../../context/blockIdContext';
 import {InnerContext} from '../../../../context/innerContext';
 import {BlockDecoration} from '../../../../customization/BlockDecoration';
-import {BlockType, ConstructorItem as ConstructorItemType, WithChildren} from '../../../../models';
+import {BlockType, ConstructorBlock, WithChildren} from '../../../../models';
 
 export interface ConstructorItemProps {
-    data: ConstructorItemType;
+    data: ConstructorBlock;
     blockKey: string;
 }
 

src/editor/components/BlockForm/BlockForm.tsx

@@ -4,13 +4,13 @@ import {DynamicField, SimpleVerticalAccordeon, Spec} from '@gravity-ui/dynamic-f
 import _ from 'lodash';
 import {Form as FinalForm, FormSpy} from 'react-final-form';
 
-import {Block} from '../../../models';
+import {Block, ConstructorBlock} from '../../../models';
 import {dynamicConfig} from '../../dynamic-forms-custom/config';
 import {CustomSpec} from '../../dynamic-forms-custom/parser/types';
 import usePreviousValue from '../../hooks/usePreviousValue';
 
 interface BlockFormProps {
-    data: Block;
+    data: ConstructorBlock;
     spec: CustomSpec;
     onChange: (data: Block) => void;
     onSelect: () => void;

src/editor/store/reducer.ts

@@ -1,4 +1,4 @@
-import {Block, PageContent, Theme} from '../../models';
+import {ConstructorBlock, PageContent, Theme} from '../../models';
 import {ViewModeItem} from '../types';
 
 import {addBlock, changeBlocksOrder, duplicateBlock, getErrorBoundaryState} from './utils';
@@ -19,7 +19,7 @@ interface OrderBlockParams {
 }
 
 interface AddBlockParams {
-    block: Block;
+    block: ConstructorBlock;
     index: number;
 }
 
@@ -87,7 +87,7 @@ export type EditorAction =
 // reducer
 export const reducer = (state: EditorState, action: EditorAction): EditorState => {
     const {content} = state;
-    const getNewState = (blocks: Block[], activeBlockIndex: number) => ({
+    const getNewState = (blocks: ConstructorBlock[], activeBlockIndex: number) => ({
         ...state,
         content: {
             ...content,
@@ -112,7 +112,9 @@ export const reducer = (state: EditorState, action: EditorAction): EditorState =
             const blockId = action.payload;
 
             return getNewState(
-                content.blocks.filter((_block: Block, index: number) => index !== blockId),
+                content.blocks.filter(
+                    (_block: ConstructorBlock, index: number) => index !== blockId,
+                ),
                 -1,
             );
         }

src/editor/store/utils.ts

@@ -1,18 +1,22 @@
 import _ from 'lodash';
 
-import {Block, PageContent} from '../../models';
+import {ConstructorBlock, PageContent} from '../../models';
 
 import {EditorBlockId} from './reducer';
 
-export const changeBlocksOrder = (array: Block[], oldIndex: number, newIndex: number) => {
+export const changeBlocksOrder = (
+    array: ConstructorBlock[],
+    oldIndex: number,
+    newIndex: number,
+) => {
     const result = [...array];
     const element = result.splice(oldIndex, 1)[0];
     result.splice(newIndex, 0, element);
 
     return result;
 };
 
-export const duplicateBlock = (array: Block[], index: number) => {
+export const duplicateBlock = (array: ConstructorBlock[], index: number) => {
     const result = [...array];
     result.splice(index + 1, 0, _.cloneDeep(result[index]));
 
@@ -28,7 +32,7 @@ export const getNewBlockIndex = (id: EditorBlockId, orderedBlocksCount: number)
     return typeof id === 'string' ? 0 : id + 1;
 };
 
-export const addBlock = (array: Block[], block: Block, index: number) => {
+export const addBlock = (array: ConstructorBlock[], block: ConstructorBlock, index: number) => {
     const result = [...array];
     result.splice(index, 0, block);
 

src/models/constructor.ts

@@ -2,7 +2,6 @@ import React, {PropsWithChildren} from 'react';
 
 import {
     Animatable,
-    Block,
     BlockDecorationProps,
     ConstructorItem,
     ThemedMediaProps,
@@ -17,8 +16,10 @@ export interface Menu {
     title: string;
 }
 
+export type ConstructorBlock = ConstructorItem | CustomBlock;
+
 export interface PageContent extends Animatable {
-    blocks: Block[];
+    blocks: ConstructorBlock[];
     menu?: Menu;
     background?: ThemedMediaProps;
 }
@@ -33,8 +34,6 @@ export interface CustomBlock {
     [key: string]: unknown;
 }
 
-export type ConstructorBlock = ConstructorItem | CustomBlock;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type LoadableData = any;
 export type FetchLoadableDataParams = {

src/models/customization.ts

@@ -3,7 +3,7 @@ import {PropsWithChildren} from 'react';
 import {BlockBaseProps, BlockType} from './constructor-items';
 
 export interface BlockDecorationProps extends PropsWithChildren, BlockBaseProps {
-    type: BlockType;
+    type: BlockType | string;
     index?: number;
 }
 export type BlockDecorator = (props: BlockDecorationProps) => React.ReactElement;

src/utils/blocks.ts

@@ -1,5 +1,4 @@
-import {Block, CustomConfig, PCShareSocialNetwork, TextSize} from '../models';
-import {ConstructorBlock} from '../models/constructor';
+import {ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize} from '../models';
 
 const BLOCK_ELEMENTS = [
     'div',
@@ -98,11 +97,11 @@ const getShareUrlWithParams = (url: string, params: Record<string, string | unde
     return result.toString();
 };
 
-export const getOrderedBlocks = (blocks: Block[], headerBlockTypes: string[] = []) => {
+export const getOrderedBlocks = (blocks: ConstructorBlock[], headerBlockTypes: string[] = []) => {
     return blocks.filter(({type}) => !headerBlockTypes.includes(type));
 };
 
-export const getHeaderBlock = (blocks: Block[], headerBlockTypes: string[] = []) => {
+export const getHeaderBlock = (blocks: ConstructorBlock[], headerBlockTypes: string[] = []) => {
     return blocks.find(({type}) => headerBlockTypes.includes(type));
 };