) => {
+ event.preventDefault();
+ const values = Object.fromEntries(new FormData(event.currentTarget))
+ wizard.goToNextStep({ values })
+ }
+
+ return (
+ <>
+
+ {wizard.currentStep} step
+
+
+
+ )
+}
+
+const Third = () => {
+ const wizard = useWizardContext();
+
+ return (
+ <>
+
+ {wizard.currentStep} step
+
+
+
+ Welcome {wizard.currentValues.firstName}{' '}
+ {wizard.currentValues.lastName}!
+
+
+
+
+
+
+ );
+};
+
+function App() {
+ return (
+
+
Robo Wizard w/ React-Router
+
+
+ } />
+ } />
+ } />
+
+
+
+ )
+}
+
+export default App
diff --git a/examples/react-router/src/favicon.svg b/examples/react-router/src/favicon.svg
new file mode 100644
index 0000000..de4aedd
--- /dev/null
+++ b/examples/react-router/src/favicon.svg
@@ -0,0 +1,15 @@
+
diff --git a/examples/react-router/src/main.tsx b/examples/react-router/src/main.tsx
new file mode 100644
index 0000000..eaad244
--- /dev/null
+++ b/examples/react-router/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+)
diff --git a/examples/react-router/src/vite-env.d.ts b/examples/react-router/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/examples/react-router/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/examples/react-router/src/wizard-context.tsx b/examples/react-router/src/wizard-context.tsx
new file mode 100644
index 0000000..ca0dfc5
--- /dev/null
+++ b/examples/react-router/src/wizard-context.tsx
@@ -0,0 +1,56 @@
+import { Children, createContext, useContext, useReducer, useState, useEffect } from 'react';
+import { Route, Routes, useNavigate, useRoutes, Navigate, RouteProps, useLocation } from 'react-router';
+import { createWizard } from 'robo-wizard'
+
+const WizardContext = createContext>(null);
+
+export function Step({ name, ...routeProps }: Exclude & { name: string }) {
+ return ;
+}
+
+export function WizardProvider({ children, initialValues }) {
+ const steps = Children.map(children, child => {
+ if (child.type === Step) return { ...child.props, path: child.props.name };
+ return null;
+ }).filter(Boolean);
+ const wizard = useWizard(steps, initialValues);
+ const step = useRoutes(steps)
+
+ return (
+
+ {step}
+
+ } />
+
+
+ )
+}
+
+export function useWizardContext() {
+ const wizard = useContext(WizardContext);
+ if (wizard === null) throw new Error('useWizardContext must be used within WizardProvider')
+ return wizard;
+}
+
+function useWizard(steps, initialValues) {
+ const navigate = useNavigate();
+ const [_, refreshState] = useReducer(s => !s, false);
+ const [currentWizard] = useState(() => {
+ const wizard = createWizard(steps, initialValues, {
+ navigate: () => {
+ navigate(wizard.currentStep)
+ }
+ })
+ wizard.start(refreshState)
+ return wizard;
+ })
+ const location = useLocation();
+ const stepFromLocation = location.pathname.split('/').pop();
+
+ useEffect(() => {
+ if (stepFromLocation !== currentWizard.currentStep) {
+ currentWizard.sync({ step: stepFromLocation })
+ }
+ }, [stepFromLocation, currentWizard])
+ return Object.create(currentWizard);
+}
diff --git a/examples/react-router/tsconfig.json b/examples/react-router/tsconfig.json
new file mode 100644
index 0000000..3d0a51a
--- /dev/null
+++ b/examples/react-router/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/examples/react-router/tsconfig.node.json b/examples/react-router/tsconfig.node.json
new file mode 100644
index 0000000..e993792
--- /dev/null
+++ b/examples/react-router/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "esnext",
+ "moduleResolution": "node"
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/examples/react-router/vite.config.ts b/examples/react-router/vite.config.ts
new file mode 100644
index 0000000..b1b5f91
--- /dev/null
+++ b/examples/react-router/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()]
+})
diff --git a/src/index.ts b/src/index.ts
index 43c055a..4255f32 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,7 +7,7 @@ export type BaseValues = object;
* Event object containing any new values to be updated
*/
type UpdateEvent = {
- type: 'next';
+ type: 'next' | 'previous';
values?: Partial;
};
@@ -74,6 +74,10 @@ type WizardEvent =
}
| {
type: 'previous';
+ }
+ | {
+ type: string;
+ values?: Partial;
};
/**
@@ -157,6 +161,14 @@ class RoboWizard<
this.service.send({ type: 'previous', ...event });
}
+ /**
+ * @param event Optional object with a `step` field to described what the current step _should_ be
+ * Sync the external updated step with internal service
+ */
+ public sync(event: { step: string }) {
+ this.service.send({ type: event.step });
+ }
+
/** @ignore */
private get service() {
if (typeof this._service === 'undefined') {
@@ -327,11 +339,22 @@ function hasTarget(config: MaybeTarget | MaybeTarget[]): config is HasTarget {
*/
export function createWizard(
steps: FlowStep[],
- initialValues: Values = {} as Values
+ initialValues: Values = {} as Values,
+ actions: {
+ navigate?: StateMachine.ActionFunction>;
+ } = {
+ navigate: () => {
+ /* noop */
+ },
+ }
) {
const normalizedSteps: StepConfig[] = steps.map((step) =>
typeof step === 'string' ? { name: step } : step
);
+ const syncTargets = normalizedSteps.reduce(
+ (result, { name }) => ({ ...result, [name]: { target: name } }),
+ {}
+ );
const config: StateMachine.Config> = {
id: 'robo-wizard',
initial: normalizedSteps[0]?.name ?? 'unknown',
@@ -346,9 +369,11 @@ export function createWizard(
// eslint-disable-next-line no-param-reassign
result[step.name] = {
+ entry: ['navigate'],
on: {
...(previousTarget ? { previous: { target: previousTarget } } : {}),
...(hasTarget(nextTarget) ? { next: nextTarget } : {}),
+ ...syncTargets,
},
};
return result;
@@ -368,6 +393,10 @@ export function createWizard(
const machine = createMachine(config, {
actions: {
assignNewValues,
+ navigate: (values, event) => {
+ if (['next', 'previous'].includes(event.type))
+ actions.navigate?.(values, event);
+ },
},
});
return new RoboWizard(machine);
diff --git a/test/index.test.ts b/test/index.test.ts
index f1f732a..8fc0d31 100644
--- a/test/index.test.ts
+++ b/test/index.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
import { createWizard, when, WhenFunction } from '../src';
describe('createWizard', () => {
@@ -180,4 +180,44 @@ describe('createWizard', () => {
expect(wizard.currentStep).toBe('third');
});
});
+
+ describe('when passing navigate action', () => {
+ const steps = ['first', 'second', 'third'];
+
+ it('calls navigate when entering a step', () => {
+ const navigate = vi.fn();
+ const wizard = createWizard(steps, {}, { navigate })
+
+ wizard.start(() => { });
+
+ expect(navigate).not.toHaveBeenCalled();
+
+ wizard.goToNextStep()
+
+ expect(navigate).toHaveBeenCalled();
+
+ wizard.goToPreviousStep()
+
+ expect(navigate).toHaveBeenCalledTimes(2);
+ })
+ })
+
+ describe('when calling sync method', () => {
+ const steps = ['first', 'second', 'third'];
+
+ it('updates the currentStep without navigating', () => {
+ const navigate = vi.fn();
+ const wizard = createWizard(steps, {}, { navigate })
+
+ wizard.start(() => { });
+
+ expect(wizard.currentStep).toBe('first')
+
+ wizard.sync({ step: 'third' });
+
+ expect(wizard.currentStep).toBe('third')
+
+ expect(navigate).not.toHaveBeenCalled();
+ })
+ })
});