docs(website): add charts guide

Author: christianalfoni

packages/overmind-website/examples/guide/statecharts/actions.ts

@@ -0,0 +1,79 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/login/actions.ts',
+          code: `
+import { Action, AsyncAction } from 'overmind'
+import { User } from './state'
+
+export const changeUsername: Action<string> = ({ state }, username) => {
+  state.login.username = username
+}
+
+export const changePassword: Action<string> = ({ state }, password) => {
+  state.login.password = password
+}
+
+export const login: AsyncAction = ({ state, actions, effects }) => {
+  try {
+    const user = await effects.api.login(state.username, state.password)
+    actions.login.resolveUser(user)
+  } catch (error) {
+    actions.login.rejectUser(error)
+  }
+}
+
+export const resolveUser: Action<User> = ({ state }, user) => {
+  state.login.user = user
+}
+
+export const rejectUser: Action<Error> = ({ state }, error) => {
+  state.login.authenticationError = error.message
+}
+
+export const logout: Action = ({ effects }) => {
+  effects.api.logout()
+}
+
+export const tryAgain: Action = () => {}
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/login/actions.ts',
+          code: `
+export const changeUsername = ({ state }, username) => {
+  state.login.username = username
+}
+
+export const changePassword = ({ state }, password) => {
+  state.login.password = password
+}
+
+export const login = ({ state, actions, effects }) => {
+  try {
+    const user = await effects.api.login(state.username, state.password)
+    actions.login.resolveUser(user)
+  } catch (error) {
+    actions.login.rejectUser(error)
+  }
+}
+
+export const resolveUser = ({ state }, user) => {
+  state.login.user = user
+}
+
+export const rejectUser = ({ state }, error) => {
+  state.login.authenticationError = error.message
+}
+
+export const logout = ({ effects }) => {
+  effects.api.logout()
+}
+
+export const tryAgain = () => {}
+`,
+        },
+      ]

packages/overmind-website/examples/guide/statecharts/condition.ts

@@ -0,0 +1,77 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/login/index.ts',
+          code: `
+import { Statechart, statechart } from 'overmind/config'
+import * as actions from './actions'
+import { state } from './state'
+
+const config = {
+  state,
+  actions
+}
+
+enum LoginState {
+  LOGIN = 'LOGIN',
+  AUTHENTICATING = 'AUTHENTICATING',
+  AUTHENTICATED = 'AUTHENTICATED',
+  ERROR = 'ERROR'
+}
+
+const loginChart: Statechart<typeof config, LoginState> = {
+  initial: LoginState.LOGIN,
+  states: {
+    [LoginState.LOGIN]: {
+      on: {
+        changeUsername: null,
+        changePassword: null,
+        login: {
+          target: LoginState.AUTHENTICATING,
+          condition: state => Boolean(state.username && state.password)
+        }
+      }
+    },
+    ...
+  }
+}
+
+export default statechart(config, loginChart)
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/login/index.ts',
+          code: `
+import { statechart } from 'overmind/config'
+import * as actions from './actions'
+import { state } from './state'
+
+const config = {
+  state,
+  actions
+}
+
+const loginChart = {
+  initial: 'LOGIN',
+  states: {
+    LOGIN: {
+      on: {
+        changeUsername: null,
+        changePassword: null,
+        login: {
+          target: 'AUTHENTICATING',
+          condition: state => Boolean(state.username && state.password)
+        }
+      }
+    },
+    ...
+  }
+}
+
+export default statechart(config, loginChart)
+`,
+        },
+      ]

packages/overmind-website/examples/guide/statecharts/define.ts

@@ -0,0 +1,101 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'overmind/login/index.ts',
+          code: `
+import { Statechart, statechart } from 'overmind/config'
+import * as actions from './actions'
+import { state } from './state'
+
+const config = {
+  state,
+  actions
+}
+
+enum LoginState {
+  LOGIN = 'LOGIN',
+  AUTHENTICATING = 'AUTHENTICATING',
+  AUTHENTICATED = 'AUTHENTICATED',
+  ERROR = 'ERROR'
+}
+
+const loginChart: Statechart<typeof config, LoginState> = {
+  initial: LoginState.LOGIN,
+  states: {
+    [LoginState.LOGIN]: {
+      on: {
+        changeUsername: null,
+        changePassword: null,
+        login: LoginState.AUTHENTICATING
+      }
+    },
+    [LoginState.AUTHENTICATING]: {
+      on: {
+        resolveUser: LoginState.AUTHENTICATED,
+        rejectUser: LoginState.ERROR
+      }
+    },
+    [LoginState.AUTHENTICATED]: {
+      on: {
+        logout: LoginState.LOGIN
+      }
+    },
+    [LoginState.ERROR]: {
+      on: {
+        tryAgain: LoginState.LOGIN
+      }
+    }
+  }
+}
+
+export default statechart(config, loginChart)
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'overmind/login/index.ts',
+          code: `
+import { statechart } from 'overmind/config'
+import * as actions from './actions'
+import { state } from './state'
+
+const config = {
+  state,
+  actions
+}
+
+const loginChart = {
+  initial: 'LOGIN',
+  states: {
+    LOGIN: {
+      on: {
+        changeUsername: null,
+        changePassword: null,
+        login: 'AUTHENTICATING'
+      }
+    },
+    AUTHENTICATING: {
+      on: {
+        resolveUser: 'AUTHENTICATED',
+        rejectUser: 'ERROR'
+      }
+    },
+    AUTHENTICATED: {
+      on: {
+        logout: 'LOGIN'
+      }
+    },
+    ERROR: {
+      on: {
+        tryAgain: 'LOGIN'
+      }
+    }
+  }
+}
+
+export default statechart(config, loginChart)
+`,
+        },
+      ]

packages/overmind-website/examples/guide/statecharts/matches.ts

@@ -0,0 +1,16 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          code: `
+state.login.matches(LoginState.Login)
+`,
+        },
+      ]
+    : [
+        {
+          code: `
+state.login.matches('LOGIN')
+`,
+        },
+      ]