@redneckz/wildless-cms-uni-blocks 0.8.16 → 0.8.18

package/src/components/Footer/MediaButton.tsx

@@ -1,45 +1,45 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { style } from '../../utils/style';
-import type { Picture } from '../../model/Picture';
 import type { IconVersion } from '../../model/IconVersion';
+import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
 
 const ICONS_MAP: Array<{
   origins: string[];
-  icon: Picture;
+  iconMapped: Picture;
   label: string;
 }> = [
   {
     origins: ['t.me', 'telegram.org'],
-    icon: { icon: 'TelegramIcon' },
+    iconMapped: { icon: 'TelegramIcon' },
     label: 'Телеграм',
   },
   {
     origins: ['vk.com'],
-    icon: { icon: 'VKIcon' },
+    iconMapped: { icon: 'VKIcon' },
     label: 'ВКонтакте',
   },
   {
     origins: ['ok.ru'],
-    icon: { icon: 'OkIcon' },
+    iconMapped: { icon: 'OkIcon' },
     label: 'Одноклассники',
   },
   {
     origins: ['apps.apple.com'],
-    icon: { icon: 'AppleIcon' },
+    iconMapped: { icon: 'AppleIcon' },
     label: 'App Store',
   },
   {
     origins: ['play.google.com'],
-    icon: { icon: 'PlayMarketIcon' },
+    iconMapped: { icon: 'PlayMarketIcon' },
     label: 'Google Play',
   },
   {
     origins: ['youtube.com'],
-    icon: { icon: 'YoutubeIcon' },
+    iconMapped: { icon: 'YoutubeIcon' },
     label: 'Youtube',
   },
 ];
@@ -57,12 +57,17 @@ const buttonSizeStyles = {
 };
 
 export const MediaButton = JSX<MediaButtonProps>(
-  ({ iconVersion = 'color', buttonSize = 'default', rounded = false, ...rest }) => {
+  ({ iconVersion = 'color', buttonSize = 'default', rounded = false, icon, ...rest }) => {
     const { href, version } = rest;
 
-    const { icon, label } =
+    const { iconMapped, label } =
       ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-    const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
+
+    const iconCustom = icon ?? iconMapped;
+
+    const iconWithVersion = iconCustom
+      ? { ...getIconWithVersion(iconCustom), iconVersion }
+      : undefined;
 
     return (
       <Button

package/src/components/Header/Header.fixture.tsx

@@ -2,7 +2,7 @@ import '../../setup-fixture';
 import { Header } from './Header';
 
 export default {
-  default: <Header chat="personal" />,
-  transparent: <Header bgColor="transparent" chat="personal" />,
-  'no submenu': <Header showSubMenu={false} chat="personal" />,
+  default: <Header />,
+  transparent: <Header bgColor="transparent" />,
+  'no submenu': <Header showSubMenu={false} />,
 };

package/src/components/Header/Header.tsx

@@ -28,7 +28,6 @@ export const Header = JSX<HeaderProps>(
     className,
     showSubMenu = true,
     version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
-    chat,
     ...rest
   }) => {
     const router = useRouter();
@@ -64,7 +63,6 @@ export const Header = JSX<HeaderProps>(
               foreignOffices={foreignOffices}
               defaultLocation={defaultLocation}
               officesLink={officesLink}
-              chat={chat}
             />
           </div>
           <div

package/src/components/Header/HeaderChatBotButton.tsx

@@ -2,16 +2,13 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '../../hooks/useBool';
 import type { IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
-import type { ChatBot as ChatBotWithEmptyOption } from './HeaderContent';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 import { useChatBot } from './useChatBot';
 
-export type ChatBot = Exclude<ChatBotWithEmptyOption, ''>;
-
 interface HeaderChatBotButtonProps {
   className?: string;
   iconVersion?: IconVersion;
-  chat?: ChatBot;
+  chat?: string;
   onClick?: () => void;
 }
 

package/src/components/Header/HeaderContent.ts

@@ -7,12 +7,6 @@ import type { IconProps, Picture } from '../../model/Picture';
  */
 export type SubMenuItem = LinkProps & IconProps;
 
-/**
- * @title Чат-бот
- * @enumNames ["", "Для физических лиц", "Для юридических лиц"]
- */
-export type ChatBot = '' | 'personal' | 'business';
-
 /**
  * @title Ссылка дополнительного меню
  * @required ["text", "href"]
@@ -40,5 +34,4 @@ export interface HeaderContent {
   showSubMenu?: boolean;
   /** @hidden */
   bgColor?: BgColorVersion;
-  chat?: ChatBot;
 }

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -8,14 +8,13 @@ import { Location } from '../../ui-kit/Location/Location';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
-import type { ChatBot } from './HeaderContent';
+import { projectSettings } from '../../ProjectSettings';
 
 interface HeaderSecondaryMenuContent {
   version?: BlockVersion;
   defaultLocation?: string;
   officesLink?: string;
   foreignOffices?: ForeignOffice[];
-  chat?: ChatBot;
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
@@ -23,7 +22,7 @@ export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
 }
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices, chat }) => {
+  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
     const [isShowLocationModal, { setTrue: showLocationModal, setFalse: hideLocationModal }] =
       useBool();
 
@@ -43,8 +42,12 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
         {officesLink ? (
           <TopItem className="mr-7" flat={true} href={officesLink} text="Офисы и банкоматы" />
         ) : null}
-        {chat ? (
-          <HeaderChatBotButton className="mr-5" iconVersion={iconVersion} chat={chat} />
+        {projectSettings.CHAT_BOT ? (
+          <HeaderChatBotButton
+            className="mr-5"
+            iconVersion={iconVersion}
+            chat={projectSettings.CHAT_BOT}
+          />
         ) : null}
         {isShowLocationModal ? (
           <Location

package/src/components/Header/useChatBot.ts

@@ -1,15 +1,14 @@
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useExternalNS } from '../../hooks/useExternalNS';
-import { ChatBot } from './HeaderChatBotButton';
 
 const CHATBOT_NAMESPACE = 'chatbot';
 
-const CHATBOT_URL: Record<ChatBot, string> = {
+const CHATBOT_URL: Record<string, string> = {
   personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
   business: '', //TODO: add url business chat
 };
 
-export const useChatBot = (chat: ChatBot) => {
+export const useChatBot = (chat: string) => {
   useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
 
   return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -47,7 +47,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             <BaseTile buttons={renderButtonsSection(buttons)}>
               {benefitsCount ? (
                 <div className={benefitsContainerStyles}>
-                  {benefits.map(renderBenefit(version, benefitsVersion))}
+                  {benefits?.map(renderBenefit(version, benefitsVersion))}
                 </div>
               ) : null}
               {__html ? (

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -2,19 +2,19 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import type { BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
 
 export function renderBackwardButton(
   button: BackwardButtonProps,
   version: ButtonVersion,
   className: string,
 ) {
-  const { text, href, target, onClick } = button;
+  const { text, href, target } = button;
   const iconVersion = version === 'primary' ? 'white' : 'black';
   const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
 
-  // TODO Move click handler to Button
   return (
-    <div className={`flex items-center cursor-pointer ${className}`} onClick={onClick}>
+    <div className={style('flex items-center', className)}>
       <Button
         version={version}
         rounded
@@ -29,7 +29,9 @@ export function renderBackwardButton(
           asSVG
         />
       </Button>
-      {text ? <span className="text-m">{text}</span> : null}
+      {text ? (
+        <Button version="link" text={text} href={href} target={target} ariaLabel={text} />
+      ) : null}
     </div>
   );
 }

package/src/components/ProductGallery/ProductGallery.example.json

@@ -15,7 +15,6 @@
               "height": 299
             }
           },
-          "version": "primary",
           "description": "Описание",
           "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
           "benefits": [
@@ -50,7 +49,6 @@
               "height": 299
             }
           },
-          "version": "primary",
           "description": "Описание",
           "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
           "benefits": [
@@ -71,6 +69,7 @@
           ]
         }
       }
-    ]
+    ],
+    "version": "primary"
   }
 }

package/src/components/ProductGallery/ProductGallery.tsx

@@ -61,7 +61,7 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
     >
       <div className="flex grow">
         <ProductBlockInner
-          className="pl-12 z-10 text-secondary-text group-data-secondary:text-white"
+          className="pl-12 z-10 group-data-secondary:text-white"
           textBlockClassName="mb-[154px]"
           headlineVersion="XXL"
           {...block}

package/src/components/TariffsTable/TariffsTable.example.json

@@ -35,6 +35,7 @@
             {
               "tableCellType": "List",
               "isDotted": true,
+              "listItemSize": "M",
               "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
             },
             {
@@ -45,6 +46,7 @@
             {
               "tableCellType": "List",
               "isDotted": false,
+              "listItemSize": "M",
               "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
             }
           ],
@@ -56,6 +58,7 @@
             {
               "tableCellType": "List",
               "isDotted": true,
+              "listItemSize": "M",
               "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
             }
           ],

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -80,6 +80,7 @@ export type LabelDescriptionCellDef = LabelDescriptionCell & {
 
 /**
  * @title Список
+ * @default { "listItemSize": "M", "isDotted": true  }
  */
 export type ListBlockDef = ListProps & {
   /** @default List */

package/src/components/VerticalLayout/VerticalLayout.example.json

@@ -3,7 +3,7 @@
     "version": "primary",
     "isPadding": false,
     "isInnerPadding": true,
-    "align": "left",
+    "align": "stretch",
     "gap": ""
   },
   "style": ["col-span-12"],

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import type { AlignType } from '../../model/AlignType';
+import type { AlignTypeWithStretch } from '../../model/AlignType';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
@@ -9,7 +9,8 @@ import type { VerticalLayoutContent } from './VerticalLayoutContent';
 
 export interface VerticalLayoutProps extends VerticalLayoutContent, UniBlockProps {}
 
-const alignStyle: Record<AlignType, string> = {
+const alignStyle: Record<AlignTypeWithStretch, string> = {
+  stretch: 'items-stretch',
   left: 'items-start',
   center: 'items-center',
   right: 'items-end',
@@ -19,7 +20,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
   ({
     className = '',
     gap = '',
-    align,
+    align = 'stretch',
     isPadding = false,
     isInnerPadding = true,
     version = 'transparent',

package/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -1,4 +1,4 @@
-import type { AlignType } from '../../model/AlignType';
+import type { AlignTypeWithStretch } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ColorPalette } from '../../model/ContentPageDef';
 import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
@@ -9,7 +9,7 @@ import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
 export interface VerticalLayoutContent {
   colorPalette?: ColorPalette;
   version?: BlockVersion;
-  align?: AlignType;
+  align?: AlignTypeWithStretch;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */
   isPadding?: boolean;

package/src/components/Video/Video.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "title": "Заголовок блока"
+  }
+}

package/src/components/Video/Video.fixture.tsx

@@ -6,7 +6,7 @@ const VIDEO_CONTENT: VideoContent = {
   previewImg: {
     src: 'video-preview.png',
   },
-  src: 'rshb.webm',
+  url: 'rshb.webm',
 };
 
 export default {

package/src/components/Video/Video.tsx

@@ -1,26 +1,32 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { useRouter } from '../../hooks/useRouter';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { adjustHref } from '../../utils/adjustHref';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { getPaddings } from './getPaddings';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { VideoContent } from './VideoContent';
 
 interface VideoProps extends VideoContent, UniBlockProps {}
 
-export const Video = JSX<VideoProps>(({ className, title, src, previewImg, ...rest }) => (
-  <BlockWrapper className={style(getPaddings(className), className)} {...rest}>
-    <Headline title={title} headlineVersion="M" />
-    {src ? (
-      <video
-        className="m-auto w-full object-fill"
-        preload="metadata"
-        poster={previewImg?.src}
-        style={{ maxHeight: 524 }}
-        controls
-      >
-        <source src={src} />
-      </video>
-    ) : null}
-  </BlockWrapper>
-));
+export const Video = JSX<VideoProps>(({ className, title, url, previewImg, ...rest }) => {
+  const router = useRouter();
+
+  return (
+    <BlockWrapper className={style(getPaddings(className), className)} {...rest}>
+      <Headline title={title} headlineVersion="M" />
+      {url ? (
+        <video
+          className="m-auto w-full object-fill"
+          preload="metadata"
+          poster={adjustHref(router)(previewImg?.src)}
+          style={{ maxHeight: 524 }}
+          controls
+        >
+          <source src={adjustHref(router)(url)} />
+        </video>
+      ) : null}
+    </BlockWrapper>
+  );
+});

package/src/components/Video/Video.ui.json

@@ -6,7 +6,7 @@
   },
   "style": {
     "ui:options": {
-      "minCols": 6
+      "minCols": 3
     }
   }
 }

package/src/components/Video/VideoContent.ts

@@ -1,10 +1,25 @@
 import type { TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 
-/** @title Блок Видео */
+/**
+ * @title Блок Видео
+ * @default {
+ *   "title": "Заголовок блока"
+ * }
+ */
 export interface VideoContent extends TitleProps {
-  /** @title URL */
-  src?: string;
-  /** @title Заставка */
+  /**
+   * @title Ссылка на видео
+   */
+  url?: string;
+  /**
+   * @title Заставка в блоке
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 1004
+   *   },
+   * }
+   */
   previewImg?: Picture;
 }

package/src/hooks/useLink.ts

@@ -1,18 +1,15 @@
 import type { LinkProps } from '../model/LinkProps';
+import type { PreventableEvent } from '../model/PreventableEvent';
 import { adjustHref } from '../utils/adjustHref';
 import { isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
-interface PreventableEvent {
-  preventDefault: () => void;
-}
-
 interface Clickable {
   onClick(ev?: PreventableEvent): void;
 }
 
-export function useLink(isRemote?: boolean) {
+export function useLink(isRemote = false) {
   const router = useRouter();
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({

package/src/model/AlignType.ts

@@ -7,3 +7,14 @@
  * ]
  */
 export type AlignType = 'left' | 'center' | 'right';
+
+/**
+ * @title Выравнивание
+ * @enumNames [
+ *    "Во всю ширину",
+ *    "По левому краю",
+ *    "По центру",
+ *    "По правому краю"
+ * ]
+ */
+export type AlignTypeWithStretch = 'stretch' | 'left' | 'center' | 'right';

package/src/model/PreventableEvent.ts

@@ -0,0 +1,3 @@
+export interface PreventableEvent {
+  preventDefault: () => void;
+}

package/src/services/sitemap/isTopItemActive.ts

@@ -1,11 +1,6 @@
 import type { Router } from '../../hooks/useRouter';
 import { projectSettings } from '../../ProjectSettings';
 import { isHrefActive } from './isHrefActive';
-import { TopMenuItem } from './SitemapProps';
 
-export const isTopItemActive =
-  (router: Router) =>
-  (topItem: TopMenuItem): boolean =>
-    projectSettings.BASE_PATH
-      ? isHrefActive({ pathname: projectSettings.BASE_PATH })(topItem)
-      : topItem.items?.some(isHrefActive(router)) || isHrefActive(router)(topItem);
+export const isTopItemActive = (router: Router) =>
+  isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);

package/src/wlc.json

@@ -2,5 +2,7 @@
   "PROD_BRANCH": "master",
   "FORCED_DRAFT_FLOW": false,
   "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
-  "SITEMAP": "sayt-rshb"
+  "SITEMAP": "sayt-rshb",
+  "CHAT_BOT": "personal",
+  "BASE_PATH": "/natural/"
 }

package/bundle/model/CarouselCardVersion.d.ts

@@ -1 +0,0 @@
-export declare type CarouselCardVersion = 'normal' | 'mini';

package/dist/model/CarouselCardVersion.d.ts

@@ -1 +0,0 @@
-export declare type CarouselCardVersion = 'normal' | 'mini';

package/dist/model/CarouselCardVersion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselCardVersion.js","sourceRoot":"","sources":["../../src/model/CarouselCardVersion.ts"],"names":[],"mappings":""}

package/lib/model/CarouselCardVersion.d.ts

@@ -1 +0,0 @@
-export declare type CarouselCardVersion = 'normal' | 'mini';

package/lib/model/CarouselCardVersion.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=CarouselCardVersion.js.map

package/lib/model/CarouselCardVersion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselCardVersion.js","sourceRoot":"","sources":["../../src/model/CarouselCardVersion.ts"],"names":[],"mappings":""}

package/mobile/bundle/model/CarouselCardVersion.d.ts

@@ -1 +0,0 @@
-export declare type CarouselCardVersion = 'normal' | 'mini';

package/mobile/dist/model/CarouselCardVersion.d.ts

@@ -1 +0,0 @@
-export declare type CarouselCardVersion = 'normal' | 'mini';

package/mobile/dist/model/CarouselCardVersion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselCardVersion.js","sourceRoot":"","sources":["../../src/model/CarouselCardVersion.ts"],"names":[],"mappings":""}

package/mobile/lib/model/CarouselCardVersion.d.ts

@@ -1 +0,0 @@
-export declare type CarouselCardVersion = 'normal' | 'mini';

package/mobile/lib/model/CarouselCardVersion.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=CarouselCardVersion.js.map

package/mobile/lib/model/CarouselCardVersion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CarouselCardVersion.js","sourceRoot":"","sources":["../../src/model/CarouselCardVersion.ts"],"names":[],"mappings":""}

package/mobile/src/model/CarouselCardVersion.ts

@@ -1 +0,0 @@
-export type CarouselCardVersion = 'normal' | 'mini';

package/src/model/CarouselCardVersion.ts

@@ -1 +0,0 @@
-export type CarouselCardVersion = 'normal' | 'mini';