harmonyutils v1.0.31

harmonyutils

A collection of React utilities and components for building beautiful user interfaces.

Components

Workflow Component

A React component for visualizing workflow steps and progress.

Installation

npm install harmonyutils

Usage

import { Workflow } from 'harmonyutils';

const steps = [
  {
    id: '1',
    title: 'Step 1',
    status: 'completed'
  },
  {
    id: '2',
    title: 'Step 2',
    status: 'in-progress'
  },
  {
    id: '3',
    title: 'Step 3',
    status: 'pending'
  }
];

function App() {
  const handleStepClick = (stepId: string) => {
    console.log(`Clicked step ${stepId}`);
  };

  return (
    <Workflow
      steps={steps}
      currentStep="2"
      onStepClick={handleStepClick}
    />
  );
}

Components API

Workflow

A component for displaying a sequence of steps with their current status.

Props

WorkflowStep Interface

interface WorkflowStep {
  id: string;
  title: string;
  status: 'pending' | 'in-progress' | 'completed' | 'failed';
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT