❇️ (stepper-node) add stepper node component for React Flow

[owaismultani]

🚀 Feature Request: New Stepper Node Component

Overview

Introduce a Stepper Node component that allows users to increment and decrement a numeric value directly within a node. This component is particularly useful in workflows that require:

• Progress Tracking: Multi-step processes where progress is visually monitored.
• Approval Stages: Each step represents a decision point.
• Counter-Based Logic: Managing items, scores, or iterations within a flow.

Use Cases

1. Progress Tracker: Enable users to step through different phases of a workflow.
2. Approval Process: Visualize each decision stage with discrete steps.
3. Counting Mechanism: Track numeric values dynamically within a flow.

Proposed Solution

Create a new StepperNode.tsx component with the following features:

• Display Elements:

  • Shows a label and step counter.
  • Includes "+" and "–" buttons for adjusting the value.

• React Flow Integration:

  • Features handles at the top and bottom for linking nodes seamlessly.

• Design Options:

  • Supports both linear and circular progress designs.
  • Offers both counter and timer modes.

• State Management:

  • Utilizes localStorage for persistence.

• Styling:

  • Integrates with ShadCN/UI to maintain styling consistency across components.

Example Usage

const nodeTypes = {
  stepper: StepperNode,
};

const defaultNodes = [
  {
    id: "1",
    position: { x: 100, y: 150 },
    data: {
      label: "Linear Stepper",
      step: 2,
      minStep: 0,
      maxStep: 10,
      stepSize: 1,
      design: "linear",
      mode: "counter",
    },
    type: "stepper",
  },
];

<ReactFlow nodeTypes={nodeTypes} defaultNodes={defaultNodes} fitView />;

Screenshots

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
example-apps	❌ Failed (Inspect)			Feb 21, 2025 5:40pm
ui-components	❌ Failed (Inspect)			Feb 21, 2025 5:40pm
xyflow-website	❌ Failed (Inspect)			Feb 21, 2025 5:40pm

[vercel]

@owaismultani is attempting to deploy a commit to the xyflow Team on Vercel.

A member of the Team first needs to authorize it.

[moklick]

Hey @owaismultani . Thanks for your contribution, this is great! We will discuss with the team how to proceed.