User Flows

• allows users to manage, create and view user flows for the app
• user flows are stored as mermaidjs flowcharts under headings for each flow

Background

• https://www.figma.com/resource-library/user-flow/

User Flow Editor

• uses @thallus/forms to generate json-schema form from

  {
    "type": "object",
    "properties": {
      "users": {
        "type": "array",
        "title": "Persona(s)",
        "items": {
          "type": "string",
          oneOf: [
            {
              "const": "<persona file name>",
              "title": "<persona name>"
            } /* Generated from persona files */
          ]
        }
      },
      "flow": { "$ref": "#/$defs/flow" }
    },
    "required": ["users", "flows"],
    "$defs": {
      "flow": {
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "type": {
              "type": "string",
              "title": "Step Type",
              "enum": [
                "userAction",
                "appAction",
                "decision"
              "
            }
          },
          "oneOf": [
            { "$ref": "#/$defs/userAction" },
            { "$ref": "#/$defs/appAction" },
            { "$ref": "#/$defs/decision" }
          ]
        }
      },
      "userAction": {
        "type": "object",
        "properties": {
          "type": {
            "type": "string",
            "const": "userAction"
          },
          "label": {
            "type": "string",
            "title": "Label"
          }
        },
        "required": [ "type", "label" ]
      },
      "appAction": {
        "type": "object",
        "properties": {
          "type": {
            "type": "string",
            "const": "appAction"
          },
          "label": {
            "type": "string",
            "title": "Label"
          }
        },
        "required": [ "type", "label" ]
      },
      "decision": {
        "type": "object",
        "properties": {
          "type": {
            "type": "string",
            "const": "decision"
          },
          "label": {
            "type": "string",
            "title": "Label"
          },
          "decision": {
            "type": "array",
            "title": "Decisions",
            "items" {
              "type": "object",
              "properties": {
                "label": {
                  "type": "string",
                  "title": "label"
                },
                "flow": { "$ref": "#/$defs/flow" }
              },
              "required": [ "label", "flow" ]
            }
          }
        },
        "required": [ "type", "label", "decision" ]
      }
    }
  }