crapkit / flowcards

a tool to describe behaviour - flow by flow.

flowcards

a tool to enable behaviour - flow by flow.

You can compare flowcards to XState.
They both enable ways to describe & model reactive systems.
Use them for well defined state-transitions, and free yourself from switch-case reducers.
App(state) => UI becomes App(flowcards(scenarios)) => UI

The idea behind user-flows is to provide an inter-object description of a reactive system.
Instead of describing the full reactivity of each component object by object (like XState),
we can define a system by the scenarios we want to enable flow by flow.
To enable behaviour - flow by flow - is what flowcards is all about.

👉 This guide & sample application will introduce you to the idea.

flowcards is based on behavioral programming principles.
Luca Matteis wrote about it here. I can also recommend this talk.

Packages

• 🌀 @flowcards/core - core library (typed, tested & dependency-free)
• ⚛️ @flowcards/react - React hooks (core included)
• ✴️ @flowcards/svelte - Svelte store (core included)

Quick Start

• core codesandbox
• react codesandbox (TodoMVC app)
• svelte codesandbox

npm install @flowcards/core

import { scenarios, request, wait } from "@flowcards/core";

const delayed = (data: any, ms: number) => new Promise(r => setTimeout(() => r(data), ms));
const delayedMessage = () => delayed("taking a look at flowcards", 3000);

function* sender() {
  yield request("eventOne", "thank you for ..."); // request
  yield [request("eventTwo", delayedMessage), wait("cancel")];
}

function* receiver() {
  let messageOne = yield wait("eventOne"); // wait for event
  console.log(messageOne);
  let [type, messageTwo] = yield [wait("eventTwo"), wait("cancel")];
  if (type === "eventTwo") {
    console.log(messageTwo);
  } else {
    console.log("async call has been cancelled");
  }
}

scenarios(
  enable => {
    enable(sender);
    enable(receiver);
  },
  ({ dispatch }) => {
    const btn = <HTMLInputElement>document.getElementById("cancelBtn");
    if(!btn) return;
    if (dispatch.cancel) {
      btn.onclick = dispatch.cancel();
    } else {
      btn.disabled = true;
    }
  }
);