@snack-uikit/stepper 0.3.1 → 0.4.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.4.1 (2023-12-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+# 0.4.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.3.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -20,23 +20,27 @@ const steps = [
   { title: 'Step #2', validation: validation2 },
   { title: 'Step #3', validation: validation3 },
   { title: 'Step #4', validation: validation4 },
-]
-
-<Stepper steps={steps}>
-  {({
-    stepper, // JSX элемент компонента
-    isCompleted, // состояние завершенности всей цепочки
-    goNext, // функция перехода к след. шагу
-    goPrev, // функция перехода к предыдущему шагу
-  }) => (
-    <>
-      {stepper}
-
-      <button onClick={() => goPrev()}>go back</button>
-      <button onClick={() => goNext()}>go next</button>
-    </>
-  )}
-</Stepper>
+];
+
+// ...
+
+return (
+  <Stepper steps={steps}>
+    {({
+        stepper, // JSX элемент компонента
+        isCompleted, // состояние завершенности всей цепочки
+        goNext, // функция перехода к след. шагу
+        goPrev, // функция перехода к предыдущему шагу
+      }) => (
+      <>
+        {stepper}
+
+        <button onClick={() => goPrev()}>go back</button>
+        <button onClick={() => goNext()}>go next</button>
+      </>
+    )}
+  </Stepper>
+)
 ```
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT

package/dist/StepperContext/StepperContext.d.ts

@@ -2,3 +2,4 @@
 import { StepperApi } from '../types';
 export type StepperContextValue = StepperApi;
 export declare const StepperContext: import("react").Context<StepperApi>;
+export declare const useStepperApi: () => StepperApi;

package/dist/StepperContext/StepperContext.js

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 export const StepperContext = createContext({
     stepCount: 0,
     isCompleted: false,
@@ -13,3 +13,4 @@ export const StepperContext = createContext({
         /* stub */
     },
 });
+export const useStepperApi = () => useContext(StepperContext);

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

@@ -1,6 +1,5 @@
 import { ReactElement } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { StepValidationResult } from '../../constants';
 import { StepData, StepperApi } from '../../types';
 export type StepperState = StepperApi & {
     stepper: ReactElement;
@@ -24,6 +23,3 @@ export type StepperProps = WithSupportProps<{
     onCompleteChange: (isCompleted: boolean) => void;
 }>;
 export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Stepper {
-    var validationResults: typeof StepValidationResult;
-}

package/dist/components/Stepper/Stepper.js

@@ -13,14 +13,14 @@ 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_STATE, STEP_VALIDATION_RESULT } 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 [currentStepState, setCurrentStepState] = useState(isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current);
     const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
     const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
     useEffect(() => {
@@ -40,30 +40,30 @@ export function Stepper(_a) {
             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);
+        const stepperValidPromise = (_b = (_a = currentStep.validation) === null || _a === void 0 ? void 0 : _a.call(currentStep)) !== null && _b !== void 0 ? _b : Promise.resolve(STEP_STATE.Completed);
+        setCurrentStepState(STEP_STATE.Loading);
         stepperValidPromise
             .then(validationResult => {
             switch (validationResult) {
-                case StepValidationResult.Completed:
+                case STEP_VALIDATION_RESULT.Completed:
                     if (currentStepIndex === steps.length - 1) {
                         // завершился последний шаг
-                        setCurrentStepState(StepState.Completed);
+                        setCurrentStepState(STEP_STATE.Completed);
                         setIsCompleted(true);
                     }
                     else {
                         setCurrentStepIndex(currentStepIndex + 1);
-                        setCurrentStepState(StepState.Current);
+                        setCurrentStepState(STEP_STATE.Current);
                     }
                     return;
-                case StepValidationResult.Rejected:
-                    setCurrentStepState(StepState.Rejected);
+                case STEP_VALIDATION_RESULT.Rejected:
+                    setCurrentStepState(STEP_STATE.Rejected);
                     return;
                 default:
-                    setCurrentStepState(StepState.Current);
+                    setCurrentStepState(STEP_STATE.Current);
             }
         })
-            .catch(() => setCurrentStepState(StepState.Rejected));
+            .catch(() => setCurrentStepState(STEP_STATE.Rejected));
     }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
     const goPrev = useCallback((index = currentStepIndex - 1) => {
         if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
@@ -76,28 +76,27 @@ export function Stepper(_a) {
             setIsCompleted(false);
         }
         setCurrentStepIndex(index);
-        setCurrentStepState(StepState.Current);
+        setCurrentStepState(STEP_STATE.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) });
+            return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.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: STEP_STATE.Waiting, onClick: () => goNext() });
         }
-        return Object.assign(Object.assign({}, step), { number, state: StepState.Waiting });
+        return Object.assign(Object.assign({}, step), { number, state: STEP_STATE.Waiting });
     }), [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext]);
     const resetValidation = useCallback(() => {
-        if (currentStepState === StepState.Rejected) {
-            setCurrentStepState(StepState.Current);
+        if (currentStepState === STEP_STATE.Rejected) {
+            setCurrentStepState(STEP_STATE.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)) }));
+    return _jsx(StepperContext.Provider, { value: stepperApi, children: children(Object.assign({ stepper }, stepperApi)) });
 }
-Stepper.validationResults = StepValidationResult;

package/dist/constants.d.ts

@@ -1,11 +1,11 @@
-export declare enum StepState {
-    Completed = "completed",
-    Current = "current",
-    Loading = "loading",
-    Waiting = "waiting",
-    Rejected = "rejected"
-}
-export declare enum StepValidationResult {
-    Completed = "completed",
-    Rejected = "rejected"
-}
+export declare const STEP_STATE: {
+    readonly Completed: "completed";
+    readonly Current: "current";
+    readonly Loading: "loading";
+    readonly Waiting: "waiting";
+    readonly Rejected: "rejected";
+};
+export declare const STEP_VALIDATION_RESULT: {
+    readonly Completed: "completed";
+    readonly Rejected: "rejected";
+};

package/dist/constants.js

@@ -1,13 +1,11 @@
-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 = {}));
+export const STEP_STATE = {
+    Completed: 'completed',
+    Current: 'current',
+    Loading: 'loading',
+    Waiting: 'waiting',
+    Rejected: 'rejected',
+};
+export const STEP_VALIDATION_RESULT = {
+    Completed: 'completed',
+    Rejected: 'rejected',
+};

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

@@ -1,4 +1,4 @@
-import { StepState } from '../../constants';
+import { StepState } from '../../types';
 export type IconProps = {
     state: StepState;
     number: number;

package/dist/helperComponents/Icon/Icon.js

@@ -4,21 +4,21 @@ 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 { STEP_STATE } from '../../constants';
 import styles from './styles.module.css';
 function getContent(state, number) {
     switch (state) {
-        case StepState.Completed:
+        case STEP_STATE.Completed:
             return _jsx(CheckSVG, {});
-        case StepState.Rejected:
+        case STEP_STATE.Rejected:
             return _jsx(CrossSVG, {});
-        case StepState.Loading:
-            return _jsx(Sun, { size: Sun.sizes.S });
+        case STEP_STATE.Loading:
+            return _jsx(Sun, { size: '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 })));
+    return (_jsx("div", { "data-state": state, className: cn(styles.icon, className), children: typeof content === 'number' ? _jsx(Typography.SansLabelL, { children: content }) : content }));
 }

package/dist/helperComponents/Step/Step.js

@@ -14,7 +14,7 @@ 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 { STEP_STATE } from '../../constants';
 import { getTestIdBuilder } from '../../utils';
 import { Icon } from '../Icon';
 import styles from './styles.module.css';
@@ -22,5 +22,5 @@ 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 }) })))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.step, className), "data-state": step.state }, extractSupportProps(props), { children: [_jsxs("button", { 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.SansBodyM, { className: styles.title, tag: 'div', children: _jsx(TruncateString, { text: step.title }) })] }), !isLast && (_jsx("div", { className: styles.tail, "data-completed": step.state === STEP_STATE.Completed || undefined, "data-test-id": getTailTestId(testId), children: _jsx("div", { className: styles.tailLine }) }))] })));
 }

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export * from './components';
-export * from './hooks';
+export { useStepperApi } from './StepperContext';

package/dist/index.js

@@ -1,2 +1,2 @@
 export * from './components';
-export * from './hooks';
+export { useStepperApi } from './StepperContext';

package/dist/types.d.ts

@@ -1,4 +1,7 @@
-import { StepState, StepValidationResult } from './constants';
+import { ValueOf } from '@snack-uikit/utils';
+import { STEP_STATE, STEP_VALIDATION_RESULT } from './constants';
+export type StepState = ValueOf<typeof STEP_STATE>;
+export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
 export type StepData = {
     title: string;
     validation?(): Promise<StepValidationResult>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Stepper",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,12 +32,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/loaders": "0.4.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/loaders": "0.5.0",
+    "@snack-uikit/truncate-string": "0.4.1",
+    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
 }

package/src/StepperContext/StepperContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 import { StepperApi } from '../types';
 
@@ -18,3 +18,5 @@ export const StepperContext = createContext<StepperApi>({
     /* stub */
   },
 });
+
+export const useStepperApi = () => useContext(StepperContext);

package/src/components/Stepper/Stepper.tsx

@@ -3,10 +3,10 @@ import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { StepState, StepValidationResult } from '../../constants';
+import { STEP_STATE, STEP_VALIDATION_RESULT } from '../../constants';
 import { Step } from '../../helperComponents';
 import { StepperContext } from '../../StepperContext';
-import { StepData, StepperApi, StepViewData } from '../../types';
+import { StepData, StepperApi, StepState, StepViewData } from '../../types';
 import styles from './styles.module.scss';
 
 export type StepperState = StepperApi & {
@@ -42,8 +42,8 @@ export function Stepper({
   ...props
 }: StepperProps) {
   const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
-  const [currentStepState, setCurrentStepState] = useState(
-    isCompletedByDefault ? StepState.Completed : StepState.Current,
+  const [currentStepState, setCurrentStepState] = useState<StepState>(
+    isCompletedByDefault ? STEP_STATE.Completed : STEP_STATE.Current,
   );
   const [currentStepIndex, setCurrentStepIndexValue] = useState(defaultCurrentStepIndex);
   const [isCompleted, setIsCompleted] = useState(isCompletedByDefault);
@@ -71,31 +71,31 @@ export function Stepper({
 
     const currentStep = steps[currentStepIndex];
 
-    const stepperValidPromise = currentStep.validation?.() ?? Promise.resolve(StepState.Completed);
+    const stepperValidPromise = currentStep.validation?.() ?? Promise.resolve(STEP_STATE.Completed);
 
-    setCurrentStepState(StepState.Loading);
+    setCurrentStepState(STEP_STATE.Loading);
 
     stepperValidPromise
       .then(validationResult => {
         switch (validationResult) {
-          case StepValidationResult.Completed:
+          case STEP_VALIDATION_RESULT.Completed:
             if (currentStepIndex === steps.length - 1) {
               // завершился последний шаг
-              setCurrentStepState(StepState.Completed);
+              setCurrentStepState(STEP_STATE.Completed);
               setIsCompleted(true);
             } else {
               setCurrentStepIndex(currentStepIndex + 1);
-              setCurrentStepState(StepState.Current);
+              setCurrentStepState(STEP_STATE.Current);
             }
             return;
-          case StepValidationResult.Rejected:
-            setCurrentStepState(StepState.Rejected);
+          case STEP_VALIDATION_RESULT.Rejected:
+            setCurrentStepState(STEP_STATE.Rejected);
             return;
           default:
-            setCurrentStepState(StepState.Current);
+            setCurrentStepState(STEP_STATE.Current);
         }
       })
-      .catch(() => setCurrentStepState(StepState.Rejected));
+      .catch(() => setCurrentStepState(STEP_STATE.Rejected));
   }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps]);
 
   const goPrev = useCallback(
@@ -113,7 +113,7 @@ export function Stepper({
       }
 
       setCurrentStepIndex(index);
-      setCurrentStepState(StepState.Current);
+      setCurrentStepState(STEP_STATE.Current);
     },
     [currentStepIndex, isCompleted, setCurrentStepIndex],
   );
@@ -124,7 +124,7 @@ export function Stepper({
         const number = index + 1;
 
         if (index < currentStepIndex) {
-          return { ...step, number, state: StepState.Completed, onClick: () => goPrev(index) };
+          return { ...step, number, state: STEP_STATE.Completed, onClick: () => goPrev(index) };
         }
 
         if (index === currentStepIndex) {
@@ -132,17 +132,17 @@ export function Stepper({
         }
 
         if (index - 1 === currentStepIndex) {
-          return { ...step, number, state: StepState.Waiting, onClick: () => goNext() };
+          return { ...step, number, state: STEP_STATE.Waiting, onClick: () => goNext() };
         }
 
-        return { ...step, number, state: StepState.Waiting };
+        return { ...step, number, state: STEP_STATE.Waiting };
       }),
     [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext],
   );
 
   const resetValidation = useCallback(() => {
-    if (currentStepState === StepState.Rejected) {
-      setCurrentStepState(StepState.Current);
+    if (currentStepState === STEP_STATE.Rejected) {
+      setCurrentStepState(STEP_STATE.Current);
     }
   }, [currentStepState]);
 
@@ -163,5 +163,3 @@ export function Stepper({
 
   return <StepperContext.Provider value={stepperApi}>{children({ stepper, ...stepperApi })}</StepperContext.Provider>;
 }
-
-Stepper.validationResults = StepValidationResult;

package/src/constants.ts

@@ -1,12 +1,12 @@
-export enum StepState {
-  Completed = 'completed',
-  Current = 'current',
-  Loading = 'loading',
-  Waiting = 'waiting',
-  Rejected = 'rejected',
-}
+export const STEP_STATE = {
+  Completed: 'completed',
+  Current: 'current',
+  Loading: 'loading',
+  Waiting: 'waiting',
+  Rejected: 'rejected',
+} as const;
 
-export enum StepValidationResult {
-  Completed = 'completed',
-  Rejected = 'rejected',
-}
+export const STEP_VALIDATION_RESULT = {
+  Completed: 'completed',
+  Rejected: 'rejected',
+} as const;

package/src/helperComponents/Icon/Icon.tsx

@@ -5,7 +5,8 @@ import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
 import { Sun } from '@snack-uikit/loaders';
 import { Typography } from '@snack-uikit/typography';
 
-import { StepState } from '../../constants';
+import { STEP_STATE } from '../../constants';
+import { StepState } from '../../types';
 import styles from './styles.module.scss';
 
 export type IconProps = {
@@ -16,12 +17,12 @@ export type IconProps = {
 
 function getContent(state: StepState, number: number) {
   switch (state) {
-    case StepState.Completed:
+    case STEP_STATE.Completed:
       return <CheckSVG />;
-    case StepState.Rejected:
+    case STEP_STATE.Rejected:
       return <CrossSVG />;
-    case StepState.Loading:
-      return <Sun size={Sun.sizes.S} />;
+    case STEP_STATE.Loading:
+      return <Sun size='s' />;
     default:
       return number;
   }

package/src/helperComponents/Step/Step.tsx

@@ -4,7 +4,7 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { StepState } from '../../constants';
+import { STEP_STATE } from '../../constants';
 import { StepViewData } from '../../types';
 import { getTestIdBuilder } from '../../utils';
 import { Icon } from '../Icon';
@@ -30,20 +30,14 @@ export function Step({ step, className, isLast, 'data-test-id': testId, ...props
         data-state={step.state}
       >
         <Icon {...step} className={styles.icon} />
-        <Typography
-          className={styles.title}
-          tag={Typography.tags.div}
-          family={Typography.families.Sans}
-          role={Typography.roles.Body}
-          size={Typography.sizes.M}
-        >
+        <Typography.SansBodyM className={styles.title} tag='div'>
           <TruncateString text={step.title} />
-        </Typography>
+        </Typography.SansBodyM>
       </button>
       {!isLast && (
         <div
           className={styles.tail}
-          data-completed={step.state === StepState.Completed || undefined}
+          data-completed={step.state === STEP_STATE.Completed || undefined}
           data-test-id={getTailTestId(testId)}
         >
           <div className={styles.tailLine} />

package/src/index.ts

@@ -1,2 +1,2 @@
 export * from './components';
-export * from './hooks';
+export { useStepperApi } from './StepperContext';

package/src/types.ts

@@ -1,4 +1,10 @@
-import { StepState, StepValidationResult } from './constants';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { STEP_STATE, STEP_VALIDATION_RESULT } from './constants';
+
+export type StepState = ValueOf<typeof STEP_STATE>;
+
+export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
 
 export type StepData = {
   title: string;

package/dist/hooks.d.ts

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

package/dist/hooks.js

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

package/src/hooks.ts

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