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

package/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/src/components/GalleryLayout/GalleryLayout.ui.json

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

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