more playgrounds

Author: Alex Usbergo

Playgrounds/02 Flexbox Components.playground/Contents.swift renamed to Playgrounds/01 Flexbox Components.playground/Contents.swift

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<playground version='5.0' target-platform='ios' display-mode='rendered' executeOnSourceChanges='false'>
+    <timeline fileName='timeline.xctimeline'/>
+</playground>

Playgrounds/01 Vanilla Components.playground/Resources/logo_small.png renamed to Playgrounds/01 Flexbox Components.playground/Resources/logo_small.png

@@ -0,0 +1,116 @@
+import UIKit
+import XCPlayground
+import Render
+
+/*:
+ ![logo](logo_small.png)
+ # Components embedded in cells
+ 
+ You can wrap your components in `ComponentTableViewCell` or `ComponentCollectionViewCell` and use 
+ the classic dataSource/delegate pattern for you view controller.
+ */
+
+class FooState: ComponentStateBase {
+    let text: String = randomString(randomInt(0, max: 500))
+}
+
+class FooComponentView: ComponentView {
+    
+    override class func initialize() {
+        
+        // if we intend to use this component inside of a cell
+        // we have to register an instance as a prototype for the infra.
+        // The 'initialize' function seems to be a convenient palce to do it.
+        registerPrototype(component: FooComponentView())
+    }
+    
+    // we cast the state for convenience
+    var fooState: FooState {
+        return  (self.state as? FooState) ?? FooState()
+    }
+
+    override func construct() -> ComponentNodeType {
+        let margin: Float = 4.0
+        let insets: Inset = (margin, margin, margin, margin, margin, margin)
+        return ComponentNode<UIView>().configure({ view in
+            view.style.flexDirection = .Row
+            view.style.margin = insets
+            
+            // that's how we can define the size in relation to the size of the parent view.
+            let min = ~self.parentSize.width
+            view.style.minDimensions.width = max(min, 96)
+            
+            view.backgroundColor = UIColor.A
+        }).children([
+            ComponentNode<UIView>().configure({ view in
+                view.style.dimensions = (32, 32)
+                view.style.margin = insets
+                view.backgroundColor = UIColor.B
+                view.layer.cornerRadius = 16
+            }),
+            ComponentNode<UILabel>().configure({ view in
+                view.style.margin = insets
+                view.style.alignSelf = .Center
+                view.style.flex = Flex.Max
+                view.text = self.fooState.text
+                view.numberOfLines = 0
+                view.font = UIFont.systemFontOfSize(12.0, weight: UIFontWeightLight)
+            })
+        ])
+    }
+}
+
+/*: Now this is how we wrap the component inside a `ComponentTableViewCell` in our datasource */
+
+class DataSource: NSObject, UITableViewDataSource {
+    
+    let items: [FooState] = {
+        var items = [FooState]()
+        for _ in 0..<6 {
+            items.append(FooState())
+        }
+        return items
+    }()
+    
+    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+        return items.count
+    }
+    
+    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
+        let reuseIdentifier = String(FooComponentView.self)
+        let cell: ComponentTableViewCell! =
+            //dequeue a cell with the given identifier
+            //(remember to use different identifiers for different component classes)
+            tableView.dequeueReusableCellWithIdentifier(reuseIdentifier) as? ComponentTableViewCell ??
+                
+            //or create a new Cell wrapping the component
+            ComponentTableViewCell(reuseIdentifier: reuseIdentifier, component: FooComponentView())
+                
+        //set the state for the cell
+        cell.state = items[indexPath.row]
+        
+        //and render the component
+        cell.renderComponent(CGSize.sizeConstraintToWidth(tableView.bounds.size.width))
+        return cell
+    }
+}
+
+/*: And finally create a `UITableView`  */
+
+let tableView = UITableView(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: 320, height: 320)))
+
+//we want automatic dimensions for our cells
+tableView.rowHeight = UITableViewAutomaticDimension
+
+//this improves drastically the performance of reloadData when you have a large collection of items
+tableView.estimatedRowHeight = 100
+
+let dataSource = DataSource()
+tableView.dataSource = dataSource
+tableView.reloadData()
+
+tableView
+
+
+
+  

Playgrounds/01 Vanilla Components.playground/Sources/Shared.swift renamed to Playgrounds/01 Flexbox Components.playground/Sources/Shared.swift

@@ -0,0 +1,51 @@
+
+import UIKit
+
+public func snapshot(view: UIView) -> UIImage {
+    view.layoutSubviews()
+    UIGraphicsBeginImageContext(view.frame.size)
+    view.layer.renderInContext(UIGraphicsGetCurrentContext()!)
+    let image = UIGraphicsGetImageFromCurrentImageContext()
+    UIGraphicsEndImageContext()
+    return image
+}
+
+extension UIColor {
+    class public var A: UIColor {
+        return UIColor(red: 238/255, green: 238/255, blue: 238/255, alpha: 1)
+    }
+    class public var B: UIColor {
+        return UIColor(red: 0/255, green: 188/255, blue: 212/255, alpha: 1)
+    }
+    class public var C: UIColor {
+        return UIColor(red: 76/255, green: 175/255, blue: 80/255, alpha: 1)
+    }
+    class public var D: UIColor {
+        return UIColor(red: 165/255, green: 214/255, blue: 167/255, alpha: 1)
+    }
+    class public var E: UIColor {
+        return UIColor(red: 46/255, green: 125/255, blue: 50/255, alpha: 1)
+    }
+    class public var F: UIColor {
+        return UIColor(red: 244/255, green: 67/255, blue: 54/255, alpha: 1)
+    }
+    class public var G: UIColor {
+        return UIColor(red: 33/255, green: 150/255, blue: 243/255, alpha: 1)
+    }
+}
+
+public func randomString(length: Int) -> String {
+    let allowedChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 "
+    let allowedCharsCount = UInt32(allowedChars.characters.count)
+    var randomString = ""
+    for _ in (0..<length) {
+        let randomNum = Int(arc4random_uniform(allowedCharsCount))
+        let newCharacter = allowedChars[allowedChars.startIndex.advancedBy(randomNum)]
+        randomString += String(newCharacter)
+    }
+    return randomString
+}
+
+public func randomInt(min: Int, max:Int) -> Int {
+    return min + Int(arc4random_uniform(UInt32(max - min + 1)))
+}

Playgrounds/02 Flexbox Components.playground/contents.xcplayground renamed to Playgrounds/01 Flexbox Components.playground/contents.xcplayground

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<playground version='5.0' target-platform='ios' display-mode='raw' executeOnSourceChanges='false'>
+<playground version='5.0' target-platform='ios' display-mode='raw'>
     <timeline fileName='timeline.xctimeline'/>
 </playground>

Playgrounds/01 Vanilla Components.playground/playground.xcworkspace/contents.xcworkspacedata renamed to Playgrounds/01 Flexbox Components.playground/playground.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Timeline
+   version = "3.0">
+   <TimelineItems>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=3960&amp;EndingColumnNumber=54&amp;EndingLineNumber=62&amp;StartingColumnNumber=1&amp;StartingLineNumber=62&amp;Timestamp=485261764.843199"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=3960&amp;EndingColumnNumber=23&amp;EndingLineNumber=62&amp;StartingColumnNumber=1&amp;StartingLineNumber=62&amp;Timestamp=485261764.843389"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=3960&amp;EndingColumnNumber=27&amp;EndingLineNumber=62&amp;StartingColumnNumber=1&amp;StartingLineNumber=62&amp;Timestamp=485261764.843548"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=3960&amp;EndingColumnNumber=27&amp;EndingLineNumber=62&amp;StartingColumnNumber=1&amp;StartingLineNumber=62&amp;Timestamp=485261764.843701"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=3960&amp;EndingColumnNumber=20&amp;EndingLineNumber=61&amp;StartingColumnNumber=1&amp;StartingLineNumber=61&amp;Timestamp=485261764.843851"
+         lockedSize = "{175, 50}"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=3960&amp;EndingColumnNumber=20&amp;EndingLineNumber=61&amp;StartingColumnNumber=1&amp;StartingLineNumber=61&amp;Timestamp=485261764.844004"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=281&amp;EndingColumnNumber=31&amp;EndingLineNumber=11&amp;StartingColumnNumber=1&amp;StartingLineNumber=11&amp;Timestamp=485255669.173545"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=3960&amp;EndingColumnNumber=20&amp;EndingLineNumber=62&amp;StartingColumnNumber=1&amp;StartingLineNumber=62&amp;Timestamp=485261764.84429"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=0&amp;CharacterRangeLoc=3960&amp;EndingColumnNumber=20&amp;EndingLineNumber=62&amp;StartingColumnNumber=1&amp;StartingLineNumber=62&amp;Timestamp=485261764.844435"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+      <LoggerValueHistoryTimelineItem
+         documentLocation = "#CharacterRangeLen=9&amp;CharacterRangeLoc=3949&amp;EndingColumnNumber=10&amp;EndingLineNumber=111&amp;StartingColumnNumber=1&amp;StartingLineNumber=111&amp;Timestamp=485261764.844579"
+         lockedSize = "{328, 333}"
+         selectedRepresentationIndex = "0"
+         shouldTrackSuperviewWidth = "NO">
+      </LoggerValueHistoryTimelineItem>
+   </TimelineItems>
+</Timeline>

Playgrounds/01 Vanilla Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate renamed to Playgrounds/01 Flexbox Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate

@@ -16,7 +16,7 @@
       <BreakpointProxy
          BreakpointExtensionID = "Xcode.Breakpoint.FileBreakpoint">
          <BreakpointContent
-            shouldBeEnabled = "Yes"
+            shouldBeEnabled = "No"
             ignoreCount = "0"
             continueAfterRunningActions = "No"
             filePath = "../Render/BaseComponentView.swift"

Playgrounds/02 Flexbox Components.playground/timeline.xctimeline renamed to Playgrounds/01 Flexbox Components.playground/timeline.xctimeline

@@ -122,6 +122,7 @@ public class FlexboxComponentView: BaseComponentView {
         return _root!
     }
 
+    
     /// 'true' is the root node has been constructed already, 'false' otherwise
     public var isRootInitialized: Bool {
         guard let _ = self._root else { return false}

Playgrounds/02 Flexbox Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate

@@ -64,3 +64,7 @@ public protocol ComponentViewType: class {
     /// - parameter state: The (optional) state for this component.
     func renderComponent(size: CGSize)
 }
+
+/// Used mostyle as base class for internal tests.
+public class ComponentStateBase: NSObject, ComponentStateType {
+}