@redneckz/wildless-cms-uni-blocks 0.8.27 → 0.8.29

package/src/components/StepsBlock/StepsBlock.example.json

@@ -12,12 +12,13 @@
         "label": "Шаг №1",
         "description": "Описание шага №1",
         "icon": {
+          "format": "webp",
           "icon": "NewDocIcon",
           "size": {
             "width": 48,
             "height": 48
           },
-          "format": "webp"
+          "iconVersion": "normal"
         },
         "button": {
           "text": "Кнопка",
@@ -29,12 +30,13 @@
         "type": "default",
         "label": "Шаг №2",
         "icon": {
+          "format": "webp",
           "icon": "PassSendIcon",
           "size": {
             "width": 48,
             "height": 48
           },
-          "format": "webp"
+          "iconVersion": "normal"
         },
         "button": {
           "text": "Кнопка",
@@ -46,12 +48,13 @@
         "type": "default",
         "description": "Шаг №3 без заголовка",
         "icon": {
+          "format": "webp",
           "icon": "ActualBalanceIcon",
           "size": {
             "width": 48,
             "height": 48
           },
-          "format": "webp"
+          "iconVersion": "normal"
         },
         "button": {
           "text": "Кнопка",
@@ -64,6 +67,7 @@
       "text": "Кнопка",
       "target": "_blank",
       "version": "primary"
-    }
+    },
+    "isDotted": true
   }
 }

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,23 +1,15 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { BulletsProps } from '../../model/Bullets';
+import type { ButtonCommonIconProps } from '../../model/Button';
 import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { RichTextItem } from '../../model/RichTextItem';
 import type { SizeVersion } from '../../model/SizeVersion';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
-type StepCommonProps = IconProps & {
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-  /**
-   * @title Буллиты
-   * @default true
-   */
-  isDotted?: boolean;
-  /** @title Список */
-  items?: string[];
-};
+type StepCommonProps = IconProps & ButtonCommonIconProps & BulletsProps & ListContent;
 
 /**
  * @title Стандартный
@@ -37,24 +29,18 @@ export type Step = DefaultStep | RichTextStep;
 /**
  * @title Блок шаги
  */
-export type StepsBlockContent = UniBlockContent & HeadlineCommonProps & {
-  /**
-   * @title Линии
-   * @default true
-   */
-  showLines?: boolean;
-  /**
-   * @title Шаги
-   * @minItems 2
-   * @maxItems 5
-   */
-  steps?: Step[];
-  stepVersion?: BlockVersion;
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-  /**
-   * @title Размер шагов
-   * @default normal
-   */
-  size?: SizeVersion; // TODO: mobile content
-};
+export type StepsBlockContent = UniBlockContent &
+  HeadlineCommonProps &
+  ButtonCommonIconProps & {
+    /** @title Линии */
+    showLines?: boolean;
+    /**
+     * @title Шаги
+     * @minItems 2
+     * @maxItems 5
+     */
+    steps?: Step[];
+    stepVersion?: BlockVersion;
+    /** @title Размер шагов */
+    size?: SizeVersion; // TODO: mobile content
+  };

package/src/components/Tabs/Tabs.example.json

@@ -17,6 +17,7 @@
         "ref": "tab3",
         "title": "Вкладка 3"
       }
-    ]
+    ],
+    "tabsMode": "wideScreen"
   }
 }

package/src/components/Tabs/TabsContent.ts

@@ -46,9 +46,6 @@ export type TabsContent = UniBlockContent & {
   isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
-  /**
-   * @title Режим вкладок
-   * @default "wideScreen"
-   */
+  /** @title Режим вкладок */
   tabsMode?: TabsMode;
 };

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,9 +1,10 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import type { UniBlockContent, UniBlockProps } from '../../model/JSXBlock';
 import type { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 
@@ -42,19 +43,14 @@ export type Data = {
 /**
  * @title Параметр
  */
-export type TariffsTableRowHeader = TitleProps & {
-  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
-  icon?: Picture;
-};
+export type TariffsTableRowHeader = TitleProps & IconProps;
 
 /**
  * @title Изображение
  */
-export type ImageCellDef = {
+export type ImageCellDef = ImageContent & {
   /** @default Img */
   tableCellType: 'Img';
-  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
-  image?: Picture;
 };
 
 /**
@@ -80,7 +76,6 @@ export type LabelDescriptionCellDef = LabelDescriptionCell & {
 
 /**
  * @title Список
- * @default { "listItemSize": "M", "isDotted": true  }
  */
 export type ListBlockDef = ListProps & {
   /** @default List */
@@ -117,7 +112,8 @@ export interface TariffsTableColumn {
 /**
  * @title Таблица тарифов
  */
-export type TariffsTableContent = TitleProps &
+export type TariffsTableContent = UniBlockContent &
+  TitleProps &
   DescriptionProps & {
     /** @title Колонки */
     tariffsColumns?: TariffsTableColumn[];

package/src/components/TextBlock/TextBlock.fixture.mobile.tsx

@@ -30,31 +30,24 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
         <div className="flex flex-col gap-1.5" data-theme="pc">
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="big" image={image} />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="big" image={image} />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="none" />
           <TextBlock
             description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            blockVersion="primary"
+            version="primary"
           />
-          <TextBlock title="Все карты Россельхозбанка работают" blockVersion="primary" />
+          <TextBlock title="Все карты Россельхозбанка работают" version="primary" />
           <TextBlock
             title="Все карты Россельхозбанка работают"
-            blockVersion="primary"
+            version="primary"
             iconVersion="small"
             items={items}
           />
           <TextBlock
             title="Все карты Россельхозбанка работают"
             description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            blockVersion="secondary"
-            iconVersion="small"
-            items={items}
-          />
-          <TextBlock
-            title="Все карты Россельхозбанка работают"
-            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            blockVersion="secondary-light"
+            version="secondary"
             iconVersion="small"
             items={items}
           />
@@ -69,11 +62,10 @@ export default {
           <TextBlock
             className="flex flex-col"
             {...TEXT_BLOCK}
-            blockVersion="primary"
+            version="primary"
             iconVersion="small"
           />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary" />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary-light" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="secondary" />
         </div>
       </div>
     </div>
@@ -82,9 +74,8 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
         <div className="flex flex-col gap-1.5" data-theme="eo">
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="primary" />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary" />
-          <TextBlock {...TEXT_BLOCK} iconVersion="small" blockVersion="secondary-light" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="primary" />
+          <TextBlock {...TEXT_BLOCK} iconVersion="small" version="secondary" />
         </div>
       </div>
     </div>

package/src/components/TextBlock/TextBlockContent.ts

@@ -1,13 +1,10 @@
+import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
-/**
- * @title Цвет блока
- * @enumNames ["Основная", "Второстепенная", "Второстепенная прозрачная"]
- */
-export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
-
 /**
  * @title Размер иконки
  * @enumNames ["Нет", "Маленькая", "Большая"]
@@ -17,13 +14,11 @@ type TextBlockIconVersion = 'none' | 'small' | 'big';
 /**
  * @title Текстовый блок
  */
-export type TextBlockContent = HeadlineCommonProps &
+export type TextBlockContent = UniBlockContent &
+  HeadlineCommonProps &
   RichTextProps &
-  ImageContent & {
+  ImageContent &
+  ListContent &
+  BulletsProps & {
     iconVersion?: TextBlockIconVersion;
-    blockVersion?: TextBlockVersion;
-    /** @title Буллиты */ // TODO: mobile prop
-    isDotted?: boolean;
-    /** @title Список (моб.) */ // TODO: mobile prop
-    items?: string[];
   };

package/src/components/Tile/Tile.example.json

@@ -7,7 +7,15 @@
       "format": "webp",
       "size": {
         "width": 445
-      }
+      },
+      "sources": [
+        {
+          "media": 1279,
+          "width": 276,
+          "format": "webp",
+          "alignment": "southeast"
+        }
+      ]
     },
     "isDotted": true,
     "listItemSize": "M",

package/src/components/Tile/TileContent.ts

@@ -1,7 +1,8 @@
+import type { BulletsProps } from '../../model/Bullets';
 import type { UniBlockContent } from '../../model/JSXBlock';
-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';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
@@ -15,26 +16,8 @@ export type TileContent = UniBlockContent &
   RichTextProps &
   ListContent &
   ButtonContent &
-  TagsContent & {
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 320
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *	     "width": 192,
-     *       "format": "webp",
-     *       "alignment": "southeast"
-     *   }]
-     * }
-     */
-    image?: Picture;
-    /**
-     *  @title Буллиты
-     *  @default true
-     */
-    isDotted?: boolean;
+  TagsContent &
+  ImageContent &
+  BulletsProps & {
     listItemSize?: ListItemSize;
   };

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

@@ -1,6 +1,7 @@
 {
   "content": {
     "version": "primary",
+    "isTheme": false,
     "isPadding": false,
     "isInnerPadding": true,
     "align": "stretch",

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -202,6 +202,7 @@ export default {
                 align: 'center',
                 bgColorHeadline: 'transparent',
                 headlineVersion: 'M',
+                version: 'primary',
               },
               style: ['col-span-12'],
               type: 'Headline',

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -24,6 +24,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
     isPadding = false,
     isInnerPadding = true,
     version = 'transparent',
+    isTheme = false,
     options,
     ...rest
   }) => {
@@ -39,6 +40,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
           className,
         )}
         version={version}
+        isTheme={isTheme}
         {...rest}
       >
         {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
@@ -47,4 +49,6 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
   },
 );
 
-VerticalLayout.childrenTypes = [];
+VerticalLayout.childrenTypes = {
+  exclude: ['Accordion', 'OtherProducts'],
+};

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

@@ -1,5 +1,11 @@
 {
   "content": {
-    "title": "Заголовок блока"
+    "title": "Заголовок блока",
+    "previewImg": {
+      "format": "webp",
+      "size": {
+        "width": 1004
+      }
+    }
   }
 }

package/src/components/Video/VideoContent.ts

@@ -2,26 +2,13 @@ import type { TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 
-/**
- * @title Блок Видео
- * @default {
- *   "title": "Заголовок блока"
- * }
- */
+/** @title Блок Видео */
 export type VideoContent = UniBlockContent &
   TitleProps & {
     /**
      * @title Ссылка на видео
      */
     url?: string;
-    /**
-     * @title Заставка в блоке
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 1004
-     *   },
-     * }
-     */
+    /** @title Заставка в блоке */
     previewImg?: Picture;
   };

package/src/{services/sitemap → hooks}/fallbackWCMSResource.ts

@@ -1,5 +1,5 @@
 import { readFile } from 'fs/promises';
-import type { FallbackMap } from '../../model/Fallback';
+import type { FallbackMap } from '../model/Fallback';
 
 export const fallbackWCMSResource = (filename: string): FallbackMap => ({
   [`/wcms-resources/${filename}.json`]: async () =>

package/src/hooks/useCarouselControls.ts

@@ -11,28 +11,18 @@ export interface CarouselControls {
 interface CarouselControlsProps {
   itemCount: number;
   visibleItemCount?: number;
-  isCyclic?: boolean;
-  container?: HTMLDivElement | null;
 }
 
 export const useCarouselControls = (props: CarouselControlsProps): [number, CarouselControls] => {
-  const { itemCount, visibleItemCount, isCyclic } = props;
+  const { itemCount, visibleItemCount } = props;
 
   const [activeIndex, setActiveIndex] = useState(0);
 
-  const inc = useCallback(
-    () => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemCount : Math.min(_ + 1, itemCount - 1))),
-    [isCyclic, itemCount],
-  );
-  const dec = useCallback(
-    () => setActiveIndex((_) => (isCyclic ? (itemCount + _ - 1) % itemCount : Math.max(_ - 1, 0))),
-    [isCyclic, itemCount],
-  );
+  const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
+  const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
 
-  const canInc =
-    isCyclic ||
-    (isScrollable(activeIndex, props) && activeIndex < itemCount - (visibleItemCount || 1));
-  const canDec = isCyclic || activeIndex > 0;
+  const canInc = isScrollable(props) && activeIndex < itemCount - (visibleItemCount || 1);
+  const canDec = activeIndex > 0;
   const isScrollAvailable = canDec || canInc;
 
   return [
@@ -47,19 +37,6 @@ export const useCarouselControls = (props: CarouselControlsProps): [number, Caro
   ];
 };
 
-function isScrollable(
-  activeIndex: number,
-  { itemCount, visibleItemCount, container }: CarouselControlsProps,
-): boolean {
-  if (visibleItemCount) {
-    return itemCount > visibleItemCount;
-  }
-
-  if (container) {
-    const scrollLeft = (container.scrollWidth * activeIndex) / itemCount;
-
-    return scrollLeft + container.clientWidth < container.scrollWidth;
-  }
-
-  return false;
+function isScrollable({ itemCount, visibleItemCount }: CarouselControlsProps): boolean {
+  return Boolean(visibleItemCount && itemCount > visibleItemCount);
 }

package/src/hooks/useLink.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../model/LinkProps';
-import type { PreventableEvent } from '../model/PreventableEvent';
+import type { PreventableEvent } from '../ui-kit/PreventableEvent';
 import { adjustHref } from '../utils/adjustHref';
 import { isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';

package/{mobile/src/services/sitemap → src/hooks}/useSWRResource.ts

@@ -1,6 +1,6 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import type { Fallback } from '../../model/Fallback';
-import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+import type { Fallback } from '../model/Fallback';
+import { fetchJSONUnsafe } from '../utils/fetchJSON';
 
 export function useSWRResource<Data>(filename: string, fallback: Fallback = {}): Data {
   const { data } = useAsyncData<Data>(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {

package/src/model/Bullets.ts

@@ -0,0 +1,4 @@
+export type BulletsProps = {
+  /** @title Буллиты */
+  isDotted?: boolean;
+};

package/src/model/Button.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps, ButtonWithIconProps } from '../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Блок Кнопка
+ */
+export interface ButtonCommonProps {
+  /** @title Кнопка */
+  button?: ButtonProps;
+}
+/**
+ * @title Блок Кнопка
+ */
+export interface ButtonCommonIconProps {
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+}

package/src/model/HeadlineType.ts

@@ -20,6 +20,11 @@ export type DescriptionProps = {
   description?: string;
 };
 
+export type SubtitleProps = {
+  /** @title Подзаголовок */
+  subtitle?: string;
+};
+
 export type LabelProps = {
   /** @title Название */
   label?: string;

package/src/model/Picture.ts

@@ -1,6 +1,6 @@
 import type { IconName } from '../icons/IconName';
 import type { IconVersion } from './IconVersion';
-import { ImageSize } from './ImageSize';
+import type { ImageSize } from './ImageSize';
 
 export type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
 
@@ -17,7 +17,6 @@ export type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avi
  *    "Снизу по центру",
  *    "Снизу справа"
  *  ]
- * @default "center"
  */
 export type ImgAlignment =
   | 'northwest'
@@ -33,15 +32,9 @@ export type ImgAlignment =
 export interface Img {
   /** @title Картинка */
   src?: string;
-  /**
-   * @title Альтернативный текст (alt)
-   * @default ""
-   */
+  /** @title Альтернативный текст (alt) */
   alt?: string;
-  /**
-   * @title Текст подсказки (title)
-   * @default ""
-   */
+  /** @title Текст подсказки (title) */
   title?: string;
 }