@redneckz/wildless-cms-uni-blocks 0.2.83 → 0.2.86

package/src/components/BaseTile/BaseTile.tsx

@@ -1,17 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BaseTileContent } from './BaseTileContent';
+import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
 import { Title } from '../../ui-kit/Title/Title';
-import { useLink } from '../../hooks/useLink';
 import { getColSpan } from '../../utils/getColSpan';
+import type { BaseTileCommonProps, BaseTileIconButton } from './BaseTileProps';
 
-export interface BaseTileProps extends BaseTileContent, UniBlockProps {}
+export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 const TITLE_CLASSES = 'font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]';
 
@@ -82,7 +81,7 @@ function renderItems(items: string[] = [], version?: BlockVersion) {
   );
 }
 
-function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
+function renderButton({ icon, ...button }: BaseTileIconButton, i: number) {
   if (!button?.text) return;
 
   if (icon)

package/src/components/BaseTile/BaseTileProps.ts

@@ -0,0 +1,33 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+
+export interface BaseTileIconButton extends ButtonWithIconProps {
+  icon?: IconName;
+}
+
+/**
+ * @title Плитка
+ */
+export interface BaseTileCommonProps {
+  /** @title Заголовок */
+  title?: string;
+  /**
+   * @title Размер заголовка
+   * @default M
+   */
+  titleSize?: TitleSize;
+  /** @title Описание */
+  description?: string;
+  image?: Picture;
+  /** @title Список */
+  items?: string[];
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  buttons?: BaseTileIconButton[];
+  version?: BlockVersion;
+}

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -0,0 +1,13 @@
+{
+  "title": "Преимущества",
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "ClockIcon"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "SignDocsIcon"
+    }
+  ]
+}

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -12,7 +13,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         className || ''
       }`}
     >
-      <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
+      {title ? <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title> : null}
       {benefits?.length ? (
         <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
       ) : null}

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,12 +1,25 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 
+/**
+ * @title Преимущество
+ */
 export interface Benefit {
-  label: string;
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
   description?: string;
   icon?: IconName;
 }
 
+/**
+ * @title Блок преимущества
+ */
 export interface BenefitsBlockContent {
+  /** @title Заголовок */
   title?: string;
+  /**
+   * @title Список преимущества
+   * @maxItems 6
+   */
   benefits?: Benefit[];
 }

package/src/components/BlockContent.ts

@@ -1,4 +1,5 @@
 import type { BenefitsBlockContent } from './BenefitsBlock/BenefitsBlockContent';
+import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
 import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
@@ -12,8 +13,10 @@ import type { PromoTileContent } from './PromoTile/PromoTileContent';
 import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
-import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
 
+/**
+ * @hidden
+ */
 export type BlockContent =
   | HeaderContent
   | FooterContent

package/src/components/ComparisonTable/ComparisonTable.example.json

@@ -0,0 +1,84 @@
+{
+  "title": "Заголовок",
+  "rowHeaders": [
+    {
+      "title": "Параметр 1"
+    },
+    {
+      "title": "Параметр 2"
+    },
+    {
+      "title": "Параметр 3"
+    }
+  ],
+  "columns": [
+    {
+      "header": {
+        "title": "Продукт 1",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 100,
+            "height": 63
+          }
+        }
+      },
+      "data": [
+        [
+          {
+            "label": "Ячейка 1"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 2-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "label": "Ячейка 2-2",
+            "description": "Описание для ячейки 2-2"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 3"
+          }
+        ]
+      ]
+    },
+    {
+      "header": {
+        "title": "Продукт 2",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 100,
+            "height": 63
+          }
+        }
+      },
+      "data": [
+        [
+          {
+            "label": "Ячейка 1"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 2-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "label": "Ячейка 2-2",
+            "description": "Описание для ячейки 2-2"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 3"
+          }
+        ]
+      ]
+    }
+  ]
+}

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,43 +1,86 @@
-import type { LinkContent } from '../../model/LinkContent';
+import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 
+/**
+ * @hidden
+ */
 export type Row = {
   header: RowHeader;
   data: CellData[][];
 };
 
+/**
+ * @hidden
+ */
 export type RowData = Row[] | undefined;
 
+/**
+ * @title Ячейка
+ */
 export interface CellData {
+  /** @title Заголовок */
   label?: string;
+  /** @title Описание */
   description?: string;
+  /**
+   *  @title Иконки
+   *  @hidden
+   */
   icons?: IconName[];
+  /** @hidden */
   image?: Picture;
+  /**
+   * @title Кнопки
+   * @hidden
+   */
   buttons?: ButtonProps[];
 }
 
+/**
+ * @title Шапка колонки
+ */
 export interface ColumnHeader {
+  /** @title Заголовок */
   title?: string;
+  /** @hidden */
   icon?: IconName;
+  /** @hidden */
   image?: Picture;
-  link?: LinkContent;
+  /** @hidden */
+  link?: LinkProps;
 }
+
+/**
+ * @title Продукт
+ */
 export interface Column {
   header?: ColumnHeader;
+  /** @title Данные */
   data?: CellData[][];
 }
 
+/**
+ * @title Параметр
+ */
 export interface RowHeader {
+  /** @title Заголовок */
   title?: string;
   icon?: IconName;
 }
-
+/**
+ * @title Сравнительная таблица
+ */
 export interface ComparisonTableContent {
+  /** @title Заголовок */
   title?: string;
+  /** @title Параметры */
   rowHeaders?: RowHeader[];
+  /** @title Продукты */
   columns?: Column[];
+  /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
+  /** @title Закрасить первую колонку */
   isColoredFirstColumn?: boolean;
 }

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkContent } from '../../model/LinkContent';
+import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
@@ -12,7 +12,7 @@ export interface HeaderCellProps {
   icon?: IconName;
   image?: Picture;
   title?: string;
-  link?: LinkContent;
+  link?: LinkProps;
 }
 
 export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (

package/src/components/ContentPage/ContentPage.tsx

@@ -1,8 +1,8 @@
 import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
+import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
-import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;
@@ -15,11 +15,13 @@ export type BlockDecorator<VNode = any> = (
   index?: number | string,
 ) => any;
 
+export type JSXBlock = (
+  props: PropsWithChildren<UniBlockProps & BlockContent, any>,
+  context?: any,
+) => any;
+
 export interface ContentPageProps extends UniBlockProps {
-  blocksRegistry: Record<
-    string,
-    (props: PropsWithChildren<UniBlockProps & BlockContent, any>, context?: any) => any
-  >;
+  blocksRegistry: Record<string, JSXBlock>;
   data: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }

package/src/components/CreditCalculator/CreditCalculatorContent.ts

@@ -12,6 +12,10 @@ export interface CreditCalculatorData {
   rows?: CalculatorParams[];
 }
 
+/**
+ * @title Кредитный калькулятор
+ */
 export interface CreditCalculatorContent {
+  /** @title Справочник */
   directoryName?: string;
 }

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { Tile } from '../Tile/Tile';
+import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
 
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
 

package/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,3 +1,7 @@
+/**
+ * @title Курсы валют
+ */
 export interface ExchangeRateTileContent {
+  /** @title Заголовок */
   title?: string;
 }

package/src/components/Footer/Contacts.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
-import { useLink } from '../../hooks/useLink';
 import type { ContactInfo } from './FooterContent';
 
 export interface ContactsProps extends UniBlockProps {
@@ -45,7 +45,7 @@ const renderContact = (item: ContactInfo, index: number) => {
   );
 };
 
-const renderText = (type: ContactInfo['type'], text: string) => {
+const renderText = (type: ContactInfo['type'], text = '') => {
   switch (type) {
     case 'tel':
       return (

package/src/components/Footer/FooterContent.ts

@@ -1,15 +1,42 @@
-import type { LinkContent } from '../../model/LinkContent';
-import type { SitemapContent } from '../../model/SitemapContent';
+import type { LinkProps } from '../../model/LinkProps';
+import type { SitemapProps } from '../../model/SitemapProps';
 
+/**
+ * @title Тип контакта
+ * @enumNames [
+ *    "Телефон",
+ *    "Почта"
+ *  ]
+ */
+export type ContactType = 'tel' | 'email';
+
+/**
+ * @title Контакт
+ */
 export interface ContactInfo {
-  text: string;
-  type: 'tel' | 'email';
-  description: string;
+  /** @title Текст */
+  text?: string;
+  type?: ContactType;
+  /** @title Описание */
+  description?: string;
 }
 
-export interface FooterContent extends SitemapContent {
-  documents?: LinkContent[];
-  relatedEnterprises?: LinkContent[];
+/**
+ * @required ["href"]
+ */
+export interface SocialMedia extends Omit<LinkProps, 'text'> {}
+
+/**
+ * @title Подвал
+ * @required ["topItems"]
+ */
+export interface FooterContent extends SitemapProps {
+  /** @title Обязательные документы */
+  documents?: LinkProps[];
+  /** @title Другие предприятия */
+  relatedEnterprises?: LinkProps[];
+  /** @title Контакты */
   contacts?: ContactInfo[];
-  socialMedia?: Omit<LinkContent, 'text'>[];
+  /** @title Социальные сети */
+  socialMedia?: SocialMedia[];
 }

package/src/components/Footer/FooterLink.ts

@@ -1,6 +1,6 @@
-import type { LinkContent } from '../../model/LinkContent';
+import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 
 export interface FooterLink extends UniBlockProps {
-  links?: LinkContent[];
+  links?: LinkProps[];
 }

package/src/components/Footer/HorizontalNavigation.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LinkContent } from '../../model/LinkContent';
 import { useLink } from '../../hooks/useLink';
+import { LinkProps } from '../../model/LinkProps';
 import type { FooterLink } from './FooterLink';
 
 export const HorizontalNavigation = JSX<FooterLink>(({ className, links, context }) => {
@@ -24,7 +24,7 @@ export const HorizontalNavigation = JSX<FooterLink>(({ className, links, context
   );
 });
 
-interface HorizontalNavigationLinkProps extends LinkContent {
+interface HorizontalNavigationLinkProps extends LinkProps {
   className: string;
   index: number;
   onClick: (ev: MouseEvent) => any;

package/src/components/Footer/Sitemap.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { mergeTopItems } from '../../mergeTopItems';
-import type { LinkContent } from '../../model/LinkContent';
-import type { TopMenuItem } from '../../model/SitemapContent';
-import type { UniBlockProps } from '../../types';
 import { useLink } from '../../hooks/useLink';
 import { useSitemap } from '../../hooks/useSitemap';
+import { mergeTopItems } from '../../mergeTopItems';
+import type { LinkProps } from '../../model/LinkProps';
+import type { TopMenuItem } from '../../model/SitemapProps';
+import type { UniBlockProps } from '../../types';
 export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
 }
@@ -43,7 +43,7 @@ const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator
   );
 };
 
-interface ColumnItemProps extends LinkContent {
+interface ColumnItemProps extends LinkProps {
   index?: number;
 }
 

package/src/components/Footer/SocialMedia.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkContent } from '../../model/LinkContent';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
-import { useLink } from '../../hooks/useLink';
-import { Button } from '../../ui-kit/Button/Button';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -25,7 +25,7 @@ const ICONS_MAP: Array<{
 ];
 
 export interface SocialMediaProps extends UniBlockProps {
-  media?: Omit<LinkContent, 'text'>[];
+  media?: Omit<LinkProps, 'text'>[];
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context }) => {
@@ -58,14 +58,7 @@ const MediaButton = JSX<MediaButtonProps>(({ href }) => {
       rel="noopener noreferrer"
       aria-label={label}
       className="border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:fill-primary-main"
-      appendLeft={
-        <Icon
-          name={icon}
-          width={width}
-          height={height}
-          className="[&>*]:fill-primary-text [&>*]:hover:fill-primary-main"
-        />
-      }
+      appendLeft={<Icon name={icon} width={width} height={height} asSVG />}
     />
   );
 });

package/src/components/Footer/TextInformation.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkContent } from '../../model/LinkContent';
 import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
 import { FooterLink } from './FooterLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
@@ -28,7 +28,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   );
 });
 
-interface TextInformationLinkProps extends LinkContent {
+interface TextInformationLinkProps extends LinkProps {
   className: string;
   index: number;
   onClick: (ev: MouseEvent) => any;

package/src/components/Gallery/Gallery.example.json

@@ -0,0 +1,71 @@
+{
+  "title": "Галерея",
+  "description": "Описание",
+  "cards": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 1",
+      "description": "Описание 1",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 2",
+      "description": "Описание 2",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 3",
+      "description": "Описание 3",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 4",
+      "description": "Описание 4",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 5",
+      "description": "Описание 5",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    }
+  ]
+}