Skip to main content

Module: robo-wizard

Classes

Type aliases

BaseValues

Ƭ BaseValues: object

Base type describing an object of string keys and any value

Defined in

core/src/index.ts:4


FlowStep

Ƭ FlowStep<Values>: string | StepConfig<Values>

Type parameters

NameTypeDescription
Valuesextends object = BaseValuesGeneric type for object of values being gathered through the wizard steps A step in the wizard can be described as a string for default progression, or an object for custom progression, see StepConfig for more details

Defined in

core/src/index.ts:66


StepConfig

Ƭ StepConfig<Values>: Object

Type parameters

NameTypeDescription
Valuesextends object = BaseValuesGeneric type for object of values being gathered through the wizard steps

Type declaration

NameTypeDescription
namestringName of the step
next?string | StepTransition<Values>[] | booleanName of the next step in progression after calling goToNextStep. Passing false will prevent the wizard from progressing forward at this step. Passing a StepTransition array allows for conditional progression using the [[when]] helper.
previous?string | StepTransition<Values>[] | booleanName of the previous step in progression after calling goToPreviousStep. Passing false will prevent the wizard from progressing backwards at this step. Passing a StepTransition array allows for conditional progression using the [[when]] helper.

Defined in

core/src/index.ts:44


StepTransition

Ƭ StepTransition<Values>: string | (string | { cond: WhenFunction<Values> })[]

example

[
['conditionalStep', when((currentValues, { values }) => values.showConditional === true)],
'fallbackStep'
] // StepTransition[]

Type parameters

NameTypeDescription
Valuesextends object = BaseValuesGeneric type for object of values being gathered through the wizard steps A string is a shorthand for an always true conditional guard, i.e. ['nextStep', when(() => true)] The array version should be a tuple with the string name of a step, paired with a guard, like when:

Defined in

core/src/index.ts:37


WhenFunction

Ƭ WhenFunction<Values>: (values: Values, event: UpdateEvent<Values>) => boolean

Type parameters

NameTypeDescription
Valuesextends object = BaseValuesGeneric type for object of values being gathered through the wizard steps

Type declaration

▸ (values, event): boolean

Parameters
NameTypeDescription
valuesValuesCurrent state of values gathered through the wizard
eventUpdateEvent<Values>Event object containing any new values to be updated, see [[UpdateEvent]]
Returns

boolean

Defined in

core/src/index.ts:19


WizardEvent

Ƭ WizardEvent<Values>: { type: "next" ; values?: Partial<Values> } | { type: "previous" } | { type: string ; values?: Partial<Values> }

Type parameters

NameType
Valuesextends object

Defined in

core/src/index.ts:70


WizardMachine

Ƭ WizardMachine<Values>: StateMachine.Machine<Values, WizardEvent<Values>, any>

Type parameters

NameType
Valuesextends object = BaseValues

Defined in

core/src/index.ts:83

Functions

createWizard

createWizard<Values>(steps, initialValues?, actions?): RoboWizard<Values>

example Initial set up with a listener for updates to the wizard

import { createWizard } from 'robo-wizard';

const wizard = createWizard(['first', 'second', 'third']);
wizard.start(updatedWizard => { console.log('Updated!', updatedWizard.currentStep) });

console.log(wizard.currentStep); // first

wizard.goToNextStep();

console.log(wizard.currentStep); // second

wizard.goToNextStep();

console.log(wizard.currentStep); // third

wizard.goToPreviousStep();

console.log(wizard.currentStep); // second

example Gathering values through each step when progressing forward

import { createWizard } from 'robo-wizard';

const wizard = createWizard(['first', 'second', 'third'], { firstName: '', lastName: '' });
wizard.start(updatedWizard => { console.log('Updated!', updatedWizard.currentStep), updatedWizard.currentValues });

console.log(wizard.currentValues); // { firstName: '', lastName: '' }
;
wizard.goToNextStep({ values: { firstName: 'Jane' } });

console.log(wizard.currentValues); // { firstName: 'Jane', lastName: '' }

wizard.goToNextStep({ values: { lastName: 'Doe' } });

console.log(wizard.currentValues); // { firstName: 'Jane', lastName: 'Doe' }

wizard.goToPreviousStep({ values: { firstName: '', lastName: '' } });

console.log(wizard.currentValues); // { firstName: '', lastName: '' }

By default, the wizard will progress linearly in the order of array passed to createWizard. That behavior can be overriden by passing an StepConfig to in place of the string step name:

example

import { createWizard } from 'robo-wizard';

const wizard = createWizard([
{ name: 'first', next: 'third' }, 'skipped', {name: 'third', previous: 'first'}
]);
wizard.start(updatedWizard => { console.log('Updated!', updatedWizard.currentStep) });

console.log(wizard.currentStep); // first
;
wizard.goToNextStep();

console.log(wizard.currentStep); // third

wizard.goToPreviousStep();

console.log(wizard.currentStep); // first

example Progression can be conditional using the when helper

import { createWizard, when } from 'robo-wizard';

const wizard = createWizard([
{ name: 'first', next: [['third', when((currentValues, { values }) => values.goToThird )], 'second'] },
'second',
{name: 'third', previous: 'first'}
], { goToThird: false });
wizard.start(updatedWizard => { console.log('Updated!', updatedWizard.currentStep) });

console.log(wizard.currentStep); // first
;
wizard.goToNextStep({ values: { goToThird: true } });

console.log(wizard.currentStep); // third

wizard.goToPreviousStep({ values: { goToThird: false } });

console.log(wizard.currentStep); // first

wizard.goToNextStep();

console.log(wizard.currentStep); // second

wizard.goToNextStep();

console.log(wizard.currentStep); // third

Type parameters

NameTypeDescription
Valuesextends object = objectGeneric type for object of values being gathered through the wizard steps

Parameters

NameTypeDescription
stepsFlowStep<Values>[]Configuration of steps for the wizard, see FlowStep
initialValuesValuesOptional object with intial values to use when starting the wizard
actionsObjectOptional object with navigate field with a function to be called when entering a step
actions.navigate?ActionFunction<Values, WizardEvent<Values>>-

Returns

RoboWizard<Values>

Defined in

core/src/index.ts:340


when

when<Values>(cond): Object

Type parameters

NameTypeDescription
Valuesextends object = objectGeneric type for object of values being gathered through the wizard steps

Parameters

NameTypeDescription
condWhenFunction<Values>Guard function to be called to test if the step should transition, see WhenFunction See createWizard for example usage

Returns

Object

NameType
condWhenFunction<Values>

Defined in

core/src/index.ts:410