⚡ flow-edges

Tiny, framework-agnostic helper to determine first/last step boundaries in multi-step flows (wizards, steppers, forms).

Zero UI. Zero state. Just logic.

✨ Why

Every multi-step flow needs the same questions answered:

Is this the first step?

Is this the last step?

What’s the previous step?

What’s the next step?

flow-edges centralizes this logic in a small, predictable, testable utility.

📦 Installation

npm install @zardistik/flow-edges

or

pnpm add @zardistik/flow-edges

🚀 Usage

Basic example

import { getFlowState } from '@zardistik/flow-edges'

const steps = ['personal', 'address', 'payment', 'review'] as const

const flow = getFlowState({

  steps,

  current: 'address'

})

Returned state

{

  isFirst: false,

  isLast: false,

  index: 1,

  total: 4,

  previous: 'personal',

  next: 'payment'

}

🧠 Real-world usage (buttons)

@if (!flow.isFirst) {

  Back

}

@if (!flow.isLast) {

  Next

}

Works with Angular, React, Vue, Svelte, Vanilla JS — anything.

🧩 API

getFlowState

getFlowState({

  steps: readonly T[],

  current: T

}): FlowState

Returned type

type FlowState = {

  isFirst: boolean

  isLast: boolean

  index: number

  total: number

  previous?: T

  next?: T

}

🛡️ Validation helpers

assertFlow

Throws early if the flow is invalid.

assertFlow(steps, current)

getFlowIndex

If you only need the index.

getFlowIndex(steps, current)

🎯 Design principles

✅ Framework-agnostic

✅ Pure functions

✅ Zero side effects

✅ Type-safe

✅ Tree-shakable

✅ Fully tested

🧪 Tests

npm run test

📄 License

MIT