@redneckz/wildless-cms-uni-blocks 0.5.5 → 0.5.7

package/mobile/src/components/Gallery/GalleryContent.ts

@@ -2,6 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Элемент списка
@@ -16,19 +17,19 @@ export interface GalleryItemProps {
 /**
  * @title Карточка
  */
-export interface GalleryCardProps {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type GalleryCardProps = HeadlineCommonProps & {
   /**
-   * @default
-   * {
-   *  format: "webp",
-   *  size: {
-   *    width: 140,
-   *    height: 140
-   *   }
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 140
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 84,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
    * }
    */
   image?: Picture;
@@ -42,16 +43,12 @@ export interface GalleryCardProps {
   /** @title Список */
   items?: GalleryItemProps[];
   version?: BlockVersion;
-}
+};
 
 /**
  * @title Галерея
  */
-export interface GalleryContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type GalleryContent = HeadlineCommonProps & {
   /**
    * @title Карточки
    * @minItems 3
@@ -59,4 +56,4 @@ export interface GalleryContent {
   cards?: GalleryCardProps[];
   /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
   orientation?: ListOrientation; //TODO: for mobile
-}
+};

package/mobile/src/components/GracePeriod/GracePeriodContent.ts

@@ -1,24 +1,23 @@
-import type { TitleProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 
-interface Month {
+export interface Month {
   /** @title Название месяца */
   text?: string;
   /**
    * @title Изображение календарного месяца
-   * @default
-   * {
-   *  format: "webp",
-   *  size: {
-   *    width: 210,
-   *    height: 190
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 210
+   *       "height": 190
    *   }
    * }
    */
   image?: Picture;
 }
 
-interface CalendarItem {
+export interface CalendarItem {
   /** @title Месяц */
   month?: Month[];
   /** @title Основной текст */
@@ -30,9 +29,7 @@ interface CalendarItem {
 /**
  * @title Льготный период
  */
-export interface GracePeriodContent extends TitleProps {
-  /** @title Описание */
-  description?: string;
+export type GracePeriodContent = HeadlineCommonProps & {
   /** @title Календарь */
   calendar?: CalendarItem[];
-}
+};

package/mobile/src/components/Header/Header.fallback.ts

@@ -0,0 +1,14 @@
+import { readFile } from 'fs/promises';
+import { projectSettings } from '../../ProjectSettings';
+import type { FallbackMap } from '../../types/Fallback';
+
+export const fallback = (): FallbackMap => ({
+  [`/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`]: async () => {
+    const data = await readFile(
+      `./content/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`,
+      'utf-8',
+    );
+
+    return JSON.parse(data);
+  },
+});

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

@@ -6,6 +6,7 @@ import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
+import type { Fallback } from '../../types/Fallback';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
 import { getAccordionItems } from '../../utils/getAccordionItems';
@@ -17,9 +18,10 @@ import { HeaderTop } from './HeaderTop';
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems }) => {
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, page }) => {
     const router = context.useRouter();
-    const sitemap = useSitemap();
+    const fallback: Fallback | undefined = page?.fallback;
+    const sitemap = useSitemap(fallback);
     const dispositions = sitemap?.dispositions;
     const { handlerDecorator } = context;
 

package/mobile/src/components/Header/HeaderContent.ts

@@ -1,14 +1,12 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
+import type { IconProps, Picture } from '../../model/Picture';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { Picture } from '../../model/Picture';
 
 /**
  * @title Пункт подменю
  */
-export interface SubMenuItem extends LinkProps {
-  icon?: Picture;
-}
+export type SubMenuItem = LinkProps & IconProps;
 
 /**
  * @title Ссылка дополнительного меню
@@ -19,35 +17,29 @@ export interface DispositionItem extends LinkProps {
   icon?: Picture;
 }
 
+/**
+ * @title Логотип
+ */
+export interface Logo {
+  /** @title Иконка логотипа */
+  image?: Picture;
+  /** @title Текст логотипа */
+  title?: string;
+}
+
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent extends SitemapProps {
-  /** @title Логотип */
-  logo?: {
-    /** @title Иконка логотипа */
-    image?: Picture;
-    /**
-     * @title Текст логотипа
-     */
-    title?: string;
-  };
+  logo?: Logo;
   /**
    * @title Город по-умолчанию
    * @default Москва
    */
   defaultLocation?: string;
-  /**
-   * @title Показывать подменю
-   * @hidden
-   * @default true
-   */
+  /** @hidden */
   showSubMenu?: boolean;
-  /**
-   * @title Фон элемента
-   * @hidden
-   * @default white
-   */
+  /** @hidden */
   bgColor?: BgColorVersion;
 }

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

@@ -1,16 +1,16 @@
-import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 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';
 
 /**
  * @title Заголовок
  */
-export type HeadlineContent = HeadlineProps &
-  ImageContent & {
-    align?: AlignType;
-    bgColorHeadline?: BlockVersionWithTransparent;
-    /** @hidden */
-    as?: HeadingTagType;
-  };
+export type HeadlineContent = HeadlineProps & {
+  image?: Picture;
+  align?: AlignType;
+  bgColorHeadline?: BlockVersionWithTransparent;
+  /** @hidden */
+  as?: HeadingTagType;
+};

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,12 +1,11 @@
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Кнопка выбора программы
  */
-export type CardItem = {
-  /** @title Иконка */
-  icon?: Picture;
+export type CardItem = IconProps & {
   /** @title Страховой взнос */
   fee?: number;
   /** @title Страховая сумма */
@@ -18,21 +17,17 @@ export type CardItem = {
 /**
  * @title Вкладка
  */
-export interface InsuranceAmountBlockTabs {
-  /** @title Заголовок вкладки */
-  title?: string;
+export type InsuranceAmountBlockTab = TitleProps & {
   /** @title Содержимое вкладки */
   cards?: CardItem[];
-}
+};
 
 /**
  * @title Страховые суммы
  */
-export interface InsuranceAmountBlockContent {
-  /** @title Заголовок */
-  title?: string;
+export type InsuranceAmountBlockContent = TitleProps & {
   /** @title Список вкладок */
-  insuranceTabs?: InsuranceAmountBlockTabs[];
+  insuranceTabs?: InsuranceAmountBlockTab[];
   /** @title Кнопка */
   button?: ButtonProps;
-}
+};

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

@@ -6,9 +6,9 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import type { CardItem, InsuranceAmountBlockTabs } from './InsuranceAmountBlockContent';
+import type { CardItem, InsuranceAmountBlockTab } from './InsuranceAmountBlockContent';
 
-export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {
+export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab, UniBlockProps {
   button?: ButtonProps;
 }
 

package/mobile/src/components/MiniGallery/MiniGalleryContent.ts

@@ -1,7 +1,12 @@
-import type { GalleryContent } from '../Gallery/GalleryContent';
+import type { GalleryCardProps, GalleryContent } from '../Gallery/GalleryContent';
 
 /**
  * @title Мини-галерея
- * @minItems 4
  */
-export type MiniGalleryContent = GalleryContent;
+export interface MiniGalleryContent extends GalleryContent {
+  /**
+   * @title Карточки
+   * @minItems 4
+   */
+  cards?: GalleryCardProps[];
+}

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,10 +1,9 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { Picture } from '../../model/Picture';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
  * @title Мобильное приложение
@@ -12,12 +11,26 @@ import type { Picture } from '../../model/Picture';
 export type MobileAppTileContent = HeadlineCommonProps &
   HeadingCommonProps &
   ButtonContent &
-  ListContent &
-  ImageContent & {
+  ListContent & {
     // TODO: description для мобильной версии
     /** @title QR-код */
     qr?: Picture;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии
     version?: BlockVersion;
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 600
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 360,
+     *       "format": "webp",
+     *       "alignment": "center"
+     *   }]
+     * }
+     */
+    image?: Picture;
   };

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -30,9 +30,9 @@ const renderListItems = (itemList: OfficeServicesBlockList, i) => (
   <li key={`list_item_${String(i)}`} className="flex mb-5 last:mb-0 list-none">
     {itemList.icon ? (
       <Img
-        className="mr-3 max-w-6 max-h-6"
-        width="24px"
-        height="24px"
+        className="mr-3 min-w-6 min-h-6 w-6 h-6"
+        width="24"
+        height="24"
         asSVG
         image={itemList.icon}
       />

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlockContent.ts

@@ -1,27 +1,12 @@
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
+import type { LabelProps, TitleProps } from '../../model/HeadlineType';
 
-export interface OfficeServicesBlockList {
-  /**
-   *  @title Иконка
-   *  @default {
-   *   "size": {
-   *     "width": 24,
-   *     "height": 24
-   *   },
-   *   "format": "webp"
-   * }
-   */
-  icon?: Picture;
-  /** @title Текст */
-  label?: string;
-}
+export type OfficeServicesBlockList = LabelProps & IconProps;
 
 /**
  * @title Офисные услуги
  */
-export interface OfficeServicesBlockContent {
-  /** @title Заголовок */
-  title?: string;
+export type OfficeServicesBlockContent = TitleProps & {
   /** @title Список услуг */
   servicesList?: OfficeServicesBlockList[];
-}
+};

package/mobile/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,5 +1,6 @@
 import type { ColorPalette } from '../../types';
 import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Элемент списка
@@ -19,10 +20,8 @@ export interface BlockItemCommonProps {
 /**
  * @title Другие продукты
  */
-export interface OtherProductsContent {
-  /** @title Заголовок */
-  title?: string;
+export type OtherProductsContent = TitleProps & {
   /** @title Список */
   blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;
-}
+};

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

@@ -28,7 +28,7 @@ export const PictureText = JSX<PictureTextProps>(
   }) => {
     return (
       <BlockWrapper
-        className={`relative font-sans py-12 px-28 ${VersionStyleMap[version]} ${className}`}
+        className={`relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`}
         context={context}
         {...rest}
       >

package/mobile/src/components/PictureText/PictureTextContent.ts

@@ -1,13 +1,27 @@
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-export type TitleWithImageContent = HeadlineCommonProps & ImageContent;
+import type { Picture } from '../../model/Picture';
+import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends BenefitsProps, TitleWithImageContent {
+export interface PictureTextContent extends BenefitsProps, HeadlineCommonProps {
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 400
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 240,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
+   * }
+   */
+  image?: Picture;
   /**
    * @title Картинка справа/текст слева
    * @default false
@@ -17,4 +31,5 @@ export interface PictureTextContent extends BenefitsProps, TitleWithImageContent
   monthLimit?: number;
   /** @title Страховая сумма */
   sum?: number;
+  version?: BlockVersion;
 }

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,24 +1,27 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent, BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { HeadlineProps } from '../../model/HeadlineType';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { Picture } from '../../model/Picture';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
   ButtonContent & {
     /**
-     *  @title Иконка
-     *  @default
-     * {
+     * @default {
+     *   "format": "webp",
      *   "size": {
-     *     "width": 608,
-     *     "height": 299
+     *       "width": 600
      *   },
-     *   "format": "webp"
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 360,
+     *       "format": "webp",
+     *       "alignment": "northeast"
+     *   }]
      * }
      */
     image?: Picture;

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

@@ -5,7 +5,7 @@ import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import type { Picture } from '../../model/Picture';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import { VersionStyleMap } from '../../model/BlockVersion';
@@ -29,9 +29,8 @@ export const ProductTile = JSX<ProductTileProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`overflow-hidden font-sans p-9 box-border relative justify-between grid ${className} ${
-          VersionStyleMap[version]
-        } ${getTileRightPadding(className)} ${getTileMinHeight(className)}`}
+        className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
+          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`}
         {...rest}
       >
         <Headline
@@ -44,8 +43,10 @@ export const ProductTile = JSX<ProductTileProps>(
           bgColorHeadline={version}
           align="left"
         />
-        {renderBenefits(benefits, version)}
-        {additionalDescription ? renderAdditionalDescription(additionalDescription, version) : null}
+        {renderBenefits(benefits, version, image)}
+        {additionalDescription
+          ? renderAdditionalDescription(additionalDescription, image, version)
+          : null}
         {buttons?.length ? (
           <ButtonSection
             context={context}
@@ -59,13 +60,14 @@ export const ProductTile = JSX<ProductTileProps>(
   },
 );
 
-// picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-const BENEFITS_WIDTH = 'max-w-[calc(100%-186px)]';
+function renderBenefits(benefits: TextBenefit[], version: BlockVersion, image?: Picture) {
+  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+  const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
 
-function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div
-      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${BENEFITS_WIDTH}`}
+      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline 
+        ${BENEFITS_WIDTH}`}
     >
       {benefits.length ? benefits.map(renderBenefit(version)) : null}
     </div>
@@ -92,14 +94,21 @@ function renderBenefit(version: BlockVersion = 'primary') {
   };
 }
 
-function renderAdditionalDescription(additionalDescription: string, version = 'primary') {
+function renderAdditionalDescription(
+  additionalDescription: string,
+  image?: Picture,
+  version: BlockVersion = 'primary',
+) {
   const descStyleMap: Record<BlockVersion, string> = {
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
 
+  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+  const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+
   return (
-    <div className={`text-m-light mt-2.5 z-10 ${descStyleMap[version]}`}>
+    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH} ${descStyleMap[version]}`}>
       {additionalDescription}
     </div>
   );

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

@@ -1,21 +1,30 @@
 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 { HeadlineProps } from '../../model/HeadlineType';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
-export interface TextBenefit {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type TextBenefit = DescriptionProps & LabelProps;
 
 /**
  * @title Продуктовая плитка
  */
 export type ProductTileContent = HeadlineProps &
-  ButtonContent &
-  ImageContent & {
+  ButtonContent & {
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 320
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 192,
+     *       "format": "webp",
+     *       "alignment": "southeast"
+     *   }]
+     * }
+     */
+    image?: Picture;
     version?: BlockVersion;
     /**
      * @title Преимущества