@redneckz/wildless-cms-uni-blocks 0.6.36 → 0.6.37

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps } from './CalculatorContent';
@@ -37,7 +37,9 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
     const [isStateEmployee, toggleIsStateEmployee] = useState(false);
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
+    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
     const userInputParams = {
       isAnnuity,
       isInsurance,
@@ -54,9 +56,9 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
           {renderWantedSumInput(
             'Сумма кредита, ₽',
             { ...calculatorParams, step: 500 },
-            setMoneyValue,
+            handleMoneyValue,
           )}
-          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue)}
+          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue)}
           <div className="mt-7">
             <Checkbox
               text="Получаю зарплату на счёт в Россельхозбанке"

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,7 +1,7 @@
 // TEMP
 
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -34,6 +34,7 @@ const depositTypeItems = [
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
   ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
     const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
     const userInputParams = {
@@ -41,6 +42,8 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       monthsValue,
       isMonthlyInterestPayment,
     };
+    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
+    const [isEveryMonth, toggleIsEveryMonth] = useState(false);
 
     const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
     const { income, finalSum, rate } = calculatorParams;
@@ -53,14 +56,14 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             {
               ...calculatorParams,
             },
-            setMoneyValue,
+            handleMoneyValue,
           )}
           {renderMonthsInput(
             'Срок вклада, месяцев',
             {
               ...calculatorParams,
             },
-            setMonthsValue,
+            handleMonthsValue,
           )}
         </div>
         <Rate rate={rate || 1} rateBlockClassName="tracking-[-25px]" unit="%" />

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,10 +1,11 @@
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { Carousel } from './Carousel';
+import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 
 const options = {
   blocksRegistry: Blocks,
@@ -86,4 +87,22 @@ export default {
       />
     </div>
   ),
+  investment: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={true}
+        isCyclic={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselInvestmentCard',
+            content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
+            style: ['col-span-2'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.tsx

@@ -17,7 +17,7 @@ export interface CarouselProps extends CarouselContent, UniBlockProps {
 const ITEMS_GAP = 4;
 
 const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
-const scrollButtonStyle = 'absolute top-1/2 z-50';
+const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
@@ -57,6 +57,7 @@ Carousel.childrenTypes = [
   'CarouselTariffsCard',
   'CarouselLinks',
   'CarouselProgramsCard',
+  'CarouselInvestmentCard',
 ];
 
 const renderScrollButtons = ({

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -42,7 +42,7 @@ export default {
     </div>
   ),
   mini: (
-    <div className="container flex">
+    <div className="container grid grid-cols-12">
       <CarouselCard {...CARD_MINI} />
     </div>
   ),

package/src/components/CarouselCard/CarouselCard.tsx

@@ -10,8 +10,8 @@ export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: `w-[${1007 + 48}px]`,
-  mini: `w-[${350 + 48}px]`,
+  normal: 'min-w-[1007px]',
+  mini: 'min-w-[355px]',
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -0,0 +1,28 @@
+{
+  "image": {
+    "format": "webp",
+      "size": {
+        "width": 180,
+        "height": 180
+      }
+    },
+  "title": "Заголовок",
+  "description": "Описание",
+  "additionalDescription": "Описание 1-2",
+  "columnsMode": "1",
+  "cardsList":[
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    },
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    },
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    }
+  ],
+  "version": "primary"
+}

package/src/components/{InvestmentGallery/InvestmentGallery.fixture.tsx → CarouselInvestmentCard/CarouselInvestmentCard.fixture.tsx}

@@ -1,6 +1,7 @@
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
-import { InvestmentGallery, InvestmentGalleryProps } from './InvestmentGallery';
+import { CarouselInvestmentCard } from './CarouselInvestmentCard';
+import type { CarouselInvestmentCardContent } from './CarouselInvestmentCardContent';
 
 const five: Picture = {
   src: '5.svg',
@@ -12,7 +13,7 @@ const five: Picture = {
   title: 'five',
 };
 
-const cardListExample = [
+const cardsList = [
   {
     parameter: 'IR',
     parameterDesccription: 'cтрана эмитента',
@@ -39,40 +40,33 @@ const cardListExample = [
   },
 ];
 
-const cardCoomonProps = {
+export const INVESTMENT_CARD_WITH_SINGLE_COLUMN: CarouselInvestmentCardContent = {
   title: 'Borets Finance DAC 17/09/26',
   description: 'BRTS-26 XS2230649225',
   additionalDescription: 'Краткосрочная',
+  cardsList,
+  columnsMode: 1,
+  image: five,
 };
 
-export const shortProps: InvestmentGalleryProps = {
-  title: 'Примеры еврооблигаций (Московская Биржа)',
-  cards: [
-    {
-      ...cardCoomonProps,
-      columnsMode: 'double',
-      cardList: cardListExample,
-      image: five,
-    },
-    {
-      ...cardCoomonProps,
-      columnsMode: 'single',
-      cardList: cardListExample,
-      image: five,
-    },
-    {
-      ...cardCoomonProps,
-      columnsMode: 'double',
-      cardList: cardListExample,
-      image: five,
-    },
-  ],
+export const INVESTMENT_CARD_WITH_DOUBLE_COLUMN: CarouselInvestmentCardContent = {
+  title: 'Borets Finance DAC 17/09/26',
+  description: 'BRTS-26 XS2230649225',
+  additionalDescription: 'Краткосрочная',
+  cardsList,
+  columnsMode: 2,
+  image: five,
 };
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 mb-1">
-      <InvestmentGallery className="col-span-12" {...shortProps} />
+    <div className="container grid grid-cols-12">
+      <CarouselInvestmentCard className="col-span-4" {...INVESTMENT_CARD_WITH_SINGLE_COLUMN} />
+    </div>
+  ),
+  'with-double-columns': (
+    <div className="container grid grid-cols-12">
+      <CarouselInvestmentCard className="col-span-4" {...INVESTMENT_CARD_WITH_DOUBLE_COLUMN} />
     </div>
   ),
 };

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -0,0 +1,83 @@
+import { BaseTile } from '../BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import type {
+  CardColumnsMode,
+  CardsListItem,
+  CarouselInvestmentCardContent,
+} from './CarouselInvestmentCardContent';
+import { JSX } from '@redneckz/uni-jsx';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { UniBlockProps } from '../../model/JSXBlock';
+
+export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
+
+const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
+
+const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
+  1: 'flex gap-y-2 flex-col',
+  2: 'flex gap-y-2 gap-x-10 flex-wrap',
+};
+
+export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
+  ({
+    additionalDescription,
+    cardsList = [],
+    className = '',
+    columnsMode = 1,
+    description,
+    image,
+    title,
+    version = 'primary',
+    ...rest
+  }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
+    ) : null;
+
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
+    return (
+      <BlockWrapper
+        className={`relative text-left border border-solid box-border
+        p-9 w-[697px]
+        ${BorderVersionStyleMap[version]}
+        ${className}`}
+        {...rest}
+      >
+        <BaseTile title={tileTitle} image={tileImage}>
+          <div className="flex justify-between mb-4">
+            {description ? <span className="text-h6 w-1/3">{description}</span> : null}
+            {additionalDescription ? (
+              <span className="text-m-light text-secondary-text">{additionalDescription}</span>
+            ) : null}
+          </div>
+          {cardsList.length ? (
+            <ul className={`list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`}>
+              {renderCardList(cardsList, columnsMode)}
+            </ul>
+          ) : null}
+        </BaseTile>
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
+  const CARDS_COUNT_MAP = [4, 9];
+  const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
+
+  return visibleCardsList.map((item, i) => (
+    <li key={String(i)} className={columnsMode === 2 ? 'basis-[calc(50%-20px)]' : ''}>
+      {item?.parameter ? (
+        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
+      ) : null}
+      {item?.parameterDescription ? (
+        <span className="text-m-light text-secondary-text">{item.parameterDescription}</span>
+      ) : null}
+    </li>
+  ));
+};

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.ui.json

@@ -0,0 +1,9 @@
+{
+  "content": {
+    "items": {
+      "image": {
+        "ui:field": "picture"
+      }
+    }
+  }
+}

package/src/components/{InvestmentGallery/InvestmentGalleryContent.ts → CarouselInvestmentCard/CarouselInvestmentCardContent.ts}

@@ -1,22 +1,35 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
- * @title Количество колонок в списке
+ * @title Карточка галереи инвестиций
+ */
+
+/**
+ * @title Количество колонок
  * @enumNames [
  *   "1 колонка",
  *   "2 колонки",
  *  ]
  */
-export type CardColumnsMode = 'single' | 'double';
+export type CardColumnsMode = 1 | 2;
 
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
+export interface CardsListItem {
+  /** @title Параметр */
+  parameter?: string;
+  /** @title Описание */
+  parameterDescription?: string;
+}
+export interface CarouselInvestmentCardContent extends HeadlineCommonProps {
   /** @title Доп. описание карточки  */
   additionalDescription?: string;
+  /** @default 1 */
+  columnsMode?: CardColumnsMode;
+  /**
+   * @title Список
+   */
+  cardsList?: CardsListItem[];
   /**
    * @default {
    *   "format": "webp",
@@ -32,23 +45,5 @@ export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
    * }
    */
   image?: Picture;
-  columnsMode?: CardColumnsMode;
-  /** @title Описание пункта */
-  cardList?: CardListItem[];
-}
-
-export interface CardListItem {
-  /** @title Параметр */
-  parameter?: string;
-  /** @title Описание */
-  parameterDesccription?: string;
-}
-
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryContent extends TitleProps {
-  /** @title Карточки */
-  cards?: InvestmentGalleryCardTypes[];
   version?: BlockVersion;
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,7 +1,3 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -10,7 +6,11 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { VNode } from '../../model/VNode';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
@@ -23,34 +23,29 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
 
     return (
-      <BlockWrapper className={`font-sans ${className}`} {...rest}>
-        <div
-          className={`relative bg-white border border-main-stroke min-w-[322px] p-8 ${getHitStyle(
-            isHighlighting,
-          )}`}
-        >
-          {isHighlighting ? renderHitIcon() : null}
-          {icon?.src ? <Img image={icon} /> : null}
-          {title ? (
-            <Heading
-              className="text-primary-text text-center pt-2"
-              headingType="h5"
-              title={title}
-            />
-          ) : null}
-          {button ? <Button className="w-full mt-4" {...button} /> : null}
-          {rows?.length ? (
-            <Foldable
-              renderFoldableSection={({ isUnfolded }) => (
-                <div>
-                  {visibleRows}
-                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-                </div>
-              )}
-              renderFoldButton={rows.length > 1 ? renderFoldButton : null}
-            />
-          ) : null}
-        </div>
+      <BlockWrapper
+        className={`font-sans relative bg-white border border-main-stroke min-w-[322px] p-8 
+        ${getHitStyle(isHighlighting)}
+        ${className}`}
+        {...rest}
+      >
+        {isHighlighting ? renderHitIcon() : null}
+        {icon?.src ? <Img image={icon} /> : null}
+        {title ? (
+          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
+        ) : null}
+        {button ? <Button className="w-full mt-4" {...button} /> : null}
+        {rows.length ? (
+          <Foldable
+            renderFoldableSection={({ isUnfolded }) => (
+              <div>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </div>
+            )}
+            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+          />
+        ) : null}
       </BlockWrapper>
     );
   },

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -20,7 +20,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     ...rest
   }) => {
     const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
-    const showToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
+    const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
 
     return (
       <BlockWrapper
@@ -40,7 +40,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           visibleRowLength={visibleRowLength}
         />
         {visibleRowLength
-          ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
+          ? renderShowMoreToggleButton({ isShowAllRow, onClick: handleToggle })
           : null}
       </BlockWrapper>
     );

package/src/components/Gallery/GalleryCardInner.tsx

@@ -19,6 +19,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     items,
     button,
     version,
+    isFullWidth = true,
     isDotted = true,
     align = 'center',
   }) => (
@@ -30,7 +31,12 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
         {items?.length ? renderItems(items, isDotted, version) : null}
         {renderAdditionalDescription(additionalDescription)}
       </div>
-      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+      {button?.text
+        ? renderButton({
+            button,
+            buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
+          })
+        : null}
     </div>
   ),
 );

package/src/components/Gallery/GalleryContent.ts

@@ -52,6 +52,11 @@ export type GalleryCardProps = HeadlineSmallProps & {
    * @default center
    */
   align?: AlignType;
+  /**
+   * @title Кнопка по всей ширине
+   * @default true
+   */
+  isFullWidth?: boolean;
 };
 
 /**

package/src/components/Gallery/GalleryInner.tsx

@@ -38,7 +38,6 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
           </div>
         ) : null}
-
         {button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null}
       </BlockWrapper>
     );

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -30,15 +30,13 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   const activeTopItem = topItems?.find(isTopItemActive(router));
   const subItems = activeTopItem?.items;
   const activeSubItem = findActiveSubItem(router)(subItems);
-
   const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-
-  const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+  const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
 
   return (
     <header className={`${bgColor} ${className}`}>
       <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} />
         <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
           <div className="flex no-scrollbar horizontal-list h-full items-center">
             {subItems?.map((_, i) => (
@@ -55,7 +53,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
       </div>
       {burgerMenuShow ? (
         <HeaderBurger
-          onClick={toggleBurgerMenu}
+          onClick={handleBurgerMenuShow}
           burgerSubMenu={dispositions}
           defaultLocation={defaultLocation}
         >

package/src/components/Header/HeaderSubMenu.tsx

@@ -19,6 +19,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
   const activeSubItem = findActiveSubItem(router)(subItems);
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
   const subItemsListRef = useRef<HTMLDivElement | null>(null);

package/src/components/ImgBlock/ImgBlock.example.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 400,
+        "height": 300
+      }
+    }
+  }
+}

package/src/components/ImgBlock/ImgBlock.fixture.tsx

@@ -0,0 +1,21 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { ImgBlock } from './ImgBlock';
+
+const image: Picture = {
+  src: 'legal-support-business.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 200,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ImgBlock className="col-span-12" image={image} />
+    </div>
+  ),
+};

package/src/components/ImgBlock/ImgBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImgBlockContent } from './ImgBlockContent';
+
+interface ImgBlockProps extends ImgBlockContent, UniBlockProps {}
+
+export const ImgBlock = JSX<ImgBlockProps>((props) => {
+  const { className, image, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Img image={image} />
+    </BlockWrapper>
+  );
+});

package/src/components/ImgBlock/ImgBlock.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "image": {
+      "ui:field": "picture"
+    }
+  }
+}