Example

components/button.cjsx

@@ -2,11 +2,16 @@
 @todo
 ###
 
-FontIcon = require "./font_icon"
-Ripple   = require "./ripple"
+# -- Components
+FontIcon    = require "./font_icon"
+Ripple      = require "./ripple"
+# -- Mixins
+# StyleMixin  = require "./mixins/style"
 
 module.exports = React.createClass
 
+  # mixins: [StyleMixin]
+
   # -- States & Properties
   propTypes:
     type        : React.PropTypes.string

components/mixins/style.coffee

@@ -0,0 +1,32 @@
+###
+@todo
+###
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    style       : React.PropTypes.string
+
+  # -- Lifecycle
+  componentWillMount: ->
+    console.log "07-lifecycle -> componentWillMount"
+
+  componentDidMount: ->
+    console.log "07-lifecycle -> componentDidMount"
+
+  componentWillReceiveProps: (next_props) ->
+    console.log "07-lifecycle -> componentWillReceiveProps -> ", next_props
+
+  componentWillUpdate: (next_props, next_states) ->
+    console.log "07-lifecycle -> componentWillUpdate -> ", next_props, next_states
+
+  componentDidUpdate: (prev_props, prev_states) ->
+    console.log "07-lifecycle -> componentDidUpdate -> ", prev_props, prev_states
+
+  componentWillUnmount: ->
+    console.log "07-lifecycle -> componentWillUnmount"
+
+  shouldComponentUpdate: (next_props, next_states) ->
+    console.log "07-lifecycle -> shouldComponentUpdate -> ", next_props, next_states
+    true

gulpfile.coffee

@@ -13,8 +13,11 @@ pkg           = require "./package.json"
 # -- BROWSERIFY ----------------------------------------------------------------
 browserify    = require "browserify"
 source        = require "vinyl-source-stream"
-bundler       = browserify "./source/app.cjsx", extensions: [".cjsx", ".coffee"]
-bundler.transform require "coffee-reactify"
+components    = browserify "./index.cjsx", extensions: [".cjsx", ".coffee"]
+components.transform require "coffee-reactify"
+spec          = browserify "./spec/test.cjsx", extensions: [".cjsx", ".coffee"]
+spec.transform require "coffee-reactify"
+
 # -- FILES ---------------------------------------------------------------------
 path =
   dist          :   "./dist"
@@ -29,6 +32,7 @@ path =
                     "source/styles/screens/*.styl"]
   dependencies  : [ "node_modules/react/dist/react-with-addons.js"
                     "bower_components/hamsa/dist/hamsa.js"]
+  spec          : [ "spec/*.cjsx" ]
 # -- BANNER --------------------------------------------------------------------
 banner = [
   "/**"
@@ -45,15 +49,16 @@ gulp.task "server", ->
   connect.server
     port      : 8000
     livereload: true
-    root      : path.dist
+    # root      : path.dist
 
 gulp.task "source", ->
-  bundler.bundle()
-    .on "error", gutil.log.bind(gutil, "Browserify Error")
+  components.bundle()
+  # gulp.src path.soure
+  #   .pipe coffee().on 'error', gutil.log
     .pipe source "#{pkg.name}.js"
     # .pipe uglify mangle: true
     .pipe header banner, pkg: pkg
-    .pipe gulp.dest "#{path.dist}/assets/js"
+    .pipe gulp.dest "#{path.dist}"
     .pipe connect.reload()
 
 gulp.task "style", ->
@@ -66,16 +71,18 @@ gulp.task "style", ->
     .pipe gulp.dest "#{path.dist}/assets/css"
     .pipe connect.reload()
 
-gulp.task "dependencies", ->
-  gulp.src path.dependencies
-    .pipe concat "#{pkg.name}.dependencies.js"
-    .pipe gulp.dest "#{path.dist}/assets/js"
-    # .pipe uglify mangle: true
+gulp.task "spec", ->
+  spec.bundle()
+    .on "error", gutil.log.bind(gutil, "Browserify Error")
+    .pipe source "#{pkg.name}.test.js"
+    .pipe header banner, pkg: pkg
+    .pipe gulp.dest "spec/"
     .pipe connect.reload()
 
-gulp.task "init", ["source", "style", "dependencies"]
+gulp.task "init", ["source", "style", "spec"]
 
 gulp.task "default", ->
-  gulp.run ["server"]
+  gulp.run ["init", "server"]
   gulp.watch path.source, ["source"]
   gulp.watch path.style, ["style"]
+  gulp.watch path.spec, ["spec"]

package.json

@@ -26,7 +26,6 @@
     "vinyl-source-stream": "^1.1.0"
   },
   "scripts": {
-    "start": "gulp",
-    "postinstall": "bower install"
+    "start": "gulp"
   }
 }

spec/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Reack-Kit</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
+    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
+    <meta name="apple-mobile-web-app-title" content="Material Console">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="HandheldFriendly" content="True">
+    <meta http-equiv="cleartype" content="on">
+  </head>
+  <body>
+    <script src="../node_modules/react/dist/react-with-addons.js"></script>
+    <script src="./react-kit.test.js"></script>
+  </body>
+</html>

spec/test.cjsx

@@ -0,0 +1,58 @@
+"use strict"
+
+# -- Components
+Input     = require "../components/input"
+Form      = require "../components/form"
+Button    = require "../components/button"
+FontIcon  = require "../components/font_icon"
+
+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
+
+  # -- Render
+  render: ->
+    attributes = [
+      ref: "name", label: "Your Name", required: true
+    ,
+      ref: "description", multiline: true, label: "Description", value: "Doer"
+    ,
+      ref: "years", type: "number", label: "Years"
+    ,
+      ref: "twitter", label: "Nickname", disabled: true
+    ,
+    ]
+
+    <app>
+      <h1>Hello World !</h1>
+      <Form attributes={attributes}
+            onError={@onFormError}
+            onValid={@onFormValid}/>
+      # <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} />
+      #
+      <FontIcon value="access_alarm" />
+    </app>
+
+React.render <Test/>, document.body