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

package/mobile/src/components/Recommendation/RecommendationContent.ts

@@ -1,15 +1,33 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { Picture } from '../../model/Picture';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
-export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
+/**
+ * @title Карточка
+ */
+export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent {
   /**
    * @title Соц сети
    * @minItems 3
    */
   socialMedia?: LinkCommonProps[];
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 290
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 174,
+   *       "format": "webp",
+   *       "alignment": "southeast"
+   *   }]
+   * }
+   */
+  image?: Picture;
 }
 
 /**

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,7 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useScript } from '../../hooks/useScript';
-import { projectSettings } from '../../ProjectSettings';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -19,13 +17,6 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
 
     const regions = useGetRegions();
 
-    const statusScript = useScript(
-      `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`,
-      {
-        removeOnUnmount: true,
-      },
-    );
-
     const toggleShowMap = () => {
       setShowMap(!showMap);
     };
@@ -43,9 +34,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
           />
           {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}
         </div>
-        {statusScript === 'ready' && points.length && showMap ? (
-          <YandexMap points={points} />
-        ) : null}
+        {points.length && showMap ? <YandexMap points={points} /> : null}
       </BlockWrapper>
     );
   },

package/mobile/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,9 +1,11 @@
+import type { Footnote } from '../../model/Footnote';
+import type { TitleProps } from '../../model/HeadlineType';
+
 /**
  * @title Аренда сейфовых ячеек
  */
-export interface SafeDepositRentalContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Сноска */
-  footnote?: string;
-}
+export type SafeDepositRentalContent = Footnote &
+  TitleProps & {
+    /** @title Сноска */
+    footnote?: string;
+  };

package/mobile/src/components/SafeDepositRental/YandexMap.tsx

@@ -1,29 +1,37 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import ymaps from 'yandex-maps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { renderClusterer } from './renderClusterer';
-
-declare let ymaps: any;
+import { useYandexMaps } from './useYandexMaps';
 
 interface YandexMapProps {
   points: number[][];
 }
 
-let Map = null;
-
 export const YandexMap = JSX<YandexMapProps>(({ points }) => {
+  const map = useRef<ymaps.Map | null>(null);
+
+  const yandexMaps = useYandexMaps();
+
   useEffect(() => {
-    ymaps.ready(() => {
-      Map = new ymaps.Map('map', {
+    yandexMaps?.ready(() => {
+      map.current = new yandexMaps.Map('map', {
         center: points[0],
         zoom: 10,
       });
-      renderClusterer(Map, points);
+      renderClusterer(yandexMaps, map.current, points);
     });
-  }, []);
+  }, [yandexMaps]);
+
+  useEffect(() => {
+    if (map.current && points && yandexMaps) {
+      renderClusterer(yandexMaps, map.current, points);
+    }
+  }, [map, points, yandexMaps]);
 
-  if (Map && points) {
-    renderClusterer(Map, points);
+  if (!yandexMaps) {
+    return null;
   }
 
   return (

package/mobile/src/components/SafeDepositRental/renderClusterer.ts

@@ -1,15 +1,16 @@
-declare let ymaps: any;
+// TODO: Fix
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import ymaps from 'yandex-maps';
 
-export function renderClusterer(Map, points) {
-  Map.geoObjects.removeAll();
+export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points: number[][]) {
+  map.geoObjects.removeAll();
 
-  const pointsList = points;
-
-  const clusterIconContentLayout = ymaps.templateLayoutFactory.createClass(
+  const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass(
     '<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>',
   );
 
-  const clusterer = new ymaps.Clusterer({
+  const clusterer = new yandexMaps.Clusterer({
     clusterIcons: [
       {
         href: 'icons/MapMarkerClusterIcon.svg',
@@ -20,26 +21,31 @@ export function renderClusterer(Map, points) {
     clusterIconContentLayout,
     clusterHideIconOnBalloonOpen: false,
     geoObjectHideIconOnBalloonOpen: false,
-  });
-
-  const geoObjects: any = [];
-
-  for (let i = 0, len = pointsList.length; i < len; i++) {
-    geoObjects[i] = new ymaps.Placemark(pointsList[i], null, {
-      iconLayout: 'default#image',
-      iconImageHref: 'icons/MapMarkerSingleIcon.svg',
-      iconImageSize: [78, 84],
-      iconImageOffset: [-35, -50],
-    });
-  }
+  } as ymaps.IClustererOptions);
+
+  const geoObjects = points.map(
+    (point) =>
+      new yandexMaps.Placemark(
+        point,
+        {},
+        {
+          iconLayout: 'default#image',
+          iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+          iconImageSize: [78, 84],
+          iconImageOffset: [-35, -50],
+        },
+      ),
+  );
 
   clusterer.add(geoObjects);
 
-  Map.geoObjects.add(clusterer);
+  map.geoObjects.add(clusterer as any);
 
-  Map.setBounds(ymaps.util.bounds.fromPoints(pointsList)).then(() => {
-    if (Map.getZoom() > 10) {
-      Map.setZoom(10);
+  // TODO: Fix
+  // @ts-ignore
+  map.setBounds(yandexMaps.util.bounds.fromPoints(points)).then(() => {
+    if (map.getZoom() > 10) {
+      map.setZoom(10);
     }
   });
 }

package/mobile/src/components/SafeDepositRental/useYandexMaps.ts

@@ -0,0 +1,13 @@
+import ymaps from 'yandex-maps';
+import { useExternalNS } from '../../hooks/useExternalNS';
+import { projectSettings } from '../../ProjectSettings';
+
+const YMAPS_NAMESPACE = 'ymaps';
+
+export const useYandexMaps = () => {
+  const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`;
+
+  const yandexMaps = useExternalNS<typeof ymaps>(YMAPS_NAMESPACE, url);
+
+  return yandexMaps;
+};

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,40 +1,23 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 
 /**
  * @title Шаг
  */
-export interface Step {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-  /**
-   *  @title Иконка
-   *  @default
-   * {
-   *   "size": {
-   *     "width": 48,
-   *     "height": 48
-   *   },
-   *   "format": "webp"
-   * }
-   */
-  icon?: Picture;
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-}
+export type Step = DescriptionProps &
+  LabelProps &
+  IconProps & {
+    /** @title Кнопка */
+    button?: ButtonWithIconProps;
+  };
 
 /**
  * @title Блок шаги
  */
-export interface StepsBlockContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string; // TODO: mobile content
+export type StepsBlockContent = HeadlineCommonProps & {
   /**
    * @title Линии
    * @default true
@@ -54,4 +37,4 @@ export interface StepsBlockContent {
    */
   size?: SizeVersion; // TODO: mobile content
   version?: BlockVersion;
-}
+};

package/mobile/src/components/Tabs/TabsContent.ts

@@ -1,26 +1,29 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Группа
  */
-export interface GroupTab {
+export type GroupTab = TitleProps & {
+  /** @default group */
   type: 'group';
   /** @title Тег */
   ref?: string;
-  /** @title Название */
-  title?: string;
-}
+};
 
 /**
  * @title Ссылка
  */
 export type LinkTab = LinkProps & {
+  /** @default link */
   type: 'link';
 };
 
 /**
  * @title Таб
- * @default {"type": "group"}
+ * @default {
+ *    "type": "group"
+ * }
  */
 export type Tab = GroupTab | LinkTab;
 

package/mobile/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -7,10 +7,6 @@ import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
 import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
-export interface LabelProps {
-  label?: string;
-}
-
 export type EmbeddableCellDataType =
   | ButtonContent
   | LabelDescriptionCell

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,10 +1,9 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
-import type { DescriptionProps } from '../../model/HeadlineType';
+import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingProps } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 
@@ -18,71 +17,57 @@ export interface TariffsTableCellIndexProps {
 }
 
 /**
- * @title Параметр
+ * @hidden
  */
-export type TariffsTableRowHeader = HeadingProps & {
-  /**
-   * @default { "format": "webp", "size": { "width": 24, "height": 24 } }
-   */
-  icon?: Picture;
+export type Data = {
+  header: TariffsTableRowHeader;
+  data: CellDef[][];
 };
 
 /**
- * @title Ряд
+ * @title Параметр
  */
-export type Data = {
-  header: TariffsTableRowHeader;
-  data: CellDef[][];
+export type TariffsTableRowHeader = HeadingProps & {
+  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
+  icon?: Picture;
 };
 
 /**
  * @title Изображение
- * @default { "image": { "format": "webp", "size": { "width": 24, "height": 24 } } }
  */
-export type ImageCellDef = ImageContent & {
-  /**
-   * @default Img
-   */
+export type ImageCellDef = {
+  /** @default Img */
   tableCellType: 'Img';
+  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
+  image?: Picture;
 };
 
 /**
  * @title Кнопки
  */
 export type ButtonsCellDef = ButtonContent & {
-  /**
-   * @default Buttons
-   */
+  /** @default Buttons */
   tableCellType: 'Buttons';
 };
 
 /**
  * @title Заголовок и описание
  */
-export interface LabelDescriptionCell {
-  /** @title Заголовок */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type LabelDescriptionCell = LabelProps & DescriptionProps;
 
 /**
  * @title Заголовок и описание
  */
 export type LabelDescriptionCellDef = LabelDescriptionCell & {
-  /**
-   * @default LabelDescription
-   */
+  /** @default LabelDescription */
   tableCellType: 'LabelDescription';
 };
 
 /**
  * @title Список
  */
-export type ListBlockDef = ListProps & {
-  /**
-   * @default List
-   */
+export type ListBlockDef = Omit<ListProps, 'listItemSize' | 'version'> & {
+  /** @default List */
   tableCellType: 'List';
 };
 
@@ -90,9 +75,7 @@ export type ListBlockDef = ListProps & {
  * @title Таблица
  */
 export type InnerTableBlockDef = TariffsTableInnerContent & {
-  /**
-   * @default Table
-   */
+  /** @default Table */
   tableCellType: 'Table';
 };
 

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
@@ -33,7 +34,9 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 asSVG
               />
             ) : null}
-            {header?.title}
+            {header?.title ? (
+              <Heading headingType={header?.headingType || 'h6'} as="h6" title={header?.title} />
+            ) : null}
           </div>
         </div>
         {data?.length ? (

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Цвет блока
@@ -15,11 +16,7 @@ export type TextBlockIconVersion = 'none' | 'small' | 'big';
 /**
  * @title Текстовый блок
  */
-export interface TextBlockContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type TextBlockContent = HeadlineCommonProps & {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
@@ -27,4 +24,4 @@ export interface TextBlockContent {
   isDotted?: boolean;
   /** @title Список (моб.) */ // TODO: mobile prop
   items?: string[];
-}
+};

package/mobile/src/components/Tile/TileContent.ts

@@ -1,8 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { ListItemSize } from '../../ui-kit/List/ListProps';
 
@@ -12,8 +12,22 @@ import type { ListItemSize } from '../../ui-kit/List/ListProps';
 export type TileContent = HeadingCommonProps &
   DescriptionProps &
   ListContent &
-  ButtonContent &
-  ImageContent & {
+  ButtonContent & {
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 320
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 192,
+     *       "format": "webp",
+     *       "alignment": "southeast"
+     *   }]
+     * }
+     */
+    image?: Picture;
     /**
      *  @title Буллиты
      *  @default true

package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -31,7 +31,7 @@ exports[`Blocks Bonus should render block "Bonus" without content 1`] = `
 
 exports[`Blocks BonusBenefitsBlock should render block "BonusBenefitsBlock" without content 1`] = `
 <section
-  class="font-sans text-primary-text bg-white p-50 flex flex-col text-center "
+  class="font-sans text-primary-text bg-white p-[50px] flex flex-col text-center "
 >
   <section
     class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
@@ -98,7 +98,7 @@ exports[`Blocks CardTransfer should render block "CardTransfer" without content
       </div>
     </div>
     <button
-      class="inline-block text-center font-sans select-none bg-secondary-dark text-secondary-text rounded-md w-full h-[56px] px-9 mt-6"
+      class="inline-block text-center font-sans select-none bg-main-divider text-main-disabled rounded-md w-full h-[56px] px-9 mt-6"
       disabled=""
       type="submit"
     >
@@ -325,7 +325,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         value=""
       />
       <a
-        class="text-center font-sans select-none border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md invisible peer-focus:visible absolute top-1 right-1"
+        class="text-center font-sans select-none border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md invisible peer-focus:visible absolute top-[3px] right-1"
         role="button"
       >
         <div
@@ -455,7 +455,7 @@ exports[`Blocks GracePeriod should render block "GracePeriod" without content 1`
 
 exports[`Blocks Header should render block "Header" without content 1`] = `
 <header
-  class="pt-6 pb-5 px-20 bg-white "
+  class="pt-6 px-20 bg-white  pb-5"
 >
   <div
     class="container"
@@ -671,16 +671,6 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
 </section>
 `;
 
-exports[`Blocks Navigation should render block "Navigation" without content 1`] = `
-<section
-  class="font-sans text-primary-text flex items-center justify-between "
->
-  <h2
-    class="text-xl font-medium m-0"
-  />
-</section>
-`;
-
 exports[`Blocks OfficeServicesBlock should render block "OfficeServicesBlock" without content 1`] = `
 <section
   class="font-sans bg-white p-8 flex flex-col "
@@ -695,7 +685,7 @@ exports[`Blocks OtherProducts should render block "OtherProducts" without conten
 
 exports[`Blocks PictureText should render block "PictureText" without content 1`] = `
 <section
-  class="relative font-sans py-12 px-28 bg-white text-primary-text "
+  class="relative font-sans py-12 px-24 bg-white text-primary-text "
 >
   <section
     class="font-sans flex flex-col p-[50px] gap-3 bg-white !p-0"
@@ -798,13 +788,15 @@ exports[`Blocks ProductGallery should render block "ProductGallery" without cont
 
 exports[`Blocks ProductTile should render block "ProductTile" without content 1`] = `
 <section
-  class="overflow-hidden font-sans p-9 box-border relative justify-between grid  bg-white text-primary-text pr-[9.4rem] min-h-[360px]"
+  class="overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
+           bg-white text-primary-text pr-[9.4rem]"
 >
   <section
     class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0 !bg-transparent z-10 "
   />
   <div
-    class="z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline max-w-[calc(100%-186px)]"
+    class="z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline 
+        100%"
   />
 </section>
 `;
@@ -941,7 +933,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             >
               <input
                 class="m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus disabled:border-main-stroke disabled:bg-main-divider"
+            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus disabled:border-main-stroke disabled:bg-main-divider"
                 value="26"
               />
               <div
@@ -1040,7 +1032,8 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
                 class="flex items-center relative cursor-pointer"
               >
                 <input
-                  class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                  class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main
+        rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                   name="contractType"
                   type="radio"
                   value="option1"
@@ -1058,7 +1051,8 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               >
                 <input
                   checked=""
-                  class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                  class="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main
+        rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                   name="contractType"
                   type="radio"
                   value="option2"
@@ -1137,10 +1131,10 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             width="290"
           >
             <title>
-              Иконка PackA4Icon
+              Иконка Пачка бумаги А4
             </title>
             <desc>
-              Иконка PackA4Icon
+              Иконка Пачка бумаги А4
             </desc>
             <use
               class="text-primary-main "