@redneckz/wildless-cms-uni-blocks 0.4.2 → 0.4.4

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -1,151 +1,20 @@
-import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
+import {
+  columns,
+  columnsTable,
+  TARIFFS_TABLE_FIXTURE_EXAMPLE,
+  TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE,
+} from './dataFixture';
 import { TariffsTable } from './TariffsTable';
-import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
-
-const image: Picture = {
-  src: 'payment-systems.png',
-  format: 'webp',
-  size: {
-    width: 288,
-    height: 56,
-  },
-  alt: 'Платёжные системы',
-  title: 'Платёжные системы',
-};
-
-const rowHeaders: TariffsTableRowHeader[] = [
-  { title: 'Начисление процентов на остаток по счету', icon: { icon: 'OkIcon' } },
-  { title: 'Снятие наличных', icon: { icon: 'GlassIcon' } },
-  { title: 'Оформление онлайн', icon: { icon: 'ShieldTickIcon' } },
-  { title: 'Кэшбэк баллами' },
-  { title: 'Стоимость обслуживания' },
-  { title: 'Стоимость SMS-сервиса' },
-  { title: 'Дополнительная информация' },
-];
-
-const columns: TariffsTableColumn[] = [
-  {
-    data: [
-      [{ label: 'Нет' }],
-      [
-        {
-          label: 'Бесплатно',
-          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
-        },
-        {
-          label: 'Бесплатно',
-          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
-        },
-      ],
-      [{ label: 'Нет' }],
-      [{ label: 'Платёжные системы картинкой' }, { image: image }],
-      [
-        { label: 'Кнопки-иконки' },
-        {
-          buttons: [
-            {
-              icon: { icon: 'AppleIcon' },
-              rounded: true,
-              version: 'secondary',
-              href: '/',
-              target: '_blank',
-            },
-            {
-              icon: { icon: 'PlayMarketIcon' },
-              rounded: true,
-              version: 'secondary',
-              href: '/',
-              target: '_blank',
-            },
-          ],
-        },
-      ],
-      [
-        {
-          label: 'Бесплатно',
-        },
-      ],
-      [
-        {
-          image: {
-            src: 'money-1.png',
-            format: 'webp',
-            size: {
-              width: 140,
-              height: 140,
-            },
-            alt: 'Деньги',
-          },
-        },
-      ],
-    ],
-  },
-  {
-    data: [
-      [{ label: 'Нет' }],
-      [
-        {
-          label: 'Бесплатно',
-          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
-        },
-        {
-          label: '1%',
-          description: 'В сторонних банкоматах, минимум 150 руб',
-        },
-      ],
-      [{ label: 'Нет' }],
-      [{ label: 'До 20%' }],
-      [
-        {
-          label: 'Бесплатно',
-          description: 'При обороте по карте от 10000 ₽ в месяц',
-        },
-      ],
-      [
-        { label: '69 рублей в месяц' },
-        {
-          list: {
-            items: ['item 1', 'item 2', 'item 3'],
-          },
-        },
-      ],
-      [
-        {
-          description:
-            'Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic',
-        },
-      ],
-    ],
-  },
-  {
-    data: [
-      [{ label: 'Нет' }],
-      [{ label: 'Бесплатно' }],
-      [{ label: 'Есть' }],
-      [{ label: 'До 20%' }],
-      [
-        {
-          label: 'Бесплатно',
-          description: 'При обороте по карте от 10000 ₽ в месяц',
-        },
-      ],
-      [{ label: '69 рублей в месяц' }],
-      [{ description: 'Для членов профсоюзных организаций' }],
-    ],
-  },
-];
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
-        title="Другие дебетовые карты Россельхозбанка"
-        description="Описание предоставляемого продукта"
         context={context}
-        rowHeaders={rowHeaders}
-        columns={Array(2).fill(columns).flat()}
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(2).fill(columns).flat()}
       />
     </div>
   ),
@@ -153,11 +22,9 @@ export default {
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
-        title="Другие дебетовые карты Россельхозбанка"
-        description="Описание предоставляемого продукта"
         context={context}
-        rowHeaders={rowHeaders}
-        columns={columns.slice(0, 1)}
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={columns.slice(0, 1)}
         hiddenRowsNum={2}
       />
     </div>
@@ -166,11 +33,9 @@ export default {
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
-        title="Другие дебетовые карты Россельхозбанка"
-        description="Описание предоставляемого продукта"
         context={context}
-        rowHeaders={rowHeaders}
-        columns={columns.slice(0, 2)}
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(2).fill(columns).flat()}
         hiddenRowsNum={2}
       />
     </div>
@@ -179,13 +44,21 @@ export default {
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
-        title="Другие дебетовые карты Россельхозбанка"
-        description="Описание предоставляемого продукта"
         context={context}
-        rowHeaders={rowHeaders}
-        columns={columns.slice(0, 3)}
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(3).fill(columns).flat()}
         hiddenRowsNum={2}
       />
     </div>
   ),
+  '1 columns with inner table': (
+    <div className="container grid grid-cols-12">
+      <TariffsTable
+        className="col-span-12"
+        context={context}
+        {...TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(1).fill(columnsTable).flat()}
+      />
+    </div>
+  ),
 };

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type {
-  TariffsTableCellData,
+  CellDef,
   TariffsTableColumn,
   TariffsTableContent,
   TariffsTableRowHeader,
@@ -13,7 +13,15 @@ import { TariffsTableVertical } from './TariffsTableVertical';
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
-  ({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
+  ({
+    className,
+    context,
+    title,
+    description,
+    tariffsColumns: columns,
+    rowHeaders,
+    orientation = 'vertical',
+  }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
     const headingMargin = description ? 'mb-2' : 'mb-5';
@@ -34,7 +42,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
 function renderOrientationTable(orientation, tiles, context) {
   return orientation === 'vertical' ? (
-    <TariffsTableVertical tiles={tiles} />
+    <TariffsTableVertical context={context} tiles={tiles} />
   ) : (
     <TariffsTableHorizontal context={context} tiles={tiles} />
   );
@@ -43,10 +51,7 @@ function renderOrientationTable(orientation, tiles, context) {
 const getColData = (columns: TariffsTableColumn[] | undefined) =>
   columns?.[0].data ? columns[0].data : [];
 
-const getTiles = (
-  rowHeaders: TariffsTableRowHeader[] | undefined,
-  colData: TariffsTableCellData[][],
-) =>
+const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
   rowHeaders?.map((header, i) => ({
     header,
     data: colData?.[i] || [{}],

package/src/components/TariffsTable/TariffsTable.tsx

@@ -7,27 +7,36 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
-import { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
+import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
 import { COLS_LENGTH_FOR_SCROLL } from './constants';
-import type {
-  TariffsTableCellData,
-  TariffsTableColumn,
-  TariffsTableContent,
-  TariffsTableRowHeader,
-} from './TariffsTableContent';
+import type { TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
-  ({ className, context, title, description, rowHeaders, columns, hiddenRowsNum = 0, ...rest }) => {
+  ({
+    className = '',
+    context,
+    title,
+    description,
+    rowHeaders,
+    tariffsColumns: columns,
+    hiddenRowsNum = 0,
+    ...rest
+  }) => {
     const [activeCardIndex, setActiveCardIndex] = useState(0);
 
-    const colData = getColData(columns);
-    const rowData = getRowData(rowHeaders, colData);
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders?.map((header, i) => ({
+      header,
+      data: colData.map((col) => col?.[i] || []),
+    }));
+
+    const columnsLength = colData.length;
 
     const tableArrowScrollControlProps = useTableArrowScrollControl({
-      columnsLength: colData.length,
+      columnsLength,
       colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
       activeCardIndex,
       setActiveCardIndex,
@@ -35,19 +44,21 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     const foldableBlocks = rowData?.map((row, i, { length }) => (
       <TariffsTableRow
+        context={context}
         key={String(i)}
         row={row}
         isLastRow={i + 1 === length}
         activeCardIndex={activeCardIndex}
+        rowIdx={i}
       />
     ));
 
     return (
       <BlockWrapper
+        className={`bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${
+          columnsLength > 1 ? 'pr-0' : ''
+        } ${className}`}
         context={context}
-        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
-          className || ''
-        }`}
         {...rest}
       >
         {title ? (
@@ -76,21 +87,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
   },
 );
 
-type ColDataType = (TariffsTableCellData[][] | undefined)[];
-type RowDataType = { header: TariffsTableRowHeader; data: any }[] | undefined;
-
-const getColData = (columns: TariffsTableColumn[] | undefined): ColDataType =>
-  columns?.map(({ data }) => data) || [];
-
-const getRowData = (
-  rowHeaders: TariffsTableRowHeader[] | undefined,
-  colData: ColDataType,
-): RowDataType =>
-  rowHeaders?.map((header, i) => ({
-    header,
-    data: colData.map((col) => col?.[i] || [{}]),
-  }));
-
 const Wrapper = JSX<
   {
     tableArrowScrollControlProps: TableArrowScrollControlProps;

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,64 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
-import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
-import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
+import type { UniBlockProps } from '../../types';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { EmbeddableCellData } from './EmbeddableCellData';
+import type { CellDef, TariffsTableCellIndexProps } from './TariffsTableContent';
 
-export interface TariffsTableCellProps {
-  cell: TariffsTableCellData[];
+export interface TariffsTableCellProps extends UniBlockProps {
+  rowIdx: number;
+  cellIdx: number;
+  cells: CellDef[];
   isLastRow: boolean;
 }
 
-export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow }) => {
-  const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
-    isLastRow ? 'border-t-0 rounded-b-md' : ''
-  }`;
+export const TariffsTableCell = JSX<TariffsTableCellProps>(
+  ({ context, cells, isLastRow, rowIdx, cellIdx }) => {
+    const cellWrapperClasses = `first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
+      isLastRow ? 'border-t-0 rounded-b-md' : ''
+    }`;
 
-  return (
-    <div className={cellWrapperClasses} role="cell">
-      <div>{cell.map(renderCellInner)}</div>
-    </div>
-  );
-});
-
-const renderCellInner = (
-  { label, description, list, image, buttons }: TariffsTableCellData,
-  i: number,
-) => (
-  <div key={String(i)} className="first:pt-5 last:pb-5">
-    {i > 0 && (
-      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
-    )}
-    {label ? <div className="text-xl m-0">{label}</div> : null}
-    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
-    {list?.items?.length ? renderList(list) : null}
-    {image ? <Img image={image} /> : null}
-    {buttons?.length ? renderButtons(buttons) : null}
-  </div>
+    return (
+      <div className={cellWrapperClasses} role="cell">
+        {cells.map(renderCellInner(rowIdx, context, cellIdx))}
+      </div>
+    );
+  },
 );
 
-const renderList = (list: TariffsTableList) => (
-  <List
-    className="flex flex-col justify-between items-start text-s"
-    version="gray"
-    items={list.items}
-    isDotted={list.isDotted ?? true}
-  />
-);
+const renderCellInner =
+  (rowIdx: number, context: ContentPageContext, cellIdx: number) => (cell: CellDef, i: number) => {
+    return (
+      <div
+        key={String(i)}
+        className={cell?.tableCellType === 'Table' ? 'mx-0.5' : `first:pt-5 last:pb-5 pl-10`}
+      >
+        {i > 0 ? <div className="h-5" /> : null}
+        {renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })}
+      </div>
+    );
+  };
 
-const renderButtons = (buttons: ButtonWithIconProps[]) => (
-  <div>
-    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
-      <Button
-        className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
-        key={String(idx)}
-        ariaLabel={getButtonAriaLabel(icon)}
-        rounded={rounded}
-        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
-        {...buttonProps}
-      />
-    ))}
-  </div>
-);
+const renderCell = (
+  cell: CellDef,
+  context: ContentPageContext,
+  indexes: TariffsTableCellIndexProps,
+) => {
+  if (!cell) {
+    return null;
+  }
+
+  const { tableCellType: type, ...rest } = cell;
+
+  if (!type || !(type in EmbeddableCellData)) {
+    return null;
+  }
+
+  const EmbeddableCellInner = EmbeddableCellData[type];
+
+  return <EmbeddableCellInner context={context} {...rest} {...indexes} />;
+};

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,67 +1,131 @@
+import type { EmptyOption } from '../../model/EmptyOptionType';
+import type { DescriptionProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { HeadingProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { CellData } from '../ComparisonTable/ComparisonTableContent';
-import type { HeadlineCommonProps, TitleProp } from '../../model/HeadlineType';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import type { ListProps } from '../../ui-kit/List/ListProps';
+
+/**
+ * @hidden
+ */
+export interface TariffsTableCellIndexProps {
+  rowIdx: number;
+  cellIdx: number;
+  fieldIdx: number;
+}
+
+/**
+ * @title Параметр
+ */
+export type TariffsTableRowHeader = HeadingProps & {
+  /**
+   * @default { "format": "webp", "size": { "width": 24, "height": 24 } }
+   */
+  icon?: Picture;
+};
 
 /**
  * @title Ряд
  */
-export type TariffsTableRowData = {
+export type Data = {
   header: TariffsTableRowHeader;
-  data: TariffsTableCellData[][];
+  data: CellDef[][];
 };
 
 /**
- * @title Колонка
+ * @title Изображение
+ * @default { "image": { "format": "webp", "size": { "width": 24, "height": 24 } } }
  */
-export interface TariffsTableColumn {
-  /** @title Данные */
-  data?: TariffsTableCellData[][];
-}
+export type ImageCellDef = ImageContent & {
+  /**
+   * @default Img
+   */
+  tableCellType: 'Img';
+};
 
 /**
- * @title Список
+ * @title Кнопки
  */
-export type TariffsTableList = ListContent & {
-  /** @title Маркеры */
-  isDotted?: boolean;
+export type ButtonsCellDef = ButtonContent & {
+  /**
+   * @default Buttons
+   */
+  tableCellType: 'Buttons';
 };
 
 /**
- * @title Ячейка
+ * @title Заголовок и описание
  */
-export type TariffsTableCellData = CellData &
-  ImageContent &
-  ButtonContent & {
-    list?: TariffsTableList;
-  };
+export interface LabelDescriptionCell {
+  /** @title Заголовок */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+}
 
 /**
- * @title Параметр
+ * @title Заголовок и описание
  */
-export type TariffsTableRowHeader = TitleProp & {
-  icon?: Picture;
+export type LabelDescriptionCellDef = LabelDescriptionCell & {
+  /**
+   * @default LabelDescription
+   */
+  tableCellType: 'LabelDescription';
 };
 
 /**
- * @title Таблица тарифов
+ * @title Список
  */
-export type TariffsTableContent = HeadlineCommonProps & {
-  /** @title Колонки */
-  columns?: TariffsTableColumn[];
-  /** @title Параметры */
-  rowHeaders?: TariffsTableRowHeader[];
-  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-  orientation?: ListOrientation;
-  /** @title Скрывать строк */
-  hiddenRowsNum?: number;
+export type ListBlockDef = ListProps & {
+  /**
+   * @default List
+   */
+  tableCellType: 'List';
 };
 
-/** @hidden */
-export type TariffsTableTileCellProps = {
-  header: TariffsTableRowHeader;
-  data: TariffsTableCellData[];
+/**
+ * @title Таблица
+ */
+export type InnerTableBlockDef = TariffsTableInnerContent & {
+  /**
+   * @default Table
+   */
+  tableCellType: 'Table';
 };
+
+/**
+ * @title Содержимое ячейки
+ */
+export type CellDef =
+  | EmptyOption
+  | ImageCellDef
+  | ButtonsCellDef
+  | LabelDescriptionCellDef
+  | ListBlockDef
+  | InnerTableBlockDef;
+
+/**
+ * @title Колонка
+ */
+export interface TariffsTableColumn {
+  /** @title Данные */
+  data?: CellDef[][];
+}
+
+/**
+ * @title Таблица тарифов
+ */
+export type TariffsTableContent = HeadingProps &
+  DescriptionProps & {
+    /** @title Колонки */
+    tariffsColumns?: TariffsTableColumn[];
+    /** @title Параметры */
+    rowHeaders?: TariffsTableRowHeader[];
+    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+    orientation?: ListOrientation;
+    /** @title Скрывать строк */
+    hiddenRowsNum?: number;
+  };

package/src/components/TariffsTable/TariffsTableHorizontal.tsx

@@ -1,13 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import { TariffsTableTileCell } from './TariffsTableTileCell';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import type { TariffsTableTileCellProps } from './TariffsTableContent';
-
-export const TariffsTableHorizontal = JSX<{
-  context: ContentPageContext;
+import { TariffsTableTileCell, TariffsTableTileCellProps } from './TariffsTableTileCell';
+export interface TariffsTableHorizontalProps extends UniBlockProps {
   tiles: TariffsTableTileCellProps[];
-}>(({ tiles, context }) => (
+}
+
+export const TariffsTableHorizontal = JSX<TariffsTableHorizontalProps>(({ tiles, context }) => (
   <SwipeListControl context={context}>
     {tiles.map((tile, i) => (
       <TariffsTableTileCell key={String(i)} {...tile} />