@redneckz/wildless-cms-uni-blocks 0.6.26 → 0.6.27

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -20,7 +20,6 @@ export interface TariffsTableCellProps extends TariffTableContentProps, UniBlock
 
 export const TariffsTableCell = JSX<TariffsTableCellProps>(
   ({
-    context,
     cells,
     rowIdx,
     cellIdx,
@@ -38,7 +37,6 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(
           ? cells.map(
               renderCellInner({
                 rowIdx,
-                context,
                 cellIdx,
                 setTableInner,
                 tableInner,

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -19,7 +19,7 @@ export interface TariffsTableTile {
  * @hidden
  */
 export interface TariffsTableProps extends UniBlockProps {
-  tiles: TariffsTableTile[];
+  tiles?: TariffsTableTile[];
 }
 
 /**

package/src/components/TariffsTable/TariffsTableHorizontal.tsx

@@ -3,10 +3,12 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { TariffsTableProps } from './TariffsTableContent';
 import { TariffsTableTileCell } from './TariffsTableTileCell';
 
-export const TariffsTableHorizontal = JSX<TariffsTableProps>(({ tiles, context }) => (
-  <SwipeListControl context={context}>
-    {tiles.map((tile, i) => (
-      <TariffsTableTileCell key={String(i)} tile={tile} context={context} />
-    ))}
-  </SwipeListControl>
-));
+export const TariffsTableHorizontal = JSX<TariffsTableProps>(({ tiles, ...rest }) =>
+  tiles?.length ? (
+    <SwipeListControl {...rest}>
+      {tiles.map((tile, i) => (
+        <TariffsTableTileCell key={String(i)} tile={tile} {...rest} />
+      ))}
+    </SwipeListControl>
+  ) : null,
+);

package/src/components/TariffsTable/TariffsTableRenderCell.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { EmbeddableCellData } from './EmbeddableCellData';
 import type { TariffTableContentProps } from './TariffsTableCell';
 import type { CellDef } from './TariffsTableContent';
 
 interface TariffTableCellInnerProps extends TariffTableContentProps {
   cellIdx: number;
-  context: ContentPageContext;
   rowIdx: number;
 }
 
@@ -19,7 +17,6 @@ interface RenderCellProps {
 interface CellProps {
   isVisible?: boolean;
   cellIdx: number;
-  context: ContentPageContext;
   rowIdx: number;
   fieldIdx: number;
   displayTable: (props: TariffsTableInnerContent) => void;
@@ -28,7 +25,6 @@ interface CellProps {
 export const renderCellInner =
   ({
     rowIdx,
-    context,
     cellIdx,
     setTableInner,
     tableInner,
@@ -64,7 +60,6 @@ export const renderCellInner =
             fieldIdx: i,
             displayTable,
             isVisible,
-            context,
           },
         })}
       </div>

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -3,12 +3,12 @@ import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
 import type { Data } from './TariffsTableContent';
 import { TariffsTableRowContainer } from './TariffsTableRowContainer';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
@@ -17,7 +17,7 @@ export interface TariffsTableRowProps extends UniBlockProps {
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeCardIndex, context, rowIdx }) => {
+  ({ row: { header, data }, activeCardIndex, rowIdx, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
     const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
 
@@ -25,9 +25,9 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
 
     return (
       <TariffsTableRowContainer
-        context={context}
         onHideContentClick={onHideContentClick}
         tableInner={tableInner}
+        {...rest}
       >
         <div className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
           <div className="flex items-center text-primary-text" role="cell">
@@ -55,11 +55,11 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 cells={cells}
                 rowIdx={rowIdx}
                 cellIdx={i}
-                context={context}
                 setTableInner={setTableInner}
                 tableInner={tableInner}
                 openTableInnerIdx={openTableInnerIdx}
                 setOpenTableInnerIdx={setOpenTableInnerIdx}
+                {...rest}
               />
             ))}
           </TableCarouselContainer>

package/src/components/TariffsTable/TariffsTableRowContainer.tsx

@@ -1,26 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { VNode } from '../../model/VNode';
 import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 
 export interface TariffsTableRowContainerProps extends UniBlockProps {
-  children?: VNode;
-  onHideContentClick: () => void;
   tableInner?: TariffsTableInnerContent;
+  onHideContentClick?: () => void;
 }
 
 export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
-  ({ context, children, tableInner, onHideContentClick }) => {
-    return (
-      <div className="self-start flex flex-col" role="row">
-        <div className="flex">{children}</div>
-        {tableInner ? (
-          <div className="origin-top animate-expansion">
-            <InnerTable context={context} {...tableInner} onClick={onHideContentClick} />
-          </div>
-        ) : null}
-      </div>
-    );
-  },
+  ({ children, tableInner, onHideContentClick }) => (
+    <div className="self-start flex flex-col" role="row">
+      <div className="flex">{children}</div>
+      {tableInner ? (
+        <div className="origin-top animate-expansion">
+          <InnerTable {...tableInner} onClick={onHideContentClick} />
+        </div>
+      ) : null}
+    </div>
+  ),
 );

package/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -1,45 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
 import { EmbeddableCellData } from './EmbeddableCellData';
 import { TableTileHeader } from './TableTileHeader';
 import type { CellDef, TariffsTableTile } from './TariffsTableContent';
 
-export interface TariffsTableTileCellProps {
-  context: ContentPageContext;
-  tile: TariffsTableTile;
+export interface TariffsTableTileCellProps extends UniBlockProps {
+  tile?: TariffsTableTile;
 }
 
-export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ context, tile }) => {
-  return (
-    <div className="rounded-md border-main-stroke h-full box-border border p-4">
-      <TableTileHeader {...tile.header} />
-      {tile.data?.length ? tile.data.map(renderCellInner(context)) : null}
-    </div>
-  );
-});
-
-const renderCellInner = (context: ContentPageContext) => (cell: CellDef, i: number) =>
-  (
-    <div key={String(i)}>
-      {i > 0 ? <div className="h-5" /> : null}
-      {renderCell(cell, context)}
-    </div>
-  );
-
-const renderCell = (cell: CellDef, context: ContentPageContext) => {
-  if (!cell) {
+export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ tile, ...rest }) => (
+  <div className="rounded-md border-main-stroke h-full box-border border p-4">
+    <TableTileHeader {...tile?.header} />
+    {tile?.data?.length
+      ? tile.data.map((cell, i) => (
+          <div key={String(i)}>
+            {i > 0 ? <div className="h-5" /> : null}
+            {renderCell(cell, rest)}
+          </div>
+        ))
+      : null}
+  </div>
+));
+
+function renderCell(cell: CellDef, props: UniBlockProps): VNode {
+  if (!cell || !cell.tableCellType || !(cell.tableCellType in EmbeddableCellData)) {
     return null;
   }
 
-  const { tableCellType: type, ...rest } = cell;
+  const EmbeddableCellInner = EmbeddableCellData[cell.tableCellType];
 
-  if (!type || !(type in EmbeddableCellData)) {
-    return null;
-  }
-
-  const EmbeddableCellInner = EmbeddableCellData[type];
-
-  return (
-    <EmbeddableCellInner context={context} displayTable={() => null} {...rest} isVisible={true} />
-  );
-};
+  return <EmbeddableCellInner displayTable={() => null} isVisible={true} {...cell} {...props} />;
+}

package/src/components/TariffsTable/TariffsTableVertical.tsx

@@ -3,10 +3,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { TariffsTableProps } from './TariffsTableContent';
 import { TariffsTableTileCell } from './TariffsTableTileCell';
 
-export const TariffsTableVertical = JSX<TariffsTableProps>(({ tiles, context }) => (
-  <div className="flex flex-col gap-3.5">
-    {tiles.map((tile, i) => (
-      <TariffsTableTileCell key={String(i)} tile={tile} context={context} />
-    ))}
-  </div>
-));
+export const TariffsTableVertical = JSX<TariffsTableProps>(({ tiles, ...rest }) =>
+  tiles?.length ? (
+    <div className="flex flex-col gap-3.5">
+      {tiles.map((tile, i) => (
+        <TariffsTableTileCell key={String(i)} tile={tile} {...rest} />
+      ))}
+    </div>
+  ) : null,
+);

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { mobileContext } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { TextBlock } from './TextBlock';
 import type { TextBlockContent } from './TextBlockContent';
 
@@ -30,44 +30,21 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
         <div className="flex flex-col gap-[6px]" data-theme="pc">
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="big" image={image} />
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
           <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="big"
-            image={image}
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="none"
-          />
-          <TextBlock
-            context={mobileContext}
             description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
             blockVersion="primary"
           />
+          <TextBlock title="Все карты Россельхозбанка работают" blockVersion="primary" />
           <TextBlock
-            context={mobileContext}
-            title="Все карты Россельхозбанка работают"
-            blockVersion="primary"
-          />
-          <TextBlock
-            context={mobileContext}
             title="Все карты Россельхозбанка работают"
             blockVersion="primary"
             iconVersion="small"
             items={items}
           />
           <TextBlock
-            context={mobileContext}
             title="Все карты Россельхозбанка работают"
             description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
             blockVersion="secondary"
@@ -75,7 +52,6 @@ export default {
             items={items}
           />
           <TextBlock
-            context={mobileContext}
             title="Все карты Россельхозбанка работают"
             description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
             blockVersion="secondary-light"
@@ -92,23 +68,12 @@ export default {
         <div className="flex flex-col gap-[6px]" data-theme="bc">
           <TextBlock
             className="flex flex-col"
-            context={mobileContext}
             {...TEXT_BLOCK}
             blockVersion="primary"
             iconVersion="small"
           />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="secondary"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="secondary-light"
-          />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary-light" />
         </div>
       </div>
     </div>
@@ -117,24 +82,9 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
         <div className="flex flex-col gap-[6px]" data-theme="eo">
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="primary"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="secondary"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="secondary-light"
-          />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="primary" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary-light" />
         </div>
       </div>
     </div>

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { TextBlock } from './TextBlock';
 import type { TextBlockContent } from './TextBlockContent';
 
@@ -24,28 +24,12 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="pc">
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="big"
-            image={image}
-          />
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary-light"
-            iconVersion="small"
-          />
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="big" image={image} />
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
         </div>
       </div>
     </div>
@@ -54,19 +38,9 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="bc">
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary-light"
-            iconVersion="small"
-          />
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
         </div>
       </div>
     </div>
@@ -75,19 +49,9 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="eo">
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary-light"
-            iconVersion="small"
-          />
+          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
         </div>
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { Tile } from './Tile';
 import type { TileContent } from './TileContent';
 
@@ -64,13 +64,12 @@ const tags = ['Tag #1', 'Tag #2', 'Tag #3'];
 export default {
   credit: (
     <div className="container grid grid-cols-12">
-      <Tile context={context} className="col-span-8" {...TILE} />
+      <Tile className="col-span-8" {...TILE} />
     </div>
   ),
   mortgage: (
     <div className="container grid grid-cols-12">
       <Tile
-        context={context}
         version="secondary"
         className="col-span-4"
         title="Ипотека"
@@ -95,7 +94,6 @@ export default {
   'credit-card': (
     <div className="container grid grid-cols-12">
       <Tile
-        context={context}
         className="col-span-6"
         title="Банковские пластиковые карты"
         headingType="h4"
@@ -114,13 +112,12 @@ export default {
   ),
   premium: (
     <div className="container grid grid-cols-12">
-      <Tile context={context} className="col-span-6" {...TILE_PREMIUM} />
+      <Tile className="col-span-6" {...TILE_PREMIUM} />
     </div>
   ),
   ecosystem: (
     <div className="container grid grid-cols-12">
       <Tile
-        context={context}
         className="col-span-12 pr-28"
         title="Экосистема «СВОЕ», созданная для людей"
         headingType="h4"
@@ -144,7 +141,7 @@ export default {
   ),
   tags: (
     <div className="container grid grid-cols-12">
-      <Tile context={context} className="col-span-8" {...TILE} tags={tags} />
+      <Tile className="col-span-8" {...TILE} tags={tags} />
     </div>
   ),
 };

package/src/components/Tile/Tile.tsx

@@ -20,12 +20,10 @@ export interface TileProps extends TileContent, UniBlockProps {
 
 export const Tile = JSX<TileProps>((props) => {
   const {
-    context,
     title,
     headingType = 'h3',
     description,
     items,
-    children,
     buttons,
     image,
     isDotted = true,
@@ -33,20 +31,19 @@ export const Tile = JSX<TileProps>((props) => {
     className = '',
     version = 'primary',
     tags,
+    children,
     ...rest
   } = props;
   const headingClassName = version === 'primary' ? 'text-primary-text' : '';
 
   return (
     <BlockWrapper
-      context={context}
       className={`overflow-hidden font-sans p-9 pr-3 box-border ${className} ${
         VersionStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       {...rest}
     >
       <BaseTile
-        context={context}
         title={
           title ? (
             <Heading
@@ -60,9 +57,9 @@ export const Tile = JSX<TileProps>((props) => {
         buttons={
           buttons?.length ? (
             <ButtonSection
-              context={context}
               buttons={buttons.map((button) => ({ ...button, className: 'min-w-[158px]' }))}
               className="flex mt-8 gap-3"
+              {...rest}
             />
           ) : null
         }

package/src/components/VerticalLayout/VerticalLayout.example.json

@@ -0,0 +1,17 @@
+{
+  "title": "Вертикальный компоновщик",
+  "version": "transparent",
+  "align": "left",
+  "gap": "",
+  "blocks": [
+    {
+      "type": "Headline",
+      "content": {
+        "title": "Заголовок блока",
+        "description": "Описание блока",
+        "headlineVersion": "M"
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -0,0 +1,41 @@
+import '../../react/setup-fixture';
+import { ProductTile } from '../ProductTile/ProductTile';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { VerticalLayout } from './VerticalLayout';
+
+const PRODUCT_TILES_OTHER_BLOCK = <ProductTile {...PRODUCT_TILE} />;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout className="col-span-12">
+        {PRODUCT_TILES_OTHER_BLOCK}
+        {PRODUCT_TILES_OTHER_BLOCK}
+      </VerticalLayout>
+    </div>
+  ),
+  'transparent center': (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout align="center" version="transparent" className="col-span-12">
+        {PRODUCT_TILES_OTHER_BLOCK}
+        {PRODUCT_TILES_OTHER_BLOCK}
+      </VerticalLayout>
+    </div>
+  ),
+  'secondary right': (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout align="right" version="secondary" className="col-span-12">
+        {PRODUCT_TILES_OTHER_BLOCK}
+        {PRODUCT_TILES_OTHER_BLOCK}
+      </VerticalLayout>
+    </div>
+  ),
+  'secondary gap-XL': (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout gap="XL" align="left" version="secondary" className="col-span-12">
+        {PRODUCT_TILES_OTHER_BLOCK}
+        {PRODUCT_TILES_OTHER_BLOCK}
+      </VerticalLayout>
+    </div>
+  ),
+};