@redneckz/wildless-cms-uni-blocks 0.6.22 → 0.6.24

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

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import type { BlocksRegistry } from '../../model/BlocksRegistry';
+import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
+import baseData from './ContentPage.page.json';
+
+const BLOCK_TYPES_BLACK_LIST = [
+  'Header',
+  'Footer',
+  'Placeholder',
+  'AccordionItem',
+  'OtherProductsItem',
+];
+
+export function useContentPageData(blocksRegistry: BlocksRegistry): ContentPageDef {
+  const [data, setData] = useState<ContentPageDef>(baseData);
+
+  useEffect(() => {
+    contentPageData(blocksRegistry).then((_) => setData(_));
+  }, []);
+
+  return data;
+}
+
+const contentPageData = async (blocksRegistry: BlocksRegistry): Promise<ContentPageDef> => ({
+  ...baseData,
+  blocks: await Promise.all(
+    Object.keys(blocksRegistry)
+      .filter((type) => !BLOCK_TYPES_BLACK_LIST.includes(type))
+      .sort()
+      .map(
+        async (type): Promise<BlockDef> => ({
+          type,
+          style: ['col-span-12'],
+          content: {},
+          ...(await blockContentExample(type)),
+        }),
+      ),
+  ),
+});
+
+async function blockContentExample(type: string) {
+  try {
+    return (await import(`../${type}/${type}.example.json`)).default;
+  } catch (ex) {
+    // Do nothing
+  }
+
+  return {};
+}

package/mobile/src/components/ErrorBlock/ErrorBlock.example.json

@@ -1,13 +1,15 @@
 {
-  "title": "Заголовок",
-  "subtitle": "Описание",
-  "error": {
-    "errorContentType": "Code",
-    "code": "404"
-  },
-  "button": {
-    "text": "Кнопка",
-    "version": "primary",
-    "target": "_self"
+  "content": {
+    "title": "Заголовок",
+    "subtitle": "Описание",
+    "error": {
+      "errorContentType": "Code",
+      "code": "404"
+    },
+    "button": {
+      "text": "Кнопка",
+      "version": "primary",
+      "target": "_self"
+    }
   }
 }

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -26,10 +26,7 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
     const router = useRouter();
 
     return (
-      <section
-        className={`flex flex-col justify-center items-center mt-12 ${className}`}
-        role="listitem"
-      >
+      <section className={`flex flex-col justify-center items-center mt-12 ${className}`}>
         <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
         {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
         {subtitle ? (

package/mobile/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -11,7 +11,7 @@ export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', addr
     <Img image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
     <div className="ml-3">
       {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
-      <p className="text-secondary-text m-0 text-m">Курс указан для ближайшего офиса</p>
+      <p className="text-secondary-text m-0 text-m">Курс указан для заданного офиса</p>
     </div>
   </div>
 ));

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.example.json

@@ -1,8 +1,10 @@
 {
-  "button": {
-    "href": "https://coins.rshb.ru/exchange",
-    "text": "Купить валюту",
-    "target": "_blank",
-    "version": "primary"
+  "content": {
+    "button": {
+      "href": "https://coins.rshb.ru/exchange",
+      "text": "Купить валюту",
+      "target": "_blank",
+      "version": "primary"
+    }
   }
 }

package/mobile/src/components/Footer/Footer.tsx

@@ -1,19 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Fallback } from '../../model/Fallback';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
-import type { FooterContent, SubMenuItem } from './FooterContent';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { Fallback } from '../../model/Fallback';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { FooterContent, SubMenuItem } from './FooterContent';
+import type { Picture } from '../../model/Picture';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
 
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
@@ -66,7 +68,15 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
 
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
-      {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}
+      {icon ? (
+        <Img
+          className="pr-1"
+          image={getIconWithVersion({ icon: icon } as Picture)}
+          width="24"
+          height="24"
+          asSVG
+        />
+      ) : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );

package/mobile/src/components/Footer/MediaButton.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -66,7 +67,13 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       rel="noopener noreferrer"
     >
       {icon ? (
-        <Img image={icon} imageClassName="group-hover:text-white" width="24" height="24" asSVG />
+        <Img
+          image={getIconWithVersion(icon)}
+          imageClassName="group-hover:text-white"
+          width="24"
+          height="24"
+          asSVG
+        />
       ) : null}
     </a>
   );

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

@@ -1,64 +1,66 @@
 {
-  "title": "Галерея",
-  "description": "Описание",
-  "orientation": "horizontal",
-  "cards": [
-    {
-      "icon": {
-        "format": "webp",
-        "size": {
-          "width": 150,
-          "height": 150
-        }
+  "content": {
+    "title": "Галерея",
+    "description": "Описание",
+    "orientation": "horizontal",
+    "cards": [
+      {
+        "icon": {
+          "format": "webp",
+          "size": {
+            "width": 150,
+            "height": 150
+          }
+        },
+        "title": "Заголовок 1",
+        "description": "Описание 1",
+        "href": "/credit-cards",
+        "version": "primary",
+        "isDotted": true,
+        "items": [
+          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
+          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
+          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
+        ]
       },
-      "title": "Заголовок 1",
-      "description": "Описание 1",
-      "href": "/credit-cards",
-      "version": "primary",
-      "isDotted": true,
-      "items": [
-        { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-        { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-        { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-      ]
-    },
-    {
-      "icon": {
-        "format": "webp",
-        "size": {
-          "width": 140,
-          "height": 140
-        }
+      {
+        "icon": {
+          "format": "webp",
+          "size": {
+            "width": 140,
+            "height": 140
+          }
+        },
+        "title": "Заголовок 2",
+        "description": "Описание 2",
+        "href": "/credit-cards",
+        "version": "primary",
+        "isDotted": true,
+        "items": [
+          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
+          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
+          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
+        ]
       },
-      "title": "Заголовок 2",
-      "description": "Описание 2",
-      "href": "/credit-cards",
-      "version": "primary",
-      "isDotted": true,
-      "items": [
-        { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-        { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-        { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-      ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 140,
-          "height": 140
-        }
-      },
-      "title": "Заголовок 3",
-      "description": "Описание 3",
-      "href": "/credit-cards",
-      "version": "primary",
-      "isDotted": true,
-      "items": [
-        { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
-        { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
-        { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-      ]
-    }
-  ]
+      {
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 140,
+            "height": 140
+          }
+        },
+        "title": "Заголовок 3",
+        "description": "Описание 3",
+        "href": "/credit-cards",
+        "version": "primary",
+        "isDotted": true,
+        "items": [
+          { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
+          { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
+          { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
+        ]
+      }
+    ]
+  }
 }

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

@@ -11,7 +11,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import { Picture } from '../../model/Picture';
+import type { Picture } from '../../model/Picture';
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {

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

@@ -7,6 +7,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export const GalleryCardInner = JSX<GalleryCardProps>(
   ({
@@ -24,7 +25,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     return (
       <div className={`h-full flex flex-col justify-between ${AlignText[align]}`}>
         <div className="flex flex-col h-full">
-          {renderImage(icon)}
+          {renderImage(icon, version)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
           {items?.length ? renderItems(items, isDotted, version) : null}
@@ -36,11 +37,15 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
   },
 );
 
-const renderImage = (image?: Picture) => (
+const renderImage = (image?: Picture, version?: BlockVersion) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
-      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} asSVG />
+      <Img
+        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
+        image={getIconWithVersion(image, version)}
+        asSVG
+      />
     ) : null}
   </div>
 );