@redneckz/wildless-cms-uni-blocks 0.5.4 → 0.5.6

package/src/components/ContentPage/computeAPIFallback.ts

@@ -0,0 +1,55 @@
+import type { Fallback, FallbackMap } from '../../types/Fallback';
+import type { BlocksRegistry } from './ContentPage';
+
+interface FallbackData {
+  key: string;
+  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 async function loadBlockFallback(blockName: string): Promise<FallbackMap | undefined> {
+  try {
+    const blockFallback = await import(`../${blockName}/${blockName}.fallback`);
+
+    return blockFallback && blockFallback['fallback']
+      ? await blockFallback['fallback']()
+      : undefined;
+  } catch (error) {
+    return undefined;
+  }
+}
+
+export function getPageFallbackMap(blocksFallbackMap: Array<FallbackMap | undefined>): FallbackMap {
+  return blocksFallbackMap
+    .filter((m): m is FallbackMap => Boolean(m))
+    .reduce((result, fallbackMap) => {
+      for (const [key, fetcher] of Object.entries(fallbackMap)) {
+        if (!result[key]) {
+          result[key] = fetcher;
+        }
+      }
+
+      return result;
+    }, {});
+}

package/src/components/ErrorBlock/ErrorBlockContent.ts

@@ -1,5 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Изображение
@@ -7,6 +8,20 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 export type ErrorImageDef = {
   /** @default Image */
   errorContentType: 'Image';
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 460
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 276,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
+   * }
+   */
   image?: Picture;
 };
 
@@ -41,12 +56,10 @@ export type ErrorType =
 /**
  * @title Блок ошибки
  */
-export interface ErrorBlockContent {
-  /** @title Заголовок */
-  title?: string;
+export type ErrorBlockContent = TitleProps & {
   /** @title Описание */
   subtitle?: string;
   error?: ErrorContentDef;
   /** @title Кнопка */
   button?: ButtonProps;
-}
+};

package/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,10 +1,9 @@
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Курсы обмена валют
  */
-export interface ExchangeRateTileContent {
-  /** @title Заголовок */
-  title?: string;
+export type ExchangeRateTileContent = TitleProps & {
   button?: ButtonProps;
-}
+};

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,6 +1,6 @@
 import { Input } from '../../ui-kit/Input/Input';
-import { Select } from '../../ui-kit/Select/Select';
-import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import { SelectCustom } from '../../ui-kit/SelectCustom/SelectCustom';
+import type { OptionProps } from '../../ui-kit/SelectCustom/SelectCustom';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 
@@ -15,28 +15,25 @@ interface InputProps {
 
 export function renderInput(props: InputProps) {
   const { placeholder, rates, selected, value, setValue, setSelected } = props;
+  const ratesOptions: OptionProps[] = rates.map((_) => ({ key: _.code ?? '', text: _.code ?? '' }));
+  const selectedValue: OptionProps = { key: selected, text: selected };
 
   return (
-    <div className="relative flex items-center">
+    <div className="relative flex">
       <Input
-        className="shrink-0 h-13 border pl-4 pt-4 pb-4 rounded-md text-l w-full appearance-none -mr-12"
+        className="shrink-0 h-14 pl-4 pt-4 pb-4 text-l w-full appearance-none mr-[-90px]"
         placeholder={placeholder}
         type="text"
         value={value}
         onChange={setValue}
       />
-      {rates.length ? (
-        <Select
-          className="shrink-0 w-20 h-9 -translate-x-8 bg-transparent"
-          value={selected}
-          onChange={(_) => setSelected(_ as Currency)}
-        >
-          {rates.map((_, i) => (
-            <SelectOption key={String(i)} value={_.code}>
-              {_.code}
-            </SelectOption>
-          ))}
-        </Select>
+      {ratesOptions.length ? (
+        <SelectCustom
+          isBorder={false}
+          onChange={(_) => setSelected(_.key as Currency)}
+          options={ratesOptions}
+          value={selectedValue}
+        />
       ) : null}
     </div>
   );

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

@@ -9,6 +9,7 @@ import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
 import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { Fallback } from '../../types/Fallback';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
@@ -25,8 +26,10 @@ export const Footer = JSX<FooterProps>(
     socialMedia,
     context,
     horizontalNavigationTitle,
+    page,
   }) => {
-    const sitemap = useSitemap();
+    const fallback: Fallback | undefined = page?.fallback;
+    const sitemap = useSitemap(fallback);
     const dispositions = sitemap?.dispositions;
 
     return (

package/src/components/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import type { Fallback } from '../../types/Fallback';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
@@ -24,8 +25,11 @@ export const Footer = JSX<FooterProps>(
     mobileApps,
     topItems,
     context,
+    page,
     ...rest
   }) => {
+    const fallback: Fallback | undefined = page?.fallback;
+
     return (
       <BlockWrapper
         tag="footer"
@@ -47,7 +51,7 @@ export const Footer = JSX<FooterProps>(
               Мобильное приложение
             </SocialMedia>
           </div>
-          <Sitemap className="pt-[3px]" context={context} items={topItems} />
+          <Sitemap className="pt-[3px]" context={context} items={topItems} fallback={fallback} />
         </div>
         <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} context={context} />
         <TextInformation links={documents} context={context} />

package/src/components/Footer/FooterContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
+import type { DescriptionProps } from '../../model/HeadlineType';
 
 /**
  * @title Тип контакта
@@ -14,13 +15,11 @@ export type ContactType = 'tel' | 'email';
 /**
  * @title Контакт
  */
-export interface ContactInfo {
+export type ContactInfo = DescriptionProps & {
   /** @title Текст */
   text?: string;
   type?: ContactType;
-  /** @title Описание */
-  description?: string;
-}
+};
 
 /**
  * @required ["href"]
@@ -30,10 +29,7 @@ export type SocialMedia = Omit<LinkProps, 'text'>;
 /**
  * @title Пункт подменю
  */
-export interface SubMenuItem extends LinkProps {
-  /** @title Иконка подменю */
-  icon?: Picture;
-}
+export type SubMenuItem = LinkProps & IconProps & {};
 
 /**
  * @title Подвал

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

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
-import { HorizontalNavigationLink } from './HorizontalNavigationLink';
+import type { TitleProps } from '../../model/HeadlineType';
 
-export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
-  title?: string;
-}
+export interface HorizontalNavigationProps extends FooterLink, UniBlockProps, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '', context }) => {

package/src/components/Footer/HorizontalNavigation.tsx

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
-import { HorizontalNavigationLink } from './HorizontalNavigationLink';
+import type { TitleProps } from '../../model/HeadlineType';
 
-export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
-  title?: string;
-}
+export interface HorizontalNavigationProps extends FooterLink, UniBlockProps, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ links, className = '', context }) => {

package/src/components/Footer/Sitemap.tsx

@@ -5,13 +5,15 @@ import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
+import type { Fallback } from '../../types/Fallback';
 
 export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
+  fallback?: Fallback;
 }
 
-export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) => {
-  const sitemap = useSitemap();
+export const Sitemap = JSX<SitemapProps>(({ className = '', items, fallback, context }) => {
+  const sitemap = useSitemap(fallback);
   const mergedItems = mergeTopItems(sitemap.topItems, items);
   const linkParams = {
     router: context.useRouter(),

package/src/components/Gallery/GalleryContent.ts

@@ -2,6 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Элемент списка
@@ -16,19 +17,19 @@ export interface GalleryItemProps {
 /**
  * @title Карточка
  */
-export interface GalleryCardProps {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type GalleryCardProps = HeadlineCommonProps & {
   /**
-   * @default
-   * {
-   *  format: "webp",
-   *  size: {
-   *    width: 140,
-   *    height: 140
-   *   }
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 140
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 84,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
    * }
    */
   image?: Picture;
@@ -42,16 +43,12 @@ export interface GalleryCardProps {
   /** @title Список */
   items?: GalleryItemProps[];
   version?: BlockVersion;
-}
+};
 
 /**
  * @title Галерея
  */
-export interface GalleryContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type GalleryContent = HeadlineCommonProps & {
   /**
    * @title Карточки
    * @minItems 3
@@ -59,4 +56,4 @@ export interface GalleryContent {
   cards?: GalleryCardProps[];
   /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
   orientation?: ListOrientation; //TODO: for mobile
-}
+};

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -1,24 +1,23 @@
-import type { TitleProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 
-interface Month {
+export interface Month {
   /** @title Название месяца */
   text?: string;
   /**
    * @title Изображение календарного месяца
-   * @default
-   * {
-   *  format: "webp",
-   *  size: {
-   *    width: 210,
-   *    height: 190
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 210
+   *       "height": 190
    *   }
    * }
    */
   image?: Picture;
 }
 
-interface CalendarItem {
+export interface CalendarItem {
   /** @title Месяц */
   month?: Month[];
   /** @title Основной текст */
@@ -30,9 +29,7 @@ interface CalendarItem {
 /**
  * @title Льготный период
  */
-export interface GracePeriodContent extends TitleProps {
-  /** @title Описание */
-  description?: string;
+export type GracePeriodContent = HeadlineCommonProps & {
   /** @title Календарь */
   calendar?: CalendarItem[];
-}
+};

package/src/components/Header/Header.fallback.ts

@@ -0,0 +1,14 @@
+import { readFile } from 'fs/promises';
+import { projectSettings } from '../../ProjectSettings';
+import type { FallbackMap } from '../../types/Fallback';
+
+export const fallback = (): FallbackMap => ({
+  [`/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`]: async () => {
+    const data = await readFile(
+      `./content/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`,
+      'utf-8',
+    );
+
+    return JSON.parse(data);
+  },
+});

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

@@ -6,6 +6,7 @@ import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
+import type { Fallback } from '../../types/Fallback';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
 import { getAccordionItems } from '../../utils/getAccordionItems';
@@ -17,9 +18,10 @@ import { HeaderTop } from './HeaderTop';
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems }) => {
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, page }) => {
     const router = context.useRouter();
-    const sitemap = useSitemap();
+    const fallback: Fallback | undefined = page?.fallback;
+    const sitemap = useSitemap(fallback);
     const dispositions = sitemap?.dispositions;
     const { handlerDecorator } = context;
 

package/src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import type { UniBlockProps } from '../../types';
+import type { Fallback } from '../../types/Fallback';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
@@ -28,10 +29,12 @@ export const Header = JSX<HeaderProps>(
     context,
     topItems,
     logo,
+    page,
     ...rest
   }) => {
     const router = context.useRouter();
-    const sitemap = useSitemap();
+    const fallback: Fallback | undefined = page?.fallback;
+    const sitemap = useSitemap(fallback);
     const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
@@ -53,7 +56,9 @@ export const Header = JSX<HeaderProps>(
       <BlockWrapper
         tag="header"
         context={context}
-        className={`pt-6 pb-5 px-20 ${bgColor} ${className}`}
+        className={`pt-6 px-20 ${bgColor} ${className} ${
+          showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'
+        }`}
         {...rest}
       >
         <div className="container">

package/src/components/Header/HeaderContent.ts

@@ -1,14 +1,12 @@
 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';
-import type { Picture } from '../../model/Picture';
 
 /**
  * @title Пункт подменю
  */
-export interface SubMenuItem extends LinkProps {
-  icon?: Picture;
-}
+export type SubMenuItem = LinkProps & IconProps & {};
 
 /**
  * @title Ссылка дополнительного меню
@@ -19,35 +17,29 @@ export interface DispositionItem extends LinkProps {
   icon?: Picture;
 }
 
+/**
+ * @title Логотип
+ */
+export interface Logo {
+  /** @title Иконка логотипа */
+  image?: Picture;
+  /** @title Текст логотипа */
+  title?: string;
+}
+
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent extends SitemapProps {
-  /** @title Логотип */
-  logo?: {
-    /** @title Иконка логотипа */
-    image?: Picture;
-    /**
-     * @title Текст логотипа
-     */
-    title?: string;
-  };
+  logo?: Logo;
   /**
    * @title Город по-умолчанию
    * @default Москва
    */
   defaultLocation?: string;
-  /**
-   * @title Показывать подменю
-   * @hidden
-   * @default true
-   */
+  /** @hidden */
   showSubMenu?: boolean;
-  /**
-   * @title Фон элемента
-   * @hidden
-   * @default white
-   */
+  /** @hidden */
   bgColor?: BgColorVersion;
 }

package/src/components/Headline/HeadlineContent.ts

@@ -1,16 +1,16 @@
-import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { AlignType } from '../../model/AlignType';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { HeadlineProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
 
 /**
  * @title Заголовок
  */
-export type HeadlineContent = HeadlineProps &
-  ImageContent & {
-    align?: AlignType;
-    bgColorHeadline?: BlockVersionWithTransparent;
-    /** @hidden */
-    as?: HeadingTagType;
-  };
+export type HeadlineContent = HeadlineProps & {
+  image?: Picture;
+  align?: AlignType;
+  bgColorHeadline?: BlockVersionWithTransparent;
+  /** @hidden */
+  as?: HeadingTagType;
+};

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,12 +1,11 @@
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Кнопка выбора программы
  */
-export type CardItem = {
-  /** @title Иконка */
-  icon?: Picture;
+export type CardItem = IconProps & {
   /** @title Страховой взнос */
   fee?: number;
   /** @title Страховая сумма */
@@ -18,21 +17,17 @@ export type CardItem = {
 /**
  * @title Вкладка
  */
-export interface InsuranceAmountBlockTabs {
-  /** @title Заголовок вкладки */
-  title?: string;
+export type InsuranceAmountBlockTab = TitleProps & {
   /** @title Содержимое вкладки */
   cards?: CardItem[];
-}
+};
 
 /**
  * @title Страховые суммы
  */
-export interface InsuranceAmountBlockContent {
-  /** @title Заголовок */
-  title?: string;
+export type InsuranceAmountBlockContent = TitleProps & {
   /** @title Список вкладок */
-  insuranceTabs?: InsuranceAmountBlockTabs[];
+  insuranceTabs?: InsuranceAmountBlockTab[];
   /** @title Кнопка */
   button?: ButtonProps;
-}
+};

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -6,9 +6,9 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import type { CardItem, InsuranceAmountBlockTabs } from './InsuranceAmountBlockContent';
+import type { CardItem, InsuranceAmountBlockTab } from './InsuranceAmountBlockContent';
 
-export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {
+export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTab, UniBlockProps {
   button?: ButtonProps;
 }
 
@@ -119,7 +119,7 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
     >
       {slide?.icon ? (
         <Img
-          className="p-6 rounded-full bg-secondary-light mr-[30px]"
+          className="p-5 rounded-full bg-secondary-light mr-[30px]"
           image={slide.icon}
           width="108"
           height="108"
@@ -147,7 +147,7 @@ function renderValueBlock(title: string, sum: number) {
 function renderDoneIcon(isActive: boolean) {
   return isActive ? (
     <Img
-      className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`}
+      className={`h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`}
       image="DoneIcon"
       width="24"
       height="24"

package/src/components/MiniGallery/MiniGalleryContent.ts

@@ -1,7 +1,12 @@
-import type { GalleryContent } from '../Gallery/GalleryContent';
+import type { GalleryCardProps, GalleryContent } from '../Gallery/GalleryContent';
 
 /**
  * @title Мини-галерея
- * @minItems 4
  */
-export type MiniGalleryContent = GalleryContent;
+export interface MiniGalleryContent extends GalleryContent {
+  /**
+   * @title Карточки
+   * @minItems 4
+   */
+  cards?: GalleryCardProps[];
+}