bootstrap_form 2.7.0 → 4.0.0.alpha1

data/Rakefile

@@ -1,37 +1,27 @@
-#!/usr/bin/env rake
 begin
   require 'bundler/setup'
 rescue LoadError
   puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
-begin
-  require 'rdoc/task'
-rescue LoadError
-  require 'rdoc/rdoc'
-  require 'rake/rdoctask'
-  RDoc::Task = Rake::RDocTask
-end
+
+require 'rdoc/task'
 
 RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_dir = 'rdoc'
   rdoc.title    = 'BootstrapForm'
   rdoc.options << '--line-numbers'
-  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('README.md')
   rdoc.rdoc_files.include('lib/**/*.rb')
 end
 
-
-
-Bundler::GemHelper.install_tasks
+require 'bundler/gem_tasks'
 
 require 'rake/testtask'
 
 Rake::TestTask.new(:test) do |t|
-  t.libs << 'lib'
   t.libs << 'test'
   t.pattern = 'test/**/*_test.rb'
   t.verbose = false
 end
 
-
-task :default => :test
+task default: :test

data/UPGRADE-4.0.md

@@ -0,0 +1,79 @@
+# Upgrading to `bootstrap_form` 4.0
+We made every effort to make the upgrade from `bootstrap_form` v2.7 (Bootstrap 3) to `bootstrap_form` v4.0 (Bootstrap 4) as easy as possible. However, Bootstrap 4 is fundamentally different from Bootstrap 3, so some changes may be necessary in your code.
+
+## Bootstrap 4 Changes
+If you made use of Bootstrap classes or Javascript, you should read the [Bootstrap 4 migration guide](https://getbootstrap.com/docs/4.0/migration/).
+
+## Validation Error Messages
+With Bootstrap 4, in order for validation error messages to display, the message has to be a sibling of the `input` tag, and the `input` tag has to have the `.is-invalid` class. This was different from Bootstrap 3, and forced some changes to `bootstrap_form` that may affect programs that used `bootstrap_form` v2.7.
+
+### Arbitrary Text in `form_group` Blocks
+In `bootstrap_form` v2.7, it was possible to write something like this:
+```
+<%= bootstrap_form_for(@user) do |f| %>
+  <%= f.form_group(:email) do %>
+    <p class="form-control-static">Bar</p>
+  <%= end %>
+<%= end %>
+```
+and, if `@user.email` had validation errors, it would render:
+```
+<div class="form-group has-error">
+  <p class="form-control-static">Bar</p>
+  <span class="help-block">can't be blank, is too short (minimum is 5 characters)</span>
+</div>
+```
+which would show an error message in red.
+
+That doesn't work in Bootstrap 4. Outputting error messages had to be moved to accommodate other changes, so `form_group` no longer outputs error messages unless whatever is inside the block is a `bootstrap_form` helper.
+
+One way to make the above behave the same in `bootstrap_form` v4.0 is to write it like this:
+
+```
+<%= bootstrap_form_for(@user) do |f| %>
+  <%= f.form_group(:email) do %>
+    <p class="form-control-plaintext">Bar</p>
+    <%= content_tag(:div, @user.errors[:email].join(", "), class: "invalid-feedback", style: "display: block;") unless @user.errors[:email].empty? %>
+  <%= end %>
+<%= end %>
+```
+
+### Check Boxes and Radio Buttons
+Bootstrap 4 marks up check boxes and radio buttons differently. In particular, Bootstrap 4 wraps the `input` and `label` tags in a `div.form-check` tag. Because validation error messages have to be siblings of the `input` tag, there is now an `error_message` option to `check_box` and `radio_button` to cause them to put the validation error messages inside the `div.form-check`.
+
+This change is mostly invisible to existing programs:
+
+- Since the default for `error_message` is false, use of `check_box` and `radio_button` all by themselves behaves the same as in `bootstrap_form` v2.7
+- All the `collection*` helpers that output radio buttons and check boxes arrange to produce the validation error message on the last check box or radio button of the group, like `bootstrap_form` v2.7 did
+
+There is one situation where an existing program will have to change. When rendering one or more check boxes or radio buttons inside a `form_group` block, the last call to `check_box` or `radio_button` in the block will have to have `error_message: true` added to its parameters, like this:
+
+```
+<%= bootstrap_form_for(@user) do |f| %>
+  <%= f.form_group(:education) do %>
+    <%= f.radio_button(:misc, "primary school") %>
+    <%= f.radio_button(:misc, "high school") %>
+    <%= f.radio_button(:misc, "university", error_message: true) %>
+  <%= end %>
+<%= end %>
+```
+
+## `form-group` and Horizontal Forms
+In Bootstrap 3, `.form-group` mixed in `.row`. In Bootstrap 4, it doesn't. So `bootstrap_form` automatically adds `.row` to the `div.form-group`s that it creates, if the form group is in a horizontal layout. When migrating forms from the Bootstrap 3 version of `bootstrap_form` to the Bootstrap 4 version, check all horizontal forms to be sure they're being rendered properly.
+
+Bootstrap 4 also provides a `.form-row`, which has smaller gutters than `.row`. If you specify ".form-row", `bootstrap_form` will replace `.row` with `.form-row` on the `div.form-group`. When calling `form_group` directly, do something like this:
+```
+bootstrap_form_for(@user, layout: "horizontal") do |f|
+  f.form_group class: "form-row" do
+    ...
+  end
+end
+```
+For the other helpers, do something like this:
+```
+bootstrap_form_for(@user, layout: "horizontal") do |f|
+  f.form_group class: "form-row" do
+  f.text_field wrapper_class: "form-row" # or f.text_field wrapper: { class: "form-row" }
+    ...
+  end
+end

data/bootstrap_form.gemspec

@@ -0,0 +1,28 @@
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+
+require "bootstrap_form/version"
+
+Gem::Specification.new do |s|
+  s.name        = "bootstrap_form"
+  s.version     = BootstrapForm::VERSION
+  s.authors     = ["Stephen Potenza", "Carlos Lopes"]
+  s.email       = ["potenza@gmail.com", "carlos.el.lopes@gmail.com"]
+  s.homepage    = "https://github.com/bootstrap-ruby/bootstrap_form"
+  s.summary     = "Rails form builder that makes it easy to style forms using "\
+                  "Bootstrap 4"
+  s.description = "bootstrap_form is a rails form builder that makes it super "\
+                  "easy to create beautiful-looking forms using Bootstrap 4"
+  s.license     = "MIT"
+
+  s.files = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test)/})
+  end
+
+  s.bindir        = "exe"
+  s.require_paths = ["lib"]
+
+  s.required_ruby_version = ">= 2.2.2"
+
+  s.add_dependency "rails", ">= 5.0"
+end

data/demo/README.md

@@ -0,0 +1,17 @@
+# DEMO APP (Rails 5.2)
+
+### Usage
+
+- `rake db:schema:load`
+- `rails s`
+- Navigate to http://localhost:3000
+
+### Following files were added or changed:
+
+- db/schema.rb
+- config/{application, routes, boot}.rb
+- config/environments/{development, test}.rb
+- app/models/{address,user,super_user,faux_user}.rb
+- app/controllers/bootstrap_controller.rb
+- app/views/layouts/application.html.erb
+- app/views/bootstrap/form.html.erb

data/demo/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative 'config/application'
+
+Rails.application.load_tasks

data/demo/app/controllers/application_controller.rb

@@ -0,0 +1,2 @@
+class ApplicationController < ActionController::Base
+end

data/demo/app/controllers/bootstrap_controller.rb

@@ -0,0 +1,16 @@
+class BootstrapController < ApplicationController
+
+  def form
+    @collection = [
+      Address.new(id: 1, street: 'Foo'),
+      Address.new(id: 2, street: 'Bar')
+    ]
+
+    @user = User.new
+
+    @user_with_error = User.new
+    @user_with_error.errors.add(:email)
+    @user_with_error.errors.add(:misc)
+  end
+
+end

data/demo/app/helpers/bootstrap_helper.rb

@@ -0,0 +1,23 @@
+module BootstrapHelper
+
+  def form_with_source(&block)
+    form_html = capture(&block)
+
+    content_tag(:div, class: "example") do
+      codemirror = content_tag(:div, class: "code", style: "display: none") do
+        content_tag(:textarea, class: "codemirror") do
+          HtmlBeautifier.beautify(form_html.strip.gsub(">", ">\n").gsub("<", "\n<"))
+        end
+      end
+
+      toggle = content_tag(:button, class: "toggle btn btn-sm btn-info") do
+        "Show Source Code"
+      end
+
+      concat(form_html)
+      concat(toggle)
+      concat(codemirror)
+    end
+  end
+
+end

data/demo/app/models/application_record.rb

@@ -0,0 +1,3 @@
+class ApplicationRecord < ActiveRecord::Base
+  self.abstract_class = true
+end

data/demo/app/views/bootstrap/form.html.erb

@@ -0,0 +1,53 @@
+<h3>Horizontal Form</h3>
+
+<%= form_with_source do %>
+  <%= bootstrap_form_for @user, layout: :horizontal do |form| %>
+    <%= form.email_field :email, placeholder: "Enter Email", label: "Email address", help: "We'll never share your email with anyone else" %>
+    <%= form.password_field :password, placeholder: "Password" %>
+    <%= form.select :status, [['activated', 1], ['blocked', 2]], prompt: "Please Select" %>
+    <%= form.text_area :misc %>
+    <%= form.check_box :terms, label: "Agree to Terms" %>
+    <%= form.collection_check_boxes :misc, @collection, :id, :street %>
+    <%= form.collection_radio_buttons :misc, @collection, :id, :street %>
+    <%= form.file_field :misc %>
+    <%= form.datetime_select :misc, include_blank: true %>
+
+    <%= form.submit %>
+  <% end %>
+<% end %>
+
+<h3>With Validation Error</h3>
+
+<%= form_with_source do %>
+  <%= bootstrap_form_for @user_with_error, layout: :horizontal do |form| %>
+    <%= form.alert_message "This is an alert" %>
+    <%= form.error_summary %>
+    <%= form.email_field :email, placeholder: "Enter Email", label: "Email address", help: "We'll never share your email with anyone else" %>
+    <%= form.collection_check_boxes :misc, @collection, :id, :street %>
+    <%= form.submit %>
+  <% end %>
+<% end %>
+
+<h3>Inline Form</h3>
+
+<%= form_with_source do %>
+  <%= bootstrap_form_for @user, layout: :inline do |form| %>
+    <%= form.email_field :email, placeholder: "Enter Email", label: "Email address", help: "We'll never share your email with anyone else" %>
+    <%= form.password_field :password, placeholder: "Password" %>
+    <%= form.check_box :terms, label: "Agree to Terms" %>
+    <%= form.collection_check_boxes :misc, @collection, :id, :street %>
+    <%= form.submit %>
+  <% end %>
+<% end %>
+
+<h3>Simple</h3>
+
+<%= form_with_source do %>
+  <%= bootstrap_form_for @user, url: "/" do |form| %>
+    <%= form.email_field :email, placeholder: "Enter Email", label: "Email address", help: "We'll never share your email with anyone else" %>
+    <%= form.password_field :password, placeholder: "Password" %>
+    <%= form.check_box :terms, label: "Agree to Terms" %>
+    <%= form.collection_check_boxes :misc, @collection, :id, :street %>
+    <%= form.submit %>
+  <% end %>
+<% end %>

data/demo/app/views/layouts/application.html.erb

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css">
+
+    <style type="text/css">
+      .example {
+        padding: 1.5em;
+        border: .2rem solid #f7f7f9;
+        margin-bottom: 3em;
+      }
+      form {
+        margin-bottom: 1.5em;
+      }
+      .CodeMirror {
+        border: 1px solid #eee;
+        height: auto;
+      }
+      .rails-bootstrap-forms-datetime-select select {
+        display: inline-block;
+        width: auto;
+      }
+    </style>
+
+    <title>Hello, world!</title>
+    <%= csrf_meta_tags %>
+  </head>
+
+  <body>
+    <div class="container">
+      <%= yield %>
+    </div>
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/xml/xml.min.js"></script>
+
+    <script type="text/javascript">
+      $(document).on("click", "button.toggle", function(){
+        var example = $(this).parent(".example");
+        $(this).hide();
+        $(".code", example).show()
+        CodeMirror.fromTextArea($("textarea.codemirror", example)[0], {
+          mode:           "htmlmixed",
+          tabSize:        2,
+          lineNumbers:    true,
+          viewportMargin: Infinity
+        })
+      });
+    </script>
+  </body>
+</html>

data/demo/bin/bundle

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
+load Gem.bin_path('bundler', 'bundle')

data/{test/dummy → demo}/bin/rails

@@ -1,4 +1,4 @@
 #!/usr/bin/env ruby
-APP_PATH = File.expand_path('../../config/application',  __FILE__)
+APP_PATH = File.expand_path('../config/application', __dir__)
 require_relative '../config/boot'
 require 'rails/commands'

data/demo/bin/setup

@@ -0,0 +1,36 @@
+#!/usr/bin/env ruby
+require 'fileutils'
+include FileUtils
+
+# path to your application root.
+APP_ROOT = File.expand_path('..', __dir__)
+
+def system!(*args)
+  system(*args) || abort("\n== Command #{args} failed ==")
+end
+
+chdir APP_ROOT do
+  # This script is a starting point to setup your application.
+  # Add necessary setup steps to this file.
+
+  puts '== Installing dependencies =='
+  system! 'gem install bundler --conservative'
+  system('bundle check') || system!('bundle install')
+
+  # Install JavaScript dependencies if using Yarn
+  # system('bin/yarn')
+
+  # puts "\n== Copying sample files =="
+  # unless File.exist?('config/database.yml')
+  #   cp 'config/database.yml.sample', 'config/database.yml'
+  # end
+
+  puts "\n== Preparing database =="
+  system! 'bin/rails db:setup'
+
+  puts "\n== Removing old logs and tempfiles =="
+  system! 'bin/rails log:clear tmp:clear'
+
+  puts "\n== Restarting application server =="
+  system! 'bin/rails restart'
+end

data/demo/bin/update

@@ -0,0 +1,31 @@
+#!/usr/bin/env ruby
+require 'fileutils'
+include FileUtils
+
+# path to your application root.
+APP_ROOT = File.expand_path('..', __dir__)
+
+def system!(*args)
+  system(*args) || abort("\n== Command #{args} failed ==")
+end
+
+chdir APP_ROOT do
+  # This script is a way to update your development environment automatically.
+  # Add necessary update steps to this file.
+
+  puts '== Installing dependencies =='
+  system! 'gem install bundler --conservative'
+  system('bundle check') || system!('bundle install')
+
+  # Install JavaScript dependencies if using Yarn
+  # system('bin/yarn')
+
+  puts "\n== Updating database =="
+  system! 'bin/rails db:migrate'
+
+  puts "\n== Removing old logs and tempfiles =="
+  system! 'bin/rails log:clear tmp:clear'
+
+  puts "\n== Restarting application server =="
+  system! 'bin/rails restart'
+end

data/demo/bin/yarn

@@ -0,0 +1,11 @@
+#!/usr/bin/env ruby
+APP_ROOT = File.expand_path('..', __dir__)
+Dir.chdir(APP_ROOT) do
+  begin
+    exec "yarnpkg #{ARGV.join(' ')}"
+  rescue Errno::ENOENT
+    $stderr.puts "Yarn executable was not detected in the system."
+    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+    exit 1
+  end
+end