override func construct(state: ApprovalRequestState?, size: CGSize) -> NodeType {
        guard let state = state else {
            return NilNode()
        }
        
        let spacing: CGFloat = 16
        
        let container = Node<UIView>(identifier: "container") { view, layout, size in
            view.backgroundColor = .lightGray
            
            let margin: CGFloat = 8
            layout.marginTop = margin
            layout.marginLeft = margin
            layout.marginRight = margin
            //layout.padding = spacing
            //layout.paddingVertical = spacing
            layout.width = size.width - (2 * margin)
            layout.flexDirection = .column
        }
        
        let innerContainer = Node<UIView>(identifier: "innerContainer") { view, layout, size in
            layout.width = size.width - (2 * spacing)
            layout.margin = spacing
            layout.flexDirection = .column
        }
        
        let icon = Node<UIImageView>(identifier: "requestIcon") { view, layout, _ in
            view.backgroundColor = .blue
            view.layer.cornerRadius = 30
            view.layer.masksToBounds = true
            
            layout.width = 60
            layout.height = 60
        }
        
        let title = Node<UILabel>(identifier: "title") { (view, layout, size) in
            view.text = "Přílič žluťoučký kůň úpěl ďábelské ódy." //state.title
            view.numberOfLines = 0
            view.lineBreakMode = .byWordWrapping
            view.font = UIFont.boldSystemFont(ofSize: 24)
            
        }
        
        let subtitle = Node<UILabel>(identifier: "subtitle") { view, layout, size in
            view.text = "Dalsi" //state.id
            view.textColor = .darkGray
            view.font = UIFont.systemFont(ofSize: 17)
        }
        
        let amount = Node<UILabel>(identifier: "amount") { view, layout, size in
            view.text = "150 000 USD"
            view.font = UIFont.boldSystemFont(ofSize: 28)
            view.textAlignment = .right
            view.clipsToBounds = true
            
            layout.height = 100
        }
        
        innerContainer.add(children: [
            Node<UIView>(identifier: "titleRow") { _, layout, _ in
                layout.flexDirection = .row
                layout.alignItems = .center
                layout.alignContent = .center
            }.add(children: [
                icon,
                Node<UIView>(identifier: "titlesColumn") { _, layout, _ in
                    layout.flexDirection = .column
                    layout.marginLeft = spacing
                }.add(children: [
                    title,
                    subtitle,
                ]),
            ]),
            Node<UIView>(identifier: "amountRow") { _, layout, _ in
                layout.flexDirection = .column
                //layout.justifyContent = .flexEnd
                //layout.alignItems = .flexEnd
                layout.marginTop = spacing
                //layout.marginBottom = spacing
            }.add(children: [
                amount,
            ]),
        ])
        
        return container.add(child: innerContainer)
    }

  public var state: C.StateType? {
    didSet {
      self.componentView?.state = state
    }
  }

open class ComponentCollectionViewCell<C : ComponentViewType>: UICollectionViewCell {

  public var state: C.StateType? // did not set the state of the wrapper to the actual ComponentView

import PlaygroundSupport

import Render

PlaygroundPage.current.needsIndefiniteExecution = true

struct AppState: StateType {
    var isOn = false
}

class MyView: ComponentView<AppState> {
    override func construct(state: AppState?, size: CGSize) -> NodeType {
        
        let bar = Node<UILabel>() { label, layout, size in
            label.text = "bar"
            
        }
        
        return Node<UIView> { (view, layout, size) in
            
        }
            .add(children: [
                Node<UILabel>() { label, layout, size in
                    label.text = "foo"
                },
                state!.isOn ? bar as NodeType : NilNode()
            ])
    }
}

let container = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 568))
container.backgroundColor = .white

let view = MyView()
view.state = AppState()
view.render(in: container.frame.size)

container.addSubview(view)

view.state?.isOn = true
view.render(in: container.frame.size)

PlaygroundPage.current.liveView = container

        card.render(in: view.bounds.size, options: [
            .animated(duration: 1, options: [.curveEaseInOut]) {
                self.card.center = self.view.center
            }
            ])

         let titlebar = Node<UIView> { (view, layout, size) in
                view.backgroundColor = .green
                layout.width = size.width
                layout.aspectRatio = TitleBarSize.InverseProportion
                layout.position = .absolute
                layout.bottom = 0
                layout.alignContent = .center
        }

            let title = Node<UILabel>() { (view, layout, size) in
                view.text = state?.title
                view.numberOfLines = 1
                view.font = Label.font.withSize(size.width * Label.FontSizeRatio)
                view.textColor = UIColor.white
                view.textAlignment = .center
                view.backgroundColor = .darkGray
                layout.width = size.width
                layout.aspectRatio = TitleBarSize.InverseProportion
           }

    func makeComponent(select: Int) -> AnyComponentView  {
        switch select {
            case 1:
            return BackgroundComponent()
            case 2:
            return CardComponent()
            case 3:
            return ImageComponent()
            case 4:
            return TitleBarComponent()
        default:
            return DefaultComponent()
        }
    }

import Foundation
import UIKit
import Render

class Collection: ComponentView<NilState> {
    required init() {
        super.init()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("Not supported")
    }
    
    override func render() -> NodeType {
        
        let container = CollectionNode(parent: self) { (view, layout, size) in
            view.backgroundColor = UIColor.darkGray
            layout.width = size.width
            layout.height = size.height
        }
        
        let nodes = [
            Node<UIView>(key: "green") { (view, layout, size) in
                layout.width = 70
                layout.height = 70
                view.backgroundColor = UIColor.green
            },
            
            Node<UIView>(key: "red") { (view, layout, size) in
                layout.width = 70
                layout.height = 70
                view.backgroundColor = UIColor.red
            },

            Node<UIView>(key: "blue") { (view, layout, size) in
                layout.width = 70
                layout.height = 70
                view.backgroundColor = UIColor.blue
            }
        ]
        return container.add(children: nodes)
    }
}

    override func render() -> NodeType {
        let table = TableNode(
            reuseIdentifier: "list-table",
            key: "list-table",
            in: self,
            cellReuseEnabled: true,
            autoDiffEnabled: false
        ) { view, layout, size in
            layout.width = size.width
            layout.height = size.height
            
            view.backgroundColor = .clear
        }
        
        let nodes = state.approvals.map { item -> NodeType? in
            do {
                return try self.nodeFactory.create(for: item, in: self)
            } catch let error {
                print(error)
                return nil
            }
        }.flatMap { $0 } // remove nils from array
        
        table.add(children: nodes)
        
        return table
    }

        let state = GenericApprovalsListItemState(
            id: entity.id,
            title: entity.headline,
            subtitle: entity.subheadline,
            iconName: entity.iconName,
            currency: nil,
            amount: nil,
            itemDescription: entity.itemDescription,
            note: entity.note,
            escalation: .none,
            attachments: nil
        )
        
        let component = GenericApprovalsListItemComponentView()
        
        return ComponentNode(
            component,
            in: parent,
            key: "list-item-midas-\(entity.id)",
            state: state
        )

import PlaygroundSupport

import Render

PlaygroundPage.current.needsIndefiniteExecution = true

struct AppState: StateType {
    var isOn = true
}

class MyView: ComponentView<AppState> {
    override func construct(state: AppState?, size: CGSize) -> NodeType {
        
        let makeChild = {
            return Node<UILabel>() { label, _, _ in
                label.text = "title"
            }
        }
        
        let children = [
            makeChild(),
            makeChild(),
            makeChild(),
            makeChild()
        ]
        
        return Node().add(children: [
            Node() { view, layout, size in
                view.backgroundColor = .blue
                layout.height = 50
            },
            Node().add(children: state!.isOn ? children : []),
            Node() { view, layout, size in
                view.backgroundColor = .green
                layout.height = 50
            }
        ])
    }
}

let container = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 568))
container.backgroundColor = .white

let view = MyView()
view.state = AppState()
view.render(in: container.frame.size)

container.addSubview(view)

view.state?.isOn = !view.state!.isOn
view.render(in: container.frame.size)

PlaygroundPage.current.liveView = container

class ListComponentView: ComponentView<ListPresenter.State> {
    
    override func construct(state: ListPresenter.State?, size: CGSize) -> NodeType {
        guard let state = state else {
            return NilNode()
        }
        
        let tableView = Node<TableView<ApprovalRequestState>> { view, layout, size in
            let list = state.items.map({ (request) -> ListItem<ApprovalRequestState> in
                let itemState = ApprovalRequestState(id: request.id, title: "", escalated: false)
                return ListItem<ApprovalRequestState>(
                    type: ComponentTableViewCell<ApprovalRequestComponentView>.self,
                    container: view,
                    state: itemState,
                    configurationClosure: self.configureCell
                )
            })
            
            view.elements = list
            
            layout.width = size.width
            layout.height = size.height
        }
        
        return tableView
    }
    
}

extension ListComponentView {
    
    fileprivate func configureCell(_ cell: ComponentTableViewCell<ApprovalRequestComponentView>, _ state: ApprovalRequestState) {
        cell.mountComponentIfNecessary(ApprovalRequestComponentView())
        cell.state = state
        cell.render()
    }
    
}

struct ApprovalRequestState: StateType {
    
    let id: String
    let title: String
    let escalated: Bool
    
}

extension ApprovalRequestState: Equatable {
    
}

func ==(lhs: ApprovalRequestState, rhs: ApprovalRequestState) -> Bool {
    return lhs.id == rhs.id
}

class ApprovalRequestComponentView: ComponentView<ApprovalRequestState> {
    
    override func construct(state: ApprovalRequestState?, size: CGSize) -> NodeType {
        guard let state = state else {
            return NilNode()
        }
        
        let title = Node<UILabel> { (view, layout, size) in
            view.text = "\(state.id)"
            view.textColor = state.escalated ? .red : .black
            
            layout.width = size.width
            layout.height = 71
        }
        
        return Node<UIView> { (_, layout, size) in
            layout.flexDirection = .row
            layout.width = size.width
        }.add(child: title)
    }
    
}

import PlaygroundSupport

import Render

PlaygroundPage.current.needsIndefiniteExecution = true

struct AppState: StateType {
    var isOn = false
}

class MyView: ComponentView<AppState> {
    override func construct(state: AppState?, size: CGSize) -> NodeType {
        
        let children = state!.isOn ? []: [Node()]
        
        return Node().add(children: children)
    }
}

let container = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 568))
container.backgroundColor = .white

let view = MyView()
view.state = AppState()
view.render(in: container.frame.size)

container.addSubview(view)

view.state?.isOn = true
view.render(in: container.frame.size)

PlaygroundPage.current.liveView = container

import ReSwift
import Render

class CounterViewController: UIViewController, StoreSubscriber, ComponentController {

    var component = CounterComponentView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        store.subscribe(self)
        addComponentToViewControllerHierarchy()
        component.delegate = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func newState(state: State) {
        component.counter = state.counterState.counter
    }

    override func viewDidLayoutSubviews() {
        renderComponent()
    }

    func configureComponentProps() {
        component.counter = store.state.counterState.counter
    }
    
    func incrementCounter() {
        store.dispatch(CounterActionIncrease())
    }
    
    func decrementCounter() {
        store.dispatch(CounterActionDecrease())
    }
}

extension CounterViewController: CounterComponentViewDelegate {
    func increment() {
        self.incrementCounter()
    }
    func decrement() {
        self.decrementCounter()
    }
}

protocol CounterComponentViewDelegate: class {
    func increment()
    func decrement()
}

func counterLabel(text: String) -> NodeType {
    return Node<UILabel>(reuseIdentifier: "counterLabel") { view, layout, size in
        layout.alignSelf = .center
        layout.marginBottom = 16
        view.text = text
    }
}

func button(name: String, onPress: @escaping () -> ()) -> NodeType {
    return Node<UIButton>(reuseIdentifier: "button") { view, layout, size in
        layout.justifyContent = .center
        layout.alignItems = .center
        layout.width = 20
        view.setTitle(name, for: .normal)
        view.setTitleColor(Color.black, for: .normal)
        view.onTap { _ in
            onPress()
        }
    }
}

class CounterComponentView: StatelessComponentView {
    
    var counter: Int = 0
    weak var delegate: CounterComponentViewDelegate?
    
    required init() {
        super.init()
        defaultOptions = [.preventViewHierarchyDiff]
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func render() -> NodeType {
        let container = Node<UIView> { view, layout, size in
            layout.paddingHorizontal = 20
            layout.justifyContent = .center
            layout.alignSelf = .center
        }
        let actions = Node<UIView> { view, layout, size in
            layout.flexDirection = .row
            layout.justifyContent = .spaceBetween
        }
        let label = counterLabel(text: "\(self.counter)")
        let incrementBtn = button(name: "+") {
            self.delegate?.increment()
            print("counter: \(self.counter)")
        }
        let decrementBtn = button(name: "-") {
            self.delegate?.decrement()
            print("counter: \(self.counter)")
            
        }
        
        actions.add(children: [incrementBtn, decrementBtn])
        return container.add(children: [label, actions])
    }
}

import UIKit
import PlaygroundSupport
import Render

class InnerView: ComponentView {
    override func construct() -> ComponentNodeType {
        return ComponentNode<UIView>().configure{ view in
            view.backgroundColor = UIColor.blue
            view.style.minDimensions.height = 5
            view.style.margin = (10, 10, 10, 10, 10, 10)
            view.style.flex = 1
        }
    }
}

class OuterView: ComponentView {
    override func construct() -> ComponentNodeType {
        return ComponentNode<UIView>().configure{ view in
            view.backgroundColor = UIColor.red
        }.children([ComponentNode<InnerView>().configure{ view in
            view.backgroundColor = UIColor.green
            view.style.minDimensions.height = 50
            view.style.margin = (10, 10, 10, 10, 10, 10)
        }])
    }
}

let component = OuterView()
component.renderComponent(withSize: CGSize(width: 100, height: 100))
PlaygroundPage.current.liveView = component

import Foundation
import UIKit
import Render

struct CollectionState: StateType {
    var id: String = "collectionContainer"
    var elements: [NodeType] = [layoutBuilder("")]
    var layoutAs: String = "flow"
}

class CollectionContainer: ComponentView<CollectionState> {
    required init() {
        super.init()
        self.state = CollectionState()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("Not supported")
    }
    
    override func render() -> NodeType {
        
        let collection = CollectionNode(key: self.state.id, parent: self, create: {
            let collectionView = UICollectionView(frame: .zero, collectionViewLayout: self.setFlowLayout())
            collectionView.showsHorizontalScrollIndicator = false
            collectionView.showsVerticalScrollIndicator = false
            collectionView.clipsToBounds = false
            collectionView.backgroundColor = UIColor.clear
            collectionView.reloadData()
            return collectionView
            
        }) { (view, layout, size) in
            layout.percent.width = 100%
            layout.percent.height = 100%
            configs[self.state.layoutAs]!(layout)
        }
        return collection.add(children: self.state.elements)
    }
    
    func setFlowLayout() -> UICollectionViewLayout {
        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsetsMake(30, 10, 10, 10)
        layout.minimumInteritemSpacing = 10
        layout.minimumLineSpacing = 15
        return layout
    }
}

return parent.add(children: [collection.add(children: cells)])

let card = Node<UIView>(key: state.id,
                                create: {
            let cardView = UIView()
            ComponentAnimation.springOn(view: cardView)
            return cardView