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

package/src/components/Footer/Contacts.tsx

@@ -1,39 +1,28 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ContactInfo } from './FooterContent';
 
-export interface ContactsProps extends UniBlockProps {
+export interface ContactsProps {
+  className?: string;
   items?: ContactInfo[];
   hasButton?: boolean;
 }
 
-export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton, context }) => {
-  const router = context.useRouter();
-  const { handlerDecorator } = context;
-
-  return (
-    <div className={className}>
-      {items?.length ? items.map(renderContact) : null}
-      {hasButton ? (
-        <Button
-          version="primary"
-          className="mb-6 w-full"
-          {...useLink(
-            { router, handlerDecorator },
-            {
-              text: 'Обратная связь',
-              href: '/',
-              target: '_blank',
-            },
-          )}
-          ariaLabel="Обратная связь"
-        />
-      ) : null}
-    </div>
-  );
-});
+export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
+  <div className={className}>
+    {items?.length ? items.map(renderContact) : null}
+    {hasButton ? (
+      <Button
+        version="primary"
+        className="mb-6 w-full"
+        href="/"
+        target="_blank"
+        ariaLabel="Обратная связь"
+        text="Обратная связь"
+      />
+    ) : null}
+  </div>
+));
 
 const renderContact = (item: ContactInfo, index: number) => {
   const { type, text, description } = item;

package/src/components/Footer/Footer.fallback.ts

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

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

@@ -1,92 +1,10 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { Footer } from './Footer';
 
-const DEFAULT_ORIGIN = 'https://rshb.ru/';
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Footer
-        className="col-span-12"
-        socialMedia={[
-          { href: 'https://t.me' },
-          { href: 'https://vk.com' },
-          { href: 'https://ok.ru' },
-        ]}
-        contacts={[
-          {
-            text: '+7 (495) 787-7-787',
-            description: 'Для звонков из-за границы',
-            type: 'tel',
-          },
-          {
-            text: '8 (800) 100-01-00',
-            description: 'По России',
-            type: 'tel',
-          },
-          {
-            text: '7787',
-            description: 'Абонентам МТС, Мегафон, Билайн и Tele2',
-            type: 'tel',
-          },
-        ]}
-        horizontalNavigationTitle="Компании Россельхозбанка"
-        relatedEnterprises={[
-          {
-            text: 'РСХБ Страхование',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'РСХБ Страхование жизни',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'РСХБ Управление активами',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'РСХБ Лизинг',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'РСХБ Факторинг',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-        ]}
-        documents={[
-          {
-            text: 'Информация о процентных ставках по договорам банковского вклада с физическими лицами',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'Раскрытие информации профессиональным участником рынка ценных бумаг',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'Раскрытие информации',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'Удостоверяющий центр',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'Финансовая культура',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-        ]}
-        context={context}
-      />
+      <Footer className="col-span-12" />
     </div>
   ),
 };

package/src/components/Footer/Footer.fixture.tsx

@@ -1,149 +1,10 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { Footer } from './Footer';
 
-const DEFAULT_ORIGIN = 'https://rshb.ru/';
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Footer
-        className="col-span-12"
-        topItems={[
-          {
-            href: DEFAULT_ORIGIN,
-            text: 'О банке',
-            target: '_blank',
-            items: [
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'О банке',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Новости',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Офисы и отделения',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Карьера в банке',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Пресс-центр',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Кредитным организациям',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Закупки',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Непрофильные/Профильные нецелевые активы',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Инсайдерам',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Противодействие коррупции',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Меры безопасности',
-              },
-              {
-                href: DEFAULT_ORIGIN,
-                text: 'Залоговое имущество',
-              },
-            ],
-          },
-        ]}
-        socialMedia={[
-          { href: 'https://t.me' },
-          { href: 'https://vk.com' },
-          { href: 'https://ok.ru' },
-        ]}
-        mobileApps={[{ href: 'https://apps.apple.com' }, { href: 'https://play.google.com' }]}
-        contacts={[
-          {
-            text: '+7 (495) 787-7-787',
-            description: 'Для звонков из-за границы',
-            type: 'tel',
-          },
-          {
-            text: '8 (800) 100-01-00',
-            description: 'По России',
-            type: 'tel',
-          },
-          {
-            text: '7787',
-            description: 'Абонентам МТС, Мегафон, Билайн и Tele2',
-            type: 'tel',
-          },
-        ]}
-        relatedEnterprises={[
-          {
-            text: 'РСХБ Страхование',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'РСХБ Страхование жизни',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'РСХБ Управление активами',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'РСХБ Лизинг',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'РСХБ Факторинг',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-        ]}
-        documents={[
-          {
-            text: 'Информация о процентных ставках по договорам банковского вклада с физическими лицами',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'Раскрытие информации профессиональным участником рынка ценных бумаг',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'Раскрытие информации',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'Удостоверяющий центр',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-          {
-            text: 'Финансовая культура',
-            href: DEFAULT_ORIGIN,
-            target: '_blank',
-          },
-        ]}
-        context={context}
-      />
+      <Footer className="col-span-12" />
     </div>
   ),
 };

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

@@ -1,67 +1,55 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { projectSettings } from '../../ProjectSettings';
+import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
+import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 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 type { FooterDataProps } from './FooterDataProps';
 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 {}
 
-export const Footer = JSX<FooterProps>(
-  ({
-    className = '',
-    documents,
-    relatedEnterprises,
-    contacts,
-    socialMedia,
-    context,
-    horizontalNavigationTitle,
-    page,
-  }) => {
-    const fallback: Fallback | undefined = page?.fallback;
-    const sitemap = useSitemap(fallback);
-    const dispositions = sitemap?.dispositions;
+export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
+  const fallback = rest.page?.fallback;
+
+  const sitemap = useSWRResource<SitemapDataProps>(projectSettings.SITEMAP || 'sitemap', fallback);
+  const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
+    useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
-    return (
-      <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
-        <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <AccordionItemsList>
-          {sitemap.topItems?.map((item, i) => (
-            <AccordionItem key={String(i)} context={context} label={item.text}>
-              <LinkList context={context} documents={item.items} />
-            </AccordionItem>
-          ))}
-        </AccordionItemsList>
-        <div>{dispositions?.map(renderSubMenuItem)}</div>
-        <MobileAppTile
-          context={context}
-          title="Мобильное приложение"
-          description="Загрузить для IOS и Android"
-        />
-        <SearchBar context={context} className="grow" />
-        <SocialMedia className="pb-4" media={socialMedia} context={context} />
-        <HorizontalNavigation
-          title={horizontalNavigationTitle}
-          links={relatedEnterprises}
-          context={context}
-        />
-        <TextInformation links={documents} context={context} />
-      </footer>
-    );
-  },
-);
+  return (
+    <footer className={`font-sans px-4 py-[26px] bg-white ${className}`}>
+      <Contacts className="overflow-hidden" items={contacts} hasButton />
+      <AccordionItemsList>
+        {sitemap.topItems?.map((item, i) => (
+          <AccordionItem key={String(i)} label={item.text} {...rest}>
+            <LinkList documents={item.items} {...rest} />
+          </AccordionItem>
+        ))}
+      </AccordionItemsList>
+      <div>{sitemap?.dispositions?.map(renderSubMenuItem)}</div>
+      <MobileAppTile
+        title="Мобильное приложение"
+        description="Загрузить для IOS и Android"
+        {...rest}
+      />
+      <SearchBar className="grow" />
+      <SocialMedia className="pb-4" media={socialMedia} />
+      <HorizontalNavigation title={horizontalNavigationTitle} links={relatedEnterprises} />
+      <TextInformation links={documents} />
+    </footer>
+  );
+});
 
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
@@ -69,13 +57,7 @@ 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={getIconWithVersion({ icon: icon } as Picture)}
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img className="pr-1" image={getIconWithVersion(icon)} width="24" height="24" asSVG />
       ) : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>

package/src/components/Footer/Footer.tsx

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { projectSettings } from '../../ProjectSettings';
+import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { Contacts } from './Contacts';
 import type { FooterContent } from './FooterContent';
+import type { FooterDataProps } from './FooterDataProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { Sitemap } from './Sitemap';
 import { SocialMedia } from './SocialMedia';
@@ -15,47 +17,30 @@ const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
 
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
-export const Footer = JSX<FooterProps>(
-  ({
-    className,
-    documents,
-    relatedEnterprises,
-    contacts,
-    socialMedia,
-    mobileApps,
-    topItems,
-    context,
-    page,
-    ...rest
-  }) => {
-    const fallback: Fallback | undefined = page?.fallback;
+export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
+  const fallback = rest.page?.fallback;
 
-    return (
-      <BlockWrapper
-        tag="footer"
-        context={context}
-        className={`p-9 bg-white font-sans ${className || ''}`}
-        {...rest}
-      >
-        <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
-          <Logo className={LEFT_COL_WIDTH_FULL_HD} />
-          <SearchBar context={context} className="grow" />
-        </div>
-        <div className="flex items-stretch gap-[54px] xl:gap-8">
-          <div className={`${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`}>
-            <Contacts items={contacts} context={context} hasButton />
-            <SocialMedia media={socialMedia} context={context}>
-              Соцсети
-            </SocialMedia>
-            <SocialMedia className="mt-6" media={mobileApps} context={context}>
-              Мобильное приложение
-            </SocialMedia>
-          </div>
-          <Sitemap className="pt-[3px]" context={context} items={topItems} fallback={fallback} />
+  const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems } =
+    useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
+
+  return (
+    <BlockWrapper tag="footer" className={`p-9 bg-white font-sans ${className || ''}`} {...rest}>
+      <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
+        <Logo className={LEFT_COL_WIDTH_FULL_HD} />
+        <SearchBar className="grow" />
+      </div>
+      <div className="flex items-stretch gap-[54px] xl:gap-8">
+        <div className={`${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`}>
+          <Contacts items={contacts} hasButton />
+          <SocialMedia media={socialMedia}>Соцсети</SocialMedia>
+          <SocialMedia className="mt-6" media={mobileApps}>
+            Мобильное приложение
+          </SocialMedia>
         </div>
-        <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} context={context} />
-        <TextInformation links={documents} context={context} />
-      </BlockWrapper>
-    );
-  },
-);
+        <Sitemap className="pt-[3px]" items={topItems} fallback={fallback} />
+      </div>
+      <HorizontalNavigation className="mt-[98px]" links={relatedEnterprises} />
+      <TextInformation links={documents} />
+    </BlockWrapper>
+  );
+});

package/src/components/Footer/FooterContent.ts

@@ -1,7 +1,6 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
-import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
+import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
-import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Тип контакта
@@ -28,21 +27,7 @@ export type SubMenuItem = LinkProps & IconProps;
 
 /**
  * @title Подвал
- * @required ["topItems"]
+ * @hidden
  */
-export interface FooterContent extends SitemapProps {
-  /** @title Обязательные документы */
-  documents?: LinkProps[];
-  /** @title Другие предприятия */
-  relatedEnterprises?: LinkProps[];
-  /** @title Контакты */
-  contacts?: ContactInfo[];
-  /** @title Социальные сети */
-  socialMedia?: LinkCommonProps[];
-  /** @title Мобильные приложения */
-  mobileApps?: LinkCommonProps[];
-  /** @title Заголовок для меню */
-  horizontalNavigationTitle?: string; // TODO: для мобильной версии
-  /** @title Подменю */
-  subMenu?: SubMenuItem[]; // TODO: для мобильной версии
-}
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type FooterContent = {};

package/src/components/Footer/FooterDataProps.ts

@@ -0,0 +1,13 @@
+import { LinkCommonProps, LinkProps } from '../../model/LinkProps';
+import { SitemapDataProps } from '../../services/sitemap/SitemapProps';
+import { ContactInfo, SubMenuItem } from './FooterContent';
+
+export interface FooterDataProps extends SitemapDataProps {
+  documents?: LinkProps[];
+  relatedEnterprises?: LinkProps[];
+  contacts?: ContactInfo[];
+  socialMedia?: LinkCommonProps[];
+  mobileApps?: LinkCommonProps[];
+  horizontalNavigationTitle?: string; // TODO: для мобильной версии
+  subMenu?: SubMenuItem[]; // TODO: для мобильной версии
+}

package/src/components/Footer/FooterLink.ts

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

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

@@ -1,33 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import type { TitleProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
-export interface HorizontalNavigationProps extends FooterLink, UniBlockProps, TitleProps {}
+export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
-  ({ title, links, className = '', context }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-
-    return (
-      <div className={className}>
-        <span className="text-primary-text text-s font-medium">{title}</span>
-        {links?.length ? (
-          <div className="flex flex-col gap-2 pt-3">
-            {links.map((_, i) => (
-              <HorizontalNavigationLink
-                key={String(i)}
-                index={i}
-                className="text-s"
-                {...useLink({ router, handlerDecorator }, _)}
-              />
-            ))}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
+  ({ title, links, className = '' }) => (
+    <div className={className}>
+      <span className="text-primary-text text-s font-medium">{title}</span>
+      {links?.length ? (
+        <div className="flex flex-col gap-2 pt-3">
+          {links.map((_, i) => (
+            <HorizontalNavigationLink key={String(i)} index={i} className="text-s" {..._} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  ),
 );