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

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,37 +1,44 @@
-import { JSX } from '@redneckz/uni-jsx';
 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,
-  type TableInnerButtonProps,
 } 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 =
   | LabelDescriptionCell
   | ButtonContent
   | ImageContent
   | ListProps
-  | TableInnerButtonProps;
+  | InnerTableButtonProps;
 
-interface TableCellDataProps extends TableInnerButtonProps {
+interface TableCellDataProps extends InnerTableButtonProps {
   isVisible?: boolean;
   displayTable: (props: TariffsTableInnerContent) => void;
 }
 
-const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) => renderButtonsSection(buttons);
+const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) =>
+  renderButtonsSection(buttons, {
+    buttonClassName: 'basis-0',
+  });
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => (
   <div className="space-y-2xs">
-    {label ? <div className="text-h6 m-0">{label}</div> : null}
+    {label ? <div>{label}</div> : null}
     {description ? (
-      <div className="text-secondary-text text-l font-light">{description}</div>
+      <div>
+        <Text size="text-s" color="text-secondary-text">
+          {description}
+        </Text>
+      </div>
     ) : null}
   </div>
 );
@@ -46,22 +53,26 @@ const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   />
 );
 
-const renderTableCellData = JSX<TableCellDataProps>(
-  ({ isVisible, displayTable, dataUrl, pdfUrl, isOpen }) =>
-    isVisible ? (
-      <TableInnerButton
-        isOpen={isOpen}
-        onClick={() => {
-          displayTable({ dataUrl, pdfUrl });
-        }}
-      />
-    ) : null,
-);
+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: renderTableCellData,
+  Table: renderInnerTableCellData,
 };

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

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

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

@@ -1,6 +1,10 @@
 import '../../setup-fixture';
 
-import { TARIFFS_TABLE_FIXTURE_EXAMPLE } from './dataFixture';
+import {
+  columnsTable,
+  TARIFFS_TABLE_FIXTURE_EXAMPLE,
+  TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE,
+} from './dataFixture';
 import { TariffsTable } from './TariffsTable';
 
 export default {
@@ -9,12 +13,12 @@ export default {
       <TariffsTable className="col-span-12" {...TARIFFS_TABLE_FIXTURE_EXAMPLE} />
     </div>
   ),
-  horizontal: (
+  '1 columns with inner table': (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
-        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        orientation="horizontal"
+        {...TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(1).fill(columnsTable).flat()}
       />
     </div>
   ),

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -14,47 +14,37 @@ export default {
       <TariffsTable
         className="col-span-12"
         {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={Array(2).fill(columns).flat()}
+        tariffsColumns={columns.slice(0, 1)}
       />
     </div>
   ),
-  '1 column': (
+  '1 columns with inner table': (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
-        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={columns.slice(0, 1)}
-        hiddenRowsNum={2}
+        {...TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(1).fill(columnsTable).flat()}
       />
     </div>
   ),
-  '2 columns': (
+  '1 column': (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
         {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={Array(2).fill(columns).flat()}
+        tariffsColumns={Array(1).fill(columns).flat()}
         hiddenRowsNum={2}
       />
     </div>
   ),
-  '3 columns': (
+  '2 columns': (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
         {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={Array(3).fill(columns).flat()}
+        tariffsColumns={Array(2).fill(columns).flat()}
         hiddenRowsNum={2}
       />
     </div>
   ),
-  '1 columns with inner table': (
-    <div className="container grid grid-cols-12">
-      <TariffsTable
-        className="col-span-12"
-        {...TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={Array(1).fill(columnsTable).flat()}
-      />
-    </div>
-  ),
 };

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