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

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

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;