functional-tag-generator.js

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data) // right to left

const pipe = (...functions) => data =>
  functions.reduce((value, func) => func(value), data) // left to right

const encodeAttribute = (x = '') => x.replace(/"/g, '"')
const toAttributeString = (x = {}) =>
  Object.keys(x)
    .map(attr => `${encodeAttribute(attr)}="${encodeAttribute(x[attr])}"`)
    .join(' ')

const tagAttributes = x => (c = '') =>
  `<${x.tag}${x.attr ? ' ' : ''}${toAttributeString(x.attr)}>${c}</${x.tag}>`

const tag = x =>
  typeof x === 'string' ? tagAttributes({ tag: x }) : tagAttributes(x)

const listGroupTag = tag({ tag: 'ul', attr: { class: 'list-group' } })
const listGroupItem = tag({ tag: 'li', attr: { class: 'list-group-item' } })
const listGroupItems = items => items.map(listGroupItem).join('')

// const listGroup = items => listGroupTag(listGroupItems(items)) // compose pattern
// const listGroup = items => compose(listGroupTag, listGroupItems)(items) // items can be ignored
const listGroup = compose(listGroupTag, listGroupItems)

const panelTag = tag({ tag: 'div', attr: { class: 'panel panel-default' } })
const panelBody = tag({ tag: 'div', attr: { class: 'panel-body' } })
const basicPanel = compose(panelTag, panelBody)

const listGroupPanel = compose(basicPanel, listGroup)
// const listGroupPanel = compose(basicPanel, listGroupTag, listGroupItems) // equivelant above