@redneckz/wildless-cms-uni-blocks 0.14.814 → 0.14.815

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

@@ -0,0 +1,102 @@
+{
+  "content": {
+    "gap": "L",
+    "version": "primary",
+    "padding": "p-xl"
+  },
+  "blocks": [
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "description": "Описание",
+        "headlineVersion": "XL",
+        "backwardButton": false,
+        "isDotted": true,
+        "buttons": [
+          {
+            "text": "Кнопка",
+            "version": "secondary"
+          }
+        ],
+        "padding": "p-xl",
+        "benefitsVersion": "normal",
+        "benefits": [
+          {
+            "label": "Преимущество №1",
+            "icon": {
+              "icon": "SmallClockIcon"
+            }
+          },
+          {
+            "label": "Преимущество №2",
+            "icon": {
+              "icon": "SignDocsIcon"
+            }
+          }
+        ],
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    }
+  ]
+}

package/mobile/src/components/GalleryLayout/GalleryLayout.tsx

@@ -0,0 +1,140 @@
+import { type JSONSchema7Definition } from 'json-schema';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
+import { type ChildRenderProps } from '../../BlockRenderer/renderBlockList';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { type BlockDecorator } from '../../model/BlockDecorator';
+import { type BlockDef } from '../../model/ContentPageDef';
+import { type LinkProps } from '../../model/LinkProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { getBorderStyle } from '../../utils/getBorderStyle';
+import { getInnerPadding } from '../../utils/getInnerPadding';
+import { style } from '../../utils/style';
+import { gapStyles } from '../HorizontalLayout/gapStyles';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
+import { type GalleryLayoutContent } from './GalleryLayoutContent';
+
+const MIN_LENGTH_CHILD = 5;
+const SHORT_TILE_INDEXES = [1, 2, 3, 4];
+const LINK_SCHEMA: Record<string, JSONSchema7Definition> = {
+  link: {
+    allOf: [
+      { $ref: `#/definitions/LinkCommonProps` },
+      {
+        type: 'object',
+        properties: {
+          data: {
+            type: 'array',
+            items: { $ref: '#/definitions/AspectsDef' },
+            title: 'Дополнительные атрибуты',
+          },
+        },
+      },
+    ],
+    title: 'Ссылка',
+    required: ['href'],
+  },
+};
+
+export interface GalleryLayoutProps extends GalleryLayoutContent, UniBlockProps {}
+
+export const GalleryLayout = UniBlock<GalleryLayoutProps>(
+  ({
+    className = '',
+    padding = 'p-0',
+    gap = '',
+    isInnerPadding = true,
+    version = 'transparent',
+    isTheme = false,
+    isCardBorder = false,
+    ...rest
+  }) => (
+    <BlockWrapper
+      className={style(
+        'grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-4 lg:auto-rows-fr',
+        gapStyles[gap],
+        className,
+      )}
+      padding={padding}
+      version={version}
+      isTheme={isTheme}
+      {...rest}
+    >
+      {renderChildren({
+        ...rest,
+        renderProps: getRenderProps({ isInnerPadding, isCardBorder }),
+      })}
+    </BlockWrapper>
+  ),
+  {
+    childrenTypes: ['ProductBlock'],
+    childSchema: () => LINK_SCHEMA,
+    allowRemoveChild: (slot) => (slot?.blocks ?? []).length > MIN_LENGTH_CHILD,
+  },
+);
+
+const getRenderProps =
+  ({
+    isInnerPadding,
+    isCardBorder,
+  }: {
+    isInnerPadding: boolean;
+    isCardBorder: boolean;
+  }): ChildRenderProps =>
+  (childBlock, childOptions, i) =>
+    renderBlock(
+      childBlock,
+      {
+        ...childOptions,
+        blockDecorator: blockDecoratorWrapper(childOptions.blockDecorator, i),
+      },
+      {
+        className: style('w-full', getBorderStyle(isCardBorder)),
+        ...getInnerPadding(isInnerPadding),
+      },
+    );
+
+const blockDecoratorWrapper =
+  (blockDecorator?: BlockDecorator, idx = 0): BlockDecorator =>
+  (props, i) =>
+    blockDecorator?.(
+      {
+        ...props,
+        render: (renderProps) => productBlockDecorator(idx)({ ...props, ...renderProps }, i),
+      },
+      `wrap_${i}`,
+    ) ?? productBlockDecorator(idx)(props, i);
+
+const productBlockDecorator =
+  (idx: number): BlockDecorator =>
+  ({ blockClassName, block, render }, i) =>
+    (
+      <LinkWrapper key={i} {...block.content?.link} className={getChildStyle(idx)}>
+        {render({
+          blockClassName: style(blockClassName, 'h-full'),
+          block: modifyBlock(block, idx),
+        })}
+      </LinkWrapper>
+    );
+
+const getChildStyle = (index: number) =>
+  SHORT_TILE_INDEXES.includes(index)
+    ? 'lg:col-span-1 lg:row-span-1'
+    : 'lg:col-span-2 lg:row-span-2';
+
+const modifyBlock = (block: BlockDef, i: number) => {
+  const content: ProductBlockContent & { link?: LinkProps } = { ...block.content };
+
+  if (SHORT_TILE_INDEXES.includes(i)) {
+    delete content.description;
+    delete content.benefits;
+  }
+
+  if (content.link?.href) {
+    delete content.buttons;
+  }
+
+  return { ...block, content };
+};

package/mobile/src/components/GalleryLayout/GalleryLayout.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/GalleryLayout/GalleryLayoutContent.ts

@@ -0,0 +1,16 @@
+import { type ImageContent } from '../../ui-kit/Img/ImgProps';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+import { type GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
+
+export type LayoutCommitProps = {
+  gap?: GapVersion;
+  /** @title контур на дочерних элементах */
+  isCardBorder?: boolean;
+  /** @title Отступы вложенных компонентов */
+  isInnerPadding?: boolean;
+};
+
+/**
+ * @title Компоновщик галереи
+ */
+export type GalleryLayoutContent = UniBlockContent & LayoutCommitProps & ImageContent;

package/mobile/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -1,17 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import { type Align } from '../../model/Align';
 import { type HeadlineVersion } from '../../model/HeadlineType';
+import { type IconVersion } from '../../model/IconVersion';
 import { type VNode } from '../../model/VNode';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { BaseTile } from '../BaseTile/BaseTile';
+import { type BenefitItemContent } from '../BenefitItem/BenefitItemContent';
 import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { Img } from '../Img/Img';
 import { renderButtonsSection } from '../LinkButton/renderButtonsSection';
 import { PriceList } from '../PriceList/PriceList';
 import { RichText } from '../RichText/RichText';
-import { type RichTextItemSize } from '../RichText/RichTextProps';
+import { type RichTextItemSize, type RichVersion } from '../RichText/RichTextProps';
 import { Tags } from '../Tags/Tags';
-import { type BaseProductTileContent } from './BaseProductTileContent';
+import { type BaseProductTileContent, type PriceItem } from './BaseProductTileContent';
 
 const RICHTEXT_SIZE: Record<HeadlineVersion, RichTextItemSize> = {
   XXL: 'list-l',
@@ -47,7 +50,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     buttons,
     image,
     imageOptions: {
-      imageAlign = 'center',
+      imageAlign = 'center' as Align,
       directionRight = true,
       isImageAlwaysOnRight,
       isImageSecondary = false,
@@ -84,31 +87,65 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         backwardButton={backwardButton}
         {...rest}
       >
-        <div className="flex flex-col sm:gap-xl gap-4xl">
-          {filteredBenefits?.length ? (
-            <BenefitsList
-              benefitsVersion={benefitsVersion}
-              isTabularBenefits={isTabularBenefits}
-              benefits={filteredBenefits}
-            />
-          ) : null}
-          {__html ? (
-            <RichText
-              richVersion={richVersion}
-              __html={__html}
-              isDotted={isDotted}
-              itemSize={RICHTEXT_SIZE[headlineVersion]}
-            />
-          ) : null}
-          {children}
-          {priceList?.length ? <PriceList priceList={priceList} /> : null}
-          {renderTags(tags)}
-        </div>
+        {renderChildList(
+          renderBenefits(filteredBenefits, { benefitsVersion, isTabularBenefits }),
+          renderRichText(__html, { richVersion, isDotted, headlineVersion }),
+          children,
+          renderPriceList(priceList),
+          renderTags(tags),
+        )}
       </BaseTile>
     );
   },
 );
 
+const renderBenefits = (
+  benefits?: BenefitItemContent[],
+  {
+    benefitsVersion,
+    isTabularBenefits,
+  }: { benefitsVersion?: IconVersion; isTabularBenefits?: boolean } = {},
+) =>
+  benefits?.length ? (
+    <BenefitsList
+      benefitsVersion={benefitsVersion}
+      isTabularBenefits={isTabularBenefits}
+      benefits={benefits}
+    />
+  ) : null;
+
+const renderRichText = (
+  __html?: string,
+  {
+    richVersion,
+    isDotted,
+    headlineVersion,
+  }: { richVersion?: RichVersion; isDotted?: boolean; headlineVersion?: HeadlineVersion } = {},
+) =>
+  __html ? (
+    <RichText
+      __html={__html}
+      richVersion={richVersion}
+      isDotted={isDotted}
+      itemSize={RICHTEXT_SIZE[headlineVersion ?? 'L']}
+    />
+  ) : null;
+
+const renderPriceList = (priceList?: PriceItem[]) =>
+  priceList?.length ? <PriceList priceList={priceList} /> : null;
+
+const renderChildList = (...elements: VNode[]) => {
+  const cleanElements = elements.filter(Boolean);
+
+  return cleanElements.length ? (
+    <div className="flex flex-col sm:gap-xl gap-4xl">
+      {cleanElements.map((_, i) => (
+        <div key={String(i)}>{_}</div>
+      ))}
+    </div>
+  ) : null;
+};
+
 export const leftOrRightImage = (img: VNode, directionRight: boolean) =>
   directionRight ? { rightImage: img } : { leftImage: img };
 

package/mobile/src/ui-kit/BaseTile/BaseTile.tsx

@@ -55,7 +55,7 @@ export const BaseTile = JSX<BaseTileProps>(
         )}
       >
         {isBackBtn && renderBackwardButton({ version, handleClick, text: backwardButtonText })}
-        {title ? <div className="relative h-full">{title}</div> : null}
+        {title ? <div className="relative">{title}</div> : null}
         <div
           className={style('grow relative flex flex-col @xl:flex-row gap-3xl w-full', {
             'self-start @xl:w-auto': leftImage,
@@ -69,14 +69,10 @@ export const BaseTile = JSX<BaseTileProps>(
                 '@xl:grid-cols-2 auto-cols-fr': rightImage,
                 grow: !leftImage,
               },
-              'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
-              'auto-rows-[max-content_1fr]', //? fix issue https://github.com/redneckz/temp_wcms/issues/1324
+              'h-auto',
             )}
           >
-            <div className="grow space-y-lg min-w-fit">
-              {insetTitle}
-              {children}
-            </div>
+            {renderMiddleContent(insetTitle, children)}
             {renderUnitContainer(
               renderChildren({ ...rest, extraProps: { className: '@container-normal' } }),
             )}
@@ -96,6 +92,14 @@ export const BaseTile = JSX<BaseTileProps>(
   },
 );
 
+const renderMiddleContent = (insetTitle: VNode, children: VNode) =>
+  insetTitle || children ? (
+    <div className="grow space-y-lg min-w-fit">
+      {insetTitle}
+      {children}
+    </div>
+  ) : null;
+
 const imageAlwaysOnRightContainerStyle = (isImage: boolean) =>
   style(isImage ? 'row-span-2' : '@xl:row-span-2');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.814",
+  "version": "0.14.815",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -214,7 +214,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "101 kB",
+      "limit": "102 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/BlockRenderer/renderBlock.tsx

@@ -42,11 +42,11 @@ export function renderBlock(
         return BlockComponent ? (
           <BlockComponent
             key={key}
-            className={adjustedBlockClassName}
-            block={block}
-            options={options}
             {...content}
             {...extraProps}
+            className={style(adjustedBlockClassName, content?.className as string)}
+            block={block}
+            options={options}
           />
         ) : null;
       },

package/src/UniBlock/UniBlock.tsx

@@ -3,7 +3,7 @@ import { JSX, type UNIComponent } from '@redneckz/uni-jsx';
 import { type JSONSchema7Definition } from 'json-schema';
 import { useJSONRef } from '../hooks/useJSONRef/useJSONRef';
 import { type SlotName } from '../model/BlockDecorator';
-import { type BlockDef } from '../model/ContentPageDef';
+import { type BlockDef, type Slot } from '../model/ContentPageDef';
 import { type VNode } from '../model/VNode';
 import { extractContent } from './extractContent';
 import { type UniBlockProps } from './UniBlockProps';
@@ -12,6 +12,8 @@ export interface UniBlockMeta<Props extends UniBlockProps = UniBlockProps> {
   displayName?: string;
   childrenTypes?: string[] | { include?: string[]; exclude?: string[] };
   childSchema?: (content: BlockDef['content']) => Record<string, JSONSchema7Definition>;
+  allowAddChild?: (slot?: Slot) => boolean;
+  allowRemoveChild?: (slot?: Slot) => boolean;
   slots?: (props: Props) => SlotName[];
 }
 

package/src/components/Blocks.mobile.ts

@@ -26,6 +26,7 @@ import { Depository } from './Depository/Depository';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
+import { GalleryLayout } from './GalleryLayout/GalleryLayout';
 import { GrantSupport } from './GrantSupport/GrantSupport';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
@@ -74,6 +75,7 @@ export const Blocks: BlocksRegistry = {
   ErrorBlock,
   ExchangeRateTile,
   Footer,
+  GalleryLayout,
   GrantSupport,
   Header,
   Headline,

package/src/components/Blocks.ts

@@ -28,6 +28,7 @@ import { Depository } from './Depository/Depository';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
+import { GalleryLayout } from './GalleryLayout/GalleryLayout';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { GrantSupport } from './GrantSupport/GrantSupport';
 import { Header } from './Header/Header';
@@ -81,6 +82,7 @@ export const Blocks: BlocksRegistry = {
   ErrorBlock,
   ExchangeRateTile,
   Footer,
+  GalleryLayout,
   GracePeriod,
   GrantSupport,
   Header,

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -45,6 +45,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
             headlineVersion="XS"
             isEmbedded={true}
             align={align}
+            className="min-h-24"
           />
         }
         rightImage={

package/src/components/GalleryLayout/GalleryLayout.example.json

@@ -0,0 +1,102 @@
+{
+  "content": {
+    "gap": "L",
+    "version": "primary",
+    "padding": "p-xl"
+  },
+  "blocks": [
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "description": "Описание",
+        "headlineVersion": "XL",
+        "backwardButton": false,
+        "isDotted": true,
+        "buttons": [
+          {
+            "text": "Кнопка",
+            "version": "secondary"
+          }
+        ],
+        "padding": "p-xl",
+        "benefitsVersion": "normal",
+        "benefits": [
+          {
+            "label": "Преимущество №1",
+            "icon": {
+              "icon": "SmallClockIcon"
+            }
+          },
+          {
+            "label": "Преимущество №2",
+            "icon": {
+              "icon": "SignDocsIcon"
+            }
+          }
+        ],
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    },
+    {
+      "content": {
+        "version": "secondary",
+        "title": "Продукт",
+        "headlineVersion": "S",
+        "backwardButton": false,
+        "padding": "p-xl",
+        "imageOptions": {
+          "imageAlign": "end"
+        }
+      },
+      "style": ["col-span-12"],
+      "type": "ProductBlock"
+    }
+  ]
+}

package/src/components/GalleryLayout/GalleryLayout.fixture.tsx

@@ -0,0 +1,61 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { LinkProps } from '../../model/LinkProps';
+import '../../setup-fixture';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { Blocks } from '../Blocks';
+import { PRODUCT_BLOCK_WITH_IMAGE } from '../ProductBlock/ProductBlock.fixture';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
+import { GalleryLayout } from './GalleryLayout';
+
+const options: BlockRendererOptions = {
+  blocksRegistry: Blocks,
+};
+
+const PRODUCT_BLOCK_TYPE = 'ProductBlock';
+
+const CONTENT: ProductBlockContent & UniBlockProps & { link?: LinkProps } = {
+  ...PRODUCT_BLOCK_WITH_IMAGE,
+  version: 'secondary',
+  padding: 'p-xl',
+  imageOptions: {
+    imageAlign: 'end',
+  },
+  className: 'rounded-xl', // for identity with maket
+  link: {
+    href: 'https://google.com',
+  },
+};
+
+const SHORT_TILE_CONTENT: ProductBlockContent & UniBlockProps = {
+  ...CONTENT,
+  image: {
+    ...CONTENT.image,
+    size: {
+      width: 130,
+      height: 130,
+    },
+  },
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <GalleryLayout
+        className="col-span-12"
+        gap="L"
+        padding="p-xl"
+        block={{
+          type: 'GalleryLayout',
+          blocks: [
+            { type: PRODUCT_BLOCK_TYPE, content: CONTENT },
+            { type: PRODUCT_BLOCK_TYPE, content: SHORT_TILE_CONTENT },
+            { type: PRODUCT_BLOCK_TYPE, content: SHORT_TILE_CONTENT },
+            { type: PRODUCT_BLOCK_TYPE, content: SHORT_TILE_CONTENT },
+            { type: PRODUCT_BLOCK_TYPE, content: SHORT_TILE_CONTENT },
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
+};