@redneckz/wildless-cms-uni-blocks 0.6.19 → 0.6.21

package/src/components/ContentPage/ContentPage.page.json

@@ -19,17 +19,138 @@
   "style": ["bg-main-divider"],
   "likeControl": true,
   "slots": {
-    "header": {
-      "style": ["mb-5", "shadow-[0_8px_32px_0px_#00000014]"],
-      "blocks": [
-        {
-          "type": "Header",
-          "content": {
-            "defaultLocation": "Москва"
-          }
+    "header": [
+      {
+        "type": "Header",
+        "content": {
+          "defaultLocation": "Москва"
         }
-      ]
-    }
+      }
+    ],
+    "footer": [
+      {
+        "type": "Footer",
+        "style": ["col-span-12"],
+        "content": {
+          "topItems": [
+            {
+              "href": "https://rshb.ru/",
+              "text": "О банке",
+              "target": "_blank",
+              "items": [
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "О банке"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Новости"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Офисы и отделения"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Карьера в банке"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Пресс-центр"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Кредитным организациям"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Закупки"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Премиальным клиентам"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Непрофильные/Профильные нецелевые активы"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Инсайдерам"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Противодействие коррупции"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Меры безопасности"
+                },
+                {
+                  "href": "https://rshb.ru/",
+                  "text": "Залоговое имущество"
+                }
+              ]
+            }
+          ],
+          "contacts": [
+            {
+              "text": "+7 (495) 787-7-787",
+              "description": "Для звонков из-за границы",
+              "type": "tel"
+            },
+            {
+              "text": "8 (800) 100-01-00",
+              "description": "По России",
+              "type": "tel"
+            },
+            {
+              "text": "7787",
+              "description": "Абонентам МТС, Мегафон, Билайн и Tele21",
+              "type": "tel"
+            }
+          ],
+          "documents": [
+            {
+              "text": "Информация о процентных ставках по договорам банковского вклада с физическими лицами",
+              "href": "https://rshb.ru/",
+              "target": "_blank"
+            },
+            {
+              "text": "Раскрытие информации профессиональным участником рынка ценных бумаг",
+              "href": "https://rshb.ru/",
+              "target": "_blank"
+            },
+            {
+              "text": "Раскрытие информации",
+              "href": "https://rshb.ru/",
+              "target": "_blank"
+            },
+            {
+              "text": "Удостоверяющий центр",
+              "href": "https://rshb.ru/",
+              "target": "_blank"
+            },
+            {
+              "text": "Финансовая культура",
+              "href": "https://rshb.ru/",
+              "target": "_blank"
+            }
+          ],
+          "socialMedia": [
+            {
+              "href": "https://vk.com"
+            },
+            {
+              "href": "https://ok.ru"
+            },
+            {
+              "href": "https://t.me"
+            }
+          ]
+        }
+      }
+    ]
   },
   "blocks": [
     {
@@ -2224,129 +2345,6 @@
     {
       "type": "SafeDepositRental",
       "style": ["col-span-12"]
-    },
-
-    {
-      "type": "Footer",
-      "style": ["col-span-12"],
-      "content": {
-        "topItems": [
-          {
-            "href": "https://rshb.ru/",
-            "text": "О банке",
-            "target": "_blank",
-            "items": [
-              {
-                "href": "https://rshb.ru/",
-                "text": "О банке"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Новости"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Офисы и отделения"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Карьера в банке"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Пресс-центр"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Кредитным организациям"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Закупки"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Премиальным клиентам"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Непрофильные/Профильные нецелевые активы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Инсайдерам"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Противодействие коррупции"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Меры безопасности"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Залоговое имущество"
-              }
-            ]
-          }
-        ],
-        "contacts": [
-          {
-            "text": "+7 (495) 787-7-787",
-            "description": "Для звонков из-за границы",
-            "type": "tel"
-          },
-          {
-            "text": "8 (800) 100-01-00",
-            "description": "По России",
-            "type": "tel"
-          },
-          {
-            "text": "7787",
-            "description": "Абонентам МТС, Мегафон, Билайн и Tele21",
-            "type": "tel"
-          }
-        ],
-        "documents": [
-          {
-            "text": "Информация о процентных ставках по договорам банковского вклада с физическими лицами",
-            "href": "https://rshb.ru/",
-            "target": "_blank"
-          },
-          {
-            "text": "Раскрытие информации профессиональным участником рынка ценных бумаг",
-            "href": "https://rshb.ru/",
-            "target": "_blank"
-          },
-          {
-            "text": "Раскрытие информации",
-            "href": "https://rshb.ru/",
-            "target": "_blank"
-          },
-          {
-            "text": "Удостоверяющий центр",
-            "href": "https://rshb.ru/",
-            "target": "_blank"
-          },
-          {
-            "text": "Финансовая культура",
-            "href": "https://rshb.ru/",
-            "target": "_blank"
-          }
-        ],
-        "socialMedia": [
-          {
-            "href": "https://vk.com"
-          },
-          {
-            "href": "https://ok.ru"
-          },
-          {
-            "href": "https://t.me"
-          }
-        ]
-      }
     }
   ]
 }

package/src/components/ContentPage/ContentPage.tsx

@@ -1,12 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockAncestors, BlockDecorator } from '../../model/BlockDecorator';
+import type { BlockDecorator } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
-import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import type { ContentPageDef } from '../../model/ContentPageDef';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { style2className } from '../../utils/style2className';
 import { LikeControl } from '../LikeControl/LikeControl';
 import type { ContentPageContext } from './ContentPageContext';
-import { renderBlock } from './renderBlock';
+import { RenderBlockOptions } from './renderBlock';
+import { renderBlocksList } from './renderBlockList';
+import { renderSlots } from './renderSlots';
 
 interface ContentPageProps extends UniBlockProps {
   blocksRegistry: BlocksRegistry;
@@ -17,26 +19,35 @@ interface ContentPageProps extends UniBlockProps {
 const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
   render({ blockClassName, block });
 
-export const ContentPage = JSX<ContentPageProps>((props) => {
-  const { className = '', context, data = {} } = props;
+export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((props) => {
+  const { className = '', blocksRegistry, blockDecorator, context, data = {} } = props;
 
   const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
 
-  const blocksListRenderer = renderBlocksList(props);
+  const options: RenderBlockOptions = {
+    key: '',
+    blocksRegistry,
+    page: data,
+    blockDecorator: blockDecorator || defaultBlockDecorator,
+    context,
+  };
+
+  const pageSlots = renderSlots({ slots, parent: data, options });
 
   return (
     <section
       className={`relative ${style2className(pageStyle)} ${className}`}
       data-theme={colorPalette}
     >
-      {slots?.header?.blocks?.length ? (
-        <div className={`${style2className(slots.header.style)}`}>
-          {blocksListRenderer(slots.header.blocks, ['header'])}
-        </div>
+      {pageSlots?.header ? (
+        <div className="mb-5 shadow-[0_8px_32px_0px_#00000014]">{pageSlots.header}</div>
       ) : null}
 
       {blocks?.length ? (
-        <div className="container grid grid-cols-12 gap-1">{blocksListRenderer(blocks)}</div>
+        <div className="container grid grid-cols-12 gap-1">
+          {renderBlocksList({ blocks, parent: data, options })}
+          {pageSlots?.footer ? pageSlots.footer : null}
+        </div>
       ) : null}
 
       {likeControl ? renderLikeControl(context) : null}
@@ -44,22 +55,8 @@ export const ContentPage = JSX<ContentPageProps>((props) => {
   );
 });
 
-function renderBlocksList({ blocksRegistry, data, blockDecorator, context }: ContentPageProps) {
-  return (blocks: BlockDef[], ancestors?: BlockAncestors) =>
-    blocks.map((block, i) =>
-      renderBlock(
-        block,
-        {
-          key: `${block.type || '#'}-${i}`,
-          blocksRegistry,
-          page: data || {},
-          blockDecorator: blockDecorator || defaultBlockDecorator,
-          context,
-        },
-        ancestors,
-      ),
-    );
-}
+ContentPage.childrenTypes = [];
+ContentPage.slots = () => ['header', 'footer'];
 
 function renderLikeControl(context: ContentPageContext) {
   return (

package/src/components/ContentPage/mapSlot.ts

@@ -0,0 +1,17 @@
+import type { BlockDef, Slot } from '../../model/ContentPageDef';
+
+export const mapSlot =
+  (mapper: (blocks?: BlockDef[]) => BlockDef[]) =>
+  <S extends Slot>(slot: S): S => ({
+    ...slot,
+    blocks: mapper(slot.blocks),
+    slots: slot.slots
+      ? Object.entries(slot.slots).reduce(
+          (res, [slotKey, slotBlocks]) => ({
+            ...res,
+            [slotKey]: mapper(slotBlocks),
+          }),
+          {},
+        )
+      : {},
+  });

package/src/components/ContentPage/normalizeBlock.mobile.ts

@@ -1,7 +1,29 @@
-import { BlockDef } from '../../model/ContentPageDef';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { BlockDef, Slot } from '../../model/ContentPageDef';
+import { mapSlot } from './mapSlot';
 
-export function normalizeBlock(block: BlockDef) {
-  const { mobile, ...rest } = block;
+export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
+  const { mobile, ...rest } = (block || {}) as BlockDef;
 
-  return mobile ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } } : block;
+  const normalizedBlock = mobile
+    ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } }
+    : block;
+
+  return {
+    ...mapSlot((blocks) => filterBlocks(blocks, blocksRegistry))(normalizedBlock || {}),
+  } as S;
 }
+
+const filterBlocks = (blocks?: BlockDef[], blocksRegistry?: BlocksRegistry) =>
+  blocks
+    ? blocks
+        ?.filter(
+          (block) =>
+            blocksRegistry &&
+            (block?.type || block?.mobile?.type || '') in blocksRegistry &&
+            !block.mobile?.hidden,
+        )
+        .map((block) => ({
+          ...normalizeBlock(block, blocksRegistry),
+        }))
+    : [];

package/src/components/ContentPage/normalizeBlock.ts

@@ -1,8 +1,21 @@
-import { BlockDef } from '../../model/ContentPageDef';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { BlockDef, Slot } from '../../model/ContentPageDef';
+import { mapSlot } from './mapSlot';
 
-export function normalizeBlock(block: BlockDef) {
+export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { mobile, ...rest } = block;
+  const { mobile, ...rest } = (block || {}) as BlockDef;
 
-  return rest;
+  return {
+    ...mapSlot((blocks) => filterBlocks(blocks, blocksRegistry))({ ...rest }),
+  } as S;
 }
+
+const filterBlocks = (blocks?: BlockDef[], blocksRegistry?: BlocksRegistry) =>
+  blocks
+    ? blocks
+        .filter((block) => blocksRegistry && (block?.type || '') in blocksRegistry)
+        .map((block) => ({
+          ...normalizeBlock(block, blocksRegistry),
+        }))
+    : [];

package/src/components/ContentPage/normalizePage.ts

@@ -1,6 +1,6 @@
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
-import type { ContentPageDef, Slot } from '../../model/ContentPageDef';
-import { filterBlocks } from './filterBlocks';
+import type { ContentPageDef } from '../../model/ContentPageDef';
+import { normalizeBlock } from './normalizeBlock';
 
 export const normalizePage =
   (blocksRegistry: BlocksRegistry) =>
@@ -9,22 +9,5 @@ export const normalizePage =
       return undefined;
     }
 
-    const { blocks = [], slots } = contentPage;
-
-    return {
-      ...contentPage,
-      blocks: filterBlocks(blocks, blocksRegistry),
-      slots:
-        slots &&
-        Object.keys(slots).reduce(
-          (res, key) => ({
-            ...res,
-            [key]: {
-              ...slots[key],
-              blocks: filterBlocks((slots[key] as Slot).blocks || [], blocksRegistry),
-            },
-          }),
-          {},
-        ),
-    };
+    return normalizeBlock(contentPage, blocksRegistry);
   };

package/src/components/ContentPage/renderBlock.tsx

@@ -1,11 +1,12 @@
-import { BlockAncestors, BlockDecorator, DEFAULT_ANCESTORS } from '../../model/BlockDecorator';
+import { BlockAncestors, BlockDecorator } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
-import type { VNode } from '../../model/VNode';
 import { style2className } from '../../utils/style2className';
 import type { ContentPageContext } from './ContentPageContext';
+import { renderBlocksList } from './renderBlockList';
+import { renderSlots } from './renderSlots';
 
-interface RenderBlockOptions {
+export interface RenderBlockOptions {
   key: string;
   page: ContentPageDef;
   blockDecorator: BlockDecorator;
@@ -13,15 +14,15 @@ interface RenderBlockOptions {
   context: ContentPageContext;
 }
 
-const defaultChildRenderer = (_: VNode) => _;
+export interface RenderBlockProps {
+  block?: BlockDef;
+  options: RenderBlockOptions;
+  ancestors?: BlockAncestors; // Recursion context
+}
 
-export function renderBlock(
-  block: BlockDef,
-  options: RenderBlockOptions,
-  ancestors: BlockAncestors = DEFAULT_ANCESTORS, // Recursion context
-) {
-  const { key, page, blockDecorator, blocksRegistry, context } = options;
-  const { type, blocks: childBlocks } = block;
+export function renderBlock({ block = {}, options, ancestors = [] }: RenderBlockProps) {
+  const { key, page, blockDecorator, blocksRegistry = {}, context } = options;
+  const { type, slots, blocks: childBlocks } = block;
 
   if (!(type && type in blocksRegistry)) {
     console.warn(`No block with "${type}" is registered`);
@@ -29,13 +30,9 @@ export function renderBlock(
 
   const BlockComponent = type && blocksRegistry[type];
 
-  const { renderChild = defaultChildRenderer } = BlockComponent || {};
-  const renderChildBlock = (_: BlockDef, j: number) =>
-    renderChild(
-      renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]),
-      j,
-    );
-  const children = childBlocks?.length ? childBlocks.map(renderChildBlock) : null;
+  const subBlockRenderProps = { parent: block, options, ancestors };
+  const children = renderBlocksList({ ...subBlockRenderProps, blocks: childBlocks });
+  const blockSlots = slots ? renderSlots({ ...subBlockRenderProps, slots }) : {};
 
   return blockDecorator(
     {
@@ -56,6 +53,7 @@ export function renderBlock(
             version={version}
             anchor={anchor}
             labels={labels}
+            slots={blockSlots}
             {...content}
           >
             {children}

package/src/components/ContentPage/renderBlockList.tsx

@@ -0,0 +1,39 @@
+import type { SlotName } from '../../model/BlockDecorator';
+import { BlockAncestors, DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
+import type { BlockDef, Slot } from '../../model/ContentPageDef';
+import type { VNode } from '../../model/VNode';
+import { renderBlock, RenderBlockOptions } from './renderBlock';
+
+interface RenderBlockListProps {
+  blocks?: BlockDef[];
+  parent: Slot;
+  slotName?: SlotName;
+  options: RenderBlockOptions;
+  ancestors?: BlockAncestors; // Recursion context
+}
+
+const defaultChildRenderer = (_: VNode) => _;
+
+export function renderBlocksList({
+  blocks = [],
+  parent,
+  slotName = DEFAULT_SLOT_NAME,
+  options,
+  ancestors = [],
+}: RenderBlockListProps): Record<string, VNode> {
+  const { blocksRegistry = {} } = options;
+  const { type } = parent as BlockDef;
+  const BlockComponent = type && blocksRegistry[type];
+  const { renderChild = defaultChildRenderer } = BlockComponent || {};
+
+  return blocks.map((_: BlockDef, j: number) =>
+    renderChild(
+      renderBlock({
+        block: _,
+        options: { ...options, key: `${options.key ? options.key : _.type}-${j}` },
+        ancestors: [...ancestors, [parent, slotName]],
+      }),
+      j,
+    ),
+  );
+}

package/src/components/ContentPage/renderSlots.tsx

@@ -0,0 +1,33 @@
+import { BlockAncestors } from '../../model/BlockDecorator';
+import type { BlockDef, Slot } from '../../model/ContentPageDef';
+import type { VNode } from '../../model/VNode';
+import type { RenderBlockOptions } from './renderBlock';
+import { renderBlocksList } from './renderBlockList';
+
+interface RenderSlotsProps {
+  slots?: Record<string, BlockDef[]>;
+  parent: Slot;
+  options: RenderBlockOptions;
+  ancestors?: BlockAncestors;
+}
+
+export function renderSlots({
+  slots = {},
+  parent,
+  options,
+  ancestors = [],
+}: RenderSlotsProps): Record<string, VNode> {
+  return Object.entries(slots).reduce(
+    (res, [slotName, slotBlocks]) => ({
+      ...res,
+      [slotName]: renderBlocksList({
+        blocks: slotBlocks,
+        parent,
+        slotName,
+        options,
+        ancestors,
+      }),
+    }),
+    {},
+  );
+}

package/src/model/BlockDecorator.ts

@@ -1,10 +1,10 @@
-import type { BlockDef, Slot, SlotsMap } from './ContentPageDef';
+import type { BlockDef, Slot } from './ContentPageDef';
 
 export const DEFAULT_SLOT_NAME = null;
 
-export type BlockAncestors = [keyof SlotsMap | typeof DEFAULT_SLOT_NAME, ...Slot[]];
-
-export const DEFAULT_ANCESTORS: BlockAncestors = [DEFAULT_SLOT_NAME];
+export type SlotName = string | typeof DEFAULT_SLOT_NAME;
+export type BlockAncestorItem = [Slot, SlotName];
+export type BlockAncestors = BlockAncestorItem[];
 
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;

package/src/model/BlocksRegistry.ts

@@ -1,3 +1,3 @@
 import type { JSXBlock } from './JSXBlock';
 
-export type BlocksRegistry<BlockProps = Record<string, any>> = Record<string, JSXBlock<BlockProps>>;
+export type BlocksRegistry = Record<string, JSXBlock<any>>;

package/src/model/ContentPageDef.ts

@@ -22,10 +22,7 @@ export interface BlockDef extends BaseBlockDef {
 export interface Slot {
   style?: string[];
   blocks?: BlockDef[];
-}
-
-export interface SlotsMap {
-  header?: Slot;
+  slots?: Record<string, BlockDef[]>;
 }
 
 export interface ContentPageMeta {
@@ -44,7 +41,6 @@ export interface ContentPageMeta {
 
 export interface ContentPageDef extends ContentPageMeta, Slot {
   _customPageType?: string;
-  slots?: SlotsMap;
   fallback?: Record<string, unknown>;
   likeControl?: boolean;
   colorPalette?: ColorPalette;