Merge pull request #43 from rafaelfranca/create_documentation

[WIP] - Create the documentation for the integration of Simple Form and Bootstrap.

Gemfile

@@ -1,7 +1,7 @@
 source 'http://rubygems.org'
 ruby '2.1.1'
 
-gem 'rails', '~> 4.1.0.rc2'
+gem 'rails', '~> 4.1.0'
 
 gem 'json'
 gem 'thin'

Gemfile.lock

@@ -10,34 +10,33 @@ GIT
 GEM
   remote: http://rubygems.org/
   specs:
-    actionmailer (4.1.0.rc2)
-      actionpack (= 4.1.0.rc2)
-      actionview (= 4.1.0.rc2)
+    actionmailer (4.1.0)
+      actionpack (= 4.1.0)
+      actionview (= 4.1.0)
       mail (~> 2.5.4)
-    actionpack (4.1.0.rc2)
-      actionview (= 4.1.0.rc2)
-      activesupport (= 4.1.0.rc2)
+    actionpack (4.1.0)
+      actionview (= 4.1.0)
+      activesupport (= 4.1.0)
       rack (~> 1.5.2)
       rack-test (~> 0.6.2)
-    actionview (4.1.0.rc2)
-      activesupport (= 4.1.0.rc2)
+    actionview (4.1.0)
+      activesupport (= 4.1.0)
       builder (~> 3.1)
       erubis (~> 2.7.0)
-    activemodel (4.1.0.rc2)
-      activesupport (= 4.1.0.rc2)
+    activemodel (4.1.0)
+      activesupport (= 4.1.0)
       builder (~> 3.1)
-    activerecord (4.1.0.rc2)
-      activemodel (= 4.1.0.rc2)
-      activesupport (= 4.1.0.rc2)
+    activerecord (4.1.0)
+      activemodel (= 4.1.0)
+      activesupport (= 4.1.0)
       arel (~> 5.0.0)
-    activesupport (4.1.0.rc2)
+    activesupport (4.1.0)
       i18n (~> 0.6, >= 0.6.9)
       json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
       thread_safe (~> 0.1)
       tzinfo (~> 1.1)
     arel (5.0.0)
-    atomic (1.1.16)
     bootstrap-sass (3.1.1.0)
       sass (~> 3.2)
     builder (3.2.2)
@@ -62,19 +61,19 @@ GEM
     rack (1.5.2)
     rack-test (0.6.2)
       rack (>= 1.0)
-    rails (4.1.0.rc2)
-      actionmailer (= 4.1.0.rc2)
-      actionpack (= 4.1.0.rc2)
-      actionview (= 4.1.0.rc2)
-      activemodel (= 4.1.0.rc2)
-      activerecord (= 4.1.0.rc2)
-      activesupport (= 4.1.0.rc2)
+    rails (4.1.0)
+      actionmailer (= 4.1.0)
+      actionpack (= 4.1.0)
+      actionview (= 4.1.0)
+      activemodel (= 4.1.0)
+      activerecord (= 4.1.0)
+      activesupport (= 4.1.0)
       bundler (>= 1.3.0, < 2.0)
-      railties (= 4.1.0.rc2)
-      sprockets-rails (~> 2.0.0)
-    railties (4.1.0.rc2)
-      actionpack (= 4.1.0.rc2)
-      activesupport (= 4.1.0.rc2)
+      railties (= 4.1.0)
+      sprockets-rails (~> 2.0)
+    railties (4.1.0)
+      actionpack (= 4.1.0)
+      activesupport (= 4.1.0)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rake (10.2.2)
@@ -99,8 +98,7 @@ GEM
       eventmachine (>= 1.0.0)
       rack (>= 1.0.0)
     thor (0.19.1)
-    thread_safe (0.3.1)
-      atomic (>= 1.1.7, < 2)
+    thread_safe (0.3.3)
     tilt (1.4.1)
     treetop (1.4.15)
       polyglot
@@ -119,7 +117,7 @@ DEPENDENCIES
   jquery-rails
   json
   pg
-  rails (~> 4.1.0.rc2)
+  rails (~> 4.1.0)
   sass-rails (~> 4.0.2)
   simple_form (~> 3.0.0)!
   sqlite3

app/assets/javascripts/application.js

@@ -7,4 +7,6 @@
 //= require jquery
 //= require jquery_ujs
 //= require bootstrap
+//= require rainbow
+//= require ruby
 //

app/assets/stylesheets/application.css

@@ -1,5 +1,6 @@
 /*
  *= require bootstrap
+ *= require github
 */
 
 body {

app/controllers/documentation_controller.rb

@@ -0,0 +1,5 @@
+class DocumentationController < ApplicationController
+  def index
+    @user_basic = User.new
+  end
+end

app/views/documentation/form_example.html.erb

@@ -0,0 +1,22 @@
+
+<%%= simple_form_for @user_basic, url: create_basic_examples_url, as: 'user_basic'  do |f| %>
+
+  <%%= f.input :email, placeholder: 'Enter email' %>
+
+  <%%= f.input :password, placeholder: 'Password' %>
+
+  <%%= f.input :file, as: :file, wrapper: :vertical_file_input %>
+
+  <%%= f.input :active, wrapper: :vertical_boolean %>
+
+  <%%= f.input :choices, as: :check_boxes,
+    collection: [
+      'Option one is this and that—be sure to include why it\'s great',
+      'Option two can be something else and selecting it will deselect option one'],
+      wrapper: :vertical_radio_and_checkboxes %>
+
+  <%%= f.input :sex, as: :radio_buttons,
+    collection: ['Male', 'Female'], wrapper: :vertical_radio_and_checkboxes %>
+
+  <%%= f.button :submit %>
+<%% end %>

app/views/documentation/form_example_with_wrapper_mappings.html.erb

@@ -0,0 +1,27 @@
+
+<%%= simple_form_for @user_basic, url: create_basic_examples_url, as: 'user_basic',
+  wrapper_mappings: {
+    check_boxes: :vertical_radio_and_checkboxes,
+    radio_buttons: :vertical_radio_and_checkboxes,
+    file: :vertical_file_input,
+    boolean: :vertical_boolean
+  } do |f| %>
+
+  <%%= f.input :email, placeholder: 'Enter email' %>
+
+  <%%= f.input :password, placeholder: 'Password' %>
+
+  <%%= f.input :file, as: :file %>
+
+  <%%= f.input :active %>
+
+  <%%= f.input :choices, as: :check_boxes,
+    collection: [
+      'Option one is this and that—be sure to include why it\'s great',
+      'Option two can be something else and selecting it will deselect option one'] %>
+
+  <%%= f.input :sex, as: :radio_buttons,
+    collection: ['Male', 'Female'] %>
+
+  <%%= f.button :submit %>
+<%% end %>

app/views/documentation/index.html.erb

@@ -0,0 +1,77 @@
+<% content_for :breadcrumb do %>
+  <li><%= link_to "Home", root_path %></li>
+  <li class="active">Documentation</li>
+<% end %>
+
+<div class='row'>
+  <h3>How to build your Rails application with Simple Form and Bootstrap</h3>
+</div>
+
+<div class='row'>
+  <h4>Configuring your Rails app with Simple Form and Bootstrap</h4>
+  <ol>
+    <li>Create your new Rails application: <code>rails new my_new_app</code></li>
+    <li>Open the generated Gemfile and add the Simple Form dependency: <code>gem 'simple_form'</code></li>
+    <li>Install the dependencies: <code>bundle install</code></li>
+    <li>Install the Simple Form, using the --bootstrap option: <code>rails generate simple_form:install --bootstrap</code></li>
+    <li>Now you have a new Rails application using Simple Form and configured to use Bootstrap</li>
+  </ol>
+</div>
+
+<div class='row'>
+  <h4>Building your first form</h4>
+
+  <p>Example: Lets build the following form.</p>
+</div>
+
+<div class='row'>
+  <%= render partial: 'examples/basic_example_sf', layout: 'examples/sf_label', locals: { title: 'Basic Form' } %>
+</div>
+
+<div class='row'>
+  <p>The code is straightforward and looks like this:</p>
+
+  <pre>
+    <code data-language='ruby'>
+      <%= render file: 'documentation/form_example' %>
+    </code>
+  </pre>
+</div>
+
+<div class='row'>
+  <p>The code is very simple, isn't it?</p>
+
+  <p>
+    But it can get better! We can use the <code>wrapper_mapping</code> option
+    to remove that wrapper duplication. This option receives a Hash containing an input
+    type and the wrapper that will be used for all inputs with specified type.
+  </p>
+
+  <p>
+    Example:
+    <pre>
+      <code data-language='ruby'>{ string: :string_wrapper, boolean: :boolean_wrapper }</code>
+    </pre>
+
+    All the String inputs will now use the <code>:string_wrapper</code>, and the
+    same applies to boolean fields, which will use the <code>:boolean_wrapper</code>
+    for all its inputs.
+    You can see more information about wrapper_mappings
+    <%= link_to 'here.', 'https://github.com/plataformatec/simple_form/blob/v3.0.2/lib/simple_form.rb#L107-L111' %>
+  </p>
+</div>
+
+<div class="row">
+  <pre>
+    <code data-language='ruby'>
+      <%= render file: 'documentation/form_example_with_wrapper_mappings' %>
+    </code>
+  </pre>
+</div>
+
+<div class="row">
+  <p>
+    Simple, right? You can see the code for the other examples
+    <%= link_to 'on GitHub.', 'https://github.com/rafaelfranca/simple_form-bootstrap' %>
+  </p>
+</div>

app/views/examples/_basic_example_sf.html.erb

@@ -5,6 +5,7 @@
     file: :vertical_file_input,
     boolean: :vertical_boolean
   } do |f| %>
+
   <%= f.input :email, placeholder: 'Enter email' %>
 
   <%= f.input :password, placeholder: 'Password' %>

app/views/layouts/application.html.erb

@@ -19,6 +19,7 @@
         <ul class="nav navbar-nav">
           <li><%= link_to "Home", root_path %></li>
           <li><%= link_to "Examples", examples_path %></li>
+          <li><%= link_to "Documentation", documentation_path %></li>
         </ul>
       </div>
     </div>

config/routes.rb

@@ -1,4 +1,6 @@
 Rails.application.routes.draw do
+  get 'documentation', to: 'documentation#index', as: :documentation
+
   resources :examples, only: :index do
     collection do
       post :create_basic