@redneckz/wildless-cms-uni-blocks 0.11.2 → 0.12.3

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

@@ -10,12 +10,11 @@ export interface TariffsTableTileCellProps extends UniBlockProps {
 }
 
 export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ tile, ...rest }) => (
-  <div className="rounded-md border-gray h-full box-border border p-4">
-    <TableTileHeader {...tile?.header} />
+  <div className="h-full">
+    <TableTileHeader title={tile?.header?.title} />
     {tile?.data?.length
       ? tile.data.map((cell, i) => (
-          <div key={String(i)}>
-            {i > 0 ? <div className="h-5" /> : null}
+          <div key={String(i)} className="mb-2">
             {renderCell(cell, rest)}
           </div>
         ))

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

@@ -12,34 +12,29 @@ import type { TextBlockContent } from './TextBlockContent';
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => {
-    return (
-      <BlockWrapper
-        className={style(
-          'px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10',
-          className,
-        )}
-        {...rest}
-      >
-        {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
-        {iconVersion === 'big' ? renderImage(image) : null}
-        <div className="flex flex-col w-fit gap-3">
-          {title ? (
-            <Text
-              size="text-l"
-              font="font-medium"
-              color="text-primary-text group-data-secondary:text-white"
-            >
-              {title}
-            </Text>
-          ) : null}
-          {description ? renderDescription(description) : null}
-          {items?.length ? renderList(items, true) : null}
-          {__html ? <RichText __html={__html} /> : null}
-        </div>
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (
+    <BlockWrapper
+      className={style('flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className)}
+      {...rest}
+    >
+      {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
+      {iconVersion === 'big' ? renderImage(image) : null}
+      <div className="flex flex-col w-fit gap-3">
+        {title ? (
+          <Text
+            size="text-l"
+            font="font-medium"
+            color="text-primary-text group-data-secondary:text-white"
+          >
+            {title}
+          </Text>
+        ) : null}
+        {description ? renderDescription(description) : null}
+        {items?.length ? renderList(items, true) : null}
+        {__html ? <RichText __html={__html} /> : null}
+      </div>
+    </BlockWrapper>
+  ),
 );
 
 const renderIcon = () => (

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,34 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Paragraph } from '../Paragraph/Paragraph';
 import { Text } from '../Text/Text';
-import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
+import type { BenefitItemContent } from './BenefitItemContent';
+import { labelSize } from './labelSize';
 
-export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
+export interface BenefitGeneralProps extends BenefitItemContent {
+  className?: string;
+  benefitsVersion?: IconVersion;
+}
 
 export const BenefitItem = JSX<BenefitGeneralProps>(
-  ({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (
-    <div className={style('flex gap-5', description ? 'items-start' : 'items-center', className)}>
+  ({ className, icon, label, description, benefitsVersion = 'normal' }) => (
+    <div className={style('flex gap-s', description ? 'items-start' : 'items-center', className)}>
       {icon ? (
-        <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
+        <div className={getBenefitIconBgStyle(benefitsVersion)}>
           <Img
             className="w-6 h-6"
             image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
           />
         </div>
       ) : null}
-      <div>
+      <div className="gap-0.5">
         {label ? (
-          <Text size="text-h6" color="text-primary-text group-data-secondary:text-white">
+          <Text color="text-primary-text group-data-secondary:text-white" size={labelSize}>
             {label}
           </Text>
         ) : null}
         {description ? (
           <Paragraph
-            size="text-m-light"
+            font="font-light"
+            size="text-m"
             color="text-secondary-text group-data-secondary:text-white"
           >
             {description}
@@ -39,14 +43,14 @@ export const BenefitItem = JSX<BenefitGeneralProps>(
   ),
 );
 
-function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersion) {
-  let bgColorStyle = 'bg-primary-main text-black';
-
-  if (version === 'secondary') {
-    bgColorStyle = 'bg-white/30 text-black';
-  } else if (benefitsVersion === 'normal') {
-    bgColorStyle = 'bg-secondary-light text-primary-main';
-  }
+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 `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${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/BenefitItem/labelSize.tsx

@@ -0,0 +1 @@
+export const labelSize = 'text-l';

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[];
+}