DrBoolean

// Simple example, but the idea holds for more complex objects.


/* 1) Start with OO */

// user.js
class User {
  constructor(firstName, lastName, email) {
    this.firstName = firstName
    this.lastName = lastName

DrBoolean

const compose = (f, g) => x => f(g(x))

const Id = x =>
({
  fold: f => f(x),
  map: f => Id(f(x))
})
Id.of = Id

const Tuple = (_1, _2) =>

DrBoolean

// build the empty ui data structure
const empty = from(x => x)

// a function that returns a complete component instead of a map that loops through all
const ui = Reader(to(empty)).map(loadComponent).map(addExample).map(beautifyHtml).map(addSelectorTable)

// run the function for a component
ui.run(‘buttons’) // {name: ‘Button’, example: ReactElement}

DrBoolean

const Reader = f =>
({
 run: f,
 map: g => Reader(x => g(f(x))),
 chain: g => Reader(x => g(f(x)).run(x))
})

Reader.of = x => Reader(() => x)

// function application

DrBoolean

// create an empty ui
const empty = from(x => x)

// make a function to get the loaded up component
const ui = to(empty).map(loadComponent).map(addExample).map(beautifyHtml).map(addSelectorTable)

// run the function on the index we want
ui(‘buttons’) // {name: ‘Button’, example: ReactElement}

DrBoolean

// create empty ui
const empty = Components.reduce((acc, key) => acc.set(key, key), Immutable.Map())

// load every component with every example and data filled in
const ui = empty.map(loadComponent).map(addExample).map(beautifyHtml).map(addSelectorTable)

// get the componet we want for the page
ui.get(‘buttons’) // {name: ‘Button’, example: ReactElement}

DrBoolean

const Components = [‘alert’, ‘buttons’, ‘data-tables’, /* …etc */]

// from :: (Component -> a) -> UI
const from = f =>
 Components.reduce((ui, key) => ui.set(key, f(key)), Immutable.Map())

// to :: UI -> (Component -> a)
const to = structure =>
 key => structure.get(key)

DrBoolean

const Pair = (x, y) =>
({
 _0: x,
 _1: y,
 map: f => Pair(x, f(y))
})

// to :: Pair a -> (Bool -> a)
const to = ({_0, _1}) =>
 bool => bool ? _0 : _1

DrBoolean

const Id = x =>
({
 x,
 map: f => Id(f(x))
})

// to :: Id a -> (() -> a)
const to = ({x}) => () => x

// from :: (() -> a) -> Id a

DrBoolean

const UI = {
 ‘alerts’: undefined,
 ‘buttons’:{/* lots of stuff */},
 ‘data-tables’: undefined
}