@cloud-ru/ds-stepper 1.0.0

package/src/helperComponents/DesktopStepper/DesktopStepper.tsx

@@ -0,0 +1,52 @@
+import cn from 'classnames';
+
+import { StepperContext } from '../../context';
+import { useStepperController } from '../../hooks/useStepperController';
+import { StepperApi, StepperProps } from '../../types';
+import { DesktopStep } from '../DesktopStep';
+import styles from './styles.module.scss';
+
+export function DesktopStepper({
+  children,
+  steps,
+  className,
+  onChangeCurrentStep,
+  onCompleteChange,
+  defaultCurrentStepIndex = 0,
+  validator,
+  'data-test-id': testId,
+  allowFreeNavigation = false,
+}: StepperProps) {
+  const { stepsView, currentStepIndex, isCompleted, stepCount, goNext, goPrev, resetValidation, setValidator } =
+    useStepperController({
+      steps,
+      defaultCurrentStepIndex,
+      validator,
+      onChangeCurrentStep,
+      onCompleteChange,
+      allowFreeNavigation,
+    });
+
+  const stepper = (
+    <div className={cn(styles.stepper, className)} data-test-id={testId}>
+      {stepsView.map((step, index) => (
+        <DesktopStep key={step.title + index} step={step} data-test-id={testId} />
+      ))}
+    </div>
+  );
+
+  const stepperApi: StepperApi = {
+    goNext,
+    goPrev,
+    currentStepIndex,
+    isCompleted,
+    resetValidation,
+    stepCount,
+    stepper,
+    setValidator,
+  };
+
+  return <StepperContext.Provider value={stepperApi}>{children(stepperApi)}</StepperContext.Provider>;
+}
+
+DesktopStepper.displayName = 'DesktopStepper';

package/src/helperComponents/DesktopStepper/index.ts

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

package/src/helperComponents/DesktopStepper/styles.module.scss

@@ -0,0 +1,6 @@
+.stepper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+}

package/src/helperComponents/MobileStep/MobileStep.tsx

@@ -0,0 +1,46 @@
+import { CheckSVG, CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun } from '@cloud-ru/ds-loader';
+import { ReactNode } from 'react';
+
+import { STEP_STATE } from '../../constants';
+import { StepState, StepViewData } from '../../types';
+import { getTestIdBuilder } from '../../utils';
+import styles from './styles.module.scss';
+
+export type MobileStepProps = {
+  /** Данные шага для отображения */
+  step: StepViewData;
+  /** data-test-id */
+  'data-test-id'?: string;
+};
+
+const getStepTestId = getTestIdBuilder('_element-step');
+
+function getContent(state: StepState): ReactNode {
+  switch (state) {
+    case STEP_STATE.Completed:
+      return <CheckSVG size={24} />;
+    case STEP_STATE.Rejected:
+      return <CrossSVG size={24} />;
+    case STEP_STATE.Loading:
+      return <Sun size='s' />;
+    default:
+      return null;
+  }
+}
+
+export function MobileStep({ step, 'data-test-id': testId }: MobileStepProps) {
+  return (
+    <button
+      type='button'
+      className={styles.step}
+      onClick={step.onClick}
+      disabled={!step.onClick}
+      data-test-id={getStepTestId(testId)}
+      data-state={step.state}
+    >
+      <div className={styles.track} />
+      <div className={styles.status}>{getContent(step.state)}</div>
+    </button>
+  );
+}

package/src/helperComponents/MobileStep/index.ts

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

package/src/helperComponents/MobileStep/styles.module.scss

@@ -0,0 +1,156 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/components/stepper.module' as base;
+
+.step {
+  all: unset;
+
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  min-height: 24px;
+
+  outline: none;
+
+  &:disabled {
+    cursor: default;
+  }
+
+  &:focus-visible {
+    border-radius: 2px;
+    outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-available-complementary;
+    outline-offset: base.$sn-primitive-strokeWeight-strokeSemiBold;
+  }
+}
+
+// Track — горизонтальная полоса шага. По умолчанию waiting (серая).
+.track {
+  position: relative;
+
+  width: 100%;
+  height: base.$sn-stepper-anatomy-size-s-progressWrapper-progressLine-height;
+  border-radius: base.$sn-stepper-anatomy-size-s-progressWrapper-progressLine-borderRadius;
+
+  background-color: base.$sn-theme-color-neutral-decor;
+
+  transition: background-color 150ms ease;
+}
+
+// Status — круглый индикатор поверх полосы, центрируется.
+// Виден только для completed / loading / rejected.
+.status {
+  pointer-events: none;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: none;
+  align-items: center;
+  justify-content: center;
+
+  width: base.$sn-stepper-anatomy-size-s-stepStatus-width;
+  height: base.$sn-stepper-anatomy-size-s-stepStatus-height;
+  border-radius: 50%;
+}
+
+// State-layer: hover/pressed красят ТОЛЬКО полосу и круг (если он есть на этом
+// шаге), но триггерятся по всей кликабельной области `.step`. Оверлей клипится
+// формой родителя через `border-radius: inherit` (пилюля полосы / круг статуса),
+// поэтому большой прямоугольной плашки на всю кнопку больше нет.
+.track::after,
+.status::after {
+  pointer-events: none;
+  content: '';
+
+  position: absolute;
+  inset: 0;
+
+  border-radius: inherit;
+
+  background-color: base.$sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled;
+
+  transition: background-color 150ms ease;
+}
+
+.step[data-state='completed'] {
+  .track::after,
+  .status::after {
+    background-color: base.$sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled;
+  }
+}
+
+@media (hover: hover) {
+  .step:not(:disabled):hover {
+    .track::after,
+    .status::after {
+      background-color: base.$sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled;
+    }
+  }
+}
+
+.step:not(:disabled):active {
+  .track::after,
+  .status::after {
+    background-color: base.$sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled;
+  }
+}
+
+@media (hover: hover) {
+  .step[data-state='completed']:not(:disabled):hover {
+    .track::after,
+    .status::after {
+      background-color: base.$sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled;
+    }
+  }
+}
+
+.step[data-state='completed']:not(:disabled):active {
+  .track::after,
+  .status::after {
+    background-color: base.$sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled;
+  }
+}
+
+// Current — сплошная тёмно-зелёная полоса. Индикатор-круг не показывается.
+.step[data-state='current'] .track {
+  background-color: base.$sn-theme-color-primary-accent;
+}
+
+// Completed — светло-зелёная полоса + круг с галочкой в центре.
+.step[data-state='completed'] .track {
+  background-color: base.$sn-theme-color-primary-decor;
+}
+
+.step[data-state='completed'] .status {
+  display: flex;
+  color: base.$sn-theme-color-primary-accent;
+  background-color: base.$sn-theme-color-primary-decor;
+}
+
+// Loading — нейтральная серая полоса + серый круг со спиннером («в процессе»).
+.step[data-state='loading'] .track {
+  background-color: base.$sn-theme-color-neutral-decor;
+}
+
+.step[data-state='loading'] .status {
+  display: flex;
+  color: base.$sn-theme-color-neutral-text;
+  background-color: base.$sn-theme-color-neutral-background;
+}
+
+// Rejected — сплошная красная полоса + круг с крестом (как current, активное состояние).
+.step[data-state='rejected'] .track {
+  background-color: base.$sn-theme-color-red-accent;
+}
+
+.step[data-state='rejected'] .status {
+  display: flex;
+  color: base.$sn-theme-color-red-onAccent;
+  background-color: base.$sn-theme-color-red-accent;
+}

package/src/helperComponents/MobileStepper/MobileStepper.tsx

@@ -0,0 +1,71 @@
+import { Typography } from '@cloud-ru/ds-typography';
+import cn from 'classnames';
+
+import { StepperContext } from '../../context';
+import { useStepperController } from '../../hooks/useStepperController';
+import { StepperApi, StepperProps } from '../../types';
+import { MobileStep } from '../MobileStep';
+import styles from './styles.module.scss';
+
+export function MobileStepper({
+  children,
+  steps,
+  className,
+  onChangeCurrentStep,
+  onCompleteChange,
+  defaultCurrentStepIndex = 0,
+  validator,
+  allowFreeNavigation = false,
+  'data-test-id': testId,
+}: StepperProps) {
+  const { stepsView, currentStepIndex, isCompleted, stepCount, goNext, goPrev, resetValidation, setValidator } =
+    useStepperController({
+      steps,
+      defaultCurrentStepIndex,
+      validator,
+      onChangeCurrentStep,
+      onCompleteChange,
+      allowFreeNavigation,
+    });
+
+  const currentStep = stepsView[currentStepIndex];
+
+  const stepper = (
+    <div className={cn(styles.stepper, className)} data-test-id={testId}>
+      <div className={styles.steps} style={{ gridTemplateColumns: `repeat(${stepsView.length}, 1fr)` }}>
+        {stepsView.map((step, index) => (
+          <MobileStep key={step.title + index} step={step} data-test-id={testId} />
+        ))}
+      </div>
+
+      {currentStep && (
+        <div className={styles.content}>
+          <Typography variant='body' size='m' as='div' className={styles.title}>
+            {currentStep.title}
+          </Typography>
+
+          {currentStep.description && (
+            <Typography variant='body' size='s' as='div' className={styles.description}>
+              {currentStep.description}
+            </Typography>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  const stepperApi: StepperApi = {
+    goNext,
+    goPrev,
+    currentStepIndex,
+    isCompleted,
+    resetValidation,
+    stepCount,
+    stepper,
+    setValidator,
+  };
+
+  return <StepperContext.Provider value={stepperApi}>{children(stepperApi)}</StepperContext.Provider>;
+}
+
+MobileStepper.displayName = 'MobileStepper';

package/src/helperComponents/MobileStepper/index.ts

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

package/src/helperComponents/MobileStepper/styles.module.scss

@@ -0,0 +1,36 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/stepper.module' as stepper;
+
+.stepper {
+  display: flex;
+  flex-direction: column;
+  gap: stepper.$sn-stepper-anatomy-stepRow-gap;
+  width: 100%;
+}
+
+.steps {
+  display: grid;
+  gap: stepper.$sn-stepper-anatomy-step-gap;
+  width: 100%;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  overflow: hidden;
+  color: base.$sn-theme-color-available-version-textMain;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+}

package/src/helperComponents/StepIcon/StepIcon.tsx

@@ -0,0 +1,47 @@
+import { CheckSVG, CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun } from '@cloud-ru/ds-loader';
+import { Typography } from '@cloud-ru/ds-typography';
+import cn from 'classnames';
+import { ReactNode, useMemo } from 'react';
+
+import { STEP_STATE } from '../../constants';
+import { StepState } from '../../types';
+import styles from './styles.module.scss';
+
+export type StepIconProps = {
+  /** Состояние шага */
+  state: StepState;
+  /** Порядковый номер шага (1-based) */
+  number: number;
+  /** CSS-класс */
+  className?: string;
+};
+
+function getContent(state: StepState, number: number): ReactNode {
+  switch (state) {
+    case STEP_STATE.Completed:
+      return <CheckSVG size={24} />;
+    case STEP_STATE.Rejected:
+      return <CrossSVG size={24} />;
+    case STEP_STATE.Loading:
+      return <Sun size='s' />;
+    default:
+      return number;
+  }
+}
+
+export function StepIcon({ state, number, className }: StepIconProps) {
+  const content = useMemo(() => getContent(state, number), [number, state]);
+
+  return (
+    <div data-state={state} className={cn(styles.icon, className)}>
+      {typeof content === 'number' ? (
+        <Typography variant='label' size='l' as='span'>
+          {content}
+        </Typography>
+      ) : (
+        content
+      )}
+    </div>
+  );
+}

package/src/helperComponents/StepIcon/index.ts

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

package/src/helperComponents/StepIcon/styles.module.scss

@@ -0,0 +1,54 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/components/stepper.module' as base;
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: base.$sn-stepper-anatomy-size-m-stepStatus-width;
+  height: base.$sn-stepper-anatomy-size-m-stepStatus-height;
+  border: base.$sn-stepper-anatomy-size-m-stepStatus-borderWidth solid transparent;
+  border-radius: 50%;
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+
+  background-color: base.$sn-theme-color-neutral-background1Level;
+
+  transition:
+    background-color 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
+
+  // Waiting — белый фон, еле-заметный бордер, приглушённый номер.
+  &[data-state='waiting'] {
+    border-color: base.$sn-theme-color-available-borderColor;
+    color: base.$sn-theme-color-available-version-textTertiary;
+    background-color: base.$sn-theme-color-neutral-background1Level;
+  }
+
+  // Current — сплошной тёмно-зелёный фон, светлый номер, без бордера.
+  &[data-state='current'] {
+    color: base.$sn-theme-color-primary-onAccent;
+    background-color: base.$sn-theme-color-primary-accent;
+  }
+
+  // Loading — нейтральный серый фон, еле-заметный бордер, серый спиннер («в процессе»).
+  &[data-state='loading'] {
+    border-color: base.$sn-theme-color-available-borderColor;
+    color: base.$sn-theme-color-neutral-text;
+    background-color: base.$sn-theme-color-neutral-background;
+  }
+
+  // Completed — светло-зелёный фон, тёмно-зелёная галочка.
+  &[data-state='completed'] {
+    color: base.$sn-theme-color-primary-accent;
+    background-color: base.$sn-theme-color-primary-decor;
+  }
+
+  // Rejected — сплошной красный фон, светлый крест.
+  &[data-state='rejected'] {
+    color: base.$sn-theme-color-red-onAccent;
+    background-color: base.$sn-theme-color-red-accent;
+  }
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,5 @@
+export * from './DesktopStep';
+export * from './DesktopStepper';
+export * from './MobileStep';
+export * from './MobileStepper';
+export * from './StepIcon';

package/src/hooks/useStepperController.ts

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { STEP_STATE } from '../constants';
+import { StepData, StepState, StepsValidator, StepViewData } from '../types';
+
+const DEFAULT_VALIDATOR: StepsValidator = async () => true;
+
+export type UseStepperControllerParams = {
+  steps: StepData[];
+  defaultCurrentStepIndex?: number;
+  validator?: StepsValidator;
+  onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
+  onCompleteChange?: (isCompleted: boolean) => void;
+  allowFreeNavigation: boolean;
+};
+
+export type UseStepperControllerResult = {
+  stepsView: StepViewData[];
+  currentStepIndex: number;
+  currentStepState: StepState;
+  isCompleted: boolean;
+  stepCount: number;
+  goNext: (stepIndex?: number) => void;
+  goPrev: (stepIndex?: number) => void;
+  resetValidation: () => void;
+  setValidator: (validator: StepsValidator) => void;
+};
+
+/**
+ * Общий контроллер состояния шагов — используется одинаково в Stepper и
+ * MobileStepper. Порт из @snack-uikit/stepper без изменений поведения.
+ */
+export function useStepperController({
+  steps,
+  defaultCurrentStepIndex = 0,
+  validator: validatorProp = DEFAULT_VALIDATOR,
+  onChangeCurrentStep,
+  onCompleteChange,
+  allowFreeNavigation,
+}: UseStepperControllerParams): UseStepperControllerResult {
+  const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
+  const [currentStepState, setCurrentStepState] = useState<StepState>(
+    isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current,
+  );
+  const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
+  const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
+  const [stepsValidator, setStepsValidator] = useState<{ value: StepsValidator }>();
+
+  useEffect(() => {
+    onCompleteChange?.(isCompleted);
+  }, [isCompleted, onCompleteChange]);
+
+  const setCurrentStepIndex = useCallback(
+    (newValue: number) => {
+      setCurrentStepIndexValue(prevValue => {
+        if (prevValue !== newValue) {
+          onChangeCurrentStep?.(newValue, prevValue);
+        }
+        return newValue;
+      });
+    },
+    [onChangeCurrentStep],
+  );
+
+  const goNext = useCallback(
+    (newStepIndexUnsafety: number = currentStepIndex + 1) => {
+      if (currentStepIndex >= steps.length || isCompleted || newStepIndexUnsafety <= currentStepIndex) {
+        return;
+      }
+
+      const newStepIndex = Math.min(steps.length - 1, newStepIndexUnsafety);
+
+      setCurrentStepState(STEP_STATE.Loading);
+
+      const validator = stepsValidator?.value || validatorProp;
+
+      validator(currentStepIndex, newStepIndex)
+        .catch(() => false)
+        .then(isValid => {
+          if (!isValid) {
+            setCurrentStepState(STEP_STATE.Rejected);
+            return;
+          }
+
+          if (currentStepIndex === steps.length - 1) {
+            setCurrentStepState(STEP_STATE.Completed);
+            setIsCompleted(true);
+          } else {
+            setCurrentStepIndex(newStepIndex);
+            setCurrentStepState(STEP_STATE.Current);
+          }
+        });
+    },
+    [currentStepIndex, isCompleted, setCurrentStepIndex, steps.length, stepsValidator?.value, validatorProp],
+  );
+
+  const moveToStep = useCallback(
+    (stepIndex: number) => {
+      if (isCompleted) {
+        setIsCompleted(false);
+      }
+
+      setCurrentStepIndex(stepIndex);
+      setCurrentStepState(STEP_STATE.Current);
+    },
+    [isCompleted, setCurrentStepIndex],
+  );
+
+  const goToStep = useCallback(
+    (newStepIndex: number) => {
+      if (newStepIndex < 0 || newStepIndex >= steps.length) {
+        return;
+      }
+
+      if (newStepIndex === currentStepIndex) {
+        return;
+      }
+
+      moveToStep(newStepIndex);
+    },
+    [currentStepIndex, steps, moveToStep],
+  );
+
+  const goPrev = useCallback(
+    (index: number = currentStepIndex - 1) => {
+      if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
+        return;
+      }
+
+      if (index === currentStepIndex && !isCompleted) {
+        return;
+      }
+
+      moveToStep(index);
+    },
+    [currentStepIndex, isCompleted, moveToStep],
+  );
+
+  const getStepOnClick = useCallback(
+    (stepIndex: number) => {
+      if (allowFreeNavigation) {
+        return () => goToStep(stepIndex);
+      }
+
+      if (stepIndex < currentStepIndex || (stepIndex === currentStepIndex && isCompleted)) {
+        return () => goPrev(stepIndex);
+      }
+
+      if (stepIndex === currentStepIndex + 1) {
+        return () => goNext();
+      }
+
+      return undefined;
+    },
+    [allowFreeNavigation, currentStepIndex, goNext, goPrev, goToStep, isCompleted],
+  );
+
+  const stepsView: StepViewData[] = useMemo(
+    () =>
+      steps.map((step, index) => {
+        const number = index + 1;
+        let state: StepState = STEP_STATE.Waiting;
+
+        if (index < currentStepIndex) {
+          state = STEP_STATE.Completed;
+        } else if (index === currentStepIndex) {
+          state = currentStepState;
+        }
+
+        return {
+          ...step,
+          number,
+          state,
+          onClick: getStepOnClick(index),
+        };
+      }),
+    [steps, currentStepIndex, currentStepState, getStepOnClick],
+  );
+
+  const resetValidation = useCallback(() => {
+    if (currentStepState === STEP_STATE.Rejected) {
+      setCurrentStepState(STEP_STATE.Current);
+    }
+  }, [currentStepState]);
+
+  const setValidator = useCallback((validator: StepsValidator) => {
+    setStepsValidator({ value: validator });
+  }, []);
+
+  return {
+    stepsView,
+    currentStepIndex,
+    currentStepState,
+    isCompleted,
+    stepCount: steps.length,
+    goNext,
+    goPrev,
+    resetValidation,
+    setValidator,
+  };
+}