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

package/src/components/Blocks.ts

@@ -38,6 +38,7 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
+import { InvestmentGallery } from './InvestmentGallery/InvestmentGallery';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
@@ -79,4 +80,5 @@ export const Blocks: BlocksRegistry = {
   SafeDepositRental,
   Tabs,
   ErrorBlock,
+  InvestmentGallery,
 };

package/src/components/Catalog/CatalogContent.ts

@@ -2,6 +2,7 @@ import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
   /** @title Цена в рублях */
@@ -24,4 +25,5 @@ export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
 export type CatalogContent = HeadlineCommonProps & {
   /** @title Список карточек */
   cards?: CatalogCardType[];
+  version?: BlockVersion;
 };

package/src/components/ContentPage/computeAPIFallback.ts

@@ -6,27 +6,26 @@ interface FallbackData {
   data: unknown;
 }
 
-export const computeAPIFallback =
-  (blocksRegistry: BlocksRegistry) => async (): Promise<Fallback> => {
-    const blocksFallbackMap = await Promise.all(Object.keys(blocksRegistry).map(loadBlockFallback));
-    const pageFallbackMap = getPageFallbackMap(blocksFallbackMap);
-    const fallbackData = await Promise.allSettled(
-      Object.entries(pageFallbackMap).map(async ([key, fetcher]) => {
-        const data = await fetcher();
-
-        return { key, data };
-      }),
-    );
-
-    return fallbackData
-      .filter((d): d is PromiseFulfilledResult<FallbackData> => d.status === 'fulfilled')
-      .reduce((res, item) => {
-        return {
-          ...res,
-          [item.value.key]: item.value.data,
-        };
-      }, {});
-  };
+export const computeAPIFallback = async (blocksRegistry: BlocksRegistry): Promise<Fallback> => {
+  const blocksFallbackMap = await Promise.all(Object.keys(blocksRegistry).map(loadBlockFallback));
+  const pageFallbackMap = getPageFallbackMap(blocksFallbackMap);
+  const fallbackData = await Promise.allSettled(
+    Object.entries(pageFallbackMap).map(async ([key, fetcher]) => {
+      const data = await fetcher();
+
+      return { key, data };
+    }),
+  );
+
+  return fallbackData
+    .filter((d): d is PromiseFulfilledResult<FallbackData> => d.status === 'fulfilled')
+    .reduce((res, item) => {
+      return {
+        ...res,
+        [item.value.key]: item.value.data,
+      };
+    }, {});
+};
 
 export async function loadBlockFallback(blockName: string): Promise<FallbackMap | undefined> {
   try {

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

@@ -4,26 +4,23 @@ import { mapSlot } from './mapSlot';
 
 export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
   const { mobile, ...rest } = (block || {}) as BlockDef;
-
-  const normalizedBlock = mobile
+  const result = mobile
     ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } }
     : block;
 
-  return {
-    ...mapSlot((blocks) => filterBlocks(blocks, blocksRegistry))(normalizedBlock || {}),
-  } as S;
+  return mapSlot(filterBlocks(blocksRegistry))(result || {}) as S;
 }
 
-const filterBlocks = (blocks?: BlockDef[], blocksRegistry?: BlocksRegistry) =>
-  blocks
-    ? blocks
-        ?.filter(
-          (block) =>
-            blocksRegistry &&
-            (block?.type || block?.mobile?.type || '') in blocksRegistry &&
-            !block.mobile?.hidden,
-        )
-        .map((block) => ({
-          ...normalizeBlock(block, blocksRegistry),
-        }))
-    : [];
+const filterBlocks =
+  (blocksRegistry?: BlocksRegistry) =>
+  (blocks?: BlockDef[]): BlockDef[] =>
+    blocks
+      ? blocks
+          ?.filter(
+            (block) =>
+              blocksRegistry &&
+              (block?.type || block?.mobile?.type || '') in blocksRegistry &&
+              !block.mobile?.hidden,
+          )
+          .map((block) => normalizeBlock(block, blocksRegistry))
+      : [];

package/src/components/ContentPage/normalizeBlock.ts

@@ -4,18 +4,16 @@ import { mapSlot } from './mapSlot';
 
 export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { mobile, ...rest } = (block || {}) as BlockDef;
+  const { mobile, ...result } = (block || {}) as BlockDef;
 
-  return {
-    ...mapSlot((blocks) => filterBlocks(blocks, blocksRegistry))({ ...rest }),
-  } as S;
+  return mapSlot(filterBlocks(blocksRegistry))({ ...result }) as S;
 }
 
-const filterBlocks = (blocks?: BlockDef[], blocksRegistry?: BlocksRegistry) =>
-  blocks
-    ? blocks
-        .filter((block) => blocksRegistry && (block?.type || '') in blocksRegistry)
-        .map((block) => ({
-          ...normalizeBlock(block, blocksRegistry),
-        }))
-    : [];
+const filterBlocks =
+  (blocksRegistry?: BlocksRegistry) =>
+  (blocks?: BlockDef[]): BlockDef[] =>
+    blocks
+      ? blocks
+          .filter((block) => blocksRegistry && (block?.type || '') in blocksRegistry)
+          .map((block) => normalizeBlock(block, blocksRegistry))
+      : [];

package/src/components/ContentPage/normalizePage.ts

@@ -4,10 +4,5 @@ import { normalizeBlock } from './normalizeBlock';
 
 export const normalizePage =
   (blocksRegistry: BlocksRegistry) =>
-  (contentPage: ContentPageDef | undefined | null): ContentPageDef | undefined => {
-    if (!contentPage) {
-      return undefined;
-    }
-
-    return normalizeBlock(contentPage, blocksRegistry);
-  };
+  (contentPage: ContentPageDef | undefined | null): ContentPageDef =>
+    contentPage ? normalizeBlock(contentPage, blocksRegistry) : {};

package/src/components/Header/Header.mobile.tsx

@@ -5,7 +5,6 @@ import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
-import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
@@ -19,15 +18,14 @@ import { HeaderTop } from './HeaderTop';
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, page }) => {
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, page }) => {
     const { handlerDecorator } = context;
     const router = context.useRouter();
 
     const fallback: Fallback | undefined = page?.fallback;
-    const sitemap = useSitemap(fallback);
+    const { topItems, dispositions } = useSitemap(fallback);
 
-    const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-    const activeTopItem = mergedItems.find(isTopItemActive(router));
+    const activeTopItem = topItems?.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
     const activeSubItem = findActiveSubItem(router)(subItems);
 
@@ -58,15 +56,17 @@ export const Header = JSX<HeaderProps>(
           <HeaderBurger
             context={context}
             onClick={toggleBurgerMenu}
-            burgerSubMenu={sitemap?.dispositions}
+            burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
             <AccordionItemsList>
-              {sitemap.topItems?.map((item, i) => (
-                <AccordionItem key={String(i)} context={context} label={item.text}>
-                  <LinkList context={context} documents={item.items} />
-                </AccordionItem>
-              ))}
+              {topItems?.map((item, i) => {
+                item?.text ? (
+                  <AccordionItem key={String(i)} context={context} label={item.text}>
+                    <LinkList context={context} documents={item.items} />
+                  </AccordionItem>
+                ) : null;
+              })}
             </AccordionItemsList>
           </HeaderBurger>
         ) : null}

package/src/components/Header/Header.tsx

@@ -3,12 +3,13 @@ import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { TopMenuItem } from '../../model/SitemapProps';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
-import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import type { Router } from '../ContentPage/ContentPageContext';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
@@ -22,27 +23,24 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
   ({
-    className = '',
-    defaultLocation = 'Москва',
-    showSubMenu = true,
     bgColor = 'bg-white',
+    className = '',
     context,
-    topItems,
+    defaultLocation = 'Москва',
     logo,
     page,
+    showSubMenu = true,
     ...rest
   }) => {
     const router = context.useRouter();
     const fallback: Fallback | undefined = page?.fallback;
-    const sitemap = useSitemap(fallback);
     const { handlerDecorator } = context;
 
-    const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-    const [firstPortal] = mergedItems;
-    const activeTopItem = showSubMenu
-      ? mergedItems.find(isTopItemActive(router)) || firstPortal // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
-      : null;
-    const topMenu = mergedItems.map((_, i) => (
+    const { topItems } = useSitemap(fallback);
+
+    const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
+
+    const topMenu = topItems?.map((_, i) => (
       <TopItem
         key={String(i)}
         active={_ === activeTopItem}
@@ -80,3 +78,10 @@ export const Header = JSX<HeaderProps>(
     );
   },
 );
+
+const getActiveItem = (topItems: TopMenuItem[] | undefined, router: Router) => {
+  const [firstPortal] = topItems || [];
+
+  // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
+  return topItems?.find(isTopItemActive(router)) || firstPortal;
+};

package/src/components/Header/HeaderContent.ts

@@ -1,7 +1,6 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps, Picture } from '../../model/Picture';
-import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Пункт подменю
@@ -31,7 +30,7 @@ export interface Logo {
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  * @required ["defaultLocation", "topItems"]
  */
-export interface HeaderContent extends SitemapProps {
+export interface HeaderContent {
   logo?: Logo;
   /**
    * @title Город по-умолчанию

package/src/components/InvestmentGallery/InvestmentGallery.example.json

@@ -0,0 +1,64 @@
+{
+  "title": "Заголовок блока",
+  "cards": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок карточки",
+      "description": "Описание",
+      "additionalDescription": "Дополнительное описание",
+      "cardList":[
+        {
+          "parametr": "Параметр",
+          "parametrDesccription": "Описание"
+        },
+        {
+          "parametr": "Параметр",
+          "parametrDesccription": "Описание"
+        },
+        {
+          "parametr": "Параметр",
+          "parametrDesccription": "Описание"
+        }
+      ]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 2",
+      "description": "Описание 2",
+      "socialMedia": [
+        { "href": "https://t.me" },
+        { "href": "https://vk.com" },
+        { "href": "https://ok.ru" }
+      ]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 3",
+      "description": "Описание 3",
+      "socialMedia": [
+        { "href": "https://t.me" },
+        { "href": "https://vk.com" },
+        { "href": "https://ok.ru" }
+      ]
+    }
+  ],
+  "version": "primary"
+}

package/src/components/InvestmentGallery/InvestmentGallery.fixture.tsx

@@ -0,0 +1,79 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../react/setup-fixture';
+import { InvestmentGallery, InvestmentGalleryProps } from './InvestmentGallery';
+
+const five: Picture = {
+  src: '5.svg',
+  format: 'webp',
+  size: {
+    width: 268,
+    height: 218,
+  },
+  title: 'five',
+};
+
+const cardListExample = [
+  {
+    parameter: 'IR',
+    parameterDesccription: 'cтрана эмитента',
+  },
+  {
+    parameter: 'RU',
+    parameterDesccription: 'страна риска',
+  },
+  {
+    parameter: '09.03.2022',
+    parameterDesccription: 'дата погашения',
+  },
+  {
+    parameter: 'Ba3',
+    parameterDesccription: 'рейтинг MOODY’S',
+  },
+  {
+    parameter: 'BB-',
+    parameterDesccription: 'рейтинг FITCH',
+  },
+  {
+    parameter: 'Borets Finance Designated Activity Company',
+    parameterDesccription: 'эмитент',
+  },
+];
+
+const cardCoomonProps = {
+  title: 'Borets Finance DAC 17/09/26',
+  description: 'BRTS-26 XS2230649225',
+  additionalDescription: 'Краткосрочная',
+};
+
+export const shortProps: InvestmentGalleryProps = {
+  context,
+  title: 'Примеры еврооблигаций (Московская Биржа)',
+  cards: [
+    {
+      ...cardCoomonProps,
+      columnsMode: 'double',
+      cardList: cardListExample,
+      image: five,
+    },
+    {
+      ...cardCoomonProps,
+      columnsMode: 'single',
+      cardList: cardListExample,
+      image: five,
+    },
+    {
+      ...cardCoomonProps,
+      columnsMode: 'double',
+      cardList: cardListExample,
+      image: five,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 mb-1">
+      <InvestmentGallery className="col-span-12" {...shortProps} />
+    </div>
+  ),
+};

package/src/components/InvestmentGallery/InvestmentGallery.tsx

@@ -0,0 +1,103 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { InvestmentGalleryCard } from './InvestmentGalleryCard';
+import type {
+  InvestmentGalleryCardTypes,
+  InvestmentGalleryContent,
+} from './InvestmentGalleryContent';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+
+const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+const CARD_FULL_VIEW_COUNT = 1;
+
+export interface InvestmentGalleryProps extends InvestmentGalleryContent, UniBlockProps {}
+
+interface NavButtonsProps {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (number: number) => void;
+}
+
+export const InvestmentGallery = JSX<InvestmentGalleryProps>(
+  ({ context, cards = [], className = '', title, version = 'primary', ...rest }) => {
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
+    const cardWidth = 525;
+
+    return (
+      <BlockWrapper
+        context={context}
+        className={`relative font-sans p-9 overflow-hidden text-center 
+        ${VersionStyleMap[version]} 
+        ${className}`}
+        {...rest}
+      >
+        {title ? <Heading headingType="h3" className="mb-9" title={title} /> : null}
+        <div>
+          <div
+            className="flex duration-1000 gap-3.5"
+            style={{ transform: `translateX(-${activeCardIndex * cardWidth}px)` }}
+            role="list"
+          >
+            {cards?.length
+              ? cards.map(renderInvestmentGalleryCard(context, className, version))
+              : null}
+          </div>
+          {renderNavButtons({
+            cardsCount: cards.length,
+            activeCardIndex,
+            setActiveCardIndex,
+          })}
+        </div>
+        <div
+          className={`${BLUR_BLOCK_CLASSES} left-0 ${
+            version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
+          }`}
+        />
+        <div
+          className={`${BLUR_BLOCK_CLASSES} right-0 ${
+            version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
+          }`}
+        />
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderInvestmentGalleryCard =
+  (context: ContentPageContext, className: string, version?: BlockVersion) =>
+  (card: InvestmentGalleryCardTypes, i: number) =>
+    (
+      <InvestmentGalleryCard
+        key={String(i)}
+        className={className}
+        context={context}
+        version={version}
+        {...card}
+      />
+    );
+
+const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex }: NavButtonsProps) => {
+  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+  const showPrevButton = isUseSlider && activeCardIndex > 0;
+
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  return (
+    <div>
+      {renderArrows({
+        handler: [handlePrevClick, handleNextClick],
+        isShown: [showPrevButton, showNextButton],
+        btnClass: ['left-8', 'right-8'],
+        className: 'top-1/2 mt-3',
+      })}
+    </div>
+  );
+};

package/src/components/InvestmentGallery/InvestmentGallery.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "recommendations": {
+      "items": {
+        "image": {
+          "ui:field": "picture"
+        }
+      }
+    }
+  }
+}

package/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -0,0 +1,91 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type {
+  CardColumnsMode,
+  CardListItem,
+  InvestmentGalleryCardTypes,
+} from './InvestmentGalleryContent';
+
+export interface RecommendationCardProps extends InvestmentGalleryCardTypes, UniBlockProps {
+  version?: BlockVersion;
+}
+const getItemListFontSize = (colValue?: string) => (colValue === 'single' ? 'text-h6' : 'text-l');
+
+const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
+  double: 'flex gap-y-2 gap-x-10 flex-wrap',
+  single: 'flex gap-y-2 flex-col',
+};
+
+export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
+  ({
+    className = '',
+    columnsMode = 'double',
+    context,
+    description,
+    additionalDescription,
+    image,
+    cardList,
+    title,
+    version = 'primary',
+  }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
+    ) : null;
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
+    return (
+      <section
+        className={`relative overflow-hidden text-left border border-solid box-border
+          p-9 min-w-[697px] min-h-[319px]
+          ${BorderVersionStyleMap[version]}
+          ${className}`}
+        role="listitem"
+      >
+        <BaseTile
+          context={context}
+          className="flex justify-between"
+          title={tileTitle}
+          image={tileImage}
+        >
+          <div className="flex flex-col justify-between">
+            <div className="flex itens-center justify-between mb-4">
+              {description ? <Description className="text-h6" description={description} /> : null}
+              {additionalDescription ? (
+                <div className="text-m-light text-secondary-text"> {additionalDescription} </div>
+              ) : null}
+            </div>
+            {cardList?.length ? (
+              <div className={`${cardColumnsModeStyleMap[columnsMode]}`} role="list">
+                {renderCardList(cardList, columnsMode)}
+              </div>
+            ) : null}
+          </div>
+        </BaseTile>
+      </section>
+    );
+  },
+);
+
+const renderCardList = (cardList: CardListItem[], columnsMode: string) =>
+  cardList.map((item, i) => (
+    <div
+      key={String(i)}
+      className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+      role="listitem"
+    >
+      {item?.parameter ? (
+        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
+      ) : null}
+      {item?.parameterDesccription ? (
+        <span className="text-m-light text-secondary-text">{item.parameterDesccription}</span>
+      ) : null}
+    </div>
+  ));