README
Robo-Wizard
A library for building multi-step forms backed by a state machine using robot.
Installation
This package is written in TypeScript so type definitions are included by default:
npm install robo-wizard
yarn add robo-wizard
Basic usage:
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
Gathering values:
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: '' }
Examples
Check out the examples directory to see a sample of usage with HTML and a few framework integrations.
Work In Progress Roadmap
createForm
state machine generator to control form state for a step in the wizard- example integration of routed wizard steps, i.e. using
react-router
orhistory
packages - add history stack to internal state machine to lookup the previous step when using custom progression
Local Development
This project was bootstrapped with TSDX.
Below is a list of commands you will probably find useful.
or npm startyarn start
Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.
Your library will be rebuilt if you make edits.
or npm run buildyarn build
Bundles the package to the dist
folder.
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
or npm testyarn test
Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.