`<Procedure>`

An ordered flow of <Step>s. The model sees the steps up to the current one and gets the advanceTool to move on (Step-by-step procedures).

import { Procedure } from "curb";

function Procedure(props: ProcedureProps): ReactNode;

Props

Prop	Type	Default	What it does
`title`	`string`		The flow’s name
`advanceTool`	`{ name, description?, onCall? }`	`complete_procedure_step`	The tool that finishes a step. It takes no input, and an `onCall` replaces the built-in advance
`completed`	`ReactNode`		Rendered once every step is done
`onComplete`	`() => void`		Runs when the last step is done
`initialStep`	`number`	`1`	Where it starts. Steps count from 1
`currentStep`	`number`		Holds the step yourself, with `onStepChange`
`onStepChange`	`(step) => void`		Runs when the step changes

Example

<Procedure title="Report a claim" completed={<Tool name="submit_claim" description="File the claim." onCall={submit} />}>
  <Step title="Ask what happened">Ask what happened and when.</Step>
  <Step title="Ask for the policy number">Ask for the policy number.</Step>
</Procedure>

Version history

Version	Changes
v0.1.2	`<Procedure>` introduced