@redneckz/wildless-cms-uni-blocks 0.2.91 → 0.2.92

package/src/components/TariffsTable/TariffsTable.tsx

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Title } from '../../ui-kit/Title/Title';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import { TariffsTableRow } from './TariffsTableRow';
+import type { UniBlockProps } from '../../types';
+import type { TariffsTableContent } from './TariffsTableContent';
+import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+
+export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
+
+export const TariffsTable = JSX<TariffsTableProps>(
+  ({ className, context, title, rowHeaders, columns }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders?.map((header, i) => ({
+      header,
+      data: colData.map((col) => col?.[i] || [{}]),
+    }));
+
+    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
+      useComparisonTableScroll(
+        colData,
+        COLS_LENGTH_FOR_SCROLL,
+        activeCardIndex,
+        setActiveCardIndex,
+      );
+
+    return (
+      <section
+        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
+          className || ''
+        }`}
+      >
+        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        {rowData?.length ? (
+          <div className="relative">
+            {rowData.map((row, i, { length }) => (
+              <TariffsTableRow
+                key={String(i)}
+                row={row}
+                isLastRow={i + 1 === length}
+                activeCardIndex={activeCardIndex}
+              />
+            ))}
+            {isScrollAvailable ? (
+              <div>
+                <div className="absolute top-7 right-7 z-10">
+                  <ArrowButton
+                    onClick={nextClick}
+                    disabled={!showNextButton}
+                    ariaLabel="Пролистать вправо"
+                  />
+                  <ArrowButton
+                    className="mt-4 rotate-180"
+                    onClick={prevClick}
+                    disabled={!showPrevButton}
+                    ariaLabel="Пролистать влево"
+                  />
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+        {isScrollAvailable ? (
+          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -0,0 +1,64 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DIVIDER_CLASSES } from './constants';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import type { TariffsTableCellData } from './TariffsTableContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+export interface TariffsTableCellProps {
+  cell: TariffsTableCellData[];
+  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' : ''
+  }`;
+
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
+
+  return (
+    <div className={cellWrapperClasses}>
+      <div className={cellClasses}>{cell.map((item, i) => renderCellInner(item, i))}</div>
+    </div>
+  );
+});
+
+const renderCellInner = (
+  { label, description, list, image, buttons }: TariffsTableCellData,
+  i: number,
+) => (
+  <div 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 && <h5 className="text-xl font-medium m-0">{label}</h5>}
+    {description && <div className="text-sm text-secondary-text">{description}</div>}
+    {list?.items?.length ? (
+      <div className="flex flex-col justify-between items-start">
+        <div>
+          {list.items.map((text, idx) => (
+            <BlockItem
+              key={String(idx)}
+              text={text}
+              version={list.version ?? 'secondary'}
+              isDotted={list.isDotted ?? true}
+            />
+          ))}
+        </div>
+      </div>
+    ) : null}
+    {image && <Img image={image} />}
+    {buttons?.length
+      ? buttons.map(({ icon, ...buttonProps }, idx) => (
+          <Button
+            className={`${idx > 0 ? 'ml-3' : ''} w-12 h-12`}
+            key={String(idx)}
+            appendLeft={icon && <Icon name={icon} width="24px" height="24px" />}
+            {...buttonProps}
+          />
+        ))
+      : null}
+  </div>
+);

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -0,0 +1,61 @@
+import type { CellData, RowHeader } from '../ComparisonTable/ComparisonTableContent';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { Picture } from '../../model/Picture';
+import type { BlockItemVersion } from '../../ui-kit/BlockItem/BlockItemProps';
+import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Ряд
+ */
+export type TariffsTableRowData = {
+  header: TariffsTableRowHeader;
+  data: TariffsTableCellData[][];
+};
+
+/**
+ * @title Колонка
+ */
+export interface TariffsTableColumn {
+  /** @title Данные */
+  data?: TariffsTableCellData[][];
+}
+
+/**
+ * @title Список
+ */
+export interface TariffsTableList {
+  version?: BlockItemVersion;
+  /** @title Маркеры */
+  isDotted?: boolean;
+  /** @title Элементы списка */
+  items?: string[];
+}
+
+/**
+ * @title Ячейка
+ */
+export interface TariffsTableCellData extends CellData {
+  list?: TariffsTableList;
+  image?: Picture;
+  /** @title Кнопки */
+  buttons?: BaseTileIconButton[];
+}
+
+/**
+ * @title Параметр
+ */
+export interface TariffsTableRowHeader extends RowHeader {
+  icon?: IconName;
+}
+
+/**
+ * @title Таблица тарифов
+ */
+export interface TariffsTableContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Колонки */
+  columns?: TariffsTableColumn[];
+  /** @title Параметры */
+  rowHeaders?: TariffsTableRowHeader[];
+}

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { TariffsTableCell } from './TariffsTableCell';
+import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
+import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
+import type { TariffsTableRowData } from './TariffsTableContent';
+
+export interface TariffsTableRowProps {
+  className?: string;
+  row: TariffsTableRowData;
+  activeCardIndex: number;
+  isLastRow: boolean;
+}
+
+export const TariffsTableRow = JSX<TariffsTableRowProps>(
+  ({ row: { header, data }, activeCardIndex, isLastRow }) => {
+    return (
+      <TableRowContainer>
+        <div
+          className={`text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
+            !isLastRow ? 'border-solid' : ''
+          }`}
+        >
+          <div className="flex items-center text-primary-text">
+            {header?.icon && (
+              <Icon className="pr-[14px]" name={header.icon} width="24px" height="24px" />
+            )}
+            {header?.title}
+          </div>
+        </div>
+        {data?.length ? (
+          <TableCarouselContainer
+            activeCardIndex={activeCardIndex}
+            columnWidth={COLUMN_WIDTH}
+            version="tariff"
+          >
+            {data.map((cell, i) => (
+              <TariffsTableCell key={String(i)} cell={cell} isLastRow={isLastRow} />
+            ))}
+          </TableCarouselContainer>
+        ) : null}
+      </TableRowContainer>
+    );
+  },
+);

package/src/components/TariffsTable/constants.ts

@@ -0,0 +1,4 @@
+export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+export const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
+export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px

package/src/components/TextBlock/TextBlock.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { Picture } from '../../model/Picture';
-import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img';
+import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
@@ -54,7 +54,7 @@ export const TextBlock = JSX<TextBlockProps>(
 
 function renderIcon(className: string) {
   return (
-    <div className={`pt-1.5 pr-4`}>
+    <div className={`pt-1.5 pl-1 pr-4`}>
       <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
     </div>
   );

package/src/hooks/useComparisonTableScroll.ts

@@ -0,0 +1,16 @@
+export const useComparisonTableScroll = <COL_DATA>(
+  colData: COL_DATA[],
+  colsLengthForScroll: number,
+  activeCardIndex: number,
+  setActiveCardIndex: (_: number) => void,
+) => {
+  const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  const isScrollAvailable = colData?.length && colData.length > colsLengthForScroll;
+  const showNextButton =
+    isScrollAvailable && colData?.length - activeCardIndex > colsLengthForScroll;
+  const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+
+  return { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton };
+};

package/src/model/TableVersion.ts

@@ -0,0 +1 @@
+export type TableVersion = 'comparison' | 'tariff';

package/src/ui-kit/BlockItem/BlockItem.fixture.tsx

@@ -2,4 +2,11 @@ import '../../setup-fixture';
 
 import { BlockItem } from './BlockItem';
 
-export default <BlockItem text="Совершайте любые личные покупки" />;
+export default {
+  primary: <BlockItem text="Совершайте любые личные покупки" />,
+  'primary without dot': <BlockItem text="Совершайте любые личные покупки" isDotted={false} />,
+  secondary: <BlockItem text="Совершайте любые личные покупки" version="secondary" />,
+  'secondary without dot': (
+    <BlockItem text="Совершайте любые личные покупки" isDotted={false} version="secondary" />
+  ),
+};

package/src/ui-kit/BlockItem/BlockItem.tsx

@@ -1,33 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-
-type BlockItemVersion = 'primary' | 'secondary';
-export interface BlockItemContent {
-  text?: string;
-}
-
-export interface BlockItemProps extends BlockItemContent {
-  className?: string;
-  version?: BlockItemVersion;
-}
+import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
 const listStyleMap: Record<BlockItemVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white',
+  primary: 'bg-primary-main w-[8px] h-[8px] min-w-[8px] min-h-[8px] mt-2 rounded-full',
+  secondary: 'bg-secondary-text w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5 rounded-full',
 };
 
 const textStyleMap: Record<BlockItemVersion, string> = {
   primary: 'text-primary-text',
-  secondary: 'text-white',
+  secondary: 'text-secondary-text',
 };
 
 export const BlockItem = JSX<BlockItemProps>(
-  ({ className, text, children, version = 'primary' }) => {
+  ({ className, isDotted = true, text, children, version = 'primary' }) => {
     return (
       <div className={`inline-block flex ${className || ''}`} role="listitem">
-        <div
-          className={`inline-block w-[8px] h-[8px] min-w-[8px] min-h-[8px] rounded-full mt-2 ${listStyleMap[version]}`}
-        ></div>
-        <span className={`text-base font-normal font-sans mx-3 ${textStyleMap[version]}`}>
+        {isDotted && <div className={`inline-block mr-3 ${listStyleMap[version]}`} />}
+        <span className={`text-base font-normal font-sans mr-3 ${textStyleMap[version]}`}>
           {text || children}
         </span>
       </div>

package/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -0,0 +1,22 @@
+/**
+ * @title Версия списка
+ */
+export type BlockItemVersion = 'primary' | 'secondary';
+
+/**
+ * @title Содержимое элемента блока
+ */
+export interface BlockItemContent {
+  /** @title Текст */
+  text?: string;
+}
+
+/**
+ * @title Параметры элемента блока
+ */
+export interface BlockItemProps extends BlockItemContent {
+  className?: string;
+  version?: BlockItemVersion;
+  /** @title Маркер */
+  isDotted?: boolean;
+}

package/src/ui-kit/Icon/IconProps.ts

@@ -4,29 +4,45 @@
 export enum IconMap {
   'ActualBalanceIcon',
   'AppleIcon',
+  'CalendarCircleIcon',
   'CalendarIcon',
+  'CardIcon',
+  'CardPosIcon',
+  'CardTickIcon',
   'ClockIcon',
   'ComfortableCompIcon',
   'DiscountShape',
   'DocIcon',
   'DocumentText',
   'DollarIcon',
+  'EmptyWalletChangeIcon',
   'EmptyWalletIcon',
   'EuroIcon',
   'GlassIcon',
   'GridIcon',
+  'JCBIcon',
   'LoupeIcon',
+  'MasterCardIcon',
   'MinusIcon',
+  'MirIcon',
+  'MoneyIcon',
+  'MonitorMobileIcon',
   'NewDocIcon',
   'OkIcon',
   'PassSendIcon',
   'PercentageSquareIcon',
   'PlayMarketIcon',
   'PlusIcon',
+  'Profile2UserIcon',
   'ProfileIcon',
+  'ShieldTickIcon',
   'SignDocsIcon',
   'TelegramIcon',
+  'UnionPayIcon',
+  'UserIcon',
+  'VisaIcon',
   'VKIcon',
+  'WalletIcon',
 }
 
 /**
@@ -34,29 +50,45 @@ export enum IconMap {
  * @enumNames [
  *    "Деньги",
  *    "Лого «Apple»",
+ *    "Скруглённый календарь",
  *    "Календарь",
+ *    "Кред. карта",
+ *    "Кред. карта под наклоном",
+ *    "Кред. карта с галочкой",
  *    "Часы",
  *    "Кресло",
  *    "Скидка",
  *    "Документ",
  *    "Документ с текстом",
  *    "Доллар",
- *    "Кошелек",
+ *    "Пустой кошелёк с возвратом",
+ *    "Пустой кошелёк",
  *    "Евро",
  *    "Зеркало",
  *    "Сетка",
+ *    "JCB",
  *    "Лупа",
+ *    "MasterCard",
  *    "Минус",
+ *    "МИР",
+ *    "Деньги",
+ *    "Монитор и мобильный",
  *    "Новый документ",
  *    "Лого «Одноклассники»",
  *    "Бизнес",
  *    "Проценты",
  *    "Лого «PlayMarket»",
  *    "Плюс",
+ *    "Профиль, 2 персоны",
  *    "Профиль",
+ *    "Безопасность",
  *    "Подписанные документы",
  *    "Лого «Telegram»",
- *    "Лого «VK»"
+ *    "UnionPay",
+ *    "Пользователь",
+ *    "Visa",
+ *    "Лого «VK»",
+ *    "Кошелёк",
  *  ]
  */
 export type IconName = keyof typeof IconMap;