bootstrap4_rails_components 0.1.0

data/app/assets/stylesheets/bootstrap4_rails_components/bootstrap/application.scss

@@ -0,0 +1,2 @@
+// Source
+@import 'bootstrap';

data/app/controllers/bootstrap4_rails_components/application_controller.rb

@@ -0,0 +1,5 @@
+module Bootstrap4RailsComponents
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+  end
+end

data/app/helpers/bootstrap4_rails_components/application_helper.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Bootstrap4RailsComponents
+  # Core rendering helper methods
+  module ApplicationHelper
+    # `ui` is an initiator method so that this system allows for
+    # extension when used in a cascade of frameworks, for example when
+    # building a custom design system that is based on Bootstrap4.
+    # One would utilize this the `ui` method to initiate this engine
+    # and then call a specific framework / system as a second method.
+    #
+    # Example use for bootstrap4:
+    # <%= ui.bootstrap(:my_component, :optional_trait1, :optional_trait2, option: :value, option2: :value2) %>
+    #
+    # Real-world usage:
+    # A normal button link with a tooltip:
+    # <%= ui.bootstrap(:button, :primary, body: 'Get Started', href: marketing_page_path, tooltip: 'Save big!') %>
+    #
+    # A complex ajax-y delete button:
+    # <%= ui.bootstrap(:button, :primary, disabled: user.payments.any?, method: :delete, href: user_path(user), confirm: "Please confirm #{user.name} should be deleted", disable_with: ui.bootstrap(:icon, :loader), remote: true, tooltip: "Permanently delete #{user.name}" render_if: user.admin?) %>
+    def ui
+      @ui ||= Bootstrap4RailsComponents::UI::Base.new(get_view_context)
+    end
+
+    private
+
+    # In the event that a controller isn't defined, we'll supply ApplicationController's view_context, instead.
+    # While not ideal, this'll work for basic implementation scenarios that aren't leaning heavily on the
+    # view_context in play.
+    def get_view_context
+      if defined?(controller) && controller.present?
+        controller.view_context
+      else
+        ApplicationController.new.view_context
+      end
+    end
+  end
+end

data/app/models/bootstrap4_rails_components/application_record.rb

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

data/config/initializers/web_app_manifest.rb

@@ -0,0 +1,3 @@
+Rails.application.config.assets.configure do |env|
+  env.register_mime_type('application/manifest+json', extensions: ['.webmanifest'])
+end

data/config/locales/en.yml

@@ -0,0 +1,63 @@
+en:
+  bootstrap4_rails_components:
+    errors:
+      argument_error:
+        # required keys -- :modal, :class_name, :options, :file, :method
+        #
+        # Example keys:
+        #
+        # modal: '#example'
+        # class_name: self.class.name
+        # options: options
+        # file: __FILE__
+        # method: __method__
+        modalable:
+          tooltip: |
+                     ArgumentError: :modal & :tooltip may not both be present in :options hash
+
+                     Raised from gem file: %{file}
+                     Raised from gem method: #%{method}
+
+                     To fix this error:
+                     Remove `tooltip: [the tooltip]` or `modal: '%{modal}'` from your component's :options hash
+
+                     Component Reference:
+                     Invalid component: %{class_name}
+                     Component options: %{options}
+
+                     About:
+                     Modal and Tooltip both utilize the data-toggle HTML data attribute. When :modal is present,
+                     it will always overwrite the tooltip's data-toggle attribute causing a silent failure
+                     in which the tooltip does not render (though the modal HTML does).
+
+          remote:  |
+                     ArgumentError: :modal & remote: true may not both be present in :options hash
+
+                     Raised from gem file: %{file}
+                     Raised from gem method: #%{method}
+
+                     To fix this error:
+                     Remove `remote: true` or `modal: '%{modal}'` from your component's :options hash
+
+                     Example incorrect usage:
+                     = ui.bootstrap :button, remote: true, modal: '%{modal}', ...
+
+                     Component Reference:
+                     Invalid component: %{class_name}
+                     Component options: %{options}
+
+                     About:
+                     Components may not include both `modal: %{modal}` and `remote: true` in their options because modalable components
+                     that fire remote actions can result in undesirable modal activation behavior.
+
+                     This tends to occur when a modal is injected into the page from a remote action, is subsequently dismissed
+                     and then opened again from the same remote link.
+
+                     The previously dismissed modal appears (because it's still on the page, and referenced in the component's HTML)
+                     and the modal is then, visibly to the user, re-animated (overwritten and re-started) by the newly injected modal from the remote ajax action.
+
+
+
+
+
+

data/config/routes.rb

@@ -0,0 +1,2 @@
+Bootstrap4RailsComponents::Engine.routes.draw do
+end

data/config/spring.rb

@@ -0,0 +1 @@
+Spring.application_root = './spec/test_app'

data/lib/bootstrap4_rails_components.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+require 'bootstrap4_rails_components/engine'
+
+module Bootstrap4RailsComponents
+  require 'bootstrap'
+  require 'haml'
+  require 'jquery-rails'
+  require 'sass-rails'
+
+  DEFAULT_BOOTSTRAP_THEME    = :primary
+
+  BOOTSTRAP_THEMES           = %i[primary
+                                  secondary
+                                  success
+                                  danger
+                                  warning
+                                  info
+                                  light
+                                  dark].freeze
+
+  BOOTSTRAP_COMPONENT_NAMES  = %i[alert
+                                  badge
+                                  breadcrumb
+                                  breadcrumb_item
+                                  button
+                                  button_group
+                                  button_toolbar
+                                  card
+                                  card_body
+                                  card_footer
+                                  card_header
+                                  card_image
+                                  card_image_overlay
+                                  carousel
+                                  carousel_caption
+                                  carousel_control
+                                  carousel_indicators
+                                  carousel_item
+                                  collapse
+                                  dropdown
+                                  dropdown_divider
+                                  dropdown_header
+                                  dropdown_item
+                                  dropdown_menu
+                                  dropdown_toggle
+                                  embed
+                                  form
+                                  input_group
+                                  jumbotron
+                                  list_group
+                                  list_group_item
+                                  media
+                                  media_body
+                                  media_object
+                                  modal
+                                  modal_body
+                                  modal_footer
+                                  modal_header
+                                  nav
+                                  nav_item
+                                  nav_link
+                                  navbar
+                                  navbar_brand
+                                  navbar_nav
+                                  navbar_text
+                                  navbar_toggler
+                                  page_item
+                                  pagination
+                                  popover
+                                  progress
+                                  tab_content
+                                  tab_pane
+                                  table].freeze
+end

data/lib/bootstrap4_rails_components/bootstrap/components/alert.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Bootstrap4RailsComponents
+  module Bootstrap
+    module Components
+      # Bootstrap Alert Component
+      # https://getbootstrap.com/docs/4.1/components/alerts/
+      class Alert < Bootstrap4RailsComponents::Bootstrap::Components::Base
+        include Bootstrap::Utilities::Dismissible
+        include Bootstrap::Utilities::Headable
+        include Bootstrap::Utilities::Themeable
+
+        def render
+          content_tag(:div, html_options) do
+            capture do
+              if dismissible
+                concat(
+                  Bootstrap4RailsComponents::Bootstrap::Components::Button.new({ as: :button, class: 'close', theme: nil, data: { dismiss: 'alert' }, aria: { label: 'Close' } }, view_context).render do
+                    content_tag(:span, "&times;".html_safe, aria: { hidden: 'true' } )
+                  end
+                )
+              end
+              if heading
+                concat(content_tag(:h4, heading, class: 'alert-heading'))
+              end
+              concat(block_given? ? yield : body)
+            end
+          end
+        end
+
+        private
+
+        def assistive_html_attributes
+          super.merge!(role: 'alert')
+        end
+
+        def css_classes
+          [
+            super,
+            ("#{component_css_class}-dismissible" if dismissible),
+            ('fade' if dismissible),
+            ('show' if dismissible)
+          ].join(' ').squish
+        end
+
+        def outlineable?
+          false
+        end
+      end
+    end
+  end
+end

data/lib/bootstrap4_rails_components/bootstrap/components/badge.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Bootstrap4RailsComponents
+  module Bootstrap
+    module Components
+      # Bootstrap Badge Component
+      # https://getbootstrap.com/docs/4.1/components/badge/
+      class Badge < Bootstrap4RailsComponents::Bootstrap::Components::Base
+        include Bootstrap::Utilities::Themeable
+        include Bootstrap::Utilities::Wrappable
+
+        def pill
+          options.fetch(:pill, false)
+        end
+
+        private
+
+        def base_element
+          as #comes from the wrappable module
+        end
+
+        def css_classes
+          [
+            super,
+            ("#{component_css_class}-pill" if pill)
+          ].join(' ').squish
+        end
+
+        def default_html_wrapper_element
+          :span
+        end
+
+        def non_html_attribute_options
+          super.push(:pill)
+        end
+      end
+    end
+  end
+end

data/lib/bootstrap4_rails_components/bootstrap/components/base.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+module Bootstrap4RailsComponents
+  module Bootstrap
+    module Components
+      # Base Component
+      # Defines conventional, shared behavior across
+      # Bootstrap components
+      class Base
+        include ActionView::Helpers::TagHelper
+        include ActionView::Helpers::TextHelper
+        include ActionView::Helpers::AssetTagHelper
+        include ActionView::Context
+
+        attr_reader   :body
+
+        attr_accessor :options,
+                      :view_context
+
+        def initialize(component_options, view_context)
+          self.options = defaults.merge!(component_options)
+          self.view_context = view_context
+          @body = options.fetch(:body, '')
+          utility_initialize
+          component_initialize
+        end
+
+
+        # This base render handles many of the components and
+        # can be changed to have a different base element by
+        # overriding the base_element.
+        # in some cases, the child component can also call
+        # super with a block to have this render as the wrapping
+        # element.
+        def render
+          content_tag(base_element, html_options) do
+            (block_given? ? yield : body)
+          end
+        end
+
+        # This is used to help identify where to find partials for rendering components.
+        #
+        # Set the component family, e.g.: :breadcrumb
+        # on any sibling components.
+        #
+        # For example:
+        # BreadcrumbItem & Breadcrumb are members of the :breadcrumb component_family
+        def component_family
+          nil
+        end
+
+        def data
+          options[:data] || {}
+        end
+
+        def html_options
+          options.except(*non_html_attribute_options.uniq)
+                 .merge!(id: id,
+                         class: css_classes,
+                         data: data,
+                         href: href,
+                         style: style,
+                         **assistive_html_attributes)
+                 .reject { |_k, v| v.blank? } # prevent empty attributes from showing up
+                                              # Example: <div class>Text</div>
+        end
+
+        def href
+          options[:href]
+        end
+
+        def id
+          options[:id]
+        end
+
+        # For components that inherit bootstrap, provide a second
+        # layer of initialization, for example:
+        # to initialize traits on design system components
+        # (which are not available on bootstrap)
+        def component_initialize; end
+        def utility_initialize; end
+
+        def style
+          options[:style]
+        end
+
+        private
+
+        # Assigned on individual components as needed
+        # Ex: { role: 'alert' }
+        #
+        # If aria assistive html is needed, see:
+        # Bootstrap::Utilities::AriaAssistable
+        # avoid passing aria to assistive_html_attributes directly
+        def assistive_html_attributes
+          @assistive_html_attributes ||= {}
+        end
+
+        # the base_element is used in the default render for all components
+        # as the outer wrapping element. Typically, this is a div, but
+        # can be overriddent as a different static element in a child class
+        # or as a dynamic element in the child class.
+        # this allows most child components to not have to have their
+        # own render statement if their wrapping element is not a div
+        def base_element
+          :div
+        end
+
+        # Fallback component css class name.
+        # Overwritten within individual classes for situations like
+        # Button's css class is 'btn'...
+        # Example: returns 'alert' from Bootstrap4RailsComponents::Bootstrap::Components::Alert
+        def component_css_class
+          @component_css_class ||= component_class_name_string.underscore.dasherize.downcase
+        end
+
+        def component_class_name_string
+          self.class.name.demodulize.to_s
+        end
+
+        # Manage or adjust the css_classes of the component by
+        # adding a new string of css classes to this method
+        # ex: super.push('new-class')
+        def css_classes
+          @css_classes ||= [component_css_class, options[:class]].reject(&:nil?).uniq.join(' ').squish
+        end
+
+        def defaults
+          {
+            # HTML Defaults
+            class: '',
+            id: nil,
+
+            # Content
+            # heading: (nil if heading.present?),
+            body: nil,
+            data: {},
+
+            # Configuration
+            # traits: ([] if traits.present?)
+          }
+        end
+        # Remove attributes from html_options that shouldn't show up in the
+        # html element, ex: <div body='should not be here'>
+        def non_html_attribute_options
+          @non_html_attribute_options ||= %i[body heading traits render_if render_unless]
+        end
+      end
+    end
+  end
+end