@redneckz/wildless-cms-uni-blocks 0.6.32 → 0.6.34

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -13,58 +14,52 @@ export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab
 }
 
 type InsuranceGalleryProps = {
-  tabsShift: number;
+  activeIndex: number;
   cards: CardItem[];
-  activeSlideIndex: number;
-  isLastShift: boolean;
-  setActiveSlideIndex: (index: number) => void;
+  selectedCardIndex: number;
+  onClick: (index: number) => void;
 };
 
 type InsuranceSlideProps = {
   slide: CardItem;
   i: number;
-  activeSlideIndex: number;
+  isActive: boolean;
   onClick: () => void;
 };
 
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
   ({ className = '', cards = [], button }) => {
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const [tabsShift, setTabsShift] = useState(0);
-
-    const handleNextClick = () => setTabsShift(tabsShift + 1);
-    const handlePrevClick = () => setTabsShift(tabsShift - 1);
-
-    const galleryLength = cards?.length ?? 0;
-
-    const isGalleryScrollAvailable = cards?.length > 2;
-    const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
-    const isLastShift = galleryLength === tabsShift + 2;
-    const showPrevButton = tabsShift > 0;
-    const activeHref = cards[activeSlideIndex]?.href;
+    const [selectedCardIndex, setSelectedCardIndex] = useState(0);
+    const handleSelectedCardIndex = useCallback((_: number) => setSelectedCardIndex(_), []);
+    const galleryLength = cards.length;
+    const CARD_VIEW_COUNT = 2;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: galleryLength,
+      visibleItemCount: CARD_VIEW_COUNT,
+    });
+    const { canDec, canInc } = controls;
+    const activeHref = cards[activeIndex]?.href;
 
     return (
       <section role="listitem" className={`min-w-full text-center ${className}`}>
         <div className="relative overflow-hidden">
           {galleryLength
             ? renderGallery({
-                tabsShift,
+                activeIndex,
                 cards,
-                activeSlideIndex,
-                isLastShift,
-                setActiveSlideIndex,
+                selectedCardIndex,
+                onClick: handleSelectedCardIndex,
               })
             : null}
           {renderArrows({
-            handler: [handlePrevClick, handleNextClick],
-            isShown: [showPrevButton, showNextButton],
+            ...controls,
             btnClass: ['left-[50px]', 'right-[50px]'],
             className: 'top-[62px]',
           })}
-          {showPrevButton ? (
+          {canDec ? (
             <div className="absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" />
           ) : null}
-          {showNextButton ? (
+          {canInc ? (
             <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
@@ -74,14 +69,8 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
   },
 );
 
-function renderGallery({
-  tabsShift,
-  cards,
-  activeSlideIndex,
-  isLastShift,
-  setActiveSlideIndex,
-}: InsuranceGalleryProps) {
-  const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: InsuranceGalleryProps) {
+  const tabsShiftWidth = activeIndex * 460;
   const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
 
   return (
@@ -94,8 +83,8 @@ function renderGallery({
           renderSlide({
             slide,
             i,
-            activeSlideIndex,
-            onClick: () => setActiveSlideIndex(i),
+            isActive: Boolean(i === selectedCardIndex),
+            onClick: () => onClick(i),
           }),
         )}
       </div>
@@ -103,10 +92,8 @@ function renderGallery({
   );
 }
 
-function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderSlide({ slide, i, isActive, onClick }: InsuranceSlideProps) {
+  const btnClassName = isActive
     ? 'shadow-dark-blue/42 border-primary-main'
     : `ease-in duration-300 border-main-stroke`;
 
@@ -130,7 +117,7 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
         {slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null}
         {slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null}
       </div>
-      {renderDoneIcon(isActiveBtn)}
+      {renderDoneIcon(isActive)}
     </button>
   );
 }

package/src/components/InvestmentGallery/InvestmentGallery.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { InvestmentGallery, InvestmentGalleryProps } from './InvestmentGallery';
 
 const five: Picture = {

package/src/components/InvestmentGallery/InvestmentGallery.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -17,16 +17,14 @@ const CARD_FULL_VIEW_COUNT = 1;
 
 export interface InvestmentGalleryProps extends InvestmentGalleryContent, UniBlockProps {}
 
-interface NavButtonsProps {
-  cardsCount: number;
-  activeCardIndex: number;
-  setActiveCardIndex: (number: number) => void;
-}
-
 export const InvestmentGallery = JSX<InvestmentGalleryProps>(
   ({ cards = [], className = '', title, version = 'primary', ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
-    const cardWidth = 525;
+    const cardWidth = 710;
+
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: cards.length,
+      visibleItemCount: CARD_FULL_VIEW_COUNT,
+    });
 
     return (
       <BlockWrapper
@@ -37,15 +35,15 @@ export const InvestmentGallery = JSX<InvestmentGalleryProps>(
         <div>
           <div
             className="flex duration-1000 gap-3.5"
-            style={{ transform: `translateX(-${activeCardIndex * cardWidth}px)` }}
+            style={{ transform: `translateX(-${activeIndex * cardWidth}px)` }}
             role="list"
           >
             {cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null}
           </div>
-          {renderNavButtons({
-            cardsCount: cards.length,
-            activeCardIndex,
-            setActiveCardIndex,
+          {renderArrows({
+            ...controls,
+            btnClass: ['left-8', 'right-8'],
+            className: 'top-1/2 mt-3',
           })}
         </div>
         <div
@@ -66,23 +64,3 @@ export const InvestmentGallery = JSX<InvestmentGalleryProps>(
 const renderInvestmentGalleryCard =
   (className: string, version?: BlockVersion) => (card: InvestmentGalleryCardTypes, i: number) =>
     <InvestmentGalleryCard key={String(i)} className={className} version={version} {...card} />;
-
-const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex }: NavButtonsProps) => {
-  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-  const showPrevButton = isUseSlider && activeCardIndex > 0;
-
-  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-
-  return (
-    <div>
-      {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['left-8', 'right-8'],
-        className: 'top-1/2 mt-3',
-      })}
-    </div>
-  );
-};

package/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -51,9 +50,9 @@ export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="flex flex-col justify-between">
             <div className="flex itens-center justify-between mb-4">
-              {description ? <Description className="text-h6" description={description} /> : null}
+              {description ? <span className="text-h6">{description}</span> : null}
               {additionalDescription ? (
-                <div className="text-m-light text-secondary-text"> {additionalDescription} </div>
+                <span className="text-m-light text-secondary-text"> {additionalDescription} </span>
               ) : null}
             </div>
             {cardList?.length ? (

package/src/components/InvestmentInfo/InvestmentInfo.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { InvestmentInfo } from './InvestmentInfo';
 import type { InvestmentInfoContent } from './InvestmentInfoContent';
 

package/src/components/LikeControl/LikeControl.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import { LikeControl } from './LikeControl';
 

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { LinkDocs } from './LinkDocs';
 import { linkDocsContentExample } from './linkDocsContentExample';
 

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { LinkDocs } from './LinkDocs';
 import { linkDocsContentExample } from './linkDocsContentExample';
 

package/src/components/LinkList/LinkList.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { LinkList } from './LinkList';
 import { linkDocsContentExample } from './linkListContentExample';
 

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { GalleryCardProps } from '../Gallery/GalleryContent';
 import type { MiniGalleryProps } from './MiniGallery';

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import { MobileAppTile as MobileAppTileMobile } from './MobileAppTile.mobile';
 

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { MobileAppTile } from './MobileAppTile';
 

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -34,7 +34,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
 
     return (
       <BlockWrapper
-        className={`flex justify-between font-sans p-9 box-border relative min-h-[320px]
+        className={`flex justify-between font-sans p-[50px] box-border relative min-h-[320px]
         ${getTileMinHeight(className)}
         ${VersionStyleMap[version]}
         ${className}`}
@@ -48,19 +48,19 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 headingType={headingType}
                 as="h3"
                 title={title}
-                className={`whitespace-pre-wrap mb-6 w-full
+                className={`whitespace-pre-wrap mb-7 w-full
                   ${textColorClass} ${AlignText[alignTitle]}`}
               />
             ) : null
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection buttons={buttonsWithClass} className="flex gap-4" {...rest} />
+              <ButtonSection buttons={buttonsWithClass} className="flex gap-4 mt-8" {...rest} />
             ) : null
           }
         >
           {renderDescription(description)}
-          <div className="flex flex-1 items-center">
+          <div className="flex flex-1 items-center mb-3">
             {qr?.src ? (
               <div className={`flex justify-center mr-5 bg-white rounded-md ${containerStyle}`}>
                 <Img className="w-fit" image={qr} />
@@ -90,4 +90,4 @@ const renderList = (version: ListItemVersion, items?: string[]) => {
 };
 
 const renderDescription = (description?: string) =>
-  description ? <p className="text-xl-light mb-5">{description}</p> : null;
+  description ? <p className="text-xl-light mb-5 pt-0.5">{description}</p> : null;

package/src/components/OfficeMap/OfficeMap.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { OfficeMap } from './OfficeMap';
 
 export default {

package/src/components/OfficeServicesBlock/OfficeServicesBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { OfficeServicesBlock } from './OfficeServicesBlock';
 
 export default {

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -1,95 +1,105 @@
-import '../../react/setup-fixture';
-import { Gallery } from '../Gallery/Gallery';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../../model/ContentPageDef';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
 import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
-import { Headline } from '../Headline/Headline';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { MiniGallery } from '../MiniGallery/MiniGallery';
 import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
-import { OtherProductsItem } from '../OtherProductsItem/OtherProductsItem';
-import { PictureText } from '../PictureText/PictureText';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
-import { ProductBlock } from '../ProductBlock/ProductBlock';
 import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
-import { ProductTile } from '../ProductTile/ProductTile';
 import { PRODUCT_PENSION_TILE, PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { TextBlock } from '../TextBlock/TextBlock';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { Tile } from '../Tile/Tile';
 import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
 import { OtherProducts } from './OtherProducts';
 
-const TEXT_BLOCK_OTHER_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
-const PRODUCT_BLOCK_OTHER_BLOCK = <ProductBlock className="col-span-6" {...PRODUCT_BLOCK} />;
-
-const TILES_OTHER_BLOCK = <Tile className="col-span-12" {...TILE} />;
-
-const TILES_PREMIUM_OTHER_BLOCK = <Tile className="col-span-6" {...TILE_PREMIUM} />;
-
-const PRODUCT_TILES_OTHER_BLOCK = <ProductTile className="col-span-6" {...PRODUCT_TILE} />;
-
-const PRODUCT_PENSION_TILES_OTHER_BLOCK = (
-  <ProductTile className="col-span-6" {...PRODUCT_PENSION_TILE} />
-);
-
-const HEADLINE_OTHER_BLOCK = <Headline className="col-span-12" {...HEADLINE} />;
-
-const PICTURE_TEXT_OTHER_BLOCK = <PictureText className="col-span-12" {...PICTURE_TEXT} />;
-
-const LINK_DOCS_OTHER_BLOCK = <LinkDocs className="col-span-12" {...linkDocsContentExample} />;
-
-const GALLERY_OTHER_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
-
-const MINI_GALLERY_OTHER_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
-
-export const OTHER_PRODUCTS_ITEM = (
-  <OtherProductsItem label="OtherProducts №1 Tiles">
-    {[TILES_PREMIUM_OTHER_BLOCK, TILES_PREMIUM_OTHER_BLOCK, TILES_OTHER_BLOCK, TILES_OTHER_BLOCK]}
-  </OtherProductsItem>
-);
+export const OTHER_PRODUCTS_ITEM: BlockDef = {
+  type: 'OtherProductsItem',
+  content: { label: 'OtherProducts №1 Tiles' },
+  blocks: [
+    { type: 'Tile', content: TILE_PREMIUM, style: ['col-span-6'] },
+    { type: 'Tile', content: TILE_PREMIUM, style: ['col-span-6'] },
+    { type: 'Tile', content: TILE },
+    { type: 'Tile', content: TILE },
+  ],
+};
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <OtherProducts className="col-span-12">
-        {OTHER_PRODUCTS_ITEM}
-        <OtherProductsItem label="OtherProducts №2 Product_Tiles">
-          {[
-            PRODUCT_TILES_OTHER_BLOCK,
-            PRODUCT_TILES_OTHER_BLOCK,
-            PRODUCT_PENSION_TILES_OTHER_BLOCK,
-            PRODUCT_PENSION_TILES_OTHER_BLOCK,
-          ]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №3 Product_Block">
-          {[PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №4 Text_Block">
-          {[
-            TEXT_BLOCK_OTHER_BLOCK,
-            TEXT_BLOCK_OTHER_BLOCK,
-            TEXT_BLOCK_OTHER_BLOCK,
-            TEXT_BLOCK_OTHER_BLOCK,
-          ]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №5 Picture_Text">
-          {[PICTURE_TEXT_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №6 Headline">
-          {[HEADLINE_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №7 Link_Docs">
-          {[LINK_DOCS_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №8 Gallery">
-          {[GALLERY_OTHER_BLOCK, GALLERY_OTHER_BLOCK]}
-        </OtherProductsItem>
-        <OtherProductsItem label="OtherProducts №9 Mini_Gallery">
-          {[MINI_GALLERY_OTHER_BLOCK, MINI_GALLERY_OTHER_BLOCK]}
-        </OtherProductsItem>
-      </OtherProducts>
+      <OtherProducts
+        className="col-span-12"
+        block={{
+          type: 'OtherProducts',
+          blocks: [
+            OTHER_PRODUCTS_ITEM,
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №2 Product_Tiles' },
+              blocks: [
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+                { type: 'ProductTile', content: PRODUCT_PENSION_TILE },
+                { type: 'ProductTile', content: PRODUCT_PENSION_TILE },
+              ],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №3 Product_Block' },
+              blocks: [
+                { type: 'ProductBlock', content: PRODUCT_BLOCK, style: ['col-span-6'] },
+                { type: 'ProductBlock', content: PRODUCT_BLOCK, style: ['col-span-6'] },
+              ],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №4 Text_Block' },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №5 Picture_Text' },
+              blocks: [{ type: 'PictureText', content: PICTURE_TEXT }],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №6 Headline' },
+              blocks: [{ type: 'Headline', content: HEADLINE }],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №7 Link_Docs' },
+              blocks: [{ type: 'LinkDocs', content: linkDocsContentExample }],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №8 Gallery' },
+              blocks: [
+                { type: 'Gallery', content: GALLERY },
+                { type: 'Gallery', content: GALLERY },
+              ],
+            },
+            {
+              type: 'OtherProductsItem',
+              content: { label: 'OtherProducts №9 Mini_Gallery' },
+              blocks: [
+                { type: 'MiniGallery', content: MINI_GALLERY },
+                { type: 'MiniGallery', content: MINI_GALLERY },
+              ],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

package/src/components/OtherProducts/OtherProducts.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { OtherProductsContent } from './OtherProductsContent';
@@ -6,9 +7,9 @@ import type { OtherProductsContent } from './OtherProductsContent';
 export interface OtherProductsProps extends OtherProductsContent, UniBlockProps {}
 
 export const OtherProducts: JSXBlock<OtherProductsProps> = JSX<OtherProductsProps>(
-  ({ className = '', children, ...rest }) => (
+  ({ className = '', ...rest }) => (
     <BlockWrapper className={`font-sans text-primary-text ${className}`} {...rest}>
-      {children}
+      {renderChildren(rest)}
     </BlockWrapper>
   ),
 );

package/src/components/OtherProductsItem/OtherProductsItem.fixture.tsx

@@ -1,5 +1,20 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
 import { OTHER_PRODUCTS_ITEM } from '../OtherProducts/OtherProducts.fixture';
+import { OtherProductsItem } from './OtherProductsItem';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
-  default: <div className="container">{OTHER_PRODUCTS_ITEM}</div>,
+  default: (
+    <div className="container">
+      <OtherProductsItem
+        {...OTHER_PRODUCTS_ITEM.content}
+        block={OTHER_PRODUCTS_ITEM}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { getParentBlockContent } from '../../model/getParentBlockContent';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -13,8 +14,8 @@ export interface OtherProductsItemProps extends OtherProductsItemContent, UniBlo
 const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
 export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProductsItemProps>(
-  ({ className, page, ancestors, label = '', isUnfolded: unfoldedByDefault, children }) => {
-    const { colorPalette } = getParentBlockContent(ancestors, {} as OtherProductsContent);
+  ({ className, label = '', isUnfolded: unfoldedByDefault, ...rest }) => {
+    const { colorPalette } = getParentBlockContent(rest.options, {} as OtherProductsContent);
 
     return (
       <div className={`border-0 border-b border-solid border-main-divider ${className}`}>
@@ -26,7 +27,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
                 className="grid grid-cols-12 gap-1 border-box"
                 isUnfolded={isUnfolded}
               >
-                {children}
+                {renderChildren(rest)}
               </FoldableSection>
             </div>
           )}
@@ -34,7 +35,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
             <DefaultFoldButton
               label={label}
               icon={icons[Number(isUnfolded)]}
-              dataTheme={page?.colorPalette || colorPalette}
+              dataTheme={rest.options?.page?.colorPalette || colorPalette}
               onClick={onToggle}
             />
           )}

package/src/components/PictureText/PictureText.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { PictureText } from './PictureText';
 import type { PictureTextContent } from './PictureTextContent';
 

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

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

package/src/components/Placeholder/Placeholder.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';