@redneckz/wildless-cms-uni-blocks 0.2.73 → 0.2.74

package/src/ComparisonTable/ComparisonTable.fixture.tsx

@@ -0,0 +1,265 @@
+import type { Picture } from '../model/Picture';
+import { context } from '../setup-fixture';
+import { ComparisonTable } from './ComparisonTable';
+import type { Column } from './ComparisonTableContent';
+
+const image1: Picture = {
+  src: 'card-1.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image2: Picture = {
+  src: 'card-2.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image3: Picture = {
+  src: 'card-3.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const rowHeaders = [
+  { title: 'Начисление процентов на остаток по счету' },
+  { title: 'Снятие наличных' },
+  { title: 'Оформление онлайн' },
+  { title: 'Кэшбэк баллами' },
+  { title: 'Стоимость обслуживания' },
+  { title: 'Стоимость SMS-сервиса' },
+  { title: 'Дополнительная информация' },
+];
+const rowHeaders2 = [
+  { title: 'Срок вклада (дней)' },
+  { title: 'Ставка по вкладу' },
+  { title: 'Минимальная сумма' },
+  { title: 'Максимальная сумма' },
+];
+const columns: Column[] = [
+  {
+    header: {
+      title: 'Россельхоз-Росснефть',
+      image: image1,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: 'Бесплатно',
+          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [{ label: 'До 7%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Оплачивайте покупки картой и заправляйтесь за баллы в сети АЗС Роснефть' }],
+    ],
+  },
+  {
+    header: {
+      title: 'Panasonic',
+      image: image2,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: '1%',
+          description: 'В сторонних банкоматах, минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [
+        {
+          description:
+            'Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic',
+        },
+      ],
+    ],
+  },
+  {
+    header: {
+      title: 'Профсоюзная',
+      image: image3,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [{ label: 'Бесплатно' }],
+      [{ label: 'Есть' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Для членов профсоюзных организаций' }],
+    ],
+  },
+];
+const columns2: Column[] = [
+  {
+    header: {
+      title: '«Пополняемый»',
+      icon: 'GlassIcon',
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'от 91 до 1095' }],
+      [{ label: 'до 8,2% ₽' }, { label: 'до 0,01% USD' }],
+      [{ label: 'От 3000 ₽' }, { label: 'От 50 USD' }],
+      [{ label: 'до 10 млн ₽' }, { label: 'до 300 тыс. USD' }],
+    ],
+  },
+  {
+    header: {
+      title: '«Комфортный»',
+      icon: 'ComfortableCompIcon',
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'от 91 до 1095' }],
+      [{ label: 'до 7,2% ₽' }, { label: 'до 0,01% USD' }],
+      [{ label: 'От 10 000 ₽' }, { label: 'От 150 USD' }],
+      [{ label: 'до 10 млн ₽' }, { label: 'до 300 тыс. USD' }],
+    ],
+  },
+  {
+    header: {
+      title: '«Доходный пенсионный»',
+      icon: 'ClockIcon',
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'от 91 до 1460' }],
+      [{ label: 'до 9,5% ₽' }],
+      [{ label: 'От 500 ₽' }],
+      [{ label: 'Без ограничений' }],
+    ],
+  },
+];
+
+export default {
+  'with images': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие дебетовые карты Россельхозбанка"
+          context={context}
+          rowHeaders={rowHeaders}
+          columns={Array(2).fill(columns).flat()}
+        />
+      </div>
+    </div>
+  ),
+  'with images and hidden rows': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие дебетовые карты Россельхозбанка"
+          visibleRowLength={3}
+          context={context}
+          rowHeaders={rowHeaders}
+          columns={Array(2).fill(columns).flat()}
+        />
+      </div>
+    </div>
+  ),
+  'with images and colored first column': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие дебетовые карты Россельхозбанка"
+          visibleRowLength={3}
+          isColoredFirstColumn={true}
+          context={context}
+          rowHeaders={rowHeaders}
+          columns={Array(2).fill(columns).flat()}
+        />
+      </div>
+    </div>
+  ),
+  'with icons': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие вклады и сбережения"
+          context={context}
+          rowHeaders={rowHeaders2}
+          columns={Array(2).fill(columns2).flat()}
+        />
+      </div>
+    </div>
+  ),
+  'with icons and two cols': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие вклады и сбережения"
+          context={context}
+          rowHeaders={rowHeaders2}
+          columns={columns2.slice(0, 2)}
+        />
+      </div>
+    </div>
+  ),
+};

package/src/ComparisonTable/ComparisonTable.tsx

@@ -0,0 +1,126 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../types';
+import { ArrowButton } from '../ui-kit/ArrowButton';
+import { Title } from '../ui-kit/Title';
+import { TableRowContainer } from './TableRowContainer';
+import { TableCarouselContainer } from './TableCarouselContainer';
+import { useLink } from '../useLink';
+import type { ComparisonTableContent, RowData } from './ComparisonTableContent';
+import { HeaderCell } from './HeaderCell';
+import { TableRow } from './TableRow';
+import { COLS_LENGTH_FOR_SCROLL, FIRST_CELL_CLASSES } from './constants';
+
+export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
+
+export const ComparisonTable = JSX<ComparisonTableProps>(
+  ({
+    className,
+    context,
+    title,
+    rowHeaders,
+    columns,
+    visibleRowLength = 0,
+    isColoredFirstColumn = false,
+  }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
+
+    const colHeaders = columns?.map(({ header }) => header || {});
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData: RowData = rowHeaders
+      ?.map((header, i) => ({
+        header,
+        data: colData.map((col) => col?.[i] || [{}]),
+      }))
+      .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
+
+    const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
+    const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
+    const showToggle = () => setIsShowAllRow(!isShowAllRow);
+
+    const isScrollAvailable = colData?.length && colData.length > COLS_LENGTH_FOR_SCROLL;
+    const showNextButton =
+      isScrollAvailable && colData?.length - activeCardIndex > COLS_LENGTH_FOR_SCROLL;
+    const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+
+    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>
+        <div role="table">
+          {colHeaders?.length ? (
+            <TableRowContainer>
+              <div className={FIRST_CELL_CLASSES} role="columnheader" scope="col" />
+              <TableCarouselContainer activeCardIndex={activeCardIndex}>
+                {colHeaders.map((header, i) => (
+                  <HeaderCell
+                    key={String(i)}
+                    {...header}
+                    link={header.link && useLink({ router, handlerDecorator }, header.link)}
+                  />
+                ))}
+              </TableCarouselContainer>
+            </TableRowContainer>
+          ) : null}
+
+          {rowData?.length ? (
+            <div className="relative">
+              {rowData.map((row, i, { length }) => (
+                <TableRow
+                  key={String(i)}
+                  row={row}
+                  isFirstRow={i === 0}
+                  isLastRow={i + 1 === length}
+                  activeCardIndex={activeCardIndex}
+                  isColoredFirstColumn={isColoredFirstColumn}
+                />
+              ))}
+              {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}
+        </div>
+
+        {isScrollAvailable ? (
+          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        ) : null}
+
+        {visibleRowLength ? (
+          <div className="pr-[50px]">
+            <div className="flex w-full">
+              <div className={FIRST_CELL_CLASSES} />
+              <button
+                onClick={showToggle}
+                className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+              >
+                <div className="font-sans font-medium text-xs py-[11px]">
+                  {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
+                </div>
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/ComparisonTable/ComparisonTableContent.ts

@@ -0,0 +1,43 @@
+import type { LinkContent } from '../model/LinkContent';
+import type { Picture } from '../model/Picture';
+import type { ButtonProps } from '../ui-kit/ButtonProps';
+import type { IconName } from '../ui-kit/IconProps';
+
+export type Row = {
+  header: RowHeader;
+  data: CellData[][];
+};
+
+export type RowData = Row[] | undefined;
+
+export interface CellData {
+  label?: string;
+  description?: string;
+  icons?: IconName[];
+  image?: Picture;
+  buttons?: ButtonProps[];
+}
+
+export interface ColumnHeader {
+  title?: string;
+  icon?: IconName;
+  image?: Picture;
+  link?: LinkContent;
+}
+export interface Column {
+  header?: ColumnHeader;
+  data?: CellData[][];
+}
+
+export interface RowHeader {
+  title?: string;
+  icon?: IconName;
+}
+
+export interface ComparisonTableContent {
+  title?: string;
+  rowHeaders?: RowHeader[];
+  columns?: Column[];
+  visibleRowLength?: number;
+  isColoredFirstColumn?: boolean;
+}

package/src/ComparisonTable/HeaderCell.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkContent } from '../model/LinkContent';
+import type { Picture } from '../model/Picture';
+import { Button } from '../ui-kit/Button';
+import { Icon } from '../ui-kit/Icon';
+import type { IconName } from '../ui-kit/IconProps';
+import { Img } from '../ui-kit/Img';
+import { Title } from '../ui-kit/Title';
+import { BORDER_CLASSES, GRADIENT } from './constants';
+
+export interface HeaderCellProps {
+  icon?: IconName;
+  image?: Picture;
+  title?: string;
+  link?: LinkContent;
+}
+
+export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
+  <div
+    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-12 ${BORDER_CLASSES} ${GRADIENT}`}
+    role="columnheader"
+    scope="col"
+  >
+    {icon && !image?.src && (
+      <Icon
+        className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+        name={icon}
+        width="63"
+        height="63"
+      />
+    )}
+    {image?.src && <Img className="mb-4" image={image} />}
+    {title && (
+      <Title size="S" className="font-medium m-0 text-center text-white">
+        {title}
+      </Title>
+    )}
+    {link?.text && (
+      <div className="mt-auto w-full">
+        <Button
+          href={link.href}
+          target={link.target}
+          className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
+        >
+          <div className="text-xs py-[11px]">{link.text}</div>
+        </Button>
+      </div>
+    )}
+  </div>
+));

package/src/ComparisonTable/TableCarouselContainer.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { COLUMN_WIDTH } from './constants';
+
+export interface TableCarouselContainerProps {
+  activeCardIndex: number;
+}
+
+export const TableCarouselContainer = JSX<TableCarouselContainerProps>(
+  ({ children, activeCardIndex }) => (
+    <div className="flex flex-1 overflow-hidden">
+      <div
+        className="flex gap-4 duration-1000"
+        style={{ transform: `translateX(-${activeCardIndex * COLUMN_WIDTH}px)` }}
+      >
+        {children}
+      </div>
+    </div>
+  ),
+);

package/src/ComparisonTable/TableCell.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { CellData } from './ComparisonTableContent';
+import { BORDER_CLASSES, DIVIDER_CLASSES, GRADIENT } from './constants';
+
+export interface TableCellProps {
+  cell: CellData[];
+  isLastRow: boolean;
+  isFirstRow: boolean;
+  isFillGradient: boolean;
+}
+
+export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
+  const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${
+    !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'
+  } ${isFillGradient ? GRADIENT : ''}`;
+
+  const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
+    isFillGradient && isFirstRow ? 'border-t' : ''
+  } ${!isLastRow ? 'border-solid' : ''}`;
+
+  return (
+    <div className={cellWrapperClasses} role="cell">
+      <div className={cellClasses}>
+        {cell.map((item, i) => renderCellInner(item, i, isFillGradient))}
+      </div>
+    </div>
+  );
+});
+
+const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
+  <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
+    {label && (
+      <h5 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h5>
+    )}
+    {description && (
+      <div
+        className={`text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`}
+      >
+        {description}
+      </div>
+    )}
+  </div>
+);

package/src/ComparisonTable/TableRow.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Row } from './ComparisonTableContent';
+import { DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { TableCarouselContainer } from './TableCarouselContainer';
+import { TableCell } from './TableCell';
+import { TableRowContainer } from './TableRowContainer';
+
+export interface TableRowProps {
+  className?: string;
+  row: Row;
+  activeCardIndex: number;
+  isColoredFirstColumn: boolean;
+  isFirstRow: boolean;
+  isLastRow: boolean;
+}
+
+export const TableRow = JSX<TableRowProps>(
+  ({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
+    <TableRowContainer>
+      {header?.title ? (
+        <div
+          className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+            !isLastRow ? 'border-solid' : ''
+          }`}
+        >
+          {header.title}
+        </div>
+      ) : null}
+      {data?.length ? (
+        <TableCarouselContainer activeCardIndex={activeCardIndex}>
+          {data.map((cell, i) => (
+            <TableCell
+              key={String(i)}
+              cell={cell}
+              isFirstRow={isFirstRow}
+              isLastRow={isLastRow}
+              isFillGradient={isColoredFirstColumn && i === 0}
+            />
+          ))}
+        </TableCarouselContainer>
+      ) : null}
+    </TableRowContainer>
+  ),
+);

package/src/ComparisonTable/TableRowContainer.tsx

@@ -0,0 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export const TableRowContainer = JSX(({ children }) => (
+  <div className="self-start flex flex-col" role="row">
+    <div className="flex">{children}</div>
+  </div>
+));

package/src/ComparisonTable/constants.ts

@@ -0,0 +1,6 @@
+export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+export const BORDER_CLASSES = 'border-main-stroke border-solid border';
+export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
+export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/src/ComparisonTable/index.ts

@@ -0,0 +1,3 @@
+export { ComparisonTable } from './ComparisonTable';
+export type { ComparisonTableProps } from './ComparisonTable';
+export type { ComparisonTableContent } from './ComparisonTableContent';