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

package/src/components/BlockContent.ts

@@ -0,0 +1,32 @@
+import type { BenefitsBlockContent } from './BenefitsBlock/BenefitsBlockContent';
+import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
+import type { FooterContent } from './Footer/FooterContent';
+import type { GalleryContent } from './Gallery/GalleryContent';
+import type { HeaderContent } from './Header/HeaderContent';
+import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
+import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
+import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
+import type { ProductGalleryContent } from './ProductGallery/ProductGalleryContent';
+import type { ProductTileContent } from './ProductTile/ProductTileContent';
+import type { PromoTileContent } from './PromoTile/PromoTileContent';
+import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
+import type { TextBlockContent } from './TextBlock/TextBlockContent';
+import type { TileContent } from './Tile/TileContent';
+import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
+
+export type BlockContent =
+  | HeaderContent
+  | FooterContent
+  | PlaceholderContent
+  | TileContent
+  | PromoTileContent
+  | TextBlockContent
+  | ProductTileContent
+  | ProductBlockContent
+  | StepsBlockContent
+  | BenefitsBlockContent
+  | ProductGalleryContent
+  | ExchangeRateTileContent
+  | MobileAppTileContent
+  | GalleryContent
+  | ComparisonTableContent;

package/src/components/Blocks.ts

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

package/src/components/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/components/ComparisonTable/ComparisonTable.tsx

@@ -0,0 +1,126 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Title } from '../../ui-kit/Title/Title';
+import { TableRowContainer } from './TableRowContainer';
+import { TableCarouselContainer } from './TableCarouselContainer';
+import { useLink } from '../../hooks/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/components/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/Button/ButtonProps';
+import type { IconName } from '../../ui-kit/Icon/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/components/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/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/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/components/ContentPage/ContentPage.fixture.tsx

@@ -0,0 +1,58 @@
+import { context, mobileContext } from '../../setup-fixture';
+
+import { Blocks } from '../Blocks';
+import { BlockDecorator, ContentPage } from './ContentPage';
+import { MobileBlocks } from '../MobileBlocks';
+import { toMobilePage } from './toMobilePage';
+import type { ContentPageDef } from '../../types';
+
+const data = require('./ContentPage.page.json');
+
+const blockDecorator: BlockDecorator = ({ blockClassName, block, render }, i) => (
+  <div
+    key={i}
+    className={`relative flex items-stretch ${blockClassName}`}
+    onClick={() => console.log('Edit', block)}
+  >
+    {render({ block, blockClassName: `${blockClassName} w-full` })}
+    <button
+      className="absolute w-8 h-8 top-4 right-4 border rounded-full"
+      onClick={(e) => {
+        console.log('Delete', block);
+        e.stopPropagation();
+      }}
+    >
+      ╳
+    </button>
+  </div>
+);
+
+export default {
+  default: (
+    <ContentPage
+      className="bg-main"
+      context={context}
+      blocksRegistry={Blocks}
+      data={data as ContentPageDef}
+    />
+  ),
+  mobile: (
+    <ContentPage
+      className="bg-secondary-text"
+      context={mobileContext}
+      blocksRegistry={MobileBlocks}
+      data={toMobilePage(data as ContentPageDef)}
+    />
+  ),
+  editor: (
+    <div style={{ background: "url('grid.svg')", height: '100%' }}>
+      <ContentPage
+        className="bg-transparent"
+        context={context}
+        blocksRegistry={Blocks}
+        data={data as ContentPageDef}
+        blockDecorator={blockDecorator}
+      />
+    </div>
+  ),
+};