@redneckz/wildless-cms-uni-blocks 0.5.5 → 0.5.7

package/src/components/Blocks.ts

@@ -6,6 +6,7 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
@@ -16,7 +17,6 @@ import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBloc
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
-import { Navigation } from './Navigation/Navigation';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { PictureText } from './PictureText/PictureText';
@@ -32,7 +32,6 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
-import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 
 export const Blocks = {
   Accordion,
@@ -63,7 +62,6 @@ export const Blocks = {
   TariffsTable,
   TextBlock,
   Tile,
-  Navigation,
   Placeholder,
   BonusBenefitsBlock,
   SafeDepositRental,

package/src/components/Bonus/BonusContent.ts

@@ -1,21 +1,19 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-/** @title Плитка */
-interface BonusItems {
-  /** @title Бонусы */
-  title?: string;
-  /** @title Описание плитки */
-  description?: string;
+/**
+ * @title Плитка
+ */
+export type BonusItem = HeadlineCommonProps & {
   /** @title Количество баллов */
   bonusCount?: string;
   /** @title Наименование */
   bonusName?: string;
-}
+};
 
 /**
  * @title Блок Бонусы
  */
 export type BonusContent = HeadlineCommonProps & {
   /** @title Список плиток */
-  bonusItems?: BonusItems[];
+  bonusItems?: BonusItem[];
 };

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,37 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
+import { Headline } from '../Headline/Headline';
 import type { BonusBenefit, BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
 import { getElementsColsValue } from './getElementsColsValue';
-import { Headline } from '../Headline/Headline';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`}
+  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => (
+    <BlockWrapper
+      className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
+      context={context}
+      {...rest}
+    >
+      <Headline
         context={context}
-        {...rest}
-      >
-        <Headline
-          context={context}
-          className="!p-0"
-          title={title}
-          description={subtitle}
-          headlineVersion="M"
-          align="center"
-        />
-        {bonusBenefits?.length ? (
-          <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
-            {bonusBenefits.map(renderBonusBenefit)}
-          </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+        className="!p-0"
+        title={title}
+        description={subtitle}
+        headlineVersion="M"
+        align="center"
+      />
+      {bonusBenefits?.length ? (
+        <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
+          {bonusBenefits.map(renderBonusBenefit)}
+        </div>
+      ) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
@@ -39,10 +37,10 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
     <div key={String(i)} className="flex flex-col items-center max-w-[292px]">
       {bonusBenefit?.icon ? (
         <Img
-          className="h-[180px] w-[160px] min-w-[160px] min-h-[160px]"
+          className="h-[160px] w-[180px] min-w-[180px] min-h-[160px]"
           image={bonusBenefit.icon}
-          width="160"
-          height="180"
+          width="180"
+          height="160"
         />
       ) : null}
       <div>

package/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -1,23 +1,17 @@
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
+import type { LabelProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Бонус и преимущество
  */
-export interface BonusBenefit {
-  /** @title Название */
-  label?: string;
-  /** @title Изображение */
-  icon?: Picture;
-}
+export type BonusBenefit = LabelProps & IconProps;
 
 /**
  * @title Блок бонусов и преимуществ
  */
-export interface BonusBenefitsBlockContent {
-  /** @title Заголовок */
-  title?: string;
+export type BonusBenefitsBlockContent = TitleProps & {
   /** @title Подзаголовок */
   subtitle?: string;
   /** @title Список бонусов */
   bonusBenefits?: BonusBenefit[];
-}
+};

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -8,11 +8,12 @@ import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useBonusCalculatorParams } from './useBonusCalculatorParams';
+import { renderFootnote } from './renderFootnote';
 
 export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockProps {}
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
-  ({ context, className = '', sourceBookDir = '', buttons }) => {
+  ({ context, className = '', sourceBookDir = '', buttons, footnote }) => {
     const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
     const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
     const userInputParams = {
@@ -54,9 +55,10 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
             <Rate title="Баллов за месяц" rate={monthBonus} rateBlockClassName="tracking-[-14px]" />
           ) : null}
         </div>
-        <div className="w-[240px]">
+        <div className="w-full max-w-[350px]">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
           {renderButtonSection(context, buttons)}
+          {renderFootnote(footnote)}
         </div>
       </section>
     );

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

@@ -6,7 +6,6 @@ import type {
   BonusCalculatorParamsDef,
   CreditCalculatorParamsDef,
   DepositCalculatorParamsDef,
-  MortgageCalculatorParamsDef,
 } from './CalculatorContent';
 
 const buttons: ButtonWithIconProps[] = [
@@ -24,21 +23,13 @@ const buttons: ButtonWithIconProps[] = [
   },
 ];
 
+const footnote =
+  'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка. ';
+
 const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
   calcType: 'CreditCalculatorForm',
   buttons: buttons,
-};
-
-const MORTGAGE_CALCULATOR_BLOCK: MortgageCalculatorParamsDef = {
-  calcType: 'MortgageCalculatorForm',
-  isAnnuity: true,
-  minSum: 15000,
-  maxSum: 7500000,
-  minMonths: 2,
-  maxMonths: 120,
-  rateWithInsurance: 4,
-  rateWithoutInsurance: 5.5,
-  buttons: buttons,
+  footnote,
 };
 
 const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
@@ -49,6 +40,7 @@ const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
   maxMonths: 120,
   rate: 5.9,
   buttons: buttons,
+  footnote,
 };
 
 const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
@@ -72,14 +64,6 @@ export default {
             },
             calculatorBlock: CREDIT_CALCULATOR_BLOCK,
           },
-          {
-            nav: {
-              title: 'Ипотека с господдержкой',
-              description: 'Ставка от 6%, срок до 30 лет',
-              icon: { icon: 'StateMortgageIcon' },
-            },
-            calculatorBlock: MORTGAGE_CALCULATOR_BLOCK,
-          },
           {
             nav: {
               title: 'Вклад «Доходный»',

package/src/components/Calculator/CalculatorContent.ts

@@ -1,14 +1,15 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { TitleProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Footnote } from '../../model/Footnote';
 
-export interface CommonCalculatorProps {
+export type CommonCalculatorProps = Footnote & {
   /** @title Кнопки */
   buttons?: ButtonWithIconProps[];
   /** @title Адрес справочника */
   sourceBookDir?: string;
-}
+};
 
 /**
  * TODO: данные из справочника
@@ -36,28 +37,6 @@ export interface CreditCalculatorParams {
   rateWithoutInsurance?: number;
 }
 
-/**
- * TODO: данные из справочника
- **/
-export interface MortgageCalculatorParams {
-  /** @hidden */
-  isAnnuity?: boolean;
-  /** @hidden */
-  minInitialContribution?: number;
-  /** @hidden */
-  minSum?: number;
-  /** @hidden */
-  maxSum?: number;
-  /** @hidden */
-  minMonths?: number;
-  /** @hidden */
-  maxMonths?: number;
-  /** @hidden */
-  rateWithInsurance?: number;
-  /** @hidden */
-  rateWithoutInsurance?: number;
-}
-
 /**
  * TODO: данные из справочника
  **/
@@ -122,16 +101,6 @@ export type CreditCalculatorParamsDef = TitleProps &
     calcType: 'CreditCalculatorForm';
   };
 
-/**
- * @title Ипотечный калькулятор
- * @default {"calcType": "MortgageCalculatorForm"}
- */
-export type MortgageCalculatorParamsDef = TitleProps &
-  MortgageCalculatorParams &
-  CommonCalculatorProps & {
-    calcType: 'MortgageCalculatorForm';
-  };
-
 /**
  * @title Калькулятор вкладов
  * @default {"calcType": "DepositCalculatorForm"}
@@ -158,20 +127,13 @@ export type BonusCalculatorParamsDef = TitleProps &
 export type CalculatorBlockDef =
   | EmptyOption
   | CreditCalculatorParamsDef
-  | MortgageCalculatorParamsDef
   | DepositCalculatorParamsDef
   | BonusCalculatorParamsDef;
 
 /**
  * @title Кнопка навигации
  */
-export interface CalculatorNav {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
-  icon?: Picture;
-}
+export type CalculatorNav = HeadlineCommonProps & IconProps;
 
 /**
  * @title Вкладка

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -12,7 +12,7 @@ export interface CalculatorValueBlockProps {
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => {
     return (
-      <div className={`mb-5 ${className}`}>
+      <div className={`mb-7 ${className}`}>
         {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
         {value ? (
           <div className="text-h3">

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -11,6 +11,7 @@ import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useCreditCalculatorParams } from './useCreditCalculatorParams';
+import { renderFootnote } from './renderFootnote';
 
 export const ANNUITY = 'annuity';
 export const DIFFERENTIAL = 'differential';
@@ -29,7 +30,7 @@ const paymentTypeItems = [
 export interface CreditCalculatorProp extends CommonCalculatorProps, UniBlockProps {}
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ context, className = '', sourceBookDir, buttons }) => {
+  ({ context, className = '', sourceBookDir, buttons, footnote }) => {
     const [isAnnuity, toggleIsAnnuity] = useState(false);
     const [isInsurance, toggleIsInsurance] = useState(true);
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
@@ -81,7 +82,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
           rateBlockClassName="tracking-[-25px]"
           unit="%"
         />
-        <div className="w-[351px]">
+        <div className="w-full max-w-[350px]">
           <CalculatorValueBlock
             title={isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц'}
             value={calculatorParams.monthlyPayment}
@@ -93,6 +94,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             onChange: (text: string) => toggleIsAnnuity(text === ANNUITY),
           })}
           {renderButtonSection(context, buttons)}
+          {renderFootnote(footnote)}
         </div>
       </section>
     );

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -17,16 +17,33 @@ import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
+import { renderFootnote } from './renderFootnote';
 
 export interface DepositCalculatorProp
   extends DepositCalculatorParams,
     CommonCalculatorProps,
     UniBlockProps {}
 
+const EVERY_MONTH = 'everyMonth';
+const AT_END_TERM = 'atEndTerm';
+
+const depositTypeItems = [
+  {
+    id: EVERY_MONTH,
+    text: 'Ежемесячно',
+  },
+  {
+    id: AT_END_TERM,
+    text: 'В конце срока',
+  },
+];
+
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
-  ({ context, className = '', buttons, rate }) => {
+  ({ context, className = '', rate, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
+    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
 
     const income = 948841;
     const finallySum = 1218841;
@@ -54,14 +71,20 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
           )}
         </div>
         <Rate rate={rate || 1} rateBlockClassName="tracking-[-25px]" unit="%" />
-        <div className="w-[351px]">
+        <div className="w-full max-w-[350px]">
           {income ? (
             <CalculatorValueBlock title="Доход по вкладу" value={income} postfix="₽" prefix="+" />
           ) : null}
           {finallySum ? (
             <CalculatorValueBlock title="Сумма в конце срока" value={finallySum} postfix="₽" />
           ) : null}
+          {renderPaymentTypeSelector(context, {
+            items: depositTypeItems,
+            checkedItem: isEveryMonth ? EVERY_MONTH : AT_END_TERM,
+            onChange: (text: string) => toggleIsEveryMonth(text === EVERY_MONTH),
+          })}
           {renderButtonSection(context, buttons)}
+          {renderFootnote(footnote)}
         </div>
       </section>
     );

package/src/components/Calculator/EmbeddableCalcBlocks.tsx

@@ -1,17 +1,14 @@
 import { BonusCalculatorForm, BonusCalculatorProps } from './BonusCalculatorForm';
 import { CreditCalculatorForm, CreditCalculatorProp } from './CreditCalculatorForm';
 import { DepositCalculatorForm, DepositCalculatorProp } from './DepositCalculatorForm';
-import { MortgageCalculatorForm, MortgageCalculatorProp } from './MortgageCalculatorForm';
 
 export type EmbeddableCalcProps =
   | CreditCalculatorProp
-  | MortgageCalculatorProp
   | DepositCalculatorProp
   | BonusCalculatorProps;
 
 export const EmbeddableCalcBlocks = {
   CreditCalculatorForm,
-  MortgageCalculatorForm,
   DepositCalculatorForm,
   BonusCalculatorForm,
 };

package/src/components/Calculator/renderFootnote.tsx

@@ -0,0 +1,2 @@
+export const renderFootnote = (text) =>
+  text ? <p className="text-s-light text-secondary-text mt-7">{text}</p> : null;

package/src/components/CardTransfer/CardTransferContent.ts

@@ -1,13 +1,12 @@
+import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+
 /**
  * @title Перевод с карты на карту
  */
-export type CardTransferContent = {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Название поля */
-  label?: string;
-  /** @title Плейсхолдер поля */
-  placeholder?: string;
-  /** @title Текст кнопки */
-  buttonText?: string;
-};
+export type CardTransferContent = LabelProps &
+  TitleProps & {
+    /** @title Плейсхолдер */
+    placeholder?: string;
+    /** @title Текст кнопки */
+    buttonText?: string;
+  };

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

@@ -1,8 +1,8 @@
 import type { Picture } from '../../model/Picture';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Catalog, CatalogProps } from './Catalog';
-import type { CatalogProductColor } from './CatalogContent';
 
 const payRing: Picture = {
   src: 'pay-ring.png',
@@ -14,7 +14,7 @@ const payRing: Picture = {
   title: 'pay-ring',
 };
 
-const colors: CatalogProductColor[] = ['black', 'white'];
+const colors: ProductColorVersion[] = ['black', 'white'];
 
 const buttonPrimary: ButtonWithIconProps = {
   href: '/credit-cards',

package/src/components/Catalog/CatalogCard.tsx

@@ -1,12 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { CatalogCardType, CatalogProductColor } from './CatalogContent';
+import type { CatalogCardType } from './CatalogContent';
 
 export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
   version?: BlockVersion;
@@ -18,7 +19,7 @@ const iconVersionMap = {
   secondary: 'black',
 };
 
-const cardStyleMap: Record<CatalogProductColor, string> = {
+const cardStyleMap: Record<ProductColorVersion, string> = {
   black: 'bg-black',
   white: 'bg-white',
 };
@@ -48,7 +49,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
   },
 );
 
-const renderColorOption = (color: CatalogProductColor, i: number) => (
+const renderColorOption = (color: ProductColorVersion, i: number) => (
   <span
     key={String(i)}
     className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}

package/src/components/Catalog/CatalogContent.ts

@@ -1,17 +1,13 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
-/**
- * @enumNames ["Черный", "Белый"]
- */
-export type CatalogProductColor = 'black' | 'white';
-
 export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
   /** @title Цена в рублях */
   price?: number;
   /** @title Доступные цвета */
-  colors?: CatalogProductColor[];
+  colors?: ProductColorVersion[];
   /**
    * @title Кнопка
    * @default {

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,43 +1,25 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
-
-/**
- * @hidden
- */
-export type Row = {
-  header: RowHeader;
-  data: CellData[][];
-};
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Ячейка
  */
-export interface CellData {
-  /** @title Заголовок */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type CellData = LabelProps & DescriptionProps;
 
 /**
  * @title Шапка колонки
  */
-export interface ColumnHeader {
-  /** @title Заголовок */
-  title?: string;
+export type ColumnHeader = TitleProps & {
   /** @title Подзаголовок */
   subtitle?: string;
-  /**
-   * @default { "format": "webp", "size": { "width": 24 } }
-   */
+  /** @default { "format": "webp", "size": { "width": 24 } } */
   icon?: Picture;
-  /**
-   * @default { "format": "webp", "size": { "width": 100 } }
-   */
+  /** @default { "format": "webp", "size": { "width": 100 } } */
   image?: Picture;
   link?: LinkProps;
-}
+};
 
 /**
  * @title Продукт
@@ -56,32 +38,12 @@ export interface RowHeader {
   title?: string;
 }
 
-/**
- * @title Ячейка
- */
-export interface TableColumnData {
-  rowHeader?: string;
-  cell: CellData[];
-}
-
-/**
- * @title Параметр
- */
-export interface TableColumnHeader {
-  /** @title Заголовок */
-  title?: string;
-
-  icon?: Picture;
-}
-
 /**
  * @title Сравнительная таблица
  */
-export interface ComparisonTableContent {
-  /** @title Заголовок */
-  title?: string;
+export type ComparisonTableContent = TitleProps & {
   /** @title Параметры */
-  rowHeaders?: RowHeader[];
+  rowHeaders?: TitleProps[];
   /** @title Продукты */
   columns?: Column[];
   /** @title Закрасить первую колонку */
@@ -90,4 +52,4 @@ export interface ComparisonTableContent {
   visibleRowLength?: number;
   /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
   orientation?: ListOrientation; // TODO: мобильный проп
-}
+};

package/src/components/ComparisonTable/TableColumn.tsx

@@ -1,11 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { IconProps } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
+import type { TitleProps } from '../../model/HeadlineType';
 import { Button } from '../../ui-kit/Button/Button';
+import { CellData } from './ComparisonTableContent';
 import { GRADIENT } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
-import type { TableColumnData, TableColumnHeader } from './ComparisonTableContent';
+
+export interface TableColumnData {
+  rowHeader?: string;
+  cell: CellData[];
+}
+
+export type TableColumnHeader = TitleProps & IconProps;
 
 export interface TableColumnProps extends UniBlockProps {
   header: TableColumnHeader;