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

package/src/BaseTile.tsx

@@ -1,98 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { BaseTileContent } from './BaseTileContent';
-import type { BlockVersion } from './model/BlockVersion';
-import type { UniBlockProps } from './types';
-import { BlockItem } from './ui-kit/BlockItem';
-import { Button } from './ui-kit/Button';
-import type { ButtonWithIconProps } from './ui-kit/ButtonProps';
-import { Icon } from './ui-kit/Icon';
-import { Img } from './ui-kit/Img';
-import { Title } from './ui-kit/Title';
-import { useLink } from './useLink';
-import { getColSpan } from './utils/getColSpan';
-
-export interface BaseTileProps extends BaseTileContent, UniBlockProps {}
-
-const TITLE_CLASSES = 'font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]';
-
-export const BaseTile = JSX<BaseTileProps>(
-  ({
-    className,
-    context,
-    title,
-    titleSize,
-    description,
-    children,
-    buttons,
-    image,
-    items,
-    version = 'primary',
-  }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-    return (
-      <div className={`font-sans flex flex-col grow h-full`}>
-        {title && (
-          <Title size={titleSize || getTitleSizeByClassName(className)} className={TITLE_CLASSES}>
-            {title}
-          </Title>
-        )}
-        <div className="flex grow justify-between">
-          <div className="flex flex-col justify-between items-start">
-            <div>
-              {description ? (
-                <div className="font-normal text-base max-w-[600px] mb-5">{description}</div>
-              ) : null}
-              {children}
-              {items?.length ? renderItems(items, version) : null}
-            </div>
-            {buttons?.length ? (
-              <div className="flex mt-9 gap-3">
-                {buttons.map((button, index) =>
-                  renderButton(useLink({ router, handlerDecorator }, button), index),
-                )}
-              </div>
-            ) : null}
-          </div>
-          {image?.src && <Img className="mt-auto ml-7" image={image} />}
-        </div>
-      </div>
-    );
-  },
-);
-
-function getTitleSizeByClassName(className: string = '') {
-  const colSpan = getColSpan(className);
-  if (colSpan <= 4) {
-    return 'S';
-  } else if (colSpan <= 8) {
-    return 'M';
-  } else {
-    return 'L';
-  }
-}
-
-function renderItems(items: string[] = [], version?: BlockVersion) {
-  return (
-    <section className="max-w-[600px]" role="list">
-      {items.map((_, i) => (
-        <BlockItem key={String(i)} className={i ? 'mt-2.5' : ''} text={_} version={version} />
-      ))}
-    </section>
-  );
-}
-
-function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
-  if (!button?.text) return;
-
-  if (icon)
-    return (
-      <Button
-        key={String(i)}
-        appendLeft={<Icon name={icon} width="24" height="24" />}
-        {...button}
-      />
-    );
-
-  return <Button key={String(i)} {...button} />;
-}

package/src/BaseTileContent.ts

@@ -1,14 +0,0 @@
-import type { BlockVersion } from './model/BlockVersion';
-import type { Picture } from './model/Picture';
-import type { ButtonWithIconProps } from './ui-kit/ButtonProps';
-import type { TitleSize } from './ui-kit/TitleProps';
-
-export interface BaseTileContent {
-  title?: string;
-  titleSize?: TitleSize;
-  description?: string;
-  image?: Picture;
-  items?: string[];
-  buttons?: ButtonWithIconProps[];
-  version?: BlockVersion;
-}

package/src/BenefitsBlock.fixture.tsx

@@ -1,34 +0,0 @@
-import { context } from './setup-fixture';
-
-import { BenefitsBlock } from './BenefitsBlock';
-
-export default (
-  <BenefitsBlock
-    context={context}
-    title="Преимущества кредита"
-    benefits={[
-      {
-        label: 'Без комиссии',
-        description:
-          'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
-        icon: 'ClockIcon',
-      },
-      {
-        label: 'Оформление по паспорту',
-        description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
-        icon: 'SignDocsIcon',
-      },
-      {
-        label: 'Без залога и поручительства',
-        description:
-          'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
-        icon: 'ComfortableCompIcon',
-      },
-      {
-        label: 'Деньги за 3 дня',
-        description: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
-        icon: 'ActualBalanceIcon',
-      },
-    ]}
-  />
-);

package/src/BenefitsBlock.tsx

@@ -1,42 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
-import type { UniBlockProps } from './types';
-import { Icon } from './ui-kit/Icon';
-
-export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
-
-export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefits }) => {
-  return (
-    <section
-      className={`font-sans text-primary-text bg-white p-12 pb-2 flex flex-col items-center ${
-        className || ''
-      }`}
-    >
-      <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
-      {benefits?.length ? (
-        <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
-      ) : null}
-    </section>
-  );
-});
-
-const renderStep = (benefit: Benefit, i: number) => {
-  return (
-    <div key={String(i)} className="flex items-center p-10 gap-5 max-w-[580px]">
-      {benefit.icon && (
-        <Icon
-          className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]"
-          name={benefit.icon}
-          width="70"
-          height="70"
-        />
-      )}
-      <div>
-        <h3 className="font-medium text-xl m-0">{benefit.label}</h3>
-        {benefit.description && (
-          <div className="font-normal text-sm mt-2">{benefit.description}</div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/BenefitsBlockContent.ts

@@ -1,12 +0,0 @@
-import type { IconName } from './ui-kit/IconProps';
-
-export interface Benefit {
-  label: string;
-  description?: string;
-  icon?: IconName;
-}
-
-export interface BenefitsBlockContent {
-  title?: string;
-  benefits?: Benefit[];
-}

package/src/BlockContent.ts

@@ -1,32 +0,0 @@
-import type { BenefitsBlockContent } from './BenefitsBlockContent';
-import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
-import type { FooterContent } from './Footer/FooterContent';
-import type { GalleryContent } from './GalleryContent';
-import type { HeaderContent } from './Header/HeaderContent';
-import type { MobileAppTileContent } from './MobileAppTileContent';
-import type { PlaceholderContent } from './PlaceholderContent';
-import type { ProductBlockContent } from './ProductBlockContent';
-import type { ProductGalleryContent } from './ProductGalleryContent';
-import type { ProductTileContent } from './ProductTileContent';
-import type { PromoTileContent } from './PromoTileContent';
-import type { StepsBlockContent } from './StepsBlockContent';
-import type { TextBlockContent } from './TextBlockContent';
-import type { TileContent } from './TileContent';
-import type { ComparisonTableContent } from './ComparisonTable';
-
-export type BlockContent =
-  | HeaderContent
-  | FooterContent
-  | PlaceholderContent
-  | TileContent
-  | PromoTileContent
-  | TextBlockContent
-  | ProductTileContent
-  | ProductBlockContent
-  | StepsBlockContent
-  | BenefitsBlockContent
-  | ProductGalleryContent
-  | ExchangeRateTileContent
-  | MobileAppTileContent
-  | GalleryContent
-  | ComparisonTableContent;

package/src/Blocks.ts

@@ -1,35 +0,0 @@
-import { BenefitsBlock } from './BenefitsBlock';
-import { ExchangeRateTile } from './ExchangeRateTile';
-import { Footer } from './Footer/Footer';
-import { Gallery } from './Gallery';
-import { Header } from './Header/Header';
-import { MiniGallery } from './MiniGallery';
-import { MobileAppTile } from './MobileAppTile';
-import { Placeholder } from './Placeholder';
-import { ProductBlock } from './ProductBlock';
-import { ProductGallery } from './ProductGallery';
-import { ProductTile } from './ProductTile';
-import { PromoTile } from './PromoTile';
-import { StepsBlock } from './StepsBlock';
-import { TextBlock } from './TextBlock';
-import { Tile } from './Tile';
-import { ComparisonTable } from './ComparisonTable';
-
-export const Blocks = {
-  Header,
-  Footer,
-  Placeholder,
-  Tile,
-  PromoTile,
-  TextBlock,
-  ProductTile,
-  ProductBlock,
-  StepsBlock,
-  BenefitsBlock,
-  ProductGallery,
-  ExchangeRateTile,
-  MobileAppTile,
-  Gallery,
-  MiniGallery,
-  ComparisonTable,
-};

package/src/ComparisonTable/ComparisonTable.fixture.tsx

@@ -1,265 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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>
-    );
-  },
-);