├── .babelrc
├── .circleci
    └── config.yml
├── .gitignore
├── .npmignore
├── .vscode
    └── launch.json
├── LICENSE
├── README.md
├── StateDiagram.png
├── examples
    ├── 1.Normal-Component-State.js
    └── 2.With-Redux.js
├── img
    └── logo.svg
├── package.json
├── src
    ├── ManagedStateMachine.js
    ├── StateMachine.js
    └── index.js
├── test
    ├── configure-tests.js
    ├── index.test.js
    └── mock-components.js
├── webpack.config.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/env", "@babel/react"],
3 |   "plugins": [
4 |     "@babel/plugin-proposal-object-rest-spread",
5 |     "@babel/plugin-proposal-class-properties"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       # specify the version you desire here
 6 |       - image: circleci/node:7.10
 7 | 
 8 |       # Specify service dependencies here if necessary
 9 |       # CircleCI maintains a library of pre-built images
10 |       # documented at https://circleci.com/docs/2.0/circleci-images/
11 |       # - image: circleci/mongo:3.4.4
12 | 
13 |     working_directory: ~/repo
14 | 
15 |     steps:
16 |       - checkout
17 | 
18 |       # Download and cache dependencies
19 |       - restore_cache:
20 |           keys:
21 |           - v1-dependencies-{{ checksum "package.json" }}
22 |           # fallback to using the latest cache if no exact match is found
23 |           - v1-dependencies-
24 | 
25 |       - run: yarn install
26 |       - run: yarn add jest
27 | 
28 |       - save_cache:
29 |           paths:
30 |             - node_modules
31 |           key: v1-dependencies-{{ checksum "package.json" }}
32 | 
33 |       # run tests!
34 |       - run: yarn test
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /lib
3 | /coverage


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | docs
2 | src
3 | .babelrc
4 | webpack.config.js


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Use IntelliSense to learn about possible attributes.
 3 |   // Hover to view descriptions of existing attributes.
 4 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |   "version": "0.2.0",
 6 |   "configurations": [
 7 |     {
 8 |       "name": "Debug CRA Tests",
 9 |       "type": "node",
10 |       "request": "launch",
11 |       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
12 |       "args": [
13 |         "test",
14 |         "--runInBand",
15 |         "--no-cache",
16 |         "--env=jsdom",
17 |         "${relativeFile}"
18 |       ],
19 |       "cwd": "${workspaceRoot}",
20 |       "protocol": "inspector",
21 |       "console": "integratedTerminal",
22 |       "internalConsoleOptions": "neverOpen"
23 |     }
24 |   ]
25 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Francis Stokes
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Machinery
  2 | 
  3 | [![npm version](https://badge.fury.io/js/react-machinery.svg)]()
  4 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()
  5 | [![CircleCI](https://circleci.com/gh/francisrstokes/React-Machinery.png?circle-token=46dc2a2f9571dfc783c03c6550c3119c18c5b8ce&style=shield)]()
  6 | 
  7 | <img src="img/logo.svg" align="center" height="200" width="200" >
  8 | 
  9 | 
 10 | ⚙️ State Machine Modelling for React
 11 | 
 12 | - [Description](#description)
 13 |   - [Examples](#examples)
 14 | - [Installation](#installation)
 15 | - [API](#api)
 16 |   - [StateMachine](#statemachine)
 17 |     - [getCurrentState](#getcurrentstate)
 18 |     - [setNewState](#setnewstate)
 19 |     - [states](#states)
 20 |     - [data](#data)
 21 | 
 22 | ## Description
 23 | 
 24 | 🔥 `React Machinery` provides a simple to use, component based approach to state machines in react.
 25 | 
 26 | Describe your states, transitions, and which component each renders, and plug it into the `StateMachine` component. It accepts two extra functions; one for getting the current state name and one for setting it. This allows your app to flexibly use and swap out different ways of storing data - be it in component state, redux, mobx, whatever.
 27 | 
 28 | ### Examples
 29 | 
 30 | Examples of how the following state diagram can be implemented in both vanilla react and using redux can be found in the examples folder.
 31 | 
 32 | - [Example using react](examples/1.Normal-Component-State.js)
 33 | - [Example using redux](examples/2.With-Redux.js)
 34 | 
 35 | ![State diagram of code below](StateDiagram.png)
 36 | 
 37 | ## Installation
 38 | 
 39 | ```bash
 40 | # with yarn
 41 | yarn add react-machinery
 42 | 
 43 | # or with npm
 44 | npm i react-machinery
 45 | ```
 46 | 
 47 | ## API
 48 | 
 49 | ### StateMachine
 50 | 
 51 | All props for the `StateMachine` component are required.
 52 | 
 53 | #### getCurrentState
 54 | 
 55 | ##### function()
 56 | 
 57 | A function returning the current state name, stored somewhere like a react component state, or in redux.
 58 | 
 59 | #### setNewState
 60 | 
 61 | ##### function(newStateName)
 62 | 
 63 | A function that updates the current state, stored somewhere like a react component state, or in redux.
 64 | 
 65 | #### states
 66 | 
 67 | ##### Array of state definitions
 68 | 
 69 | A state definition is a plain javascript object with the following properties:
 70 | 
 71 | ```javascript
 72 | {
 73 |   // This name corresponds to the one coming from getCurrentState() and
 74 |   // being set by setNewState()
 75 |   name: 'State Name',
 76 | 
 77 |   // Array of plain objects that describe automatic transitions
 78 |   // These are evaluated after a transition and when props change
 79 |   autoTransitions: [
 80 |     // A transition object must contain two properties:
 81 |     // test, which is a function that recieves the StateMachine data, and returns true if a state change should take place
 82 |     // newState, which is the name of the state to transition to when the test function returns true
 83 |     {
 84 |       test: data => data === 'expected for state change',
 85 |       newState: 'Name of new state'
 86 |     }
 87 |   ],
 88 | 
 89 |   // This is a list of states that can be transitioned to from the current state using the transitionTo
 90 |   // prop passed to a state component. Trying to use transitionTo with a state not specified in this list
 91 |   // will throw an error. This list, together with any 'newState's described in autoTransitions form the
 92 |   // full set of valid transitions for this state.
 93 |   validTransitions: [
 94 |     'Name of valid state'
 95 |   ],
 96 | 
 97 |   // beforeRender is an optional function that can run some code before this states component
 98 |   // is rendered. For anything sufficiently complex however, it's better to use a react class
 99 |   // component and take advantage of lifecycle hooks
100 |   beforeRender: (data) => {
101 |     data.startAPIRequest();
102 |   },
103 | 
104 |     // One of the following two properties must be implemented:
105 | 
106 |   // a render prop that recieves the 'props' object supplied to the StateMachine
107 |   // the props object will also include a 'transitionTo' function and a 'currentState' string
108 |   render: (data) => {
109 |     return <SomeComponent propUsingStateName={data.currentState} {...data} />
110 |   },
111 | 
112 |   // Or just a regular react component
113 |   component: SomeReactComponent
114 | }
115 | ```
116 | 
117 | #### data
118 | 
119 | ##### object
120 | 
121 | An object contains data that defines all the states in the state machine. This data is supplied to the component rendered by any state, to `test` functions in autoTransitions. If a render prop is used for the state, then the props are passed as the argument, along with a `transitionTo` function and `currentState` name.
122 | 
123 | # Logo
124 | 
125 | The awesome logo was designed by @ayushs08, who graciously provided under CC BY 3.0. Many thanks!


--------------------------------------------------------------------------------
/StateDiagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francisrstokes/React-Machinery/acca228c2a70808b6f35e99eb977924a1f61755e/StateDiagram.png


--------------------------------------------------------------------------------
/examples/1.Normal-Component-State.js:
--------------------------------------------------------------------------------
 1 | import {StateMachine} from 'react-machinery';
 2 | 
 3 | /*
 4 |   This example uses a regular react component as the data store for our state machine.
 5 |   Updating the state is as simple as passing a function that calls setState on our component.
 6 | 
 7 |   At any time, we can be in one of four states:
 8 |     - theNumberOne
 9 |     - theNumberTwo
10 |     - theNumberTen
11 |     - lifeTheUniverseAndEverything
12 | 
13 |   We can only transition to some states if we are already in a certain state. For example,
14 |   'theNumberTen' can only be transitioned if we are already in 'theNumberTwo'.
15 | */
16 | 
17 | const One = () => <div>State #1</div>
18 | const Two = () => <div>State #2</div>
19 | const Ten = () => <div>State #10</div>
20 | const HitchHikerComponent = () => <div>Theres a frood who really knows where his towel is.</div>
21 | 
22 | const states = [
23 |   {
24 |     name: 'theNumberOne',
25 |     autoTransitions: [
26 |       {
27 |         test: ({n}) => n === 2,
28 |         newState: 'theNumberTwo'
29 |       }
30 |     ],
31 |     component: One
32 |   },
33 |   {
34 |     name: 'theNumberTwo',
35 |     autoTransitions: [
36 |       {
37 |         test: ({n}) => n === 1,
38 |         newState: 'theNumberOne'
39 |       },
40 |       {
41 |         test: ({n}) => n === 10,
42 |         newState: 'theNumberTen'
43 |       },
44 |     ],
45 |     component: Two
46 |   },
47 |   {
48 |     name: 'theNumberTen',
49 |     autoTransitions: [
50 |       {
51 |         test: ({n}) => n === 1,
52 |         newState: 'theNumberOne'
53 |       },
54 |       {
55 |         test: ({n}) => n === 42,
56 |         newState: 'lifeTheUniverseAndEverything'
57 |       }
58 |     ],
59 |     component: Ten
60 |   },
61 |   {
62 |     name: 'lifeTheUniverseAndEverything',
63 |     component: HitchHikerComponent
64 |   },
65 | ];
66 | 
67 | export class Example extends React.Component {
68 |   constructor(props) {
69 |     super(props);
70 |     this.state = {
71 |       n: 1,
72 |       stateName: 'theNumberOne'
73 |     };
74 |   }
75 | 
76 |   render() {
77 |     const {n} = this.state;
78 |     return <div>
79 |       <StateMachine
80 |         getCurrentState={() => this.state.stateName}
81 |         setNewState={stateName => this.setState(() => ({ stateName }))}
82 |         data={{n}}
83 |         states={states}
84 |       />
85 | 
86 |       <div>{n}</div>
87 | 
88 |       <button onClick={() => this.setState(() => ({n: n + 1}))}>+1</button>
89 |       <button onClick={() => this.setState(() => ({n: n + 10}))}>+10</button>
90 |       <button onClick={() => this.setState(() => ({n: n - 1}))}>-1</button>
91 |       <button onClick={() => this.setState(() => ({n: n - 10}))}>-10</button>
92 |     </div>;
93 |   }
94 | }


--------------------------------------------------------------------------------
/examples/2.With-Redux.js:
--------------------------------------------------------------------------------
  1 | import {StateMachine} from 'react-machinery';
  2 | import {connect} from 'react-redux';
  3 | 
  4 | /*
  5 |   This example uses a redux connected component to provide data to the State Machine.
  6 |   Updating the state is done by dispatching an action so that the
  7 |   current state is also kept in the store.
  8 | 
  9 |   At any time, we can be in one of four states:
 10 |     - theNumberOne
 11 |     - theNumberTwo
 12 |     - theNumberTen
 13 |     - lifeTheUniverseAndEverything
 14 | 
 15 |   We can only transition to some states if we are already in a certain state. For example,
 16 |   'theNumberTen' can only be transitioned if we are already in 'theNumberTwo'.
 17 | */
 18 | 
 19 | const One = () => <div>State #1</div>
 20 | const Two = () => <div>State #2</div>
 21 | const Ten = () => <div>State #10</div>
 22 | const HitchHikerComponent = () => <div>Theres a frood who really knows where his towel is.</div>
 23 | 
 24 | const states = [
 25 |   {
 26 |     name: 'theNumberOne',
 27 |     autoTransitions: [
 28 |       {
 29 |         test: ({n}) => n === 2,
 30 |         newState: 'theNumberTwo'
 31 |       }
 32 |     ],
 33 |     component: One
 34 |   },
 35 |   {
 36 |     name: 'theNumberTwo',
 37 |     autoTransitions: [
 38 |       {
 39 |         test: ({n}) => n === 1,
 40 |         newState: 'theNumberOne'
 41 |       },
 42 |       {
 43 |         test: ({n}) => n === 10,
 44 |         newState: 'theNumberTen'
 45 |       },
 46 |     ],
 47 |     component: Two
 48 |   },
 49 |   {
 50 |     name: 'theNumberTen',
 51 |     autoTransitions: [
 52 |       {
 53 |         test: ({n}) => n === 1,
 54 |         newState: 'theNumberOne'
 55 |       },
 56 |       {
 57 |         test: ({n}) => n === 42,
 58 |         newState: 'lifeTheUniverseAndEverything'
 59 |       }
 60 |     ],
 61 |     component: Ten
 62 |   },
 63 |   {
 64 |     name: 'lifeTheUniverseAndEverything',
 65 |     component: HitchHikerComponent
 66 |   },
 67 | ];
 68 | 
 69 | export const Example = connect(
 70 |   state => ({
 71 |     n: state.n,
 72 |     currentState: state.currentState
 73 |   }),
 74 |   dispatch => ({
 75 |     setNewState: (stateName) => dispatch({
 76 |       type: 'SET_NEW_STATE',
 77 |       payload: stateName
 78 |     }),
 79 |     updateN: (newValue) => dispatch({
 80 |       type: 'UPDATE_N_VALUE',
 81 |       payload: newValue
 82 |     })
 83 |   })
 84 | )(({n, currentState, setNewState, updateN}) => {
 85 |   return <div>
 86 |     <StateMachine
 87 |       getCurrentState={() => currentState}
 88 |       setNewState={setNewState}
 89 |       data={{n}}
 90 |       states={states}
 91 |     />
 92 | 
 93 |     <div>{n}</div>
 94 | 
 95 |     <button onClick={() => updateN(n + 1)}>+1</button>
 96 |     <button onClick={() => updateN(n + 10)}>+10</button>
 97 |     <button onClick={() => updateN(n - 1)}>-1</button>
 98 |     <button onClick={() => updateN(n - 10)}>-10</button>
 99 |   </div>;
100 | })
101 | 


--------------------------------------------------------------------------------
/img/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="490.05" height="490.05" xmlns="http://www.w3.org/2000/svg">
 2 | 
 3 |  <g>
 4 |   <title>background</title>
 5 |   <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 6 |  </g>
 7 |  <g>
 8 |   <title>Layer 1</title>
 9 |   <g id="svg_1">
10 |    <g id="svg_34">
11 |     <path id="svg_3" fill="#2C2F33" d="m256.15,477.85l24.5,-10.1c13.1,-5.4 19.3,-20.5 13.9,-33.5l-6.3,-15.2c12.3,-9.1 23,-19.9 32.2,-32.2l15.2,6.3c6.3,2.6 13.3,2.6 19.6,0c6.3,-2.6 11.3,-7.6 13.9,-13.9l10.2,-24.5c5.4,-13.1 -0.8,-28.1 -13.9,-33.5l-22.5,-9.3c-5.1,-2.1 -10.8,0.3 -12.9,5.4s0.3,10.8 5.4,12.9l22.5,9.3c3,1.2 4.4,4.7 3.2,7.7l-10.2,24.5c-0.6,1.4 -1.7,2.6 -3.2,3.2c-1.4,0.6 -3,0.6 -4.5,0l-22.5,-9.3c-4.4,-1.8 -9.4,-0.3 -12,3.6c-10.1,15.2 -22.9,28 -38.1,38.1c-3.9,2.6 -5.5,7.7 -3.7,12l9.3,22.5c1.2,3 -0.2,6.4 -3.2,7.7l-24.5,10.1c-1.4,0.6 -3,0.6 -4.5,0c-1.4,-0.6 -2.6,-1.7 -3.2,-3.2l-9.3,-22.5c-1.8,-4.4 -6.4,-6.9 -11.1,-5.9c-17.8,3.6 -36,3.5 -53.8,0c-4.6,-0.9 -9.3,1.6 -11.1,5.9l-9.3,22.5c-1.2,3 -4.7,4.4 -7.7,3.2l-24.5,-10.2c-1.4,-0.6 -2.6,-1.7 -3.2,-3.2c-0.6,-1.4 -0.6,-3 0,-4.5l9.3,-22.5c1.8,-4.4 0.3,-9.4 -3.6,-12c-15.2,-10.1 -28,-22.9 -38.1,-38.1c-2.6,-3.9 -7.7,-5.5 -12,-3.7l-22.5,9.3c-1.5,0.6 -3,0.6 -4.5,0c-1.4,-0.6 -2.6,-1.7 -3.2,-3.2l-10.1,-24.5c-0.6,-1.4 -0.6,-3 0,-4.5c0.6,-1.4 1.7,-2.6 3.2,-3.2l22.5,-9.3c4.4,-1.8 6.8,-6.4 5.9,-11.1c-3.6,-17.8 -3.5,-36 0,-53.8c0.9,-4.6 -1.6,-9.3 -5.9,-11.1l-22.5,-9.3c-3,-1.2 -4.4,-4.7 -3.2,-7.7l10.2,-24.5c1.2,-3 4.7,-4.4 7.7,-3.2l22.5,9.3c4.4,1.8 9.4,0.3 12,-3.6c10.1,-15.2 22.9,-28 38.1,-38.1c3.9,-2.6 5.5,-7.7 3.7,-12l-9.3,-22.5c-0.6,-1.4 -0.6,-3 0,-4.5c0.6,-1.4 1.7,-2.6 3.2,-3.2l24.5,-10.1c1.4,-0.6 3,-0.6 4.5,0c1.4,0.6 2.6,1.7 3.2,3.2l9.3,22.5c2.1,5.1 7.9,7.5 12.9,5.4c5.1,-2.1 7.5,-7.9 5.4,-12.9l-9.3,-22.5c-2.6,-6.3 -7.6,-11.3 -13.9,-13.9c-3.2,-1.3 -6.5,-2 -9.8,-2s-6.7,0.7 -9.8,2l-24.5,10.1c-6.3,2.6 -11.3,7.6 -13.9,13.9c-2.6,6.3 -2.6,13.3 0,19.6l6.3,15.2c-12.3,9.1 -23,19.9 -32.2,32.2l-15.2,-6.3c-13.1,-5.4 -28.1,0.8 -33.5,13.9l-10.3,24.5c-5.4,13.1 0.8,28.1 13.9,33.5l15.2,6.3c-2.2,15.1 -2.2,30.4 0,45.5l-15.2,6.3c-6.3,2.6 -11.3,7.6 -13.9,13.9s-2.6,13.3 0,19.6l10.1,24.5c2.6,6.3 7.6,11.3 13.9,13.9s13.3,2.6 19.6,0l15.2,-6.3c9.1,12.3 19.9,23 32.2,32.2l-6.3,15.2c-2.6,6.3 -2.6,13.3 0,19.6c2.6,6.3 7.6,11.3 13.9,13.9l24.5,10.2c13.1,5.4 28.1,-0.8 33.5,-13.9l6.3,-15.2c15.1,2.2 30.4,2.2 45.5,0l6.3,15.2c2.6,6.3 7.6,11.3 13.9,13.9c6.3,2.6 13.3,2.6 19.6,0z"/>
12 |     <path id="svg_4" fill="#2C2F33" d="m113.15,292.75c0.3,44.2 36.4,79.9 80.5,79.9c0.2,0 0.4,0 0.6,0c21.5,-0.2 41.7,-8.7 56.8,-24c15.1,-15.3 23.3,-35.6 23.2,-57.1c0,-5.4 -4.5,-9.8 -9.9,-9.8l-0.1,0c-5.5,0 -9.9,4.5 -9.8,10c0.1,16.2 -6.1,31.5 -17.5,43.1s-26.6,18 -42.8,18.1c-0.1,0 -0.3,0 -0.4,0c-33.3,0 -60.5,-27 -60.7,-60.3c-0.2,-33.5 26.8,-60.9 60.3,-61.2c5.5,0 9.9,-4.5 9.8,-10c0,-5.4 -4.5,-9.8 -9.9,-9.8c0,0 0,0 -0.1,0c-44.5,0.3 -80.3,36.7 -80,81.1z"/>
13 |     <g stroke="null" transform="rotate(15 324.0793151855466,159.81692504882804) " id="svg_33">
14 |      <g stroke="null" transform="matrix(0.550876854236206,0,0,0.550876854236206,-3210.7571402652375,-3215.9405352575895) " id="svg_28">
15 |       <path stroke="null" id="svg_29" d="m6662.045329,6128.020938c0,-32.5 -40.7,-63.3 -103.1,-82.4c14.4,-63.6 8,-114.2 -20.2,-130.4c-6.5,-3.8 -14.1,-5.6 -22.4,-5.6l0,22.3c4.6,0 8.3,0.9 11.4,2.6c13.6,7.8 19.5,37.5 14.9,75.7c-1.1,9.4 -2.9,19.3 -5.1,29.4c-19.6,-4.8 -41,-8.5 -63.5,-10.9c-13.5,-18.5 -27.5,-35.3 -41.6,-50c32.6,-30.3 63.2,-46.9 84,-46.9l0,-22.3c0,0 0,0 0,0c-27.5,0 -63.5,19.6 -99.9,53.6c-36.4,-33.8 -72.4,-53.2 -99.9,-53.2l0,22.3c20.7,0 51.4,16.5 84,46.6c-14,14.7 -28,31.4 -41.3,49.9c-22.6,2.4 -44,6.1 -63.6,11c-2.3,-10 -4,-19.7 -5.2,-29c-4.7,-38.2 1.1,-67.9 14.6,-75.8c3,-1.8 6.9,-2.6 11.5,-2.6l0,-22.3c0,0 0,0 0,0c-8.4,0 -16,1.8 -22.6,5.6c-28.1,16.2 -34.4,66.7 -19.9,130.1c-62.2,19.2 -102.7,49.9 -102.7,82.3c0,32.5 40.7,63.3 103.1,82.4c-14.4,63.6 -8,114.2 20.2,130.4c6.5,3.8 14.1,5.6 22.5,5.6c27.5,0 63.5,-19.6 99.9,-53.6c36.4,33.8 72.4,53.2 99.9,53.2c8.4,0 16,-1.8 22.6,-5.6c28.1,-16.2 34.4,-66.7 19.9,-130.1c62,-19.1 102.5,-49.9 102.5,-82.3zm-130.2,-66.7c-3.7,12.9 -8.3,26.2 -13.5,39.5c-4.1,-8 -8.4,-16 -13.1,-24c-4.6,-8 -9.5,-15.8 -14.4,-23.4c14.2,2.1 27.9,4.7 41,7.9zm-45.8,106.5c-7.8,13.5 -15.8,26.3 -24.1,38.2c-14.9,1.3 -30,2 -45.2,2c-15.1,0 -30.2,-0.7 -45,-1.9c-8.3,-11.9 -16.4,-24.6 -24.2,-38c-7.6,-13.1 -14.5,-26.4 -20.8,-39.8c6.2,-13.4 13.2,-26.8 20.7,-39.9c7.8,-13.5 15.8,-26.3 24.1,-38.2c14.9,-1.3 30,-2 45.2,-2c15.1,0 30.2,0.7 45,1.9c8.3,11.9 16.4,24.6 24.2,38c7.6,13.1 14.5,26.4 20.8,39.8c-6.3,13.4 -13.2,26.8 -20.7,39.9zm32.3,-13c5.4,13.4 10,26.8 13.8,39.8c-13.1,3.2 -26.9,5.9 -41.2,8c4.9,-7.7 9.8,-15.6 14.4,-23.7c4.6,-8 8.9,-16.1 13,-24.1zm-101.4,106.7c-9.3,-9.6 -18.6,-20.3 -27.8,-32c9,0.4 18.2,0.7 27.5,0.7c9.4,0 18.7,-0.2 27.8,-0.7c-9,11.7 -18.3,22.4 -27.5,32zm-74.4,-58.9c-14.2,-2.1 -27.9,-4.7 -41,-7.9c3.7,-12.9 8.3,-26.2 13.5,-39.5c4.1,8 8.4,16 13.1,24c4.7,8 9.5,15.8 14.4,23.4zm73.9,-208.1c9.3,9.6 18.6,20.3 27.8,32c-9,-0.4 -18.2,-0.7 -27.5,-0.7c-9.4,0 -18.7,0.2 -27.8,0.7c9,-11.7 18.3,-22.4 27.5,-32zm-74,58.9c-4.9,7.7 -9.8,15.6 -14.4,23.7c-4.6,8 -8.9,16 -13,24c-5.4,-13.4 -10,-26.8 -13.8,-39.8c13.1,-3.1 26.9,-5.8 41.2,-7.9zm-90.5,125.2c-35.4,-15.1 -58.3,-34.9 -58.3,-50.6c0,-15.7 22.9,-35.6 58.3,-50.6c8.6,-3.7 18,-7 27.7,-10.1c5.7,19.6 13.2,40 22.5,60.9c-9.2,20.8 -16.6,41.1 -22.2,60.6c-9.9,-3.1 -19.3,-6.5 -28,-10.2zm53.8,142.9c-13.6,-7.8 -19.5,-37.5 -14.9,-75.7c1.1,-9.4 2.9,-19.3 5.1,-29.4c19.6,4.8 41,8.5 63.5,10.9c13.5,18.5 27.5,35.3 41.6,50c-32.6,30.3 -63.2,46.9 -84,46.9c-4.5,-0.1 -8.3,-1 -11.3,-2.7zm237.2,-76.2c4.7,38.2 -1.1,67.9 -14.6,75.8c-3,1.8 -6.9,2.6 -11.5,2.6c-20.7,0 -51.4,-16.5 -84,-46.6c14,-14.7 28,-31.4 41.3,-49.9c22.6,-2.4 44,-6.1 63.6,-11c2.3,10.1 4.1,19.8 5.2,29.1zm38.5,-66.7c-8.6,3.7 -18,7 -27.7,10.1c-5.7,-19.6 -13.2,-40 -22.5,-60.9c9.2,-20.8 16.6,-41.1 22.2,-60.6c9.9,3.1 19.3,6.5 28.1,10.2c35.4,15.1 58.3,34.9 58.3,50.6c-0.1,15.7 -23,35.6 -58.4,50.6z" fill="#61DAFB"/>
16 |       <polygon stroke="null" id="svg_30" points="6316.545535087585,5909.921545982361 6316.545535087585,5909.921545982361 6316.545535087585,5909.921545982361 " fill="#61DAFB"/>
17 |       <circle stroke="null" id="svg_31" r="45.699951" cy="6128.020938" cx="6416.645329" fill="#61DAFB"/>
18 |       <polygon stroke="null" id="svg_32" points="6516.245730400085,5909.621741294861 6516.245730400085,5909.621741294861 6516.245730400085,5909.621741294861 " fill="#61DAFB"/>
19 |      </g>
20 |     </g>
21 |    </g>
22 |   </g>
23 |   <g id="svg_7"/>
24 |   <g id="svg_8"/>
25 |   <g id="svg_9"/>
26 |   <g id="svg_10"/>
27 |   <g id="svg_11"/>
28 |   <g id="svg_12"/>
29 |   <g id="svg_13"/>
30 |   <g id="svg_14"/>
31 |   <g id="svg_15"/>
32 |   <g id="svg_16"/>
33 |   <g id="svg_17"/>
34 |   <g id="svg_18"/>
35 |   <g id="svg_19"/>
36 |   <g id="svg_20"/>
37 |   <g id="svg_21"/>
38 |  </g>
39 | </svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-machinery",
 3 |   "version": "1.2.0",
 4 |   "description": "Control React UI trees with a State Machine",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "dev": "npm run lib:watch",
 8 |     "lib": "babel src -d lib --copy-files",
 9 |     "lib:watch": "babel src -w -d lib --copy-files",
10 |     "test": "jest ./test/index.test.js"
11 |   },
12 |   "keywords": [],
13 |   "license": "MIT",
14 |   "peerDependencies": {
15 |     "react": "^16.8.0",
16 |     "react-dom": "^16.8.0"
17 |   },
18 |   "devDependencies": {
19 |     "@babel/cli": "^7.0.0-beta.46",
20 |     "@babel/core": "^7.0.0-beta.46",
21 |     "@babel/plugin-proposal-class-properties": "^7.0.0-beta.46",
22 |     "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",
23 |     "@babel/preset-env": "^7.0.0-beta.46",
24 |     "@babel/preset-react": "^7.0.0-beta.46",
25 |     "babel-core": "7.0.0-bridge.0",
26 |     "babel-jest": "^23.0.1",
27 |     "babel-loader": "^8.0.0-beta.0",
28 |     "css-loader": "^0.28.11",
29 |     "enzyme": "^3.3.0",
30 |     "enzyme-adapter-react-16": "^1.1.1",
31 |     "html-webpack-plugin": "^3.2.0",
32 |     "react": "^16.8.0",
33 |     "react-dom": "^16.8.0",
34 |     "style-loader": "^0.21.0",
35 |     "webpack": "^4.6.0",
36 |     "webpack-cli": "^2.0.15",
37 |     "webpack-dev-server": "^3.1.3"
38 |   },
39 |   "author": "Francis Stokes <stokesie14@gmail.com>",
40 |   "homepage": "https://github.com/francisrstokes/React-Machinery",
41 |   "repository": {
42 |     "type": "git",
43 |     "url": "git@github.com:francisrstokes/React-Machinery.git"
44 |   },
45 |   "dependencies": {
46 |     "prop-types": "^15.6.2"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/ManagedStateMachine.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | import { StateMachine, statePropTypes } from './StateMachine';
 5 | 
 6 | export const ManagedStateMachine = ({
 7 |   data: initialData,
 8 |   states,
 9 |   children
10 | }) => {
11 |   const [data, setData] = useState(initialData);
12 |   const [state, setState] = useState(states[0]);
13 | 
14 |   return (
15 |     <React.Fragment>
16 |       <StateMachine
17 |         data={data}
18 |         getCurrentState={() => state.name}
19 |         setNewState={stateName => {
20 |           setState(states.find(s => s.name === stateName));
21 |         }}
22 |         states={states}
23 |       />
24 |       {children(data, setData)}
25 |     </React.Fragment>
26 |   );
27 | };
28 | 
29 | ManagedStateMachine.propTypes = {
30 |   data: PropTypes.object.isRequired,
31 |   states: statePropTypes
32 | };
33 | 


--------------------------------------------------------------------------------
/src/StateMachine.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | 
  4 | export class StateMachine extends React.Component {
  5 |   constructor(props) {
  6 |     super(props);
  7 |     this.validateStateNames(props.states.map(state => state.name));
  8 |     this.transition('<no state>', this.props.getCurrentState());
  9 |     this.update();
 10 |   }
 11 | 
 12 |   validateStateNames(stateNames) {
 13 |       const names = stateNames.slice().sort();
 14 | 
 15 |       const duplicates = [];
 16 | 
 17 |       for (let i = 0; i < names.length - 1; i++) {
 18 |         if (names[i + 1] === names[i]) {
 19 |           duplicates.push(`\t${names[i]}`);
 20 |         }
 21 |       }
 22 | 
 23 |       if (duplicates.length > 0) {
 24 |         throw new Error(
 25 |           `State names must be unique. The following state names were duplicated: [${duplicates.join(", ")}]`
 26 |         )
 27 |       }
 28 |   }
 29 | 
 30 |   transition(oldState, newState) {
 31 |     const nextState = this.props.states.find(state => state.name === newState);
 32 |     if (!nextState) {
 33 |       const validStates = this.props.states.map(state => state.name).join(", ");
 34 |       throw new Error(
 35 |         `Tried to transition from state '${oldState}' to '${newState}'. Valid states are: [${validStates}]`
 36 |       );
 37 |     }
 38 | 
 39 |     this.props.setNewState(newState);
 40 | 
 41 |     if (nextState.beforeRender) {
 42 |       nextState.beforeRender({
 43 |         ...this.props.data,
 44 |         currentState: newState,
 45 |         transitionTo: this.createTransitionToFn(nextState),
 46 |       });
 47 |     }
 48 |   }
 49 | 
 50 |   update() {
 51 |     const { getCurrentState, states, data } = this.props;
 52 |     const currentStateName = getCurrentState();
 53 |     const currentState = states.find(state => state.name === currentStateName);
 54 | 
 55 |     if (Array.isArray(currentState.autoTransitions)) {
 56 |       for (const transition of currentState.autoTransitions) {
 57 |         if (transition.test(data)) {
 58 |           this.transition(currentStateName, transition.newState);
 59 |           return;
 60 |         }
 61 |       }
 62 |     }
 63 |   }
 64 | 
 65 |   componentDidUpdate() {
 66 |     this.update();
 67 |   }
 68 | 
 69 |   createTransitionToFn = currentState => newState => {
 70 |     if (!(currentState.validTransitions && currentState.validTransitions.includes(newState))) {
 71 |       throw new Error(
 72 |         `'${newState}' is not listed in transitions array for state ${currentState.name}`
 73 |       );
 74 |     }
 75 |     this.transition(currentState.name, newState);
 76 |   }
 77 | 
 78 |   render() {
 79 |     const currentStateName = this.props.getCurrentState();
 80 |     const currentState = this.props.states.find(
 81 |       state => state.name === currentStateName
 82 |     );
 83 | 
 84 |     const additionalProps = {
 85 |       ...this.props.data,
 86 |       currentState: currentStateName,
 87 |       transitionTo: this.createTransitionToFn(currentState),
 88 |     };
 89 | 
 90 |     if (currentState.render) return currentState.render(additionalProps);
 91 |     if (currentState.component) return React.createElement(currentState.component, additionalProps);
 92 | 
 93 |     throw new Error(
 94 |       `Neither a valid render or component property was found for state '${currentStateName}'`
 95 |     );
 96 |   }
 97 | }
 98 | 
 99 | const autoTransitionsPropTypes = PropTypes.arrayOf(
100 |   PropTypes.shape({
101 |     test: PropTypes.func.isRequired,
102 |     newState: PropTypes.string.isRequired
103 |   })
104 | );
105 | 
106 | export const statePropTypes = PropTypes.arrayOf(
107 |   PropTypes.shape({
108 |     name: PropTypes.string.isRequired,
109 |     autoTransitions: autoTransitionsPropTypes,
110 |     validTransitions: PropTypes.arrayOf(PropTypes.string),
111 | 
112 |     beforeRender: PropTypes.func,
113 |     component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
114 |     render: PropTypes.func
115 |   })
116 | ).isRequired;
117 | 
118 | StateMachine.propTypes = {
119 |   data: PropTypes.object.isRequired,
120 |   getCurrentState: PropTypes.func.isRequired,
121 |   setNewState: PropTypes.func.isRequired,
122 |   states: statePropTypes,
123 | };
124 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { ManagedStateMachine } from './ManagedStateMachine';
2 | export { StateMachine } from './StateMachine';


--------------------------------------------------------------------------------
/test/configure-tests.js:
--------------------------------------------------------------------------------
1 | import Adapter from 'enzyme-adapter-react-16';
2 | import {configure} from 'enzyme';
3 | 
4 | export default () => configure({ adapter: new Adapter() });


--------------------------------------------------------------------------------
/test/index.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { mount} from 'enzyme';
  3 | import {StateMachine} from '../src';
  4 | import {
  5 |   State1Component,
  6 |   State2Component,
  7 |   State3Component,
  8 | } from './mock-components';
  9 | import configureTests from './configure-tests';
 10 | 
 11 | const promisify = (fn, ctx = null) => (...args) => new Promise(resolve => {
 12 |   fn.apply(ctx, [...args, resolve]);
 13 | });
 14 | 
 15 | configureTests();
 16 | 
 17 | test('Render a valid state', () => {
 18 |   const data = {};
 19 |   const state = 'state-1';
 20 | 
 21 |   const states = [
 22 |     {
 23 |       name: 'state-1',
 24 |       component: State1Component
 25 |     }
 26 |   ];
 27 | 
 28 |   const stateMachine = mount(
 29 |     <StateMachine
 30 |       getCurrentState={() => state}
 31 |       setNewState={() => {}}
 32 |       data={data}
 33 |       states={states}
 34 |     />
 35 |   );
 36 |   expect(stateMachine.text()).toEqual('State 1');
 37 | });
 38 | 
 39 | test('Render a valid state (render prop)', () => {
 40 |   const data = {};
 41 |   const state = 'state-1';
 42 | 
 43 |   const states = [
 44 |     {
 45 |       name: 'state-1',
 46 |       render: ({currentState}) => <div>Hello, {currentState}</div>
 47 |     }
 48 |   ];
 49 | 
 50 |   const stateMachine = mount(
 51 |     <StateMachine
 52 |       getCurrentState={() => state}
 53 |       setNewState={() => {}}
 54 |       data={data}
 55 |       states={states}
 56 |     />
 57 |   );
 58 |   expect(stateMachine.text()).toEqual('Hello, state-1');
 59 | });
 60 | 
 61 | test('Should pass additional props to state component if they are present', () => {
 62 |   const state = 'state-1';
 63 | 
 64 |   const states = [
 65 |     {
 66 |       name: 'state-1',
 67 |       component: State1Component
 68 |     }
 69 |   ];
 70 | 
 71 |   const extraProps = {
 72 |     extraProp1: 'hello!'
 73 |   };
 74 | 
 75 |   const stateMachine = mount(
 76 |     <StateMachine
 77 |       getCurrentState={() => state}
 78 |       setNewState={() => {}}
 79 |       data={extraProps}
 80 |       states={states}
 81 |     />
 82 |   );
 83 | 
 84 |   const propNames = Object.keys(stateMachine.children().props());
 85 |   expect(propNames.includes('extraProp1')).toEqual(true);
 86 | });
 87 | 
 88 | test('Pass additional props to state render if they are present', () => {
 89 |   const state = 'state-1';
 90 | 
 91 |   const states = [
 92 |     {
 93 |       name: 'state-1',
 94 |       render: (props) => {
 95 |         return <State1Component {...props}/>
 96 |       }
 97 |     }
 98 |   ];
 99 | 
100 |   const extraProps = {
101 |     extraProp1: 'hello!'
102 |   };
103 | 
104 |   const stateMachine = mount(
105 |     <StateMachine
106 |       getCurrentState={() => state}
107 |       setNewState={() => {}}
108 |       data={extraProps}
109 |       states={states}
110 |     />
111 |   );
112 | 
113 |   const propNames = Object.keys(stateMachine.children().props());
114 |   expect(propNames.includes('extraProp1')).toEqual(true);
115 | });
116 | 
117 | test('Should run a state\'s beforeRender before it\'s rendered if one is present' , () => {
118 |   const data = {};
119 |   const state = 'state-1';
120 | 
121 |   let beforeRenderCalled;
122 |   let beforeRenderCalledFirst;
123 | 
124 |   const states = [
125 |     {
126 |       name: 'state-1',
127 |       beforeRender: () => {
128 |         beforeRenderCalled = true;
129 |       },
130 |       render: () => {
131 |         beforeRenderCalledFirst = !!beforeRenderCalled;
132 |         return <State1Component/>
133 |       }
134 |     }
135 |   ];
136 | 
137 |   const stateMachine = mount(
138 |     <StateMachine
139 |       getCurrentState={() => state}
140 |       setNewState={() => {}}
141 |       data={data}
142 |       states={states}
143 |     />
144 |   );
145 | 
146 |   expect(beforeRenderCalledFirst).toEqual(true);
147 | });
148 | 
149 | test('Throw on an invalid beforeRender', () => {
150 |   spyOn(console, 'error');
151 |   const data = {};
152 |   const state = 'state-1';
153 | 
154 |   const states = [
155 |     {
156 |       name: 'state-1',
157 |       beforeRender: /regex/,
158 |       component: State1Component
159 |     }
160 |   ];
161 | 
162 |   expect(() => {
163 |     mount(
164 |       <StateMachine
165 |         getCurrentState={() => state}
166 |         setNewState={() => {}}
167 |         data={data}
168 |         states={states}
169 |       />
170 |     );
171 |   }).toThrow();
172 | });
173 | 
174 | test('Pass rendered components a transitionTo function and currentState name', () => {
175 |   const data = {};
176 |   const state = 'state-1';
177 | 
178 |   const states = [
179 |     {
180 |       name: 'state-1',
181 |       component: State1Component
182 |     }
183 |   ];
184 | 
185 |   const stateMachine = mount(
186 |     <StateMachine
187 |       getCurrentState={() => state}
188 |       setNewState={() => {}}
189 |       data={data}
190 |       states={states}
191 |     />
192 |   );
193 | 
194 |   const childProps = stateMachine.children().props();
195 |   expect(Boolean(childProps.transitionTo)).toEqual(true);
196 |   expect(typeof childProps.transitionTo).toEqual('function');
197 |   expect(Boolean(childProps.currentState)).toEqual(true);
198 |   expect(childProps.currentState).toEqual(state);
199 | });
200 | 
201 | test('Throw on an invalid state', () => {
202 |   spyOn(console, 'error');
203 |   const data = {};
204 |   const state = 'state-2';
205 | 
206 |   const states = [
207 |     {
208 |       name: 'state-1',
209 |       component: State1Component
210 |     }
211 |   ];
212 | 
213 |   expect(() => {
214 |     mount(
215 |       <StateMachine
216 |         getCurrentState={() => state}
217 |         setNewState={() => {}}
218 |         data={data}
219 |         states={states}
220 |       />
221 |     );
222 |   }).toThrow();
223 | });
224 | 
225 | test('Transition from one state to another', async () => {
226 |   const data = { a: 1 };
227 |   let state = 'state-1';
228 | 
229 |   const states = [
230 |     {
231 |       name: 'state-1',
232 |       // beforeRender: ({a}) => {
233 |       //   if 
234 |       // },
235 |       autoTransitions: [
236 |         {
237 |           test: ({a}) => a === 2,
238 |           newState: 'state-2'
239 |         }
240 |       ],
241 |       component: State1Component
242 |     },
243 |     {
244 |       name: 'state-2',
245 |       component: State2Component
246 |     }
247 |   ];
248 | 
249 |   const getCurrentState = () => state;
250 |   const setNewState = newState => state = newState;
251 | 
252 |   let stateMachine = mount(
253 |     <StateMachine
254 |       getCurrentState={getCurrentState}
255 |       setNewState={setNewState}
256 |       data={data}
257 |       states={states}
258 |     />
259 |   );
260 | 
261 |   expect(stateMachine.text()).toEqual('State 1');
262 | 
263 |   const setProps = promisify(stateMachine.setProps, stateMachine);
264 | 
265 |   // First new props cause a call to setNewState()
266 |   await setProps({
267 |     getCurrentState,
268 |     setNewState,
269 |     data: {...data, a: 2},
270 |     states,
271 |   });
272 | 
273 |   // Second set props forces another render in tests
274 |   await setProps({
275 |     getCurrentState,
276 |     setNewState,
277 |     data: {a: 2},
278 |     states,
279 |   });
280 | 
281 |   expect(stateMachine.text()).toEqual('State 2');
282 | });
283 | 
284 | test('Throw when transitioning from one state to an invalid one', async () => {
285 |   spyOn(console, 'error');
286 |   const data = { a: 1 };
287 |   let state = 'state-1';
288 | 
289 |   const states = [
290 |     {
291 |       name: 'state-1',
292 |       autoTransitions: [
293 |         {
294 |           test: ({a}) => a === 2,
295 |           newState: 'state-3'
296 |         }
297 |       ],
298 |       component: State1Component
299 |     },
300 |     {
301 |       name: 'state-2',
302 |       component: State2Component
303 |     }
304 |   ];
305 | 
306 |   const getCurrentState = () => state;
307 |   const setNewState = newState => state = newState;
308 | 
309 |   let stateMachine = mount(
310 |     <StateMachine
311 |       getCurrentState={getCurrentState}
312 |       setNewState={setNewState}
313 |       data={data}
314 |       states={states}
315 |     />
316 |   );
317 | 
318 |   expect(stateMachine.text()).toEqual('State 1');
319 | 
320 |   expect(() => {
321 |     stateMachine.setProps({
322 |       getCurrentState,
323 |       setNewState,
324 |       data: {a: 2},
325 |       states,
326 |     })
327 |   }).toThrow();
328 | });
329 | 
330 | test('Transition from one state to another when presented with multiple options', async () => {
331 |   const data = { a: 1, b: 1 };
332 |   let state = 'state-1';
333 | 
334 |   const states = [
335 |     {
336 |       name: 'state-1',
337 |       autoTransitions: [
338 |         {
339 |           test: ({a}) => a === 2,
340 |           newState: 'state-2'
341 |         },
342 |         {
343 |           test: ({b}) => b === 2,
344 |           newState: 'state-3'
345 |         }
346 |       ],
347 |       component: State1Component
348 |     },
349 |     {
350 |       name: 'state-2',
351 |       component: State2Component
352 |     },
353 |     {
354 |       name: 'state-3',
355 |       component: State3Component
356 |     }
357 |   ];
358 | 
359 |   const getCurrentState = () => state;
360 |   const setNewState = newState => state = newState;
361 | 
362 |   let stateMachine = mount(
363 |     <StateMachine
364 |       getCurrentState={getCurrentState}
365 |       setNewState={setNewState}
366 |       data={data}
367 |       states={states}
368 |     />
369 |   );
370 | 
371 |   expect(stateMachine.text()).toEqual('State 1');
372 | 
373 |   const setProps = promisify(stateMachine.setProps, stateMachine);
374 | 
375 |   // First new props cause a call to setNewState()
376 |   await setProps({
377 |     getCurrentState,
378 |     setNewState,
379 |     data: {...data, b: 2},
380 |     states,
381 |   });
382 | 
383 |   // Second set props forces another render in tests
384 |   await setProps({
385 |     getCurrentState,
386 |     setNewState,
387 |     data: {b: 2},
388 |     states,
389 |   });
390 | 
391 |   expect(stateMachine.text()).toEqual('State 3');
392 | });
393 | 
394 | test('Transition to a valid state when calling transitionTo', async () => {
395 |   const data = { a: 1, b: 1 };
396 |   let state = 'state-1';
397 | 
398 |   const states = [
399 |     {
400 |       name: 'state-1',
401 |       validTransitions: ['state-2'],
402 |       component: State1Component
403 |     },
404 |     {
405 |       name: 'state-2',
406 |       component: State2Component
407 |     }
408 |   ];
409 | 
410 |   const getCurrentState = () => state;
411 |   const setNewState = newState => state = newState;
412 | 
413 |   let stateMachine = mount(
414 |     <StateMachine
415 |       getCurrentState={getCurrentState}
416 |       setNewState={setNewState}
417 |       data={data}
418 |       states={states}
419 |     />
420 |   );
421 | 
422 |   expect(stateMachine.text()).toEqual('State 1');
423 | 
424 |   const transitionToFn = stateMachine.children().props().transitionTo;
425 |   transitionToFn('state-2');
426 | 
427 |   // Call set props to trigger an update
428 |   const setProps = promisify(stateMachine.setProps, stateMachine);
429 |   await setProps({
430 |     getCurrentState,
431 |     setNewState,
432 |     data: data,
433 |     states,
434 |   });
435 | 
436 |   expect(stateMachine.text()).toEqual('State 2');
437 | });
438 | 
439 | test('Throw an error when calling transitionTo with an invalid new state', async () => {
440 |   const data = { a: 1, b: 1 };
441 |   let state = 'state-1';
442 | 
443 |   const states = [
444 |     {
445 |       name: 'state-1',
446 |       validTransitions: ['state-2'],
447 |       component: State1Component
448 |     },
449 |     {
450 |       name: 'state-2',
451 |       component: State2Component
452 |     },
453 |     {
454 |       name: 'state-3',
455 |       component: State2Component
456 |     }
457 |   ];
458 | 
459 |   const getCurrentState = () => state;
460 |   const setNewState = newState => state = newState;
461 | 
462 |   let stateMachine = mount(
463 |     <StateMachine
464 |       getCurrentState={getCurrentState}
465 |       setNewState={setNewState}
466 |       data={data}
467 |       states={states}
468 |     />
469 |   );
470 | 
471 |   expect(stateMachine.text()).toEqual('State 1');
472 | 
473 |   const transitionToFn = stateMachine.children().props().transitionTo;
474 |   expect(() => transitionToFn('state-3')).toThrow();
475 | });
476 | 
477 | test('Throw on an invalid render prop', () => {
478 |   spyOn(console, 'error');
479 |   const data = {};
480 |   const state = 'state-2';
481 | 
482 |   const states = [
483 |     {
484 |       name: 'state-1',
485 |       render: /NotAComponent/
486 |     }
487 |   ];
488 | 
489 |   expect(() => {
490 |     mount(
491 |       <StateMachine
492 |         getCurrentState={() => state}
493 |         setNewState={() => {}}
494 |         data={data}
495 |         states={states}
496 |       />
497 |     );
498 |   }).toThrow();
499 | });
500 | 
501 | test('Throw on an invalid component', () => {
502 |   spyOn(console, 'error');
503 |   const data = {};
504 |   const state = 'state-2';
505 | 
506 |   const states = [
507 |     {
508 |       name: 'state-1',
509 |       component: /NotAComponent/
510 |     }
511 |   ];
512 | 
513 |   expect(() => {
514 |     mount(
515 |       <StateMachine
516 |         getCurrentState={() => state}
517 |         setNewState={() => {}}
518 |         data={data}
519 |         states={states}
520 |       />
521 |     );
522 |   }).toThrow();
523 | });
524 | 
525 | test('Throw when niether a render nor a component is provided', () => {
526 |   spyOn(console, 'error');
527 |   const data = {};
528 |   const state = 'state-1';
529 | 
530 |   const states = [
531 |     {
532 |       name: 'state-1',
533 |     }
534 |   ];
535 | 
536 |   expect(() => {
537 |     mount(
538 |       <StateMachine
539 |         getCurrentState={() => state}
540 |         setNewState={() => {}}
541 |         data={data}
542 |         states={states}
543 |       />
544 |     );
545 |   }).toThrow();
546 | });


--------------------------------------------------------------------------------
/test/mock-components.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | export const State1Component = () => <div>State 1</div>;
4 | export const State2Component = () => <div>State 2</div>;
5 | export const State3Component = () => <div>State 3</div>;
6 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const HtmlWebpackPlugin = require("html-webpack-plugin");
 3 | 
 4 | module.exports = {
 5 |   entry: path.join(__dirname, "src/docs"),
 6 |   output: {
 7 |     path: path.join(__dirname, "docs"),
 8 |     filename: "bundle.js"
 9 |   },
10 |   module: {
11 |     rules: [
12 |       {
13 |         test: /\.(js|jsx)$/,
14 |         use: "babel-loader",
15 |         exclude: /node_modules/
16 |       },
17 |       {
18 |         test: /\.css$/,
19 |         use: ["style-loader", "css-loader"]
20 |       }
21 |     ]
22 |   },
23 |   plugins: [
24 |     new HtmlWebpackPlugin({
25 |       template: path.join(__dirname, "src/docs/index.html")
26 |     })
27 |   ],
28 |   resolve: {
29 |     extensions: [".js", ".jsx"]
30 |   },
31 |   devServer: {
32 |     contentBase: path.join(__dirname, "docs"),
33 |     port: 8000,
34 |     stats: "minimal"
35 |   }
36 | };
37 | 


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