@redneckz/wildless-cms-uni-blocks 0.2.109 → 0.2.113

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

@@ -0,0 +1,52 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+import type { FooterLink } from './FooterLink';
+
+export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
+  title?: string;
+}
+
+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 font-sans font-medium text-sm">{title}</span>
+        {links?.length ? (
+          <div className="flex flex-col gap-5 py-5">
+            {links.map((_, i) => (
+              <HorizontalNavigationLink
+                key={String(i)}
+                index={i}
+                {...useLink({ router, handlerDecorator }, _)}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+interface HorizontalNavigationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

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

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { IconName } from '../../ui-kit/Icon/IconProps';
+
+const ICONS_MAP: Array<{
+  origins: string[];
+  icon: IconName;
+  label: string;
+  width: string;
+  height: string;
+}> = [
+  {
+    origins: ['t.me', 'telegram.org'],
+    icon: 'TelegramIcon',
+    label: 'Телеграм',
+    width: '20px',
+    height: '16px',
+  },
+  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
+  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
+];
+
+interface MediaButtonProps {
+  href?: string;
+}
+
+export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
+  const { icon, width, height } =
+    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+
+  if (!icon) return null;
+
+  return (
+    <a
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
+    </a>
+  );
+});

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

@@ -0,0 +1,59 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
+import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
+import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+import type { UniBlockProps } from '../../types';
+
+export interface SitemapProps extends UniBlockProps {
+  items?: TopMenuItem[];
+}
+
+export const Sitemap = JSX<SitemapProps>(({ className, items, context }) => {
+  const sitemap = useSitemap(context.useAsyncData);
+  const mergedItems = mergeTopItems(sitemap.topItems, items);
+  const linkParams = {
+    router: context.useRouter(),
+    handlerDecorator: context.handlerDecorator,
+  };
+
+  return (
+    <div className={`flex items-start justify-start gap-11 xl:gap-5 ${className || ''}`}>
+      {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
+    </div>
+  );
+});
+
+const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator }) => {
+  const { text, href, items, target } = c;
+
+  return (
+    <div key={String(index)} className="flex flex-col gap-[14px]">
+      <a
+        className="block font-sans font-medium text-base text-primary-text no-underline"
+        href={href}
+        target={target || '_self'}
+      >
+        {text || `Раздел ${index}`}
+      </a>
+      {items?.map((_, i) => (
+        <ColumnItem key={String(i)} {...useLink({ router, handlerDecorator }, _)} index={i} />
+      ))}
+    </div>
+  );
+};
+
+interface ColumnItemProps extends LinkProps {
+  index?: number;
+}
+
+const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
+  <a
+    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-main no-underline"
+    href={href}
+    target={target || '_self'}
+  >
+    {text || `Раздел ${index}`}
+  </a>
+));

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

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
+import type { UniBlockProps } from '../../types';
+import { MediaButton } from './MediaButton';
+
+export interface SocialMediaProps extends UniBlockProps {
+  media?: Omit<LinkProps, 'text'>[];
+}
+
+export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+  return (
+    <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
+      {media?.map((_, index) => (
+        <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
+      ))}
+    </div>
+  );
+});

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

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
+import type { FooterLink } from './FooterLink';
+
+export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+  return (
+    <div className={`${className || ''}`}>
+      <div className="pt-5 pb-[5px]">
+        <span className="font-sans font-normal text-xs text-secondary-text">
+          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
+        </span>
+      </div>
+      {links?.length ? (
+        <div className={`flex flex-col justify-start items-start gap-5 pt-[5px]`}>
+          {links.map((_, i) => (
+            <TextInformationLink
+              key={String(i)}
+              index={i}
+              {...useLink({ router, handlerDecorator }, _)}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+interface TextInformationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
+  ({ className, index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+        className || ''
+      }`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

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

@@ -0,0 +1,58 @@
+{
+  "title": "Галерея",
+  "description": "Описание",
+  "cards": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 1",
+      "description": "Описание 1",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 2",
+      "description": "Описание 2",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 3",
+      "description": "Описание 3",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 140,
+          "height": 140
+        }
+      },
+      "title": "Заголовок 4",
+      "description": "Описание 4",
+      "href": "/credit-cards",
+      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+    }
+  ]
+}

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

@@ -0,0 +1,69 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+import type { GalleryCard } from './GalleryContent';
+import type { GalleryProps } from './GalleryProps';
+
+export const Gallery = JSX<GalleryProps>(({ title, description, cards = [], className }) => {
+  return (
+    <section
+      className={`relative font-sans text-primary-text bg-white p-4 overflow-hidden ${className}`}
+    >
+      <div className="flex flex-col items-center mb-8">
+        <Title className="font-medium m-0 text-centers">{title}</Title>
+        {description ? (
+          <div className="font-normal text-base max-w-[600px] mt-3">{description}</div>
+        ) : null}
+      </div>
+      <div className="horizontal-list no-scrollbar" role="list">
+        {cards?.map(renderCard)}
+      </div>
+    </section>
+  );
+});
+
+function renderCard(card: GalleryCard, key: number) {
+  return (
+    <div
+      className="box-border horizontal-list-item border-solid border rounded-md border-main-divider p-4 mx-1 flex flex-col justify-between items-stretch"
+      role="listitem"
+      key={key}
+    >
+      <div>
+        {card.image?.src ? (
+          <div className="flex justify-center">
+            <Img className="mb-6" image={card.image} />
+          </div>
+        ) : null}
+        {card.title ? (
+          <h4
+            className={`font-medium text-xl m-0 ${
+              !card.description && !card.items?.length ? 'text-center' : ''
+            }`}
+          >
+            {card.title}
+          </h4>
+        ) : null}
+        {card.description ? (
+          <div className="font-normal text-sm text-secondary-text mt-2">{card.description}</div>
+        ) : null}
+        {card.items?.length ? renderItems(card.items) : null}
+      </div>
+      {card?.button?.href ? <Button className="mt-6" {...card.button} /> : null}
+    </div>
+  );
+}
+
+function renderItems(items: string[] = []) {
+  return (
+    <section className="max-w-[308px] mt-2" role="list">
+      {items.map((item, i) => (
+        <BlockItem key={String(i)}>
+          <span className="text-sm text-secondary-text">{item}</span>
+        </BlockItem>
+      ))}
+    </section>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img';
+import { cardVersionMap } from './constants';
+import type { GalleryCard } from './GalleryContent';
+
+export const GalleryCardInner = JSX<GalleryCard>(
+  ({ title, description, image, items, button, version }) => {
+    const cardVersionClasses = cardVersionMap[version ?? 'primary'];
+
+    return (
+      <div>
+        <div>
+          {image?.src ? (
+            <div className="flex justify-center">
+              <Img className="mb-6" image={image} />
+            </div>
+          ) : null}
+          {title && renderCardTitle(title, description, items)}
+          {description && (
+            <div className={`font-normal text-sm mt-2 ${cardVersionClasses}`}>{description}</div>
+          )}
+          {items?.length ? (
+            <section className={`max-w-[308px] mt-2 ${cardVersionClasses}`} role="list">
+              {items.map((item, i) => renderItem(item, i, version))}
+            </section>
+          ) : null}
+        </div>
+        {button?.text && <Button className="mt-6" {...button} />}
+      </div>
+    );
+  },
+);
+
+function renderCardTitle(title: string, description?: string, items?: string[]) {
+  return (
+    <div
+      className={`font-medium text-xl m-0 ${!description && !items?.length ? 'text-center' : ''}`}
+    >
+      {title}
+    </div>
+  );
+}
+
+function renderItem(item: string, i: number, version?: BlockVersion) {
+  return (
+    <BlockItem key={String(i)} version={version ?? 'primary'}>
+      <span className="text-sm">{item}</span>
+    </BlockItem>
+  );
+}

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

@@ -0,0 +1,59 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { GalleryVersion } from '../../model/GalleryVersion';
+import { Title } from '../../ui-kit/Title/Title';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { Tile } from '../Tile/Tile';
+import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
+import { GalleryCardInner } from './GalleryCardInner';
+import type { GalleryCard } from './GalleryContent';
+import type { GalleryInnerProps } from './GalleryInner';
+
+export interface GalleryContainerProps extends Omit<GalleryInnerProps, 'className'> {
+  activeCardIndex: number;
+}
+
+export interface GalleryCardData {
+  card: GalleryCard;
+  version: GalleryVersion;
+  context: ContentPageContext;
+}
+
+export const GalleryContainer = JSX<GalleryContainerProps>(
+  ({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
+    return (
+      <div>
+        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
+        <div className="flex flex-col items-center mb-8">
+          {title ? <Title className="font-medium m-0 text-center">{title}</Title> : null}
+          {description ? (
+            <div className="font-normal text-base max-w-[600px] mt-2.5">{description}</div>
+          ) : null}
+        </div>
+        <div
+          className={`flex ${
+            cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
+          } duration-1000`}
+          style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
+          role="list"
+        >
+          {cards?.map((card, i) => renderCard({ card, version, context }, i))}
+        </div>
+      </div>
+    );
+  },
+);
+
+function renderCard({ card, version, context }: GalleryCardData, i: number) {
+  return (
+    <Tile
+      context={context}
+      className={`box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between
+        items-stretch ${cardStyleMap[version]} w-full col-span-4`}
+      version={card.version}
+      key={String(i)}
+      role="listitem"
+    >
+      <GalleryCardInner {...card} />
+    </Tile>
+  );
+}

package/mobile/src/components/Gallery/GalleryContent.ts

@@ -0,0 +1,34 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Карточка
+ */
+export interface GalleryCard {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  image?: Picture;
+  /** @title Кнопка */
+  button?: BaseTileIconButton;
+  /** @title Список */
+  items?: string[];
+  version?: BlockVersion;
+}
+
+/**
+ * @title Галерея
+ */
+export interface GalleryContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  /**
+   * @title Карточки
+   * @minItems 4
+   */
+  cards?: GalleryCard[];
+}

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

@@ -0,0 +1,57 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { GalleryVersion } from '../../model/GalleryVersion';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { galleryLengthForScrollMap } from './constants';
+import { GalleryContainer } from './GalleryContainer';
+import type { GalleryContent } from './GalleryContent';
+
+export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
+  version?: GalleryVersion;
+}
+
+export const GalleryInner = JSX<GalleryInnerProps>(
+  ({ context, cards = [], className, version = 'normal', ...rest }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+    const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+    const isGalleryScrollAvailable = cards?.length > galleryLengthForScrollMap[version];
+
+    const showNextButton =
+      isGalleryScrollAvailable &&
+      cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
+
+    const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
+
+    return (
+      <section
+        className={`relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`}
+      >
+        <GalleryContainer
+          context={context}
+          cards={cards}
+          version={version}
+          activeCardIndex={activeCardIndex}
+          {...rest}
+        />
+        {showPrevButton && (
+          <ArrowButton
+            className="absolute top-1/2 left-8 rotate-180"
+            onClick={handlePrevClick}
+            ariaLabel="Пролистать влево"
+          />
+        )}
+        {showNextButton && (
+          <ArrowButton
+            className="absolute top-1/2 right-1 z-10"
+            onClick={handleNextClick}
+            ariaLabel="Пролистать вправо"
+          />
+        )}
+        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+      </section>
+    );
+  },
+);

package/mobile/src/components/Gallery/GalleryProps.ts

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

package/mobile/src/components/Gallery/constants.ts

@@ -0,0 +1,22 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { GalleryVersion } from '../../model/GalleryVersion';
+
+export const cardVersionMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: '',
+};
+
+export const galleryLengthForScrollMap: Record<GalleryVersion, number> = {
+  normal: 3,
+  mini: 4,
+};
+
+export const cardStyleMap: Record<GalleryVersion, string> = {
+  normal: 'min-w-[364px] w-[364px]',
+  mini: 'min-w-[260px] w-[260px]',
+};
+
+export const cardWidthMap: Record<GalleryVersion, number> = {
+  normal: 380,
+  mini: 276,
+};

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

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+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 type { UniBlockProps } from '../../types';
+import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
+import { getAccordionItems } from '../../utils/getAccordionItems';
+import { Accordion } from '../Accordion/Accordion';
+import { HeaderBurger } from './HeaderBurger';
+import type { HeaderContent } from './HeaderContent';
+import { HeaderTop } from './HeaderTop';
+
+export interface HeaderProps extends HeaderContent, UniBlockProps {}
+
+export const Header = JSX<HeaderProps>(
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
+    const router = context.useRouter();
+    const sitemap = useSitemap(context.useAsyncData);
+    const { handlerDecorator } = context;
+
+    const mergedItems = mergeTopItems(sitemap.topItems, topItems);
+    const activeTopItem = mergedItems.find(isTopItemActive(router));
+    const subItems = activeTopItem?.items;
+    const activeSubItem = findActiveSubItem(router)(subItems);
+
+    const [burgerMenuShow, setBurgerMenuShow] = context.useState(false);
+
+    const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+
+    return (
+      <header className={`${bgColor} ${className}`}>
+        <div className="container px-4 py-0">
+          <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+          <nav className="flex items-center m-0 p-0 overflow-x-scroll overflow-y-hidden w-full h-[50px]">
+            <div className="flex">
+              {subItems?.map((_, i) =>
+                renderSubItem(
+                  {
+                    ...useLink({ router, handlerDecorator }, _),
+                    active: _ === activeSubItem,
+                    bgColor,
+                  },
+                  i,
+                ),
+              )}
+            </div>
+          </nav>
+        </div>
+        {burgerMenuShow ? (
+          <HeaderBurger
+            context={context}
+            onClick={toggleBurgerMenu}
+            burgerSubMenu={burgerSubMenu}
+            defaultLocation={defaultLocation}
+          >
+            <Accordion
+              context={context}
+              accordionItems={getAccordionItems(topItems)}
+              className="p-0 pt-0 pb-0 mb-4"
+            />
+          </HeaderBurger>
+        ) : null}
+      </header>
+    );
+  },
+);
+
+const renderSubItem = (item: TopItemProps, i: number) => (
+  <HeaderItem key={String(i)} className="mr-8 whitespace-nowrap text-sm" {...item} />
+);