@redneckz/wildless-cms-uni-blocks 0.11.3 → 0.12.4

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

@@ -1,75 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
-import { RichText } from '../../ui-kit/RichText/RichText';
-import { Tags } from '../../ui-kit/Tags/Tags';
-import { style } from '../../utils/style';
-import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { TileContent } from './TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {}
 
 export const Tile = JSX<TileProps>(
-  ({
-    title,
-    headingType = 'h3',
-    __html,
-    items,
-    buttons,
-    image,
-    isDotted = true,
-    listItemSize = 'M',
-    className = '',
-    tags,
-    children,
-    directionRight = true,
-    ...rest
-  }) => (
-    <BlockWrapper
-      className={style(
-        'flex grow justify-between items-stretch h-full p-9 pr-3 box-border',
-        getTileRightPadding(className),
-        getTileMinHeight(className),
-        className,
-      )}
-      {...rest}
-    >
-      {image?.src ? (
-        <Img className={style('mt-auto ml-7', directionRight ? 'order-2' : '')} image={image} />
-      ) : null}
-      <BaseTile
-        title={
-          title ? (
-            <Heading
-              headingType={headingType}
-              as="h2"
-              title={title}
-              className={`whitespace-pre-wrap max-w-[600px]`}
-            />
-          ) : null
-        }
-        buttons={renderButtonsSection(buttons, {
-          className: 'mt-8',
-          buttonClassName: 'min-w-[158px]',
-        })}
-      >
-        <div>
-          {__html ? (
-            <div className="max-w-[600px] mt-2.5">
-              <RichText __html={__html} />
-            </div>
-          ) : null}
-          {children}
-          <List className="mt-2.5" items={items} isDotted={isDotted} listItemSize={listItemSize} />
-          {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
-        </div>
-      </BaseTile>
+  ({ className, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (
+    <BlockWrapper className={className} {...rest}>
+      <BaseProductTile
+        className="h-full"
+        headlineVersion={headlineVersion}
+        listItemSize={listItemSize}
+        {...rest}
+        imageOptions={{ imageAlign: 'end', ...rest.imageOptions }}
+      />
     </BlockWrapper>
   ),
 );

package/mobile/src/components/Tile/TileContent.ts

@@ -1,25 +1,7 @@
-import type { BulletsProps } from '../../model/Bullets';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { ListItemSize } from '../../ui-kit/List/ListProps';
-import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
-import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
+import type { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 
 /**
  * @title Плитка
  */
-export type TileContent = UniBlockContent &
-  HeadingCommonProps &
-  RichTextProps &
-  ListContent &
-  ButtonContent &
-  TagsContent &
-  ImageContent &
-  BulletsProps & {
-    listItemSize?: ListItemSize;
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
-  };
+export type TileContent = UniBlockContent & BaseProductTileContent;

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -35,11 +35,11 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
         className={style(
           'relative',
           'flex flex-col [&>*]:max-w-full',
-          isPadding ? 'p-default' : '',
           gapStyles[gap],
           align && alignStyle[align],
           className,
         )}
+        defaultPadding={isPadding ? 'p-default' : ''}
         version={version}
         isTheme={isTheme}
         {...rest}

package/mobile/src/components/Video/Video.tsx

@@ -1,11 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useRouter } from '../../hooks/useRouter';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { adjustHref } from '../../utils/adjustHref';
-import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { getPaddings } from './getPaddings';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { VideoContent } from './VideoContent';
 
 interface VideoProps extends VideoContent, UniBlockProps {}
@@ -14,7 +13,7 @@ export const Video = JSX<VideoProps>(({ className, title, url, previewImg, ...re
   const router = useRouter();
 
   return (
-    <BlockWrapper className={style(getPaddings(className), className)} {...rest}>
+    <BlockWrapper className={className} defaultPadding={getPaddings(className)} {...rest}>
       <Headline title={title} headlineVersion="M" />
       {url ? (
         <video

package/mobile/src/content-page-repository/transformDocumentLink.ts

@@ -23,7 +23,7 @@ export async function transformDocumentLink(
   try {
     await copyFile(input, output);
   } catch (e) {
-    console.error(e);
+    console.info(`No "${input}" attachment found on page: "${pagePath}"`);
 
     return link;
   }

package/mobile/src/content-page-repository/transformImg.ts

@@ -57,7 +57,7 @@ export function transformImg(
         await chain.toFile(output);
       }
     } catch (e) {
-      console.error(e);
+      console.info(`No "${input}" attachment found on page: "${pagePath}"`);
     }
 
     return output;

package/mobile/src/model/Align.ts

@@ -0,0 +1,5 @@
+/**
+ * @title Выравнивание
+ * @enumNames ["В начале", "По центру", "В конце"]
+ */
+export type Align = 'start' | 'center' | 'end';

package/mobile/src/model/AlignText.ts

@@ -1,6 +1,9 @@
 import type { TextAlign } from '../ui-kit/Text/TextProps';
 import type { AlignType } from './AlignType';
 
+/**
+ * @deprecated
+ */
 export const AlignText: Record<AlignType, TextAlign> = {
   left: 'text-left',
   center: 'text-center',

package/mobile/src/model/AlignType.ts

@@ -1,5 +1,6 @@
 /**
  * @title Выравнивание
+ * @deprecated
  * @enumNames [
  *    "По левому краю",
  *    "По центру",
@@ -10,6 +11,7 @@ export type AlignType = 'left' | 'center' | 'right';
 
 /**
  * @title Выравнивание
+ * @deprecated
  * @enumNames [
  *    "Во всю ширину",
  *    "По левому краю",

package/mobile/src/model/HeadlineType.ts

@@ -1,3 +1,9 @@
+import { TextAlign } from '../ui-kit/Text/TextProps';
+
+/**
+ * TODO Hellfire refactoring is needed here
+ */
+
 /**
  * @title Размер заголовка
  * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький"]
@@ -35,7 +41,11 @@ export type AdditionalDescriptionProps = {
   additionalDescription?: string;
 };
 
-export type HeadlineCommonProps = TitleProps & DescriptionProps;
+export type HeadlineCommonProps = TitleProps &
+  DescriptionProps & {
+    /** @title Выравнивание заголовка */
+    align?: TextAlign;
+  };
 
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;

package/mobile/src/model/JSXBlock.ts

@@ -6,11 +6,11 @@ import type { BlockVersion } from './BlockVersion';
 import type { BlockDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
-export interface UniBlockProps extends UniBlockContent {
-  className?: string;
-  block?: BlockDef;
-  options?: BlockRendererOptions;
-}
+/**
+ * @title Внутренний отступ
+ * @enumNames ["По умолчанию", "Большой", "Средний", "Маленький", "Нулевой"]
+ */
+export type UniBlockPadding = '' | 'p-lg' | 'p-m' | 'p-s' | 'p-xs' | 'p-0';
 
 export interface UniBlockContent {
   version?: BlockVersion;
@@ -19,6 +19,14 @@ export interface UniBlockContent {
    *  @default true
    */
   isTheme?: boolean;
+  padding?: UniBlockPadding;
+}
+
+export interface UniBlockProps extends UniBlockContent {
+  className?: string;
+  defaultPadding?: string;
+  block?: BlockDef;
+  options?: BlockRendererOptions;
 }
 
 export type JSXBlock<BlockProps extends UniBlockProps = UniBlockProps> = UNIComponent<

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

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Headline } from '../../components/Headline/Headline';
+import { BaseTile } from '../BaseTile/BaseTile';
+import { BenefitsList } from '../BenefitsList/BenefitsList';
+import { renderButtonsSection } from '../Button/renderButtonsSection';
+import { Img } from '../Img/Img';
+import { List } from '../List/List';
+import { RichText } from '../RichText/RichText';
+import { Tags } from '../Tags/Tags';
+import type { BaseProductTileContent } from './BaseProductTileContent';
+
+interface BaseProductTileProps extends BaseProductTileContent {
+  className?: string;
+  isInsetTitle?: boolean;
+}
+
+export const BaseProductTile = JSX<BaseProductTileProps>(
+  ({
+    className,
+    title,
+    description,
+    headlineVersion = 'L',
+    align = 'text-left',
+    isInsetTitle = true,
+    benefits,
+    benefitsVersion,
+    __html,
+    items,
+    isDotted = true,
+    listItemSize,
+    tags,
+    buttons,
+    image,
+    imageOptions: { imageAlign, directionRight = true } = {},
+    children,
+  }) => {
+    const img = image?.src ? <Img image={image} /> : null;
+    const headline = (
+      <Headline
+        title={title}
+        description={description}
+        headlineVersion={headlineVersion}
+        align={align}
+        isPadding={false}
+      />
+    );
+
+    return (
+      <BaseTile
+        className={className}
+        {...(isInsetTitle ? { insetTitle: headline } : { title: headline })}
+        {...(directionRight ? { rightImage: img } : { leftImage: img })}
+        imageAlign={imageAlign}
+        buttons={renderButtonsSection(buttons)}
+      >
+        <div className="flex flex-col gap-m">
+          <BenefitsList benefitsVersion={benefitsVersion} benefits={benefits} />
+          {__html ? <RichText __html={__html} /> : null}
+          {items?.length ? (
+            <List items={items} isDotted={isDotted} listItemSize={listItemSize} />
+          ) : null}
+          {children}
+          {tags?.length ? <Tags tags={tags} /> : null}
+        </div>
+      </BaseTile>
+    );
+  },
+);

package/mobile/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -0,0 +1,30 @@
+import type { Align } from '../../model/Align';
+import type { BulletsProps } from '../../model/Bullets';
+import type { HeadlineProps } from '../../model/HeadlineType';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
+import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
+
+/** @title Доп. настройки картинки */
+interface TileImageOptions {
+  /** @title Картинка справа/текст слева */
+  directionRight?: boolean;
+  /** @title Выравнивание изображения */
+  imageAlign?: Align;
+}
+
+export type BaseProductTileContent = HeadlineProps &
+  BenefitsListContent &
+  RichTextProps &
+  ListContent &
+  BulletsProps &
+  TagsContent &
+  ButtonContent &
+  ImageContent & {
+    /** @title Лейбл (моб.) */
+    label?: string;
+    imageOptions?: TileImageOptions;
+  };

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

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Align } from '../../model/Align';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
+
+interface BaseTileProps extends UniBlockProps {
+  title?: VNode;
+  insetTitle?: VNode;
+  leftImage?: VNode;
+  rightImage?: VNode;
+  imageAlign?: Align;
+  backImage?: VNode;
+  buttons?: VNode;
+}
+
+const imageAlignmentMap: Record<Align, string> = {
+  start: 'self-start',
+  center: 'self-center',
+  end: 'self-end',
+};
+
+export const BaseTile = JSX<BaseTileProps>(
+  ({
+    className,
+    defaultPadding,
+    padding,
+    title = '',
+    insetTitle = '',
+    buttons,
+    leftImage,
+    rightImage,
+    imageAlign,
+    backImage,
+    children,
+  }) => (
+    <div
+      className={style(
+        'relative flex flex-col gap-lg font-sans overflow-hidden',
+        padding || defaultPadding,
+        className,
+      )}
+    >
+      {backImage ? <div className="absolute bottom-0 right-0 z-0">{backImage}</div> : null}
+      {title ? <div className="relative">{title}</div> : null}
+      <div className="grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-lg">
+        {renderImageContainer(leftImage, { imageAlign })}
+        <div
+          className={style(
+            'flex flex-col gap-lg max-w-[600px] xl:max-w-[728px]',
+            leftImage ? '' : 'grow',
+          )}
+        >
+          {insetTitle}
+          <div className="grow">{children}</div>
+          {buttons}
+        </div>
+        {renderImageContainer(rightImage, { className: '-order-1 sm:order-1', imageAlign })}
+      </div>
+    </div>
+  ),
+);
+
+const renderImageContainer = (
+  image: VNode | undefined,
+  { className, imageAlign }: { className?: string; imageAlign?: Align },
+) =>
+  image ? (
+    <div className={style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}>
+      {image}
+    </div>
+  ) : null;

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

@@ -1,20 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { IconVersion } from '../../model/IconVersion';
-import { Img } from '../Img/Img';
 import { style } from '../../utils/style';
-import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
-import { labelSize } from './labelSize';
+import { Img } from '../Img/Img';
 import { Paragraph } from '../Paragraph/Paragraph';
 import { Text } from '../Text/Text';
+import type { BenefitItemContent } from './BenefitItemContent';
+import { labelSize } from './labelSize';
 
-export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
-
-export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
-  const { className = '', icon, label, description, benefitsVersion = 'normal' } = props;
-  const listItemAlign = description ? 'items-start' : 'items-center';
+export interface BenefitGeneralProps extends BenefitItemContent {
+  className?: string;
+  benefitsVersion?: IconVersion;
+}
 
-  return (
-    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
+export const BenefitItem = JSX<BenefitGeneralProps>(
+  ({ className, icon, label, description, benefitsVersion = 'normal' }) => (
+    <div className={style('flex gap-s', description ? 'items-start' : 'items-center', className)}>
       {icon ? (
         <div className={getBenefitIconBgStyle(benefitsVersion)}>
           <Img
@@ -40,17 +40,17 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
         ) : null}
       </div>
     </div>
-  );
-});
+  ),
+);
 
-  function getBenefitIconBgStyle(benefitsVersion: IconVersion) {
-          const bgColorStyle =
-          benefitsVersion === 'normal'
-          ? 'bg-secondary-light text-primary-main'
-          : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
+function getBenefitIconBgStyle(benefitsVersion: IconVersion) {
+  const bgColorStyle =
+    benefitsVersion === 'normal'
+      ? 'bg-secondary-light text-primary-main'
+      : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
 
-          return style(
-          'w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon',
-          bgColorStyle,
-          );
-        }
+  return style(
+    'w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon',
+    bgColorStyle,
+  );
+}

package/mobile/src/ui-kit/BenefitItem/BenefitItemContent.ts

@@ -0,0 +1,19 @@
+import type { DefaultListItemType } from '../../model/DefaultListItemType';
+import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
+import type { IconProps } from '../../model/Picture';
+import type { RichTextItem } from '../../model/RichTextItem';
+
+export type BenefitItemContent = LabelProps & DescriptionProps & IconProps;
+
+/**
+ * @title Стандартный бенефит
+ */
+export type DefaultBenefitContent = BenefitItemContent & DefaultListItemType;
+
+/**
+ * @title Преимущество
+ * @default {
+ *  "type": "default"
+ * }
+ */
+export type ComplexBenefitContent = DefaultBenefitContent | RichTextItem;

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

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { deviation } from '../../utils/deviation';
+import { style } from '../../utils/style';
+import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
+import type { BenefitsListContent } from './BenefitsListContent';
+import { renderBenefit } from './renderBenefit';
+
+interface BenefitsListProps extends BenefitsListContent {
+  className?: string;
+}
+
+const MAX_BENEFITS_LEN_DEVIATION = 16;
+
+const benefitLength = (_: ComplexBenefitContent) =>
+  _.type === 'rte'
+    ? _.__html?.length || 0
+    : Math.max(_.label?.length || 0, _.description?.length || 0);
+
+const isDistortedBenefits = (benefits: ComplexBenefitContent[]) =>
+  deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
+
+export const BenefitsList = JSX<BenefitsListProps>(
+  ({ className, benefitsVersion = 'normal', benefits }) =>
+    benefits?.length ? (
+      <div
+        className={style(
+          'flex gap-x-m gap-y-s',
+          isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap',
+          className,
+        )}
+      >
+        {benefits.map(renderBenefit(benefitsVersion))}
+      </div>
+    ) : null,
+);

package/mobile/src/ui-kit/BenefitsList/BenefitsListContent.ts

@@ -0,0 +1,15 @@
+import type { IconVersion } from '../../model/IconVersion';
+import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
+
+/**
+ * @title Список преимуществ
+ */
+export interface BenefitsListContent {
+  benefitsVersion?: IconVersion;
+  /**
+   * @title Список преимуществ
+   * @minItems 2
+   * @maxItems 4
+   */
+  benefits?: ComplexBenefitContent[];
+}

package/mobile/src/ui-kit/BenefitsList/renderBenefit.tsx

@@ -0,0 +1,14 @@
+import type { IconVersion } from '../../model/IconVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
+
+export const renderBenefit =
+  (benefitsVersion?: IconVersion) =>
+  ({ type, ...benefit }: ComplexBenefitContent, i: number) => {
+    if (type === 'rte' && '__html' in benefit) {
+      return <RichText __html={benefit.__html} />;
+    }
+
+    return <BenefitItem key={String(i)} benefitsVersion={benefitsVersion} {...benefit} />;
+  };

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

@@ -20,7 +20,17 @@ export const blockStyles: Record<BlockVersion, string> = {
 };
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
+  ({
+    className,
+    version = 'primary',
+    isTheme = true,
+    defaultPadding = 'p-m',
+    padding,
+    block,
+    tag = 'section',
+    role,
+    children,
+  }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);
@@ -36,15 +46,19 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       [block],
     );
 
+    const isGroup = version && isTheme;
+
     return (
       <Tag
         className={style(
-          groupStyle(Boolean(version && isTheme)),
+          'font-sans',
+          isGroup ? 'group' : '',
           blockStyles[version],
           isHidden ? 'hidden' : '',
+          padding || defaultPadding,
           className,
         )}
-        {...(version && isTheme ? { 'data-ver': version } : {})}
+        {...(isGroup ? { 'data-ver': version } : {})}
         {...(block?.anchor ? { id: block.anchor, ref } : {})}
         role={role}
       >
@@ -53,5 +67,3 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     );
   },
 );
-
-const groupStyle = (isGroup: boolean): string => (isGroup ? 'group' : '');

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -32,7 +32,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
+  const withTextStyle = `${aboveText ? 'py-2.5 px-9' : 'py-4 px-9'}`;
 
   return [
     'group/btn items-center justify-center',

package/mobile/src/ui-kit/Button/renderButtonsSection.tsx

@@ -12,13 +12,13 @@ interface ButtonsSectionOptions {
 
 export const renderButtonsSection = (
   buttons?: (ButtonWithIconProps | undefined)[],
-  { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
+  { className, buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
   buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
     <div
       className={style(
         'flex',
-        isVertical ? 'flex-col gap-2 justify-items-stretch' : 'flex-wrap gap-4',
+        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-s',
         className,
       )}
     >