@redneckz/wildless-cms-uni-blocks 0.4.3 → 0.4.5

package/src/components/Calculator/useCalculatorParams.ts

@@ -1,16 +1,8 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
 
 export function useCalculatorParams<Data>(dir: string) {
-  const { data } = useAsyncData<Data>(
-    `/wcms-resources/${dir}.json`,
-    fetchCalculatorSourceBookParams,
-  );
+  const { data } = useAsyncData<Data>(`/wcms-resources/${dir}.json`, fetchJSONUnsafe);
 
   return data;
 }
-
-async function fetchCalculatorSourceBookParams<Data>(url: string): Promise<Data> {
-  const response = await fetch(url);
-
-  return await response.json();
-}

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -54,12 +54,10 @@ export const useCreditCalculatorParams = (
   const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
   const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
 
-  const extendedCalculatorParams = {
+  return {
     ...creditCalculatorSourceBookParams,
     ...userInputParams,
     finalRate,
     monthlyPayment,
   };
-
-  return extendedCalculatorParams;
 };

package/src/components/Catalog/Catalog.fixture.tsx

@@ -1,6 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Catalog, CatalogProps } from './Catalog';
 import type { CatalogProductColor } from './CatalogContent';
 
@@ -16,11 +16,14 @@ const payRing: Picture = {
 
 const colors: CatalogProductColor[] = ['black', 'white'];
 
-const buttonPrimary: ButtonCommonProps = {
+const buttonPrimary: ButtonWithIconProps = {
   href: '/credit-cards',
   text: 'Подробнее',
   target: '_blank',
   version: 'primary',
+  icon: {
+    icon: 'AppleIcon',
+  },
 };
 
 const catalogCard = {

package/src/components/Catalog/CatalogCard.tsx

@@ -12,6 +12,12 @@ export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
   version?: BlockVersion;
 }
 
+const iconVersionMap = {
+  default: 'normal',
+  primary: 'white',
+  secondary: 'black',
+};
+
 const cardStyleMap: Record<CatalogProductColor, string> = {
   black: 'bg-black',
   white: 'bg-white',
@@ -50,22 +56,23 @@ const renderColorOption = (color: CatalogProductColor, i: number) => (
 );
 
 const renderButton = (button: ButtonWithIconProps) => {
-  const { icon, iconRight, text } = button;
+  const { icon, iconRight, ...other } = button;
 
-  if (!text) {
+  if (!button?.text) {
     return null;
   }
 
-  const leftIcon = renderButtonIcon(icon);
-  const rightIcon = renderButtonIcon(iconRight);
+  const iconVersion = iconVersionMap[button?.version || 'default'];
+  const leftIcon = renderButtonIcon({ ...icon, iconVersion });
+  const rightIcon = renderButtonIcon({ ...iconRight, iconVersion });
 
   return (
-    <Button className="mt-5 w-full" appendLeft={leftIcon} appendRight={rightIcon} {...button} />
+    <Button className="mt-5 w-full" appendLeft={leftIcon} appendRight={rightIcon} {...other} />
   );
 };
 
 const renderButtonIcon = (buttonIcon?: Picture) => {
-  if (!buttonIcon || !buttonIcon.icon) {
+  if (!buttonIcon || (!buttonIcon?.icon && !buttonIcon?.src)) {
     return null;
   }
 

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { Picture } from '../../model/Picture';
 import type { ListOrientation } from '../../model/ListOrientation';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @hidden
@@ -28,7 +28,13 @@ export interface ColumnHeader {
   title?: string;
   /** @title Подзаголовок */
   subtitle?: string;
+  /**
+   * @default { "format": "webp", "size": { "width": 24 } }
+   */
   icon?: Picture;
+  /**
+   * @default { "format": "webp", "size": { "width": 100 } }
+   */
   image?: Picture;
   link?: LinkProps;
 }
@@ -64,6 +70,7 @@ export interface TableColumnData {
 export interface TableColumnHeader {
   /** @title Заголовок */
   title?: string;
+
   icon?: Picture;
 }
 

package/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { TableRow } from './TableRow';
+import type { TitleProps } from '../../model/HeadlineType';
 import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
 import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
 import type { CellData } from './ComparisonTableContent';
-import type { TitleProp } from '../../model/HeadlineType';
+import { TableRow } from './TableRow';
 
 type ComparisonTableRowsProps = TableArrowScrollControlProps & {
-  rowData: { header: TitleProp; data: CellData[][] }[];
+  rowData: { header: TitleProps; data: CellData[][] }[];
   activeCardIndex: number;
   isColoredFirstColumn: boolean;
 };

package/src/components/ContentPage/ContentPage.page.json

@@ -16,7 +16,7 @@
   },
   "jsonLd": "json",
   "date": "2022-04-08",
-  "style": ["bg-secondary-light"],
+  "style": ["bg-main-divider"],
   "likeControl": true,
   "slots": {
     "header": {
@@ -554,39 +554,6 @@
         }
       }
     },
-    {
-      "type": "NavigatorTabs",
-      "style": ["col-span-12"],
-      "content": {
-        "navigatorTabs": [
-          {
-            "text": "Калькулятор",
-            "href": "#calculator"
-          },
-          {
-            "text": "Преимущества",
-            "href": "#advantages"
-          },
-          {
-            "text": "Как оформить",
-            "href": "#howToApply"
-          },
-          {
-            "text": "Тарифы",
-            "href": "#tariffs"
-          },
-          {
-            "text": "Документы",
-            "href": "#documents"
-          },
-          {
-            "text": "Урожай",
-            "href": "https://rshb.ru/",
-            "target": "_blank"
-          }
-        ]
-      }
-    },
     {
       "type": "ProductTile",
       "style": ["col-span-6"],
@@ -1947,8 +1914,7 @@
           "alt": "Варианты потребительского кредита",
           "format": "webp",
           "size": {
-            "width": 400,
-            "height": 300
+            "width": 300
           }
         }
       }

package/src/components/ContentPage/normalizePage.mobile.ts

@@ -7,7 +7,7 @@ export function normalizePage(
   contentPage: ContentPageDef | undefined | null,
 ): ContentPageDef | undefined {
   if (!contentPage) {
-    return;
+    return undefined;
   }
 
   const { blocks, slots } = contentPage;

package/src/components/ContentPage/normalizePage.ts

@@ -7,7 +7,7 @@ export function normalizePage<T extends ContentPageDef | undefined | null>(
   contentPage: T,
 ): ContentPageDef | undefined {
   if (!contentPage) {
-    return;
+    return undefined;
   }
 
   const { blocks, slots } = contentPage;

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

@@ -1,9 +1,9 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import type { ListOrientation } from '../../model/ListOrientation';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { GalleryCardProps } from './GalleryContent';
 import { Gallery } from './Gallery';
-import { GalleryCard } from './GalleryContent';
 
 const isDotted = true;
 
@@ -17,7 +17,7 @@ const image: Picture = {
   title: 'money',
 };
 
-const link: ButtonCommonProps = {
+const link: ButtonWithIconProps = {
   href: '/credit-cards',
   text: 'Подробнее',
   target: '_blank',
@@ -30,7 +30,7 @@ const defaultItems = [
   { title: 'До 15% ', text: 'Кэшбэк от покупок' },
 ];
 
-const cards: GalleryCard[] = [
+const cards: GalleryCardProps[] = [
   {
     image,
     title: 'Вклады в любой валюте',

package/src/components/Gallery/Gallery.fixture.tsx

@@ -1,6 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Gallery } from './Gallery';
 import type { GalleryProps } from './GalleryProps';
 
@@ -16,14 +16,14 @@ const image: Picture = {
   title: 'money',
 };
 
-const buttonPrimary: ButtonCommonProps = {
+const buttonPrimary: ButtonWithIconProps = {
   href: '/credit-cards',
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
 };
 
-const buttonPrimaryIcon: ButtonCommonProps = {
+const buttonPrimaryIcon: ButtonWithIconProps = {
   href: '/credit-cards',
   text: 'Подробнее',
   target: '_blank',

package/src/components/Gallery/Gallery.mobile.tsx

@@ -1,19 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
+import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
+import type { GalleryProps } from './GalleryProps';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { getListStyle } from '../../ui-kit/List/ListItem';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import type { GalleryCard } from './GalleryContent';
-import { GalleryItem } from './GalleryContent';
-import type { GalleryProps } from './GalleryProps';
-
-const blockStyle: Record<BlockVersion, string> = {
-  primary: 'bg-white',
-  secondary: 'bg-primary-main text-white',
-};
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
@@ -37,7 +32,7 @@ export const Gallery = JSX<GalleryProps>(
   },
 );
 
-function renderCardsLayout(orientation: ListOrientation, cards: GalleryCard[], context) {
+function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps[], context) {
   return orientation === 'horizontal' ? (
     <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
@@ -45,11 +40,11 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCard[], c
   );
 }
 
-function renderCard(card: GalleryCard, key: number) {
+function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
       className={`h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
-      ${blockStyle[card.version ?? 'primary']}`}
+      ${VersionStyleMap[card.version ?? 'primary']}`}
       key={key}
     >
       <div>
@@ -77,7 +72,7 @@ function renderButton(button) {
   );
 }
 
-function renderDescription(card: GalleryCard) {
+function renderDescription(card: GalleryCardProps) {
   return (
     <div
       className={`text-secondary-text mt-1 text-s ${
@@ -89,7 +84,7 @@ function renderDescription(card: GalleryCard) {
   );
 }
 
-function renderItems(items: GalleryItem[], isDotted, version: BlockVersion = 'primary') {
+function renderItems(items: GalleryItemProps[], isDotted, version: BlockVersion = 'primary') {
   return (
     <section className="mt-3">
       {items.map((item, i) => (

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import type { GalleryCard, GalleryItem } from './GalleryContent';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 
-export const GalleryCardInner = JSX<GalleryCard>(
+export const GalleryCardInner = JSX<GalleryCardProps>(
   ({ title, description, image, items, button, version, isDotted = true }) => {
     const titleStyleClasses = getTitleStyle(version);
 
@@ -41,7 +41,11 @@ function renderCardTitle(title: string, className: string) {
   return <div className={`text-xl-light m-0 ${className}`}>{title}</div>;
 }
 
-function renderItems(items: GalleryItem[], isDotted: boolean, version: BlockVersion = 'primary') {
+function renderItems(
+  items: GalleryItemProps[],
+  isDotted: boolean,
+  version: BlockVersion = 'primary',
+) {
   return (
     <List
       className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}

package/src/components/Gallery/GalleryContainer.tsx

@@ -1,18 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { cardStyleMap, cardVersionMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
+import { Headline } from '../Headline/Headline';
+import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';
-import type { GalleryCard } from './GalleryContent';
+import type { GalleryCardProps } from './GalleryContent';
 import type { GalleryInnerProps } from './GalleryInner';
-import { Headline } from '../Headline/Headline';
 
 export interface GalleryContainerProps extends Omit<GalleryInnerProps, 'className'> {
   activeCardIndex: number;
 }
 
 export interface GalleryCardData {
-  card: GalleryCard;
+  card: GalleryCardProps;
   version: GalleryVersion;
   context: ContentPageContext;
 }
@@ -49,7 +50,7 @@ function renderCard({ card, version }: GalleryCardData, i: number) {
     <section
       className={`box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
         items-stretch ${cardStyleMap[version]} ${
-        cardVersionMap[card.version ?? 'primary']
+        VersionStyleMap[card.version ?? 'primary']
       } w-full col-span-4`}
       key={String(i)}
       role="listitem"

package/src/components/Gallery/GalleryContent.ts

@@ -6,7 +6,7 @@ import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 /**
  * @title Элемент списка
  */
-export interface GalleryItem {
+export interface GalleryItemProps {
   /** @title Заголовок (моб.) */
   title?: string; //TODO: for mobile
   /** @title Текст */
@@ -16,7 +16,7 @@ export interface GalleryItem {
 /**
  * @title Карточка
  */
-export interface GalleryCard {
+export interface GalleryCardProps {
   /** @title Заголовок */
   title?: string;
   /** @title Описание */
@@ -40,7 +40,7 @@ export interface GalleryCard {
    */
   isDotted?: boolean;
   /** @title Список */
-  items?: GalleryItem[];
+  items?: GalleryItemProps[];
   version?: BlockVersion;
 }
 
@@ -56,7 +56,7 @@ export interface GalleryContent {
    * @title Карточки
    * @minItems 3
    */
-  cards?: GalleryCard[];
+  cards?: GalleryCardProps[];
   /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
   orientation?: ListOrientation; //TODO: for mobile
 }

package/src/components/Gallery/GalleryProps.ts

@@ -1,4 +1,4 @@
 import type { UniBlockProps } from '../../types';
-import { GalleryContent } from './GalleryContent';
+import type { GalleryContent } from './GalleryContent';
 
 export interface GalleryProps extends GalleryContent, UniBlockProps {}

package/src/components/Gallery/constants.ts

@@ -1,11 +1,5 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 
-export const cardVersionMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-secondary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const galleryLengthForScrollMap: Record<GalleryVersion, number> = {
   normal: 3,
   mini: 4,