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

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -31,7 +31,6 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
         title={title}
         description={subtitle}
         headlineVersion="M"
-        align="center"
         {...rest}
       />
       {bonusBenefits?.length ? (

package/mobile/src/components/BusinessBlock/BusinessCard.tsx

@@ -28,13 +28,9 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   return (
     <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
       {icon?.icon ? (
-        <Img
-          className={`w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider`}
-          image={icon.icon}
-          asSVG
-        />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" asSVG />
       ) : null}
-      {icon?.src ? <Img image={icon.icon} /> : null}
+      {icon?.src ? <Img image={icon} /> : null}
       <span className="text-xl-light">{text}</span>
     </li>
   );

package/mobile/src/components/Carousel/Carousel.tsx

@@ -57,9 +57,11 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
 Carousel.childrenTypes = [
   'CarouselCard',
   'CarouselCatalogCard',
-  'CarouselTariffsCard',
+  'CarouselInvestmentCard',
   'CarouselProductCard',
   'CarouselProgramsCard',
+  'CarouselRecommendationCard',
+  'CarouselTariffsCard',
   'CarouselInvestmentCard',
 ];
 

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -22,13 +22,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
         <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
         <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
-          <Headline
-            className="!p-0"
-            title={title}
-            description={description}
-            headlineVersion="M"
-            align="center"
-          />
+          <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
           {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
         </div>
       </div>

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -24,7 +24,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             title={title}
             as="h1"
             description={description}
-            align="left"
+            align="text-left"
             className="p-0"
             bgColorHeadline="secondary"
           />

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -10,7 +10,7 @@ import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -7,7 +7,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { List } from '../../ui-kit/List/List';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { SocialMedia } from '../Footer/SocialMedia';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { BlockVersion, BlockVersionWithGray } from '../../model/BlockVersion';
+import { VersionWithGrayStyleMap } from '../../model/BlockVersion';
+
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 import type { UniBlockProps } from '../../model/JSXBlock';
 
@@ -35,8 +37,8 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     return (
       <BlockWrapper
         className={`relative text-left border border-solid box-border p-7 min-w-[524px]
-        ${BorderVersionStyleMap[version]}
-        ${VersionStyleMap[version]}
+        ${BorderVersionStyleMap[getOmitVersion(version)]}
+        ${VersionWithGrayStyleMap[version]}
         ${className}`}
         {...rest}
       >
@@ -51,7 +53,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               />
             ) : null}
             {socialMedia.length ? (
-              <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
+              <SocialMedia
+                className="pt-10 pb-0"
+                media={socialMedia}
+                version={getOmitVersion(version)}
+              />
             ) : null}
             {button?.text ? <div className="pt-2 mt-16">{renderButton({ button })}</div> : null}
           </div>
@@ -60,3 +66,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     );
   },
 );
+
+const getOmitVersion = (version: BlockVersionWithGray): BlockVersion =>
+  version === 'gray' ? 'primary' : version;

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,4 +1,4 @@
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersionWithGray } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
@@ -41,5 +41,5 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
-  version?: BlockVersion;
+  version?: BlockVersionWithGray;
 }

package/mobile/src/components/Catalog/Catalog.tsx

@@ -30,7 +30,6 @@ export const Catalog = JSX<CatalogProps>(
           title={title}
           description={description}
           headlineVersion="M"
-          align="center"
           {...rest}
         />
         <div

package/mobile/src/components/ContactsBlock/ContactsBlock.tsx

@@ -41,7 +41,7 @@ const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProp
             title={title}
             description={description}
             headlineVersion="XS"
-            align="left"
+            align="text-left"
             bgColorHeadline={version}
           />
           {additionalDescription ? (

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -4,6 +4,7 @@ import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'text-left text-m-light text-secondary-text';
+const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -20,8 +21,8 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
     <thead>
       <tr>
         <th className={TABLE_HEAD_STYLE}>Валюта</th>
-        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
-        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
+        <th className={TABLE_HEAD_STYLE_WITH_PL}>Купить</th>
+        <th className={TABLE_HEAD_STYLE_WITH_PL}>Продать</th>
       </tr>
     </thead>
     <tbody>{exchangeCurrencyItems.map(renderCurrencyRow)}</tbody>

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -7,7 +7,7 @@ import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 
 export const GalleryCardInner = JSX<GalleryCardProps>(

package/mobile/src/components/Gallery/GalleryContainer.tsx

@@ -19,7 +19,7 @@ export interface GalleryCardData {
 export const GalleryContainer = JSX<GalleryContainerProps>(
   ({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (
     <div>
-      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} align="center" />
+      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} />
       <div
         className={`flex mt-8 ${
           cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -19,7 +19,6 @@ export const GracePeriod = JSX<GracePeriodProps>(
         title={title}
         description={description}
         headlineVersion="M"
-        align="center"
         {...rest}
       />
       {calendar ? renderCalendar(calendar) : null}

package/mobile/src/components/Header/HeaderBurger.tsx

@@ -23,11 +23,11 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Img image="CloseIcon" width="24" height="24" asSVG />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" asSVG />
         </button>
         <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
-            image="GeolocationIcon"
+            image={{ icon: 'GeolocationIcon' }}
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"

package/mobile/src/components/Headline/Headline.tsx

@@ -1,36 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
-
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { HEADLINE_BLOCK_STYLE_MAPS } from './constants';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { HeadlineContent } from './HeadlineContent';
+import { headlineStyles } from './headlineStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
-    bgColorHeadline = 'transparent',
     className = '',
     title,
     description,
     image,
-    align = 'left',
+    bgColorHeadline = 'transparent',
+    align = 'text-left',
   }) => {
-    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+    const style = headlineStyles[bgColorHeadline];
 
     return (
-      <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
+      <section className={`px-4 py-6 flex flex-col gap-2.5 ${style.wrapper} ${className}`}>
         {title ? (
-          <Heading
-            headingType="h2"
-            className={`${STYLE_MAPS.text} ${AlignText[align]}`}
-            title={title}
-          />
+          <Heading headingType="h2" className={`${style.titleColor} ${align}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m ${STYLE_MAPS.description} ${AlignText[align]}`}>{description}</p>
+          <Paragraph color={style.descriptionColor || style.titleColor} size="text-m" align={align}>
+            {description}
+          </Paragraph>
         ) : null}
         {image?.src && (
           <div className="mt-2.5 mx-auto flex justify-center">

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -1,8 +1,8 @@
-import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Заголовок
@@ -10,7 +10,7 @@ import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
 export type HeadlineContent = HeadlineProps & {
   /** @title Изображение (моб.) */
   image?: Picture;
-  align?: AlignType;
+  align?: TextAlign;
   bgColorHeadline?: BlockVersionWithTransparent;
   /** @hidden */
   as?: HeadingTagType;

package/mobile/src/components/Headline/headlineStyles.ts

@@ -0,0 +1,25 @@
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+
+export const headlineStyles: Record<
+  BlockVersionWithTransparent,
+  {
+    wrapper: string;
+    titleColor: TextColor;
+    descriptionColor?: TextColor;
+  }
+> = {
+  transparent: {
+    wrapper: 'bg-transparent',
+    titleColor: 'text-primary-text',
+  },
+  primary: {
+    wrapper: 'bg-white',
+    titleColor: 'text-primary-text',
+  },
+  secondary: {
+    wrapper: 'bg-primary-main',
+    titleColor: 'text-white',
+    descriptionColor: 'text-white/80',
+  },
+};

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -0,0 +1,55 @@
+import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
+
+export const headlineVersionStyles: Record<
+  HeadlineVersion,
+  {
+    wrapper: string;
+    title: HeadingCommonProps;
+    descriptionSize: TextSize | TitleSize;
+  }
+> = {
+  XXL: {
+    wrapper: 'gap-[18px]',
+    title: { headingType: 'h0', as: 'h1' },
+    descriptionSize: 'text-h5',
+  },
+  XL: {
+    wrapper: 'gap-4',
+    title: { headingType: 'h1', as: 'h1' },
+    descriptionSize: 'text-xl-light',
+  },
+  L: {
+    wrapper: 'gap-4',
+    title: { headingType: 'h2', as: 'h2' },
+    descriptionSize: 'text-xl-light',
+  },
+  M: {
+    wrapper: 'gap-3',
+    title: { headingType: 'h3', as: 'h3' },
+    descriptionSize: 'text-xl-light',
+  },
+  S: {
+    wrapper: 'gap-2',
+    title: { headingType: 'h4', as: 'h4' },
+    descriptionSize: 'text-xl-light',
+  },
+  XS: {
+    wrapper: 'gap-2',
+    title: { headingType: 'h5', as: 'h5' },
+    descriptionSize: 'text-l-light',
+  },
+};
+
+// TODO Move to Gallery and rename
+export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {
+  H6: 'text-h6',
+  XL_L: 'text-xl-light',
+  XL_R: 'text-xl',
+  L_L: 'text-l-light',
+  L_R: 'text-l',
+  M: 'text-m-light',
+  S: 'text-s-light',
+  XS: 'text-xs-light',
+};

package/mobile/src/components/HorizontalLayout/HorizontalLayout.example.json

@@ -0,0 +1,19 @@
+{
+  "content": {
+    "version": "primary",
+    "gap": "XS"
+  },
+  "style": ["col-span-12"],
+  "type": "HorizontalLayout",
+  "blocks": [
+    {
+      "type": "Headline",
+      "content": {
+        "title": "Заголовок блока",
+        "description": "Описание блока",
+        "headlineVersion": "M"
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
+
+export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
+
+export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
+  ({
+    className = '',
+    gap = 'XS',
+    isPadding = false,
+    version = 'transparent',
+    options,
+    ...rest
+  }) => {
+    const paddingStyle = isPadding ? 'p-12' : '';
+
+    return (
+      <BlockWrapper
+        className={[
+          'grid grid-cols-12',
+          paddingStyle,
+          GapStyleMap[gap],
+          LayoutBackgroundStyleMap[version],
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        {...rest}
+      >
+        {renderChildren({ ...rest, options: options })}
+      </BlockWrapper>
+    );
+  },
+);
+
+HorizontalLayout.childrenTypes = {
+  exclude: ['HorizontalLayout'],
+};

package/mobile/src/components/HorizontalLayout/HorizontalLayout.ui.json

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

package/mobile/src/components/HorizontalLayout/HorizontalLayoutContent.ts

@@ -0,0 +1,17 @@
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+
+/**
+ * @title Отсуп между компонентами
+ * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький", "Без отступа"]
+ */
+export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
+
+/**
+ * @title Горизонтальный компоновщик
+ */
+export interface HorizontalLayoutContent {
+  version?: BlockVersionWithTransparent;
+  gap?: GapVersion;
+  /** @title Внутренний отступ компоновщика */
+  isPadding?: boolean;
+}

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -132,7 +132,7 @@ function renderDoneIcon(isActive: boolean) {
   return isActive ? (
     <Img
       className={`h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`}
-      image="DoneIcon"
+      image={{ icon: 'DoneIcon' }}
       width="24"
       height="24"
     />

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -25,7 +25,6 @@ export const LinkDocs = JSX<LinkDocsProps>(
         className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
         title={title}
         description={description}
-        align="center"
         {...rest}
       />
       {orientation === 'vertical' ? (

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,8 +1,8 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkProps } from '../../model/LinkProps';
-import type { AlignType } from '../../model/AlignType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Отображение списка
@@ -43,5 +43,5 @@ export type LinkDocsContent = HeadlineCommonProps & {
   orientation?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
-  align?: AlignType;
+  align?: TextAlign;
 };

package/mobile/src/components/PictureText/PictureText.tsx

@@ -35,7 +35,6 @@ export const PictureText = JSX<PictureTextProps>(
         description={description}
         headlineVersion="M"
         bgColorHeadline={version}
-        align="center"
         {...rest}
       />
       <div className={'flex justify-center gap-[122px] mt-[30px]'}>

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -41,7 +41,7 @@ export const ProductTile = JSX<ProductTileProps>(
           description={description}
           headlineVersion={headlineVersion}
           bgColorHeadline={version}
-          align="left"
+          align="text-left"
           {...rest}
         />
         {renderBenefits(benefits, version, image)}

package/mobile/src/components/ProductTile/ProductTile.ui.json

@@ -2,7 +2,7 @@
   "content": {
     "benefits": {
       "items": {
-        "md": {
+        "__html": {
           "ui:widget": "html"
         },
         "type": {

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -2,7 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { MarkdownTextProps } from '../../ui-kit/MarkdownText/MarkdownTextProps';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
  * @title Стандартный
@@ -16,9 +16,9 @@ type TextBenefit = DescriptionProps &
 /**
  * @title Форматированный текст
  */
-type MarkdownTextContent = MarkdownTextProps & {
-  /** @default md */
-  type: 'md';
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
 };
 
 /**
@@ -27,7 +27,7 @@ type MarkdownTextContent = MarkdownTextProps & {
  *  "type": "default"
  * }
  */
-export type Benefit = TextBenefit | MarkdownTextContent;
+export type Benefit = TextBenefit | RichText;
 
 /**
  * @title Продуктовая плитка

package/mobile/src/components/ProductTile/renderBenefit.tsx

@@ -1,5 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { MarkdownText } from '../../ui-kit/MarkdownText/MarkdownText';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { assertUnreachable } from '../../utils/assertUnreachable';
@@ -17,7 +17,7 @@ export const renderBenefit =
   (benefit: Benefit, i: number) => {
     const { type } = benefit;
 
-    if (!(type === 'default' || type === 'md')) {
+    if (!(type === 'default' || type === 'rte')) {
       return null;
     }
 
@@ -31,8 +31,8 @@ export const renderBenefit =
             {benefit.description}
           </Text>,
         ];
-      case 'md':
-        return <MarkdownText md={benefit.md} />;
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
       default:
         assertUnreachable(benefit);
     }

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -36,7 +36,7 @@ export const PromoTile = JSX<PromoTileProps>(
               className={`!p-0 max-w-[600px]`}
               headlineVersion={getTileHeadingType(className)}
               bgColorHeadline={version}
-              align="left"
+              align="text-left"
               as="h2"
               {...rest}
             />

package/mobile/src/components/RichTextBlock/RichTextBlock.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "__html": "<p class=\"h1\">Заголовок 1</p>\n<p class=\"h2\">Заголовок 2</p>\n<p class=\"h3\">Заголовок 3</p>\n<p class=\"h4\">Заголовок 4</p>\n<p class=\"h5\">Заголовок 5</p>\n<p class=\"h6\">Заголовок 6</p>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
+  }
+}

package/mobile/src/components/RichTextBlock/RichTextBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import type { RichTextBlockContent } from './RichTextBlockContent';
+
+interface RichTextBlockProps extends RichTextBlockContent, UniBlockProps {}
+
+export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
+  const { __html, ...rest } = props;
+
+  return (
+    <BlockWrapper {...rest}>
+      <RichText __html={__html} />
+    </BlockWrapper>
+  );
+});

package/mobile/src/components/RichTextBlock/RichTextBlock.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/mobile/src/components/RichTextBlock/RichTextBlockContent.ts

@@ -0,0 +1,6 @@
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+
+/**
+ * @title Форматированный текст
+ */
+export type RichTextBlockContent = RichTextProps;