@cloud-ru/ds-pagination 1.0.0

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@cloud-ru/ds-pagination",
+  "version": "1.0.0",
+  "description": "Пакет пагинации — компоненты Pagination с нумерованными страницами и PaginationSlider для плотной мини-навигации.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/pagination"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/pagination",
+  "license": "Apache-2.0",
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-materials": "^1.0.0",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,162 @@
+import { Button } from '@cloud-ru/ds-button';
+import { ChevronLeftSVG, ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import { MouseEvent, useEffect, useRef, useState } from 'react';
+
+import { getPageMoreTestId, getPageNumberTestId, PAGINATION_SIZE, TEST_IDS, VARIANT } from '../../constants';
+import { PaginationContext } from '../../contexts';
+import { PaginationSize, Variant } from '../../types';
+import { getPaginationEntries, PaginationEntry, PaginationEntryKind } from '../../utils';
+import { PaginationNumberItem } from '../PaginationNumberItem';
+import styles from './styles.module.scss';
+
+export type PaginationProps = WithSupportProps<{
+  /** Общее количество страниц */
+  total: number;
+  /** Текущая страница */
+  page: number;
+  /** Варианты тега кнопок: <a/> или <button/> */
+  variant?: Variant;
+  /** Максимальное количество страниц/элементов, помещающихся до транкейта */
+  maxLength?: number;
+  /** Колбэк смены значения */
+  onChange(page: number, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+  /** Колбэк форматирования ссылки */
+  hrefFormatter?(page: number): string;
+  /** CSS класснейм */
+  className?: string;
+  /** Размер
+   * @default 'm'
+   */
+  size?: PaginationSize;
+}>;
+
+const FIRST_PAGE = 1;
+const ARROW_STEP = 1;
+const MAX_LENGTH = 7;
+
+export function Pagination({
+  total,
+  page,
+  onChange,
+  hrefFormatter,
+  className,
+  variant = VARIANT.Button,
+  size = PAGINATION_SIZE.M,
+  maxLength = MAX_LENGTH,
+  ...rest
+}: PaginationProps) {
+  const entries = getPaginationEntries({
+    firstPage: FIRST_PAGE,
+    lastPage: total,
+    currentPage: page,
+    maxLength,
+  });
+
+  const buttonRefs = useRef<(HTMLButtonElement | HTMLAnchorElement | undefined)[]>([]);
+  const [buttonToFocus, setButtonToFocus] = useState(-1);
+
+  useEffect(() => {
+    buttonRefs.current[buttonToFocus]?.focus();
+  }, [buttonToFocus]);
+
+  const handlePreviousPageButtonClick = () => {
+    const newPage = page - ARROW_STEP;
+    onChange(newPage);
+
+    if (newPage === FIRST_PAGE) {
+      setButtonToFocus(FIRST_PAGE);
+    }
+  };
+
+  const handleNextPageButtonClick = () => {
+    const newPage = page + ARROW_STEP;
+    onChange(newPage);
+
+    if (newPage === total) {
+      setButtonToFocus(total);
+    }
+  };
+
+  const handleMoreButtonClick = (start: number, end: number) => {
+    const targetPage = Math.floor((start + end) / 2);
+    onChange(targetPage);
+    setButtonToFocus(targetPage);
+  };
+
+  const renderEntry = (entry: PaginationEntry) => {
+    if (entry.kind === PaginationEntryKind.Page) {
+      return (
+        <li key={entry.page}>
+          <PaginationNumberItem
+            label={entry.page}
+            activated={entry.page === page}
+            onClick={e => onChange(entry.page, e)}
+            setButtonRef={(el: HTMLButtonElement | HTMLAnchorElement) => {
+              buttonRefs.current[entry.page] = el;
+            }}
+            href={hrefFormatter?.(entry.page)}
+            aria-current={entry.page === page ? 'page' : undefined}
+            data-test-id={getPageNumberTestId(entry.page)}
+          />
+        </li>
+      );
+    }
+
+    if (entry.kind === PaginationEntryKind.Break) {
+      return (
+        <li key={`${entry.start}-${entry.end}`}>
+          <PaginationNumberItem
+            label='...'
+            onClick={() => handleMoreButtonClick(entry.start, entry.end)}
+            data-test-id={getPageMoreTestId(entry.start, entry.end)}
+          />
+        </li>
+      );
+    }
+
+    return null;
+  };
+
+  const buttonSize = size === PAGINATION_SIZE.M ? 'm' : 's';
+
+  return (
+    <PaginationContext.Provider value={{ size, variant }}>
+      <nav
+        className={className}
+        aria-label='Pagination'
+        data-size={size}
+        data-variant={variant}
+        {...extractSupportProps(rest)}
+      >
+        <ul className={styles.pagination} data-size={size}>
+          <li>
+            <Button
+              view='simple'
+              appearance='neutral'
+              icon={<ChevronLeftSVG />}
+              onClick={handlePreviousPageButtonClick}
+              disabled={page === FIRST_PAGE}
+              size={buttonSize}
+              aria-label='Previous page'
+              data-test-id={TEST_IDS.prev}
+            />
+          </li>
+          {entries.map(renderEntry)}
+          <li>
+            <Button
+              view='simple'
+              appearance='neutral'
+              icon={<ChevronRightSVG />}
+              onClick={handleNextPageButtonClick}
+              disabled={page === total}
+              size={buttonSize}
+              aria-label='Next page'
+              data-test-id={TEST_IDS.next}
+            />
+          </li>
+        </ul>
+      </nav>
+    </PaginationContext.Provider>
+  );
+}

package/src/components/Pagination/index.ts

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

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

@@ -0,0 +1,27 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/pagination.module' as pagination;
+
+$sizes: 's', 'm';
+
+.pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(pagination.$pagination, 'anatomy', 'size', $size, 'paginationNumber');
+    }
+  }
+
+  > li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/PaginationNumberItem/PaginationNumberItem.tsx

@@ -0,0 +1,59 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import { MouseEvent, Ref } from 'react';
+
+import { usePaginationContext } from '../../contexts';
+import styles from './styles.module.scss';
+
+export type PaginationNumberItemProps = WithSupportProps<{
+  label: number | string;
+  activated?: boolean;
+  onClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
+  href?: string;
+  setButtonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+}>;
+
+export function PaginationNumberItem({
+  label,
+  activated,
+  onClick,
+  href,
+  setButtonRef,
+  ...rest
+}: PaginationNumberItemProps) {
+  const { size, variant } = usePaginationContext();
+
+  const stateLayer = activated ? 'activatedOnBackground' : 'emptyNeutralOnBackground';
+
+  if (variant === 'link') {
+    return (
+      <a
+        role='button'
+        className={styles.root}
+        onClick={onClick}
+        ref={setButtonRef as Ref<HTMLAnchorElement>}
+        data-size={size}
+        {...extractSupportProps(rest)}
+        data-activated={activated || undefined}
+        href={href}
+      >
+        <span className={styles.stateLayer} aria-hidden data-state={stateLayer} />
+        <span className={styles.textWrapper}>{label}</span>
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type='button'
+      className={styles.root}
+      onClick={onClick}
+      ref={setButtonRef as Ref<HTMLButtonElement>}
+      data-size={size}
+      {...extractSupportProps(rest)}
+      data-activated={activated || undefined}
+    >
+      <span className={styles.stateLayer} aria-hidden data-state={stateLayer} />
+      <span className={styles.textWrapper}>{label}</span>
+    </button>
+  );
+}

package/src/components/PaginationNumberItem/index.ts

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

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

@@ -0,0 +1,82 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/pagination.module' as pagination;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 's', 'm';
+
+$typography: (
+  's': base.$sn-regular-label-s,
+  'm': base.$sn-regular-label-m,
+);
+
+.stateLayer {
+  visibility: initial;
+}
+
+.root {
+  cursor: pointer;
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  font-family: inherit;
+  color: base.$sn-theme-color-available-version-textTertiary;
+  text-decoration: none;
+
+  background-color: transparent;
+  outline: 0;
+  outline-offset: 0;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(
+        pagination.$pagination,
+        'anatomy',
+        'size',
+        $size,
+        'paginationNumber',
+        'itemPaginationNumber'
+      );
+
+      .textWrapper {
+        @include base.composite-var($typography, $size);
+
+        @include base.composite-var(
+          pagination.$pagination,
+          'anatomy',
+          'size',
+          $size,
+          'paginationNumber',
+          'itemPaginationNumber',
+          'textWrapper'
+        );
+      }
+    }
+  }
+
+  &[data-activated] {
+    color: base.$sn-theme-color-primary-text;
+  }
+
+  &:focus-visible {
+    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+    outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
+  }
+
+  @include m.has-state-layer-as-child(#{stateLayer});
+}
+
+.textWrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}

package/src/components/PaginationSlider/PaginationSlider.tsx

@@ -0,0 +1,50 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+
+import { getSliderItemTestId, PAGINATION_SLIDER_SIZE } from '../../constants';
+import { PaginationSliderSize } from '../../types';
+import { getRange } from '../../utils';
+import { PaginationSliderItem } from '../PaginationSliderItem';
+import styles from './styles.module.scss';
+
+export type PaginationSliderProps = WithSupportProps<{
+  /** Общее количество страниц */
+  total: number;
+  /** Текущая страница */
+  page: number;
+  /** Колбек смены значения */
+  onChange(page: number): void;
+  /** CSS класснейм */
+  className?: string;
+  /** Размер
+   * @default 's'
+   */
+  size?: PaginationSliderSize;
+}>;
+
+const FIRST_PAGE = 1;
+
+export function PaginationSlider({
+  total,
+  page,
+  onChange,
+  className,
+  size = PAGINATION_SLIDER_SIZE.Xs,
+  ...rest
+}: PaginationSliderProps) {
+  return (
+    <nav className={className} aria-label='Pagination slider' {...extractSupportProps(rest)}>
+      <ul className={styles.paginationSlider} data-size={size}>
+        {getRange(FIRST_PAGE, total).map(value => (
+          <li key={value}>
+            <PaginationSliderItem
+              activated={value === page}
+              onClick={() => onChange(value)}
+              size={size}
+              data-test-id={getSliderItemTestId(value)}
+            />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/src/components/PaginationSlider/index.ts

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

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

@@ -0,0 +1,31 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/pagination.module' as pagination;
+
+$sizes: 'xs', 's';
+
+.paginationSlider {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  align-items: center;
+
+  width: fit-content;
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(pagination.$pagination, 'anatomy', 'size', $size, 'paginationSlider');
+    }
+  }
+
+  background-color: base.$sn-theme-color-material-stateLayer-versionOnColor-default-filled;
+
+  > li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/components/PaginationSliderItem/PaginationSliderItem.tsx

@@ -0,0 +1,29 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import { Ref } from 'react';
+
+import { PaginationSliderSize } from '../../types';
+import styles from './styles.module.scss';
+
+export type PaginationSliderItemProps = WithSupportProps<{
+  activated?: boolean;
+  onClick(): void;
+  size: PaginationSliderSize;
+  setButtonRef?: Ref<HTMLButtonElement>;
+}>;
+
+export function PaginationSliderItem({ activated, onClick, size, setButtonRef, ...rest }: PaginationSliderItemProps) {
+  return (
+    <button
+      type='button'
+      className={styles.root}
+      onClick={onClick}
+      ref={setButtonRef}
+      data-size={size}
+      {...extractSupportProps(rest)}
+      data-activated={activated || undefined}
+      aria-current={activated ? 'true' : undefined}
+    >
+      <span className={styles.dot} aria-hidden />
+    </button>
+  );
+}

package/src/components/PaginationSliderItem/index.ts

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

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

@@ -0,0 +1,137 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/pagination.module' as pagination;
+
+$sizes: 'xs', 's';
+
+.root {
+  cursor: pointer;
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  background: transparent;
+  outline: 0;
+  outline-offset: 0;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(
+        pagination.$pagination,
+        'anatomy',
+        'size',
+        $size,
+        'paginationSlider',
+        'itemPaginationSlider'
+      );
+
+      // Фиксированная ширина: в макете растёт только точка внутри, сам элемент — нет.
+      width: base.simple-var(
+        pagination.$pagination,
+        'anatomy',
+        'size',
+        $size,
+        'paginationSlider',
+        'itemPaginationSlider',
+        'min-width'
+      );
+
+      &:not(&[data-activated]) {
+        .dot {
+          @include base.composite-var(
+            pagination.$pagination,
+            'anatomy',
+            'size',
+            $size,
+            'paginationSlider',
+            'itemPaginationSlider',
+            'slider',
+            'activatedFalse',
+            'default'
+          );
+
+          background-color: base.$sn-theme-color-neutral-background2Level;
+          box-shadow: base.$sn-boxShadow-elevation-level1;
+        }
+
+        @media (hover: hover) {
+          &:hover .dot {
+            @include base.composite-var(
+              pagination.$pagination,
+              'anatomy',
+              'size',
+              $size,
+              'paginationSlider',
+              'itemPaginationSlider',
+              'slider',
+              'activatedFalse',
+              'hovered'
+            );
+          }
+        }
+
+        /* stylelint-disable-next-line order/order */
+        &:active .dot {
+          @include base.composite-var(
+            pagination.$pagination,
+            'anatomy',
+            'size',
+            $size,
+            'paginationSlider',
+            'itemPaginationSlider',
+            'slider',
+            'activatedFalse',
+            'pressed'
+          );
+        }
+      }
+
+      &[data-activated] {
+        .dot {
+          @include base.composite-var(
+            pagination.$pagination,
+            'anatomy',
+            'size',
+            $size,
+            'paginationSlider',
+            'itemPaginationSlider',
+            'slider',
+            'activatedTrue',
+            'default'
+          );
+
+          background-color: base.$sn-theme-color-primary-accent;
+          box-shadow: none;
+        }
+      }
+
+      &:focus-visible .dot {
+        outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+        outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
+      }
+    }
+  }
+}
+
+.dot {
+  position: relative;
+
+  // На hover точка шире контентной области элемента и в макете выходит за паддинг.
+  flex-shrink: 0;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  background: transparent;
+  outline: 0;
+  outline-offset: 0;
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Pagination';
+export * from './PaginationSlider';

package/src/constants.ts

@@ -0,0 +1,35 @@
+export const PAGINATION_SIZE = {
+  S: 's',
+  M: 'm',
+} as const;
+
+export const PAGINATION_SLIDER_SIZE = {
+  Xs: 'xs',
+  S: 's',
+} as const;
+
+export const VARIANT = {
+  Link: 'link',
+  Button: 'button',
+} as const;
+
+export const TEST_IDS = {
+  /** Корень `Pagination` (ставится потребителем через `data-test-id`). */
+  root: 'pagination',
+  /** Корень `PaginationSlider` (ставится потребителем через `data-test-id`). */
+  sliderRoot: 'pagination-slider',
+  /** Кнопка «предыдущая страница». */
+  prev: 'page-prev-button',
+  /** Кнопка «следующая страница». */
+  next: 'page-next-button',
+  /** Префикс для кнопки конкретной страницы. Полный id — `page-number-button-${page}`. */
+  pageNumberPrefix: 'page-number-button',
+  /** Префикс для кнопки «многоточие» (break). Полный id — `page-more-button-${start}-${end}`. */
+  pageMorePrefix: 'page-more-button',
+  /** Префикс для кнопки страницы в `PaginationSlider`. Полный id — `page-button-slider-${value}`. */
+  sliderItemPrefix: 'page-button-slider',
+} as const;
+
+export const getPageNumberTestId = (page: number) => `${TEST_IDS.pageNumberPrefix}-${page}`;
+export const getPageMoreTestId = (start: number, end: number) => `${TEST_IDS.pageMorePrefix}-${start}-${end}`;
+export const getSliderItemTestId = (value: number) => `${TEST_IDS.sliderItemPrefix}-${value}`;