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

package/mobile/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/mobile/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/mobile/src/components/ContentPage/normalizeBlock.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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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;

package/mobile/src/model/JSXBlock.ts

@@ -1,6 +1,6 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
 import type { ContentPageContext } from '../components/ContentPage/ContentPageContext';
-import type { BlockAncestors } from './BlockDecorator';
+import type { BlockAncestors, SlotName } from './BlockDecorator';
 import type { ContentPageDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
@@ -11,6 +11,7 @@ export interface UniBlockProps {
   ancestors?: BlockAncestors;
   labels?: string[];
   anchor?: string;
+  slots?: Record<string, VNode>;
 }
 
 export type JSXBlock<BlockProps = Record<string, any>> = UNIComponent<
@@ -19,5 +20,6 @@ export type JSXBlock<BlockProps = Record<string, any>> = UNIComponent<
   VNode | VNode[]
 > & {
   childrenTypes?: string[];
+  slots?: (props: BlockProps) => SlotName[];
   renderChild?: (child: VNode, i: number) => VNode;
 };

package/mobile/src/model/getParentBlockDef.ts

@@ -2,7 +2,11 @@ import type { BlockAncestors } from './BlockDecorator';
 import type { BlockDef } from './ContentPageDef';
 
 export function getParentBlockDef(ancestors: BlockAncestors | undefined, type?: string): BlockDef {
-  const [, ...blocks] = ancestors || [];
+  const [block] =
+    (ancestors || [])
+      .map((item) => item)
+      .reverse()
+      .find(([_]) => _ && 'type' in _ && (!type || type === (_ as BlockDef).type)) || [];
 
-  return blocks.reverse().find((_) => !type || type === (_ as BlockDef)?.type) || {};
+  return block || {};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.19",
+  "version": "0.6.21",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Accordion/Accordion.fixture.mobile.tsx

@@ -1,4 +1,5 @@
-import type { BlockDef } from '../../model/ContentPageDef';
+import { DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
+import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
 import { context } from '../../react/setup-fixture';
 import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { Headline } from '../Headline/Headline';
@@ -10,6 +11,8 @@ import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 
+const page = {} as ContentPageDef;
+
 const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock context={context} {...TEXT_BLOCK} />;
 
 const HEADLINE_ACCORDION_BLOCK = <Headline context={context} {...HEADLINE} />;
@@ -30,7 +33,10 @@ const ACCORDION_BLOCK_DEF: BlockDef = {
 export const ACCORDION_ITEM = (
   <AccordionItem
     context={context}
-    ancestors={[null, ACCORDION_BLOCK_DEF]}
+    ancestors={[
+      [page, DEFAULT_SLOT_NAME],
+      [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
+    ]}
     label="Accordion label 1"
     labelIcon={{ icon: 'CardIcon' }}
   >
@@ -45,14 +51,20 @@ export default {
         {ACCORDION_ITEM}
         <AccordionItem
           context={context}
-          ancestors={[null, ACCORDION_BLOCK_DEF]}
+          ancestors={[
+            [page, DEFAULT_SLOT_NAME],
+            [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
+          ]}
           label="Accordion label 2"
         >
           {[HEADLINE_ACCORDION_BLOCK]}
         </AccordionItem>
         <AccordionItem
           context={context}
-          ancestors={[null, ACCORDION_BLOCK_DEF]}
+          ancestors={[
+            [page, DEFAULT_SLOT_NAME],
+            [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
+          ]}
           label="Accordion label 3"
         >
           {[LINK_DOCS_ACCORDION_BLOCK]}

package/src/components/Blocks.mobile.ts

@@ -1,3 +1,4 @@
+import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -15,7 +16,7 @@ import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 
-export const Blocks = {
+export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
   ComparisonTable,

package/src/components/Blocks.ts

@@ -1,3 +1,4 @@
+import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
@@ -38,7 +39,7 @@ import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 
-export const Blocks = {
+export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
   BenefitsBlock,