sample.ts

import { HKT, Kind, Kind2, URIS, URIS2 } from "fp-ts/lib/HKT";
import * as IO from "fp-ts/lib/IO";
import * as TR from "fp-ts/lib/Tree";
import { pipe } from "fp-ts/lib/function";
import * as O from "fp-ts/lib/Option";
import { Lens } from "monocle-ts";

type MarsElementProps = {
  disabled: false;
  hidden: false;
  label: O.Option<string>;
  format: O.Option<string>;
};

type MarsElement = TR.Tree<MarsElementProps>;
type MarsComponent<A> = (model: A) => MarsElement;

interface MarsElementBuilder {
  // controls
  readonly string: MarsComponent<string>;
  readonly number: MarsComponent<number>;
  readonly boolean: MarsComponent<boolean>;
  readonly button: MarsComponent<IO.IO<void>>;

  // containers
  readonly section: <A>(
    controls: Record<string, MarsComponent<A>>
  ) => MarsComponent<A>;
  readonly grid: <A>(
    controls: Record<string, MarsComponent<A>>
  ) => MarsComponent<A[]>;

  // attributes
  readonly labeled: <A>(
    label: TemplateStringsArray,
    ...values: any[]
  ) => (el: MarsComponent<A>) => MarsComponent<A>;
  readonly enabled: <A>(el: MarsComponent<A>) => MarsComponent<A>;
  readonly contramap: <A, B>(
    f: (a: A) => B
  ) => (el: MarsComponent<B>) => MarsComponent<A>;
  focus<B>(): <K extends keyof B>(key: K) => (el: MarsComponent<B[K]>) => MarsComponent<B>;
}

declare const _: MarsElementBuilder;

interface DocumentRow {
  article_id: string;
  qty: number;
}

interface Document {
  customer_id: number;
  payment_method_id: number;

  rows: DocumentRow[];
}

declare const model: Document;

function render(model: Document) {
  const customer_id = pipe(
    _.number,
    _.focus<Document>()("customer_id"),
    _.labeled`Cliente`
  );
  const payment_method_id = pipe(
    _.number,
    _.labeled`Metodo di pagamento`,
    _.focus<Document>()("payment_method_id")
  );

  const article_id = pipe(
    _.string,
    _.labeled`Articolo`,
    _.focus<DocumentRow>()("article_id")
  );
  const qty = pipe(
    _.number,
    _.labeled`Quantità`,
    _.focus<DocumentRow>()("qty")
  );

  const rows = pipe(
    _.grid({
      article_id,
      qty,
    }),
    _.focus<Document>()("rows")
  );

  return _.section({
    header: _.section({
      customer_id,
      payment_method_id,
    }),
    rows,
  });
}