@snack-uikit/carousel 0.2.1

package/dist/components/ItemProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ItemProvider';

package/dist/components/ItemProvider/index.js

@@ -0,0 +1 @@
+export * from './ItemProvider';

package/dist/components/ItemProvider/styles.module.css

@@ -0,0 +1,39 @@
+.itemProvider{
+  --gap:var(--dimension-2m, 16px);
+  padding-top:var(--space-carousel-content-layout-padding, 4px);
+  padding-bottom:var(--space-carousel-content-layout-padding, 4px);
+  padding-left:var(--space-carousel-content-layout-padding, 4px);
+  padding-right:var(--space-carousel-content-layout-padding, 4px);
+  overflow:hidden;
+  width:100%;
+  margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
+}
+.itemProvider[data-swipe]{
+  cursor:grab;
+}
+.itemProvider[data-swipe][data-pointers]{
+  cursor:grabbing;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  -webkit-user-drag:none;
+}
+
+.itemTracker{
+  display:flex;
+  gap:var(--gap, var(--dimension-2m, 16px));
+  box-sizing:border-box;
+  height:100%;
+}
+
+.itemContainer{
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+
+.hiddenItem{
+  pointer-events:none;
+}
+.hiddenItem *{
+  pointer-events:none;
+}

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Carousel';

package/dist/components/index.js

@@ -0,0 +1 @@
+export * from './Carousel';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/testIds.d.ts

@@ -0,0 +1,7 @@
+export declare const TEST_IDS: {
+    arrowNext: string;
+    arrowPrev: string;
+    pagination: string;
+    trackLine: string;
+    trackItem: string;
+};

package/dist/testIds.js

@@ -0,0 +1,7 @@
+export const TEST_IDS = {
+    arrowNext: 'carousel__arrow-next',
+    arrowPrev: 'carousel__arrow-prev',
+    pagination: 'carousel__pagination',
+    trackLine: 'carousel__track-line',
+    trackItem: 'carousel__track-item',
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@snack-uikit/carousel",
+  "title": "Carousel",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.2.1",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/carousel",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/carousel"
+  },
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "contributors": [
+    "Nikita Ershov <niershov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/pagination": "0.5.3",
+    "@snack-uikit/utils": "3.2.0",
+    "classnames": "2.3.2",
+    "uncontrollable": "8.0.4"
+  },
+  "gitHead": "9a8ce098f22356776cffc78875caa94bc72397a5"
+}

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,135 @@
+import cn from 'classnames';
+import { ReactElement, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { PaginationSlider } from '@snack-uikit/pagination';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { TEST_IDS } from '../../testIds';
+import { Control } from '../Control';
+import { ItemProvider } from '../ItemProvider';
+import styles from './styles.module.scss';
+
+export type CarouselProps = WithSupportProps<{
+  /** CSS - класснейм */
+  className?: string;
+  /** Массив айтемов */
+  children: ReactElement[];
+  /** Кол-во отображаемых единовременно айтемов @default 1 */
+  showItems?: number;
+  /** Сдвиг айтемов при смене 1 страницы @default Math.trunc(show) */
+  scrollBy?: number;
+  /** Время переключения 1 страницы (в s) @default 0.4 */
+  transition?: number;
+  /** Переключение страниц свайпом @default true */
+  swipe?: boolean;
+  /** Использовать стрелки для переключения страниц @default true */
+  arrows?: boolean;
+  /** Использовать пагинацию для переключения страниц @default true */
+  pagination?: boolean;
+  /** Расстояние между айтемами @default var(--dimension-2m)*/
+  gap?: string;
+  /** Управление состоянием извне */
+  state?: {
+    page: number;
+    onChange(page: number): void;
+  };
+  /** Цикличная прокрутка @default false*/
+  infiniteScroll?: boolean;
+}>;
+
+export function Carousel({
+  children,
+  showItems = 1,
+  scrollBy: scrollByProp,
+  transition = 0.4,
+  swipe = true,
+  arrows = true,
+  pagination = true,
+  className,
+  gap,
+  state,
+  infiniteScroll = false,
+  ...rest
+}: CarouselProps) {
+  const initialItems = children;
+  const itemsRef = useRef(children);
+
+  useEffect(() => {
+    itemsRef.current = initialItems;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialItems.length]);
+
+  const scrollBy = useMemo(() => scrollByProp ?? Math.trunc(showItems), [showItems, scrollByProp]);
+
+  const [page, setPage] = useUncontrolledProp<number>(state?.page, state?.page ?? 0, newPage => {
+    const result = typeof newPage === 'function' ? newPage(page) : newPage;
+    state?.onChange(result);
+  });
+
+  const total = useMemo(
+    () => Math.trunc(initialItems.length / scrollBy) + (initialItems.length % scrollBy ? 1 : 0),
+    [initialItems.length, scrollBy],
+  );
+
+  const onLeftArrowClick = useCallback(() => {
+    setPage((page: number) => (infiniteScroll ? (total + page - 1) % total : Math.max(0, page - 1)));
+  }, [infiniteScroll, setPage, total]);
+
+  const onRightArrowClick = useCallback(() => {
+    setPage((page: number) => (infiniteScroll ? (page + 1) % total : Math.min(total - 1, page + 1)));
+  }, [infiniteScroll, setPage, total]);
+
+  const slideCallback = useCallback(
+    (direction: number) => {
+      if (direction < 0) {
+        onRightArrowClick();
+        return;
+      }
+
+      onLeftArrowClick();
+    },
+    [onLeftArrowClick, onRightArrowClick],
+  );
+
+  return (
+    <div className={cn(styles.carousel, className)} {...extractSupportProps(rest)}>
+      <div className={styles.carouselBase}>
+        <ItemProvider
+          showItems={showItems}
+          scrollBy={scrollBy}
+          swipe={swipe}
+          transition={transition}
+          items={itemsRef.current}
+          slideCallback={slideCallback}
+          page={page}
+          gap={gap}
+        />
+
+        {arrows && (
+          <>
+            {(infiniteScroll || page > 0) && (
+              <Control onClick={onLeftArrowClick} variant='prev' data-test-id={TEST_IDS.arrowPrev} />
+            )}
+            {(infiniteScroll || page + 1 < total) && (
+              <Control onClick={onRightArrowClick} variant='next' data-test-id={TEST_IDS.arrowNext} />
+            )}
+          </>
+        )}
+      </div>
+
+      {pagination && (
+        <div className={styles.pagination}>
+          <PaginationSlider
+            data-test-id={TEST_IDS.pagination}
+            page={page + 1}
+            onChange={(page: number) => {
+              setPage(page - 1);
+            }}
+            total={total}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Carousel/index.ts

@@ -0,0 +1 @@
+export * from './Carousel'

package/src/components/Carousel/styles.module.scss

@@ -0,0 +1,27 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-carousel';
+
+.carouselBase {
+  position: relative;
+
+  display: flex;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  outline: none;
+}
+
+.carousel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.pagination {
+  @include composite-var($carousel-sliders-wrap);
+
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+}

package/src/components/Control/Control.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+
+import { ChevronLeftSVG } from '@snack-uikit/icons';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+type ControlProps = WithSupportProps<{
+  onClick?(): void;
+  variant: 'prev' | 'next';
+}>;
+
+export const Control = forwardRef<HTMLButtonElement, ControlProps>(
+  ({ onClick, variant, ...rest }: ControlProps, ref) => (
+    <button
+      ref={ref}
+      className={styles.control}
+      onClick={() => {
+        onClick?.();
+      }}
+      type='button'
+      data-variant={variant}
+      {...extractSupportProps(rest)}
+    >
+      <ChevronLeftSVG size={24} className={styles.icon} />
+    </button>
+  ),
+);

package/src/components/Control/index.ts

@@ -0,0 +1 @@
+export * from './Control'

package/src/components/Control/styles.module.scss

@@ -0,0 +1,54 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-carousel';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.control {
+  @include composite-var($carousel-control-container);
+
+  cursor: pointer;
+
+  position: absolute;
+  top: 50%;
+  left: calc($size-carousel-control-wrap-width - $size-carousel-control-container);
+  transform: translateY(-50%);
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  color: $sys-neutral-text-light;
+
+  background-color: $sys-neutral-background1-level;
+  border-color: transparent;
+  border-style: solid;
+  outline-color: transparent;
+  box-shadow: $box-shadow-elevation-level3;
+
+  &:hover, &:focus-visible {
+    color: $sys-neutral-text-main;
+  }
+
+  &:hover {
+    box-shadow: $box-shadow-elevation-level4;
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    border-color: $sys-available-complementary;
+    outline-color: $sys-available-on-complementary;
+    box-shadow: none;
+  }
+
+  &[data-variant='next'] {
+    right: calc($size-carousel-control-wrap-width - $size-carousel-control-container);
+    left: auto;
+    &:focus-visible {
+      outline-offset: $dimension-025m;
+    }
+
+    .icon {
+      transform: rotate(180deg);
+    }
+  }
+}

package/src/components/ItemProvider/ItemProvider.tsx

@@ -0,0 +1,198 @@
+import { MouseEvent, ReactElement, TouchEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { TEST_IDS } from '../../testIds';
+import { getPageX } from './helpers';
+import { useWindowWidthChange } from './hooks';
+import styles from './styles.module.scss';
+
+export type ItemProviderProps = {
+  items: ReactElement[];
+  showItems: number;
+  scrollBy: number;
+  slideCallback(direction: number): void;
+  transition: number;
+  swipe: boolean;
+  page: number;
+  gap?: string;
+};
+
+export function ItemProvider({
+  items,
+  showItems,
+  scrollBy,
+  slideCallback,
+  transition,
+  swipe,
+  page,
+  gap,
+}: ItemProviderProps) {
+  const [computedValues, setComputedValues] = useState({
+    itemWidth: 200,
+    gap: 0,
+  });
+
+  const ref = useCallback(
+    (node: HTMLDivElement) => {
+      if (node !== null) {
+        const styles = getComputedStyle(node);
+
+        const gap = Number.parseFloat(styles.getPropertyValue('--gap'));
+        const paddingLeft = Number.parseFloat(styles.getPropertyValue('padding-left'));
+        const paddingRight = Number.parseFloat(styles.getPropertyValue('padding-right'));
+
+        const itemWidth =
+          (node.getBoundingClientRect().width - (Math.trunc(showItems) - 1) * gap - paddingLeft - paddingRight) /
+          showItems;
+        setComputedValues({ itemWidth, gap });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [computedValues.itemWidth, showItems],
+  );
+
+  const itemsTrackerRef = useRef<HTMLDivElement>(null);
+
+  function hideNonVisibleItems() {
+    itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach(function (slide) {
+      slide.setAttribute('aria-hidden', '0');
+
+      slide.querySelectorAll('a, button, select, input, textarea, [tabindex="0"]').forEach(function (focusableElement) {
+        focusableElement.setAttribute('tabindex', '-5');
+        focusableElement.classList.add(styles.hiddenItem);
+      });
+    });
+  }
+
+  function showVisibleItems(slide: number, page: number, show: number) {
+    itemsTrackerRef.current?.querySelectorAll(`[data-test-id=${TEST_IDS.trackItem}]`).forEach((item, i) => {
+      if (i >= page * slide && i < page * slide + Math.trunc(show)) {
+        item.removeAttribute('aria-hidden');
+        item
+          .querySelectorAll('a, button, select, input, textarea, [tabindex="-5"]')
+          .forEach(function (focusableElement) {
+            focusableElement.setAttribute('tabindex', '0');
+            focusableElement.classList.remove(styles.hiddenItem);
+          });
+      }
+    });
+  }
+
+  const transform = useMemo(
+    () => Number(-(page * scrollBy * computedValues.itemWidth + computedValues.gap * page * scrollBy)),
+    [computedValues.gap, computedValues.itemWidth, page, scrollBy],
+  );
+
+  useEffect(() => {
+    hideNonVisibleItems();
+    showVisibleItems(scrollBy, page, showItems);
+  }, [page, scrollBy, showItems]);
+
+  useWindowWidthChange((change: number) => {
+    setComputedValues(computedValues => ({ ...computedValues, itemWidth: computedValues.itemWidth - change }));
+  });
+
+  const [drag, setDrag] = useState({
+    initial: transform,
+    start: 0,
+    isDown: false,
+    drag: 0,
+    finished: true,
+    pointers: true,
+  });
+
+  const handleDragStart = (e: MouseEvent | TouchEvent) => {
+    e.persist();
+    setDrag({
+      ...drag,
+      isDown: true,
+      start: getPageX(e),
+      initial: transform,
+      finished: false,
+    });
+  };
+
+  const handleDragFinish = (e: MouseEvent | TouchEvent) => {
+    e.persist();
+    if (drag.finished) {
+      return;
+    }
+    if (Math.abs(drag.drag) < computedValues.itemWidth / 2) {
+      return setDrag({
+        initial: transform,
+        start: 0,
+        isDown: false,
+        drag: 0,
+        finished: true,
+        pointers: true,
+      });
+    }
+
+    slideCallback(drag.drag > 0 ? -1 : 1);
+    setDrag({ ...drag, drag: 0, isDown: false, finished: true, pointers: true });
+    return;
+  };
+
+  const handleDragMove = (e: MouseEvent | TouchEvent) => {
+    e.persist();
+
+    if (!drag.isDown) {
+      return;
+    }
+
+    const pos = getPageX(e);
+
+    setDrag({
+      ...drag,
+      drag: drag.start - pos,
+      pointers: Math.abs(drag.start - pos) < Number.MIN_SAFE_INTEGER,
+    });
+  };
+
+  const swipeProps = swipe
+    ? {
+        onTouchCancel: handleDragFinish,
+        onTouchEnd: handleDragFinish,
+        onTouchMove: handleDragMove,
+        onTouchStart: handleDragStart,
+        onMouseDown: handleDragStart,
+        onMouseLeave: handleDragFinish,
+        onMouseUp: handleDragFinish,
+        onMouseMove: handleDragMove,
+      }
+    : {};
+
+  return (
+    <div
+      ref={ref}
+      className={styles.itemProvider}
+      data-pointers={!drag.pointers || undefined}
+      data-swipe={swipe || undefined}
+      style={{
+        ...(Boolean(gap) ? { '--gap': gap } : {}),
+      }}
+    >
+      <div
+        {...swipeProps}
+        className={styles.itemTracker}
+        data-test-id={TEST_IDS.trackLine}
+        style={{
+          transform: `translateX(${transform - drag.drag}px)`,
+          transition: `transform ${transition}s ease 0s`,
+        }}
+        ref={itemsTrackerRef}
+      >
+        {items.map((item, i) => (
+          <div
+            key={i}
+            style={{ width: computedValues.itemWidth }}
+            className={styles.itemContainer}
+            role='group'
+            data-test-id={TEST_IDS.trackItem}
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/ItemProvider/helpers.ts

@@ -0,0 +1,11 @@
+import { MouseEvent, TouchEvent } from 'react';
+
+export function getPageX(e: TouchEvent | MouseEvent): number {
+  if (e.nativeEvent instanceof globalThis.MouseEvent) {
+    return e.nativeEvent.pageX;
+  } else if (e.nativeEvent instanceof globalThis.TouchEvent) {
+    return e.nativeEvent.changedTouches[0].pageX;
+  }
+
+  return 0;
+}

package/src/components/ItemProvider/hooks.ts

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useState } from 'react';
+
+const getWindowWidth = () => {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
+  return window.innerWidth;
+};
+
+export const useWindowWidthChange = (cb: (changed: number) => void) => {
+  const [windowWidth, setWindowWidth] = useState(getWindowWidth());
+
+  useLayoutEffect(() => {
+    const update = () => {
+      const changed = windowWidth - window.innerWidth;
+      setWindowWidth(window.innerWidth);
+      cb(changed);
+    };
+
+    window.addEventListener('resize', update);
+
+    return () => window.removeEventListener('resize', update);
+  }, [cb, windowWidth]);
+  return;
+};

package/src/components/ItemProvider/index.ts

@@ -0,0 +1 @@
+export * from './ItemProvider'

package/src/components/ItemProvider/styles.module.scss

@@ -0,0 +1,42 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-carousel';
+
+.itemProvider {
+  --gap: #{$dimension-2m};
+
+  @include composite-var($carousel-content-layout);
+
+  overflow: hidden;
+  width: 100%;
+  margin: calc(0px - $space-carousel-content-layout-padding);
+
+  &[data-swipe] {
+    cursor: grab;
+  }
+
+  &[data-swipe][data-pointers] {
+    cursor: grabbing;
+    user-select: none;
+
+    -webkit-user-drag: none;
+  }
+}
+
+.itemTracker {
+  display: flex;
+  gap: var(--gap, $dimension-2m);
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.itemContainer {
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.hiddenItem {
+  pointer-events: none;
+
+  * {
+    pointer-events: none;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Carousel'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/testIds.ts

@@ -0,0 +1,7 @@
+export const TEST_IDS = {
+  arrowNext: 'carousel__arrow-next',
+  arrowPrev: 'carousel__arrow-prev',
+  pagination: 'carousel__pagination',
+  trackLine: 'carousel__track-line',
+  trackItem: 'carousel__track-item',
+};