├── .prettierignore
├── .storybook
    ├── addons.js
    └── config.js
├── .eslintignore
├── .gitignore
├── .flowconfig
├── .prettierrc.json
├── setupJest.js
├── .editorconfig
├── flow-typed
    ├── StateManager.js
    └── WizardTypes.js
├── pages
    ├── components
    │   ├── Emoji.js
    │   ├── InputComponent.js
    │   ├── StepWithInput.js
    │   ├── Button.js
    │   ├── Controls.js
    │   └── WizardExample.js
    ├── advancedExample.md
    └── basicExample.mdx
├── .babelrc
├── src
    ├── index.js
    ├── state-managers
    │   ├── url-state-manager.test.js
    │   └── url-state-manager.js
    ├── utils.js
    ├── Controls.js
    ├── Step.js
    ├── Wizard.test.js
    ├── utils.test.js
    └── Wizard.js
├── .eslintrc
├── .github
    └── build-docs.workflow
├── doczrc.js
├── index.html
├── LICENSE
├── package.json
└── README.md


/.prettierignore:
--------------------------------------------------------------------------------
1 | package.json
2 | 


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /dist/
2 | /pkg/
3 | /docs/
4 | /node_modules/
5 | setupJest.js
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .eslintcache
3 | .docz
4 | pages/_index.mdx
5 | docs/
6 | pkg/
7 | 


--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
 1 | [ignore]
 2 | <PROJECT_ROOT>/dist/.*
 3 | 
 4 | [include]
 5 | 
 6 | [libs]
 7 | 
 8 | [options]
 9 | experimental.const_params=true
10 | 
11 | [lints]


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 80,
3 |   "singleQuote": true,
4 |   "trailingComma": "all",
5 |   "bracketSpacing": true,
6 |   "jsxBracketSameLine": true,
7 |   "parser": "flow"
8 | }
9 | 


--------------------------------------------------------------------------------
/setupJest.js:
--------------------------------------------------------------------------------
1 | // Setup Enzyme's React adapter
2 | const Enzyme = require('enzyme');
3 | const EnzymeAdapter = require('enzyme-adapter-react-16');
4 | Enzyme.configure({ adapter: new EnzymeAdapter() });
5 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # top-most EditorConfig file
 2 | root = true
 3 | 
 4 | # Unix-style newlines with a newline ending every file
 5 | [*]
 6 | end_of_line = lf
 7 | insert_final_newline = true
 8 | indent_style = space
 9 | indent_size = 2
10 | 


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from '@storybook/react';
2 | 
3 | const req = require.context('../stories/', true, /\.story\.js$/);
4 | 
5 | function loadStories() {
6 |   req.keys().forEach(filename => req(filename));
7 | }
8 | configure(loadStories, module);
9 | 


--------------------------------------------------------------------------------
/flow-typed/StateManager.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | 
3 | declare type Losen$StateManager = {|
4 |   updateStep: (currentStepName: string, nextStepName: string) => void,
5 |   getActiveStep: () => string,
6 |   getItem: (key: string) => string,
7 |   setItem: (key: string, value: string) => void,
8 | |};
9 | 


--------------------------------------------------------------------------------
/pages/components/Emoji.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import React from 'react';
 3 | 
 4 | type Props = {
 5 |   emoji: string,
 6 | };
 7 | 
 8 | const Emoji = ({ emoji, ...rest }: Props) => (
 9 |   <span className="f3" role="img" aria-label="emoji" {...rest}>
10 |     {emoji}
11 |   </span>
12 | );
13 | 
14 | export default Emoji;
15 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "@babel/preset-react",
 4 |     "@babel/preset-flow"
 5 |   ],
 6 |   "env": {
 7 |     "test": {
 8 |         "presets": [
 9 |           ["@babel/preset-env", { "targets": { "node": "current" }}]
10 |         ]
11 |     }
12 |   },
13 |   "plugins": [
14 |     "@babel/plugin-proposal-class-properties"
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/flow-typed/WizardTypes.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | 
 3 | type Losen$StepTypes = 'next' | 'previous' | 'complete';
 4 | declare type Losen$Direction = ?Losen$StepTypes;
 5 | 
 6 | declare type Losen$ValidatorFunction = () => Promise<React$Node>;
 7 | 
 8 | declare type Losen$Step = {|
 9 |   name: string,
10 |   validator: ?Losen$ValidatorFunction,
11 |   autoSkip: ?boolean,
12 |   state: ?Array<{| [string]: string |}>,
13 | |};
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import Controls, { ControlsContext } from './Controls';
 3 | import Step, { StepContext } from './Step';
 4 | import Wizard, { ValidationError } from './Wizard';
 5 | import { UrlStateManager } from './state-managers/url-state-manager';
 6 | 
 7 | export {
 8 |   Controls,
 9 |   ControlsContext,
10 |   Step,
11 |   StepContext,
12 |   ValidationError,
13 |   Wizard,
14 |   UrlStateManager,
15 | };
16 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true,
 5 |     "jest": true
 6 |   },
 7 |   "plugins": ["react-hooks", "flowtype"],
 8 |   "parser": "babel-eslint",
 9 |   "extends": "otovo/react-recommended",
10 |   "rules": {
11 |     "react/default-props-match-prop-types": 0,
12 |     "react-hooks/rules-of-hooks": "error",
13 |     "react-hooks/exhaustive-deps": "warn",
14 |     "flowtype/define-flow-type": 2
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/pages/components/InputComponent.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import React, { useState } from 'react';
 3 | 
 4 | type Props = {
 5 |   name: string,
 6 | };
 7 | 
 8 | const InputComponent = ({ name }: Props) => {
 9 |   const [text, setText] = useState('');
10 |   return (
11 |     <textarea
12 |       className="w-100 h3"
13 |       placeholder={name}
14 |       value={text}
15 |       onChange={ev => setText(ev.target.value)}
16 |     />
17 |   );
18 | };
19 | 
20 | export default InputComponent;
21 | 


--------------------------------------------------------------------------------
/pages/components/StepWithInput.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import React, { useState } from 'react';
 3 | 
 4 | import { Step } from '../../src';
 5 | 
 6 | const StepWithInput = () => {
 7 |   const [text, setText] = useState('');
 8 |   return (
 9 |     <Step name="step 3">
10 |       <textarea
11 |         className="w-100 h3"
12 |         placeholder="Step 3: Write something"
13 |         value={text}
14 |         onChange={ev => setText(ev.target.value)}
15 |       />
16 |     </Step>
17 |   );
18 | };
19 | 
20 | export default StepWithInput;
21 | 


--------------------------------------------------------------------------------
/src/state-managers/url-state-manager.test.js:
--------------------------------------------------------------------------------
 1 | import { UrlStateManager } from './url-state-manager';
 2 | 
 3 | describe('StateManager', () => {
 4 |   window.history.pushState({}, '', '?step=two');
 5 | 
 6 |   test('can update browser history', () => {
 7 |     UrlStateManager.updateStep('two', 'three');
 8 |     expect(window.history.length).toBe(3);
 9 |   });
10 | 
11 |   test('can get active step', () => {
12 |     const activeStep = UrlStateManager.getActiveStep();
13 |     expect(activeStep).toBe('three');
14 |   });
15 | });
16 | 


--------------------------------------------------------------------------------
/.github/build-docs.workflow:
--------------------------------------------------------------------------------
 1 | workflow "Build docz" {
 2 |   on = "push"
 3 |   resolves = ["actions/npm@master"]
 4 | }
 5 | 
 6 | action "master-branch-filter" {
 7 |   uses = "actions/bin/filter@master"
 8 |   args = "branch master"
 9 | }
10 | 
11 | action "install deps" {
12 |   uses = "actions/npm@master"
13 |   needs = ["master-branch-filter"]
14 |   runs = "yarn"
15 |   args = "install"
16 | }
17 | 
18 | action "actions/npm@master" {
19 |   uses = "actions/npm@master"
20 |   needs = ["install deps"]
21 |   runs = "yarn"
22 |   args = "build:docs"
23 | }
24 | 


--------------------------------------------------------------------------------
/doczrc.js:
--------------------------------------------------------------------------------
 1 | import { css } from 'docz-plugin-css'; // eslint-disable-line
 2 | 
 3 | export default {
 4 |   src: './pages',
 5 |   public: './public',
 6 |   dest: '/docs',
 7 |   files: '**/*.{md,markdown,mdx}',
 8 |   htmlContext: {
 9 |     favicon:
10 |       'https://user-images.githubusercontent.com/2470775/39097362-8093ab6e-465b-11e8-845e-b21b893d6091.png',
11 |   },
12 |   plugins: [
13 |     css({
14 |       preprocessor: 'postcss',
15 |       loaderOpts: {
16 |         /* whatever your preprocessor loader accept */
17 |       },
18 |     }),
19 |   ],
20 | };
21 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="{{ lang }}">
 4 | 
 5 | <head>
 6 |   <meta charset="UTF-8">
 7 |   <meta name="description" content="{{ description }}">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
10 |   <link rel="shortcut icon" href="{{favicon}}" type="image/x-icon">
11 |   <link rel="icon" href="{{favicon}}" type="image/x-icon">
12 |   <title>{{ title }}</title>
13 |   {{ head }}
14 | </head>
15 | 
16 | <body>
17 |   <div id="root" />
18 |   {{ footer }}
19 | </body>
20 | 
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | export function findNextValid(steps: Array<Losen$Step>, currentIndex: number) {
 3 |   const nextValid =
 4 |     currentIndex + steps.slice(currentIndex + 1).findIndex(el => !el.autoSkip);
 5 |   return steps.length > nextValid ? nextValid + 1 : nextValid;
 6 | }
 7 | 
 8 | export function findPreviousValid(
 9 |   steps: Array<Losen$Step>,
10 |   currentIndex: number,
11 | ) {
12 |   const previousValid = [...steps]
13 |     .reverse()
14 |     .slice(steps.length - currentIndex)
15 |     .findIndex(el => !el.autoSkip);
16 |   return currentIndex - 1 - previousValid;
17 | }
18 | 


--------------------------------------------------------------------------------
/pages/components/Button.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import React, { type Node } from 'react';
 3 | 
 4 | type Props = {
 5 |   children: Node,
 6 |   disabled?: boolean,
 7 | };
 8 | 
 9 | const Button = ({ children, disabled, ...rest }: Props) => (
10 |   <button
11 |     type="button"
12 |     className={`f5 no-underline inline-flex items-center pa3 ba border-box mr4 bg-transparent pointer
13 |       ${disabled ? 'black-50' : 'black'}`}
14 |     disabled={disabled}
15 |     {...rest}>
16 |     {children}
17 |   </button>
18 | );
19 | 
20 | Button.defaultProps = {
21 |   disabled: false,
22 | };
23 | 
24 | export default Button;
25 | 


--------------------------------------------------------------------------------
/src/Controls.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { createContext, useContext } from 'react';
 3 | 
 4 | export const ControlsContext = createContext<Object>(null);
 5 | 
 6 | type Props = {|
 7 |   render: (
 8 |     onNext: Function,
 9 |     onPrevious: Function,
10 |     isFirst: boolean,
11 |     isLast: boolean,
12 |     isLoading: boolean,
13 |     activeIndex: number,
14 |   ) => React$Node,
15 | |};
16 | 
17 | const Controls = ({ render }: Props) => {
18 |   const {
19 |     onNext,
20 |     onPrevious,
21 |     isFirst,
22 |     isLast,
23 |     isLoading,
24 |     activeIndex,
25 |   } = useContext(ControlsContext);
26 | 
27 |   return render(onNext, onPrevious, isFirst, isLast, isLoading, activeIndex);
28 | };
29 | 
30 | export default Controls;
31 | 


--------------------------------------------------------------------------------
/pages/components/Controls.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import React, { useContext } from 'react';
 3 | import { ControlsContext } from '../../src';
 4 | 
 5 | import Button from './Button';
 6 | import Emoji from './Emoji';
 7 | 
 8 | const Controls = () => {
 9 |   const { onNext, onPrevious, isFirst, isLast, isLoading } = useContext(
10 |     ControlsContext,
11 |   );
12 |   return (
13 |     <div className="flex items-center justify-center pa4">
14 |       <Button onClick={onPrevious} disabled={isLoading || isFirst}>
15 |         <Emoji emoji="👈" /> <span className="ml3">Previous</span>
16 |       </Button>
17 |       <Button onClick={onNext} disabled={isLoading}>
18 |         <span className="mr3">{isLast ? 'Finish' : 'Next'}</span>{' '}
19 |         <Emoji emoji={isLoading ? '😴' : '👉'} />
20 |       </Button>
21 |     </div>
22 |   );
23 | };
24 | export default Controls;
25 | 


--------------------------------------------------------------------------------
/pages/advancedExample.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | 
 3 | name: Advanced example
 4 | 
 5 | ---
 6 | import { Playground, PropsTable } from 'docz';
 7 | 
 8 | import WizardExample from './components/WizardExample';
 9 | 
10 | # Losen, reinvented 🚢
11 | 
12 | 
13 | ## Todo
14 | 
15 | - [x] Add support for registering steps
16 | - [x] Only render active step
17 | - [x] Add support for changing steps
18 | - [x] Add support for updating steps
19 | - [x] Add support for autoskip steps
20 | - [x] Add support for step validation
21 | - [x] Add support for Jest/tests
22 | - [x] Add support for `onComplete`
23 | 
24 | ## Test
25 | 
26 | - [ ] Test performance (remove unnecessary renders)
27 | - [ ] Test nested Wizards – does it even  work?
28 | 
29 | ## Feature, or bug?
30 | 
31 | - [ ] First step is not skippable (initially)
32 | 
33 | ---
34 | 
35 | 
36 | ## Example 
37 | 
38 | This example uses async validation for step 2 and 3. Use the debug panel to tweak settings
39 | 
40 | <WizardExample />
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Otovo AS
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/pages/basicExample.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Basic example
 3 | ---
 4 | 
 5 | import { Fragment } from 'react';
 6 | import { Playground, PropsTable } from 'docz';
 7 | import 'tachyons/css/tachyons.css'; // eslint-disable-line
 8 | import { Wizard, Step } from '../src';
 9 | import Controls from './components/Controls';
10 | import Emoji from './components/Emoji';
11 | import Button from './components/Button';
12 | 
13 | # Basic example
14 | 
15 | The following is a pretty basic example of how it works. We have a `<Wizard />` with three `<Step />` children and some controls.
16 | 
17 | **Note:** Because `react-losen` uses [React.Context](https://reactjs.org/docs/context.html) the steps doesn't have to be direct children of `<Wizard />`
18 | 
19 | <Playground>
20 |   <div className="tc">
21 |     <Wizard
22 |       onComplete={() => {
23 |         console.log('wizard completed');
24 |       }}>
25 |       <Step name="first">
26 |         <Emoji className="f-headline lh-copy" emoji="☝️" />
27 |       </Step>
28 |       <Step name="second">
29 |         <Emoji className="f-headline lh-copy" emoji="✌️" />
30 |       </Step>
31 |       <Step name="third">
32 |         <Emoji className="f-headline lh-copy" emoji="🤟" />
33 |       </Step>
34 |       <Controls />
35 |     </Wizard>
36 |   </div>
37 | </Playground>
38 | 


--------------------------------------------------------------------------------
/src/Step.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { useEffect, createContext, useContext } from 'react';
 3 | 
 4 | export const StepContext = createContext<Object>(null);
 5 | 
 6 | type Props = {|
 7 |   children: React$Node,
 8 |   ...Losen$Step,
 9 | |};
10 | 
11 | const Step = ({ children, name, validator, autoSkip, state }: Props) => {
12 |   const {
13 |     registerStep,
14 |     activeStep,
15 |     updateStep,
16 |     initialized,
17 |     stateManager,
18 |   } = useContext(StepContext);
19 | 
20 |   useEffect(() => {
21 |     if (!initialized) {
22 |       registerStep({
23 |         name,
24 |         validator,
25 |         autoSkip,
26 |       });
27 |     }
28 |   }, [name, validator, autoSkip, initialized, registerStep]);
29 | 
30 |   useEffect(() => {
31 |     if (initialized) {
32 |       updateStep({
33 |         name,
34 |         validator,
35 |         autoSkip,
36 |       });
37 |     }
38 |     // eslint-disable-next-line react-hooks/exhaustive-deps
39 |   }, [name, autoSkip, validator, initialized]); // adding all deps causes infinite reloads - to be fixed later!
40 | 
41 |   useEffect(() => {
42 |     if (state && stateManager) {
43 |       state.forEach(item => {
44 |         const [key, value] = Object.entries(item)[0];
45 |         stateManager.setItem(key, value);
46 |       });
47 |     }
48 |   }, [state, stateManager]);
49 | 
50 |   if (activeStep.name !== name) {
51 |     return null;
52 |   }
53 | 
54 |   return children;
55 | };
56 | 
57 | Step.defaultProps = {
58 |   validator: null,
59 |   autoSkip: false,
60 |   state: null,
61 | };
62 | 
63 | export default Step;
64 | 


--------------------------------------------------------------------------------
/src/state-managers/url-state-manager.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | 
 3 | function setSearchParam(key: string, value: string) {
 4 |   const { searchParams } = new URL(window.location.href);
 5 |   searchParams.set(key, value);
 6 |   return searchParams.toString() || '';
 7 | }
 8 | 
 9 | function getSearchParam(key: string) {
10 |   const { href } = window.location;
11 |   const { searchParams } = new URL(href);
12 |   return searchParams.get(key) || '';
13 | }
14 | 
15 | export const UrlStateManager: Losen$StateManager = {
16 |   updateStep: (currentStepName, nextStepName) => {
17 |     const currentUrl = window.location.href;
18 |     const basePath = currentUrl.includes('?')
19 |       ? currentUrl.split('?')[0]
20 |       : currentUrl;
21 |     const searchParams = setSearchParam('step', nextStepName);
22 | 
23 |     window.history.pushState({ activeStep: currentStepName }, '', currentUrl);
24 |     window.history.replaceState(
25 |       { activeStep: nextStepName },
26 |       '',
27 |       `${basePath}?${searchParams}`,
28 |     );
29 |   },
30 |   getActiveStep: () => {
31 |     return getSearchParam('step');
32 |   },
33 |   getItem: (key: string) => {
34 |     return getSearchParam(key);
35 |   },
36 |   setItem: (key: string, value: string) => {
37 |     const searchParams = setSearchParam(key, value);
38 |     const currentUrl = window.location.href;
39 |     const basePath = currentUrl.includes('?')
40 |       ? currentUrl.split('?')[0]
41 |       : currentUrl;
42 |     window.history.replaceState(
43 |       { ...window.history.state, [key]: value },
44 |       '',
45 |       `${basePath}?${searchParams}`,
46 |     );
47 |   },
48 | };
49 | 


--------------------------------------------------------------------------------
/src/Wizard.test.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { mount } from 'enzyme';
 3 | import Wizard from './Wizard';
 4 | import Step from './Step';
 5 | import { ControlsContext } from './Controls';
 6 | import { UrlStateManager } from './state-managers/url-state-manager';
 7 | 
 8 | const ControlsComponent = () => {
 9 |   const { onNext, onPrevious } = useContext(ControlsContext);
10 | 
11 |   return (
12 |     <>
13 |       <button
14 |         id="previous-button"
15 |         type="button"
16 |         onClick={() => {
17 |           onPrevious();
18 |         }}>
19 |         Go back
20 |       </button>
21 |       <button
22 |         id="next-button"
23 |         type="button"
24 |         onClick={() => {
25 |           onNext();
26 |         }}>
27 |         Next
28 |       </button>
29 |     </>
30 |   );
31 | };
32 | 
33 | const WizardComponent = props => (
34 |   <Wizard {...props}>
35 |     <div id="active-step">
36 |       <Step name="one">Step one</Step>
37 |       <Step name="two">Step two</Step>
38 |       <Step name="three">Step three</Step>
39 |     </div>
40 |     <ControlsComponent />
41 |   </Wizard>
42 | );
43 | 
44 | describe('Wizard', () => {
45 |   const component = mount(<WizardComponent />);
46 | 
47 |   test('renders first step', () => {
48 |     expect(component.find('#active-step').text()).toBe('Step one');
49 |   });
50 | 
51 |   test('can go to next step', () => {
52 |     component.find('#next-button').simulate('click');
53 |     expect(component.find('#active-step').text()).toBe('Step two');
54 |   });
55 | 
56 |   test('can go to previous step', () => {
57 |     component.find('#previous-button').simulate('click');
58 |     expect(component.find('#active-step').text()).toBe('Step one');
59 |   });
60 | });
61 | 
62 | describe('Wizard caches step state in url', () => {
63 |   let component;
64 | 
65 |   beforeEach(() => {
66 |     window.history.pushState({ activeStep: 'two' }, '', '?step=two');
67 |     component = mount(<WizardComponent stateManager={UrlStateManager} />);
68 |   });
69 | 
70 |   test('renders correct step upon load', () => {
71 |     expect(component.find('#active-step').text()).toBe('Step two');
72 |   });
73 | 
74 |   test('renders previous step on back button', () => {
75 |     window.history.pushState({ activeStep: 'three' }, '', '?step=three');
76 |     window.history.back();
77 |     expect(component.find('#active-step').text()).toBe('Step two');
78 |   });
79 | 
80 |   test('url changes upon click of next button', () => {
81 |     component.find('#next-button').simulate('click');
82 |     expect(component.find('#active-step').text()).toBe('Step three');
83 |     const { searchParams } = new URL(window.location.href);
84 |     expect(searchParams.get('step')).toBe('three');
85 |   });
86 | });
87 | 


--------------------------------------------------------------------------------
/pages/components/WizardExample.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import React, { useState } from 'react';
 3 | 
 4 | import { Wizard, Step } from '../../src';
 5 | import { UrlStateManager } from '../../src/state-managers/url-state-manager';
 6 | import Controls from './Controls';
 7 | import InputComponent from './InputComponent';
 8 | import StepWithInput from './StepWithInput';
 9 | 
10 | const someAsyncFunc = () =>
11 |   new Promise(res =>
12 |     setTimeout(() => {
13 |       console.log('inner timeout done');
14 |       res();
15 |     }, 800),
16 |   );
17 | 
18 | const WizardExample = () => {
19 |   const [stepEnabled, setEnabledStep] = useState(true);
20 |   const [passValidation, setPassValidation] = useState(true);
21 | 
22 |   function onComplete(step) {
23 |     console.log('Wizard completed ', step);
24 |   }
25 |   return (
26 |     <>
27 |       <Wizard onComplete={onComplete} stateManager={UrlStateManager} debug>
28 |         <div>
29 |           <Step
30 |             name="step 1"
31 |             validator={() => {
32 |               console.log('validator done');
33 |             }}>
34 |             <p className="f3 tc">First step</p>
35 |           </Step>
36 |           <Step
37 |             name="step 2"
38 |             autoSkip={!stepEnabled}
39 |             validator={async () => {
40 |               await someAsyncFunc();
41 |               console.log('waiting for timeout done');
42 |             }}>
43 |             <InputComponent name="step 2" />
44 |           </Step>
45 | 
46 |           <StepWithInput />
47 | 
48 |           <Step
49 |             name="step 4"
50 |             validator={() => new Promise(res => setTimeout(() => res(), 800))}>
51 |             <p className="f3 tc">Third step</p>
52 |           </Step>
53 |         </div>
54 | 
55 |         <Controls />
56 |       </Wizard>
57 | 
58 |       <hr />
59 | 
60 |       <div className="pa4 courier bg-black-05">
61 |         <h3 className="db">Debug panel</h3>
62 |         <label htmlFor="step-2-checkbox">
63 |           <input
64 |             id="step-2-checkbox"
65 |             className="mr2 inline-flex"
66 |             type="checkbox"
67 |             checked={stepEnabled}
68 |             onChange={() => setEnabledStep(prev => !prev)}
69 |           />
70 |           Step 2 enabled
71 |         </label>
72 |         <label htmlFor="step-2-pass-validation" className="db">
73 |           <input
74 |             id="step-2-pass-validation"
75 |             className="mr2 inline-flex"
76 |             type="checkbox"
77 |             checked={passValidation}
78 |             onChange={() => setPassValidation(prev => !prev)}
79 |           />
80 |           Step 2 passes validation
81 |         </label>
82 |       </div>
83 |     </>
84 |   );
85 | };
86 | 
87 | export default WizardExample;
88 | 


--------------------------------------------------------------------------------
/src/utils.test.js:
--------------------------------------------------------------------------------
 1 | import { findNextValid, findPreviousValid } from './utils';
 2 | 
 3 | const regularStep = { autoSkip: false };
 4 | const skipStep = { autoSkip: true };
 5 | 
 6 | describe('findNextValid', () => {
 7 |   test('it returns the next element', () => {
 8 |     const steps = [regularStep, regularStep];
 9 |     const next = findNextValid(steps, 0);
10 |     expect(next).toBe(1);
11 |   });
12 | 
13 |   test('it skips single step where autoSkip === true', () => {
14 |     const steps = [regularStep, { autoSkip: true }, regularStep];
15 | 
16 |     const next = findNextValid(steps, 0);
17 |     expect(next).toBe(2);
18 |   });
19 | 
20 |   test('it skips multiple steps where autoSkip === true', () => {
21 |     const steps = [
22 |       regularStep,
23 |       { autoSkip: true },
24 |       { autoSkip: true },
25 |       regularStep,
26 |     ];
27 | 
28 |     const next = findNextValid(steps, 0);
29 |     expect(next).toBe(3);
30 |   });
31 | 
32 |   test('it handles that last step is autoSkip === true', () => {
33 |     const steps = [regularStep, skipStep, skipStep];
34 |     const next = findNextValid(steps, 0);
35 |     expect(next).toBe(0);
36 |   });
37 | 
38 |   test('it respects array boundaries if last element', () => {
39 |     const steps = [regularStep, regularStep];
40 |     const next = findNextValid(steps, steps.length);
41 |     expect(next).toBe(steps.length);
42 |   });
43 | });
44 | 
45 | describe('findPreviousValid', () => {
46 |   test('it respects boundaries if first element', () => {
47 |     const steps = [regularStep, { autoSkip: true }, regularStep];
48 |     const previous = findPreviousValid(steps, 0);
49 |     expect(previous).toBe(0);
50 |   });
51 | 
52 |   test('it returns the previous element', () => {
53 |     const steps = [regularStep, regularStep, regularStep];
54 |     const previous = findPreviousValid(steps, 2);
55 |     expect(previous).toBe(1);
56 |   });
57 | 
58 |   test('it skips a step if previous has autoSkip === true', () => {
59 |     const steps = [regularStep, regularStep, skipStep, regularStep];
60 |     const previous = findPreviousValid(steps, steps.length - 1);
61 |     expect(previous).toBe(1);
62 |   });
63 | 
64 |   test('it skips multiple steps if previous has autoSkip === true', () => {
65 |     const steps = [regularStep, skipStep, skipStep, regularStep];
66 |     const previous = findPreviousValid(steps, steps.length - 1);
67 |     expect(previous).toBe(0);
68 |   });
69 | 
70 |   test('it does not mutate original array', () => {
71 |     const steps = [
72 |       { autoSkip: true, index: 1 },
73 |       { autoSkip: false, index: 2 },
74 |       { autoSkip: true, index: 3 },
75 |     ];
76 |     const backup = [...steps];
77 |     findPreviousValid(steps, steps.length - 1);
78 |     expect(backup).toEqual(steps);
79 |   });
80 | });
81 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-losen",
 3 |   "version": "2.0.0-12",
 4 |   "description": "A super customisable Wizard for React and React Native",
 5 |   "homepage": "https://docs-geycgwirqi.now.sh/",
 6 |   "main": "src/index.js",
 7 |   "keywords": [
 8 |     "react",
 9 |     "wizard"
10 |   ],
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/otovo/react-losen.git"
14 |   },
15 |   "license": "MIT",
16 |   "scripts": {
17 |     "docs:build": "cp README.md ./pages/_index.mdx && docz build",
18 |     "eslint": "eslint . --cache",
19 |     "dev": "docz dev",
20 |     "test": "jest --setupTestFrameworkScriptFile=./setupJest.js",
21 |     "tdd": "jest --setupTestFrameworkScriptFile=./setupJest.js --watch",
22 |     "build": "pack build",
23 |     "publish": "pack publish"
24 |   },
25 |   "jest": {
26 |     "testPathIgnorePatterns": [
27 |       "<rootDir>/node_modules/",
28 |       "<rootDir>/pkg/"
29 |     ]
30 |   },
31 |   "@pika/pack": {
32 |     "pipeline": [
33 |       [
34 |         "@pika/plugin-standard-pkg",
35 |         {
36 |           "exclude": [
37 |             "*.test.js"
38 |           ]
39 |         }
40 |       ],
41 |       [
42 |         "@pika/plugin-build-web"
43 |       ],
44 |       [
45 |         "@pika/plugin-build-node"
46 |       ],
47 |       [
48 |         "pika-plugin-minify"
49 |       ]
50 |     ]
51 |   },
52 |   "resolutions": {
53 |     "docz-core": "^0.13.7"
54 |   },
55 |   "devDependencies": {
56 |     "@babel/core": "^7.4.3",
57 |     "@babel/plugin-proposal-class-properties": "^7.4.0",
58 |     "@babel/preset-env": "^7.4.3",
59 |     "@babel/preset-flow": "^7.0.0",
60 |     "@babel/preset-react": "^7.0.0",
61 |     "@pika/pack": "^0.3.6",
62 |     "@pika/plugin-build-node": "^0.3.14",
63 |     "@pika/plugin-build-web": "^0.3.14",
64 |     "@pika/plugin-standard-pkg": "^0.3.14",
65 |     "babel-eslint": "^10.0.1",
66 |     "docz": "^0.13.7",
67 |     "docz-plugin-css": "^0.11.0",
68 |     "docz-theme-default": "^0.13.7",
69 |     "enzyme": "^3.10.0",
70 |     "enzyme-adapter-react-16": "^1.15.1",
71 |     "eslint": "^5.13.0",
72 |     "eslint-config-airbnb": "^17.1.0",
73 |     "eslint-config-airbnb-base": "^13.1.0",
74 |     "eslint-config-otovo": "https://github.com/otovo/eslint-config-otovo.git",
75 |     "eslint-config-prettier": "^4.0.0",
76 |     "eslint-plugin-flowtype": "^3.4.1",
77 |     "eslint-plugin-import": "^2.16.0",
78 |     "eslint-plugin-jsx-a11y": "^6.2.1",
79 |     "eslint-plugin-prettier": "^3.0.1",
80 |     "eslint-plugin-react": "^7.12.4",
81 |     "eslint-plugin-react-hooks": "^2.3.0",
82 |     "flow-bin": "^0.96.0",
83 |     "jest": "^24.1.0",
84 |     "pika-plugin-minify": "^0.1.0",
85 |     "prettier": "^1.16.4",
86 |     "react-dom": "16",
87 |     "tachyons": "^4.11.1"
88 |   },
89 |   "peerDependencies": {
90 |     "react": "^16.8.1"
91 |   },
92 |   "dependencies": {
93 |     "prop-types": "^15.7.1"
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | name: Home
  3 | route: /
  4 | ---
  5 | 
  6 | ![react-losen](https://user-images.githubusercontent.com/2470775/39097362-8093ab6e-465b-11e8-845e-b21b893d6091.png)
  7 | 
  8 | # react-losen &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/otovo/react-losen/blob/master/LICENSE)
  9 | 
 10 | > A brutally simple wizard for React and React Native.
 11 | 
 12 | **Note:** This module is currently in beta. First official release is right around the corner, and will include some nice changes:
 13 | 
 14 |   - [ ] Async step validation
 15 |   - [ ] Upgrade to new React Context API
 16 | 
 17 | Please submit issues/feedback on GitHub ✌️
 18 | 
 19 | ## Install
 20 | 
 21 | ```shell
 22 | yarn add react-losen
 23 | ```
 24 | 
 25 | ## Example
 26 | 
 27 | ```jsx
 28 | import { Wizard, Step, Controls } from 'react-losen';
 29 | 
 30 | <Wizard
 31 |   render={() => (
 32 |     <>
 33 |       <Step name="start">Step one</Step>
 34 |       <Step name="second-step">This is the second step</Step>
 35 |       <Step name="final-step">Click next to finish</Step>
 36 | 
 37 |       <Controls
 38 |         render={(onNext, onPrevious, isFirstStep) => (
 39 |           <>
 40 |             <Button onClick={onPrevious} disabled={isFirstStep}>
 41 |               Previous
 42 |             </Button>
 43 | 
 44 |             <Button onClick={onNext}>Next</Button>
 45 |           </>
 46 |         )}
 47 |       />
 48 |     </>
 49 |   )}
 50 | />;
 51 | ```
 52 | 
 53 | ## Developing
 54 | 
 55 | ### Built With
 56 | 
 57 | `react-losen` is built with React and it's [Context API](https://reactjs.org/docs/context.html) under the hood. We use [render props](https://reactjs.org/docs/render-props.html) to expose functionality to child components.
 58 | 
 59 | Include the following polyfills to support older browsers:
 60 | - `array-findindex-polyfill`
 61 | - `url-search-params-polyfill`
 62 | - `Object.entries` polyfill
 63 | 
 64 | ### Developing
 65 | 
 66 | Use `yarn dev` to spin up a dev server which let's you view and play with the source components. To get started, create a `.md` in the `./pages` directory. It uses MDX which let's you import and write
 67 | JSX within markdown documents. For more info out the [Docz website](https://www.docz.site/) and read up on the [MDX spec](https://github.com/mdx-js/mdx/).
 68 | 
 69 | ### Building
 70 | 
 71 | ```
 72 | yarn run build
 73 | ```
 74 | 
 75 | This command uses [`@pika/pack`](https://www.pikapkg.com/blog/introducing-pika-pack/) to build for browsers. Plugins are specified under `@pika/pack` in `package.json`.
 76 | 
 77 | ### Publishing
 78 | 
 79 | Publish new versions with `yarn run publish`. `Pack` guides you through the wizard, helps you bump the version number and publish to npm. **Note:** It's importaint to use the `run` argument, as `yarn publish` is a built in command and won't use `Pack`
 80 | 
 81 | ### Building docs
 82 | 
 83 | The documentation is built by running `yarn docs:build`. This generates a static site in `./docs/`. Currently the site is deployed and hosted with [Zeit's Now](https://zeit.co/blog/now-static).
 84 | 
 85 | Todo: Add information on how to deploy docs with Now.
 86 | 
 87 | ## Versioning
 88 | 
 89 | react-losen use [SemVer](http://semver.org/) for versioning. For the versions available, see the [link to tags on this repository](/tags).
 90 | 
 91 | ## Tests
 92 | 
 93 | Testing is done using the [Jest](https://facebook.github.io/jest/) test
 94 | framework. Assertions is done [with Jest's `Expect`
 95 | matchers](https://facebook.github.io/jest/docs/en/expect.html).
 96 | 
 97 | Todo: Add CI.
 98 | 
 99 | ## Style guide
100 | 
101 | For code quality, react-losen use the following tools:
102 | 
103 | - [Flow](https://flow.org/) for static type checking
104 | - [Prettier](https://prettier.io/) for code formatting
105 | - [Eslint](https://eslint.org/) for linting
106 | 
107 | ## API reference
108 | 
109 | See [documentation](https://docs-geycgwirqi.now.sh/)
110 | 
111 | 
112 | ## Licensing
113 | 
114 | [MIT](https://github.com/otovo/react-losen/blob/master/LICENSE)
115 | 


--------------------------------------------------------------------------------
/src/Wizard.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | import React, { useState, useEffect, useCallback } from 'react';
  3 | 
  4 | import { findNextValid, findPreviousValid } from './utils';
  5 | import { ControlsContext } from './Controls';
  6 | import { StepContext } from './Step';
  7 | 
  8 | export class ValidationError extends Error {}
  9 | 
 10 | type Props = {|
 11 |   onComplete: (currentStep: string) => void,
 12 |   children: React$Node,
 13 |   debug?: boolean,
 14 |   stateManager?: Losen$StateManager,
 15 | |};
 16 | 
 17 | const Wizard = ({ children, onComplete, stateManager, debug }: Props) => {
 18 |   const [index, setIndex] = useState<number | null>(null);
 19 |   const [steps, setSteps] = useState<Array<Losen$Step>>([]);
 20 |   const [isLoading, setLoadingState] = useState(false);
 21 | 
 22 |   function registerStep(step) {
 23 |     const alreadyRegistered = steps.map(el => el.name).includes(step.name);
 24 |     if (!alreadyRegistered) {
 25 |       setSteps(previousSteps => [...previousSteps, step]);
 26 |     }
 27 |   }
 28 | 
 29 |   function updateStep(step) {
 30 |     const stepIndex = steps.findIndex(el => el.name === step.name);
 31 |     if (stepIndex == -1) {
 32 |       registerStep(step);
 33 |     } else {
 34 |       setSteps(previousSteps => [
 35 |         ...previousSteps.slice(0, stepIndex),
 36 |         step,
 37 |         ...previousSteps.slice(stepIndex + 1),
 38 |       ]);
 39 |     }
 40 |   }
 41 | 
 42 |   async function onNext() {
 43 |     if (index === null) {
 44 |       return;
 45 |     }
 46 |     const { validator } = steps[index];
 47 |     const next = findNextValid(steps, index);
 48 | 
 49 |     const nextAction =
 50 |       next === index
 51 |         ? () => onComplete(steps[index].name)
 52 |         : () => setIndex(next);
 53 | 
 54 |     if (validator) {
 55 |       try {
 56 |         setLoadingState(true);
 57 |         await validator();
 58 |         nextAction();
 59 |       } catch (error) {
 60 |         if (error instanceof ValidationError) {
 61 |           console.error('ReactLosen', error); // eslint-disable-line
 62 |         } else {
 63 |           throw error;
 64 |         }
 65 |       } finally {
 66 |         setLoadingState(false);
 67 |       }
 68 |     } else {
 69 |       nextAction();
 70 |     }
 71 | 
 72 |     if (stateManager) {
 73 |       const currentStep = steps[index];
 74 |       if (index !== steps.length - 1) {
 75 |         const nextStep = steps[index + 1];
 76 |         stateManager.updateStep(currentStep.name, nextStep.name);
 77 |       }
 78 |     }
 79 |   }
 80 | 
 81 |   function onPrevious() {
 82 |     if (index === null) {
 83 |       return;
 84 |     }
 85 |     const prev = findPreviousValid(steps, index);
 86 |     setIndex(prev);
 87 | 
 88 |     if (stateManager) {
 89 |       const currentStep = steps[index];
 90 |       if (index > 0) {
 91 |         const previousStep = steps[index - 1];
 92 |         stateManager.updateStep(currentStep.name, previousStep.name);
 93 |       }
 94 |     }
 95 |   }
 96 | 
 97 |   const onLoad = useCallback(() => {
 98 |     if (stateManager) {
 99 |       const activeStep = stateManager.getActiveStep();
100 |       let activeIndex = steps.findIndex(step => step.name === activeStep);
101 |       activeIndex = activeIndex > -1 ? activeIndex : null;
102 |       setIndex(activeIndex);
103 |     } else if (index === null) {
104 |       setIndex(0);
105 |     }
106 |   }, [index, stateManager, steps]);
107 | 
108 |   useEffect(() => {
109 |     // for debugging purposes only
110 |     if (debug) {
111 |       console.debug('steps updated', steps); // eslint-disable-line
112 |     }
113 | 
114 |     window.addEventListener('popstate', () => {
115 |       onLoad();
116 |     });
117 | 
118 |     onLoad();
119 |   }, [steps, debug, stateManager, onLoad]);
120 | 
121 |   return (
122 |     <ControlsContext.Provider
123 |       value={{
124 |         onNext,
125 |         onPrevious,
126 |         isLoading,
127 |         isFirst:
128 |           index !== null ? findPreviousValid(steps, index) === index : false,
129 |         isLast: index !== null ? findNextValid(steps, index) === index : false,
130 |         activeIndex: index,
131 |       }}>
132 |       <StepContext.Provider
133 |         value={{
134 |           registerStep,
135 |           activeStep: index === null ? { name: '' } : steps[index],
136 |           initialized: index === null ? false : !!steps[index],
137 |           updateStep,
138 |           stateManager,
139 |         }}>
140 |         {children}
141 |       </StepContext.Provider>
142 |     </ControlsContext.Provider>
143 |   );
144 | };
145 | 
146 | Wizard.defaultProps = {
147 |   debug: false,
148 |   stateManager: undefined,
149 | };
150 | export default Wizard;
151 | 


--------------------------------------------------------------------------------