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

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -1,7 +1,7 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselCard } from './CarouselCard';
 import type { CarouselCardContent } from './CarouselCardContent';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 const button: ButtonProps = {
   text: 'Подробнее',
@@ -36,9 +36,14 @@ export default {
       <CarouselCard className="col-span-12" {...CARD} />
     </div>
   ),
-  mini: (
+  new: (
     <div className="container grid grid-cols-12">
-      <CarouselCard className="col-span-12" {...CARD_MINI} />
+      <CarouselCard className="col-span-12" {...CARD_NEW} />
+    </div>
+  ),
+  mini: (
+    <div className="container flex">
+      <CarouselCard {...CARD_MINI} />
     </div>
   ),
 };

package/src/components/CarouselCard/CarouselCard.tsx

@@ -5,45 +5,33 @@ import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Headline } from '../Headline/Headline';
 import type { CarouselCardContent } from './CarouselCardContent';
 
-export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {
-  version?: CarouselCardVersion;
-}
+export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
-
-const CARD_STYLE_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
-  mini: 'justify-center items-center mx-4 my-9 col-span-4',
-};
+const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'w-[1007px]',
-  mini: 'w-[350px]',
+  normal: `w-[${1007 + 48}px]`,
+  mini: `w-[${350 + 48}px]`,
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(
-  ({ button, className = '', description, title, version = 'normal' }) => {
-    return (
-      <section className={`flex ${CARD_STYLE_MAP[version]}`}>
-        <div className={`relative ${CARD_WIDTH_MAP[version]}`}>
-          <div
-            className={`relative bg-white py-6 px-10 z-10
-              border border-solid border-green-light ${className}`}
-          >
-            <Headline
-              className="!p-0"
-              title={title}
-              description={description}
-              headlineVersion="M"
-              align="center"
-            />
-            {button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null}
-          </div>
-          <div className={`top-9 right-12 bg-green-dark ${BLOCK_CLASSES}`} />
-          <div className={`top-6 right-8 bg-green ${BLOCK_CLASSES}`} />
-          <div className={`top-3 right-4 bg-green-light ${BLOCK_CLASSES}`} />
+  ({ className = '', button, description, title, version = 'normal' }) => (
+    <section className={`flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`}>
+      <div className="relative w-full">
+        <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
+        <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
+        <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
+        <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="M"
+            align="center"
+          />
+          {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
         </div>
-      </section>
-    );
-  },
+      </div>
+    </section>
+  ),
 );

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -2,11 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { sliceArray } from '../../utils/sliceArray';
 import { Carousel } from '../Carousel/Carousel';
+import { Headline } from '../Headline/Headline';
 import type { CarouselLinksContent } from './CarouselLinksContent';
 
 export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
@@ -14,21 +13,21 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 const MAX_LINKS_COUNT = 12;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ additionalDescription, description, links, title, className = '', ...rest }) => {
+  ({ className = '', additionalDescription, description, links, title, ...rest }) => {
     return (
       <BlockWrapper
         className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
         {...rest}
       >
         <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
-          {title ? <Heading title={title} as="h1" headingType="h0" className="pb-0.5" /> : null}
-          {description ? (
-            <div className="pt-5">
-              <Paragraph size="text-xl" font="font-light">
-                {description}
-              </Paragraph>
-            </div>
-          ) : null}
+          <Headline
+            title={title}
+            as="h1"
+            description={description}
+            align="left"
+            className="p-0"
+            bgColorHeadline="secondary"
+          />
           {additionalDescription ? (
             <div className="pt-6">
               <Paragraph>{additionalDescription}</Paragraph>
@@ -42,26 +41,27 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
 );
 
 const renderLinks = (links: LinkProps[]) => {
-  const slicedLinks = sliceArray(links, MAX_LINKS_COUNT);
-
-  const slides = slicedLinks.map((slide) => (
-    <div className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start">
-      {slide.map((link, index) => (
-        <LinkButton className="m-1" key={String(index)} {...link} />
-      ))}
-    </div>
-  ));
+  const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
 
   return (
     <Carousel
       className="min-w-[832px] w-[832px]"
       isBlur={false}
-      cardFullViewCount={1}
-      cardWidth={'832'}
       isCyclic={true}
-      block={{ type: 'Carousel', blocks: slides }}
+      itemCount={itemCount}
     >
-      {slides}
+      {new Array(itemCount).fill(null).map((_, groupIndex) => (
+        <div
+          key={String(groupIndex)}
+          className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start"
+        >
+          {links
+            .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
+            .map((link, index) => (
+              <LinkButton key={String(index)} className="m-1" {...link} />
+            ))}
+        </div>
+      ))}
     </Carousel>
   );
 };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -26,7 +26,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={`font-sans bg-white p-[50px] p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
+        className={`font-sans bg-white p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}
@@ -70,8 +70,8 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
   </button>
 );
 
-const renderCardInfo = (cell: HeadlineCommonProps): VNode => (
-  <div className="py-5 border-b border-main-divider flex flex-col gap-1">
+const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
+  <div key={String(i)} className="py-5 border-b border-main-divider flex flex-col gap-1">
     {cell?.title ? (
       <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
     ) : null}

package/src/components/Catalog/Catalog.fixture.tsx

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

package/src/components/Catalog/Catalog.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -10,19 +10,15 @@ import type { CatalogContent } from './CatalogContent';
 export interface CatalogProps extends CatalogContent, UniBlockProps {}
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-const CARD_FULL_VIEW_COUNT = 3;
+const CARD_VIEW_COUNT = 3;
 const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
   ({ cards = [], className = '', title, description, ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = useState(0);
-
-    const handleNextClick = useCallback(() => setActiveCardIndex((_) => _ + 1), []);
-    const handlePrevClick = useCallback(() => setActiveCardIndex((_) => _ - 1), []);
-
-    const isUseSlider = cards.length > CARD_FULL_VIEW_COUNT;
-    const showNextButton = isUseSlider && cards.length - activeCardIndex > CARD_FULL_VIEW_COUNT;
-    const showPrevButton = isUseSlider && activeCardIndex > 0;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: cards?.length,
+      visibleItemCount: CARD_VIEW_COUNT,
+    });
 
     return (
       <BlockWrapper
@@ -39,14 +35,13 @@ export const Catalog = JSX<CatalogProps>(
         />
         <div
           className="flex duration-1000 gap-3.5 mt-8"
-          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+          style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
           role="list"
         >
           {cards?.length ? cards.map((card, i) => <CatalogCard key={String(i)} {...card} />) : null}
         </div>
         {renderArrows({
-          handler: [handlePrevClick, handleNextClick],
-          isShown: [showPrevButton, showNextButton],
+          ...controls,
           btnClass: ['left-8', 'right-8'],
           className: 'top-1/2 z-10 mt-6',
         })}

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

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

package/src/components/ComparisonTable/ComparisonTable.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import { ComparisonTable } from './ComparisonTable';
 import type { Column } from './ComparisonTableContent';
 
@@ -215,7 +215,7 @@ export default {
       />
     </div>
   ),
-  'with images and colored first column': (
+  'with images and colored column': (
     <div className="container grid grid-cols-12">
       <ComparisonTable
         className="col-span-12"

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -28,9 +28,9 @@ export const ComparisonTable = JSX<ComparisonTableProps>((props) => {
 });
 
 const TableInner = JSX<ComparisonTableProps>(
-  ({ columns, rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, ...rest }) => {
+  ({ columns = [], rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, ...rest }) => {
     const [columnsViewState, setColumnsViewState] = useState(
-      new Array<boolean>(columns?.length || 0).fill(!visibleRowLength),
+      new Array<boolean>(columns.length).fill(!visibleRowLength),
     );
 
     const handleToggleColumn = useCallback((colIndex: number) => {

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -14,7 +14,7 @@ interface ComparisonTableBodyProps {
 }
 
 export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
-  ({ columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
+  ({ columns = [], rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
     const colHeaders = columns?.map(({ header }) => header || {});
     const colData = columns?.map(({ data }) => data) || [];
     const rowData = rowHeaders
@@ -24,26 +24,25 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
       }))
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
-    const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
-
     const [activeIndex, controls] = useCarouselControls({
-      itemsCount: colData.length,
+      itemCount: columns.length,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
 
+    const { isScrollAvailable } = controls;
+
     return (
       <div>
         <div role="table">
           {colHeaders?.length ? (
-            <ComparisonTableColumnHeaders colHeaders={colHeaders} activeCardIndex={activeIndex} />
+            <ComparisonTableColumnHeaders colHeaders={colHeaders} activeIndex={activeIndex} />
           ) : null}
           {rowData?.length ? (
             <ComparisonTableRows
               rowData={rowData}
               isColoredFirstColumn={isColoredFirstColumn}
-              activeCardIndex={activeIndex}
+              activeIndex={activeIndex}
               controls={controls}
-              isScrollAvailable={isScrollAvailable}
             />
           ) : null}
         </div>

package/src/components/ComparisonTable/ComparisonTableColumnHeaders.tsx

@@ -7,14 +7,14 @@ import { TableRowContainer } from './TableRowContainer';
 
 interface ComparisonTableColumnHeadersProps {
   colHeaders: ColumnHeader[];
-  activeCardIndex: number;
+  activeIndex: number;
 }
 
 export const ComparisonTableColumnHeaders = JSX<ComparisonTableColumnHeadersProps>(
-  ({ colHeaders, activeCardIndex }) => (
+  ({ colHeaders, activeIndex }) => (
     <TableRowContainer>
       <div className={FIRST_CELL_CLASSES} role="columnheader" />
-      <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
+      <TableCarouselContainer activeIndex={activeIndex} columnWidth={COLUMN_WIDTH}>
         {colHeaders.map((header, i) => (
           <HeaderCell key={String(i)} {...header} />
         ))}

package/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -7,15 +7,14 @@ import { TableRow } from './TableRow';
 
 type ComparisonTableRowsProps = {
   rowData: { header: TitleProps; data: CellData[][] }[];
-  activeCardIndex: number;
+  activeIndex: number;
   isColoredFirstColumn: boolean;
   controls: CarouselControls;
-  isScrollAvailable: boolean;
 };
 
 export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
-  ({ rowData, isColoredFirstColumn, activeCardIndex, controls, isScrollAvailable }) => {
-    const { inc, dec, canDec, canInc } = controls;
+  ({ rowData, isColoredFirstColumn, activeIndex, controls }) => {
+    const { isScrollAvailable } = controls;
 
     return (
       <div className="relative">
@@ -25,21 +24,18 @@ export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
             row={row}
             isFirstRow={i === 0}
             isLastRow={i + 1 === length}
-            activeCardIndex={activeCardIndex}
+            activeIndex={activeIndex}
             isColoredFirstColumn={isColoredFirstColumn}
           />
         ))}
-        {isScrollAvailable ? (
-          <div>
-            {renderArrows({
-              handler: [inc, dec],
-              isShown: [canDec, canInc],
-              btnClass: ['top-[108px]', 'top-11'],
+        {isScrollAvailable
+          ? renderArrows({
+              ...controls,
+              btnClass: ['top-[108px]', 'top-[44px]'],
               className: 'right-7',
               isDisabled: true,
-            })}
-          </div>
-        ) : null}
+            })
+          : null}
       </div>
     );
   },

package/src/components/ComparisonTable/TableCarouselContainer.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { TableVersion } from '../../model/TableVersion';
 
 export interface TableCarouselContainerProps {
-  activeCardIndex: number;
+  activeIndex: number;
   columnWidth: number;
   version?: TableVersion;
 }
@@ -13,11 +13,11 @@ const carouselContainerClassesMap: Record<TableVersion, string> = {
 };
 
 export const TableCarouselContainer = JSX<TableCarouselContainerProps>(
-  ({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (
+  ({ children, activeIndex, columnWidth, version = 'comparison' }) => (
     <div className="flex flex-1 overflow-hidden">
       <div
         className={carouselContainerClassesMap[version]}
-        style={{ transform: `translateX(-${activeCardIndex * columnWidth}px)` }}
+        style={{ transform: `translateX(-${activeIndex * columnWidth}px)` }}
       >
         {children}
       </div>

package/src/components/ComparisonTable/TableRow.tsx

@@ -12,7 +12,7 @@ export interface Row {
 export interface TableRowProps {
   className?: string;
   row: Row;
-  activeCardIndex: number;
+  activeIndex: number;
   isColoredFirstColumn: boolean;
   isFirstRow: boolean;
   isLastRow: boolean;
@@ -24,11 +24,11 @@ const titleStyle = (isLastRow = false) =>
   }`;
 
 export const TableRow = JSX<TableRowProps>(
-  ({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
+  ({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
     <TableRowContainer>
       {header?.title ? <div className={titleStyle(isLastRow)}>{header.title}</div> : null}
       {data?.length ? (
-        <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
+        <TableCarouselContainer activeIndex={activeIndex} columnWidth={COLUMN_WIDTH}>
           {data.map((cell, i) => (
             <TableCell
               key={String(i)}

package/src/components/ComparisonTable/constants.ts

@@ -2,5 +2,5 @@ export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradi
 export const BORDER_CLASSES = 'border-main-stroke border-solid border';
 export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
-export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLS_LENGTH_FOR_SCROLL = 3;
 export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/src/components/ContactsBlock/ContactsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ContactsBlock } from './ContactsBlock';
 

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -17,14 +17,12 @@ interface RenderContactsColumnProps {
 }
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
-  ({ className = '', contacts, info, version = 'secondary', ...rest }) => {
-    return (
-      <BlockWrapper className={`${VersionStyleMap[version]} flex p-[50px] ${className}`} {...rest}>
-        {info?.length ? renderBlocks(info, version) : null}
-        {contacts?.length ? renderBlocks(contacts, version) : null}
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', contacts, info, version = 'secondary', ...rest }) => (
+    <BlockWrapper className={`${VersionStyleMap[version]} flex p-[50px] ${className}`} {...rest}>
+      {info?.length ? renderBlocks(info, version) : null}
+      {contacts?.length ? renderBlocks(contacts, version) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderBlocks = (info: ContactBlockProps[][], version?: BlockVersion) => (

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

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks';

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import '../../react/setup-fixture';
+import '../../setup-fixture';
 
 import type { BlockDecorator } from '../../model/BlockDecorator';
 import type { ContentPageDef } from '../../model/ContentPageDef';

package/src/components/ContentPage/ContentPage.tsx

@@ -1,13 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
 import type { BlockDecorator } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { style2className } from '../../utils/style2className';
 import { LikeControl } from '../LikeControl/LikeControl';
-import { RenderBlockOptions } from './renderBlock';
-import { renderBlocksList } from './renderBlockList';
-import { renderSlots } from './renderSlots';
 
 interface ContentPageProps extends UniBlockProps {
   blocksRegistry: BlocksRegistry;
@@ -15,39 +14,41 @@ interface ContentPageProps extends UniBlockProps {
   blockDecorator?: BlockDecorator;
 }
 
-const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
-  render({ blockClassName, block });
-
 export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((props) => {
   const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
 
   const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
 
-  const options: RenderBlockOptions = {
+  const options: BlockRendererOptions = {
     key: '',
-    blocksRegistry,
     page: data,
-    blockDecorator: blockDecorator || defaultBlockDecorator,
+    blocksRegistry,
+    blockDecorator,
+    parent: data,
   };
 
-  const pageSlots = renderSlots({ slots, parent: data, options });
-
   return (
     <section
       className={`relative ${style2className(pageStyle)} ${className}`}
       data-theme={colorPalette}
     >
-      {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">
-          {renderBlocksList({ blocks, parent: data, options })}
-          {pageSlots?.footer ? pageSlots.footer : null}
+      {slots?.header ? (
+        <div className="mb-5 shadow-[0_8px_32px_0px_#00000014]">
+          {renderBlocksList(slots?.header, {
+            ...options,
+            slotName: 'header',
+          })}
         </div>
       ) : null}
-
+      <div className="container grid grid-cols-12 gap-1">
+        {renderBlocksList(blocks, options)}
+        {slots?.footer
+          ? renderBlocksList(slots?.footer, {
+              ...options,
+              slotName: 'footer',
+            })
+          : null}
+      </div>
       {likeControl ? renderLikeControl() : null}
     </section>
   );

package/src/components/ErrorBlock/ErrorBlock.fixture.tsx

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

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -15,20 +15,18 @@ interface CurrencyTableProps {
   exchangeCurrencyItems: ExchangeCurrencyItem[];
 }
 
-export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurrencyItems }) => {
-  return (
-    <table className={`h-fit w-fit ${className}`}>
-      <thead>
-        <tr>
-          <th className={TABLE_HEAD_STYLE}>Валюта</th>
-          <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
-          <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
-        </tr>
-      </thead>
-      <tbody>{exchangeCurrencyItems.map((item) => renderCurrencyRow(item))}</tbody>
-    </table>
-  );
-});
+export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurrencyItems }) => (
+  <table className={`h-fit w-fit ${className}`}>
+    <thead>
+      <tr>
+        <th className={TABLE_HEAD_STYLE}>Валюта</th>
+        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
+        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
+      </tr>
+    </thead>
+    <tbody>{exchangeCurrencyItems.map(renderCurrencyRow)}</tbody>
+  </table>
+));
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const currency = exchangeCurrencyItem?.currency?.currency;

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { calculateResult, formatValue } from './calculateResult';
@@ -38,9 +38,10 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
       selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
     });
 
-    const handleSetCalcState = (newState: Partial<CalcState>) => {
-      setCalcState((oldState) => ({ ...oldState, ...newState }));
-    };
+    const handleSetCalcState = useCallback(
+      (newState: Partial<CalcState>) => setCalcState((oldState) => ({ ...oldState, ...newState })),
+      [],
+    );
 
     return (
       <div className={`grid gap-[18px] pt-2 ${className}`}>