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

package/src/components/Tabs/renderLinkTab.tsx

@@ -0,0 +1,25 @@
+import type { LinkProps } from '../../model/LinkProps';
+import {
+  INACTIVE_LINK_CLASSES,
+  INACTIVE_TEXT_CLASSES,
+  LINK_CLASSES,
+  TEXT_CLASSES,
+} from './tabItemClasses';
+
+export interface RenderLinkTabProps extends LinkProps {
+  active?: boolean;
+  onClick?: () => void;
+  i: number;
+}
+
+export const renderLinkTab = ({ text, onClick, href, target = '_self', i }: RenderLinkTabProps) => (
+  <a
+    key={String(i)}
+    className={`${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`}
+    target={target}
+    href={href}
+    onClick={onClick}
+  >
+    <span className={`${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`}>{text}</span>
+  </a>
+);

package/src/components/Tabs/renderTab.tsx

@@ -1,51 +1,42 @@
+import { useLink } from '../../hooks/useLink';
 import type { ContentPageDef } from '../../types';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { renderGroupTab } from './renderGroupTab';
+import { renderLinkTab } from './renderLinkTab';
 import type { Tab } from './TabsContent';
 
-interface RenderTabProps {
-  onClick: OnTabClick;
+export interface RenderTabProps {
+  onClick: (tab: Tab) => void;
   currentTab?: Tab;
   page?: ContentPageDef;
   showCounter?: boolean;
+  context: ContentPageContext;
 }
 
-type OnTabClick = (tab: Tab) => void;
-
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
-
 export const renderTab =
-  ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
+  ({ onClick, currentTab, showCounter, page, context }: RenderTabProps) =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
   (tab: Tab, i: number) => {
-    const isActive = currentTab === tab;
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
 
-    const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-    const tabText = `text-m-light ${
-      isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
-    }`;
-    const counterBlockStyle = `${badgeStyle}
-      ${
-        isActive
-          ? 'bg-white/30 text-white'
-          : 'bg-main-divider text-secondary-text group-hover:text-primary-main'
-      }`;
+    const type = tab.type;
 
-    const count = tab.id
-      ? page?.blocks?.filter((block) => block?.labels?.includes(tab.id as string)).length
-      : page?.blocks?.length;
+    if (!(type === 'group' || type === 'link')) {
+      return null;
+    }
 
-    return (
-      <div
-        key={String(i)}
-        className={`flex h-12 w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
-        role="tab"
-        aria-selected={isActive}
-        onClick={() => onClick(tab)}
-      >
-        <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? <h3 className={tabText}>{tab?.title}</h3> : null}
-          {showCounter ? (
-            <div className={`flex items-center justify-center ${counterBlockStyle}`}>{count}</div>
-          ) : null}
-        </div>
-      </div>
-    );
+    switch (type) {
+      case 'group':
+        return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
+      case 'link':
+        return renderLinkTab({
+          ...useLink({ router, handlerDecorator }, tab),
+          i,
+        });
+      default:
+        assertUnreachable(type);
+    }
   };

package/src/components/Tabs/tabItemClasses.ts

@@ -0,0 +1,7 @@
+export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
+export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
+export const INACTIVE_LINK_CLASSES = 'group bg-white';
+
+export const TEXT_CLASSES = 'font-sans text-m';
+export const ACTIVE_TEXT_CLASSES = 'text-white';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';

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>