@marianmeres/wizard

Utility for high level management of wizard data. Agnostic of the actual business or rendering. Store compatible.

Install

$ npm i @marianmeres/wizard

Example usage

const wizard = createWizardStore('foo', {
    steps: [
        { label: 'one', foo: 123 },
        {
            label: 'two',
            canGoNext: false,
            preNext: async (data, { context, wizard, set }) => {
                set({ canGoNext: data.hey === context.hey })
            },
            prePrevious: async (data, { set }) => {
                set({ canGoNext: false, data: {} });
            },
            preReset: async (data, { context, wizard, set }) => {
                // ...
            }
        },
        { label: 'three' },
        { label: 'four' },
    ],
    context: { hey: 'ho' },
    onDone: async ({ steps, context, set }) => '...', // will be called on the last .next()
});

wizard.subscribe(async ({ step, steps }) => {
    // step props
    const { label, index, data, canGoNext, error, isFirst, isLast } = step;

    // do something here...

    // step api
    step.set(/*{ data, error, canGoNext }*/)

    await step.next(data);
    await step.previous();
});

// wizard api
wizard.context; // reference to the context object
await wizard.next(/*data*/);
await wizard.previous();
await wizard.reset();
await wizard.goto(index, stepsData);

See tests for more...