@redneckz/wildless-cms-uni-blocks 0.2.75 → 0.2.78

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>
-    );
-  },
-);

package/src/ComparisonTable/ComparisonTableContent.ts

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

@@ -1,50 +0,0 @@
-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/index.ts

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

package/src/ContentPage.fixture.tsx

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

package/src/ContentPage.tsx

@@ -1,88 +0,0 @@
-import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
-import type { BlockContent } from './BlockContent';
-import { LikeControl } from './LikeControl';
-import { Placeholder } from './Placeholder';
-import type { BlockDef, ContentPageDef, UniBlockProps } from './types';
-
-interface BlockDecoratorProps<VNode> {
-  blockClassName: string;
-  block: BlockDef;
-  render: (props: { blockClassName: string; block: BlockDef }) => VNode;
-}
-
-export type BlockDecorator<VNode = any> = (
-  props: BlockDecoratorProps<VNode>,
-  index?: number | string,
-) => any;
-
-export interface ContentPageProps extends UniBlockProps {
-  blocksRegistry: Record<
-    string,
-    (props: PropsWithChildren<UniBlockProps & BlockContent, any>, context?: any) => any
-  >;
-  data: ContentPageDef;
-  blockDecorator?: BlockDecorator;
-}
-
-const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
-  render({ blockClassName, block });
-
-export const ContentPage = JSX<ContentPageProps>(
-  ({
-    className,
-    context,
-    blocksRegistry,
-    data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' },
-    blockDecorator = defaultBlockDecorator,
-  }) => {
-    return (
-      <section className="relative" data-theme={colorPalette}>
-        <div className={`grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`}>
-          {blocks?.length ? blocks.map(renderBlock) : null}
-        </div>
-        {likeControl && (
-          <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
-            <LikeControl
-              className="rounded-tl-lg sticky bottom-0 pointer-events-auto"
-              context={context}
-            />
-          </div>
-        )}
-      </section>
-    );
-
-    function renderBlock(block: BlockDef, i: number) {
-      const { type } = block;
-      if (!(type in blocksRegistry)) {
-        console.warn(`No block with "${type}" is registered`);
-      }
-
-      const BlockComponent = blocksRegistry[type] || Placeholder;
-      return blockDecorator(
-        {
-          blockClassName: style2className(block.style),
-          block,
-          render: (props) => {
-            const { version, content, blocks } = props.block;
-            return (
-              <BlockComponent
-                key={`${type}-${i}`}
-                className={props.blockClassName}
-                version={version}
-                context={context}
-                {...content}
-              >
-                {blocks?.length ? blocks.map(renderBlock) : null}
-              </BlockComponent>
-            );
-          },
-        },
-        `block-${i}`,
-      );
-    }
-  },
-);
-
-function style2className(style: string[] | undefined | null): string {
-  return style ? style.join(' ') : '';
-}

package/src/ContentPageHead.tsx

@@ -1,26 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { ContentPageMeta } from './types';
-
-export interface ContentPageHeadProps {
-  HeadComponent: Function;
-  data: ContentPageMeta;
-}
-
-export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
-  const { title, description, keywords, robots, og } = data;
-  return (
-    <HeadComponent>
-      <title>{title}</title>
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      {description && <meta name="description" content={description} />}
-      {keywords && <meta name="keywords" content={keywords.join(',')} />}
-      {robots && <meta name="robots" content={robots.join(',')} />}
-      {og
-        ? Object.entries(og).map(([key, value]) => (
-            <meta key={key} name={`og:${key}`} content={value} />
-          ))
-        : null}
-      {children}
-    </HeadComponent>
-  );
-});

package/src/ExchangeRateTile.fixture.tsx

@@ -1,11 +0,0 @@
-import { context } from './setup-fixture';
-
-import { ExchangeRateTile } from './ExchangeRateTile';
-
-export default {
-  default: (
-    <div className="grid grid-cols-12">
-      <ExchangeRateTile context={context} className="col-span-4" />
-    </div>
-  ),
-};