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

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -0,0 +1,97 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import { mapChildren } from '../../utils/mapChildren';
+import type { SwipeContainerProps } from './SwipeListControlProps';
+import { SwipeListItem } from './SwipeListItem';
+
+type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
+
+type SwipeListItemWidthAuto = 0;
+
+/**
+ * @title Список
+ */
+interface SwipeListContainerProps extends SwipeContainerProps {
+  className?: string;
+  containerRef?: { current: HTMLDivElement | null };
+  activeIndex?: number;
+  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3;
+  snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
+  onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
+  onVisibleIndicesChange?: (indices: number[]) => void;
+}
+
+const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+
+export const SwipeListContainer = JSX<SwipeListContainerProps>(
+  ({
+    className = '',
+    containerRef,
+    activeIndex,
+    visibleItemCount,
+    gap = 0,
+    padding = 0,
+    snapAlign = 'snap-center',
+    children,
+    onVisibleItemsChange,
+    onVisibleIndicesChange,
+  }) => {
+    const observerOptions: IntersectionObserverOptions = {
+      sensitivity: 1,
+      rootRef: containerRef,
+    };
+
+    const itemsVisibilityListRef = useRef<ItemsVisibilityList>([]);
+    const handleIntersection = useCallback(
+      (idx: number, entry: IntersectionObserverEntry) => {
+        const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
+        itemsVisibilityList[idx] = entry;
+        itemsVisibilityListRef.current = itemsVisibilityList;
+
+        onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
+        onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
+      },
+      [onVisibleItemsChange, onVisibleIndicesChange],
+    );
+
+    return (
+      <div
+        className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
+        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
+        role="list"
+        ref={containerRef}
+      >
+        {mapChildren((child, idx) => (
+          <SwipeListItem
+            key={String(idx)}
+            className={`${snapAlign} ${
+              visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
+            }`}
+            style={getContainerStyle(padding / 4)}
+            activeIndex={activeIndex}
+            idx={idx}
+            observerOptions={observerOptions}
+            onIntersection={handleIntersection}
+          >
+            {child}
+          </SwipeListItem>
+        ))(children)}
+      </div>
+    );
+  },
+);
+
+// Styles used to compensate outer container padding to get rid of clipping effect
+const getContainerStyle = (padding: number): Record<string, string> => ({
+  marginLeft: `${-padding}px`,
+  marginRight: `${-padding}px`,
+  paddingLeft: `${padding}px`,
+  paddingRight: `${padding}px`,
+});
+
+const getVisibleIndices = (itemsVisibilityList: ItemsVisibilityList) =>
+  itemsVisibilityList
+    .map((_, i): [IntersectionObserverEntry | undefined, number] => [_, i])
+    .filter(([_]) => _ && _.intersectionRatio >= 0.9)
+    .map(([, i]) => i);

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

@@ -1,12 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListContainer } from './SwipeListContainer';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import { SwipeListControlList } from './SwipeListControlList';
-import type { SwipeListControlListProps } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getIndexParts } from './utils/getIndexParts';
-import { getScrollPoints } from './utils/getScrollPoints';
+import { useSwipeListScroll } from './useSwipeListScroll';
+
+const DEFAULT_GAP = 14;
+
+/*
+  Horizontal padding used on a container above SwipeListControl.
+  Same value used on a SwipeListControlChildren container to compensate it
+  and get rid of a clipping effect caused by overflow: hidden.
+ */
+const DEFAULT_PADDING = 16;
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,65 +19,36 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
-    onSlideChange,
     children,
+    onVisibleIndicesChange,
   }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const [indexFraction, setIndexFraction] = useState(0);
-
-    const dotsProps = {
-      activeIndex,
-      indexFraction,
-      showDots,
-      children,
-    };
-
-    const handleScroll: SwipeListControlListProps['onScroll'] = useCallback(
-      (e) => {
-        const {
-          scrollLeft,
-          clientWidth,
-          childElementCount,
-          scrollWidth,
-          children: childrenCollection,
-        } = e?.currentTarget as HTMLElement;
-        if (!childrenCollection[0]) {
-          return;
-        }
+    const itemCount = Array.isArray(children) ? children.length : 0;
 
-        // horizontal PADDING / 2 to compensate padding-margin combo of child container
-        // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-        const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
-        const scrollPoints = getScrollPoints({
-          gap,
-          padding,
-          clientWidth,
-          scrollWidth,
-          childElementCount,
-          itemWidth,
-        });
-
-        const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
-        if (index !== activeIndex && onSlideChange) {
-          onSlideChange();
-        }
-        setActiveIndex(index);
-        setIndexFraction(fraction);
-      },
-      [gap, padding, activeIndex, onSlideChange],
-    );
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount,
+      onVisibleIndicesChange,
+    });
+    const [activeIndex] = scroll.visibleIndicesRange;
 
     return (
       <div className={className}>
-        <SwipeListControlList
+        <SwipeListContainer
+          containerRef={containerRef}
+          activeIndex={activeIndex}
+          visibleItemCount={1}
           gap={gap}
           padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
           {children}
-        </SwipeListControlList>
-        <SwipeListControlDots {...dotsProps} />
+        </SwipeListContainer>
+        {showDots ? (
+          <SwipeListControlDots
+            containerRef={containerRef}
+            activeIndex={activeIndex}
+            dotCount={itemCount}
+          />
+        ) : null}
       </div>
     );
   },

package/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/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/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/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/src/ui-kit/SwipeListControl/scrollToEnd.ts

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

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

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

package/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/src/ui-kit/Text/Text.tsx

@@ -1,67 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-
-/**
- * @title Размер текста
- */
-export type TextSize =
-  | ''
-  | 'text-xs-light'
-  | 'text-s-light'
-  | 'text-s'
-  | 'text-m-light'
-  | 'text-m'
-  | 'text-l-light'
-  | 'text-l'
-  | 'text-xl-light'
-  | 'text-xl';
-
-/**
- * @title Размер текста
- */
-export type TitleSize =
-  | ''
-  | 'text-h6'
-  | 'text-h5'
-  | 'text-h5-light'
-  | 'text-h4'
-  | 'text-h3'
-  | 'text-h2'
-  | 'text-h1'
-  | 'text-h0'
-  | 'text-m-title'
-  | 'text-m-title-xs'
-  | 'title-extra'
-  | 'title-huge';
-
-/**
- * @title Цвет текста
- */
-export type TextColor =
-  | ''
-  | 'text-main'
-  | 'text-primary-text'
-  | 'text-primary-main'
-  | 'text-secondary-text'
-  | 'text-secondary-light'
-  | 'text-error'
-  | 'text-white'
-  | 'text-green';
-
-/**
- * @title Выравнивание
- * @enumNames [
- *    "По умолчанию",
- *    "По левому краю",
- *    "По центру",
- *    "По правому краю"
- * ]
- */
-export type TextAlign = '' | 'text-left' | 'text-center' | 'text-right';
-
-/**
- * @title Насыщенность шрифта
- */
-export type FontWeight = '' | 'font-light' | 'font-normal' | 'font-medium';
+import type { FontWeight, TextAlign, TextColor, TextSize, TitleSize } from './TextProps';
 
 interface TextProps {
   size?: TextSize | TitleSize;

package/src/ui-kit/Text/TextProps.ts

@@ -0,0 +1,63 @@
+/**
+ * @title Размер текста
+ */
+export type TextSize =
+  | ''
+  | 'text-xs'
+  | 'text-xs-light'
+  | 'text-s-light'
+  | 'text-s'
+  | 'text-m-light'
+  | 'text-m'
+  | 'text-l-light'
+  | 'text-l'
+  | 'text-xl-light'
+  | 'text-xl';
+
+/**
+ * @title Размер текста
+ */
+export type TitleSize =
+  | ''
+  | 'text-h6'
+  | 'text-h5'
+  | 'text-h5-light'
+  | 'text-h4'
+  | 'text-h3'
+  | 'text-h2'
+  | 'text-h1'
+  | 'text-h0'
+  | 'text-m-title'
+  | 'text-m-title-xs'
+  | 'title-extra'
+  | 'title-huge';
+
+/**
+ * @title Цвет текста
+ */
+export type TextColor =
+  | ''
+  | 'text-main'
+  | 'text-primary-text'
+  | 'text-primary-main'
+  | 'text-secondary-text'
+  | 'text-secondary-light'
+  | 'text-error'
+  | 'text-white'
+  | 'text-green';
+
+/**
+ * @title Выравнивание
+ * @enumNames [
+ *    "По умолчанию",
+ *    "По левому краю",
+ *    "По центру",
+ *    "По правому краю"
+ * ]
+ */
+export type TextAlign = '' | 'text-left' | 'text-center' | 'text-right';
+
+/**
+ * @title Насыщенность шрифта
+ */
+export type FontWeight = '' | 'font-light' | 'font-normal' | 'font-medium';

package/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/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/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/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/tailwind.config.cjs

@@ -181,6 +181,14 @@ module.exports = {
             fontWeight: '300',
           },
         ],
+        xs: [
+          '0.75rem',
+          {
+            // 12px 18px
+            lineHeight: '1.125rem',
+            fontWeight: '400',
+          },
+        ],
         'xs-light': [
           '0.75rem',
           {

package/bundle/components/Carousel/CarouselContainer.d.ts

@@ -1,10 +0,0 @@
-interface CarouselContainerProps {
-    activeIndex: number;
-    itemCount: number;
-    visibleItemCount?: number;
-    containerRef?: {
-        current: HTMLDivElement | null;
-    };
-}
-export declare const CarouselContainer: import("@redneckz/uni-jsx").UNIComponent<CarouselContainerProps, any, any>;
-export {};

package/bundle/components/InvestmentGallery/InvestmentGallery.d.ts

@@ -1,5 +0,0 @@
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { InvestmentGalleryContent } from './InvestmentGalleryContent';
-export interface InvestmentGalleryProps extends InvestmentGalleryContent, UniBlockProps {
-}
-export declare const InvestmentGallery: import("@redneckz/uni-jsx").UNIComponent<InvestmentGalleryProps, any, any>;