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

package/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/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/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/src/ui-kit/BenefitItem/borderRadius.mobile.tsx

@@ -0,0 +1 @@
+export const borderRadius = 'rounded-md';

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

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

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

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

package/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/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/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/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/src/ui-kit/Button/Button.fixture.tsx

@@ -5,7 +5,7 @@ import { Button } from './Button';
 
 export default {
   all: (
-    <div className="font-sans overflow-hidden">
+    <div className="font-sans overflow-hidden bg-white">
       <div>
         <p>Private clients</p>
         <div className="flex gap-6" data-theme="pc">

package/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/src/ui-kit/Button/renderButtonsSection.tsx

@@ -12,10 +12,16 @@ 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' : 'flex-wrap gap-4', className)}>
+    <div
+      className={style(
+        'flex',
+        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-s',
+        className,
+      )}
+    >
       {buttons.map(renderButton(buttonClassName))}
     </div>
   ) : null;
@@ -30,7 +36,7 @@ const renderButton =
     return text || icon?.icon ? (
       <Button
         key={index ? String(index) : ''}
-        className={buttonClassName}
+        className={style('basis-full sm:basis-auto', buttonClassName)}
         appendLeft={renderButtonIcon({ ...icon, iconVersion })}
         appendRight={renderButtonIcon({ ...iconRight, iconVersion })}
         version={version}

package/src/ui-kit/Heading/Heading.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import type { HeadingProps, HeadingType } from './HeadingProps';
 import { headingTag } from './headingTag';
 
@@ -17,7 +18,9 @@ export const Heading = JSX<HeadingProps>(
     const Tag = headingTag(as);
 
     return (
-      <Tag className={`font-sans m-0 ${styles[headingType]} ${className}`}>{title || children}</Tag>
+      <Tag className={style('font-sans m-0', styles[headingType], className)}>
+        {title || children}
+      </Tag>
     );
   },
 );

package/src/ui-kit/Icon/IconProps.ts

@@ -2,6 +2,15 @@ import type { IconName } from '../../icons/IconName';
 import type { IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
+
+/**
+ * @title Цвет фона иконки
+ * @enumNames [
+ *    "Основной",
+ *    "Второстепенный",
+ *    "Второстепенный светлый"
+ * ]
+ */
 export type IconBgVersion = 'primary' | 'secondary' | 'secondary-light';
 
 export interface IconCompatibilityFields {
@@ -21,7 +30,3 @@ export type IconProps = IconCompatibilityFields & {
   name?: IconName;
   iconVersion?: IconVersion;
 };
-
-export interface RoundedIconProps extends IconProps {
-  iconBgVersion?: IconBgVersion;
-}

package/src/ui-kit/Icon/RoundedIcon.tsx

@@ -1,7 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from './Icon';
-import type { IconBgVersion, RoundedIconProps } from './IconProps';
+import type { Picture } from '../../model/Picture';
 import { style } from '../../utils/style';
+import { Icon } from './Icon';
+import type { IconBgVersion } from './IconProps';
+
+export interface RoundedIconProps extends Picture {
+  iconBgVersion?: IconBgVersion;
+}
 
 const iconBgStyles: Record<IconBgVersion, string> = {
   primary: 'bg-main-divider',
@@ -9,8 +14,15 @@ const iconBgStyles: Record<IconBgVersion, string> = {
   'secondary-light': 'bg-secondary-light',
 };
 
-export const RoundedIcon = JSX<RoundedIconProps>(({ iconBgVersion = 'primary', ...rest }) => (
-  <div className={style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion])}>
-    <Icon {...rest} />
-  </div>
-));
+export const RoundedIcon = JSX<RoundedIconProps>(
+  ({ iconBgVersion = 'primary', size, icon, ...rest }) => {
+    const width = String(size?.width || 24);
+    const height = String(size?.height || 24);
+
+    return icon ? (
+      <div className={style('rounded-icon p-2.5', iconBgStyles[iconBgVersion])}>
+        <Icon {...rest} width={width} height={height} name={icon} />
+      </div>
+    ) : null;
+  },
+);

package/src/ui-kit/Img/Img.tsx

@@ -1 +1,29 @@
-export { ImgInner as Img } from './ImgInner';
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../Icon/Icon';
+import { ImgAsPicture } from './ImgAsPicture';
+import type { ImageProps } from './ImgProps';
+
+export const Img = JSX<ImageProps>(
+  ({ className = '', image, imageClassName = '', pathPrefix, ...iconProps }) => {
+    if (!image?.src && !image?.icon) {
+      return null;
+    }
+
+    return image.icon ? (
+      <Icon
+        className={className}
+        imageClassName={imageClassName}
+        iconVersion={image?.iconVersion}
+        name={image.icon}
+        {...iconProps}
+      />
+    ) : (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image}
+        pathPrefix={pathPrefix}
+      />
+    );
+  },
+);

package/src/ui-kit/Img/ImgAsPicture.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Router, useRouter } from '../../hooks/useRouter';
 import type { ImgSource, Picture } from '../../model/Picture';
 import { adjustHref } from '../../utils/adjustHref';
+import { style } from '../../utils/style';
 import { isURL, joinPath } from '../../utils/url';
 import type { ImageProps } from './ImgProps';
 
@@ -9,13 +10,11 @@ const sourcesComparator = (a: Picture, b: Picture) =>
   a?.media && b?.media ? a.media - b.media : 0;
 
 export const ImgAsPicture = JSX<ImageProps>(
-  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
+  ({ className = '', image, imageClassName = '', pathPrefix }) => {
     const router = useRouter();
 
-    const pictureStyles = isMobile ? 'flex' : 'flex-none';
-
     return (
-      <picture className={`${pictureStyles} ${className}`}>
+      <picture className={className}>
         {image?.sources?.length
           ? image.sources
               .filter((_) => _?.src)
@@ -31,38 +30,26 @@ export const ImgAsPicture = JSX<ImageProps>(
               ))
           : null}
         {image?.src
-          ? renderImg(
-              { ...image, src: adjustSrc(router, pathPrefix)(image.src) },
-              imageClassName,
-              isMobile,
-            )
+          ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName)
           : null}
       </picture>
     );
   },
 );
 
-const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
-  const style = {
-    width: image.size?.width ? `${image.size?.width}px` : '100%',
-    height: image.size?.height ? `${image.size?.height}px` : 'auto',
-  };
-
-  const title = image.title || '';
-  const alt = image.alt || image.title;
-  const imgStyle = isMobile ? 'm-auto' : 'm-0';
-
-  return (
-    <img
-      src={image.src}
-      className={`${imgStyle} ${imageClassName}`}
-      alt={alt}
-      title={title}
-      style={style}
-      {...image.size}
-    />
-  );
-};
+const renderImg = (image: Picture, imageClassName = '') => (
+  <img
+    src={image.src}
+    className={style('object-contain', imageClassName)}
+    alt={image.alt || image.title}
+    title={image.title || ''}
+    style={{
+      width: image.size?.width ? `${image.size?.width}px` : '100%',
+      height: image.size?.height ? `${image.size?.height}px` : 'auto',
+    }}
+    {...image.size}
+  />
+);
 
 const adjustSrc = (router: Router, pathPrefix?: string) => (src: string | undefined) =>
   src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;

package/src/ui-kit/Img/ImgProps.ts

@@ -8,6 +8,5 @@ export interface ImageContent {
 export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;
-  isMobile?: boolean;
   pathPrefix?: string;
 }

package/src/ui-kit/List/List.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
+import type { ListItemSize } from './ListContent';
 import { ListItem } from './ListItem';
-import type { ListItemSize, ListProps } from './ListProps';
+import type { ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   S: 'text-l-light',

package/src/ui-kit/List/ListContent.ts

@@ -1,4 +1,11 @@
+/**
+ * @title Размер пунктов списка
+ * @enumNames ["Маленький", "Средний", "Большой"]
+ */
+export type ListItemSize = 'S' | 'M' | 'L';
+
 export interface ListContent {
   /** @title Список */
   items?: string[];
+  listItemSize?: ListItemSize;
 }

package/src/ui-kit/List/ListItem.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
-import type { ListItemSize } from './ListProps';
+import type { ListItemSize } from './ListContent';
 
 /**
  * @title Параметры элемента списка

package/src/ui-kit/List/ListProps.ts

@@ -1,12 +1,6 @@
 import type { BulletsProps } from '../../model/Bullets';
 import type { ListContent } from './ListContent';
 
-/**
- * @title Размер пунктов списка
- * @enumNames ["Маленький", "Средний", "Большой"]
- */
-export type ListItemSize = 'S' | 'M' | 'L';
-
 /**
  * @title Содержимое списка
  */
@@ -16,5 +10,4 @@ export type ListProps = ListContent &
     className?: string;
     /** @title Отступ */
     hasIndent?: boolean;
-    listItemSize?: ListItemSize;
   };

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -4,7 +4,7 @@ import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObs
 import { mapChildren } from '../../utils/mapChildren';
 import { style } from '../../utils/style';
 import { getContainerHeight } from './getContainerHeight';
-import type { SwipeContainerProps } from './SwipeListControlProps';
+import type { SwipeListContainerContent } from './SwipeListControlContent';
 import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
@@ -14,12 +14,14 @@ type SwipeListItemWidthAuto = 0;
 /**
  * @title Список
  */
-interface SwipeListContainerProps extends SwipeContainerProps {
+interface SwipeListContainerProps extends SwipeListContainerContent {
   className?: string;
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
   visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3 | 4;
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
+  gap?: number;
+  padding?: number;
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
 }

package/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { style } from '../../utils/style';
 import { SwipeListContainer } from './SwipeListContainer';
+import type { SwipeListControlContent } from './SwipeListControlContent';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import type { SwipeListControlProps } from './SwipeListControlProps';
 import { useSwipeListScroll } from './useSwipeListScroll';
 
 const DEFAULT_GAP = 14;
@@ -14,9 +15,18 @@ const DEFAULT_GAP = 14;
  */
 const DEFAULT_PADDING = 16;
 
+interface SwipeListControlProps extends SwipeListControlContent {
+  className?: string;
+  version?: BlockVersion;
+  gap?: number;
+  padding?: number;
+  onVisibleIndicesChange?: (indices: number[]) => void;
+}
+
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
-    className = '',
+    className,
+    version,
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
@@ -24,7 +34,6 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     children,
     onVisibleIndicesChange,
     listType = 'horizontal-list',
-    version,
   }) => {
     const itemCount = Array.isArray(children) ? children.length : 0;