From a326d578b7376ef92a98402338baea00e915f9c1 Mon Sep 17 00:00:00 2001
From: Javi Jimenez Villar <javi.jimenez.villar@gmail.com>
Date: Sat, 20 Jun 2015 15:03:09 +0700
Subject: [PATCH] First example using new component <Aside/>

---
 components/aside/index.cjsx |  45 ++++++++++++++++
 components/aside/style.styl |  49 ++++++++++++++++++
 components/constants.styl   |  42 +++++++++++++++
 spec/components/aside.cjsx  |  28 ++++++++++
 spec/index.cjsx             | 100 ++----------------------------------
 5 files changed, 168 insertions(+), 96 deletions(-)
 create mode 100644 components/aside/index.cjsx
 create mode 100644 components/aside/style.styl
 create mode 100644 components/constants.styl
 create mode 100644 spec/components/aside.cjsx

diff --git a/components/aside/index.cjsx b/components/aside/index.cjsx
new file mode 100644
index 00000000..f9d353b3
--- /dev/null
+++ b/components/aside/index.cjsx
@@ -0,0 +1,45 @@
+###
+@todo
+###
+
+Style    = require './style'
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    type        : React.PropTypes.string.required
+    active      : React.PropTypes.bool
+    hideable    : React.PropTypes.bool
+    className   : React.PropTypes.string
+
+  getDefaultProps: ->
+    type        : "left"
+    active      : false
+    hideable    : false
+    className   : ""
+
+  getInitialState: ->
+    active      : @props.active
+
+  # -- Events
+  onClick: (event) ->
+    @setState active: false if event.target is @getDOMNode()
+
+  # -- Render
+  render: ->
+    className = @props.className
+    className += " active" if @state.active
+    className += " hideable" if @props.hideable
+    <div data-component-aside={@props.type} className={className} onClick={@onClick}>
+      <aside>
+        { @props.children }
+      </aside>
+    </div>
+
+  # -- Extends
+  show: ->
+    @setState active: true
+
+  hide: ->
+    @setState active: false
diff --git a/components/aside/style.styl b/components/aside/style.styl
new file mode 100644
index 00000000..c6cbb6d0
--- /dev/null
+++ b/components/aside/style.styl
@@ -0,0 +1,49 @@
+@import "../constants"
+
+[data-component-aside]
+  position                        : absolute
+  z-index                         : 2
+  top                             : 0
+  width                           : 100vw
+  height                          : 100vh
+  pointer-events                  : none
+  transition-property               background-color
+  transition-duration               ANIMATION_DURATION
+  transition-timing-function        ANIMATION_EASE
+
+  // -- Children
+  > *
+    position                      : absolute
+    top                           : 0
+    height                        : 100%
+    width                         : (4 * UNIT)
+    background-color              : WHITE
+    transition-property             transform
+    transition-duration             ANIMATION_DURATION
+    transition-timing-function      ANIMATION_EASE
+
+  // -- Style
+  &.active
+    pointer-events                : all
+    > *
+      box-shadow                  : ZDEPTH_SHADOW_1
+      transform                     translateX(0%)
+  &:not(.hideable)
+    z-index                       : 2
+    width                         : (4 * UNIT)
+  &.hideable
+    z-index                       : 3
+    &.active
+      background-color            : rgba(0,0,0,0.5)
+
+[data-component-aside="left"]
+  left                            : 0
+  > *
+    left                          : 0
+    transform                       translateX(-100%)
+
+[data-component-aside="right"]
+  right                           : 0
+  > *
+    right                         : 0
+    transform                       translateX(100%)
diff --git a/components/constants.styl b/components/constants.styl
new file mode 100644
index 00000000..16f5dcaa
--- /dev/null
+++ b/components/constants.styl
@@ -0,0 +1,42 @@
+// -- Colors
+COLOR                       = #222222
+BACKGROUND                  = #f5f5f5
+THEME                       = #cccccc
+WHITE                       = #ffffff
+PRIMARY                     = #e91e63
+SECONDARY                   = #00bcd4
+// THEME                       = #ef6c00
+CANCEL                      = red
+
+// -- Fonts
+FONT_FAMILY                 = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
+FONT_SIZE                   = 16px
+FONT_SIZE_TINY              = 80%
+FONT_SIZE_SMALL             = 90%
+FONT_SIZE_NORMAL            = 100%
+FONT_SIZE_BIG               = 120%
+FONT_WEIGHT_THIN            = 300
+FONT_WEIGHT_NORMAL          = 400
+FONT_WEIGHT_BOLD            = 700
+
+// -- Sizes
+UNIT                        = 4rem
+SPACE                       = (UNIT * 0.29)
+OFFSET                      = (SPACE * 1.75)
+MENU_WIDTH                  = (3.85 * UNIT)
+HEADER_HEIGHT               = (1.65 * UNIT)
+BUTTON_HEIGHT               = (2.5 * SPACE)
+BUTTON_CIRCLE_HEIGHT        = (2.75 * SPACE)
+LOADING_HEIGHT              = (1.5 * UNIT)
+
+// -- Shadows
+ZDEPTH_SHADOW_1             = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
+ZDEPTH_SHADOW_2             = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
+ZDEPTH_SHADOW_3             = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
+ZDEPTH_SHADOW_4             = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
+ZDEPTH_SHADOW_5             = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
+
+// -- Animations
+ANIMATION_DURATION          = 450ms
+ANIMATION_EASE              = cubic-bezier(.55,0,.1,1)
+ANIMATION_DELAY             = (ANIMATION_DURATION / 5)
diff --git a/spec/components/aside.cjsx b/spec/components/aside.cjsx
new file mode 100644
index 00000000..08ec9935
--- /dev/null
+++ b/spec/components/aside.cjsx
@@ -0,0 +1,28 @@
+###
+@todo
+###
+
+Aside           = require '../../components/aside'
+Button          = require '../../components/button'
+
+module.exports = React.createClass
+
+  # -- States & Properties
+
+  # -- Events
+  onClick: (ref, method) ->
+    @refs[ref][method]()
+
+  # -- Render
+  render: ->
+    <section>
+      <h2>Aside</h2>
+      <Aside ref="left" hideable=true>
+        <Button caption="Close" onClick={@onClick.bind null, "left", "hide"} />
+      </Aside>
+      <Aside ref="right" type="right"/>
+      <nav>
+        <Button caption="Show aside left" onClick={@onClick.bind null, "left", "show"} />
+        <Button caption="Show aside right" onClick={@onClick.bind null, "right", "show"} />
+      </nav>
+    </section>
diff --git a/spec/index.cjsx b/spec/index.cjsx
index 06c087a7..7d623419 100644
--- a/spec/index.cjsx
+++ b/spec/index.cjsx
@@ -1,107 +1,15 @@
 "use strict"
 
 # -- Components
-Autocomplete  = require "../components/autocomplete"
-Button        = require "../components/button"
-Form          = require "../components/form"
-
-Dialog        = require './examples/dialog'
+Aside         = require './components/aside'
 
 Test = React.createClass
-  getInitialState: ->
-    submitable      : false
-
-  onInputChange: (event, input) ->
-    console.log "onInputChange -> #{input.getValue()}"
-
-  onFormValid: (event, form) ->
-    console.log "onFormValid", form.getValue()
-    @setState submitable: true
-
-  onFormError: (event, form) ->
-    console.log "onFormError", form.getValue()
-    @setState submitable: false
-
-  onButtonClick: (event, button) ->
-    console.log "onButtonClick", button
-
-  onShowDialog: ->
-    console.log "onShowDialog"
-    @refs.dialog.show()
-
-  onAutocompleteValues: ->
-    console.log @refs.autocomplete_multiple.getValue()
-    console.log @refs.autocomplete_simple.getValue()
-
   # -- Render
   render: ->
-    attributes = [
-      ref: "name", label: "Your Name", required: true#, onChange: @onInputChange
-    ,
-      ref: "description", multiline: true, label: "Description", value: "Doer"
-    ,
-      ref: "birthdate", type: "date", label: "Birthdate"
-    ,
-      ref: "years", type: "number", label: "Years"
-    ,
-      ref: "twitter", label: "Nickname", disabled: true
-    ,
-      ref: "nomad", type: "checkbox", label: "Are you a nomad?", value: true
-    ,
-      ref: "cow", type: "checkbox", label: "Are you a cow?", value: false
-    ,
-      ref: "girl", type: "checkbox", label: "Are you a girl?", value: false, disabled: true
-    ,
-      ref: "nomad_2", type: "radio", label: "Are you a nomad_2?", value: true
-    ,
-      ref: "cow_2", type: "radio", label: "Are you a cow_2?", value: false
-    ,
-      ref: "girl_2", type: "radio", label: "Are you a girl_2?", value: false, disabled: true
-    ,
-      type: "submit", caption: "Send", style: "primary anchor", disabled: true
-    ]
-    attributes = []
-
-    countries = ["Spain", "England", "USA", "Thailand", "Tongo", "Slovenia"]
-    countries_selected = ["USA", "Tongo"]
-    countries_obj =
-      "ES-es"   : "Spain"
-      "TH-th"   : "Thailand"
-      "EN-gb"   : "England"
-      "EN-en"   : "USA"
-    countries_obj_selected = "TH-th"
-
-    <app>
+    <test>
       <h1>React-Kit <small>New way for create</small></h1>
-      <br/>
 
-      <h2>Autocomplete</h2>
-      <Autocomplete ref="autocomplete_multiple" placeholder="elements is up to you..."
-                    dataSource={countries} value={countries_selected}/>
-      <Autocomplete ref="autocomplete_simple" multiple=false exact=false
-                    dataSource={countries_obj} value={countries_obj_selected}/>
-      <Button caption="Get values of autocomplete" onClick={@onAutocompleteValues} />
-
-      <h2>Forms</h2>
-      <Form attributes={attributes} />
-
-      <br/>
-      <h2>Buttons</h2>
-      <Button caption="Show dialog" onClick={@onShowDialog}/>
-
-
-      <Button caption="Login" disabled={not @state.submitable} />
-      <Button caption="Primary" style="primary" icon="access_alarm" />
-      <Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
-      <Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
-
-      <Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
-      <Button type="circle" icon="explore" style="primary" />
-      <Button type="circle" icon="zoom_in" style="secondary" />
-      <Button type="circle" icon="input" disabled={true} />
-
-      # -- Dialog
-      <Dialog ref="dialog" />
-    </app>
+      <Aside />
+    </test>
 
 React.render <Test/>, document.body