hnordt

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

hnordt

function Col({
  as = "div",
  justifyContent,
  alignItems,
  flex,
  children
}) {
  return createElement(as, {
    className: css({
      display: "flex",

hnordt

function Spacer({ size }) {
  return (
    <span
      className={css({
        display: "block",
        width: `var(--spacing-${size})`,
        height: `var(--spacing-${size})`
      })}
      aria-hidden
    />

hnordt

// Good

let { parameters, customParameters } = connection;

let firstName = customParameters.get("FirstName");
let lastName = customParameters.get("LastName");

// Lets say we now need to pass eventId.
// One could easily add it inside caller as it
// already has multiple props, and things are a bit

hnordt

// This code handles complexity higher in the tree.
//
// It makes higher-level components more complicated, but the whole
// rendering logic is contained in a single place, which might
// help long-term maintenance.

function Call() {
  let { state, send } = useContext(TelecomContext);

  let { caller } = state.context;

hnordt

// Copy and paste into https://statecharts.github.io/xstate-viz/

const paginationMachine = Machine(
  {
    id: "pagination",
    initial: "idle",
    states: {
      idle: {},
      debouncing: {
        onEntry: ["setParams", "resetPage", "resetResults"],

hnordt

import { useGlobalCSS } from "./useCSS";

const App = () => {
  useGlobalCSS({
    "*": {
      boxSizing: "border-box",
      margin: 0,
      padding: 0
    },
    ul: {

hnordt

// To see the diagram copy this code and paste in https://statecharts.github.io/xstate-viz/

const lazyPromiseMachine = Machine({
  id: "lazyPromise",
  initial: "idle",
  context: {
    exec: () => Promise.resolve()
  },
  states: {
    idle: {

hnordt

// You can preview it on https://statecharts.github.io/xstate-viz/

const formMachine = Machine({
  id: "form",
  context: {
    initialValues: {},
    values: {},
    touched: {},
    errors: {},
    submitCount: 0,

hnordt

My Awesome Sketch
  First State
    some event -> Second State
  Second State