@redneckz/wildless-cms-uni-blocks 0.6.18 → 0.6.20

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,

package/src/components/Bonus/Bonus.tsx

@@ -32,7 +32,7 @@ export const Bonus = JSX<BonusProps>((props) => {
                 return (
                   <div
                     key={String(i)}
-                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
+                    className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
                   >
                     <div className="flex justify-between w-full">
                       <div className="flex flex-col justify-between mr-4">

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

@@ -19,17 +19,14 @@
   "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": "Москва"
         }
-      ]
-    }
+      }
+    ]
   },
   "blocks": [
     {

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,34 @@ 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 })}
+        </div>
       ) : null}
 
       {likeControl ? renderLikeControl(context) : null}
@@ -44,22 +54,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'];
 
 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/components/ProductBlock/renderBackwardButton.tsx

@@ -22,7 +22,11 @@ export function renderBackwardButton(
         href={href}
         target={target}
       >
-        <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
+        <Img
+          className="w-4 h-4"
+          image={{ ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion }}
+          asSVG
+        />
       </Button>
       {text ? <span className="text-m">{text}</span> : null}
     </div>

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -47,7 +47,12 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
       <BlockWrapper context={context} className={className} {...rest}>
         <div className="font-sans bg-white px-8 py-12">
           {title ? (
-            <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+            <Heading
+              title={title}
+              headingType="h3"
+              as="h2"
+              className="text-primary-text mb-2.5 text-center"
+            />
           ) : null}
           <SafeDepositRentalForm
             regions={regions}