@redneckz/wildless-cms-uni-blocks 0.13.23 → 0.14.0

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,9 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { CarouselControls } from '../../hooks/useCarouselControls';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -12,13 +10,11 @@ import { Headline } from '../Headline/Headline';
 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 {}
 
-interface WrapperProps {
-  controls: CarouselControls;
-}
-
 export const TariffsTable = JSX<TariffsTableProps>(
   ({
     className = '',
@@ -47,45 +43,33 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={style('overflow-hidden relative space-y-xl', className)}
+        className={style('overflow-hidden relative space-y-0 @4xl:space-y-xl', className)}
         defaultPadding="p-6xl"
         {...rest}
       >
-        <Headline title={title} description={description} headlineVersion="M" isEmbedded={true} />
-        {hiddenRowsNum > 0 ? (
-          <Foldable
-            renderFoldableSection={({ isUnfolded }) => (
-              <Wrapper controls={controls}>
-                {visibleRows}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-              </Wrapper>
-            )}
-            renderFoldButton={renderDefaultFoldButton}
-          />
-        ) : (
-          <Wrapper controls={controls}>{rows}</Wrapper>
-        )}
+        <Headline
+          title={title}
+          description={description}
+          headlineVersion="M"
+          isEmbedded={true}
+          align={headlineAlign}
+        />
+        <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 Wrapper = JSX<WrapperProps>(({ children, controls }) => {
-  const { isScrollAvailable } = controls;
-
-  return (
-    <div role="table">
-      <div className="relative">
-        {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/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/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/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/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/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/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/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/src/components/TariffsTable/headlineAlign.mobile.tsx

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

package/src/components/TariffsTable/headlineAlign.tsx

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

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

@@ -0,0 +1,48 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { Tile } from './Tile';
+import type { TileContent } from './TileContent';
+
+const image: Picture = {
+  src: 'from-5-5-percent.svg',
+  format: 'webp',
+  size: {
+    width: 145,
+  },
+};
+
+export const TILE: TileContent = {
+  title: 'Кредиты',
+  isDotted: true,
+  listItemSize: 'L',
+  items: ['До 3 млн ₽', 'до 5 лет'],
+  __html: undefined,
+  buttons: [
+    {
+      text: 'Подробнее',
+      href: '/credit-cards',
+      version: 'secondary',
+    },
+  ],
+  image,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Tile className="col-span-12" {...TILE} />
+    </div>
+  ),
+  rightImage: (
+    <div className="container grid grid-cols-12">
+      <Tile
+        className="col-span-12"
+        {...TILE}
+        imageOptions={{
+          isImageAlwaysOnRight: true,
+        }}
+      />
+    </div>
+  ),
+};

package/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');