@redneckz/wildless-cms-uni-blocks 0.2.75 → 0.2.76

package/src/components/Gallery/Gallery.fixture.tsx

@@ -0,0 +1,215 @@
+import { context } from '../../setup-fixture';
+
+import { Gallery, GalleryProps } from './Gallery';
+import { Gallery as MobileGallery } from './Gallery.mobile';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 140,
+    height: 140,
+  },
+};
+
+const defaultItems = [
+  'Качественные фермерские продукты напрямую от производителей',
+  'Самая большая база сельских туров по России',
+  'Площадки для создания комфортной жизни за городом',
+];
+
+const defaultProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+  ],
+};
+
+const textAndButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+    },
+  ],
+};
+
+const listAndButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+  ],
+};
+
+const textAndNoButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+  ],
+};
+
+const onlyTitleProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+  ],
+};
+
+export default {
+  default: <Gallery {...defaultProps} />,
+  'text and button': <Gallery {...textAndButtonProps} />,
+  'list and button': <Gallery {...listAndButtonProps} />,
+  'text and no button': <Gallery {...textAndNoButtonProps} />,
+  'only title': <Gallery {...onlyTitleProps} />,
+  mobile: <MobileGallery {...defaultProps} />,
+};

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

@@ -0,0 +1,71 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { GalleryProps } from './Gallery';
+import type { GalleryCard } from './GalleryContent';
+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';
+
+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.href ? (
+        <Button className="mt-6" text="Подробнее" version="secondary" href={card.href} />
+      ) : 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/src/components/Gallery/Gallery.tsx

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { GalleryContent } from './GalleryContent';
+import { GalleryInner } from './GalleryInner';
+import type { UniBlockProps } from '../../types';
+
+export interface GalleryProps extends GalleryContent, UniBlockProps {}
+
+export const Gallery = JSX<GalleryProps>((props) => <GalleryInner {...props} version="normal" />);

package/src/components/Gallery/GalleryContent.ts

@@ -0,0 +1,15 @@
+import type { Picture } from '../../model/Picture';
+
+export interface GalleryCard {
+  title?: string;
+  description?: string;
+  image?: Picture;
+  href?: string;
+  items?: string[];
+}
+
+export interface GalleryContent {
+  title?: string;
+  description?: string;
+  cards?: GalleryCard[];
+}

package/src/components/Gallery/GalleryInner.tsx

@@ -0,0 +1,135 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { GalleryCard, GalleryContent } from './GalleryContent';
+import type { GalleryVersion } from '../../model/GalleryVersion';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+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';
+
+export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
+  version?: GalleryVersion;
+}
+
+const cardStyleMap: Record<GalleryVersion, string> = {
+  normal: 'min-w-[364px] w-[364px]',
+  mini: 'min-w-[260px] w-[260px]',
+};
+
+const cardWidthMap: Record<GalleryVersion, number> = {
+  normal: 380,
+  mini: 276,
+};
+
+const galleryLengthForScrollMap: Record<GalleryVersion, number> = {
+  normal: 3,
+  mini: 4,
+};
+
+export const GalleryInner = JSX<GalleryInnerProps>(
+  ({ title, description, context, cards = [], className, version = 'normal' }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    function handleNextClick() {
+      setActiveCardIndex(activeCardIndex + 1);
+    }
+
+    function 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-12 overflow-hidden ${className}`}
+      >
+        <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-3">{description}</div>
+          ) : null}
+        </div>
+        <div
+          // Need to place all cards at the center if count of cards less than 4
+          className={`flex ${
+            cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
+          } duration-1000`}
+          // All cards has same width
+          style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
+          role="list"
+        >
+          {cards?.map((card, i) => renderCard(card, i, version))}
+        </div>
+        {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"></div>
+      </section>
+    );
+  },
+);
+
+function renderCard(card: GalleryCard, i: number, version: GalleryVersion) {
+  return (
+    <div
+      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`}
+      role="listitem"
+      key={String(i)}
+    >
+      <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 ? (
+          <section className="max-w-[308px] mt-2" role="list">
+            {card.items.map(renderItem)}
+          </section>
+        ) : null}
+      </div>
+      {card.href ? (
+        <Button className="mt-6" text="Подробнее" version="secondary" href={card.href} />
+      ) : null}
+    </div>
+  );
+}
+
+function renderItem(item: string, i: number) {
+  return (
+    <BlockItem key={String(i)}>
+      <span className="text-sm text-secondary-text">{item}</span>
+    </BlockItem>
+  );
+}

package/src/components/Header/Header.fixture.tsx

@@ -0,0 +1,21 @@
+import { context } from '../../setup-fixture';
+import { Header } from './Header';
+
+export default (
+  <Header
+    context={context}
+    defaultLocation="Москва"
+    topItems={[
+      {
+        href: 'https://rshb.ru/',
+        text: 'Бизнес клиентам',
+        target: '_blank',
+      },
+      {
+        href: 'https://rshb.ru/',
+        text: 'Частным клиентам',
+        target: '_blank',
+      },
+    ]}
+  />
+);

package/src/components/Header/Header.tsx

@@ -0,0 +1,59 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { mergeTopItems } from '../../mergeTopItems';
+import type { UniBlockProps } from '../../types';
+import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import { Logo } from '../../ui-kit/Logo/Logo';
+import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { useLink } from '../../hooks/useLink';
+import { useSitemap } from '../../hooks/useSitemap';
+import type { HeaderContent } from './HeaderContent';
+import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
+import { isSubItemActive } from './isSubItemActive';
+import { isTopItemActive } from './isTopItemActive';
+
+export interface HeaderProps extends HeaderContent, UniBlockProps {}
+
+export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, topItems }) => {
+  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 = subItems?.find(isSubItemActive(router));
+
+  const topMenu = mergedItems.map((_, i) => (
+    <TopItem
+      key={String(i)}
+      active={_ === activeTopItem}
+      {...useLink({ router, handlerDecorator }, _)}
+      ariaLabel={_.text}
+    />
+  ));
+
+  const subMenu = subItems?.map((_) => (
+    <HeaderItem
+      key={_.href}
+      className="mr-8"
+      active={_ === activeSubItem}
+      {...useLink({ router, handlerDecorator }, _)}
+    />
+  ));
+
+  return (
+    <header className={`pt-5 pb-8 px-20 bg-white ${className || ''}`}>
+      <div className="flex items-center">
+        <Logo className="mr-8" />
+        {topMenu}
+        <HeaderSecondaryMenu
+          context={context}
+          className="ml-auto"
+          defaultLocation={defaultLocation}
+        />
+      </div>
+      <div className="mt-5 h-[1px] bg-main-divider" />
+      <nav className="mt-5">{subMenu}</nav>
+    </header>
+  );
+});

package/src/components/Header/HeaderContent.ts

@@ -0,0 +1,5 @@
+import { SitemapContent } from '../../model/SitemapContent';
+
+export interface HeaderContent extends SitemapContent {
+  defaultLocation?: string;
+}

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -0,0 +1,56 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
+
+interface HeaderSecondaryMenuContent {
+  defaultLocation?: string;
+  className?: string;
+}
+
+export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent, UniBlockProps {}
+
+export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
+  ({ context, className, defaultLocation = '' }) => {
+    const [city, getCity] = context.useGeolocation(defaultLocation);
+
+    return (
+      <div className={`flex items-center ${className || ''}`}>
+        <TopItem
+          className="mr-5"
+          flat={true}
+          href="#"
+          text={city}
+          ariaLabel="Местоположение"
+          onClick={getCity}
+        />
+        <TopItem
+          className="mr-7"
+          flat={true}
+          href="#"
+          text="Офисы и банкоматы"
+          ariaLabel="Список всех доступных офисов и банкоматов"
+        />
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-primary-text hover:text-primary-main"
+          ariaLabel="Поиск по сайту"
+        >
+          <Icon name="LoupeIcon" aria-hidden="true" />
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-primary-text hover:text-primary-main"
+          ariaLabel="Профиль"
+        >
+          <Icon name="ProfileIcon" aria-hidden="true" />
+        </HeaderSecondaryMenuButton>
+        <HeaderSecondaryMenuButton
+          className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
+          ariaLabel="Дополнительные ссылки"
+        >
+          <Icon name="GridIcon" aria-hidden="true" />
+        </HeaderSecondaryMenuButton>
+      </div>
+    );
+  },
+);

package/src/components/Header/isSubItemActive.ts

@@ -0,0 +1,7 @@
+import type { Router } from '../ContentPage/ContentPageContext';
+import type { LinkContent } from '../../model/LinkContent';
+import { isHrefActive } from '../../utils/url';
+
+export function isSubItemActive(router: Router) {
+  return (subItem: LinkContent): boolean => isHrefActive(subItem.href, router);
+}

package/src/components/Header/isTopItemActive.ts

@@ -0,0 +1,8 @@
+import type { Router } from '../ContentPage/ContentPageContext';
+import type { LinkContent } from '../../model/LinkContent';
+import { isHrefActive } from '../../utils/url';
+
+export function isTopItemActive(router: Router) {
+  return (topItem: LinkContent): boolean =>
+    isHrefActive(topItem.href, router, (topItemHref, baseHref) => baseHref.startsWith(topItemHref));
+}

package/src/components/LikeControl/LikeControl.fixture.tsx

@@ -0,0 +1,5 @@
+import { context } from '../../setup-fixture';
+
+import { LikeControl } from './LikeControl';
+
+export default <LikeControl context={context} />;

package/src/components/LikeControl/LikeControl.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LikeButton } from '../../ui-kit/Button/LikeButton';
+import type { UniBlockProps } from '../../types';
+
+export const LikeControl = JSX<UniBlockProps>(({ className, context }) => {
+  const likeService = context.useLikeService();
+
+  return (
+    <div
+      className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
+        className || ''
+      }`}
+    >
+      <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
+      <LikeButton
+        onClick={likeService.dislike}
+        className="rotate-180"
+        ariaLabel="Поставить отметку «дизлайк»"
+      />
+      <span className="select-none">{likeService.likeCount}</span>
+    </div>
+  );
+});