@redneckz/wildless-cms-uni-blocks 0.2.109 → 0.2.113

package/mobile/src/components/TariffsTable/TariffsTable.example.json

@@ -0,0 +1,83 @@
+{
+  "title": "Заголовок",
+  "rowHeaders": [
+    {
+      "title": "Параметр 1",
+      "icon": "MoneyIcon"
+    },
+    {
+      "title": "Параметр 2",
+      "icon": "DollarIcon"
+    },
+    {
+      "title": "Параметр 3"
+    },
+    {
+      "title": "Параметр 4"
+    }
+  ],
+  "columns": [
+    {
+      "data": [
+        [
+          {
+            "label": "Ячейка 1"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 2-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "label": "Ячейка 2-2",
+            "description": "Описание для ячейки 2-2"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 3-1",
+            "description": "Описание для ячейки 3-1"
+          },
+          {
+            "label": "Ячейка 3-2",
+            "buttons": [
+              {
+                "icon": "AppleIcon",
+                "rounded": true,
+                "version": "secondary",
+                "href": "/",
+                "target": "_blank",
+                "text": ""
+              },
+              {
+                "icon": "PlayMarketIcon",
+                "rounded": true,
+                "version": "secondary",
+                "href": "/",
+                "target": "_blank",
+                "text": ""
+              }
+            ]
+          }
+        ],
+        [
+          {
+            "image": {
+              "format": "webp",
+              "size": {
+                "width": 288,
+                "height": 56
+              }
+            }
+          },
+          {
+            "list": {
+              "items": ["item 1", "item 2", "item 3"]
+            }
+          }
+        ]
+      ]
+    }
+  ]
+}

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Title } from '../../ui-kit/Title/Title';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import type { TariffsTableContent } from './TariffsTableContent';
+import { TariffsTableRow } from './TariffsTableRow';
+
+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,
+        colsLengthForScroll: 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>
+        <div role="table">
+          {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}
+        </div>
+      </section>
+    );
+  },
+);

package/mobile/src/components/TariffsTable/TariffsTableCell.tsx

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img';
+import type { TariffsTableCellData } from './TariffsTableContent';
+
+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' : ''
+  }`;
+
+  return (
+    <div className={cellWrapperClasses} role="cell">
+      <div>{cell.map((item, i) => renderCellInner(item, i))}</div>
+    </div>
+  );
+});
+
+const renderCellInner = (
+  { label, description, list, image, buttons }: TariffsTableCellData,
+  i: number,
+) => (
+  <div key={String(i)} 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 && <div className="text-xl font-medium m-0">{label}</div>}
+    {description && <div className="text-sm text-secondary-text">{description}</div>}
+    {list?.items?.length ? (
+      <div className="flex flex-col justify-between items-start">
+        <div role="list">
+          {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/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -0,0 +1,65 @@
+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 {
+  /** @hidden */
+  version?: BlockItemVersion;
+  /**
+   * @title Маркеры
+   * @hidden
+   */
+  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/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -0,0 +1,51 @@
+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="mr-[14px] max-w-6 max-h-6"
+                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/mobile/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/mobile/src/components/TextBlock/TextBlock.example.json

@@ -0,0 +1,13 @@
+{
+  "title": "Текстовый блок",
+  "description": "Описание",
+  "blockVersion": "primary",
+  "iconVersion": "small",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 48,
+      "height": 48
+    }
+  }
+}

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -0,0 +1,76 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img';
+
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import type { UniBlockProps } from '../../types';
+import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
+
+export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
+
+const textBlockStyleMaps: Record<TextBlockVersion, Record<string, string>> = {
+  primary: {
+    background: 'bg-white',
+    icon: 'bg-primary-main text-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    icon: 'bg-white text-primary-main',
+    title: 'text-white',
+    description: 'text-white',
+  },
+  'secondary-light': {
+    background: 'bg-primary-main/10',
+    icon: 'bg-primary-main text-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+  },
+};
+
+export const TextBlock = JSX<TextBlockProps>(
+  ({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items }) => {
+    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+    return (
+      <section
+        className={`font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`}
+      >
+        {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion === 'big' ? renderImage(image) : null}
+        <div className="py-0.5">
+          {title ? (
+            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+          ) : null}
+          {description ? (
+            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+          ) : null}
+          {items?.length ? renderItems(items) : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderItems(items: string[] = [], version?: BlockVersion) {
+  return (
+    <section className="mt-1" role="list">
+      {items.map((_, i) => (
+        <BlockItem key={String(i)} text={_} version={version} />
+      ))}
+    </section>
+  );
+}
+
+function renderIcon(className: string) {
+  return (
+    <div className="mb-3">
+      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+    </div>
+  );
+}
+
+function renderImage(image?: Picture) {
+  return image?.src ? <Img className="pb-3 mr-auto" image={image} /> : null;
+}

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -0,0 +1,27 @@
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Цвет плитки
+ * @enumNames ["Основная", "Второстепенная", "Второстепенная прозрачная"]
+ */
+export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
+
+/**
+ * @title Размер иконки
+ * @enumNames ["Нет", "Маленькая", "Большая"]
+ */
+export type TextBlockIconVersion = 'none' | 'small' | 'big';
+
+/**
+ * @title Текстовый блок
+ */
+export interface TextBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  iconVersion?: TextBlockIconVersion;
+  image?: Picture;
+  blockVersion?: TextBlockVersion;
+  items?: string[]; // TODO: mobile content
+}

package/mobile/src/components/Tile/Tile.example.json

@@ -0,0 +1,21 @@
+{
+  "title": "Плитка",
+  "titleSize": "M",
+  "description": "Описание",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 300
+    },
+    "alt": "Описание картинки",
+    "title": "Подсказка"
+  },
+  "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+  "buttons": [
+    {
+      "text": "Кнопка",
+      "version": "primary"
+    }
+  ],
+  "version": "primary"
+}

package/mobile/src/components/Tile/Tile.tsx

@@ -0,0 +1,52 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { getColSpan } from '../../utils/getColSpan';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { TileContent } from '../Tile/TileContent';
+
+export interface TileProps extends TileContent, UniBlockProps {
+  role?: string;
+}
+
+const tileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const Tile = JSX<TileProps>((props) => {
+  const { children, className = '', version = 'primary', role } = props;
+
+  return (
+    <section
+      className={`font-sans p-9 box-border ${className || ''} ${
+        tileStyleMap[version]
+      } ${getContainerPaddingRight(className)} ${getContainerMinHeight(className)} `}
+      role={role}
+    >
+      <BaseTile {...props}>{children}</BaseTile>
+    </section>
+  );
+});
+
+function getContainerPaddingRight(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'pr-9';
+  } else if (colSpan <= 8) {
+    return 'pr-[4.75rem]';
+  } else {
+    return 'pr-[9.4rem]';
+  }
+}
+
+function getContainerMinHeight(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'min-h-[300px]';
+  } else if (colSpan <= 8) {
+    return 'min-h-[320px]';
+  } else {
+    return 'min-h-[360px]';
+  }
+}

package/mobile/src/components/Tile/TileContent.ts

@@ -0,0 +1,6 @@
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Плитка
+ */
+export type TileContent = Omit<BaseTileCommonProps, 'align'>;

package/mobile/src/content-page-repository/ContentPageRepository.ts

@@ -0,0 +1,63 @@
+import glob from 'glob';
+import util from 'util';
+import { toMobilePage } from '../components/ContentPage/toMobilePage';
+import type { ContentPageDef } from '../types';
+import type { TransformationOptions } from './TransformationOptions';
+import { transformContentPage } from './transformContentPage';
+
+const INDEX_PAGE_SLUG = 'index';
+const find = util.promisify(glob);
+
+// eslint-disable-next-line max-lines-per-function
+export function ContentPageRepository({
+  contentDir = 'content',
+  publicDir = 'public',
+}: Partial<TransformationOptions> = {}) {
+  async function getAllContentPages(): Promise<ContentPageDef[]> {
+    const pagePaths = await find(`${contentDir}/**/*.page.json`);
+    return await Promise.all(pagePaths.map(readPage));
+  }
+
+  async function getSecondaryContentPages() {
+    const pages = await getAllContentPages();
+    return pages.filter((content) => content.slug !== INDEX_PAGE_SLUG);
+  }
+
+  async function getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
+    const pages = await getAllContentPages();
+    return pages.find((content) => content.slug === slug);
+  }
+
+  async function getMobilePageBySlug(slug: string): Promise<ContentPageDef | undefined> {
+    const page = await getContentPageBySlug(slug);
+    return page && toMobilePage(page);
+  }
+
+  async function getIndexPage() {
+    return await getContentPageBySlug(INDEX_PAGE_SLUG);
+  }
+
+  async function getIndexMobilePage() {
+    return await getMobilePageBySlug(INDEX_PAGE_SLUG);
+  }
+
+  const cache: Record<string, ContentPageDef> = {};
+  async function readPage(filePath: string): Promise<ContentPageDef> {
+    if (!(filePath in cache)) {
+      cache[filePath] = await transformContentPage(filePath, {
+        contentDir,
+        publicDir,
+      });
+    }
+    return cache[filePath];
+  }
+
+  return {
+    getAllContentPages,
+    getContentPageBySlug,
+    getMobilePageBySlug,
+    getSecondaryContentPages,
+    getIndexPage,
+    getIndexMobilePage,
+  };
+}

package/mobile/src/content-page-repository/TransformationOptions.ts

@@ -0,0 +1,4 @@
+export interface TransformationOptions {
+  contentDir: string;
+  publicDir: string;
+}

package/mobile/src/content-page-repository/index.ts

@@ -0,0 +1,2 @@
+export { ContentPageRepository } from './ContentPageRepository';
+export { transformContentPage } from './transformContentPage';

package/mobile/src/content-page-repository/mapJSON.spec.ts

@@ -0,0 +1,28 @@
+import { mapJSON } from './mapJSON';
+
+describe('mapJSON', () => {
+  it('should map scalars', async () => {
+    const mapper = (_: any) => (typeof _ === 'string' ? '<MAPPED>' : _);
+    expect(await mapJSON('foo', mapper)).toBe('<MAPPED>');
+  });
+
+  it('should map arrays', async () => {
+    const mapper = (_: any) => (Array.isArray(_) ? _.map((item) => item.toUpperCase()) : _);
+    expect(await mapJSON(['foo', 'bar', 'baz'], mapper)).toEqual(['FOO', 'BAR', 'BAZ']);
+  });
+
+  it('should map objects', async () => {
+    const mapper = (_: any) => ('bar' in _ ? { ..._, bar: '<MAPPED>' } : _);
+    expect(await mapJSON({ foo: { bar: 'baz' } }, mapper)).toEqual({ foo: { bar: '<MAPPED>' } });
+  });
+
+  it('should support async mappers', async () => {
+    const mapper = (_: any) => ('bar' in _ ? Promise.resolve({ ..._, bar: '<MAPPED>' }) : _);
+    expect(await mapJSON({ foo: { bar: 'baz' } }, mapper)).toEqual({ foo: { bar: '<MAPPED>' } });
+  });
+
+  it('should map nil values as is', async () => {
+    const mapper = (_: any) => (!_ ? '<EMPTY>' : _);
+    expect(await mapJSON([null, undefined, ''], mapper)).toEqual([null, undefined, '<EMPTY>']);
+  });
+});

package/mobile/src/content-page-repository/mapJSON.ts

@@ -0,0 +1,23 @@
+export async function mapJSON<T>(
+  data: T,
+  mapper: <In, Out = In>(value: In, key: string[]) => Promise<Out>,
+  key: string[] = [],
+): Promise<T> {
+  if (data === null || data === undefined) return data;
+
+  const mappedData = await mapper(data, key);
+  if (mappedData !== data) return mappedData as T;
+
+  if (Array.isArray(data)) {
+    const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(key)));
+    return Promise.all(values) as any;
+  } else if (typeof data === 'object' && (data as any).toString() === '[object Object]') {
+    const subKeys = Object.keys(data as any);
+    const values = subKeys.map((k) => mapJSON(data[k], mapper, [k].concat(key)));
+    const pairs = (await Promise.all(values)).map((_, i) => ({
+      [subKeys[i]]: _,
+    }));
+    return Object.assign({}, ...pairs);
+  }
+  return mapper<T>(data, key);
+}