@redneckz/wildless-cms-uni-blocks 0.6.45 → 0.6.47

package/src/components/VerticalLayout/VerticalLayout.example.json

@@ -1,20 +1,165 @@
 {
   "content": {
-    "version": "transparent",
+    "version": "primary",
     "isPadding": false,
     "isInnerPadding": true,
     "align": "left",
     "gap": ""
   },
+  "style": ["col-span-12"],
+  "type": "VerticalLayout",
   "blocks": [
     {
-      "type": "Headline",
       "content": {
-        "title": "Заголовок блока",
-        "description": "Описание блока",
-        "headlineVersion": "M"
+        "isBlur": false,
+        "visibleItemCount": 3,
+        "isCycle": false
       },
-      "style": ["col-span-12"]
+      "style": ["col-span-12"],
+      "type": "Carousel",
+      "blocks": [
+        {
+          "content": {
+            "image": {
+              "alignment": "center",
+              "size": {
+                "width": 230,
+                "height": 230
+              },
+              "alt": "",
+              "title": "",
+              "iconVersion": "normal",
+              "format": "webp"
+            },
+            "button": {
+              "text": "Подробнее",
+              "icon": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "version": "primary",
+              "iconRight": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "target": "_self",
+              "href": ""
+            },
+            "title": "Заголовок карточки 1",
+            "description": "Описание карточки 1"
+          },
+          "style": ["col-span-12"],
+          "type": "CarouselCatalogCard"
+        },
+        {
+          "content": {
+            "image": {
+              "alignment": "center",
+              "size": {
+                "width": 230,
+                "height": 230
+              },
+              "alt": "",
+              "title": "",
+              "iconVersion": "normal",
+              "format": "webp"
+            },
+            "button": {
+              "text": "Подробнее",
+              "icon": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "version": "primary",
+              "iconRight": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "target": "_self",
+              "href": ""
+            },
+            "title": "Заголовок карточки 2",
+            "description": "Описание карточки 2"
+          },
+          "style": ["col-span-12"],
+          "type": "CarouselCatalogCard"
+        },
+        {
+          "content": {
+            "image": {
+              "alignment": "center",
+              "size": {
+                "width": 230,
+                "height": 230
+              },
+              "alt": "",
+              "title": "",
+              "iconVersion": "normal",
+              "format": "webp"
+            },
+            "button": {
+              "text": "Подробнее",
+              "icon": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "version": "primary",
+              "iconRight": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "target": "_self",
+              "href": ""
+            },
+            "title": "Заголовок карточки 3",
+            "description": "Описание карточки 3"
+          },
+          "style": ["col-span-12"],
+          "type": "CarouselCatalogCard"
+        }
+      ]
     }
   ]
 }

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignType } from '../../model/AlignType';
-import { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { GapVersion, VerticalLayoutContent } from './VerticalLayoutContent';
+import type { VerticalLayoutContent } from './VerticalLayoutContent';
 
 export interface VerticalLayoutProps extends VerticalLayoutContent, UniBlockProps {}
 
@@ -14,22 +14,6 @@ const alignStyle: Record<AlignType, string> = {
   right: 'items-end',
 };
 
-const gapStyleMap: Record<GapVersion, string> = {
-  XXL: 'gap-12',
-  XL: 'gap-10',
-  L: 'gap-8',
-  M: 'gap-4',
-  S: 'gap-2',
-  XS: 'gap-1',
-  '': '',
-};
-
-const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
-  transparent: '',
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
-};
-
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
   ({
     className = '',
@@ -49,9 +33,9 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
         className={[
           'flex flex-col [&>*]:max-w-full',
           paddingStyle,
-          gapStyleMap[gap],
+          GapStyleMap[gap],
           align && alignStyle[align],
-          backgroundStyleMap[version],
+          LayoutBackgroundStyleMap[version],
           className,
         ]
           .filter(Boolean)

package/src/content-page-repository/replaceHeadingTags.ts

@@ -0,0 +1,2 @@
+export const replaceHeadingTags = (html: string) =>
+  html.replaceAll(/<h(\d)>([^<]*)<\/h\d>/g, '<p class="h$1">$2</p>');

package/src/content-page-repository/transformContentPage.ts

@@ -4,6 +4,7 @@ import type { ContentPageDef } from '../model/ContentPageDef';
 import type { Picture } from '../model/Picture';
 import { mapJSON } from './mapJSON';
 import type { TransformationOptions } from './TransformationOptions';
+import { transformHTML } from './transformHTML';
 import { transformMarkdown } from './transformMarkdown';
 import { transformPicture } from './transformPicture';
 
@@ -18,9 +19,12 @@ export async function transformContentPage(
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
+    const isHTML = typeof value === 'string' && key?.endsWith('__html');
 
     if (isMarkdown) {
       return await transformMarkdown(value);
+    } else if (isHTML) {
+      return await transformHTML(value);
     } else if (isPicture(value)) {
       try {
         return await transformPicture(pagePath, value, options);

package/src/content-page-repository/transformHTML.ts

@@ -0,0 +1,19 @@
+import rehypeParse from 'rehype-parse/lib';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeStringify from 'rehype-stringify';
+import { unified } from 'unified';
+import { replaceHeadingTags } from './replaceHeadingTags';
+
+export async function transformHTML(html: string | null | undefined): Promise<string> {
+  if (!html) {
+    return '';
+  }
+
+  const result = await unified()
+    .use(rehypeParse)
+    .use(rehypeSanitize)
+    .use(rehypeStringify)
+    .process(html);
+
+  return replaceHeadingTags(result.toString('utf-8'));
+}

package/src/content-page-repository/transformMarkdown.ts

@@ -1,6 +1,7 @@
 import remarkHtml from 'remark-html';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
+import { replaceHeadingTags } from './replaceHeadingTags';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
   if (!markdown) {
@@ -9,5 +10,5 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
 
-  return result.toString('utf-8').replaceAll(/<h(\d)>([^<]*)<\/h\d>/g, '<p class="h$1">$2</p>');
+  return replaceHeadingTags(result.toString('utf-8'));
 }

package/src/model/AlignText.ts

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

package/src/model/BlockVersion.ts

@@ -1,3 +1,5 @@
+import { GapVersion } from '../components/HorizontalLayout/HorizontalLayoutContent';
+
 /**
  * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная"]
@@ -10,6 +12,12 @@ export type BlockVersion = 'primary' | 'secondary';
  */
 export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';
 
+/**
+ * @title Цвет блока
+ * @enumNames [ "Основная", "Второстепенная", "Серая"]
+ */
+export type BlockVersionWithGray = 'primary' | 'secondary' | 'gray';
+
 export const VersionStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-white text-primary-text',
   secondary: 'bg-primary-main text-white',
@@ -25,3 +33,25 @@ export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent,
   primary: 'bg-white text-primary-text',
   secondary: 'bg-primary-main text-white',
 };
+
+export const VersionWithGrayStyleMap: Record<BlockVersionWithGray, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+  gray: 'bg-main-divider text-primary-text',
+};
+
+export const GapStyleMap: Record<GapVersion, string> = {
+  XXL: 'gap-12',
+  XL: 'gap-10',
+  L: 'gap-8',
+  M: 'gap-4',
+  S: 'gap-2',
+  XS: 'gap-1',
+  '': '',
+};
+
+export const LayoutBackgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
+  transparent: '',
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};

package/src/services/BlockRouter/BlockRouter.ts

@@ -16,6 +16,8 @@ interface EventMap {
 }
 
 const normalizeAnchor = (rawAnchor?: string) => rawAnchor?.replace('#', '');
+const getURLWithAnchor = (rawAnchor?: string) =>
+  `${globalThis.location?.pathname}#${normalizeAnchor(rawAnchor)}`;
 
 export class BlockRouter {
   public static readonly inst = new BlockRouter();
@@ -38,14 +40,14 @@ export class BlockRouter {
   }
 
   push(rawAnchor: string) {
-    globalThis.history?.pushState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+    globalThis.history?.pushState(null, '', getURLWithAnchor(rawAnchor));
   }
 
   replace(rawAnchor: string) {
-    globalThis.history?.replaceState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+    globalThis.history?.replaceState(null, '', getURLWithAnchor(rawAnchor));
   }
 
   reset() {
-    globalThis.history?.replaceState(null, '', '#');
+    globalThis.history?.replaceState(null, '', getURLWithAnchor());
   }
 }

package/src/ui-kit/Button/ButtonSection.tsx

@@ -47,5 +47,5 @@ const renderButtonIcon = (icon: Picture) => {
   }
   const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
 
-  return <Img image={{ ...icon }} width={iconWidth} height="24" asSVG />;
+  return <Img image={icon} width={iconWidth} height="24" asSVG />;
 };

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ImgInner } from './ImgInner';
+import type { ImageProps } from './ImgProps';
 
-import type { Image, ImageProps } from './ImgProps';
-
-export const Img = JSX<ImageProps<Image>>((props) => <ImgInner {...props} isMobile={true} />);
+export const Img = JSX<ImageProps>((props) => <ImgInner {...props} isMobile={true} />);

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

@@ -10,8 +10,8 @@ const sourcesComparator = (a: Picture, b: Picture) => {
   return 0;
 };
 
-export const ImgAsPicture = JSX<ImageProps<Picture>>(
-  ({ className = '', image, imageClassName = '', isMobile = false }) => {
+export const ImgAsPicture = JSX<ImageProps>(
+  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
     if (!image || (!image?.sources && !image?.src)) {
       return null;
     }
@@ -26,14 +26,18 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
               .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
-                  srcSet={src}
+                  srcSet={addPathPrefixToSrcSet(src, pathPrefix)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
                   {...image.size}
                 />
               ))
           : null}
-        {renderImg(image, imageClassName, isMobile)}
+        {renderImg(
+          { ...image, src: addPathPrefixToSrc(image.src, pathPrefix) },
+          imageClassName,
+          isMobile,
+        )}
       </picture>
     );
   },
@@ -61,6 +65,18 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
   );
 };
 
+const normalizePathPrefix = (pathPrefix = '') =>
+  pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
+
+const addPathPrefixToSrc = (src?: string, pathPrefix?: string) =>
+  !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
+
+const addPathPrefixToSrcSet = (srcset?: string, pathPrefix?: string) =>
+  srcset
+    ?.split(',')
+    .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
+    .join(', ');
+
 export function formatToMimeType(format: ImgSource['format']): string | undefined {
   return format ? `image/${String(format)}` : undefined;
 }

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

@@ -1,36 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture } from '../../model/Picture';
 import { Icon } from '../Icon/Icon';
-import { getIconVersion } from './getIconVersion';
 import { ImgAsPicture } from './ImgAsPicture';
-import type { Image, ImageProps } from './ImgProps';
+import type { ImageProps } from './ImgProps';
 
-export const ImgInner = JSX<ImageProps<Image>>(
-  ({ className = '', image, imageClassName = '', isMobile, ...iconProps }) => {
-    if (!image) {
+export const ImgInner = JSX<ImageProps>(
+  ({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
+    if (!image?.src && !image?.icon) {
       return null;
     }
 
-    // backwards compatibility with existing icons in usage
-    const icon = typeof image === 'string' ? image : image.icon;
-    if (icon || icon === '') {
-      return icon.length ? (
-        <Icon
-          className={className}
-          imageClassName={imageClassName}
-          iconVersion={getIconVersion(image)}
-          name={icon}
-          {...iconProps}
-        />
-      ) : null;
-    }
-
-    return (
+    return image.icon ? (
+      <Icon
+        className={className}
+        imageClassName={imageClassName}
+        iconVersion={image?.iconVersion || 'normal'}
+        name={image.icon}
+        {...iconProps}
+      />
+    ) : (
       <ImgAsPicture
         className={className}
         imageClassName={imageClassName}
-        image={image as Picture}
+        image={image}
         isMobile={isMobile}
+        pathPrefix={pathPrefix}
       />
     );
   },

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

@@ -1,13 +1,12 @@
 import type { Picture } from '../../model/Picture';
-import type { IconCompatibilityFields, IconName } from '../Icon/IconProps';
+import type { IconCompatibilityFields } from '../Icon/IconProps';
 
-export type Image = Picture | IconName;
-
-export interface ImageContent<T = Picture> {
-  image?: T;
+export interface ImageContent {
+  image?: Picture;
 }
-export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
+export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;
   isMobile?: boolean;
+  pathPrefix?: string;
 }

package/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -30,7 +30,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
             >
               {_.title}
               <Img
-                image={hiddenTables[key] ? 'PlusIcon' : 'MinusIcon'}
+                image={{ icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }}
                 className="absolute right-[22px]"
                 width="24"
                 height="24"

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

@@ -103,7 +103,7 @@ const CloseButton = JSX<CloseButtonProps>(({ close }) => (
       close && close();
     }}
   >
-    <Img image="CloseIcon" width="24" height="24" />
+    <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
   </button>
 ));
 
@@ -131,7 +131,7 @@ const renderRegion =
             close && close();
           }}
         >
-          {region.name}
+          {region.name || ''}
         </button>
       </div>
     );
@@ -159,10 +159,12 @@ const ForeignOffice = JSX<ForeignOffice>(({ icon, ...rest }) => {
 
   return (
     <div className="flex gap-x-3">
-      <Img image={icon} />
-      <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
-        {text}
-      </a>
+      {icon ? <Img pathPrefix="/wcms-resources/" image={icon} /> : null}
+      {text ? (
+        <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
+          {text}
+        </a>
+      ) : null}
     </div>
   );
 });

package/src/ui-kit/Logo/renderImage.tsx

@@ -1,4 +1,4 @@
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
 
@@ -23,6 +23,7 @@ export const renderImage = (
       className={SVG_COLOR[bgColor]}
       width={size?.width}
       height={size?.height}
+      pathPrefix="/wcms-resources/"
       asSVG
     />
   ) : (

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

@@ -1,10 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ParagraphProps } from './ParagraphProps';
 
-export const Paragraph = JSX<ParagraphProps>((props) => {
-  const { size = '', color = '', align = '', font = '', children } = props;
-
-  const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
-
-  return <p className={textClasses}>{children}</p>;
-});
+export const Paragraph = JSX<ParagraphProps>(({ size, color, align, font, children }) => (
+  <p className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>{children}</p>
+));

package/src/ui-kit/RichText/RichText.fixture.tsx

@@ -0,0 +1,28 @@
+import { RichText } from './RichText';
+
+const HTML = `
+  <p class="h1">Заголовок 1</p>
+  <p class="h2">Заголовок 2</p>
+  <p class="h3">Заголовок 3</p>
+  <p class="h4">Заголовок 4</p>
+  <p class="h5">Заголовок 5</p>
+  <p class="h6">Заголовок 6</p>
+  <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
+  <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
+  <ul>
+    <li>Список с точками</li>
+    <li>Список с точками</li>
+  </ul>
+  <ol>
+    <li>Нумерованный список</li>
+    <li>Нумерованный список</li>
+  </ol>
+`;
+
+export default {
+  default: (
+    <section className="p-12">
+      <RichText __html={HTML} />
+    </section>
+  ),
+};

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RichTextProps } from './RichTextProps';
+
+export const RichText = JSX<RichTextProps>((props) => {
+  const { __html = '' } = props;
+
+  return <div className="md-container" dangerouslySetInnerHTML={{ __html }} />;
+});

package/src/ui-kit/RichText/RichTextProps.ts

@@ -0,0 +1,6 @@
+type HTML = string;
+
+export interface RichTextProps {
+  /** @title Текст */
+  __html?: HTML;
+}

package/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -20,7 +20,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
     <form className={`font-sans relative ${className}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className={LoupeIconClassName}>
-          <Img image="LoupeIcon" width="24" height="24" />
+          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
         </div>
         {term ? null : (
           <label
@@ -49,7 +49,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
             setTerm('');
           }}
         >
-          <Img image="CloseIcon" width="24" height="24" />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
         </button>
       ) : (
         <Button

package/src/ui-kit/Text/TextProps.ts

@@ -44,6 +44,7 @@ export type TextColor =
   | 'text-secondary-light'
   | 'text-error'
   | 'text-white'
+  | 'text-white/80'
   | 'text-green';
 
 /**