hnordt

let widgetSettingsMachine = Machine({
  id: 'widgetSettings',
  context: {},
  type: "parallel",
  states: {
    general: {
      on: {
        CHANGE_NAME: {
          actions: "updateName"
        },

hnordt

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

hnordt

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

hnordt

  const fetchMachine = Machine({
    id: "approvals",
    context: {
      page: 0,
      results: [],
      selectedIds: {},
      error: null
    },
    type: "parallel",
    states: {

hnordt

let approvalsMachine = Machine(
  {
    id: "approvals",
    context: {
      dateStart: "",
      dateEnd: "",
      page: 0,
      results: [],
      items: {},
      error: null

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;