antonjb

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

antonjb

// Idle
//    after 30 seconds check status
// if in timezone && status promise resolves
// state => live
// live State
// after 30 seconds check status
// substate state == stop && outside timezone => state: idle
// substate state == play && fetch response reject => state: closing
// neither conditions pass => no op. check again in 30 seconds
//    substates

antonjb

export const ContentBox = createRegisterableComponent(
  "content-box",
  (props: { content: string }, services) => (
    <div>
      <p>{props.content}</p>
      {services.featureState.showSpecial && (
        <div>Special content item - enabled with feature toggle service</div>
      )}
    </div>
  )

antonjb

<Layout.CompositionsRenderer
  services={{ featureState: { showSpecial: true } }}
  compositions={[definition]}
/>

antonjb

const definition = Layout.composition({
  type: "site-composition",
  props: {},
  contentAreas: {
    header: [
      {
        type: "site-header",
        props: {
          title: "Main title"
        }

antonjb

const Layout = new LayoutRegistration<LayoutServices>()
  .registerComponents(registrar =>
    registrar
      .registerComponent(SiteHeader)
      .registerComponent(ContentBox)
  )
  .registerCompositions(registrar =>
    registrar
      .registerComposition(SiteComposition)
      .registerComposition(SplitComposition)

antonjb

export const SiteComposition = createRegisterableComposition<
  "header" | "content"
>()("site-composition", contentAreas => (
  <div>
    <header>{contentAreas.header}</header>
    <main>{contentAreas.content}</main>
  </div>
));

antonjb

import {
  getRegistrationCreators,
  LayoutRegistration
} from "json-react-layouts";

const {
  createRegisterableComponent,
  createRegisterableComposition
} = getRegistrationCreators<LayoutServices>();

antonjb

interface LayoutServices {
  featureState: { showSpecial: boolean };
}

antonjb

export const SiteHeader = createRegisterableComponent(
  "site-header",
  (props: { title: string }, services) => (
    <header>
      <h1>{props.title}</h1>
    </header>
  )
);