@redneckz/wildless-cms-uni-blocks 0.2.70 → 0.2.73

package/src/Footer/FooterContent.ts

@@ -0,0 +1,15 @@
+import type { LinkContent } from '../model/LinkContent';
+import type { SitemapContent } from '../model/SitemapContent';
+
+export interface ContactInfo {
+  text: string;
+  type: 'tel' | 'email';
+  description: string;
+}
+
+export interface FooterContent extends SitemapContent {
+  documents?: LinkContent[];
+  relatedEnterprises?: LinkContent[];
+  contacts?: ContactInfo[];
+  socialMedia?: Omit<LinkContent, 'text'>[];
+}

package/src/Footer/FooterLink.ts

@@ -1,4 +1,4 @@
-import type { LinkContent } from '../types';
+import type { LinkContent } from '../model/LinkContent';
 import type { UniBlockProps } from '../types';
 
 export interface FooterLink extends UniBlockProps {

package/src/Footer/HorizontalNavigation.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { FooterLink } from './FooterLink';
+import { LinkContent } from '../model/LinkContent';
 import { useLink } from '../useLink';
-import { LinkContent } from '../types';
+import type { FooterLink } from './FooterLink';
 
 export const HorizontalNavigation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();

package/src/Footer/Sitemap.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Router, HandlerDecorator } from '../ContentPageContext';
 import { mergeTopItems } from '../mergeTopItems';
-import type { LinkContent, TopMenuItem, UniBlockProps } from '../types';
+import type { LinkContent } from '../model/LinkContent';
+import type { TopMenuItem } from '../model/SitemapContent';
+import type { UniBlockProps } from '../types';
 import { useLink } from '../useLink';
 import { useSitemap } from '../useSitemap';
 export interface SitemapProps extends UniBlockProps {

package/src/Footer/SocialMedia.tsx

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkContent, UniBlockProps } from '../types';
-import { Icon, IconName } from '../ui-kit/Icon';
+import type { LinkContent } from '../model/LinkContent';
+import type { UniBlockProps } from '../types';
+import { Icon } from '../ui-kit/Icon';
+import type { IconName } from '../ui-kit/IconProps';
 import { useLink } from '../useLink';
 
 const ICONS_MAP: Array<{ origins: string[]; icon: IconName; label: string }> = [

package/src/Footer/TextInformation.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkContent } from '../types';
+import type { LinkContent } from '../model/LinkContent';
 import { useLink } from '../useLink';
 import { FooterLink } from './FooterLink';
 

package/src/Gallery.fixture.tsx

@@ -2,7 +2,7 @@ import { context } from './setup-fixture';
 
 import { Gallery, GalleryProps } from './Gallery';
 import { Gallery as MobileGallery } from './Gallery.mobile';
-import { Picture } from './types';
+import { Picture } from './model/Picture';
 
 const image: Picture = {
   src: 'money-1.png',

package/src/Gallery.mobile.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { GalleryCard, GalleryProps } from './Gallery';
+import type { GalleryProps } from './Gallery';
+import type { GalleryCard } from './GalleryContent';
 import { Img } from './Img';
 import { BlockItem } from './ui-kit/BlockItem';
 import { Button } from './ui-kit/Button';

package/src/Gallery.tsx

@@ -1,137 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from './Img';
-import { Picture, UniBlockProps } from './types';
-import { ArrowButton } from './ui-kit/ArrowButton';
-import { BlockItem } from './ui-kit/BlockItem';
-import { Button } from './ui-kit/Button';
-import { Title } from './ui-kit/Title';
-
-export interface GalleryCard {
-  title?: string;
-  description?: string;
-  image?: Picture;
-  href?: string;
-  items?: string[];
-}
-
-export interface GalleryContent {
-  title?: string;
-  description?: string;
-  cards?: GalleryCard[];
-}
+import { GalleryContent } from './GalleryContent';
+import { GalleryInner } from './GalleryInner';
+import { UniBlockProps } from './types';
 
 export interface GalleryProps extends GalleryContent, UniBlockProps {}
 
-const CARD_WIDTH = 384;
-const GALLERY_LENGTH_FOR_SCROLL = 3;
-
-export const Gallery = JSX<GalleryProps>(
-  ({ title, description, context, cards = [], className }) => {
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
-
-    function handleNextClick() {
-      setActiveCardIndex(activeCardIndex + 1);
-    }
-
-    function handlePrevClick() {
-      setActiveCardIndex(activeCardIndex - 1);
-    }
-
-    const isGalleryScrollAvailable = cards?.length > GALLERY_LENGTH_FOR_SCROLL;
-
-    const showNextButton =
-      isGalleryScrollAvailable && cards?.length - activeCardIndex > GALLERY_LENGTH_FOR_SCROLL;
-
-    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 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
-          // Need to place all cards at the center if count of cards less than 4
-          className={`flex ${
-            cards?.length <= GALLERY_LENGTH_FOR_SCROLL ? 'justify-center' : ''
-          } duration-1000`}
-          // All cards has same width
-          style={{ transform: `translateX(-${activeCardIndex * CARD_WIDTH}px)` }}
-          role="list"
-        >
-          {cards?.map(renderCard)}
-        </div>
-        {showPrevButton && (
-          <ArrowButton
-            className="absolute top-1/2 left-8"
-            onClick={handlePrevClick}
-            ariaLabel="Пролистать влево"
-          />
-        )}
-        {showNextButton && (
-          <ArrowButton
-            className="absolute top-1/2 right-1 z-20 rotate-180"
-            onClick={handleNextClick}
-            ariaLabel="Пролистать вправо"
-          />
-        )}
-        <div
-          className="absolute top-0 right-0 bottom-0 w-[84px]"
-          style={{
-            background: 'linear-gradient(270deg, #FFFFFF 34.89%, rgba(255, 255, 255, 0) 92.52%)',
-          }}
-        ></div>
-      </section>
-    );
-  },
-);
-
-function renderCard(card: GalleryCard, key: number) {
-  return (
-    <div
-      className="box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between items-stretch min-w-[364px] w-[364px] w-full"
-      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>
-  );
-}
+export const Gallery = JSX<GalleryProps>((props) => <GalleryInner {...props} version="normal" />);

package/src/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/GalleryInner.tsx

@@ -0,0 +1,140 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { GalleryCard, GalleryContent } from './GalleryContent';
+import { Img } from './Img';
+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 { 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"
+            onClick={handlePrevClick}
+            ariaLabel="Пролистать влево"
+          />
+        )}
+        {showNextButton && (
+          <ArrowButton
+            className="absolute top-1/2 right-1 z-20 rotate-180"
+            onClick={handleNextClick}
+            ariaLabel="Пролистать вправо"
+          />
+        )}
+        <div
+          className="absolute top-0 right-0 bottom-0 w-[84px]"
+          style={{
+            background: 'linear-gradient(270deg, #FFFFFF 34.89%, rgba(255, 255, 255, 0) 92.52%)',
+          }}
+        ></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/HeaderContent.ts

@@ -1,6 +1,5 @@
-import type { TopMenuItem } from '../types';
+import { SitemapContent } from '../model/SitemapContent';
 
-export interface HeaderContent {
+export interface HeaderContent extends SitemapContent {
   defaultLocation?: string;
-  topItems?: TopMenuItem[];
 }

package/src/Header/isSubItemActive.ts

@@ -1,5 +1,5 @@
 import type { Router } from '../ContentPageContext';
-import type { LinkContent } from '../types';
+import type { LinkContent } from '../model/LinkContent';
 import { isHrefActive } from '../utils/url';
 
 export function isSubItemActive(router: Router) {

package/src/Header/isTopItemActive.ts

@@ -1,5 +1,5 @@
 import type { Router } from '../ContentPageContext';
-import type { LinkContent } from '../types';
+import type { LinkContent } from '../model/LinkContent';
 import { isHrefActive } from '../utils/url';
 
 export function isTopItemActive(router: Router) {

package/src/Img.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture, ImgSource } from './types';
+import type { Picture, ImgSource } from './model/Picture';
 
 export interface TextWithImageProps {
   className?: string;

package/src/MiniGallery.fixture.tsx

@@ -0,0 +1,90 @@
+import { context } from './setup-fixture';
+
+import { MiniGallery, MiniGalleryProps } from './MiniGallery';
+import { Picture } from './model/Picture';
+
+const image: Picture = {
+  src: 'domovoj-kupon.png',
+  format: 'webp',
+  size: {
+    width: 120,
+    height: 70,
+  },
+};
+
+const defaultProps: MiniGalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+  ],
+};
+
+const onlyTitleProps: MiniGalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+  ],
+};
+
+export default {
+  default: <MiniGallery {...defaultProps} />,
+  'only title': <MiniGallery {...onlyTitleProps} />,
+};

package/src/MiniGallery.tsx

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

package/src/MobileAppTile.tsx

@@ -1,18 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { MobileAppTileContent } from './MobileAppTileContent';
 import { Tile } from './Tile';
-import type { BaseTileContent } from './BaseTile';
 import type { UniBlockProps } from './types';
 
-export interface QRCode {
-  src?: string;
-  href?: string;
-}
-
-export interface MobileAppTileContent extends BaseTileContent {
-  title?: string;
-  qr?: QRCode;
-}
-
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(

package/src/MobileAppTileContent.ts

@@ -0,0 +1,11 @@
+import type { BaseTileContent } from './BaseTileContent';
+
+export interface QRCode {
+  src?: string;
+  href?: string;
+}
+
+export interface MobileAppTileContent extends BaseTileContent {
+  title?: string;
+  qr?: QRCode;
+}

package/src/MobileBlocks.ts

@@ -1,7 +1,7 @@
 import { ExchangeRateTile } from './ExchangeRateTile';
 import { Footer } from './Footer/Footer.mobile';
 import { Gallery } from './Gallery.mobile';
-import { Header } from './Header/index';
+import { Header } from './Header/Header';
 import { MobileAppTile } from './MobileAppTile';
 import { Placeholder } from './Placeholder';
 import { ProductBlock } from './ProductBlock.mobile';

package/src/Placeholder.tsx

@@ -1,11 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { PlaceholderContent } from './PlaceholderContent';
 import { Tile } from './Tile';
 import type { UniBlockProps } from './types';
 
-export interface PlaceholderContent {
-  title?: string;
-}
-
 export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
   className?: string;
 }

package/src/PlaceholderContent.ts

@@ -0,0 +1,3 @@
+export interface PlaceholderContent {
+  title?: string;
+}

package/src/ProductBlock.fixture.tsx

@@ -1,7 +1,7 @@
 import { context } from './setup-fixture';
 
 import { ProductBlock } from './ProductBlock';
-import { Picture } from './types';
+import { Picture } from './model/Picture';
 
 const image: Picture = {
   src: 'money-1.png',

package/src/ProductBlock.mobile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ProductBlockInnerContent } from './ProductBlockInner';
 import { ProductBlockInner } from './ProductBlockInner';
+import type { ProductBlockInnerContent } from './ProductBlockInnerContent';
 import type { UniBlockProps } from './types';
 
 export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {}

package/src/ProductBlock.tsx

@@ -1,14 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
-import type { ProductBlockInnerContent } from './ProductBlockInner';
 import type { UniBlockProps } from './types';
-import { Breadcrumb, BreadcrumbProps } from './ui-kit/Breadcrumb';
+import { Breadcrumb } from './ui-kit/Breadcrumb';
 import { useLink } from './useLink';
 import { joinList } from './utils/joinList';
 
-export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {
-  breadcrumbs?: BreadcrumbProps[];
-}
+export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>((props) => {
   const { context, className, breadcrumbs } = props;

package/src/ProductBlockContent.ts

@@ -0,0 +1,6 @@
+import type { LinkContent } from './model/LinkContent';
+import type { ProductBlockInnerContent } from './ProductBlockInnerContent';
+
+export interface ProductBlockContent extends ProductBlockInnerContent {
+  breadcrumbs?: LinkContent[];
+}

package/src/ProductBlockInner.tsx

@@ -1,16 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BaseTileContent } from './BaseTile';
 import { BaseTile } from './BaseTile';
-import type { Benefit } from './BenefitsBlock';
+import type { Benefit } from './BenefitsBlockContent';
 import { Img } from './Img';
+import type { ProductBlockInnerContent } from './ProductBlockInnerContent';
 import type { UniBlockProps } from './types';
 import { Icon } from './ui-kit/Icon';
 import { Title } from './ui-kit/Title';
 
-export interface ProductBlockInnerContent extends BaseTileContent {
-  benefits?: Benefit[];
-}
-
 export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlockProps {}
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(

package/src/ProductBlockInnerContent.ts

@@ -0,0 +1,6 @@
+import type { BaseTileContent } from './BaseTileContent';
+import type { Benefit } from './BenefitsBlockContent';
+
+export interface ProductBlockInnerContent extends BaseTileContent {
+  benefits?: Benefit[];
+}

package/src/ProductGallery.fixture.tsx

@@ -1,7 +1,7 @@
 import { context } from './setup-fixture';
 
 import { ProductGallery } from './ProductGallery';
-import { Picture } from './types';
+import type { Picture } from './model/Picture';
 
 const moneyImage: Picture = {
   src: 'money-1.png',