@redneckz/wildless-cms-uni-blocks 0.6.16 → 0.6.18

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

@@ -1,5 +1,5 @@
-import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { List } from '../../ui-kit/List/List';
@@ -15,16 +15,12 @@ export type EmbeddableCellDataType =
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   buttons && buttons?.length ? (
     <div>
-      {buttons.map(({ rounded, appendLeft, ariaLabel, ...buttonProps }, idx) => (
-        <Button
-          className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${appendLeft ? 'w-12 h-12' : ''}`}
-          key={String(idx)}
-          appendLeft={appendLeft}
-          rounded={rounded}
-          ariaLabel={ariaLabel}
-          {...buttonProps}
-        />
-      ))}
+      {buttons.map(({ rounded, icon, ...buttonProps }, idx) =>
+        renderButton({
+          button: { rounded, icon, ...buttonProps },
+          buttonClassName: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`,
+        }),
+      )}
     </div>
   ) : null;
 

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
-import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { TableInnerButton, TableInnerButtonProps } from '../../ui-kit/InnerTable/InnerTableButton';
@@ -21,14 +21,12 @@ export type EmbeddableCellDataType =
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   buttons && buttons?.length ? (
     <div>
-      {buttons.map(({ rounded, ...buttonProps }, idx) => (
-        <Button
-          className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
-          key={String(idx)}
-          rounded={rounded}
-          {...buttonProps}
-        />
-      ))}
+      {buttons.map(({ rounded, ...buttonProps }, idx) =>
+        renderButton({
+          button: { rounded, ...buttonProps },
+          buttonClassName: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`,
+        }),
+      )}
     </div>
   ) : null;
 

package/src/components/TariffsTable/dataFixture.tsx

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import { Img } from '../../ui-kit/Img/Img';
 import type {
   InnerTableBlockDef,
   LabelDescriptionCellDef,
@@ -94,14 +93,14 @@ export const columns: TariffsTableColumn[] = [
           tableCellType: 'Buttons',
           buttons: [
             {
-              appendLeft: <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />,
+              icon: { icon: 'AppleIcon' },
               rounded: true,
               version: 'secondary',
               href: '/',
               target: '_blank',
             },
             {
-              appendLeft: <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />,
+              icon: { icon: 'PlayMarketIcon' },
               rounded: true,
               version: 'secondary',
               href: '/',

package/src/icons/FullScreenIcon.svg

@@ -0,0 +1,8 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 3.33333V2H10.5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 5.99917V5.3125" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 12.6641V13.9974H6.5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 10V10.6867" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 2L9.5 7" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 9L2.5 14" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/IconName.ts

@@ -15,6 +15,7 @@ export const IconsWithoutInversion = new Set([
   'DoneIcon',
   'EarthIcon',
   'EuroIcon',
+  'FullScreenIcon',
   'GlassIcon',
   'InterestGrowthIcon',
   'JCBIcon',
@@ -32,6 +33,7 @@ export const IconsWithoutInversion = new Set([
   'SignDocsIcon',
   'SoundIcon',
   'UnionPayIcon',
+  'UserGeoLocationIcon',
   'VisaIcon',
   'WateringCanIcon',
 ]);
@@ -76,6 +78,7 @@ export enum IconMap {
   EmptyWalletChangeIcon = 'EmptyWalletChangeIcon',
   EmptyWalletIcon = 'EmptyWalletIcon',
   EuroIcon = 'EuroIcon',
+  FullScreenIcon = 'FullScreenIcon',
   GeolocationIcon = 'GeolocationIcon',
   GlassIcon = 'GlassIcon',
   GlobalIcon = 'GlobalIcon',
@@ -119,6 +122,7 @@ export enum IconMap {
   StrongBoxIcon = 'StrongBoxIcon',
   TelegramIcon = 'TelegramIcon',
   UnionPayIcon = 'UnionPayIcon',
+  UserGeoLocationIcon = 'UserGeoLocationIcon',
   UserSquareIcon = 'UserSquareIcon',
   UserTickIcon = 'UserTickIcon',
   VisaIcon = 'VisaIcon',
@@ -170,6 +174,7 @@ export enum IconTitleMap {
   EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом',
   EmptyWalletIcon = 'Пустой кошелёк',
   EuroIcon = 'Евро',
+  FullScreenIcon = 'FullScreenIcon',
   GeolocationIcon = 'Геолокация',
   GlassIcon = 'Зеркало',
   GlobalIcon = 'Глобус',
@@ -213,6 +218,7 @@ export enum IconTitleMap {
   StrongBoxIcon = 'Ящик с замочной скважиной',
   TelegramIcon = 'Лого «Telegram»',
   UnionPayIcon = 'UnionPay',
+  UserGeoLocationIcon = 'UserGeoLocationIcon',
   UserSquareIcon = 'Пользователь в рамке',
   UserTickIcon = 'Пользователь',
   VisaIcon = 'Visa',
@@ -229,7 +235,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
 export type IconName =
@@ -273,6 +279,7 @@ export type IconName =
   | 'EmptyWalletChangeIcon'
   | 'EmptyWalletIcon'
   | 'EuroIcon'
+  | 'FullScreenIcon'
   | 'GeolocationIcon'
   | 'GlassIcon'
   | 'GlobalIcon'
@@ -316,6 +323,7 @@ export type IconName =
   | 'StrongBoxIcon'
   | 'TelegramIcon'
   | 'UnionPayIcon'
+  | 'UserGeoLocationIcon'
   | 'UserSquareIcon'
   | 'UserTickIcon'
   | 'VisaIcon'

package/src/icons/UserGeoLocationIcon.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8314 14.9996H10.5631C9.83003 14.9139 9.24781 14.4212 9.12944 13.7863L8.45478 9.69953C8.39086 9.30917 8.522 8.91367 8.81511 8.61284L10.9081 6.46613C11.1812 6.18446 11.6652 6.14864 11.9891 6.38613C12.313 6.62362 12.3542 7.04448 12.0811 7.32615L9.9881 9.47286L10.6474 13.5729C10.6615 13.6299 10.7184 13.6712 10.7854 13.6729C10.8794 13.6883 10.9726 13.6436 11.0077 13.5663L17.3327 2.55938C17.367 2.50242 17.3568 2.43287 17.3071 2.38521C17.2575 2.33755 17.1789 2.32191 17.1103 2.34605L3.77052 6.73947C3.68052 6.76366 3.62065 6.83764 3.62485 6.91947C3.62336 6.98384 3.67498 7.03995 3.74752 7.05281L6.53815 7.61282C6.8052 7.66641 7.01909 7.83982 7.09924 8.06773C7.1794 8.29564 7.11364 8.54343 6.92674 8.71775C6.73985 8.89207 6.4602 8.96644 6.19315 8.91285L3.35653 8.3395C2.63532 8.17249 2.12473 7.61477 2.09921 6.96614C2.0674 6.31238 2.52658 5.71612 3.23386 5.49278L16.5737 1.09935C17.234 0.878256 17.9827 1.03374 18.4569 1.49044C18.9311 1.94713 19.0328 2.61066 18.7126 3.1594L12.4107 14.173C12.1119 14.6905 11.4972 15.0123 10.8314 14.9996Z" fill="#1C1C1C" stroke="#1C1C1C" stroke-width="0.3"/>
+</svg>

package/src/ui-kit/BlockWrapper.tsx

@@ -16,6 +16,10 @@ const THRESHOLD_ARRAY_LENGTH = 18;
 const THRESHOLD_ARRAY_START_VALUE =
   (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
 
+const OBSERVER_OPTIONS = {
+  threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
+};
+
 export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ anchor, className, children, tag = 'section', labels }) => {
     const Tag: any = tag;
@@ -60,9 +64,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         tag={tag}
         className={className}
         observerCallback={observerCallback}
-        observerOptions={{
-          threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
-        }}
+        observerOptions={OBSERVER_OPTIONS}
         anchor={anchor}
       >
         {children}

package/src/ui-kit/Button/ButtonProps.ts

@@ -1,6 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 
 /**
@@ -29,6 +29,10 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
+  /** @title Иконка слева */
+  icon?: Picture;
+  /** @title Иконка справа */
+  iconRight?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */

package/src/ui-kit/Button/ButtonSection.tsx

@@ -1,16 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { HandlerDecorator, Router } from '../../components/ContentPage/ContentPageContext';
 import { useLink } from '../../hooks/useLink';
+import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 
 export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
 
-interface ButtonSectionItemProps {
+interface RenderButtonProps {
   button: ButtonWithIconProps;
-  router: Router;
-  handlerDecorator?: HandlerDecorator;
+  buttonClassName?: string;
+  index?: number;
+}
+
+interface RenderButtonIconProps {
+  icon?: Picture;
+  iconVersion?: IconVersion;
 }
 
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
@@ -19,20 +26,38 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 
   return buttons && buttons?.length ? (
     <div className={className}>
-      {buttons.map((button, index) => (
-        <ButtonSectionItem
-          button={button}
-          handlerDecorator={handlerDecorator}
-          key={String(index)}
-          router={router}
-        />
-      ))}
+      {buttons.map((button, index) =>
+        renderButton({ button: useLink({ router, handlerDecorator }, button), index }),
+      )}
     </div>
   ) : null;
 });
 
-const ButtonSectionItem = JSX<ButtonSectionItemProps>(({ router, handlerDecorator, button }) => {
-  const buttonProps = useLink({ router, handlerDecorator }, button);
+export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
+  const { icon, iconRight, version, ...rest } = button;
 
-  return <Button {...button} {...buttonProps} />;
-});
+  const iconVersion = version === 'secondary' ? 'normal' : 'white';
+
+  const leftIcon = renderButtonIcon({ icon, iconVersion });
+  const rightIcon = renderButtonIcon({ icon: iconRight, iconVersion });
+
+  return (
+    <Button
+      className={buttonClassName}
+      appendLeft={leftIcon}
+      appendRight={rightIcon}
+      version={version}
+      key={index ? String(index) : ''}
+      {...rest}
+    />
+  );
+}
+
+const renderButtonIcon = ({ icon, iconVersion }: RenderButtonIconProps) => {
+  if (!icon?.icon && !icon?.src) {
+    return null;
+  }
+  const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
+
+  return <Img image={{ ...icon, iconVersion: iconVersion }} width={iconWidth} height="24" asSVG />;
+};

package/src/ui-kit/IntersectionObserverTag.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import type { VNode } from '../model/VNode';
 
 interface IntersectionObserverTagProps {
@@ -20,29 +20,25 @@ export const IntersectionObserverTag = JSX<IntersectionObserverTagProps>((props)
     anchor = null,
     children,
   } = props;
+  const tagRef = useRef<HTMLElement | null>(null);
 
-  const intersectionObserver = useRef<IntersectionObserver | null>(null);
+  useEffect(() => {
+    if (!tagRef.current) {
+      return undefined;
+    }
 
-  const ref = useCallback(
-    (element: HTMLElement | null) => {
-      if (!element) {
-        return;
-      }
+    const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
+    intersectionObserver.observe(tagRef.current);
 
-      if (intersectionObserver.current) {
-        intersectionObserver.current.disconnect();
-      }
-
-      intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
-      intersectionObserver.current.observe(element);
-    },
-    [observerCallback, observerOptions],
-  );
+    return () => {
+      intersectionObserver.disconnect();
+    };
+  }, [observerCallback, observerOptions]);
 
   const Tag = tag as any;
 
   return (
-    <Tag ref={ref} className={className} id={anchor}>
+    <Tag ref={tagRef} className={className} id={anchor}>
       {children}
     </Tag>
   );

package/src/ui-kit/YandexMap/YandexMap.tsx

@@ -0,0 +1,128 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import ymaps from 'yandex-maps';
+import { renderClusterer } from './renderClusterer';
+import { renderOpenMap } from './renderOpenMap';
+import { renderSearchField } from './renderSearchField';
+import { renderUserGeolocation } from './renderUserGeolocation';
+import { useYandexMaps } from './useYandexMaps';
+import { Icon } from '../Icon/Icon';
+import { ZoomButton } from './ZoomButton';
+import { MockPoints, mockPoints } from './mockPoints';
+
+interface YandexMapProps {
+  points: number[][];
+  className?: string;
+  zoom?: number;
+  showSearchField?: boolean;
+}
+
+const FULLSCREEN_STYLES = {
+  border: 'border border-transparent rounded-md ',
+  position: 'absolute flex items-center justify-center',
+  size: 'w-12 h-12',
+  focus: 'focus:border-primary-focus focus:border',
+  font: 'text-center font-sans',
+  active: 'active:bg-primary-active',
+  hover: 'hover:bg-primary-hover',
+  other: 'select-none cursor-pointer',
+};
+
+// TODO: Поле для поиска: невыяснено среди каких данных делать поиск (искать в имени офиса, в адресе, метро и т.д.).
+//       Сейчас реализован поиск среди тестовых данных
+// TODO: Также выяснить что делать когда ничего не найдено
+// TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
+export const YandexMap = JSX<YandexMapProps>(
+  ({ points, className = '', zoom = 5, showSearchField = false }) => {
+    const map = useRef<ymaps.Map | null>(null);
+
+    const yandexMaps = useYandexMaps();
+
+    const [isFullScreen, setIsFullScreen] = useState();
+    const [pointsToRender, setPointsToRender] = useState<number[][]>(normalizePoints(mockPoints));
+
+    const pointsCenter = getCenterPoint(points);
+
+    useEffect(() => {
+      if (!map?.current) {
+        yandexMaps?.ready(() => {
+          map.current = new yandexMaps.Map('map', {
+            center: pointsCenter,
+            zoom,
+            controls: [],
+            suppressMapOpenBlock: true,
+          });
+          renderClusterer(yandexMaps, map.current, pointsToRender);
+        });
+      }
+    }, [yandexMaps, map, pointsToRender]);
+
+    useEffect(() => {
+      if (map.current && pointsToRender && yandexMaps) {
+        const newPoints = pointsToRender.length < 1 ? normalizePoints(mockPoints) : pointsToRender;
+        renderClusterer(yandexMaps, map.current, newPoints);
+      }
+    }, [map, pointsToRender, yandexMaps]);
+
+    if (!yandexMaps) {
+      return null;
+    }
+
+    const toggleFullscreen = () => {
+      const container = map.current.container;
+      if (!isFullScreen) {
+        container.enterFullscreen();
+      } else {
+        container.exitFullscreen();
+      }
+      setIsFullScreen(container.isFullscreen());
+    };
+
+    const zIndex = isFullScreen ? 'z-[100000]' : 'z-10';
+
+    const updatePointsToRender = (newPoints: MockPoints | null) => {
+      if (newPoints) {
+        const normalizedPoints = normalizePoints(newPoints);
+        setPointsToRender(normalizedPoints);
+      }
+    };
+
+    return (
+      <div id="map" className={`${isFullScreen ? '' : 'relative'} w-full ${className}`}>
+        <div className={`absolute flex left-2 top-4 w-[50%] ${zIndex}`}>
+          {showSearchField
+            ? renderSearchField(mockPoints, yandexMaps, updatePointsToRender)
+            : renderOpenMap(pointsCenter)}
+        </div>
+        <div
+          className={`${Object.values(FULLSCREEN_STYLES).join(
+            ' ',
+          )} ${zIndex} right-2 top-4 bg-white`}
+          onClick={toggleFullscreen}
+        >
+          <Icon name="FullScreenIcon" width="16" height="16" />
+        </div>
+        <div
+          className={`absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md ${zIndex}`}
+        >
+          <ZoomButton yandexMaps={map} />
+          <ZoomButton yandexMaps={map} direction="out" />
+        </div>
+        {renderUserGeolocation(map.current, yandexMaps, `right-2 top-80 ${zIndex}`)}
+      </div>
+    );
+  },
+);
+
+const getCenterPoint = (points: number[][]) => [
+  getArraySumAndAverage(mapByIndex(points, 0)),
+  getArraySumAndAverage(mapByIndex(points, 1)),
+];
+
+const mapByIndex = (arr: number[][], index: number) => arr.map((a) => a[index]);
+
+const getArraySumAndAverage = (arr: number[][]) => arr.reduce((a, b) => a + b) / arr.length;
+
+const normalizePoints = (points: number[][]) => (points ? points.map((_) => _.coords) : null);

package/src/ui-kit/YandexMap/ZoomButton.tsx

@@ -0,0 +1,38 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { JSX } from '@redneckz/uni-jsx';
+import ymaps from 'yandex-maps';
+import { Icon } from '../Icon/Icon';
+
+interface ZoomButtonProps {
+  yandexMaps: ymaps.Map;
+  direction?: string;
+}
+
+const styles = {
+  focus: 'focus:border-primary-focus focus:border',
+  hover: 'hover:bg-primary-hover',
+  active: 'active:bg-primary-active',
+  border: 'border-b border-b-2 border-gray last:border-0',
+  position: 'relative flex items-center justify-center',
+  font: 'text-center font-sans text-l',
+};
+
+// TODO: Добавить метод определения центральной точки
+export const ZoomButton = JSX<ZoomButtonProps>(({ yandexMaps, direction = 'in' }) => {
+  const iconName = direction === 'in' ? 'PlusIcon' : 'MinusIcon';
+  const changeZoom = () => {
+    const currentZoom = yandexMaps.current.getZoom();
+    const newZoom = direction === 'in' ? currentZoom + 1 : currentZoom - 1;
+    yandexMaps.current.setZoom(newZoom, { checkZoomRange: true });
+  };
+
+  return (
+    <div
+      onClick={changeZoom}
+      className={`${Object.values(styles).join(' ')} bg-white select-none cursor-pointer w-12 h-12`}
+    >
+      <Icon name={iconName} width="20" height="16" />
+    </div>
+  );
+});

package/src/ui-kit/YandexMap/mockPoints.ts

@@ -0,0 +1,30 @@
+export type MockPoints = {
+  coords: number[];
+  text: string;
+};
+
+export const mockPoints: MockPoints[] = [
+  { coords: [55.77, 37.46], text: 'Трактир' },
+  { coords: [55.66, 37.48], text: 'Трактор' },
+  { coords: [55.65, 37.42], text: 'Ресторан' },
+  { coords: [55.64, 37.54], text: 'Музей' },
+  { coords: [55.54, 37.52], text: 'Библиотека' },
+  { coords: [55.53, 37.56], text: 'Школа' },
+  { coords: [55.61, 37.61], text: 'Аптека' },
+  { coords: [55.8, 37.58], text: 'Бар' },
+  { coords: [55.71, 37.35], text: 'Институт' },
+  { coords: [55.74, 37.57], text: 'Университет' },
+  { coords: [55.58, 37.69], text: 'Больница' },
+  { coords: [55.57, 37.7], text: 'Цирк' },
+  { coords: [55.55, 37.64], text: 'Магазин' },
+  { coords: [55.5, 37.75], text: 'Булочная' },
+  { coords: [55.81, 37.73], text: 'Полиция' },
+  { coords: [55.73, 37.68], text: 'Салон красоты' },
+  { coords: [55.86, 37.76], text: 'Баня' },
+  { coords: [55.38, 37.69], text: 'Гараж' },
+  { coords: [55.91, 37.5], text: 'Дом' },
+  { coords: [55.62, 37.32], text: 'Прачечная' },
+  { coords: [55.85, 37.41], text: 'Стадион' },
+  { coords: [55.67, 37.24], text: 'Вокзал' },
+  { coords: [55.79, 37.41], text: 'Кафе' },
+];

package/src/ui-kit/YandexMap/renderClusterer.ts

@@ -0,0 +1,51 @@
+// TODO: Fix
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import ymaps from 'yandex-maps';
+
+export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points: number[][]) {
+  map.geoObjects.removeAll();
+
+  const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass(
+    '<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>',
+  );
+
+  const clusterer = new yandexMaps.Clusterer({
+    clusterIcons: [
+      {
+        href: 'icons/MapMarkerClusterIcon.svg',
+        size: [78, 84],
+        offset: [-35, -50],
+      },
+    ],
+    clusterIconContentLayout,
+    clusterHideIconOnBalloonOpen: false,
+    geoObjectHideIconOnBalloonOpen: false,
+  } 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 as any);
+
+  // TODO: Fix
+  // @ts-ignore
+  map.setBounds(yandexMaps.util.bounds.fromPoints(points)).then(() => {
+    if (map.getZoom() > 10) {
+      map.setZoom(10);
+    }
+  });
+}

package/src/ui-kit/YandexMap/renderOpenMap.tsx

@@ -0,0 +1,26 @@
+const styles = {
+  focus: 'focus:border-primary-focus focus:border',
+  hover: 'hover:bg-primary-hover',
+  active: 'active:bg-primary-active',
+  border: 'border border-transparent rounded-md',
+  position: 'flex items-center justify-center',
+  font: 'text-center font-sans',
+};
+
+export const renderOpenMap = (pointsCenter: number[]) => {
+  const getYandexMapUrl = () => {
+    return `https://yandex.ru/maps/?ll=${[pointsCenter[1], pointsCenter[0]]}&z=10&l=map`;
+  };
+
+  return (
+    <a
+      className={`select-none cursor-pointer px-9 h-12 bg-white bg-primary-main text-white ${Object.values(
+        styles,
+      ).join(' ')}`}
+      href={getYandexMapUrl()}
+      target="_blank"
+    >
+      Открыть на карте
+    </a>
+  );
+};