archangel 0.3.0 → 0.4.0

data/app/views/devise/shared/_links.html.erb

@@ -1,41 +1,25 @@
-<ul class="list-inline text-center">
-  <%- if controller_name != "sessions" %>
-    <li class="list-inline-item">
-      <%= link_to("Log in", new_session_path(resource_name), class: "nav-link") %>
-    </li>
-  <% end -%>
+<%- if controller_name != 'sessions' %>
+  <%= link_to "Log in", new_session_path(resource_name) %><br />
+<% end %>
 
-  <%- if Archangel.config.allow_registration && devise_mapping.registerable? && controller_name != "registrations" %>
-    <li class="list-inline-item">
-      <%= link_to("Sign up", new_registration_path(resource_name), class: "nav-link") %>
-    </li>
-  <% end -%>
+<%- if current_site.allow_registration? && devise_mapping.registerable? && controller_name != 'registrations' %>
+  <%= link_to "Sign up", new_registration_path(resource_name) %><br />
+<% end %>
 
-  <%- if devise_mapping.recoverable? && controller_name != "passwords" && controller_name != "registrations" %>
-    <li class="list-inline-item">
-      <%= link_to("Forgot your password?", new_password_path(resource_name), class: "nav-link") %>
-    </li>
-  <% end -%>
+<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+  <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
+<% end %>
 
-  <%- if devise_mapping.confirmable? && controller_name != "confirmations" %>
-    <li class="list-inline-item">
-      <%= link_to("Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: "nav-link") %>
-    </li>
-  <% end -%>
+<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
+<% end %>
 
-  <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != "unlocks" %>
-    <li class="list-inline-item">
-      <%= link_to("Didn't receive unlock instructions?", new_unlock_path(resource_name), class: "nav-link") %>
-    </li>
-  <% end -%>
-</ul>
+<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+  <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
+<% end %>
 
 <%- if devise_mapping.omniauthable? %>
-  <ul class="nav justify-content-center">
-    <%- resource_class.omniauth_providers.each do |provider| %>
-      <li class="list-inline-item">
-        <%= link_to("Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), class: "nav-link") %>
-      </li>
-    <% end -%>
-  </ul>
-<% end -%>
+  <%- resource_class.omniauth_providers.each do |provider| %>
+    <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %><br />
+  <% end %>
+<% end %>

data/app/views/devise/unlocks/new.html.erb

@@ -1,17 +1,18 @@
 <h2>Resend unlock instructions</h2>
 
-<%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
-  <%= devise_error_messages! %>
+<%= simple_form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
+  <%= f.error_notification %>
+  <%= f.full_error :unlock_token %>
 
   <div class="form-inputs">
-    <div class="form-group string required email">
-      <%= f.label :email, class: "control-label string email required" %>
-      <%= f.email_field :email, autofocus: true, class: "form-control string email required" %>
-    </div>
+    <%= f.input :email,
+                required: true,
+                autofocus: true,
+                input_html: { autocomplete: "email" } %>
   </div>
 
-  <div class="form-actions text-right">
-    <%= f.submit "Resend unlock instructions", class: "btn btn-default" %>
+  <div class="form-actions">
+    <%= f.button :submit, "Resend unlock instructions", class: "btn btn-primary" %>
   </div>
 <% end %>
 

data/archangel.gemspec

@@ -25,7 +25,7 @@ Gem::Specification.new do |s|
   s.files       = `git ls-files -z`.split("\x0")
   s.executables = ["archangel"]
 
-  s.required_ruby_version = ">= 2.2.10"
+  s.required_ruby_version = ">= 2.4"
 
   s.add_dependency "jquery-rails", "~> 4.1", ">= 4.1.0"
   s.add_dependency "rails", "~> 5.1", ">= 5.1.4"
@@ -33,28 +33,26 @@ Gem::Specification.new do |s|
 
   s.add_dependency "activerecord-typedstore", "~> 1.2"
   s.add_dependency "acts_as_list", "~> 0.9"
-  s.add_dependency "acts_as_tree", "~> 2.8"
+  s.add_dependency "acts_as_tree", "~> 2.9"
   s.add_dependency "anyway_config", "~> 1.4"
-  s.add_dependency "bootstrap", "~> 4.1"
-  s.add_dependency "carrierwave", "~> 1.2"
+  s.add_dependency "bootstrap", "~> 4.3"
+  s.add_dependency "carrierwave", "~> 1.3"
   s.add_dependency "cocoon", "~> 1.2"
   s.add_dependency "date_validator", "~> 0.9"
-  s.add_dependency "devise", "~> 4.5"
-  s.add_dependency "devise_invitable", "~> 1.7"
+  s.add_dependency "devise", "~> 4.6"
+  s.add_dependency "devise_invitable", "~> 2.0"
   s.add_dependency "file_validators", "~> 2.3"
-  s.add_dependency "font-awesome-rails", "~> 4.7"
+  s.add_dependency "font-awesome-sass", "~> 5.9"
   s.add_dependency "highline", "~> 2.0"
-  s.add_dependency "jbuilder", "~> 2.7"
+  s.add_dependency "jbuilder", "~> 2.9"
   s.add_dependency "kaminari", "~> 1.1"
   s.add_dependency "liquid", "~> 4.0"
-  s.add_dependency "meta-tags", "~> 2.10"
+  s.add_dependency "meta-tags", "~> 2.11"
   s.add_dependency "mini_magick", "~> 4.9"
-  s.add_dependency "momentjs-rails", "~> 2.20"
   s.add_dependency "paranoia", "~> 2.4"
-  s.add_dependency "popper_js", "~> 1.14"
   s.add_dependency "pundit", "~> 2.0"
-  s.add_dependency "responders", "~> 2.4"
-  s.add_dependency "selectize-rails", "~> 0.12"
-  s.add_dependency "simple_form", "~> 4.0"
+  s.add_dependency "responders", "~> 3.0"
+  s.add_dependency "sass-rails", "~> 5.0"
+  s.add_dependency "simple_form", "~> 4.1"
   s.add_dependency "validates", "~> 1.0"
 end

data/config/initializers/devise.rb

@@ -146,7 +146,7 @@ Devise.setup do |config|
 
   # Flag that force a record to be valid before being actually invited
   # Default: false
-  # config.validate_on_invite = true
+  config.validate_on_invite = true
 
   # Resend invitation if user with invited status is invited again
   # Default: true

data/config/initializers/simple_form.rb

@@ -1,5 +1,12 @@
 # frozen_string_literal: true
 
+# Uncomment this and change the path if necessary to include your own
+# components.
+# See https://github.com/plataformatec/simple_form#custom-components to know
+# more about custom components.
+# Dir[Rails.root.join("lib/components/**/*.rb")].each { |f| require f }
+#
+# Use this setup block to configure all options available in SimpleForm.
 SimpleForm.setup do |config|
   # Wrappers are used by the form builder to generate a
   # complete input. You can remove any component from the
@@ -8,7 +15,8 @@ SimpleForm.setup do |config|
   # whole input.
   config.wrappers :default, class: :input,
                             hint_class: :field_with_hint,
-                            error_class: :field_with_errors do |b|
+                            error_class: :field_with_errors,
+                            valid_class: :field_without_errors do |b|
     ## Extensions enabled by default
     # Any of these extensions can be disabled for a
     # given input by passing: `f.input EXTENSION_NAME => false`.
@@ -46,6 +54,9 @@ SimpleForm.setup do |config|
     b.optional :readonly
 
     ## Inputs
+    # b.use :input, class: "input",
+    #               error_class: "is-invalid",
+    #               valid_class: "is-valid"
     b.use :label_input
     b.use :hint,  wrap_with: { tag: :span, class: :hint }
     b.use :error, wrap_with: { tag: :span, class: :error }
@@ -80,9 +91,6 @@ SimpleForm.setup do |config|
   # CSS class to add for error notification helper.
   config.error_notification_class = "error_notification"
 
-  # ID to add for error notification helper.
-  # config.error_notification_id = nil
-
   # Series of attempts to detect a default label method for collection.
   # config.collection_label_methods = [ :to_label, :name, :title, :to_s ]
 
@@ -131,7 +139,7 @@ SimpleForm.setup do |config|
   config.browser_validations = false
 
   # Collection of methods to detect if a file type was given.
-  # config.file_methods = [ :mounted_as, :file?, :public_filename ]
+  # config.file_methods = [ :mounted_as, :file?, :public_filename, :attached? ]
 
   # Custom mappings for input types. This should be a hash containing a regexp
   # to match as key, and the input type that will be used when the field name
@@ -173,5 +181,9 @@ SimpleForm.setup do |config|
   # config.include_default_input_wrapper_class = true
 
   # Defines which i18n scope will be used in Simple Form.
-  # config.i18n_scope = 'simple_form'
+  # config.i18n_scope = "simple_form"
+
+  # Defines validation classes to the input_field. By default it's nil.
+  # config.input_field_valid_class = "is-valid"
+  # config.input_field_error_class = "is-invalid"
 end

data/config/initializers/simple_form_bootstrap.rb

@@ -1,12 +1,46 @@
 # frozen_string_literal: true
 
 SimpleForm.setup do |config|
+  # Default class for buttons
+  config.button_class = "btn"
+
+  # Define the default class of the input wrapper of the boolean input.
+  config.boolean_label_class = "form-check-label"
+
+  # How the label text should be generated altogether with the required text.
+  config.label_text = lambda do |label, required, _explicit_label|
+    "#{label} #{required}"
+  end
+
+  # Define the way to render check boxes / radio buttons with labels.
+  config.boolean_style = :inline
+
+  # You can wrap each item in a collection of radio/check boxes with a tag
+  config.item_wrapper_tag = :div
+
+  # Defines if the default input wrapper class should be included in radio
+  # collection wrappers.
+  config.include_default_input_wrapper_class = false
+
+  # CSS class to add for error notification helper.
   config.error_notification_class = "alert alert-danger"
-  config.button_class = "btn btn-primary"
 
+  # Method used to tidy up errors. Specify any Rails Array method.
+  # :first lists the first message for each field.
+  # :to_sentence to list all errors for each field.
+  config.error_method = :to_sentence
+
+  # add validation classes to `input_field`
+  config.input_field_error_class = "is-invalid"
+  config.input_field_valid_class = "is-valid"
+
+  # vertical forms
+  #
+  # vertical default_wrapper
   config.wrappers :vertical_form, tag: "div",
                                   class: "form-group",
-                                  error_class: "has-error" do |b|
+                                  error_class: "form-group-invalid",
+                                  valid_class: "form-group-valid" do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -14,57 +48,145 @@ SimpleForm.setup do |config|
     b.optional :pattern
     b.optional :min_max
     b.optional :readonly
-    b.use :label, class: "control-label"
+    b.use :label, class: "form-control-label"
+    b.use :input, class: "form-control",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :full_error, wrap_with: { tag: "div", class: "invalid-feedback" }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
 
-    b.use :input, class: "form-control"
-    b.use :error, wrap_with: { tag: "span", class: "help-block" }
-    b.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+  # vertical input for boolean
+  config.wrappers :vertical_boolean, tag: "fieldset",
+                                     class: "form-group",
+                                     error_class: "form-group-invalid",
+                                     valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :form_check_wrapper, tag: "div",
+                                   class: "form-check" do |bb|
+      bb.use :input, class: "form-check-input",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+      bb.use :label, class: "form-check-label"
+      bb.use :full_error, wrap_with: { tag: "div", class: "invalid-feedback" }
+      bb.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+    end
   end
 
-  config.wrappers :vertical_file_input, tag: "div",
+  # vertical input for radio buttons and check boxes
+  config.wrappers :vertical_collection, item_wrapper_class: "form-check",
+                                        tag: "fieldset",
                                         class: "form-group",
-                                        error_class: "has-error" do |b|
+                                        error_class: "form-group-invalid",
+                                        valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :legend_tag, tag: "legend", class: "col-form-label pt-0" do |ba|
+      ba.use :label_text
+    end
+    b.use :input, class: "form-check-input",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
+
+  # vertical input for inline radio buttons and check boxes
+  config.wrappers :vertical_collection_inline,
+                  item_wrapper_class: "form-check form-check-inline",
+                  tag: "fieldset",
+                  class: "form-group",
+                  error_class: "form-group-invalid",
+                  valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :legend_tag, tag: "legend", class: "col-form-label pt-0" do |ba|
+      ba.use :label_text
+    end
+    b.use :input, class: "form-check-input",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
+
+  # vertical file input
+  config.wrappers :vertical_file, tag: "div",
+                                  class: "form-group",
+                                  error_class: "form-group-invalid",
+                                  valid_class: "form-group-valid" do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
     b.optional :minlength
     b.optional :readonly
-    b.use :label, class: "control-label"
-
-    b.use :input
-    b.use :error, wrap_with: { tag: "span", class: "help-block" }
-    b.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+    b.use :label
+    b.use :input, class: "form-control-file",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
   end
 
-  config.wrappers :vertical_boolean, tag: "div",
-                                     class: "form-group",
-                                     error_class: "has-error" do |b|
+  # vertical multi select
+  config.wrappers :vertical_multi_select, tag: "div",
+                                          class: "form-group",
+                                          error_class: "form-group-invalid",
+                                          valid_class: "form-group-valid" do |b|
     b.use :html5
     b.optional :readonly
-
-    b.wrapper tag: "div", class: "checkbox" do |ba|
-      ba.use :label_input
+    b.use :label, class: "form-control-label"
+    b.wrapper tag: "div",
+              class: "d-flex flex-row justify-content-between
+                     align-items-center" do |ba|
+      ba.use :input, class: "form-control mx-1",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
     end
-
-    b.use :error, wrap_with: { tag: "span", class: "help-block" }
-    b.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
   end
 
-  config.wrappers :vertical_radio_and_checkboxes,
-                  tag: "div",
-                  class: "form-group",
-                  error_class: "has-error" do |b|
+  # vertical range input
+  config.wrappers :vertical_range, tag: "div",
+                                   class: "form-group",
+                                   error_class: "form-group-invalid",
+                                   valid_class: "form-group-valid" do |b|
     b.use :html5
+    b.use :placeholder
     b.optional :readonly
-    b.use :label, class: "control-label"
-    b.use :input
-    b.use :error, wrap_with: { tag: "span", class: "help-block" }
-    b.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+    b.optional :step
+    b.use :label
+    b.use :input, class: "form-control-range",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
   end
 
+  # horizontal forms
+  #
+  # horizontal default_wrapper
   config.wrappers :horizontal_form, tag: "div",
-                                    class: "form-group",
-                                    error_class: "has-error" do |b|
+                                    class: "form-group row",
+                                    error_class: "form-group-invalid",
+                                    valid_class: "form-group-valid" do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
@@ -72,105 +194,415 @@ SimpleForm.setup do |config|
     b.optional :pattern
     b.optional :min_max
     b.optional :readonly
-    b.use :label, class: "col-sm-3 control-label"
+    b.use :label, class: "col-sm-3 col-form-label"
+    b.wrapper :grid_wrapper, tag: "div", class: "col-sm-9" do |ba|
+      ba.use :input, class: "form-control",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+      ba.use :full_error, wrap_with: { tag: "div", class: "invalid-feedback" }
+      ba.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+    end
+  end
 
-    b.wrapper tag: "div", class: "col-sm-9" do |ba|
-      ba.use :input, class: "form-control"
-      ba.use :error, wrap_with: { tag: "span", class: "help-block" }
-      ba.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+  # horizontal input for boolean
+  config.wrappers :horizontal_boolean, tag: "div",
+                                       class: "form-group row",
+                                       error_class: "form-group-invalid",
+                                       valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper tag: "label", class: "col-sm-3" do |ba|
+      ba.use :label_text
+    end
+    b.wrapper :grid_wrapper, tag: "div", class: "col-sm-9" do |wr|
+      wr.wrapper :form_check_wrapper, tag: "div", class: "form-check" do |bb|
+        bb.use :input, class: "form-check-input",
+                       error_class: "is-invalid",
+                       valid_class: "is-valid"
+        bb.use :label, class: "form-check-label"
+        bb.use :full_error, wrap_with: {
+          tag: "div",
+          class: "invalid-feedback d-block"
+        }
+        bb.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+      end
     end
   end
 
-  config.wrappers :horizontal_file_input, tag: "div",
-                                          class: "form-group",
-                                          error_class: "has-error" do |b|
+  # horizontal input for radio buttons and check boxes
+  config.wrappers :horizontal_collection, item_wrapper_class: "form-check",
+                                          tag: "div",
+                                          class: "form-group row",
+                                          error_class: "form-group-invalid",
+                                          valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: "col-sm-3 form-control-label"
+    b.wrapper :grid_wrapper, tag: "div", class: "col-sm-9" do |ba|
+      ba.use :input, class: "form-check-input",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+      ba.use :full_error, wrap_with: {
+        tag: "div",
+        class: "invalid-feedback d-block"
+      }
+      ba.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+    end
+  end
+
+  # horizontal input for inline radio buttons and check boxes
+  config.wrappers :horizontal_collection_inline,
+                  item_wrapper_class: "form-check form-check-inline",
+                  tag: "div",
+                  class: "form-group row",
+                  error_class: "form-group-invalid",
+                  valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: "col-sm-3 form-control-label"
+    b.wrapper :grid_wrapper, tag: "div", class: "col-sm-9" do |ba|
+      ba.use :input, class: "form-check-input",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+      ba.use :full_error, wrap_with: {
+        tag: "div",
+        class: "invalid-feedback d-block"
+      }
+      ba.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+    end
+  end
+
+  # horizontal file input
+  config.wrappers :horizontal_file, tag: "div",
+                                    class: "form-group row",
+                                    error_class: "form-group-invalid",
+                                    valid_class: "form-group-valid" do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
     b.optional :minlength
     b.optional :readonly
+    b.use :label, class: "col-sm-3 form-control-label"
+    b.wrapper :grid_wrapper, tag: "div", class: "col-sm-9" do |ba|
+      ba.use :input, error_class: "is-invalid", valid_class: "is-valid"
+      ba.use :full_error, wrap_with: {
+        tag: "div",
+        class: "invalid-feedback d-block"
+      }
+      ba.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+    end
+  end
+
+  # horizontal multi select
+  config.wrappers :horizontal_multi_select,
+                  tag: "div",
+                  class: "form-group row",
+                  error_class: "form-group-invalid",
+                  valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
     b.use :label, class: "col-sm-3 control-label"
+    b.wrapper :grid_wrapper, tag: "div", class: "col-sm-9" do |ba|
+      ba.wrapper tag: "div",
+                 class: "d-flex flex-row justify-content-between
+                         align-items-center" do |bb|
+        bb.use :input, class: "form-control mx-1",
+                       error_class: "is-invalid",
+                       valid_class: "is-valid"
+      end
+      ba.use :full_error, wrap_with: {
+        tag: "div",
+        class: "invalid-feedback d-block"
+      }
+      ba.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+    end
+  end
 
-    b.wrapper tag: "div", class: "col-sm-9" do |ba|
-      ba.use :input
-      ba.use :error, wrap_with: { tag: "span", class: "help-block" }
-      ba.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+  # horizontal range input
+  config.wrappers :horizontal_range, tag: "div",
+                                     class: "form-group row",
+                                     error_class: "form-group-invalid",
+                                     valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :readonly
+    b.optional :step
+    b.use :label, class: "col-sm-3 form-control-label"
+    b.wrapper :grid_wrapper, tag: "div", class: "col-sm-9" do |ba|
+      ba.use :input, class: "form-control-range",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+      ba.use :full_error, wrap_with: {
+        tag: "div",
+        class: "invalid-feedback d-block"
+      }
+      ba.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
     end
   end
 
-  config.wrappers :horizontal_boolean, tag: "div",
-                                       class: "form-group",
-                                       error_class: "has-error" do |b|
+  # inline forms
+  #
+  # inline default_wrapper
+  config.wrappers :inline_form, tag: "span",
+                                error_class: "form-group-invalid",
+                                valid_class: "form-group-valid" do |b|
     b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :minlength
+    b.optional :pattern
+    b.optional :min_max
     b.optional :readonly
+    b.use :label, class: "sr-only"
 
-    b.wrapper tag: "div", class: "col-sm-offset-3 col-sm-9" do |wr|
-      wr.wrapper tag: "div", class: "checkbox" do |ba|
-        ba.use :label_input
-      end
+    b.use :input, class: "form-control",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :error, wrap_with: { tag: "div", class: "invalid-feedback" }
+    b.optional :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
 
-      wr.use :error, wrap_with: { tag: "span", class: "help-block" }
-      wr.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+  # inline input for boolean
+  config.wrappers :inline_boolean,
+                  tag: "span",
+                  class: "form-check flex-wrap justify-content-start mr-sm-2",
+                  error_class: "form-group-invalid",
+                  valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :input, class: "form-check-input",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :label, class: "form-check-label"
+    b.use :error, wrap_with: { tag: "div", class: "invalid-feedback" }
+    b.optional :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
+
+  # bootstrap custom forms
+  #
+  # custom input for boolean
+  config.wrappers :custom_boolean, tag: "fieldset",
+                                   class: "form-group",
+                                   error_class: "form-group-invalid",
+                                   valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :form_check_wrapper,
+              tag: "div",
+              class: "custom-control custom-checkbox" do |bb|
+      bb.use :input, class: "custom-control-input",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+      bb.use :label, class: "custom-control-label"
+      bb.use :full_error, wrap_with: { tag: "div", class: "invalid-feedback" }
+      bb.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
     end
   end
 
-  config.wrappers :horizontal_radio_and_checkboxes,
-                  tag: "div",
-                  class: "form-group",
-                  error_class: "has-error" do |b|
+  config.wrappers :custom_boolean_switch, tag: "fieldset",
+                                          class: "form-group",
+                                          error_class: "form-group-invalid",
+                                          valid_class: "form-group-valid" do |b|
     b.use :html5
     b.optional :readonly
+    b.wrapper :form_check_wrapper,
+              tag: "div",
+              class: "custom-control custom-checkbox-switch" do |bb|
+      bb.use :input, class: "custom-control-input",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+      bb.use :label, class: "custom-control-label"
+      bb.use :full_error, wrap_with: { tag: "div", class: "invalid-feedback" }
+      bb.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+    end
+  end
 
-    b.use :label, class: "col-sm-3 control-label"
+  # custom input for radio buttons and check boxes
+  config.wrappers :custom_collection, item_wrapper_class: "custom-control",
+                                      tag: "fieldset",
+                                      class: "form-group",
+                                      error_class: "form-group-invalid",
+                                      valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :legend_tag, tag: "legend", class: "col-form-label pt-0" do |ba|
+      ba.use :label_text
+    end
+    b.use :input, class: "custom-control-input",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
 
-    b.wrapper tag: "div", class: "col-sm-9" do |ba|
-      ba.use :input
-      ba.use :error, wrap_with: { tag: "span", class: "help-block" }
-      ba.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+  # custom input for inline radio buttons and check boxes
+  config.wrappers :custom_collection_inline,
+                  item_wrapper_class: "custom-control custom-control-inline",
+                  tag: "fieldset",
+                  class: "form-group",
+                  error_class: "form-group-invalid",
+                  valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.wrapper :legend_tag, tag: "legend", class: "col-form-label pt-0" do |ba|
+      ba.use :label_text
     end
+    b.use :input, class: "custom-control-input",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
   end
 
-  config.wrappers :inline_form, tag: "div",
+  # custom file input
+  config.wrappers :custom_file, tag: "div",
                                 class: "form-group",
-                                error_class: "has-error" do |b|
+                                error_class: "form-group-invalid",
+                                valid_class: "form-group-valid" do |b|
     b.use :html5
     b.use :placeholder
     b.optional :maxlength
     b.optional :minlength
-    b.optional :pattern
-    b.optional :min_max
     b.optional :readonly
-    b.use :label, class: "sr-only"
+    b.use :label, class: "form-control-label"
+    b.wrapper :custom_file_wrapper, tag: "div", class: "custom-file" do |ba|
+      ba.use :input, class: "custom-file-input",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+      ba.use :label, class: "custom-file-label"
+      ba.use :full_error, wrap_with: { tag: "div", class: "invalid-feedback" }
+    end
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
 
-    b.use :input, class: "form-control"
-    b.use :error, wrap_with: { tag: "span", class: "help-block" }
-    b.use :hint,  wrap_with: { tag: "p", class: "help-block" }
+  # custom multi select
+  config.wrappers :custom_multi_select, tag: "div",
+                                        class: "form-group",
+                                        error_class: "form-group-invalid",
+                                        valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label, class: "form-control-label"
+    b.wrapper tag: "div",
+              class: "d-flex flex-row justify-content-between
+                      align-items-center" do |ba|
+      ba.use :input, class: "custom-select mx-1",
+                     error_class: "is-invalid",
+                     valid_class: "is-valid"
+    end
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
   end
 
-  config.wrappers :multi_select, tag: "div",
+  # custom range input
+  config.wrappers :custom_range, tag: "div",
                                  class: "form-group",
-                                 error_class: "has-error" do |b|
+                                 error_class: "form-group-invalid",
+                                 valid_class: "form-group-valid" do |b|
     b.use :html5
+    b.use :placeholder
     b.optional :readonly
-    b.use :label, class: "control-label"
-    b.wrapper tag: "div", class: "form-inline" do |ba|
-      ba.use :input, class: "form-control"
-      ba.use :error, wrap_with: { tag: "span", class: "help-block" }
-      ba.use :hint,  wrap_with: { tag: "p", class: "help-block" }
-    end
+    b.optional :step
+    b.use :label, class: "form-control-label"
+    b.use :input, class: "custom-range",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :full_error, wrap_with: {
+      tag: "div",
+      class: "invalid-feedback d-block"
+    }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
+
+  # Input Group - custom component
+  # see example app and config at https://github.com/rafaelfranca/simple_form-bootstrap
+  # config.wrappers :input_group, tag: "div",
+  #                               class: "form-group",
+  #                               error_class: "form-group-invalid",
+  #                               valid_class: "form-group-valid" do |b|
+  #   b.use :html5
+  #   b.use :placeholder
+  #   b.optional :maxlength
+  #   b.optional :minlength
+  #   b.optional :pattern
+  #   b.optional :min_max
+  #   b.optional :readonly
+  #   b.use :label, class: "form-control-label"
+  #   b.wrapper :input_group_tag, tag: "div", class: "input-group" do |ba|
+  #     ba.optional :prepend
+  #     ba.use :input, class: "form-control",
+  #                    error_class: "is-invalid",
+  #                    valid_class: "is-valid"
+  #     ba.optional :append
+  #   end
+  #   b.use :full_error, wrap_with: {
+  #     tag: "div",
+  #     class: "invalid-feedback d-block"
+  #   }
+  #   b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  # end
+
+  # Floating Labels form
+  #
+  # floating labels default_wrapper
+  config.wrappers :floating_labels_form, tag: "div",
+                                         class: "form-label-group",
+                                         error_class: "form-group-invalid",
+                                         valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :minlength
+    b.optional :pattern
+    b.optional :min_max
+    b.optional :readonly
+    b.use :input, class: "form-control",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :label, class: "form-control-label"
+    b.use :full_error, wrap_with: { tag: "div", class: "invalid-feedback" }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
   end
-  # Wrappers for forms and inputs using the Bootstrap toolkit.
-  # Check the Bootstrap docs (http://getbootstrap.com)
-  # to learn about the different styles for forms and inputs,
-  # buttons and other elements.
+
+  # custom multi select
+  config.wrappers :floating_labels_select,
+                  tag: "div",
+                  class: "form-label-group",
+                  error_class: "form-group-invalid",
+                  valid_class: "form-group-valid" do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :input, class: "custom-select custom-select-lg",
+                  error_class: "is-invalid",
+                  valid_class: "is-valid"
+    b.use :label, class: "form-control-label"
+    b.use :full_error, wrap_with: { tag: "div", class: "invalid-feedback" }
+    b.use :hint, wrap_with: { tag: "small", class: "form-text text-muted" }
+  end
+
+  # The default wrapper to be used by the FormBuilder.
   config.default_wrapper = :vertical_form
+
+  # Custom wrappers for input types. This should be a hash containing an input
+  # type as key and the wrapper that will be used for all inputs with specified
+  # type.
   config.wrapper_mappings = {
-    check_boxes: :vertical_radio_and_checkboxes,
-    radio_buttons: :vertical_radio_and_checkboxes,
-    file: :vertical_file_input,
     boolean: :vertical_boolean,
-    datetime: :multi_select,
-    date: :multi_select,
-    time: :multi_select
+    check_boxes: :vertical_collection,
+    date: :vertical_multi_select,
+    datetime: :vertical_multi_select,
+    file: :vertical_file,
+    radio_buttons: :vertical_collection,
+    range: :vertical_range,
+    time: :vertical_multi_select
   }
 end