@dt-dds/react-stepper 1.0.0-beta.46 → 1.0.0-beta.47

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dt-ui/react-stepper
 
+## 1.0.0-beta.47
+
+### Minor Changes
+
+- feat: refactor stepper
+
 ## 1.0.0-beta.46
 
 ### Patch Changes

package/README.md

@@ -1,44 +1,178 @@
 # Stepper Package
 
-Steppers convey progress through steps. These steps can be numbered or not. However, they are sequential.
+Steppers convey progress through numbered, bullet, or icon-based sequential steps. 
 
-By default, for screens smaller than our `theme.breakpoints.mq3d` the stepper orientation is always vertical.
+They support various states including completed, incomplete, warning, error, and disabled.
 
 ## Stepper Usage
 
 ```jsx
-import { Stepper, Step } from '@dt-dds/react';
+import { Stepper } from '@dt-dds/react-stepper';
 
 export const App = () => {
-  const options = ['API version definition', 'Specifications', 'Review'];
-
-  const currentStep = 3;
-  const completed = [1, 2];
-
   return (
     <Stepper>
-      {options.map((opt, idx) => (
-        <Step
-          key={option.value}
-          isActive={currentStep === idx + 1}
-          isCompleted={completed.includes(idx + 1)}
-        >
-          <Step.Counter>{idx + 1}</Step.Counter>
-          <Step.Label>{opt}</Step.Label>
-        </Step>
-      ))}
+      <Stepper.Step 
+        title="Completed Step" 
+        description="This step is done"
+        state="completed" 
+      />
+      <Stepper.Step 
+        title="Current Step" 
+        description="Working on this"
+        state="incomplete"
+        isActive={true}
+      />
+      <Stepper.Step 
+        title="Warning Step" 
+        description="Needs attention"
+        state="warning" 
+      />
+      <Stepper.Step 
+        title="Error Step" 
+        description="Something went wrong"
+        state="error" 
+      />
+      <Stepper.Step 
+        title="Disabled Step" 
+        description="Not available yet"
+        state="disabled" 
+      />
     </Stepper>
   );
 };
 ```
 
+## Variants
+
+### Number Variant (Default)
+
+```jsx
+<Stepper variant="number">
+  <Stepper.Step title="Step 1" />
+  <Stepper.Step title="Step 2" />
+  <Stepper.Step title="Step 3" />
+</Stepper>
+```
+
+### Bullet Variant
+
+```jsx
+<Stepper variant="bullet">
+  <Stepper.Step title="Step 1" />
+  <Stepper.Step title="Step 2" />
+  <Stepper.Step title="Step 3" />
+</Stepper>
+```
+
+### Icon Variant
+
+```jsx
+import { Icon } from '@dt-dds/react-icon';
+
+<Stepper variant="icon">
+  <Stepper.Step 
+    title="Upload" 
+    icon={<Icon code="upload" size="small" />}
+  />
+  <Stepper.Step 
+    title="Process" 
+    icon={<Icon code="settings" size="small" />}
+  />
+  <Stepper.Step 
+    title="Complete" 
+    icon={<Icon code="check_circle" size="small" />}
+  />
+</Stepper>
+```
+
+## Using the useStepper Hook
+
+The useStepper hook provides a complete state management solution for steppers, including navigation, completion tracking, and boundary checks.
+
+```jsx
+import { useStepper } from '@dt-dds/react-stepper';
+
+export const ControlledStepper = () => {
+  const {
+    activeStep,
+    handleNext,
+    handleBack,
+    canGoNext,
+    canGoBack,
+  } = useStepper({
+    initialStep: 0,
+    totalSteps: 3,
+  });
+
+  return (
+    <>
+      <Stepper activeStep={activeStep}>
+        <Stepper.Step title="Step 1" description="First step" />
+        <Stepper.Step title="Step 2" description="Second step" />
+        <Stepper.Step title="Step 3" description="Third step" />
+      </Stepper>
+      
+      <button onClick={handleBack} disabled={!canGoBack}>
+        Back
+      </button>
+      <button onClick={handleNext} disabled={!canGoNext}>
+        Next
+      </button>
+    </>
+  );
+};
+```
+
+## useStepper Hook API
+
+### Options
+
+| Option          | Type     | Default | Description                           |
+|-----------------|----------|---------|---------------------------------------|
+| `initialStep`   | `number` | `0`     | The initial active step (0-based)     |
+| `totalSteps`    | `number` | —       | Total number of steps (for boundary checks) |
+
+### useStepper Return Values
+
+| Property                     | Type                                  | Description                                      |
+|-----------------------------|----------------------------------------|--------------------------------------------------|
+| `activeStep`                | `number`                               | Current active step index                        |
+| `isFirstStep`               | `boolean`                              | Whether currently on the first step              |
+| `isLastStep`                | `boolean`                              | Whether currently on the last step               |
+| `canGoNext`                 | `boolean`                              | Whether navigation to the next step is allowed   |
+| `canGoBack`                 | `boolean`                              | Whether navigation to the previous step is allowed |
+| `completedSteps`            | `Set<number>`                          | Set of completed step indices                    |
+| `handleNext`                | `() => void`                           | Navigate to the next step                        |
+| `handleBack`                | `() => void`                           | Navigate to the previous step                    |
+| `handleChangeStep`          | `(step: number) => void`               | Navigate to a specific step                      |
+| `handleReset`               | `() => void`                           | Reset to initial step and clear completed steps  |
+| `markStepComplete`          | `(step: number) => void`               | Mark a specific step as completed                |
+| `markStepIncomplete`        | `(step: number) => void`               | Mark a specific step as incomplete               |
+| `isStepComplete`            | `(step: number) => boolean`            | Check if a specific step is completed            |
+
 ## Properties
 
-| Property      | Type                         | Default         | Description                                                                     |
-| ------------- | ---------------------------- | --------------- | ------------------------------------------------------------------------------- |
-| `children`    | `ReactNode`                  | -               | Child components to be rendered                                                 |
-| `dataTestId`  | `string`                     | default-stepper | Customizable test identifier. This id is concatenated with the -stepper string. |
-| `orientation` | `"vertical" \| "horizontal"` | vertical        | To specify the direction of the step bar.                                       |
+### Stepper Props
+
+| Property      | Type                             | Default   | Description                              |
+| ------------- | -------------------------------- | --------- | ---------------------------------------- |
+| `children`    | `ReactNode`                      | —         | Step components to be rendered           |
+| `orientation` | `"vertical" \| "horizontal"`     | `vertical`| Direction of the stepper                 |
+| `variant`     | `"number" \| "bullet" \| "icon"` | `number`  | Visual style of step indicators          |
+| `activeStep`  | `number`                         | —         | Index of the active step (0-based)       |
+| `dataTestId`  | `string`                         | `stepper` | Test identifier for the stepper container|
+
+### Step Props
+
+| Property     | Type                                                            | Default        | Description                                  |
+|--------------|-----------------------------------------------------------------|----------------|----------------------------------------------|
+| `title`      | `string`                                                        | —              | Title text for the step                      |
+| `description`| `string`                                                        | —              | Description text for the step                |
+| `state`      | `"completed" \| "warning" \| "error" \| "disabled" \| "incomplete"` | `incomplete` | Visual state of the step                     |
+| `isActive`   | `boolean`                                                       | `false`        | Whether the step is currently active         |
+| `icon`       | `ReactNode`                                                     | —              | Custom icon for the icon variant             |
+| `dataTestId` | `string`                                                        | `step-{index}` | Test identifier for the step                 |
 
 ## Stack
 

package/dist/index.d.mts

@@ -1,41 +1,58 @@
-import { Colors, CustomTheme } from '@dt-dds/themes';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CustomTheme } from '@dt-dds/themes';
+import { ReactNode } from 'react';
 import { BaseProps, Orientation } from '@dt-dds/react-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type StepVariant = 'number' | 'bullet' | 'icon';
+type StepState = 'completed' | 'warning' | 'error' | 'disabled' | 'incomplete';
 interface StepperProps extends BaseProps {
     orientation?: Orientation;
+    variant?: StepVariant;
+    activeStep?: number;
 }
-declare const Stepper: ({ children, dataTestId, orientation, }: StepperProps) => react_jsx_runtime.JSX.Element;
-
-interface BaseStepProps extends Pick<BaseProps, 'children'> {
+interface StepProps extends BaseProps {
+    index?: number;
+    title?: string;
+    description?: string;
+    state?: StepState;
     isActive?: boolean;
-    isCompleted?: boolean;
-    isDisabled?: boolean;
-    isError?: boolean;
+    variant?: StepVariant;
+    icon?: ReactNode;
+    isLast?: boolean;
+    orientation?: Orientation;
 }
-declare const Step: {
-    ({ children, isActive, isCompleted, isDisabled, isError, }: BaseStepProps): react_jsx_runtime.JSX.Element;
-    Counter: ({ children, isActive, isCompleted, isDisabled, isError, }: BaseStepProps) => react_jsx_runtime.JSX.Element;
-    Label({ children, isActive, isCompleted, isDisabled, isError, }: BaseStepProps): react_jsx_runtime.JSX.Element;
+
+declare const Stepper: {
+    ({ children, orientation, variant, activeStep, dataTestId, }: StepperProps): react_jsx_runtime.JSX.Element;
+    Step: ({ index, title, description, state, isActive, variant, icon, isLast, orientation, dataTestId, }: StepProps) => react_jsx_runtime.JSX.Element;
 };
 
-interface CounterProps extends BaseProps {
-    color?: Colors | 'disabled';
-    outlined?: boolean;
-    isLarge?: boolean;
-}
-declare const Counter: ({ children, color, dataTestId, style, outlined, isLarge, }: CounterProps) => react_jsx_runtime.JSX.Element;
+declare const Step: ({ index, title, description, state, isActive, variant, icon, isLast, orientation, dataTestId, }: StepProps) => react_jsx_runtime.JSX.Element;
 
-declare const useStepper: () => {
+interface UseStepperOptions {
+    initialStep?: number;
+    totalSteps?: number;
+}
+interface UseStepperReturn {
     activeStep: number;
-    handleChangeStep: (step: number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    canGoNext: boolean;
+    canGoBack: boolean;
+    completedSteps: Set<number>;
     handleNext: () => void;
     handleBack: () => void;
-};
+    handleChangeStep: (step: number) => void;
+    handleReset: () => void;
+    markStepComplete: (step: number) => void;
+    markStepIncomplete: (step: number) => void;
+    isStepComplete: (step: number) => boolean;
+}
+declare const useStepper: (options?: UseStepperOptions) => UseStepperReturn;
 
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {
     }
 }
 
-export { Counter, type CounterProps, Step, Stepper, type StepperProps, useStepper };
+export { Step, type StepProps, type StepState, type StepVariant, Stepper, type StepperProps, useStepper };

package/dist/index.d.ts

@@ -1,41 +1,58 @@
-import { Colors, CustomTheme } from '@dt-dds/themes';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CustomTheme } from '@dt-dds/themes';
+import { ReactNode } from 'react';
 import { BaseProps, Orientation } from '@dt-dds/react-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type StepVariant = 'number' | 'bullet' | 'icon';
+type StepState = 'completed' | 'warning' | 'error' | 'disabled' | 'incomplete';
 interface StepperProps extends BaseProps {
     orientation?: Orientation;
+    variant?: StepVariant;
+    activeStep?: number;
 }
-declare const Stepper: ({ children, dataTestId, orientation, }: StepperProps) => react_jsx_runtime.JSX.Element;
-
-interface BaseStepProps extends Pick<BaseProps, 'children'> {
+interface StepProps extends BaseProps {
+    index?: number;
+    title?: string;
+    description?: string;
+    state?: StepState;
     isActive?: boolean;
-    isCompleted?: boolean;
-    isDisabled?: boolean;
-    isError?: boolean;
+    variant?: StepVariant;
+    icon?: ReactNode;
+    isLast?: boolean;
+    orientation?: Orientation;
 }
-declare const Step: {
-    ({ children, isActive, isCompleted, isDisabled, isError, }: BaseStepProps): react_jsx_runtime.JSX.Element;
-    Counter: ({ children, isActive, isCompleted, isDisabled, isError, }: BaseStepProps) => react_jsx_runtime.JSX.Element;
-    Label({ children, isActive, isCompleted, isDisabled, isError, }: BaseStepProps): react_jsx_runtime.JSX.Element;
+
+declare const Stepper: {
+    ({ children, orientation, variant, activeStep, dataTestId, }: StepperProps): react_jsx_runtime.JSX.Element;
+    Step: ({ index, title, description, state, isActive, variant, icon, isLast, orientation, dataTestId, }: StepProps) => react_jsx_runtime.JSX.Element;
 };
 
-interface CounterProps extends BaseProps {
-    color?: Colors | 'disabled';
-    outlined?: boolean;
-    isLarge?: boolean;
-}
-declare const Counter: ({ children, color, dataTestId, style, outlined, isLarge, }: CounterProps) => react_jsx_runtime.JSX.Element;
+declare const Step: ({ index, title, description, state, isActive, variant, icon, isLast, orientation, dataTestId, }: StepProps) => react_jsx_runtime.JSX.Element;
 
-declare const useStepper: () => {
+interface UseStepperOptions {
+    initialStep?: number;
+    totalSteps?: number;
+}
+interface UseStepperReturn {
     activeStep: number;
-    handleChangeStep: (step: number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    canGoNext: boolean;
+    canGoBack: boolean;
+    completedSteps: Set<number>;
     handleNext: () => void;
     handleBack: () => void;
-};
+    handleChangeStep: (step: number) => void;
+    handleReset: () => void;
+    markStepComplete: (step: number) => void;
+    markStepIncomplete: (step: number) => void;
+    isStepComplete: (step: number) => boolean;
+}
+declare const useStepper: (options?: UseStepperOptions) => UseStepperReturn;
 
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {
     }
 }
 
-export { Counter, type CounterProps, Step, Stepper, type StepperProps, useStepper };
+export { Step, type StepProps, type StepState, type StepVariant, Stepper, type StepperProps, useStepper };