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

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
 const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
 const BASE_DOT_WIDTH = 6;
@@ -14,28 +15,35 @@ export interface SwipeListControlDotsProps {
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
   ({ children, activeIndex, indexFraction, showDots }) => {
-    const handleClick = (idx: number) => (e) => {
-      if (idx === activeIndex) {
-        return;
-      }
+    const handleClick = useCallback(
+      (idx: number) => (e) => {
+        if (idx === activeIndex) {
+          return;
+        }
 
-      const contentContainer = (e.currentTarget as HTMLElement).parentElement
-        ?.previousElementSibling;
+        const contentContainer = (e.currentTarget as HTMLElement).parentElement
+          ?.previousElementSibling;
 
-      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    };
+        contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      },
+      [activeIndex],
+    );
 
-    return showDots && children?.length ? (
+    return showDots && children ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
-        {children?.map((_, idx: number) => (
-          <div
-            key={String(idx)}
-            onClick={handleClick(idx)}
-            className={`${DOT_STYLES}`}
-            style={getDotStyles(idx, activeIndex, indexFraction)}
-            aria-hidden
-          />
-        ))}
+        {children.length && children.map ? (
+          children.map((_, idx: number) => (
+            <div
+              key={String(idx)}
+              onClick={handleClick(idx)}
+              className={DOT_STYLES}
+              style={getDotStyles(idx, activeIndex, indexFraction)}
+              aria-hidden
+            />
+          ))
+        ) : (
+          <div className={DOT_STYLES} style={createDotStyle(1)} />
+        )}
       </div>
     ) : null;
   },
@@ -53,13 +61,10 @@ const getDotStyles = (
   const leftIndexMod = 1 - indexFraction;
   const rightIndexMod = indexFraction;
 
-  return currentIdx === activeIndex
-    ? {
-        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
-        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
-      }
-    : {
-        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
-        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
-      };
+  return createDotStyle(currentIdx === activeIndex ? leftIndexMod : rightIndexMod);
 };
+
+const createDotStyle = (indexModifier: number): Record<string, string> => ({
+  opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * indexModifier}`,
+  width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * indexModifier}px`,
+});

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlList.tsx

@@ -16,21 +16,21 @@ export interface SwipeListControlListProps extends SwipeContainer {
 export const SwipeListControlList = JSX<SwipeListControlListProps>(
   ({
     className = '',
-    children,
-    activeIndex,
-    onScroll,
+    activeIndex = -1,
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
+    children,
+    onScroll,
   }) => {
-    return (
+    return children ? (
       <div
         className={`overflow-auto flex horizontal-list no-scrollbar ${className}`}
         style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
         role="list"
         onScroll={onScroll}
       >
-        {children?.length ? (
-          children?.map((child, idx) => (
+        {children.length && children.map ? (
+          children.map((child, idx) => (
             <SwipeListControlItem
               key={String(idx)}
               style={getContainerStyle(padding / 4)}
@@ -40,9 +40,11 @@ export const SwipeListControlList = JSX<SwipeListControlListProps>(
             </SwipeListControlItem>
           ))
         ) : (
-          <SwipeListControlItem>{children}</SwipeListControlItem>
+          <SwipeListControlItem style={getContainerStyle(padding / 4)} aria-current>
+            {children}
+          </SwipeListControlItem>
         )}
       </div>
-    );
+    ) : null;
   },
 );

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControl.tsx

@@ -7,9 +7,11 @@ export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
     return isScrollAvailable ? (
       <div>
         {renderArrows({
-          handler: [onPrevClick, onNextClick],
-          isShown: [showPrevButton, showNextButton],
-          btnClass: ['top-[108px]', 'top-11'],
+          dec: onPrevClick,
+          inc: onNextClick,
+          canDec: showPrevButton,
+          canInc: showNextButton,
+          btnClass: ['top-[108px]', 'top-[44px]'],
           className: 'right-7',
           isDisabled: true,
         })}

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.ts

@@ -1,8 +1,9 @@
 export interface TableArrowScrollControlProps {
-  activeCardIndex: number;
+  activeIndex: number;
   onNextClick: () => void;
   onPrevClick: () => void;
   isScrollAvailable?: boolean;
   showNextButton: boolean;
   showPrevButton: boolean;
+  setActiveIndex: (index: number) => void;
 }

package/package.json

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

package/src/BlockRenderer/BlockRendererOptions.ts

@@ -0,0 +1,12 @@
+import type { BlockAncestors, BlockDecorator } from '../model/BlockDecorator';
+import type { BlocksRegistry } from '../model/BlocksRegistry';
+import type { ContentPageDef, Slot } from '../model/ContentPageDef';
+
+export interface BlockRendererOptions {
+  key?: string;
+  page?: ContentPageDef;
+  blockDecorator?: BlockDecorator;
+  blocksRegistry?: BlocksRegistry;
+  parent?: Slot;
+  ancestors?: BlockAncestors;
+}

package/src/BlockRenderer/defaultBlockDecorator.ts

@@ -0,0 +1,4 @@
+import type { BlockDecorator } from '../model/BlockDecorator';
+
+export const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
+  render({ blockClassName, block });

package/src/{model → BlockRenderer}/getParentBlockContent.ts

@@ -1,11 +1,11 @@
-import type { BlockAncestors } from './BlockDecorator';
+import type { BlockRendererOptions } from './BlockRendererOptions';
 import { getParentBlockDef } from './getParentBlockDef';
 
 export function getParentBlockContent<C extends Record<string, any>>(
-  ancestors: BlockAncestors | undefined,
+  options: BlockRendererOptions | undefined,
   defaultContent: C,
 ): C {
-  const { content } = getParentBlockDef(ancestors);
+  const { content } = getParentBlockDef(options);
 
   return (content as C) || defaultContent;
 }

package/src/BlockRenderer/getParentBlockDef.ts

@@ -0,0 +1,6 @@
+import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../model/ContentPageDef';
+
+export function getParentBlockDef(options: BlockRendererOptions | undefined): BlockDef {
+  return options?.parent || {};
+}

package/src/BlockRenderer/renderBlock.tsx

@@ -0,0 +1,47 @@
+import type { BlockAncestors } from '../model/BlockDecorator';
+import type { BlockDef } from '../model/ContentPageDef';
+import { style2className } from '../utils/style2className';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { defaultBlockDecorator } from './defaultBlockDecorator';
+
+const DEFAULT_ANCESTORS: BlockAncestors = [];
+const DEFAULT_STYLE = ['col-span-12'];
+
+export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
+  const {
+    key,
+    blockDecorator = defaultBlockDecorator,
+    blocksRegistry = {},
+    ancestors = DEFAULT_ANCESTORS,
+  } = options;
+  const { type } = block;
+
+  if (!(type && type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = type && blocksRegistry[type];
+
+  return blockDecorator(
+    {
+      blockClassName: `scroll-mt-12 ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
+      block,
+      ancestors,
+      // Adjusted by decorator block and blockClassName
+      render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+        const { content } = adjustedBlock;
+
+        return BlockComponent ? (
+          <BlockComponent
+            key={key}
+            className={adjustedBlockClassName}
+            block={block}
+            options={options}
+            {...content}
+          />
+        ) : null;
+      },
+    },
+    key,
+  );
+}

package/src/BlockRenderer/renderBlockList.tsx

@@ -0,0 +1,33 @@
+import type { BlockAncestors, SlotName } from '../model/BlockDecorator';
+import { DEFAULT_SLOT_NAME } from '../model/BlockDecorator';
+import type { BlockDef } from '../model/ContentPageDef';
+import type { VNode } from '../model/VNode';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { renderBlock } from './renderBlock';
+
+export interface BlocksListRendererProps extends BlockRendererOptions {
+  slotName?: SlotName;
+  renderChild?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+}
+
+const EMPTY_ANCESTORS: BlockAncestors = [];
+
+export const renderBlocksList = (
+  blocks: BlockDef[] | undefined,
+  {
+    key,
+    ancestors = EMPTY_ANCESTORS,
+    slotName = DEFAULT_SLOT_NAME,
+    renderChild = renderBlock,
+    ...options
+  }: BlocksListRendererProps,
+): VNode[] =>
+  (blocks || []).map((_: BlockDef, j: number) =>
+    renderChild(_, {
+      ...options,
+      key: `${key ? key : _.type}-${j}`,
+      ancestors: options.parent
+        ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+        : ancestors,
+    }),
+  );

package/src/BlockRenderer/renderChildren.ts

@@ -0,0 +1,25 @@
+import type { BlockDef } from '../model/ContentPageDef';
+import type { UniBlockProps } from '../model/JSXBlock';
+import type { VNode } from '../model/VNode';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { renderBlocksList } from './renderBlockList';
+
+interface ChildrenRendererProps extends UniBlockProps {
+  children?: VNode;
+  renderChild?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+}
+
+export function renderChildren({
+  children,
+  block,
+  options,
+  renderChild,
+}: ChildrenRendererProps): VNode[] | null {
+  if (children) {
+    return children;
+  }
+
+  return block && options
+    ? renderBlocksList(block.blocks, { ...options, parent: block, renderChild })
+    : null;
+}

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

@@ -1,70 +1,55 @@
-import { DEFAULT_SLOT_NAME } from '../../model/BlockDecorator';
-import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
-import '../../react/setup-fixture';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
-import { Headline } from '../Headline/Headline';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../../model/ContentPageDef';
+import '../../setup-fixture';
+import { Blocks } from '../Blocks';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { TextBlock } from '../TextBlock/TextBlock';
 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 {...TEXT_BLOCK} />;
-
-const HEADLINE_ACCORDION_BLOCK = <Headline {...HEADLINE} />;
-
-const LINK_DOCS_ACCORDION_BLOCK = <LinkDocs {...linkDocsContentExample} title="" />;
-
-const ACCORDION_BLOCK_DEF: BlockDef = {
-  type: 'Accordion',
+export const ACCORDION_ITEM: BlockDef = {
+  type: 'AccordionItem',
   content: {
-    title: 'Accordion title',
-    description: 'Accordion description 2',
-    bordered: true,
-  } as AccordionProps,
+    label: 'Accordion label 1',
+    labelIcon: { icon: 'CardIcon' },
+    isExpanded: true,
+  },
+  blocks: [
+    { type: 'TextBlock', content: TEXT_BLOCK },
+    { type: 'TextBlock', content: TEXT_BLOCK },
+  ],
 };
 
-export const ACCORDION_ITEM = (
-  <AccordionItem
-    ancestors={[
-      [page, DEFAULT_SLOT_NAME],
-      [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-    ]}
-    label="Accordion label 1"
-    labelIcon={{ icon: 'CardIcon' }}
-  >
-    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-  </AccordionItem>
-);
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...ACCORDION_BLOCK_DEF.content}>
-        {ACCORDION_ITEM}
-        <AccordionItem
-          ancestors={[
-            [page, DEFAULT_SLOT_NAME],
-            [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-          ]}
-          label="Accordion label 2"
-        >
-          {[HEADLINE_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem
-          ancestors={[
-            [page, DEFAULT_SLOT_NAME],
-            [ACCORDION_BLOCK_DEF, DEFAULT_SLOT_NAME],
-          ]}
-          label="Accordion label 3"
-        >
-          {[LINK_DOCS_ACCORDION_BLOCK]}
-        </AccordionItem>
-      </Accordion>
+      <Accordion
+        className="col-span-12"
+        title="Accordion title"
+        description="Accordion description 2"
+        bordered={true}
+        block={{
+          type: 'Accordion',
+          blocks: [
+            ACCORDION_ITEM,
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 2', isExpanded: true },
+              blocks: [{ type: 'Headline', content: HEADLINE }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 3', isExpanded: true },
+              blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

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

@@ -1,46 +1,29 @@
-import '../../react/setup-fixture';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
-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 { PictureText } from '../PictureText/PictureText';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
-import { ProductTile } from '../ProductTile/ProductTile';
 import { 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 } from '../Tile/Tile.fixture';
 import { Accordion } from './Accordion';
 
-const TEXT_BLOCK_ACCORDION_BLOCK = <TextBlock className="col-span-12" {...TEXT_BLOCK} />;
-
-const HEADLINE_ACCORDION_BLOCK = <Headline className="col-span-12" {...HEADLINE} />;
-
-const PICTURE_TEXT_ACCORDION_BLOCK = <PictureText className="col-span-12" {...PICTURE_TEXT} />;
-
-const LINK_DOCS_ACCORDION_BLOCK = (
-  <LinkDocs className="col-span-12" {...linkDocsContentExample} title="" />
-);
-
-const TILES_ACCORDION_BLOCK = <Tile className="col-span-6" {...TILE} />;
-
-const PRODUCT_TILES_ACCORDION_BLOCK = <ProductTile className="col-span-6" {...PRODUCT_TILE} />;
-
-const GALLERY_ACCORDION_BLOCK = <Gallery className="col-span-12" {...GALLERY} />;
-
-const MINI_GALLERY_ACCORDION_BLOCK = <MiniGallery className="col-span-12" {...MINI_GALLERY} />;
+export const ACCORDION_ITEM: BlockDef = {
+  type: 'AccordionItem',
+  content: { label: 'Accordion label 1', isExpanded: true },
+  blocks: [
+    { type: 'TextBlock', content: TEXT_BLOCK },
+    { type: 'TextBlock', content: TEXT_BLOCK },
+  ],
+};
 
-export const ACCORDION_ITEM = (
-  <AccordionItem label="Accordion label 1">
-    {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-  </AccordionItem>
-);
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
   default: (
@@ -49,20 +32,55 @@ export default {
         className="col-span-12"
         title="Accordion title"
         description="Accordion description"
-      >
-        {ACCORDION_ITEM}
-        <AccordionItem label="Accordion label 2">{[PICTURE_TEXT_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 3">{[HEADLINE_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 4">{[LINK_DOCS_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 5">
-          {[TILES_ACCORDION_BLOCK, TILES_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 6">
-          {[PRODUCT_TILES_ACCORDION_BLOCK, PRODUCT_TILES_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 7">{[GALLERY_ACCORDION_BLOCK]}</AccordionItem>
-        <AccordionItem label="Accordion label 8">{[MINI_GALLERY_ACCORDION_BLOCK]}</AccordionItem>
-      </Accordion>
+        block={{
+          type: 'Accordion',
+          blocks: [
+            ACCORDION_ITEM,
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 2', isExpanded: true },
+              blocks: [{ type: 'PictureText', content: PICTURE_TEXT }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 3', isExpanded: true },
+              blocks: [{ type: 'Headline', content: HEADLINE }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 4' },
+              blocks: [{ type: 'LinkDocs', content: { ...linkDocsContentExample, title: '' } }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 5' },
+              blocks: [
+                { type: 'Tile', content: TILE, style: ['col-span-6'] },
+                { type: 'Tile', content: TILE, style: ['col-span-6'] },
+              ],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 6' },
+              blocks: [
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+                { type: 'ProductTile', content: PRODUCT_TILE, style: ['col-span-6'] },
+              ],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 7' },
+              blocks: [{ type: 'Gallery', content: GALLERY }],
+            },
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 8' },
+              blocks: [{ type: 'MiniGallery', content: MINI_GALLERY }],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
   'right-align-title': (
@@ -72,12 +90,21 @@ export default {
         title="Accordion title"
         accordionAlignTitle="right"
         description="Accordion description"
-      >
-        <AccordionItem label="Accordion label 1">
-          {[TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK]}
-        </AccordionItem>
-        <AccordionItem label="Accordion label 2">{[PICTURE_TEXT_ACCORDION_BLOCK]}</AccordionItem>
-      </Accordion>
+        block={{
+          type: 'Accordion',
+          blocks: [
+            {
+              type: 'AccordionItem',
+              content: { label: 'Accordion label 1', isExpanded: true },
+              blocks: [
+                { type: 'TextBlock', content: TEXT_BLOCK },
+                { type: 'TextBlock', content: TEXT_BLOCK },
+              ],
+            },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
 };

package/src/components/Accordion/Accordion.mobile.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 { Heading } from '../../ui-kit/Heading/Heading';
@@ -9,7 +10,7 @@ import { AccordionItemsList } from './AccordionItemsList';
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
-  ({ title, description, className = '', children, ...rest }) => (
+  ({ title, description, className = '', ...rest }) => (
     <BlockWrapper className={`py-6 px-4 bg-white text-primary-text ${className}`} {...rest}>
       {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
       {description ? (
@@ -19,7 +20,7 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           </Paragraph>
         </div>
       ) : null}
-      <AccordionItemsList>{children}</AccordionItemsList>
+      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
     </BlockWrapper>
   ),
 );

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { AlignText } from '../../model/AlignText';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -10,7 +11,7 @@ import { AccordionItemsList } from './AccordionItemsList';
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
-  ({ className = '', title, accordionAlignTitle = 'center', description, children, ...rest }) => (
+  ({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (
     <BlockWrapper
       className={`p-[50px] mb-1 last:mb-0 bg-white text-primary-text ${className}`}
       {...rest}
@@ -28,7 +29,7 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           <Paragraph size="text-l">{description}</Paragraph>
         </div>
       ) : null}
-      <AccordionItemsList>{children}</AccordionItemsList>
+      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
     </BlockWrapper>
   ),
 );

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

@@ -1,6 +1,17 @@
-import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture.mobile';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { Blocks } from '../Blocks';
+import { AccordionItem } from './AccordionItem';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
 
 export default {
-  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+  default: (
+    <AccordionItemsList>
+      <AccordionItem {...ACCORDION_ITEM.content} block={ACCORDION_ITEM} options={options} />
+    </AccordionItemsList>
+  ),
 };