@redneckz/wildless-cms-uni-blocks 0.6.35 → 0.6.36

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,70 +1,36 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
-const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
-const BASE_DOT_WIDTH = 6;
-const ACTIVE_DOT_WIDTH_CHANGE = 16;
-const BASE_DOT_OPACITY = 0.3;
-const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+const dotStyle = 'cursor-pointer bg-primary-main h-2 rounded-full transition-width duration-300';
 
-export interface SwipeListControlDotsProps {
-  activeIndex: number;
-  indexFraction: number;
-  showDots?: boolean;
+interface SwipeListControlDotsProps {
+  containerRef?: { current: HTMLDivElement | null };
+  activeIndex?: number;
+  dotCount?: number;
 }
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
-  ({ children, activeIndex, indexFraction, showDots }) => {
-    const handleClick = useCallback(
-      (idx: number) => (e) => {
-        if (idx === activeIndex) {
-          return;
-        }
-
-        const contentContainer = (e.currentTarget as HTMLElement).parentElement
-          ?.previousElementSibling;
-
-        contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      },
-      [activeIndex],
-    );
-
-    return showDots && children ? (
+  ({ containerRef, activeIndex, dotCount = 0 }) => {
+    const handleClick = (idx: number) => {
+      if (idx !== activeIndex && containerRef?.current) {
+        containerRef.current.children[idx]?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      }
+    };
+
+    return dotCount ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
-        {children.length && children.map ? (
-          children.map((_, idx: number) => (
-            <div
-              key={String(idx)}
-              onClick={handleClick(idx)}
-              className={DOT_STYLES}
-              style={getDotStyles(idx, activeIndex, indexFraction)}
-              aria-hidden
-            />
-          ))
-        ) : (
-          <div className={DOT_STYLES} style={createDotStyle(1)} />
-        )}
+        {new Array(dotCount).fill(null).map((_, idx: number) => (
+          <div
+            key={String(idx)}
+            className={`${dotStyle} ${idx === activeIndex ? 'w-6' : 'w-2 opacity-30'}`}
+            role="button"
+            aria-hidden
+            onClick={() => handleClick(idx)}
+          />
+        ))}
       </div>
     ) : null;
   },
 );
-
-const getDotStyles = (
-  currentIdx: number,
-  activeIndex: number,
-  indexFraction: number,
-): Record<string, string> | undefined => {
-  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
-    return undefined;
-  }
-
-  const leftIndexMod = 1 - indexFraction;
-  const rightIndexMod = indexFraction;
-
-  return createDotStyle(currentIdx === activeIndex ? leftIndexMod : rightIndexMod);
-};
-
-const createDotStyle = (indexModifier: number): Record<string, string> => ({
-  opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * indexModifier}`,
-  width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * indexModifier}px`,
-});

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -1,7 +1,7 @@
 /**
  * @title Контейнер
  */
-export interface SwipeContainer {
+export interface SwipeContainerProps {
   /** @title Расстояние между элементами */
   gap?: number;
   /** @title Отступы */
@@ -11,9 +11,9 @@ export interface SwipeContainer {
 /**
  * @title Swipe-контроллер
  */
-export interface SwipeListControlProps extends SwipeContainer {
+export interface SwipeListControlProps extends SwipeContainerProps {
   className?: string;
   /** @title Точки-индикаторы */
   showDots?: boolean;
-  onSlideChange?: () => void;
+  onVisibleIndicesChange?: (indices: number[]) => void;
 }

package/mobile/src/ui-kit/SwipeListControl/SwipeListItem.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
+
+/**
+ * @title Элемент списка
+ */
+interface SwipeListControlItemProps {
+  className?: string;
+  style?: Record<string, string>;
+  idx?: number;
+  activeIndex?: number;
+  observerOptions?: IntersectionObserverOptions;
+  onIntersection?: (idx: number, entry: IntersectionObserverEntry) => void;
+}
+
+export const SwipeListItem = JSX<SwipeListControlItemProps>(
+  ({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
+    const observerCallback = useCallback(
+      (entries: IntersectionObserverEntry[]) => {
+        if (entries.length && onIntersection) {
+          onIntersection(idx || 0, entries[entries.length - 1]);
+        }
+      },
+      [onIntersection, idx],
+    );
+    const ref = useIntersectionObserver<HTMLDivElement>(observerCallback, observerOptions);
+
+    return (
+      <div
+        className={`inline-block snap-always box-border ${className}`}
+        style={style}
+        role="listitem"
+        aria-current={Boolean(idx === activeIndex)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/SwipeListControl/scrollBy.ts

@@ -0,0 +1,10 @@
+const getItemWidth =
+  (container: HTMLElement) =>
+  (itemCount: number): number =>
+    container.scrollWidth / itemCount;
+
+export const scrollBy =
+  (container: HTMLElement) =>
+  (itemCount: number, delta: -1 | 1): void => {
+    container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
+  };

package/mobile/src/ui-kit/SwipeListControl/scrollToEnd.ts

@@ -0,0 +1,3 @@
+export const scrollToEnd = (container: HTMLElement): void => {
+  container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
+};

package/mobile/src/ui-kit/SwipeListControl/scrollToStart.ts

@@ -0,0 +1,3 @@
+export const scrollToStart = (container: HTMLElement): void => {
+  container.scrollTo({ left: 0, behavior: 'smooth' });
+};

package/mobile/src/ui-kit/SwipeListControl/useSwipeListScroll.ts

@@ -0,0 +1,84 @@
+import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { areArraysEqual } from '../../utils/areArraysEqual';
+import { maxBy } from '../../utils/maxBy';
+import { minBy } from '../../utils/minBy';
+import { scrollBy } from './scrollBy';
+import { scrollToEnd } from './scrollToEnd';
+import { scrollToStart } from './scrollToStart';
+
+export interface SwipeListScroll {
+  scrollLeft: () => void;
+  scrollRight: () => void;
+  canScrollLeft: boolean;
+  canScrollRight: boolean;
+  visibleIndicesRange: [number, number];
+  handleVisibleIndicesChange: (indices: number[]) => void;
+}
+
+interface SwipeListScrollProps {
+  itemCount: number;
+  isCyclic?: boolean;
+  onVisibleIndicesChange?: (indices: number[]) => void;
+}
+
+export const useSwipeListScroll = <E extends HTMLElement>({
+  itemCount,
+  isCyclic,
+  onVisibleIndicesChange,
+}: SwipeListScrollProps): [containerRef: { current: E | null }, scroll: SwipeListScroll] => {
+  const containerRef = useRef<E | null>(null);
+
+  const [visibleIndices, setVisibleIndices] = useState<number[]>([]);
+  const handleVisibleIndicesChange = useCallback(
+    (indices: number[]) => {
+      setVisibleIndices((prevIndices) =>
+        areArraysEqual(prevIndices, indices) ? prevIndices : indices,
+      );
+      onVisibleIndicesChange && onVisibleIndicesChange(indices);
+    },
+    [itemCount],
+  );
+
+  const [minIndex, maxIndex] = visibleIndices.length
+    ? [minBy<number>()(visibleIndices), maxBy<number>()(visibleIndices)]
+    : [-1, -1];
+
+  const canScrollLeft = minIndex > 0;
+  const canScrollRight = maxIndex < itemCount - 1;
+
+  const scrollLeft = useCallback(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    if (isCyclic && !canScrollLeft) {
+      scrollToEnd(containerRef.current);
+    } else {
+      scrollBy(containerRef.current)(itemCount, -1);
+    }
+  }, [isCyclic, itemCount, canScrollLeft]);
+
+  const scrollRight = useCallback(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    if (isCyclic && !canScrollRight) {
+      scrollToStart(containerRef.current);
+    } else {
+      scrollBy(containerRef.current)(itemCount, 1);
+    }
+  }, [itemCount, isCyclic, canScrollRight]);
+
+  return [
+    containerRef,
+    {
+      scrollLeft,
+      scrollRight,
+      canScrollLeft: isCyclic || canScrollLeft,
+      canScrollRight: isCyclic || canScrollRight,
+      visibleIndicesRange: [minIndex, maxIndex],
+      handleVisibleIndicesChange,
+    },
+  ];
+};

package/mobile/src/utils/areArraysEqual.ts

@@ -0,0 +1,2 @@
+export const areArraysEqual = <T>(as?: T[], bs?: T[]): boolean =>
+  as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));

package/mobile/src/utils/mapChildren.ts

@@ -0,0 +1,11 @@
+import type { VNode } from '../model/VNode';
+
+export const mapChildren =
+  (mapper: (node: VNode, idx: number) => VNode) =>
+  (children: VNode): VNode => {
+    if (children === null || children === undefined) {
+      return children;
+    }
+
+    return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
+  };

package/mobile/src/utils/maxBy.ts

@@ -1,7 +1,6 @@
+export const defaultDiscriminator = <Item, Value>(_: Item): Value => _ as any;
+
 export const maxBy =
-  <Item, Value>(discriminator: (item: Item) => Value) =>
+  <Item, Value = Item>(discriminator: (item: Item) => Value = defaultDiscriminator) =>
   (list: Item[]): Item =>
     list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
-
-export const minBy = <Item, Value>(discriminator: (item: Item) => Value) =>
-  maxBy((_: Item) => -discriminator(_));

package/mobile/src/utils/minBy.ts

@@ -0,0 +1,5 @@
+import { defaultDiscriminator, maxBy } from './maxBy';
+
+export const minBy = <Item, Value = Item>(
+  discriminator: (item: Item) => Value = defaultDiscriminator,
+) => maxBy((_: Item) => -discriminator(_));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.35",
+  "version": "0.6.36",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -185,7 +185,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "41 kB",
+      "limit": "43 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/common.css

@@ -73,13 +73,6 @@ html {
     scroll-snap-type: x mandatory;
   }
 
-  .horizontal-list-item {
-    flex-shrink: 0;
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
-    width: 100%;
-  }
-
   .gradient-color-text {
     background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
     -webkit-background-clip: text;

package/src/components/Blocks.ts

@@ -8,6 +8,7 @@ import { BusinessBlock } from './BusinessBlock/BusinessBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
+import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
@@ -51,7 +52,6 @@ import { Video } from './Video/Video';
 export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
-  CarouselLinks,
   BenefitsBlock,
   BusinessBlock,
   Bonus,
@@ -60,6 +60,8 @@ export const Blocks: BlocksRegistry = {
   Calculator,
   Carousel,
   CarouselCard,
+  CarouselLinks,
+  CarouselProgramsCard,
   CarouselTariffsCard,
   Catalog,
   ContactsBlock,

package/src/components/Carousel/Carousel.fixture.tsx

@@ -3,6 +3,7 @@ import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { Carousel } from './Carousel';
 
 const options = {
@@ -66,4 +67,23 @@ export default {
       />
     </div>
   ),
+  program: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={2}
+        isBlur={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6)
+            .fill({
+              type: 'CarouselProgramsCard',
+              content: BUSINESS_CARD,
+            })
+            .map((_, i) => (i === 1 ? { ..._, content: BUSINESS_CARD } : _)),
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.tsx

@@ -1,58 +1,76 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { CarouselContainer } from './CarouselContainer';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import {
+  SwipeListScroll,
+  useSwipeListScroll,
+} from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import type { CarouselContent } from './CarouselContent';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
 }
 
+const ITEMS_GAP = 4;
+
 const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+const scrollButtonStyle = 'absolute top-1/2 z-50';
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
     const { blocks: childBlocks } = rest.block || {};
     const count = itemCount || childBlocks?.length || 0;
 
-    const containerRef = useRef<HTMLDivElement | null>(null);
-
-    const [activeIndex, controls] = useCarouselControls({
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
       itemCount: count,
-      visibleItemCount,
       isCyclic,
-      container: containerRef.current,
     });
-    const { isScrollAvailable } = controls;
 
     return (
-      <BlockWrapper className={`relative font-sans overflow-hidden ${className}`} {...rest}>
-        <CarouselContainer
-          activeIndex={activeIndex}
-          itemCount={count}
-          visibleItemCount={visibleItemCount}
+      <BlockWrapper className={`relative font-sans ${className}`} {...rest}>
+        <SwipeListContainer
           containerRef={containerRef}
+          visibleItemCount={visibleItemCount}
+          snapAlign="snap-start"
+          gap={ITEMS_GAP}
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
           {renderChildren(rest)}
-        </CarouselContainer>
-        {isScrollAvailable && isBlur ? (
+        </SwipeListContainer>
+        {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
           <div>
             <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
             <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
           </div>
         ) : null}
-        {renderArrows({
-          ...controls,
-          btnClass: ['left-8', 'right-8'],
-          className: 'top-1/2',
-        })}
+        {renderScrollButtons(scroll)}
       </BlockWrapper>
     );
   },
 );
 
-Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
+Carousel.childrenTypes = [
+  'CarouselCard',
+  'CarouselTariffsCard',
+  'CarouselLinks',
+  'CarouselProgramsCard',
+];
+
+const renderScrollButtons = ({
+  scrollLeft,
+  scrollRight,
+  canScrollLeft,
+  canScrollRight,
+}: SwipeListScroll) => (
+  <div>
+    {canScrollLeft ? (
+      <ScrollLeftButton className={`${scrollButtonStyle} left-8`} onClick={scrollLeft} />
+    ) : null}
+    {canScrollRight ? (
+      <ScrollRightButton className={`${scrollButtonStyle} right-8`} onClick={scrollRight} />
+    ) : null}
+  </div>
+);

package/src/components/CarouselProgramsCard/CarouselProgramsCard.example.json

@@ -0,0 +1,25 @@
+{
+  "icon": {
+    "icon": "SignDocsIcon",
+    "format": "webp",
+    "size": {
+      "width": 200,
+      "height": 242
+    }
+  },
+  "title": "Заголовок",
+  "list": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -0,0 +1,38 @@
+import type { Picture } from '../../model/Picture';
+import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselProgramsCard } from './CarouselProgramsCard';
+import { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+const imageMonth: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 242,
+  },
+  title: 'money',
+};
+
+const list = [
+  { title: 'От 16 до 81', description: 'платежей' },
+  {
+    title: 'От 3 до 7,5 млн руб. ',
+    description: 'остаток по счету',
+  },
+];
+
+export const BUSINESS_CARD: CarouselProgramsCardContent = {
+  title: 'Продвинутый',
+  icon: imageMonth,
+  list,
+};
+
+const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard {...BUSINESS_CARD} />;
+const CAROUSEL_BUSINESS_CARD_SECONDARY = (
+  <CarouselProgramsCard {...BUSINESS_CARD} version="secondary" />
+);
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD}</div>,
+  secondary: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD_SECONDARY}</div>,
+};

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
+
+export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
+  ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={`font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
+      {...rest}
+    >
+      <div className="w-[200px] min-w-[200px] self-end">
+        {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+        {icon?.src ? <Img image={icon} /> : null}
+      </div>
+      <div className="p-8 pl-3 w-full">
+        {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
+        {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
+      </div>
+    </BlockWrapper>
+  ),
+);
+
+const renderList = (_: HeadlineCommonProps, i: number) => (
+  <div key={String(i)} className="break-words">
+    {_.title ? <div className={`text-h6`}>{_.title}</div> : null}
+    {_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
+  </div>
+);

package/src/components/CarouselProgramsCard/CarouselProgramsCard.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -0,0 +1,13 @@
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+/**
+ * @title Карточка программ карусели
+ */
+export type CarouselProgramsCardContent = TitleProps & {
+  icon?: Picture;
+  /** @title Список */
+  list?: HeadlineCommonProps[];
+  version?: BlockVersion;
+};

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
-import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
-import { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 
 const imageMonth: Picture = {
   src: 'monthly-payment.png',