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

package/mobile/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/mobile/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} />

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

@@ -1,28 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img/Img';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
-import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
-import type { TariffsTableRowData } from './TariffsTableContent';
+import type { Data } from './TariffsTableContent';
+import { TariffsTableRowContainer } from './TariffsTableRowContainer';
 
-export interface TariffsTableRowProps {
-  className?: string;
-  row: TariffsTableRowData;
+export interface TariffsTableRowProps extends UniBlockProps {
+  row: Data;
   activeCardIndex: number;
   isLastRow: boolean;
+  rowIdx: number;
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeCardIndex, isLastRow }) => {
+  ({ row: { header, data }, activeCardIndex, isLastRow, context, rowIdx }) => {
     return (
-      <TableRowContainer>
+      <TariffsTableRowContainer context={context} rowIdx={rowIdx}>
         <div
           className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
             !isLastRow ? 'border-solid' : ''
           }`}
         >
-          <div className="flex items-center text-primary-text">
+          <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
               <Img
                 className="mr-[14px] max-w-6 max-h-6"
@@ -41,12 +42,19 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
             columnWidth={COLUMN_WIDTH}
             version="tariff"
           >
-            {data.map((cell, i) => (
-              <TariffsTableCell key={String(i)} cell={cell} isLastRow={isLastRow} />
+            {data.map((cells, i) => (
+              <TariffsTableCell
+                key={String(i)}
+                cells={cells}
+                isLastRow={isLastRow}
+                rowIdx={rowIdx}
+                cellIdx={i}
+                context={context}
+              />
             ))}
           </TableCarouselContainer>
         ) : null}
-      </TableRowContainer>
+      </TariffsTableRowContainer>
     );
   },
 );

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

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { EventBus } from '../../EventBus/EventBus';
+import type { VNode } from '../../model/VNode';
+import type { UniBlockProps } from '../../types';
+import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
+
+export interface TariffsTableRowContainerProps extends UniBlockProps {
+  children?: VNode;
+  rowIdx: number;
+}
+
+export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
+  ({ context, children, rowIdx }) => {
+    const [dataUrl, setDataUrl] = useState<string | undefined>(undefined);
+
+    useEffect(
+      () =>
+        EventBus.inst.subscribe('tariffInnerTable', (event) => {
+          setDataUrl(rowIdx === event.rowIdx ? event.dataUrl : undefined);
+        }),
+      [rowIdx],
+    );
+
+    return (
+      <div className="self-start flex flex-col" role="row">
+        <div className="flex">{children}</div>
+        {dataUrl ? (
+          <div className="origin-top animate-expansion">
+            <InnerTable context={context} dataUrl={dataUrl} />
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

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

@@ -1,62 +1,44 @@
 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 { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { EmbeddableCellData } from './EmbeddableCellData';
 import { TableTileHeader } from './TableTileHeader';
-import type {
-  TariffsTableCellData,
-  TariffsTableList,
-  TariffsTableTileCellProps,
-} from './TariffsTableContent';
-import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
-
-export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
+import type { CellDef, TariffsTableRowHeader } from './TariffsTableContent';
+
+export interface TariffsTableTileCellProps {
+  header: TariffsTableRowHeader;
+  data: CellDef[];
+  context: ContentPageContext;
+}
+
+export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ context, header, data }) => {
   return (
     <div className="rounded-md border-main-stroke h-full box-border border p-4">
       <TableTileHeader {...header} />
-      {data?.length ? data.map(renderCellInner) : null}
+      {data?.length ? data.map(renderCellInner(context)) : null}
     </div>
   );
 });
 
-const renderCellInner = (
-  { label, description, list, image, buttons }: TariffsTableCellData,
-  i: number,
-) => (
-  <div key={String(i)}>
-    {i > 0 && (
-      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-2" />
-    )}
-    {label ? <div className="text-s m-0">{label}</div> : null}
-    {description ? <div className="text-s text-secondary-text mt-[3px]">{description}</div> : null}
-    {list?.items?.length ? renderList(list) : null}
-    {image ? <Img image={{ ...image, className: 'm-0' }} /> : null}
-    {buttons?.length ? renderButtons(buttons) : null}
-  </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 renderButtons = (buttons: ButtonWithIconProps[]) => (
-  <div>
-    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
-      <Button
-        className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
-        key={String(idx)}
-        ariaLabel={getButtonAriaLabel(icon)}
-        rounded={rounded}
-        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
-        {...buttonProps}
-        aria-label={icon}
-      />
-    ))}
-  </div>
-);
+const renderCellInner = (context: ContentPageContext) => (cell: CellDef, i: number) =>
+  (
+    <div key={String(i)}>
+      {i > 0 ? <div className="h-5" /> : null}
+      {renderCell(cell, context)}
+    </div>
+  );
+
+const renderCell = (cell: CellDef, context: ContentPageContext) => {
+  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} />;
+};

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

@@ -1,8 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { TariffsTableTileCell } from './TariffsTableTileCell';
-import type { TariffsTableTileCellProps } from './TariffsTableContent';
+import type { UniBlockProps } from '../../types';
+import { TariffsTableTileCell, TariffsTableTileCellProps } from './TariffsTableTileCell';
 
-export const TariffsTableVertical = JSX<{ tiles: TariffsTableTileCellProps[] }>(({ tiles }) => (
+export interface TariffsTableVerticalProps extends UniBlockProps {
+  tiles: TariffsTableTileCellProps[];
+}
+
+export const TariffsTableVertical = JSX<TariffsTableVerticalProps>(({ tiles }) => (
   <div className="flex flex-col gap-3.5">
     {tiles.map((tile, i) => (
       <TariffsTableTileCell key={String(i)} {...tile} />

package/mobile/src/components/TariffsTable/dataFixture.ts

@@ -0,0 +1,158 @@
+import type {
+  TariffsTableColumn,
+  TariffsTableContent,
+  TariffsTableRowHeader,
+  LabelDescriptionCellDef,
+  ListBlockDef,
+  InnerTableBlockDef,
+} from './TariffsTableContent';
+import type { Picture } from '../../model/Picture';
+
+const title = 'Заголовок';
+const description = 'Описание предоставляемого продукта';
+
+const image: Picture = {
+  src: 'payment-systems.png',
+  format: 'webp',
+  size: {
+    width: 288,
+    height: 56,
+  },
+  alt: 'Платёжные системы',
+  title: 'Платёжные системы',
+};
+
+const LABEL_BLOCK: LabelDescriptionCellDef = {
+  tableCellType: 'LabelDescription',
+  label: 'Заголовок без описания',
+};
+
+const LABEL_DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
+  label: 'Ячейка 1-2',
+  tableCellType: 'LabelDescription',
+  description: 'Описание',
+};
+
+const TABLE_BLOCK: InnerTableBlockDef = {
+  tableCellType: 'Table',
+  dataUrl: 'tariffs-inner-table-data',
+};
+
+const DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
+  tableCellType: 'LabelDescription',
+  description: 'Описание без заголовка',
+};
+
+const LIST_BLOCK: ListBlockDef = {
+  tableCellType: 'List',
+  isDotted: true,
+  items: ['Элемент списка 1', 'Элемент списка 2', 'Элемент списка 3'],
+};
+
+const rowHeaders: TariffsTableRowHeader[] = [
+  { title: 'Начисление процентов на остаток по счету', icon: { icon: 'OkIcon' } },
+  { title: 'Снятие наличных', icon: { icon: 'GlassIcon' } },
+  { title: 'Кэшбэк баллами' },
+  { title: 'Кнопки-иконки' },
+  { title: 'Дополнительная информация' },
+  { title: 'Описание и кнопка' },
+  { title: 'Описание и ссылка' },
+];
+
+export const columns: TariffsTableColumn[] = [
+  {
+    data: [
+      [LABEL_BLOCK, LIST_BLOCK, LABEL_DESCRIPTION_BLOCK, LIST_BLOCK],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+          tableCellType: 'LabelDescription',
+        },
+        {
+          label: 'Бесплатно',
+          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
+          tableCellType: 'LabelDescription',
+        },
+      ],
+      [LABEL_BLOCK],
+      [
+        {
+          label: 'Платёжные системы картинкой',
+          tableCellType: 'LabelDescription',
+        },
+        {
+          image: image,
+          tableCellType: 'Img',
+        },
+      ],
+      [
+        { label: 'Кнопки-иконки', tableCellType: 'LabelDescription' },
+        {
+          tableCellType: 'Buttons',
+          buttons: [
+            {
+              icon: { icon: 'AppleIcon' },
+              rounded: true,
+              version: 'secondary',
+              href: '/',
+              target: '_blank',
+            },
+            {
+              icon: { icon: 'PlayMarketIcon' },
+              rounded: true,
+              version: 'secondary',
+              href: '/',
+              target: '_blank',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          tableCellType: 'LabelDescription',
+        },
+      ],
+      [
+        {
+          image: {
+            src: 'money-1.png',
+            format: 'webp',
+            size: {
+              width: 140,
+              height: 140,
+            },
+            alt: 'Деньги',
+          },
+          tableCellType: 'Img',
+        },
+      ],
+    ],
+  },
+];
+
+export const columnsTable: TariffsTableColumn[] = [
+  {
+    data: [
+      [LABEL_BLOCK, LIST_BLOCK],
+      [TABLE_BLOCK, DESCRIPTION_BLOCK],
+      [LIST_BLOCK, DESCRIPTION_BLOCK],
+      [TABLE_BLOCK],
+    ],
+  },
+];
+
+export const TARIFFS_TABLE_FIXTURE_EXAMPLE: TariffsTableContent = {
+  title,
+  description,
+  tariffsColumns: columns,
+  rowHeaders,
+};
+
+export const TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE: TariffsTableContent = {
+  title,
+  description,
+  tariffsColumns: columnsTable,
+  rowHeaders,
+};

package/mobile/src/components/Tile/Tile.example.json

@@ -9,6 +9,7 @@
     }
   },
   "isDotted": true,
+  "listItemSize": "M",
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {

package/mobile/src/components/Tile/Tile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
@@ -7,6 +7,7 @@ import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import type { ListProps } from '../../ui-kit/List/ListProps';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -16,11 +17,6 @@ export interface TileProps extends TileContent, UniBlockProps {
   role?: string;
 }
 
-const tileStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const Tile = JSX<TileProps>((props) => {
   const {
     context,
@@ -32,16 +28,18 @@ export const Tile = JSX<TileProps>((props) => {
     buttons,
     image,
     isDotted = true,
+    listItemSize = 'M',
     className = '',
     version = 'primary',
     ...rest
   } = props;
+  const headingClassName = version === 'primary' ? 'text-primary-text' : '';
 
   return (
     <BlockWrapper
       context={context}
       className={`overflow-hidden font-sans p-9 pr-3 box-border ${className} ${
-        tileStyleMap[version]
+        VersionStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       {...rest}
     >
@@ -53,8 +51,7 @@ export const Tile = JSX<TileProps>((props) => {
               headingType={headingType}
               as="h2"
               title={title}
-              className={`whitespace-pre-wrap max-w-[600px] text-h4
-              ${version === 'primary' ? 'text-primary-text' : ''}`}
+              className={`whitespace-pre-wrap max-w-[600px] ${headingClassName}`}
             />
           ) : null
         }
@@ -63,7 +60,7 @@ export const Tile = JSX<TileProps>((props) => {
             <ButtonSection
               context={context}
               buttons={buttons.map((button) => ({ ...button, className: 'w-[158px]' }))}
-              className="flex mt-9 gap-3"
+              className="flex mt-8 gap-3"
             />
           ) : null
         }
@@ -73,16 +70,23 @@ export const Tile = JSX<TileProps>((props) => {
           <Description className="max-w-[600px] text-xl-light mt-2" description={description} />
         ) : null}
         {children}
-        {renderList(items, version, isDotted)}
+        {renderList(items, { version, isDotted, listItemSize })}
       </BaseTile>
     </BlockWrapper>
   );
 });
 
-function renderList(items, version, isDotted: boolean) {
+function renderList(items, { version, isDotted, listItemSize }: ListProps) {
   const listVersion = version === 'primary' ? 'tile' : 'tile-white';
 
   return items?.length ? (
-    <List items={items} isDotted={isDotted} itemClassName="text-h6 mt-2" version={listVersion} />
+    <List
+      items={items}
+      isDotted={isDotted}
+      className="mt-3"
+      listItemSize={listItemSize}
+      itemClassName="mb-1.5"
+      version={listVersion}
+    />
   ) : null;
 }