@snack-uikit/stepper 0.2.19-preview-85c5f47b.0

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,103 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { StepState, StepValidationResult } from '../../constants';
+import { Step } from '../../helperComponents';
+import { StepperContext } from '../../StepperContext';
+import styles from './styles.module.css';
+export function Stepper(_a) {
+    var { children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex = 0 } = _a, props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex"]);
+    const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
+    const [currentStepState, setCurrentStepState] = useState(isCompletedByDefault ? StepState.Completed : StepState.Current);
+    const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
+    const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
+    useEffect(() => {
+        onCompleteChange === null || onCompleteChange === void 0 ? void 0 : onCompleteChange(isCompleted);
+    }, [isCompleted, onCompleteChange]);
+    const setCurrentStepIndex = useCallback((newValue) => {
+        setCurrentStepIndexValue(prevValue => {
+            if (prevValue !== newValue) {
+                onChangeCurrentStep === null || onChangeCurrentStep === void 0 ? void 0 : onChangeCurrentStep(newValue, prevValue);
+            }
+            return newValue;
+        });
+    }, [onChangeCurrentStep]);
+    const goNext = useCallback(() => {
+        var _a, _b;
+        if (currentStepIndex >= steps.length || isCompleted) {
+            return;
+        }
+        const currentStep = steps[currentStepIndex];
+        const stepperValidPromise = (_b = (_a = currentStep.validation) === null || _a === void 0 ? void 0 : _a.call(currentStep)) !== null && _b !== void 0 ? _b : Promise.resolve(StepState.Completed);
+        setCurrentStepState(StepState.Loading);
+        stepperValidPromise
+            .then(validationResult => {
+            switch (validationResult) {
+                case StepValidationResult.Completed:
+                    if (currentStepIndex === steps.length - 1) {
+                        // завершился последний шаг
+                        setCurrentStepState(StepState.Completed);
+                        setIsCompleted(true);
+                    }
+                    else {
+                        setCurrentStepIndex(currentStepIndex + 1);
+                        setCurrentStepState(StepState.Current);
+                    }
+                    return;
+                case StepValidationResult.Rejected:
+                    setCurrentStepState(StepState.Rejected);
+                    return;
+                default:
+                    setCurrentStepState(StepState.Current);
+            }
+        })
+            .catch(() => setCurrentStepState(StepState.Rejected));
+    }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
+    const goPrev = useCallback((index = currentStepIndex - 1) => {
+        if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
+            return;
+        }
+        if (index === currentStepIndex && !isCompleted) {
+            return;
+        }
+        if (isCompleted) {
+            setIsCompleted(false);
+        }
+        setCurrentStepIndex(index);
+        setCurrentStepState(StepState.Current);
+    }, [currentStepIndex, isCompleted, setCurrentStepIndex]);
+    const stepsView = useMemo(() => steps.map((step, index) => {
+        const number = index + 1;
+        if (index < currentStepIndex) {
+            return Object.assign(Object.assign({}, step), { number, state: StepState.Completed, onClick: () => goPrev(index) });
+        }
+        if (index === currentStepIndex) {
+            return Object.assign(Object.assign({}, step), { number, state: currentStepState, onClick: isCompleted ? () => goPrev(index) : undefined });
+        }
+        if (index - 1 === currentStepIndex) {
+            return Object.assign(Object.assign({}, step), { number, state: StepState.Waiting, onClick: () => goNext() });
+        }
+        return Object.assign(Object.assign({}, step), { number, state: StepState.Waiting });
+    }), [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext]);
+    const resetValidation = useCallback(() => {
+        if (currentStepState === StepState.Rejected) {
+            setCurrentStepState(StepState.Current);
+        }
+    }, [currentStepState]);
+    const stepper = (_jsx("div", Object.assign({ className: cn(styles.stepper, className) }, extractSupportProps(props), { children: stepsView.map((step, index, all) => (_jsx(Step, { step: step, isLast: all.length - 1 === index, "data-test-id": props['data-test-id'] }, step.title + index))) })));
+    const stepperApi = { goNext, goPrev, currentStepIndex, isCompleted, resetValidation, stepCount: steps.length };
+    return _jsx(StepperContext.Provider, Object.assign({ value: stepperApi }, { children: children(Object.assign({ stepper }, stepperApi)) }));
+}
+Stepper.validationResults = StepValidationResult;

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

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

package/dist/components/Stepper/index.js

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

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

@@ -0,0 +1,4 @@
+.stepper{
+  display:flex;
+  flex-direction:row;
+}

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/constants.d.ts

@@ -0,0 +1,11 @@
+export declare enum StepState {
+    Completed = "completed",
+    Current = "current",
+    Loading = "loading",
+    Waiting = "waiting",
+    Rejected = "rejected"
+}
+export declare enum StepValidationResult {
+    Completed = "completed",
+    Rejected = "rejected"
+}

package/dist/constants.js

@@ -0,0 +1,13 @@
+export var StepState;
+(function (StepState) {
+    StepState["Completed"] = "completed";
+    StepState["Current"] = "current";
+    StepState["Loading"] = "loading";
+    StepState["Waiting"] = "waiting";
+    StepState["Rejected"] = "rejected";
+})(StepState || (StepState = {}));
+export var StepValidationResult;
+(function (StepValidationResult) {
+    StepValidationResult["Completed"] = "completed";
+    StepValidationResult["Rejected"] = "rejected";
+})(StepValidationResult || (StepValidationResult = {}));

package/dist/helperComponents/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import { StepState } from '../../constants';
+export type IconProps = {
+    state: StepState;
+    number: number;
+    className?: string;
+};
+export declare function Icon({ state, number, className }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Icon/Icon.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
+import { Sun } from '@snack-uikit/loaders';
+import { Typography } from '@snack-uikit/typography';
+import { StepState } from '../../constants';
+import styles from './styles.module.css';
+function getContent(state, number) {
+    switch (state) {
+        case StepState.Completed:
+            return _jsx(CheckSVG, {});
+        case StepState.Rejected:
+            return _jsx(CrossSVG, {});
+        case StepState.Loading:
+            return _jsx(Sun, { size: Sun.sizes.S });
+        default:
+            return number;
+    }
+}
+export function Icon({ state, number, className }) {
+    const content = useMemo(() => getContent(state, number), [number, state]);
+    return (_jsx("div", Object.assign({ "data-state": state, className: cn(styles.icon, className) }, { children: typeof content === 'number' ? _jsx(Typography.SansLabelL, { children: content }) : content })));
+}

package/dist/helperComponents/Icon/index.d.ts

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

package/dist/helperComponents/Icon/index.js

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

package/dist/helperComponents/Icon/styles.module.css

@@ -0,0 +1,38 @@
+.icon{
+  width:var(--size-stepper-step-status, 32px);
+  height:var(--size-stepper-step-status, 32px);
+  border-radius:var(--radius-stepper-step-status, 16px);
+  border-width:var(--border-width-stepper-step-status, 2px);
+  overflow:hidden;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}
+.icon svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.icon[data-state=completed]{
+  color:var(--sys-primary-accent-default, #794ed3);
+  background-color:var(--sys-primary-decor-default, #ebdefd);
+}
+.icon[data-state=current]{
+  color:var(--sys-primary-on-accent, #fdfbff);
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.icon[data-state=waiting]{
+  box-sizing:border-box;
+  color:var(--sys-neutral-text-support, #565656);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-style:solid;
+}
+.icon[data-state=loading]{
+  box-sizing:border-box;
+  color:var(--sys-neutral-accent-default, #757575);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-style:solid;
+}
+.icon[data-state=rejected]{
+  color:var(--sys-red-on-accent, #fffbfa);
+  background-color:var(--sys-red-accent-default, #d93f2f);
+}

package/dist/helperComponents/Step/Step.d.ts

@@ -0,0 +1,8 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { StepViewData } from '../../types';
+export type StepProps = WithSupportProps<{
+    step: StepViewData;
+    className?: string;
+    isLast: boolean;
+}>;
+export declare function Step({ step, className, isLast, 'data-test-id': testId, ...props }: StepProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Step/Step.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { StepState } from '../../constants';
+import { getTestIdBuilder } from '../../utils';
+import { Icon } from '../Icon';
+import styles from './styles.module.css';
+const getTailTestId = getTestIdBuilder('_element-tail');
+const getStepTestId = getTestIdBuilder('_element-step');
+export function Step(_a) {
+    var { step, className, isLast, 'data-test-id': testId } = _a, props = __rest(_a, ["step", "className", "isLast", 'data-test-id']);
+    return (_jsxs("div", Object.assign({ className: cn(styles.step, className), "data-state": step.state }, extractSupportProps(props), { children: [_jsxs("button", Object.assign({ className: styles.content, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state }, { children: [_jsx(Icon, Object.assign({}, step, { className: styles.icon })), _jsx(Typography, Object.assign({ className: styles.title, tag: Typography.tags.div, family: Typography.families.Sans, role: Typography.roles.Body, size: Typography.sizes.M }, { children: _jsx(TruncateString, { text: step.title }) }))] })), !isLast && (_jsx("div", Object.assign({ className: styles.tail, "data-completed": step.state === StepState.Completed || undefined, "data-test-id": getTailTestId(testId) }, { children: _jsx("div", { className: styles.tailLine }) })))] })));
+}

package/dist/helperComponents/Step/index.d.ts

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

package/dist/helperComponents/Step/index.js

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

package/dist/helperComponents/Step/styles.module.css

@@ -0,0 +1,65 @@
+.tailLine{
+  height:var(--size-stepper-step-track-line, 2px);
+  flex-grow:1;
+  background-color:var(--sys-neutral-decor-default, #dedede);
+}
+
+.tail{
+  height:var(--size-stepper-step-track-container, 32px);
+  padding-left:var(--space-stepper-step-track, 8px);
+  padding-right:var(--space-stepper-step-track, 8px);
+  display:flex;
+  flex-grow:1;
+  flex-shrink:1;
+  align-items:center;
+  min-width:var(--dimension-2m, 16px);
+}
+.tail[data-completed] .tailLine{
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+
+.title{
+  overflow:hidden;
+}
+
+.step{
+  display:flex;
+  flex:1;
+  align-items:center;
+  justify-content:center;
+  min-width:0;
+}
+.step:last-child{
+  max-width:-moz-max-content;
+  max-width:max-content;
+}
+
+.content{
+  gap:var(--space-stepper-step-content-gap, 8px);
+  overflow:hidden;
+  display:flex;
+  flex-shrink:1;
+  align-items:center;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-main, #333333);
+  background-color:transparent;
+  border:none;
+}
+.content:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #131313);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.content:not([disabled]){
+  cursor:pointer;
+}
+.content:not([disabled]):focus-visible, .content:not([disabled]):hover{
+  color:var(--sys-neutral-text-light, #898989);
+}
+
+.icon{
+  flex-shrink:0;
+}

package/dist/helperComponents/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Step';
+export * from './Icon';

package/dist/helperComponents/index.js

@@ -0,0 +1,2 @@
+export * from './Step';
+export * from './Icon';

package/dist/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useStepperApi: () => import("./types").StepperApi;

package/dist/hooks.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { StepperContext } from './StepperContext';
+export const useStepperApi = () => useContext(StepperContext);

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types.d.ts

@@ -0,0 +1,18 @@
+import { StepState, StepValidationResult } from './constants';
+export type StepData = {
+    title: string;
+    validation?(): Promise<StepValidationResult>;
+};
+export type StepViewData = StepData & {
+    onClick?(): void;
+    state: StepState;
+    number: number;
+};
+export type StepperApi = {
+    goNext(): void;
+    goPrev(): void;
+    resetValidation(): void;
+    isCompleted: boolean;
+    currentStepIndex: number;
+    stepCount: number;
+};

package/dist/types.js

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

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare const getTestIdBuilder: (postfix?: string) => (testId?: string) => string | undefined;

package/dist/utils.js

@@ -0,0 +1 @@
+export const getTestIdBuilder = (postfix) => (testId) => postfix && testId ? `${testId}${postfix}` : undefined;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@snack-uikit/stepper",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Stepper",
+  "version": "0.2.19-preview-85c5f47b.0",
+  "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/stepper",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/stepper"
+  },
+  "author": "Сергей Хлупин <svhlupin@cloud.ru>",
+  "contributors": [
+    "Сергей Хлупин <svhlupin@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/loaders": "0.3.5-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/typography": "0.4.5-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/StepperContext/StepperContext.ts

@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+
+import { StepperApi } from '../types';
+
+export type StepperContextValue = StepperApi;
+
+export const StepperContext = createContext<StepperApi>({
+  stepCount: 0,
+  isCompleted: false,
+  currentStepIndex: 0,
+  goNext() {
+    /* stub */
+  },
+  goPrev() {
+    /* stub */
+  },
+  resetValidation() {
+    /* stub */
+  },
+});

package/src/StepperContext/index.ts

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

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,167 @@
+import cn from 'classnames';
+import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { StepState, StepValidationResult } from '../../constants';
+import { Step } from '../../helperComponents';
+import { StepperContext } from '../../StepperContext';
+import { StepData, StepperApi, StepViewData } from '../../types';
+import styles from './styles.module.scss';
+
+export type StepperState = StepperApi & {
+  stepper: ReactElement;
+};
+
+export type StepperProps = WithSupportProps<{
+  /** Массив шагов */
+  steps: StepData[];
+  /** Индекс текущего шага по-дефолту */
+  defaultCurrentStepIndex: number;
+  /** CSS-класс */
+  className?: string;
+  /**
+   * Render function. Принимает аргументы: `stepper` - JSX-элемент степпера,
+   * `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
+   * @type ({stepper, ...api}) => ReactElement
+   */
+  children: (params: StepperState) => ReactElement;
+  /** Колбек смены текущего степа */
+  onChangeCurrentStep: (newValue: number, prevValue: number) => void;
+  /** Колбек изменения завершенности */
+  onCompleteChange: (isCompleted: boolean) => void;
+}>;
+
+export function Stepper({
+  children,
+  steps,
+  className,
+  onChangeCurrentStep,
+  onCompleteChange,
+  defaultCurrentStepIndex = 0,
+  ...props
+}: StepperProps) {
+  const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
+  const [currentStepState, setCurrentStepState] = useState(
+    isCompletedByDefault ? StepState.Completed : StepState.Current,
+  );
+  const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
+  const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
+
+  useEffect(() => {
+    onCompleteChange?.(isCompleted);
+  }, [isCompleted, onCompleteChange]);
+
+  const setCurrentStepIndex = useCallback(
+    (newValue: number) => {
+      setCurrentStepIndexValue(prevValue => {
+        if (prevValue !== newValue) {
+          onChangeCurrentStep?.(newValue, prevValue);
+        }
+        return newValue;
+      });
+    },
+    [onChangeCurrentStep],
+  );
+
+  const goNext = useCallback(() => {
+    if (currentStepIndex >= steps.length || isCompleted) {
+      return;
+    }
+
+    const currentStep = steps[currentStepIndex];
+
+    const stepperValidPromise = currentStep.validation?.() ?? Promise.resolve(StepState.Completed);
+
+    setCurrentStepState(StepState.Loading);
+
+    stepperValidPromise
+      .then(validationResult => {
+        switch (validationResult) {
+          case StepValidationResult.Completed:
+            if (currentStepIndex === steps.length - 1) {
+              // завершился последний шаг
+              setCurrentStepState(StepState.Completed);
+              setIsCompleted(true);
+            } else {
+              setCurrentStepIndex(currentStepIndex + 1);
+              setCurrentStepState(StepState.Current);
+            }
+            return;
+          case StepValidationResult.Rejected:
+            setCurrentStepState(StepState.Rejected);
+            return;
+          default:
+            setCurrentStepState(StepState.Current);
+        }
+      })
+      .catch(() => setCurrentStepState(StepState.Rejected));
+  }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
+
+  const goPrev = useCallback(
+    (index: number = currentStepIndex - 1) => {
+      if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
+        return;
+      }
+
+      if (index === currentStepIndex && !isCompleted) {
+        return;
+      }
+
+      if (isCompleted) {
+        setIsCompleted(false);
+      }
+
+      setCurrentStepIndex(index);
+      setCurrentStepState(StepState.Current);
+    },
+    [currentStepIndex, isCompleted, setCurrentStepIndex],
+  );
+
+  const stepsView: StepViewData[] = useMemo(
+    () =>
+      steps.map((step, index) => {
+        const number = index + 1;
+
+        if (index < currentStepIndex) {
+          return { ...step, number, state: StepState.Completed, onClick: () => goPrev(index) };
+        }
+
+        if (index === currentStepIndex) {
+          return { ...step, number, state: currentStepState, onClick: isCompleted ? () => goPrev(index) : undefined };
+        }
+
+        if (index - 1 === currentStepIndex) {
+          return { ...step, number, state: StepState.Waiting, onClick: () => goNext() };
+        }
+
+        return { ...step, number, state: StepState.Waiting };
+      }),
+    [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext],
+  );
+
+  const resetValidation = useCallback(() => {
+    if (currentStepState === StepState.Rejected) {
+      setCurrentStepState(StepState.Current);
+    }
+  }, [currentStepState]);
+
+  const stepper = (
+    <div className={cn(styles.stepper, className)} {...extractSupportProps(props)}>
+      {stepsView.map((step, index, all) => (
+        <Step
+          key={step.title + index}
+          step={step}
+          isLast={all.length - 1 === index}
+          data-test-id={props['data-test-id']}
+        />
+      ))}
+    </div>
+  );
+
+  const stepperApi = { goNext, goPrev, currentStepIndex, isCompleted, resetValidation, stepCount: steps.length };
+
+  return <StepperContext.Provider value={stepperApi}>{children({ stepper, ...stepperApi })}</StepperContext.Provider>;
+}
+
+Stepper.validationResults = StepValidationResult;

package/src/components/Stepper/index.ts

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

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

@@ -0,0 +1,4 @@
+.stepper {
+  display: flex;
+  flex-direction: row;
+}

package/src/components/index.ts

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

package/src/constants.ts

@@ -0,0 +1,12 @@
+export enum StepState {
+  Completed = 'completed',
+  Current = 'current',
+  Loading = 'loading',
+  Waiting = 'waiting',
+  Rejected = 'rejected',
+}
+
+export enum StepValidationResult {
+  Completed = 'completed',
+  Rejected = 'rejected',
+}