tomify 0.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d5d3338338ef1c5b06f88ce9df1f5456ce8484a8
+  data.tar.gz: 00481061072904e6dea701448bead33cf4cd0d5c
+SHA512:
+  metadata.gz: 76c1403baf7268c7b334ecdd96f9766cc5644aa2949352bf2595ad8a16ce372e27d8c763cd8e1c61bb5e6643f05090873659d040535c22fe9af115e3329193ac
+  data.tar.gz: 006a9d347314ba2766fbf70cb1a1d175da13c2186cd837dc6fd9723c76ba83855a7991967958ce8f337732f4d9caa01c1c86d84d37271a36973619743a0b5af9

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2016 Tom Prats
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,19 @@
+# Tomify
+
+## Controllers
+You can override a controller in an initializer
+
+```ruby
+Tomify.controllers.base = "ApplicationController"
+```
+
+## Views
+You can override a default template in a layout file
+
+```haml
+- content_for :navbar_partial, "layouts/navbar"
+= render "tomify/layouts/application"
+```
+
+## License
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/setup"
+require "bundler/gem_tasks"
+
+Dir.glob("lib/tasks/**/*.rake").each { |r| import r }
+
+task default: "tomify:package"

data/app/assets/javascripts/tomify/default/array.coffee

@@ -0,0 +1,4 @@
+Object.defineProperties Array.prototype, {
+  first: { get: -> @[0] },
+  last: { get: -> @[@length - 1] }
+}

data/app/assets/javascripts/tomify/default/jquery.patch.coffee

@@ -0,0 +1,9 @@
+for method in ["put", "delete"]
+  do (method) ->
+    $[method] = (url, data, callback, type) ->
+      if $.isFunction(data)
+        type = type || callback
+        callback = data
+        data = undefined
+
+      $.ajax(url: url, type: method, dataType: type, data: data, success: callback)

data/app/assets/javascripts/tomify/default/object.coffee

@@ -0,0 +1,4 @@
+@BuildObject = (key, value) ->
+  object = {}
+  object[key] = value
+  object

data/app/assets/javascripts/tomify/default/string.coffee

@@ -0,0 +1,40 @@
+String::assign = (options) ->
+  @replace /::.*::/, (replace) -> options[replace.slice(2, -2)] ? ""
+
+String::break = ->
+  @replace(/(?!^)([A-Z])/g, "_$1").lowercase.split(/[\W_-]/)
+
+String::date = ->
+  new Date(@).toLocaleDateString()
+
+String::startsWith ?= (s) -> @slice(0, s.length) == s
+String::endsWith   ?= (s) -> s != "" && @slice(-s.length) == s
+
+String::transform = (method) ->
+  string = @replace(/(?!^)([A-Z])/g, "_$1").lowercase
+  string = string.splitAndJoin "-", method
+  string = string.splitAndJoin "_", method
+  string = string.splitAndJoin ".", method
+  string
+
+String::splitAnd = (separator, method) ->
+  method word for word in @split(separator)
+
+String::splitAndJoin = (separator, method) ->
+  @splitAnd(separator, method).join(separator)
+
+Object.defineProperties String.prototype,  {
+  camelize: { get: ->
+    word = (word.capitalize for word in @break()).join()
+    word.charAt(0).lowercase + word.slice(1)
+  },
+  capitalize: { get: ->
+    @transform (word) -> word.charAt(0).toUpperCase() + word.slice(1)
+  },
+  dasherize: { get: -> @break().join("-") },
+  lowercase: { get: -> @toLowerCase() },
+  pluralize: { get: -> "#{@}s" },
+  titleize: { get: -> (word.capitalize for word in @break() when word isnt "id").join(" ") },
+  underscore: { get: -> @break().join("_") },
+  uppercase: { get: -> @toUpperCase() }
+}

data/app/assets/javascripts/tomify/dynamic/classes/component.coffee

@@ -0,0 +1,7 @@
+class @Component extends Namespace
+  @base: window
+  @create: (namespace, component) ->
+    component.displayName ?= namespace
+    component.mixins = @defaultMixins.concat(component.mixins || [])
+    @namespace namespace, React.createClass(component)
+  @defaultMixins: [WillInitializeMixin, FollowMixin]

data/app/assets/javascripts/tomify/dynamic/classes/field.coffee

@@ -0,0 +1,24 @@
+class @Field
+  @build: (options) ->
+    props = { name: options.name, type: options.type }
+    switch props.type
+      when "checkbox"
+        props.label = options.label
+      when "select"
+        props.allowBlank = options.allowBlank
+        props.model = options.model
+        props.options = []
+        for option in options.options || []
+          props.options.push { value: option?.value ? option, name: option?.name ? option.titleize }
+    field = new Field(options)
+    field.props = props
+    field.setForm(options.form)
+    field
+  copy: (form) ->
+    Field.build $.extend({}, @options, { form: form })
+  constructor: (options) ->
+    @options = options
+  setForm: (form) ->
+    @props.value = form.value.bind(form)
+    @props.onChange = form.onChange.bind(form)
+    @props.options = form.options.bind(form, @props) if @props.model

data/app/assets/javascripts/tomify/dynamic/classes/form.coffee

@@ -0,0 +1,72 @@
+class @Form
+  copy: ->
+    form = new Form(@layout)
+    form.fields = (field.copy(form) for field in @fields)
+    form.models = @models
+    form
+  constructor: (layout) ->
+    @layout = layout
+    @fields = []
+    @models = []
+  value: (name) ->
+    @changes.get(name) ? @record.get(name) ? ""
+  onChange: (name, e) ->
+    change = {}
+    change[name] = switch e.target.type
+      when "checkbox" then e.target.checked
+      when "file" then e.target.files[0]
+      else e.target.value
+    return @changes.remove(name) if @record.get(name) == change[name]
+    @changes.merge(change)
+  options: (props) ->
+    options = []
+    options.push { value: "", name: "None" } if props.allowBlank
+    for record in @component.state[props.model.lowercase]
+      options.push { value: record.id, name: record.name }
+    options
+  add: (name, type, options = {}) ->
+    options = $.extend { type: type, name: name, form: @ }, options
+    @fields.push Field.build(options)
+    @models.push options.model if options.model
+  setComponent: (component) ->
+    @component = component
+    @record = component.store.findOrCreate "Record", {}
+    @changes = component.store.findOrCreate "Changes", {}
+    @stores = { record: @record, changes: @changes }
+    component.followModels.push model for model in @models
+    component.followStores.push BuildObject(key, value) for key, value of @stores
+    @
+  setDefaultValues: ->
+    record = @record.get()
+    changes = {}
+    for field in @fields
+      name = field.props.name
+      value = null
+      continue if record[name]?
+      switch field.props.type
+        when "checkbox"
+          value = true
+        when "select"
+          continue if field.allowBlank
+          options = field.props.options?() || field.props.options
+          value = options[0]?.value
+      continue unless value?
+      changes[name] = value
+    @changes.set(changes)
+  renderField: (field) ->
+    FieldComponent = Form.Field[field.props.type.capitalize] || Form.Field.Default
+    if @layout == "horizontal"
+      <div key={field.props.name} className="form-group">
+        <label className="col-sm-2 control-label" htmlFor={field.props.name}>
+          {field.props.name.titleize}
+        </label>
+        <div className="col-sm-10">
+          <FieldComponent {...field.props} />
+        </div>
+      </div>
+    else
+      <div key={field.props.name} className="form-group">
+        <FieldComponent {...field.props} />
+      </div>
+  render: ->
+    @renderField(field) for field in @fields

data/app/assets/javascripts/tomify/dynamic/classes/model.coffee

@@ -0,0 +1,41 @@
+class @Model extends Observer
+  @base: Model
+  @create: (namespace, options) ->
+    @namespace namespace, new @(namespace, options)
+  constructor: (namespace, options = {}) ->
+    @name = namespace.split(".").last ? throw "Model: Requires Name"
+    @prefix = namespace.split(".").first.lowercase
+    @path = options.path ? @name.underscore.pluralize
+    @path = "/api/#{@prefix}/#{@path}"
+    @requests = {}
+    @setDefaultActions()
+  setAction: (name, request) ->
+    requests = @requests[name] = []
+    context = @
+    @[name] = (args...) ->
+      request.running = true
+      requests.push(request)
+      $.when(request(args...)).done (response) ->
+        request.running = false
+        context.trigger name, response
+  requested: (action) -> @requests[action].length > 0
+  request: (type, nest) ->
+    name = @name.underscore
+    basePath = @path
+    (path, params) ->
+      [path, params] = [params, path] if path instanceof Object
+      route = basePath
+      route += "/#{path}" if path
+      if nest
+        [params, nest] = [{}, params]
+        params[name] = nest
+      Request[type](route, params)
+  setDefaultActions: ->
+    @setAction "find", @request "get"
+    @setAction "edit", @request "get"
+    @setAction "update", @request "put", true
+    @setAction "new", Request.none
+    @setAction "all", @request "get"
+    @setAction "where", @request "get"
+    @setAction "create", @request "post", true
+    @setAction "destroy", @request "delete"

data/app/assets/javascripts/tomify/dynamic/classes/namespace.coffee

@@ -0,0 +1,24 @@
+class @Namespace
+  @base: window,
+  @namespace: (namespace, value) ->
+    unless namespace?.length then throw "Namespace: Requires Keys"
+    unless value? then throw "Namespace: Requires Value"
+    keys = namespace.split(".")
+    value.namespace = namespace
+    scope = @base
+    for key in keys when key isnt keys.last
+      scope[key] ?= {}
+      scope = scope[key]
+    scope[keys.last] = value
+    value
+  @create: @namespace
+  @find: (namespace) ->
+    unless namespace?.length then throw "Namespace: Requires Keys"
+    scope = @base
+    scope = (scope ? {})[key] for key in namespace.split(".")
+    scope
+  @findOrCreate: (namespace, options) ->
+    @find(namespace, options) || @create(namespace, options)
+  findOrCreate: (namespace, options) ->
+    namespace = "#{@namespace}.#{namespace}"
+    @constructor.find(namespace, options) || @constructor.create(namespace, options)

data/app/assets/javascripts/tomify/dynamic/classes/observer.coffee

@@ -0,0 +1,22 @@
+class @Observer extends Namespace
+  @base: Observer
+  @create: (namespace) ->
+    @namespace namespace, new @
+  callbacksFor: (action) ->
+    @observe ?= {}
+    @observe[action] ?= $.Callbacks()
+  on: (action, callback) ->
+    context = @
+    callback.off = -> context.off(action, callback)
+    @callbacksFor(action).add callback
+    callback
+  off: (action, callback) ->
+    @callbacksFor(action).remove(callback)
+    callback
+  one: (action, callback) ->
+    @on action, callback
+    @on action, -> callback.off()
+    callback
+  trigger: (action, data) ->
+    @callbacksFor(action).fire(data)
+    @

data/app/assets/javascripts/tomify/dynamic/classes/request.coffee

@@ -0,0 +1,26 @@
+class @Request
+  @none: (data) -> data
+  @make: (type) ->
+    (path, params) -> @ajax(type: type, url: path, data: params)
+  @get: @make("GET")
+  @post: @make("POST")
+  @put: @make("PUT")
+  @delete: @make("DELETE")
+  @ajax: (options) ->
+    options.url = options.url.assign(options.data)
+    if options.type in ["POST", "PUT"]
+      $.extend options, {
+        data: @formData(new FormData(), options.data),
+        cache: false,
+        processData: false,
+        contentType: false
+      }
+    $.ajax(options)
+  @formData: (data, object, objectName) ->
+    for key, value of object
+      name = if objectName then "#{objectName}[#{key}]" else key
+      if value not instanceof Object || value instanceof File
+        data.append(name, value)
+      else
+        data = @formData(data, value, name)
+    data

data/app/assets/javascripts/tomify/dynamic/classes/store.coffee

@@ -0,0 +1,37 @@
+class @Store extends Observer
+  @base: Store
+  @create: (namespace, data) ->
+    @namespace namespace, new @(data)
+  constructor: (data) ->
+    @data = data ? {}
+  set: (data) ->
+    @data = data
+    @trigger "change", data
+    @
+  merge: (data) ->
+    throw "Store: Invalid Data Type" unless @isObject()
+    @trigger "merge", data
+    @set($.extend({}, @get(), data))
+  push: (data) ->
+    throw "Store: Invalid Data Type" unless @isArray()
+    @trigger "push", data
+    @set(@get().concat([data]))
+  remove: (field) ->
+    throw "Store: Invalid Data Type" unless @isObject()
+    @trigger "remove", data
+    data = @get()
+    delete data[field]
+    @set(item for item in data when item?)
+  get: (field) ->
+    throw "Store: Invalid Data Type" unless @isDefined()
+    return @data if @isString() && !field
+    data = $.extend(@data.constructor(), @data)
+    if field then data[field] else data
+  empty: ->
+    return @data.length == 0 if @isArray()
+    return Object.keys(@data).length == 0 if @isObject()
+    @data?
+  isDefined: -> @data?
+  isObject: -> @data instanceof Object
+  isArray: -> @data instanceof Array
+  isString: -> $.type(@data) == "string"

data/app/assets/javascripts/tomify/dynamic/global.coffee

@@ -0,0 +1,16 @@
+messages = Store.create "Messages", []
+settings = Store.create "Settings", []
+user = Store.create "User", {}
+env = Store.create "Env", {}
+env.on "change", ->
+  current = env.get()
+  messages.set current.messages
+  settings.set current.settings
+  user.set current.user ? {}
+
+$ -> env.set(window.env)
+
+@message = (message) -> messages.push message
+@setting = (name) ->
+  setting = settings.get().find (setting) -> setting.name == name
+  setting?.value

data/app/assets/javascripts/tomify/dynamic/react/components/admin/pages.coffee.erb

@@ -0,0 +1,30 @@
+model = Model.findOrCreate "Admin.Page"
+model.columns = [
+  { name: "active", value: (r) -> if r.active then "Yes" else "No" },
+  { name: "rank" },
+  { name: "parent_id", value: (r) -> r.parent?.name ? "None" },
+  { name: "sidebar_id", value: (r) -> r.sidebar?.name ? "None" },
+  { name: "name" },
+  { name: "path" },
+  { name: "updated_at", value: (r) -> r.updated_at.date() },
+  { name: "actions", edit: true, destroy: true, view: (r) ->
+    <a key="visit" href="/#{r.path}" target="_blank">Visit</a>
+  }
+]
+
+form = new Form("horizontal")
+form.add "parent_id", "select", model: "Admin.Page", allowBlank: true
+form.add "sidebar_id", "select", model: "Admin.Sidebar", allowBlank: true
+form.add "active", "checkbox"
+form.add "root", "checkbox", label: "If checked, this page will be available at <a href='/' target='_blank'>#{location.origin}</a>"
+form.add "rank", "number"
+form.add "name", "text"
+form.add "template", "select", options: <%= Tomify::Page.templates %>
+form.add "path", "text"
+form.add "title", "text"
+form.add "description", "textarea"
+form.add "cover_image", "file"
+form.add "share_image", "file"
+form.add "text", "markdown"
+
+Component.create "Admin.Pages.Index.Container", render: -> <Index.Container name="Admin.Page" form={form} />

data/app/assets/javascripts/tomify/dynamic/react/components/admin/settings.coffee

@@ -0,0 +1,27 @@
+model = Model.findOrCreate "Admin.Setting"
+model.columns = [
+  { name: "name" },
+  { name: "type", value: (r) -> r.type.split("::").last },
+  { name: "value", value: (r) ->
+    type = r.type.split("::").last
+    return "#{r.value}" if type == "Boolean"
+    return "JSON (Don't Edit)" if type == "Json"
+    r.value
+  },
+  { name: "updated_at", value: (r) -> r.updated_at.date() },
+  { name: "actions", edit: true, destroy: true }
+]
+
+options = ["Boolean", "Json", "Text", "Uploader"]
+options = ({ name: option, value: "Tomify::Setting::#{option}" } for option in options)
+
+newForm = new Form("horizontal")
+newForm.add "type", "select", options: options
+newForm.add "name", "text"
+newForm.add "value", "text"
+
+editForm = new Form("horizontal")
+editForm.add "name", "text"
+editForm.add "value", "text"
+
+Component.create "Admin.Settings.Index.Container", render: -> <Index.Container name="Admin.Setting" newForm={newForm} editForm={editForm} />

data/app/assets/javascripts/tomify/dynamic/react/components/admin/sidebars.coffee

@@ -0,0 +1,16 @@
+model = Model.findOrCreate "Admin.Sidebar"
+model.columns = [
+  { name: "active", value: (r) -> if r.active then "Yes" else "No" },
+  { name: "name" },
+  { name: "heading" },
+  { name: "updated_at", value: (r) -> r.updated_at.date() },
+  { name: "actions", edit: true, destroy: true }
+]
+
+form = new Form("horizontal")
+form.add "active", "checkbox"
+form.add "name", "text"
+form.add "heading", "text"
+form.add "text", "markdown"
+
+Component.create "Admin.Sidebars.Index.Container", render: -> <Index.Container name="Admin.Sidebar" form={form} />

data/app/assets/javascripts/tomify/dynamic/react/components/admin/uploads.coffee

@@ -0,0 +1,13 @@
+model = Model.findOrCreate "Admin.Upload"
+model.columns = [
+  { name: "name" },
+  { name: "file", value: (r) -> <a href={r.file.url} target="_blank">View</a> },
+  { name: "updated_at", value: (r) -> r.updated_at.date() },
+  { name: "actions", edit: true, destroy: true }
+]
+
+form = new Form("horizontal")
+form.add "name", "text"
+form.add "file", "file"
+
+Component.create "Admin.Uploads.Index.Container", render: -> <Index.Container name="Admin.Upload" form={form} />

data/app/assets/javascripts/tomify/dynamic/react/components/admin/users.coffee

@@ -0,0 +1,18 @@
+model = Model.findOrCreate "Admin.User"
+model.columns = [
+  { name: "admin", value: (r) -> if r.admin then "Yes" else "No" },
+  { name: "email" },
+  { name: "first_name" },
+  { name: "last_name" },
+  { name: "created_at", value: (r) -> r.created_at.date() },
+  { name: "updated_at", value: (r) -> r.updated_at.date() },
+  { name: "actions", edit: true, destroy: true }
+]
+
+form = new Form("horizontal")
+form.add "admin", "checkbox"
+form.add "email", "text"
+form.add "first_name", "text"
+form.add "last_name", "text"
+
+Component.create "Admin.Users.Index.Container", render: -> <Index.Container name="Admin.User" form={form} />

data/app/assets/javascripts/tomify/dynamic/react/components/edit.coffee

@@ -0,0 +1,51 @@
+Component.create "Edit.Container",
+  componentWillInitialize: ->
+    @model = Model.findOrCreate @props.name
+    @store = Store.findOrCreate "#{@props.name}.Edit"
+    @form = @props.form.setComponent @
+    @follow @model.on "new", @modelNew
+    @follow @model.on "edit", @modelEdit
+    @follow @model.on "update", @modelUpdate
+    @follow @model.on "destroy", @modelDestroy
+  modelNew: ->
+    @store.merge(show: false)
+  modelEdit: (response) ->
+    @form.record.set(response.data)
+    @form.setDefaultValues()
+    @store.merge(show: true)
+  modelUpdate: (response) ->
+    message type: response.type, text: response.message
+    @store.merge(show: false) if response.type == "success"
+  modelDestroy: ->
+    @store.merge(show: false)
+  submit: (e) ->
+    e.preventDefault()
+    return @update() && false unless @form.changes.empty()
+    message type: "warning", text: "#{@model.name.titleize} was not updated"
+    false
+  update: ->
+    @model.update @form.record.get("id"), @form.changes.get()
+  cancel: (e) ->
+    e.preventDefault()
+    @store.merge(show: false)
+    false
+  render: ->
+    return <div /> unless @state.store.show
+    <div className="row">
+      <div className="col-xs-12">
+        <div className="panel panel-default">
+          <div className="panel-heading">
+            <h4>Edit {@model.name.titleize}</h4>
+            <a className="btn btn-danger pull-right" href="#" onClick={@cancel}><i className="fa fa-close" /></a>
+          </div>
+          <div className="panel-body">
+            <form className="form-horizontal" onSubmit={@submit}>
+              {@form.render()}
+              <div className="col-sm-offset-2 col-sm-10">
+                <input type="submit" name="commit" value="Update #{@model.name.titleize}" className="btn btn-primary btn-disabled" />
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/fields/checkbox.coffee

@@ -0,0 +1,8 @@
+Component.create "Form.Field.Checkbox",
+  render: ->
+    <div className="checkbox">
+      <label>
+        <input type="checkbox" name={@props.name} id={@props.name} checked={@props.value(@props.name)} onChange={@props.onChange.bind(null, @props.name)} />
+        <span dangerouslySetInnerHTML={{__html: @props.label}} />
+      </label>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/fields/default.coffee

@@ -0,0 +1,3 @@
+Component.create "Form.Field.Default",
+  render: ->
+    <input placeholder={@props.name.titleize} className="form-control" type={@props.type} name={@props.name} id={@props.name} value={@props.value(@props.name)} onChange={@props.onChange.bind(null, @props.name)} />

data/app/assets/javascripts/tomify/dynamic/react/components/fields/file.coffee

@@ -0,0 +1,3 @@
+Component.create "Form.Field.File",
+  render: ->
+    <input placeholder={@props.name.titleize} className="form-control" type="file" name={@props.name} id={@props.name} onChange={@props.onChange.bind(null, @props.name)} />

data/app/assets/javascripts/tomify/dynamic/react/components/fields/markdown.coffee

@@ -0,0 +1,9 @@
+Component.create "Form.Field.Markdown",
+  render: ->
+    <div>
+      <p className="form-control-static">
+        You can use <a href="https://guides.github.com/features/mastering-markdown/#examples" target="_blank">markdown syntax</a> to bedazzle the content
+      </p>
+      <textarea placeholder="## Example Markdown\n\nTry to **be bold** or *maybe italic*.\n\nWrite a link [to somewhere](http://tomify.me) or even embed an image with ![Some alt text](http://tomify.me/logo.jpg)." rows=5 className="form-control" type="text" name={@props.name} id={@props.name} value={@props.value(@props.name)} onChange={@props.onChange.bind(null, @props.name)} />
+      <p className="help-block">Drag the bottom right corner down to enlarge the box</p>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/fields/select.coffee

@@ -0,0 +1,8 @@
+Component.create "Form.Field.Select",
+  render: ->
+    <select className="form-control" name={@props.name} id={@props.name} value={@props.value(@props.name)} onChange={@props.onChange.bind(null, @props.name)}>
+      {<option key="none">None</option> if @props.allow_blank}
+      {for option in @props.options?() || @props.options
+        <option key={option.value} value={option.value}>{option.name}</option>
+      }
+    </select>

data/app/assets/javascripts/tomify/dynamic/react/components/fields/textarea.coffee

@@ -0,0 +1,3 @@
+Component.create "Form.Field.Textarea",
+  render: ->
+    <textarea placeholder={@props.name.titleize} className="form-control" type="text" name={@props.name} id={@props.name} value={@props.value(@props.name)} onChange={@props.onChange.bind(null, @props.name)} />