@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.1

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -7,17 +7,14 @@ import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName, IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
-import { Text } from '../../ui-kit/Text/Text';
+import type { IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
 import type { Picture } from '../../model/Picture';
-import { renderRoundedIcon } from './renderRoundedIcon';
+import { PrimaryFoldButton } from './PrimaryFoldButton';
 
 interface RollupItemProps extends RollupItemContent, UniBlockProps {
   labelIcon?: Picture;
@@ -92,15 +89,16 @@ const renderFoldButton = ({
   onToggle,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
+  const icon = getIconName(isUnfolded);
 
   return version === 'primary' ? (
-    renderPrimaryFoldButton({
-      label,
-      labelIcon,
-      labelIconBgVersion,
-      icon: getIconName(isUnfolded),
-      onToggle,
-    })
+    <PrimaryFoldButton
+      label={label}
+      labelIcon={labelIcon}
+      labelIconBgVersion={labelIconBgVersion}
+      icon={icon}
+      onToggle={onToggle}
+    />
   ) : (
     <DefaultFoldButton
       label={label}
@@ -109,39 +107,3 @@ const renderFoldButton = ({
     />
   );
 };
-
-interface PrimaryFoldButtonProps {
-  label?: string;
-  labelIcon?: Picture;
-  labelIconBgVersion?: IconBgVersion;
-  icon?: IconName;
-  onToggle?: () => void;
-}
-
-const renderPrimaryFoldButton = ({
-  label,
-  labelIconBgVersion,
-  icon,
-  onToggle,
-  labelIcon,
-}: PrimaryFoldButtonProps) => {
-  return (
-    <button
-      className={style(
-        'border-none bg-transparent flex justify-between items-center w-full group/button',
-        labelIcon?.icon ? 'py-xs' : 'py-lg',
-      )}
-      onClick={onToggle}
-    >
-      <div className="flex items-center text-start group-hover/button:text-primary-main gap-s">
-        {renderRoundedIcon(labelIcon, labelIconBgVersion)}
-        {label ? (
-          <Text size="text-h6" font="font-normal">
-            {label}
-          </Text>
-        ) : null}
-      </div>
-      {icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null}
-    </button>
-  );
-};

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -21,7 +21,7 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     selectedBranch,
     onSelectedBranch,
   }) => (
-    <div className="flex flex-col sm:flex-row gap-m order-1">
+    <div className="flex flex-col @xl:flex-row gap-m order-1">
       <div className="flex-1 min-w-0">
         <WrapperSelect
           data={regions}

package/mobile/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -21,7 +21,7 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     onSelectedBoxSize,
   }) => {
     return (
-      <div className="flex flex-col sm:flex-row gap-m order-1">
+      <div className="flex flex-col @xl:flex-row gap-m order-1">
         <div className="flex-1 min-w-0">
           <WrapperSelect
             data={caseVolumes}

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -33,7 +33,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     onClick,
   }) => {
     return (
-      <div className="contents sm:block flex-1 space-y-xl">
+      <div className="contents @xl:block flex-1 space-y-xl">
         <RegionsAndBranches
           regions={regions}
           selectedRegion={selectedRegion}
@@ -56,7 +56,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
             Тип договора
           </Text>
         </div>
-        <div className="contents sm:flex justify-between items-center gap-m">
+        <div className="contents @md:flex justify-between items-center gap-m">
           <RadioButtons />
           <Button text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
         </div>

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -37,7 +37,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
   const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
-    <div className="flex flex-col sm:flex-row gap-4xl align-top">
+    <div className="flex flex-col @4xl:flex-row gap-4xl align-top">
       <SafeDepositRentalFields
         {...data}
         regions={regions}

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -12,17 +12,17 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
   const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
 
   return (
-    <div className="contents sm:flex flex-col justify-between order-2">
-      <div className="flex flex-col sm:flex-row gap-x-6xl gap-y-2xl order-5 sm:order-none py-2xl sm:py-0 border-t border-main-divider sm:border-none">
+    <div className="contents @xl:flex flex-col justify-between gap-xl order-2">
+      <div className="flex flex-col @xl:flex-row gap-x-6xl gap-y-2xl order-5 @xl:order-none py-2xl @xl:py-0 border-t border-main-divider @xl:border-none">
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="sm:hidden order-3 mb-xs text-s font-light text-secondary-text">
+      <span className="@xl:hidden order-3 mb-xs text-s font-light text-secondary-text">
         {imageDescription}
       </span>
-      <div className="flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center">
-        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-60" />
-        <span className="hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line">
+      <div className="flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center">
+        <Img image={{ icon: 'PackA4Icon' }} className="@xl:h-60" />
+        <span className="hidden @xl:inline text-s font-light text-white opacity-80 whitespace-pre-line">
           {imageDescription}
         </span>
       </div>
@@ -32,9 +32,9 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 
 const renderTotal = (label: string, total: string | number) => {
   return (
-    <div className="flex justify-between items-center gap-y-xs sm:flex-col sm:items-start">
+    <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
       <div className="text-l font-light text-secondary-text">{label}</div>
-      <span className="text-l sm:text-h3 text-primary-text">{total}</span>
+      <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
     </div>
   );
 };

package/mobile/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Option, Select } from '../../ui-kit/Select/Select';
+import { Option } from '../../ui-kit/Select/Option';
+import { Select } from '../../ui-kit/Select/Select';
 import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {

package/mobile/src/components/StickyBottomMenu/RenderMenuItems.tsx

@@ -13,7 +13,10 @@ export const RenderMenuItems = JSX<RenderMenuItems>(({ menuItems, onClick }) =>
   const [activeIndex] = useActiveRoute(menuItems);
 
   return (
-    <BlockWrapper className="sticky bottom-0 left-0 right-0 bg-transparent z-[100]" padding="p-0">
+    <BlockWrapper
+      className="fixed bottom-0 left-0 right-0 my-0 mx-auto w-full bg-transparent z-[100]"
+      padding="p-0"
+    >
       <div className="ml-auto container bg-white flex justify-center shadow-blue-gray">
         {menuItems.map((_, i) => (
           <RenderItem key={String(i)} isActive={i === activeIndex} item={_} onClick={onClick} />

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

@@ -2,44 +2,77 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import {
+  type InnerTableButtonProps,
+  TableInnerButton,
+} from '../../ui-kit/InnerTable/InnerTableButton';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
 import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
+import { Text } from '../../ui-kit/Text/Text';
 
 export type EmbeddableCellDataType =
-  | ButtonContent
   | LabelDescriptionCell
+  | ButtonContent
   | ImageContent
-  | ListProps;
+  | ListProps
+  | InnerTableButtonProps;
+
+interface TableCellDataProps extends InnerTableButtonProps {
+  isVisible?: boolean;
+  displayTable: (props: TariffsTableInnerContent) => void;
+}
 
 const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) =>
   renderButtonsSection(buttons, {
-    className: 'mt-s',
-    buttonClassName: 'w-12 h-12',
+    buttonClassName: 'basis-0',
   });
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => (
-  <div>
-    {label ? <div className="mb-xs">{label}</div> : null}
-    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
+  <div className="space-y-2xs">
+    {label ? <div>{label}</div> : null}
+    {description ? (
+      <div>
+        <Text size="text-s" color="text-secondary-text">
+          {description}
+        </Text>
+      </div>
+    ) : null}
   </div>
 );
 
-const renderImgCellData = ({ image }: ImageContent) =>
-  image?.src ? <Img image={image} className="m-0" imageClassName="m-0" /> : null;
+const renderImgCellData = ({ image }: ImageContent) => (image?.src ? <Img image={image} /> : null);
 
 const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   <List
-    className="flex flex-col justify-between items-start text-m pl-xs text-base"
+    className="flex flex-col justify-between items-start text-h6"
     isDotted={isDotted ?? true}
     {...rest}
   />
 );
 
+const renderInnerTableCellData = ({
+  isVisible,
+  displayTable,
+  dataUrl,
+  pdfUrl,
+  isOpen,
+}: TableCellDataProps) =>
+  isVisible ? (
+    <TableInnerButton
+      isOpen={isOpen}
+      onClick={() => {
+        displayTable({ dataUrl, pdfUrl });
+      }}
+    />
+  ) : null;
+
 export const EmbeddableCellData = {
   Buttons: renderButtonsCellData,
   Img: renderImgCellData,
   List: renderListCellData,
   LabelDescription: renderLabelDescriptionCellData,
+  Table: renderInnerTableCellData,
 };

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

@@ -2,7 +2,6 @@
   "content": {
     "title": "Заголовок",
     "description": "Описание",
-    "orientation": "vertical",
     "rowHeaders": [
       {
         "title": "Параметр 1",

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

@@ -1,56 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type {
-  CellDef,
-  TariffsTableColumn,
-  TariffsTableContent,
-  TariffsTableRowHeader,
-} from './TariffsTableContent';
-import { TariffsTableHorizontal } from './TariffsTableHorizontal';
-import { TariffsTableVertical } from './TariffsTableVertical';
+import type { TariffsTableContent } from './TariffsTableContent';
+import { TariffsTableRow } from './TariffsTableRow';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import { TariffsTableWrapper } from './TariffsTableWrapper';
+import { headlineAlign } from './headlineAlign';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
   ({
-    className,
+    className = '',
     title,
     description,
-    tariffsColumns: columns,
     rowHeaders,
-    orientation = 'vertical',
+    tariffsColumns: columns,
+    hiddenRowsNum = 0,
     ...rest
   }) => {
-    const colData = getColData(columns);
-    const tiles = getTiles(rowHeaders, colData);
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders?.map((header, i) => ({
+      header,
+      data: colData.map((col) => col?.[i] || []),
+    }));
+    const itemCount = colData.length;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: itemCount,
+      visibleItemCount: COLS_LENGTH_FOR_SCROLL,
+    });
+    const rows = (rowData || []).map((row, i) => (
+      <TariffsTableRow key={String(i)} row={row} activeIndex={activeIndex} rowIdx={i} {...rest} />
+    ));
+    const [visibleRows, hiddenRows] =
+      hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
 
     return (
-      <section
-        className={`p-6xl space-3xl bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
+      <BlockWrapper
+        className={style('overflow-hidden relative space-y-0 @4xl:space-y-xl', className)}
+        defaultPadding="p-6xl"
+        {...rest}
       >
         <Headline
           title={title}
           description={description}
           headlineVersion="M"
-          align="text-left"
           isEmbedded={true}
+          align={headlineAlign}
         />
-        {orientation === 'vertical' ? (
-          <TariffsTableVertical tiles={tiles} {...rest} />
-        ) : (
-          <TariffsTableHorizontal tiles={tiles} {...rest} />
-        )}
-      </section>
+        <div className="space-y-m">
+          {hiddenRowsNum > 0 ? (
+            <Foldable
+              renderFoldableSection={({ isUnfolded }) => (
+                <TariffsTableWrapper controls={controls}>
+                  {visibleRows}
+                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                </TariffsTableWrapper>
+              )}
+              renderFoldButton={renderDefaultFoldButton}
+            />
+          ) : (
+            <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>
+          )}
+        </div>
+      </BlockWrapper>
     );
   },
 );
-
-const getColData = (columns: TariffsTableColumn[] | undefined) =>
-  columns?.[0]?.data ? columns[0].data : [];
-
-const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
-  rowHeaders?.map((header, i) => ({
-    header,
-    data: colData?.[i] || [{}],
-  }));

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

@@ -29,10 +29,7 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(
     setOpenTableInnerIdx,
   }) => {
     return (
-      <div
-        className="w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0"
-        role="cell"
-      >
+      <div className="w-80 flex-grow flex flex-col gap-m @4xl:gap-lg" role="cell">
         {cells?.length
           ? cells.map(
               renderCellInner({

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,7 +1,6 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent, UniBlockProps } from '../../model/JSXBlock';
-import type { ListOrientation } from '../../model/ListOrientation';
 import type { IconProps } from '../../model/Picture';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
@@ -119,8 +118,6 @@ export type TariffsTableContent = UniBlockContent &
     tariffsColumns?: TariffsTableColumn[];
     /** @title Параметры */
     rowHeaders?: TariffsTableRowHeader[];
-    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-    orientation?: ListOrientation;
     /** @title Скрывать строк */
     hiddenRowsNum?: number;
   };

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

@@ -47,11 +47,7 @@ export const renderCellInner =
     };
 
     return (
-      <div
-        key={String(i)}
-        className={cell?.tableCellType === 'Table' ? 'ml-5xl' : `first:pt-lg last:pb-lg pl-5xl`}
-      >
-        {i > 0 ? <div className="h-5" /> : null}
+      <div key={String(i)}>
         {renderCell({
           cell,
           cellProps: {

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

@@ -4,10 +4,11 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
-import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { COLUMN_WIDTH, firstCellStyle } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
 import type { Data } from './TariffsTableContent';
 import { TariffsTableRowContainer } from './TariffsTableRowContainer';
+import { style } from '../../utils/style';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
@@ -35,10 +36,15 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         tableInner={tableInner}
         {...rest}
       >
-        <div className={`text-s py-lg ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
-          <div className="flex items-center text-primary-text" role="cell">
+        <div className={style('text-s', firstCellStyle)}>
+          <div className="flex gap-m items-center text-primary-text" role="cell">
             {header?.icon ? (
-              <Img className="mr-m max-w-6" image={header.icon} width="24" height="24" />
+              <Img
+                className="hidden @4xl:block max-w-6"
+                image={header.icon}
+                width="24"
+                height="24"
+              />
             ) : null}
             {header?.title ? <div className="text-m font-light">{header?.title}</div> : null}
           </div>

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

@@ -2,6 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import { style } from '../../utils/style';
+import { dividerStyle } from './constants';
 
 export interface TariffsTableRowContainerProps extends UniBlockProps {
   tableInner?: TariffsTableInnerContent;
@@ -11,7 +13,14 @@ export interface TariffsTableRowContainerProps extends UniBlockProps {
 export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
   ({ children, tableInner, onHideContentClick }) => (
     <div className="self-start flex flex-col" role="row">
-      <div className="flex">{children}</div>
+      <div
+        className={style(
+          dividerStyle,
+          'flex flex-col @4xl:flex-row gap-y-xs gap-x-5xl pb-lg @4xl:pt-lg',
+        )}
+      >
+        {children}
+      </div>
       {tableInner ? (
         <div className="origin-top animate-expansion">
           <InnerTable {...tableInner} onClick={onHideContentClick} />

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

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { CarouselControls } from '../../hooks/useCarouselControls';
+
+interface WrapperProps {
+  controls: CarouselControls;
+}
+
+export const TariffsTableWrapper = JSX<WrapperProps>(({ children, controls }) => {
+  const { isScrollAvailable } = controls;
+
+  return (
+    <div role="table">
+      <div className="relative space-y-xs">
+        {children}
+        {renderArrows({
+          ...controls,
+          btnClass: ['top-28', 'top-11'],
+          className: 'right-7',
+        })}
+      </div>
+      {isScrollAvailable ? (
+        <div className="absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" />
+      ) : null}
+    </div>
+  );
+});

package/mobile/src/components/TariffsTable/constants.ts

@@ -1,4 +1,4 @@
-export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-export const FIRST_CELL_CLASSES = 'w-80 flex-shrink-0';
+export const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
+export const firstCellStyle = 'w-80 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/TariffsTable/headlineAlign.tsx

@@ -0,0 +1 @@
+export const headlineAlign = 'text-left';

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

@@ -1,11 +1,12 @@
+import { fileResolver, resolveRef } from '@redneckz/json-ref';
+import type { JSONNode } from '@redneckz/json-ref/lib/JSONNode';
 import fs from 'fs';
-import path from 'path';
 import util from 'util';
 import { Attachment } from '../model/Attachment';
 import type { ContentPageDef } from '../model/ContentPageDef';
 import type { Picture } from '../model/Picture';
-import { mapJSON } from './mapJSON';
 import type { TransformationOptions } from './TransformationOptions';
+import { mapJSON } from './mapJSON';
 import { transformDocument } from './transformDocument';
 import { transformHTML } from './transformHTML';
 import { transformMarkdown } from './transformMarkdown';
@@ -34,14 +35,14 @@ export async function transformContentPage(
 ): Promise<ContentPageDef> {
   const content = await readFile(pagePath, 'utf8');
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  const result = await mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
+  const json = await resolveRef(JSON.parse(content) as JSONNode, fileResolver(options.contentDir));
+  const result = await mapJSON(json as ContentPageDef, async (value: any, [key]) => {
     try {
       if (isMarkdown(key, value)) {
         return await transformMarkdown(value as string);
       } else if (isHTML(key, value)) {
         return await transformHTML(value as string);
-      } else if (isDocument(value)) {
+      } else if (isDocumentRef(value)) {
         return await transformDocument(value, pagePath, options);
       } else if (isPicture(value)) {
         return await transformPicture(value, pagePath, options);
@@ -65,12 +66,13 @@ const isMarkdown = (key: string, value: any): value is string =>
   isString(value) && key?.endsWith('__md');
 const isHTML = (key: string, value: any): value is string =>
   isString(value) && key?.endsWith('__html');
-const isDocument = (_: any): _ is Attachment =>
-  Boolean(_ && isLocalPath(_?.src) && isDocumentExt(path.extname(_?.src as string)));
-const isDocumentExt = (input: string) =>
-  DOCUMENT_EXT_LIST.some((ext) => input.toLowerCase().endsWith(ext));
+
+const isDocumentRef = (_: any): _ is Attachment =>
+  isLocalPath(_?.src) && DOCUMENT_EXT_LIST.some((ext) => _.src.toLowerCase().endsWith(ext));
+
 const isPicture = (_: any): _ is Picture => Boolean(_ && isLocalPath(_?.src));
-const isLocalPath = (_: any): boolean => isString(_) && _.length < 1024 && !isURL(_);
+
+const isLocalPath = (_: any): _ is string => isString(_) && _.length < 1024 && !isURL(_);
 const isURL = (src: string) => ['data:', 'https:', 'http:'].some((proto) => src.startsWith(proto));
 
 const isString = (_: any): _ is string => Boolean(_ && typeof _ === 'string');

package/mobile/src/icons/CloseIcon.svg

@@ -1,6 +1,6 @@
 <svg title="Крестик" isInverse="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.70304 5.11173C3.31449 4.72318 3.31449 4.09322 3.70304 3.70468C4.09159 3.31613 4.72155 3.31613 5.1101 3.70467L11.3313 9.92584C11.7198 10.3144 11.7198 10.9444 11.3313 11.3329C10.9427 11.7214 10.3128 11.7214 9.92421 11.3329L3.70304 5.11173Z" fill="#000000"/>
-<path d="M12.6679 14.0766C12.2793 13.688 12.2793 13.0581 12.6679 12.6695C13.0564 12.281 13.6864 12.281 14.0749 12.6695L20.2961 18.8907C20.6847 19.2792 20.6847 19.9092 20.2961 20.2977C19.9076 20.6863 19.2776 20.6863 18.8891 20.2977L12.6679 14.0766Z" fill="#000000"/>
-<path d="M14.0746 11.3316C13.6861 11.7202 13.0561 11.7202 12.6676 11.3316C12.279 10.9431 12.279 10.3131 12.6676 9.92457L18.8887 3.70341C19.2773 3.31486 19.9072 3.31486 20.2958 3.70341C20.6843 4.09195 20.6843 4.72191 20.2958 5.11046L14.0746 11.3316Z" fill="#000000"/>
-<path d="M5.11027 20.2262C4.72172 20.6147 4.09176 20.6147 3.70321 20.2262C3.31466 19.8376 3.31466 19.2077 3.70321 18.8191L9.92438 12.5979C10.3129 12.2094 10.9429 12.2094 11.3314 12.5979C11.72 12.9865 11.72 13.6164 11.3314 14.005L5.11027 20.2262Z" fill="#000000"/>
+<path d="M3.70304 5.11173C3.31449 4.72318 3.31449 4.09322 3.70304 3.70468C4.09159 3.31613 4.72155 3.31613 5.1101 3.70467L11.3313 9.92584C11.7198 10.3144 11.7198 10.9444 11.3313 11.3329C10.9427 11.7214 10.3128 11.7214 9.92421 11.3329L3.70304 5.11173Z" fill="currentColor"/>
+<path d="M12.6679 14.0766C12.2793 13.688 12.2793 13.0581 12.6679 12.6695C13.0564 12.281 13.6864 12.281 14.0749 12.6695L20.2961 18.8907C20.6847 19.2792 20.6847 19.9092 20.2961 20.2977C19.9076 20.6863 19.2776 20.6863 18.8891 20.2977L12.6679 14.0766Z" fill="currentColor"/>
+<path d="M14.0746 11.3316C13.6861 11.7202 13.0561 11.7202 12.6676 11.3316C12.279 10.9431 12.279 10.3131 12.6676 9.92457L18.8887 3.70341C19.2773 3.31486 19.9072 3.31486 20.2958 3.70341C20.6843 4.09195 20.6843 4.72191 20.2958 5.11046L14.0746 11.3316Z" fill="currentColor"/>
+<path d="M5.11027 20.2262C4.72172 20.6147 4.09176 20.6147 3.70321 20.2262C3.31466 19.8376 3.31466 19.2077 3.70321 18.8191L9.92438 12.5979C10.3129 12.2094 10.9429 12.2094 11.3314 12.5979C11.72 12.9865 11.72 13.6164 11.3314 14.005L5.11027 20.2262Z" fill="currentColor"/>
 </svg>

package/mobile/src/model/AlignStyles.ts

@@ -0,0 +1 @@
+export const AlignStyles = 'text-left';

package/mobile/src/services/search/search.ts

@@ -1,6 +1,6 @@
 import { compareBy, desc } from '../../utils/Comparator';
+import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { zip } from '../../utils/zip';
-import { jaroWinklerDistance } from './jaroWinklerDistance';
 import { joinMaps } from './joinMaps';
 import { textRank } from './textRank';
 import { tokenize } from './tokenize';

package/mobile/src/services/search/textRank.ts

@@ -1,6 +1,6 @@
+import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { max } from '../../utils/maxBy';
 import { sum } from '../../utils/sum';
-import { jaroWinklerDistance } from './jaroWinklerDistance';
 import { tokenize } from './tokenize';
 
 export const textRank =

package/mobile/src/services/search/useSearch.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import type { Nullable } from '../../utils/Nullable';
+import { useDebouncedEffect } from '@redneckz/uni-jsx/lib/hooks/useDebouncedEffect';
 import { fetchJSON } from '../../utils/fetchJSON';
 import { joinPath } from '../../utils/url';
-import { useDebouncedEffect } from '../../utils/useDebouncedEffect';
 import { CorpusItem, SearchIndex, search } from './search';
 
 const SEARCH_INDEX_FILENAME = 'search.index.json';