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

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

@@ -0,0 +1,67 @@
+import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import { List } from '../../ui-kit/List/List';
+import type { ListProps } from '../../ui-kit/List/ListProps';
+import type { LabelDescriptionCell } from './TariffsTableContent';
+import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
+
+export interface LabelProps {
+  label?: string;
+}
+
+export type EmbeddableCellDataType =
+  | ButtonContent
+  | LabelDescriptionCell
+  | ImageContent
+  | ListProps;
+
+const renderButtonsCellData = ({ buttons }: ButtonContent) =>
+  buttons && buttons?.length ? (
+    <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?.src || icon?.icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null
+          }
+          {...buttonProps}
+          aria-label={icon}
+        />
+      ))}
+    </div>
+  ) : null;
+
+const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
+  const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
+
+  return (
+    <div>
+      {label ? <div className={labelClassName}>{label}</div> : null}
+      {description ? <div className="text-s text-secondary-text">{description}</div> : null}
+    </div>
+  );
+};
+
+const renderImgCellData = ({ image }: ImageContent) =>
+  image?.src ? <Img image={{ ...image, className: 'm-0' }} /> : null;
+
+const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
+  <List
+    className="flex flex-col justify-between items-start text-m"
+    version="gray"
+    isDotted={isDotted ?? true}
+    {...rest}
+  />
+);
+
+export const EmbeddableCellData = {
+  Buttons: renderButtonsCellData,
+  Img: renderImgCellData,
+  List: renderListCellData,
+  LabelDescription: renderLabelDescriptionCellData,
+};

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -0,0 +1,82 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { EventBus } from '../../EventBus/EventBus';
+import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import { TableInnerButton, TableInnerButtonProps } from '../../ui-kit/InnerTable/InnerTableButton';
+import { List } from '../../ui-kit/List/List';
+import type { ListProps } from '../../ui-kit/List/ListProps';
+import type { LabelDescriptionCell, TariffsTableCellIndexProps } from './TariffsTableContent';
+import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
+
+export type EmbeddableCellDataType =
+  | LabelDescriptionCell
+  | ButtonContent
+  | ImageContent
+  | ListProps
+  | TableInnerButtonProps;
+
+const renderButtonsCellData = ({ buttons }: ButtonContent) =>
+  buttons && buttons?.length ? (
+    <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?.src || icon?.icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null
+          }
+          {...buttonProps}
+        />
+      ))}
+    </div>
+  ) : null;
+
+const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
+  const labelClassName = `text-h6 font-medium m-0 ${description ? 'mb-1' : ''}`;
+
+  return (
+    <div>
+      {label ? <div className={labelClassName}>{label}</div> : null}
+      {description ? <div className="text-s text-secondary-text">{description}</div> : null}
+    </div>
+  );
+};
+
+const renderImgCellData = ({ image }: ImageContent) => (image?.src ? <Img image={image} /> : null);
+
+const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
+  <List
+    className="flex flex-col justify-between items-start text-sm"
+    version="gray"
+    isDotted={isDotted ?? true}
+    {...rest}
+  />
+);
+
+const renderTableCellData = JSX((props: TableInnerButtonProps) => {
+  const [showBtn, setShowBtn] = useState(true);
+
+  const tariffInnerTableSubscriber = (event) => {
+    const _showBtn = (
+      ['rowIdx', 'cellIdx', 'fieldIdx'] as Array<keyof TariffsTableCellIndexProps>
+    ).every((key) => props[key] === event[key]);
+    setShowBtn(!_showBtn);
+  };
+
+  useEffect(() => EventBus.inst.subscribe('tariffInnerTable', tariffInnerTableSubscriber), []);
+
+  return showBtn ? <TableInnerButton {...props} /> : null;
+});
+
+export const EmbeddableCellData = {
+  Buttons: renderButtonsCellData,
+  Img: renderImgCellData,
+  List: renderListCellData,
+  LabelDescription: renderLabelDescriptionCellData,
+  Table: renderTableCellData,
+};

package/src/components/TariffsTable/TariffsTable.example.json

@@ -22,31 +22,49 @@
       "title": "Параметр 4"
     }
   ],
-  "columns": [
+  "tariffsColumns": [
     {
       "data": [
         [
           {
-            "label": "Ячейка 1"
+            "tableCellType": "LabelDescription",
+            "label": "Ячейка 1-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "tableCellType": "List",
+            "isDotted": true,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+          },
+          {
+            "label": "Ячейка 1-2",
+            "tableCellType": "LabelDescription",
+            "description": "Описание"
+          },
+          {
+            "tableCellType": "List",
+            "isDotted": false,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
           }
         ],
         [
           {
-            "label": "Ячейка 2-1",
-            "description": "Описание для ячейки 2-1"
+            "tableCellType": "LabelDescription",
+            "label": "Ячейка 2-1"
           },
           {
-            "label": "Ячейка 2-2",
-            "description": "Описание для ячейки 2-2"
+            "tableCellType": "List",
+            "isDotted": true,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
           }
         ],
         [
           {
             "label": "Ячейка 3-1",
-            "description": "Описание для ячейки 3-1"
+            "tableCellType": "LabelDescription"
           },
           {
-            "label": "Ячейка 3-2",
+            "tableCellType": "Button",
             "buttons": [
               {
                 "icon": {
@@ -55,8 +73,7 @@
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",
-                "target": "_blank",
-                "text": ""
+                "target": "_blank"
               },
               {
                 "icon": {
@@ -65,29 +82,13 @@
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",
-                "target": "_blank",
-                "text": ""
+                "target": "_blank"
               }
             ]
           }
-        ],
-        [
-          {
-            "image": {
-              "format": "webp",
-              "size": {
-                "width": 288,
-                "height": 56
-              }
-            }
-          },
-          {
-            "list": {
-              "items": ["item 1", "item 2", "item 3"]
-            }
-          }
         ]
       ]
     }
-  ]
+  ],
+  "hiddenRowsNum": 2
 }

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

@@ -1,108 +1,6 @@
-import type { Picture } from '../../model/Picture';
 import { mobileContext } from '../../react/setup-fixture';
+import { TARIFFS_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: 'Кэшбэк баллами' },
-  { title: 'Кнопки-иконки' },
-  { title: 'Дополнительная информация' },
-  { title: 'Описание и кнопка' },
-  { title: 'Описание и ссылка' },
-];
-
-const columns: TariffsTableColumn[] = [
-  {
-    data: [
-      [{ label: 'Нет' }],
-      [
-        {
-          label: 'Бесплатно',
-          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
-        },
-        {
-          label: 'Бесплатно',
-          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
-        },
-      ],
-      [{ label: 'Платёжные системы картинкой' }, { image: image }],
-      [
-        {
-          buttons: [
-            {
-              icon: { icon: 'AppleIcon' },
-              rounded: true,
-              version: 'secondary',
-              href: '/',
-              target: '_blank',
-            },
-            {
-              icon: { icon: 'PlayMarketIcon' },
-              rounded: true,
-              version: 'secondary',
-              href: '/',
-              target: '_blank',
-            },
-          ],
-        },
-      ],
-      [
-        {
-          image: {
-            src: 'money-1.png',
-            format: 'webp',
-            size: {
-              width: 140,
-              height: 140,
-            },
-            alt: 'Деньги',
-          },
-        },
-      ],
-      [
-        {
-          label: '30 тыс - 5 млн рублей',
-          buttons: [
-            {
-              text: 'Подробнее',
-              href: '/',
-              target: '_blank',
-            },
-          ],
-        },
-      ],
-      [
-        {
-          label: '30 тыс - 5 млн рублей',
-          buttons: [
-            {
-              text: 'Подробнее',
-              href: '/',
-              target: '_blank',
-              version: 'link',
-            },
-          ],
-          list: {
-            items: ['item 1', 'item 2', 'item 3'],
-          },
-        },
-      ],
-    ],
-  },
-];
 
 export default {
   'default (vertical)': (
@@ -110,10 +8,7 @@ export default {
       <TariffsTable
         className="col-span-12"
         context={mobileContext}
-        title="Заголовок"
-        description="Описание предоставляемого продукта"
-        rowHeaders={rowHeaders}
-        columns={columns.slice(0, 1)}
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
       />
     </div>
   ),
@@ -122,10 +17,7 @@ export default {
       <TariffsTable
         className="col-span-12"
         context={mobileContext}
-        title="Заголовок"
-        description="Описание предоставляемого продукта"
-        rowHeaders={rowHeaders}
-        columns={columns}
+        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
         orientation="horizontal"
       />
     </div>

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] || [{}],