@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.72

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

@@ -4,18 +4,26 @@ import type { InputRangeProps } from './InputRangeProps';
 
 export const InputRange = JSX<InputRangeProps>(
   ({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
-    const handleChange = (value: string) => {
-      if (!onChange) return;
-      const sanitizedValue = Number(value.replace(/\D/g, ''));
+    const handleChange = (_: string) => {
+      if (!onChange) {
+        return;
+      }
+      const sanitizedValue = Number(_.replace(/\D/g, ''));
       onChange(sanitizedValue);
     };
     const inputStyle = {
       backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
     const handleBlur = () => {
-      if (!onChange) return;
-      if (value < min) onChange(min);
-      if (value > max) onChange(max);
+      if (!onChange) {
+        return;
+      }
+      if (value < min) {
+        onChange(min);
+      }
+      if (value > max) {
+        onChange(max);
+      }
     };
     return (
       <div className={className}>

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

@@ -32,8 +32,8 @@ export const SVG = JSX<SVGProps>(
         width={width}
         height={height}
       >
-        {paths.map(({ d, fill, ...options }, i) => (
-          <path key={i} d={d} fill={fill || 'currentColor'} {...commonOptions} {...options} />
+        {paths.map(({ d, fill: pathFill, ...options }, i) => (
+          <path key={i} d={d} fill={pathFill || 'currentColor'} {...commonOptions} {...options} />
         ))}
       </svg>
     );

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

@@ -4,12 +4,22 @@ export interface SelectProps {
   className?: string;
   id?: string;
   name?: string;
+  value: string;
+  onChange: (value: string) => void;
 }
 
-export const Select = JSX<SelectProps>(({ className = '', id, name, children }) => {
-  return (
-    <select className={className} id={id} name={name || id}>
-      {children}
-    </select>
-  );
-});
+export const Select = JSX<SelectProps>(
+  ({ className = '', id, name, children, value, onChange }) => {
+    return (
+      <select
+        className={className}
+        id={id}
+        name={name || id}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        {children}
+      </select>
+    );
+  },
+);

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

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
 import { SwipeListControlDots } from './SwipeListControlDots';
 import { SwipeListControlList } from './SwipeListControlList';
+import type { SwipeListControlProps } from './SwipeListControlProps';
 import { getIndexParts } from './utils/getIndexParts';
 import { getScrollPoints } from './utils/getScrollPoints';
-import type { SwipeListControlProps } from './SwipeListControlProps';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -27,12 +27,17 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     };
 
     const handleScroll = (e: UIEvent) => {
-      const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } =
-        e.currentTarget as HTMLElement;
+      const {
+        scrollLeft,
+        clientWidth,
+        childElementCount,
+        scrollWidth,
+        children: childrenCollection,
+      } = e.currentTarget as HTMLElement;
 
       // horizontal PADDING / 2 to compensate padding-margin combo of child container
       // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-      const itemWidth = (children[0] as HTMLElement).offsetWidth - padding / 2;
+      const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
       const scrollPoints = getScrollPoints({
         gap,
         padding,

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

@@ -46,7 +46,9 @@ const getDotStyles = (
   activeIndex: number,
   indexFraction: number,
 ): Record<string, string> | null => {
-  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) return null;
+  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
+    return null;
+  }
 
   const leftIndexMod = 1 - indexFraction;
   const rightIndexMod = indexFraction;

package/mobile/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -11,8 +11,12 @@ export const getIndexParts = (
   index: number;
   fraction: number;
 } => {
-  const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
-  if (index < 0) return { index, fraction: 0 };
+  const index = scrollPoints.findIndex(
+    ([pointStart, pointEnd]) => pointStart <= scrollLeft && scrollLeft < pointEnd,
+  );
+  if (index < 0) {
+    return { index, fraction: 0 };
+  }
 
   const [start, end] = scrollPoints[index];
   const fraction = (scrollLeft - start) / (end - start);

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

@@ -1,27 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ArrowButton } from '../Button/ArrowButton';
+import { renderArrows } from '../Button/renderArrows';
 import type { TableArrowScrollControlProps } from './TableArrowScrollControlProps';
 
 export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
-  ({ isScrollAvailable, onNextClick, onPrevClick, showNextButton, showPrevButton }) => {
+  ({ isScrollAvailable, handleNextClick, handlePrevClick, showNextButton, showPrevButton }) => {
     return isScrollAvailable ? (
       <div>
-        <div className="absolute top-7 right-7 z-10">
-          <ArrowButton
-            className="mt-4 rotate-180"
-            onClick={onNextClick}
-            disabled={!showNextButton}
-            ariaLabel="Пролистать вправо"
-            data-block-control="scroll-right"
-          />
-          <ArrowButton
-            className="mt-4"
-            onClick={onPrevClick}
-            disabled={!showPrevButton}
-            ariaLabel="Пролистать влево"
-            data-block-control="scroll-left"
-          />
-        </div>
+        {renderArrows({
+          handler: [handlePrevClick, handleNextClick],
+          isShown: [showPrevButton, showNextButton],
+          btnClass: ['top-[108px]', 'top-11'],
+          className: 'right-7',
+          isDisabled: true,
+        })}
       </div>
     ) : null;
   },

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

@@ -1,7 +1,9 @@
+import { FuncReturnVoid } from '../../types';
+
 export interface TableArrowScrollControlProps {
   isScrollAvailable?: boolean;
-  onNextClick?: (ev?: MouseEvent) => void;
-  onPrevClick?: (ev?: MouseEvent) => void;
-  showNextButton?: boolean;
-  showPrevButton?: boolean;
+  handleNextClick: FuncReturnVoid<MouseEvent>;
+  handlePrevClick: FuncReturnVoid<MouseEvent>;
+  showNextButton: boolean;
+  showPrevButton: boolean;
 }

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

@@ -13,6 +13,9 @@ export const Tabs = JSX<TabsProps>(({ tabs, currentTabIndex, onTabClick }) => {
   );
 });
 
+const tabDescriptionStyle = (isActive = false) =>
+  `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`;
+
 const renderTab =
   (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
     const isActive = currentTabIndex === index;
@@ -30,9 +33,7 @@ const renderTab =
         <div>
           {tab?.title ? <h3 className="font-medium m-0 text-base">{tab?.title}</h3> : null}
           {tab?.description ? (
-            <span className={`font-light text-xs ${isActive ? '' : 'text-secondary-text'}`}>
-              {tab?.description}
-            </span>
+            <span className={tabDescriptionStyle(isActive)}>{tab?.description}</span>
           ) : null}
         </div>
       </div>

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

@@ -44,7 +44,7 @@ export const TopItem = JSX<TopItemProps>(
   ),
 );
 
-const getLinkClasses = (bgColor: BgColorVersion, active?: boolean, flat?: boolean) => {
+const getLinkClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
   let classes = 'border-transparent';
   if (active) {
     classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
@@ -53,13 +53,12 @@ const getLinkClasses = (bgColor: BgColorVersion, active?: boolean, flat?: boolea
   return `${classes} ${LINK_CLASSES} ${flat ? '' : 'px-4 py-2'}`;
 };
 
-const getTextClasses = (bgColor: BgColorVersion, active?: boolean, flat?: boolean) => {
-  let classes = 'text-white';
-  if (bgColor === 'bg-white') {
-    classes = active
-      ? 'text-primary-main'
-      : `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
+const getTextClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
+  if (bgColor !== 'bg-white') {
+    return `text-white ${TEXT_CLASSES}`;
   }
-
-  return `${classes} ${TEXT_CLASSES}`;
+  const nonActiveAtoms = `${
+    flat ? 'text-primary-text' : 'text-secondary-text'
+  } hover:text-primary-main`;
+  return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES}`;
 };

package/mobile/src/utils/changeHashOnScroll.ts

@@ -5,7 +5,9 @@ export const changeHashOnScroll = (router: Router, blocks: NodeListOf<Element> |
     const currentHash = globalThis.location?.hash; // TODO: remove globalThis, use href from router
     const anchorHash = `#${block?.id}`;
 
-    if (currentHash === anchorHash) return;
+    if (currentHash === anchorHash) {
+      return;
+    }
 
     const position = block?.getBoundingClientRect();
     if (position && position.top > 0 && position.top < 150) {

package/mobile/src/utils/getCurrentDate.ts

@@ -1,3 +1,3 @@
 export const getCurrentDate = () => {
-  return new Date().toJSON().slice(0, "YYYY-MM-DD".length);
+  return new Date().toJSON().slice(0, 'YYYY-MM-DD'.length);
 };

package/mobile/src/utils/roundTo.ts

@@ -0,0 +1,4 @@
+export const roundTo = (value: number, precision = 2) => {
+  const factor = Math.pow(10, precision);
+  return Math.round(parseFloat(String(value)) * factor) / factor;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.70",
+  "version": "0.3.72",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -88,7 +88,7 @@
     "build:icons": "rimraf ./cosmos-static/icons && node ./scripts/prepare-icons.js ./src/icons ./cosmos-static/icons > ./src/icons/IconName.ts",
     "size": "size-limit",
     "lint": "eslint ./src",
-    "pretest": "npm run lint",
+    "pretest": "npm run prepare && npm run lint",
     "test": "jest --coverage",
     "cosmos": "cosmos",
     "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
@@ -163,7 +163,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "45 kB",
+      "limit": "40 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';

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

@@ -1,14 +1,4 @@
-import { context } from '../../setup-fixture';
-import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
-import { HEADLINE } from '../Headline/Headline.fixture';
-import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
-import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
-import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
-import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { TILE } from '../Tile/Tile.fixture';
-import type { AccordionProps } from './Accordion';
-import { Accordion } from './Accordion';
+import { context } from '../../react/setup-fixture';
 import type {
   GalleryBlockListDef,
   HeadlineBlockListDef,
@@ -19,6 +9,16 @@ import type {
   TextBlockBlockListDef,
   TileBlockListDef,
 } from '../../ui-kit/BlocksList/BlocksListProps';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
+import { HEADLINE } from '../Headline/Headline.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
+import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { TILE } from '../Tile/Tile.fixture';
+import type { AccordionProps } from './Accordion';
+import { Accordion } from './Accordion';
 
 const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockBlockListDef = {
   blockListType: 'TextBlock',

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

@@ -9,9 +9,7 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 export const Accordion = JSX<AccordionProps>(
   ({ title, description, accordionItems, context, className = '', bordered }) => {
     return (
-      <section
-        className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
-      >
+      <section className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}>
         {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
         {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
         {accordionItems?.length ? (

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

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

package/src/components/Blocks.ts

@@ -3,7 +3,6 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Calculator } from './Calculator/Calculator';
-import { CreditCalculator } from './CreditCalculator/CreditCalculator';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
@@ -38,7 +37,6 @@ export const Blocks = {
   Bonus,
   ComparisonTable,
   Calculator,
-  CreditCalculator,
   ExchangeRateTile,
   Footer,
   Gallery,

package/src/components/Bonus/Bonus.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Bonus } from './Bonus';
 import type { BonusContent } from './BonusContent';
 

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -51,4 +51,4 @@
       }
     }
   ]
-}
+}

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.fixture.tsx

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

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -11,13 +11,11 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, subtitle, bonusBenefits, anchor = null }) => {
     return (
       <section
-        className={`font-sans text-primary-text bg-white p-50 flex flex-col ${className}`}
+        className={`font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`}
         id={anchor}
       >
-        {title ? (
-          <Heading headingType="h3" className="text-center mb-[10px]" title={title} />
-        ) : null}
-        {subtitle ? <span className="text-md font-normal text-center">{subtitle}</span> : null}
+        {title ? <Heading headingType="h3" className="mb-[10px]" title={title} /> : null}
+        {subtitle ? <span className="text-md font-normal">{subtitle}</span> : null}
         {bonusBenefits?.length ? (
           <div className={`grid gap-1 ${getElementsColsValue(className)}`}>
             {bonusBenefits.map(renderBonusBenefit)}
@@ -40,9 +38,7 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
         />
       ) : null}
       <div>
-        {bonusBenefit?.label ? (
-          <span className="title-2xs text-center m-0">{bonusBenefit.label}</span>
-        ) : null}
+        {bonusBenefit?.label ? <span className="title-2xs m-0">{bonusBenefit.label}</span> : null}
       </div>
     </div>
   );

package/src/components/Calculator/Calculator.fixture.tsx

@@ -1,13 +1,13 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Calculator } from './Calculator';
 
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type {
+  BonusCalculatorParamsDef,
   CreditCalculatorParamsDef,
-  MortgageCalculatorParamsDef,
   DepositCalculatorParamsDef,
-  BonusCalculatorParamsDef,
+  MortgageCalculatorParamsDef,
 } from './CalculatorContent';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 const buttons: ButtonWithIconProps[] = [
   {

package/src/components/Calculator/Calculator.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { FuncReturnVoid, UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Img } from '../../ui-kit/Img/Img';
-import type { CalculatorBlockDef, CalculatorContent } from './CalculatorContent';
-import { CalculatorNav } from './CalculatorContent';
+import type { CalculatorBlockDef, CalculatorContent, CalculatorNav } from './CalculatorContent';
 import { renderCalculatorBlock } from './renderCalculatorBlock';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
@@ -22,9 +21,6 @@ type NavButtonProps = {
   onClick: FuncReturnVoid<MouseEvent>;
 };
 
-const arrowBtnStyle =
-  'absolute w-[56px] h-[56px] min-h-[56px] max-h-[56px] top-1 z-10 mt-[25px] bg-white rounded-full';
-
 export const Calculator = JSX<CalculatorProps>(
   ({ className = '', context, calcTabs = [], anchor = null }) => {
     const tabsNav = calcTabs.map((_) => _.nav || ({} as CalculatorNav));
@@ -50,22 +46,12 @@ export const Calculator = JSX<CalculatorProps>(
           {tabsNav.length > 1
             ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
             : null}
-          {showPrevButton ? (
-            <ArrowButton
-              className={`${arrowBtnStyle} left-3 top-3`}
-              onClick={handlePrevClick}
-              ariaLabel="Пролистать влево"
-              data-block-control="scroll-left"
-            />
-          ) : null}
-          {showNextButton ? (
-            <ArrowButton
-              className={`${arrowBtnStyle} right-3 top-3 rotate-180`}
-              onClick={handleNextClick}
-              ariaLabel="Пролистать вправо"
-              data-block-control="scroll-right"
-            />
-          ) : null}
+          {renderArrows({
+            handler: [handlePrevClick, handleNextClick],
+            isShown: [showPrevButton, showNextButton],
+            btnClass: ['left-3', 'right-3'],
+            className: 'top-8',
+          })}
         </div>
         <div
           className="flex"

package/src/components/Calculator/getCalculatorParams.ts

@@ -8,7 +8,9 @@ interface GetCalculatorParamsParams {
 export const getCalculatorParams = (params: GetCalculatorParamsParams) => {
   const { tableRows, isAnnuity = false } = params;
 
-  if (!tableRows) return {};
+  if (!tableRows) {
+    return {};
+  }
 
   const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
 

package/src/components/Calculator/getCreditRate.ts

@@ -10,7 +10,9 @@ interface GetCreditRateParams {
 export const getCreditRate = (params: GetCreditRateParams) => {
   const { calculatorParams, isInsurance } = params;
 
-  if (!calculatorParams) return DEFAULT_RATE;
+  if (!calculatorParams) {
+    return DEFAULT_RATE;
+  }
 
   return isInsurance
     ? calculatorParams?.rateWithInsurance || DEFAULT_RATE

package/src/components/Calculator/getMonthlyPayment.ts

@@ -15,7 +15,9 @@ interface GetMonthlyPaymentParams {
 export const getMonthlyPayment = (params: GetMonthlyPaymentParams) => {
   const { calculatorParams, paymentType, rate, sum, months } = params;
 
-  if (!calculatorParams) return 0;
+  if (!calculatorParams) {
+    return 0;
+  }
 
   const finalSum = clamp(
     sum,

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -1,14 +1,7 @@
 import type { JSXBlock } from '../../components/ContentPage/ContentPage';
-import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { CalculatorBlockDef } from './CalculatorContent';
 import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
 
-type EmbeddableCalcBlocks = {
-  blockCalcTabs?: CalculatorBlockDef[];
-  context: ContentPageContext;
-  className?: string;
-};
-
 export const renderCalculatorBlock =
   ({ context, className }: any) =>
   (blockCalcTabs: CalculatorBlockDef, i: number) => {

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { ComparisonTable } from './ComparisonTable';
 import type { Column } from './ComparisonTableContent';
 
@@ -21,15 +21,6 @@ const image2: Picture = {
   },
 };
 
-const image3: Picture = {
-  src: 'card-3.png',
-  format: 'webp',
-  size: {
-    width: 100,
-    height: 63,
-  },
-};
-
 const rowHeaders = [
   { title: 'Начисление процентов на остаток по счету' },
   { title: 'Начисление процентов на остаток по счету' },
@@ -96,30 +87,6 @@ const columns: Column[] = [
       ],
     ],
   },
-  {
-    header: {
-      title: 'Профсоюзная',
-      image: image3,
-      link: {
-        text: 'Подробнее',
-        href: '/credits',
-      },
-    },
-    data: [
-      [{ label: 'Нет' }],
-      [{ label: 'Бесплатно' }],
-      [{ label: 'Есть' }],
-      [{ label: 'До 20%' }],
-      [
-        {
-          label: 'Бесплатно',
-          description: 'При обороте по карте от 10000 ₽ в месяц',
-        },
-      ],
-      [{ label: '69 рублей в месяц' }],
-      [{ description: 'Для членов профсоюзных организаций' }],
-    ],
-  },
 ];
 export default {
   default: (
@@ -131,7 +98,7 @@ export default {
         context={context}
         rowHeaders={rowHeaders}
         orientation="vertical"
-        columns={Array(2).fill(columns).flat()}
+        columns={columns}
         visibleRowLength={2}
       />
     </div>

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

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