@redneckz/wildless-cms-uni-blocks 0.2.93 → 0.2.97

package/src/components/ContentPage/ContentPage.tsx

@@ -3,6 +3,7 @@ import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
+import { ContentPageContext } from './ContentPageContext';
 
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;
@@ -20,12 +21,21 @@ export type JSXBlock = (
   context?: any,
 ) => any;
 
+export type BlocksRegistry = Record<string, JSXBlock>;
+
 export interface ContentPageProps extends UniBlockProps {
-  blocksRegistry: Record<string, JSXBlock>;
+  blocksRegistry: BlocksRegistry;
   data: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }
 
+export interface RenderBlockFunc {
+  block: BlockDef;
+  blockDecorator: BlockDecorator;
+  blocksRegistry: BlocksRegistry;
+  context: ContentPageContext;
+}
+
 const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
   render({ blockClassName, block });
 
@@ -34,14 +44,32 @@ export const ContentPage = JSX<ContentPageProps>(
     className,
     context,
     blocksRegistry,
-    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
+    data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
     blockDecorator = defaultBlockDecorator,
   }) => {
+    const { header } = slots;
+
     return (
-      <section className="relative" data-theme={colorPalette}>
-        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`}>
-          {blocks?.length ? blocks.map(renderBlock) : null}
-        </div>
+      <section
+        className={`relative ${style2className(pageStyle)} ${className || ''}`}
+        data-theme={colorPalette}
+      >
+        {header?.blocks?.length ? (
+          <div className={`${style2className(header?.style)}`}>
+            {header.blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
+        {blocks?.length ? (
+          <div className="container grid grid-cols-12 gap-1">
+            {blocks.map((block, i) =>
+              renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+            )}
+          </div>
+        ) : null}
+
         {likeControl && (
           <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
             <LikeControl
@@ -52,39 +80,46 @@ export const ContentPage = JSX<ContentPageProps>(
         )}
       </section>
     );
-
-    function renderBlock(block: BlockDef, i: number) {
-      const { type } = block;
-      if (!(type in blocksRegistry)) {
-        console.warn(`No block with "${type}" is registered`);
-      }
-
-      const BlockComponent = blocksRegistry[type] || Placeholder;
-      return blockDecorator(
-        {
-          blockClassName: style2className(block.style),
-          block,
-          render: (props) => {
-            const { version, content, blocks } = props.block;
-            return (
-              <BlockComponent
-                key={`${type}-${i}`}
-                className={props.blockClassName}
-                version={version}
-                context={context}
-                {...content}
-              >
-                {blocks?.length ? blocks.map(renderBlock) : null}
-              </BlockComponent>
-            );
-          },
-        },
-        `block-${i}`,
-      );
-    }
   },
 );
 
+function renderBlock(
+  { block, blockDecorator, blocksRegistry, context }: RenderBlockFunc,
+  i: number,
+) {
+  const { type } = block;
+  if (!(type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = blocksRegistry[type] || Placeholder;
+  return blockDecorator(
+    {
+      blockClassName: style2className(block.style),
+      block,
+      render: (props) => {
+        const { version, content, blocks } = props.block;
+        return (
+          <BlockComponent
+            key={`${type}-${i}`}
+            className={props.blockClassName}
+            version={version}
+            context={context}
+            {...content}
+          >
+            {blocks?.length
+              ? blocks.map((block, i) =>
+                  renderBlock({ block, blockDecorator, blocksRegistry, context }, i),
+                )
+              : null}
+          </BlockComponent>
+        );
+      },
+    },
+    `block-${i}`,
+  );
+}
+
 function style2className(style: string[] | undefined | null): string {
   return style ? style.join(' ') : '';
 }

package/src/components/ContentPage/toMobilePage.ts

@@ -1,13 +1,30 @@
 import type { BlockDef, ContentPageDef } from '../../types';
 
 export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
-  const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+  const { blocks, slots } = contentPage;
+
   return {
     ...contentPage,
-    blocks,
+    blocks: getMobileBlocks(blocks),
+    slots:
+      slots &&
+      Object.keys(slots).reduce(
+        (res, key) => ({
+          ...res,
+          [key]: {
+            ...slots[key],
+            blocks: getMobileBlocks(slots[key].blocks),
+          },
+        }),
+        {},
+      ),
   };
 }
 
+function getMobileBlocks(blocks?: BlockDef[]) {
+  return blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+}
+
 function toMobileBlock(block: BlockDef): BlockDef {
   const { mobile } = block;
   if (mobile) {

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -1,4 +1,12 @@
 import { CreditCalculator } from './CreditCalculator';
 import { context } from '../../setup-fixture';
 
-export default <CreditCalculator context={context} directoryName="credit-calculator-data" />;
+export default (
+  <div className="container grid grid-cols-12">
+    <CreditCalculator
+      className="col-span-12"
+      context={context}
+      directoryName="credit-calculator-data"
+    />
+  </div>
+);

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -27,7 +27,7 @@ const STEP_MONEY = 1000;
 const STEP_MONTHS = 1;
 const DEFAULT_PAYMENT_TYPE = 'annuity';
 
-const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
+const borderStyle = 'border-solid border-[3px] border-primary-main rounded-md';
 
 export const CreditCalculator = JSX<CreditCalculatorProps>(
   ({ context, className, directoryName }) => {
@@ -72,10 +72,12 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
     }
 
     return (
-      <section className={`font-sans text-primary-text bg-white p-4 ${className}`}>
-        <div className={`box-border p-12 flex flex-col justify-between ${borderStyle}`}>
-          <div className="flex justify-between">
-            <div className="grow mr-11">
+      <section className={`font-sans text-primary-text bg-white p-4 w-[847px] ${className || ''}`}>
+        <div
+          className={`box-border p-[49px] pr-[53px] flex flex-col justify-between ${borderStyle}`}
+        >
+          <div className="flex justify-between ">
+            <div className="grow mr-[42px] w-[465px]">
               <InputRange
                 title="Желаемая сумма кредита, ₽"
                 items={[
@@ -89,6 +91,7 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
                 onChange={setMoneyValue}
               />
               <InputRange
+                className="mt-[23px]"
                 title="Срок кредита, месяцев"
                 items={['Или выберите из предложенных вариантов ниже']}
                 min={minMonths}
@@ -106,14 +109,14 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
                 onChange={setIsAnnuityChecked}
               />
               <Checkbox
-                className="mb-4"
+                className="mt-3 mb-7"
                 text="Комплексная страховая защита"
                 checked={isInsuranceChecked}
                 onChange={setIsInsuranceChecked}
               />
             </div>
-            <div className="p-9 bg-primary-main rounded-md text-white">
-              <div className="text-base mb-5">Наше предложение</div>
+            <div className="basis-[226px] shrink-0 box-border h-fit p-9 bg-primary-main rounded-md text-white">
+              <div className="text-base mb-[18px]">Наше предложение</div>
               <div className="text-sm opacity-60">Ежемесячный платёж</div>
               <div className="text-lg mb-3">
                 {addSpacesBetweenNumbers(Math.round(montlyPayment))} ₽

package/src/components/ExchangeRateTile/ExchangeRateTile.fixture.tsx

@@ -4,7 +4,7 @@ import { ExchangeRateTile } from './ExchangeRateTile';
 
 export default {
   default: (
-    <div className="grid grid-cols-12">
+    <div className="container grid grid-cols-12">
       <ExchangeRateTile context={context} className="col-span-4" />
     </div>
   ),