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

package/src/Gallery.fixture.tsx

@@ -1,215 +0,0 @@
-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/Gallery.mobile.tsx

@@ -1,71 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { GalleryProps } from './Gallery';
-import type { GalleryCard } from './GalleryContent';
-import { BlockItem } from './ui-kit/BlockItem';
-import { Button } from './ui-kit/Button';
-import { Img } from './ui-kit/Img';
-import { Title } from './ui-kit/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/Gallery.tsx

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

package/src/GalleryContent.ts

@@ -1,15 +0,0 @@
-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/GalleryInner.tsx

@@ -1,135 +0,0 @@
-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/ArrowButton';
-import { BlockItem } from './ui-kit/BlockItem';
-import { Button } from './ui-kit/Button';
-import { Img } from './ui-kit/Img';
-import { Title } from './ui-kit/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/Header/Header.fixture.tsx

@@ -1,21 +0,0 @@
-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/Header/Header.tsx

@@ -1,59 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { mergeTopItems } from '../mergeTopItems';
-import type { UniBlockProps } from '../types';
-import { HeaderItem } from '../ui-kit/HeaderItem';
-import { Logo } from '../ui-kit/Logo';
-import { TopItem } from '../ui-kit/TopItem';
-import { useLink } from '../useLink';
-import { useSitemap } from '../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/Header/HeaderContent.ts

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

package/src/Header/HeaderSecondaryMenu.tsx

@@ -1,56 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../types';
-import { Icon } from '../ui-kit/Icon';
-import { TopItem } from '../ui-kit/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/Header/isSubItemActive.ts

@@ -1,7 +0,0 @@
-import type { Router } from '../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/Header/isTopItemActive.ts

@@ -1,8 +0,0 @@
-import type { Router } from '../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/LikeControl.fixture.tsx

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

package/src/LikeControl.tsx

@@ -1,23 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { LikeButton } from './ui-kit/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>
-  );
-});