@redneckz/wildless-cms-uni-blocks 0.7.7 → 0.7.8

package/mobile/lib/ui-kit/BenefitItem/BenefitItemProps.d.ts

@@ -1,7 +1,8 @@
-import type { IconProps } from '../../model/Picture';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { IconVersion } from '../../model/IconVersion';
 import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
+import type { IconVersion } from '../../model/IconVersion';
+import type { IconProps } from '../../model/Picture';
+import { RichTextProps } from '../RichText/RichTextProps';
 export interface BenefitItemCommonProps {
     /** @hidden */
     benefitsVersion?: IconVersion;
@@ -11,10 +12,32 @@ export interface BenefitItemCommonProps {
     className?: string;
 }
 export declare type BenefitItemProps = DescriptionProps & LabelProps & IconProps;
+/**
+ * @title Стандартный бенефит
+ */
+declare type DefaultBenefit = BenefitItemProps & {
+    /** @default default */
+    type: 'default';
+};
+/**
+ * @title Форматированный текст
+ */
+declare type RichText = RichTextProps & {
+    /** @default rte */
+    type: 'rte';
+};
+/**
+ * @title Преимущество
+ * @default{
+ *  "type": "default"
+ * }
+ */
+export declare type ComplexBenefitProps = DefaultBenefit | RichText;
 /**
  * @title Преимущество
  */
 export declare type BenefitsProps = BenefitItemCommonProps & {
     /** @title Список преимуществ */
-    benefits?: BenefitItemProps[];
+    benefits?: ComplexBenefitProps[];
 };
+export {};

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

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
+import { renderBenefit } from './renderBenefit';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -39,17 +37,6 @@ export const PictureText = JSX<PictureTextProps>(
   ),
 );
 
-const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>
-  (
-    <BenefitItem
-      key={String(i)}
-      icon={benefit.icon}
-      label={benefit.label}
-      description={benefit.description}
-      version={version}
-    />
-  );
-
 function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
   return sum || monthLimit ? (
     <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">

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

@@ -5,6 +5,16 @@
     },
     "monthLimit": {
       "ui:field": "number"
+    },
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
     }
   }
 }

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

@@ -0,0 +1,33 @@
+import { BlockVersion } from '../../model/BlockVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+
+export const renderBenefit =
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (version: BlockVersion) => (benefit: ComplexBenefitProps, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return (
+          <BenefitItem
+            key={String(i)}
+            icon={benefit.icon}
+            label={benefit.label}
+            description={benefit.description}
+            version={version}
+          />
+        );
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

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

@@ -29,7 +29,11 @@ export const renderBenefit =
           </Text>,
         ];
       case 'rte':
-        return <RichText __html={benefit.__html} />;
+        return (
+          <div className="col-span-2">
+            <RichText __html={benefit.__html} />
+          </div>
+        );
       default:
         assertUnreachable(benefit);
     }

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

@@ -1,7 +1,8 @@
-import type { IconProps } from '../../model/Picture';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { IconVersion } from '../../model/IconVersion';
 import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
+import type { IconVersion } from '../../model/IconVersion';
+import type { IconProps } from '../../model/Picture';
+import { RichTextProps } from '../RichText/RichTextProps';
 
 export interface BenefitItemCommonProps {
   /** @hidden */
@@ -14,10 +15,34 @@ export interface BenefitItemCommonProps {
 
 export type BenefitItemProps = DescriptionProps & LabelProps & IconProps;
 
+/**
+ * @title Стандартный бенефит
+ */
+type DefaultBenefit = BenefitItemProps & {
+  /** @default default */
+  type: 'default';
+};
+
+/**
+ * @title Форматированный текст
+ */
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
+};
+
+/**
+ * @title Преимущество
+ * @default{
+ *  "type": "default"
+ * }
+ */
+export type ComplexBenefitProps = DefaultBenefit | RichText;
+
 /**
  * @title Преимущество
  */
 export type BenefitsProps = BenefitItemCommonProps & {
   /** @title Список преимуществ */
-  benefits?: BenefitItemProps[];
+  benefits?: ComplexBenefitProps[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/PictureText/PictureText.fixture.tsx

@@ -29,6 +29,14 @@ const imageInsurance: Picture = {
   ],
 };
 
+const imageMonitor: Picture = {
+  src: 'monitor.png',
+  format: 'webp',
+  alt: 'Управление несколькими счетами',
+  size: {
+    width: 420,
+  },
+};
 export const PICTURE_TEXT: PictureTextContent = {
   title: 'Обменивайте бонусы на путешествия',
   description:
@@ -36,11 +44,13 @@ export const PICTURE_TEXT: PictureTextContent = {
     'бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
   benefits: [
     {
+      type: 'default',
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
       icon: { icon: 'DocumentTextIcon' },
     },
     {
+      type: 'default',
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
       icon: { icon: 'DocumentTextIcon' },
@@ -54,19 +64,23 @@ export const INSURANCE_TEXT: PictureTextContent = {
   description: 'Покрываемые риски программы «Защита вас и ваших близких»',
   benefits: [
     {
+      type: 'default',
       label: 'Телесное повреждение',
       icon: { icon: 'ShieldTickIcon' },
     },
     {
+      type: 'default',
       label: 'Госпитализация застрахованного',
       description: 'Описание',
       icon: { icon: 'ShieldTickIcon' },
     },
     {
+      type: 'default',
       label: 'Сокращение численности работников организации и другой текст для теста длинны текста',
       icon: { icon: 'ShieldTickIcon' },
     },
     {
+      type: 'default',
       label: 'Смерть застрахованного',
       icon: { icon: 'ShieldTickIcon' },
     },
@@ -75,6 +89,24 @@ export const INSURANCE_TEXT: PictureTextContent = {
   sum: 500000,
 };
 
+export const BENEFITS_HTML_TEXT: PictureTextContent = {
+  title: '',
+  benefits: [
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты  контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+  ],
+
+  image: imageMonitor,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -96,4 +128,9 @@ export default {
       <PictureText className="col-span-12" {...INSURANCE_TEXT} monthLimit={25000} />
     </div>
   ),
+  'benefits as html': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...BENEFITS_HTML_TEXT} />
+    </div>
+  ),
 };

package/src/components/PictureText/PictureText.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
+import { renderBenefit } from './renderBenefit';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -39,17 +37,6 @@ export const PictureText = JSX<PictureTextProps>(
   ),
 );
 
-const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>
-  (
-    <BenefitItem
-      key={String(i)}
-      icon={benefit.icon}
-      label={benefit.label}
-      description={benefit.description}
-      version={version}
-    />
-  );
-
 function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
   return sum || monthLimit ? (
     <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">

package/src/components/PictureText/PictureText.ui.json

@@ -5,6 +5,16 @@
     },
     "monthLimit": {
       "ui:field": "number"
+    },
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
     }
   }
 }

package/src/components/PictureText/renderBenefit.tsx

@@ -0,0 +1,33 @@
+import { BlockVersion } from '../../model/BlockVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+
+export const renderBenefit =
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (version: BlockVersion) => (benefit: ComplexBenefitProps, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return (
+          <BenefitItem
+            key={String(i)}
+            icon={benefit.icon}
+            label={benefit.label}
+            description={benefit.description}
+            version={version}
+          />
+        );
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

package/src/components/ProductTile/renderBenefit.tsx

@@ -29,7 +29,11 @@ export const renderBenefit =
           </Text>,
         ];
       case 'rte':
-        return <RichText __html={benefit.__html} />;
+        return (
+          <div className="col-span-2">
+            <RichText __html={benefit.__html} />
+          </div>
+        );
       default:
         assertUnreachable(benefit);
     }

package/src/ui-kit/BenefitItem/BenefitItemProps.ts

@@ -1,7 +1,8 @@
-import type { IconProps } from '../../model/Picture';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { IconVersion } from '../../model/IconVersion';
 import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
+import type { IconVersion } from '../../model/IconVersion';
+import type { IconProps } from '../../model/Picture';
+import { RichTextProps } from '../RichText/RichTextProps';
 
 export interface BenefitItemCommonProps {
   /** @hidden */
@@ -14,10 +15,34 @@ export interface BenefitItemCommonProps {
 
 export type BenefitItemProps = DescriptionProps & LabelProps & IconProps;
 
+/**
+ * @title Стандартный бенефит
+ */
+type DefaultBenefit = BenefitItemProps & {
+  /** @default default */
+  type: 'default';
+};
+
+/**
+ * @title Форматированный текст
+ */
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
+};
+
+/**
+ * @title Преимущество
+ * @default{
+ *  "type": "default"
+ * }
+ */
+export type ComplexBenefitProps = DefaultBenefit | RichText;
+
 /**
  * @title Преимущество
  */
 export type BenefitsProps = BenefitItemCommonProps & {
   /** @title Список преимуществ */
-  benefits?: BenefitItemProps[];
+  benefits?: ComplexBenefitProps[];
 };