spark_components 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 635a89fb74020c44aa354d88e39a317f09747b545b2f04a8a47091ba65e823e4
+  data.tar.gz: eb77464a1a07270e1fabfef42bba3cd121790c92e01a9322203292cf266745cb
+SHA512:
+  metadata.gz: 9f6b10c0bef2d089d14ace1b0892db52d59a47b7999fa0e902f82d6158328ac61599e6890d34d221d86d04d400f8ad7048516e561b7ffb4651a6513edee43d88
+  data.tar.gz: 45e75e4a5ef27ca91fbc0de782541f19fa8fe3b10807eb9b9d5eb6dbb48fb87b08bcfee02e70278bbc4cc4d5e3e44a201b00558563a3660d10576dba91f2534f

data/MIT-LICENSE

@@ -0,0 +1,21 @@
+Original Work: Copyright 2018 Jens Ljungblad
+Forked and Modifed: Copyright 2019 Brandon Mathis
+
+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,524 @@
+# Spark Components
+
+Simple view components for Rails 5.1+, designed to go well with [styleguide](https://github.com/jensljungblad/styleguide). The two together are inspired by the works of [Brad Frost](http://bradfrost.com) and by the [thoughts behind](http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html) Lonely Planet's style guide [Rizzo](http://rizzo.lonelyplanet.com).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "spark_components"
+```
+
+And then execute:
+
+```sh
+$ bundle
+```
+
+## Components
+
+The examples provided here will use the [BEM naming conventions](http://getbem.com/naming/).
+
+Components live in `app/components`. Generate a component by executing:
+
+```sh
+$ bin/rails g components:component alert
+```
+
+This will create the following files:
+
+```
+app/
+  components/
+    alert/
+      _alert.html.erb
+      alert.css
+      alert.js
+    alert_component.rb
+```
+
+The generator also takes `--skip-css` and `--skip-js` options.
+
+Let's add some markup and CSS:
+
+```erb
+<% # app/components/alert/_alert.html.erb %>
+
+<div class="alert alert--primary" role="alert">
+  Message
+</div>
+```
+
+```css
+/* app/components/alert/alert.css */
+
+.alert {
+  padding: 1rem;
+}
+
+.alert--primary {
+  background: blue;
+}
+
+.alert--success {
+  background: green;
+}
+
+.alert--danger {
+  background: red;
+}
+```
+
+This component can now be rendered using the `component` helper:
+
+```erb
+<%= component "alert" %>
+```
+
+### Assets
+
+In order to require assets such as CSS, either require them manually in the manifest, e.g. `application.css`:
+
+```css
+/*
+ *= require alert/alert
+ */
+```
+
+Or require `components`, which will in turn require the assets for all components:
+
+```css
+/*
+ *= require components
+ */
+```
+
+### Attributes and blocks
+
+There are two ways of passing data to components: attributes and blocks. Attributes are useful for data such as ids, modifiers and data structures (models etc). Blocks are useful when you need to inject HTML content into components.
+
+Let's define some attributes for the component we just created:
+
+```ruby
+# app/components/alert_component.rb %>
+
+class AlertComponent < SparkComponents::Component
+  attribute :context, :message
+end
+```
+
+```erb
+<% # app/components/alert/_alert.html.erb %>
+
+<div class="alert alert--<%= alert.context %>" role="alert">
+  <%= alert.message %>
+</div>
+```
+
+```erb
+<%= component "alert", message: "Something went right!", context: "success" %>
+<%= component "alert", message: "Something went wrong!", context: "danger" %>
+```
+
+To inject some text or HTML content into our component we can print the component variable in our template, and populate it by passing a block to the component helper:
+
+```erb
+<% # app/components/alert/_alert.html.erb %>
+
+<div class="alert alert--<%= alert.context %>" role="alert">
+  <%= alert %>
+</div>
+```
+
+```erb
+<%= component "alert", context: "success" do %>
+  <em>Something</em> went right!
+<% end %>
+```
+
+Another good use case for attributes is when you have a component backed by a model:
+
+```ruby
+# app/components/comment_component.rb %>
+
+class CommentComponent < SparkComponents::Component
+  attribute :comment
+
+  delegate :id,
+           :author,
+           :body, to: :comment
+end
+```
+
+```erb
+<% # app/components/comment/_comment.html.erb %>
+
+<div id="comment-<%= comment.id %>" class="comment">
+  <div class="comment__author">
+    <%= link_to comment.author.name, author_path(comment.author) %>
+  </div>
+  <div class="comment__body">
+    <%= comment.body %>
+  </div>
+</div>
+```
+
+```erb
+<% comments.each do |comment| %>
+  <%= component "comment", comment: comment %>
+<% end %>
+```
+
+### Attribute defaults
+
+Attributes can have default values:
+
+```ruby
+# app/components/alert_component.rb %>
+
+class AlertComponent < SparkComponents::Component
+  attribute :message, context: "primary"
+end
+```
+
+### Attribute overrides
+
+It's easy to override an attribute with additional logic:
+
+```ruby
+# app/components/alert_component.rb %>
+
+class AlertComponent < SparkComponents::Component
+  attribute :message, context: "primary"
+
+  def message
+    @message.upcase if context == "danger"
+  end
+end
+```
+
+### Attribute validation
+
+To ensure your components get initialized properly you can use `ActiveModel::Validations` in your elements or components:
+
+```ruby
+# app/components/alert_component.rb %>
+
+class AlertComponent < SparkComponents::Component
+  attribute :label
+  
+  validates :label, presence: true
+end
+```
+
+Your validations will be executed during the components initialization and raise an `ActiveModel::ValidationError` if any validation fails.
+
+### Elements
+
+Attributes and blocks are great for simple components or components backed by a data structure, such as a model. Other components are more generic in nature and can be used in a variety of contexts. Often they consist of multiple parts or elements, that sometimes repeat, and sometimes need their own modifiers.
+
+Take a card component. In React, a common approach is to create subcomponents:
+
+```jsx
+<Card flush={true}>
+  <CardHeader centered={true}>
+    Header
+  </CardHeader>
+  <CardSection size="large">
+    Section 1
+  </CardSection>
+  <CardSection size="small">
+    Section 2
+  </CardSection>
+  <CardFooter>
+    Footer
+  </CardFooter>
+</Card>
+```
+
+There are two problems with this approach:
+
+1. The card header, section and footer have no standalone meaning, yet we treat them as standalone components. This means a `CardHeader` could be placed outside of a `Card`.
+2. We lose control of the structure of the elements. A `CardHeader` can be placed below, or inside a `CardFooter`.
+
+Using this gem, the same component can be written like this:
+
+```ruby
+# app/components/card_component.rb %>
+
+class CardComponent < SparkComponents::Component
+  attribute flush: false
+
+  element :header do
+    attribute centered: false
+  end
+
+  element :section, multiple: true do
+    attribute :size
+  end
+
+  element :footer
+end
+```
+
+```erb
+<% # app/components/card/_card.html.erb %>
+
+<div class="card <%= "card--flush" if card.flush %>">
+  <div class="card__header <%= "card__header--centered" if card.header.centered %>">
+    <%= card.header %>
+  </div>
+  <% card.sections.each do |section| %>
+    <div class="card__section <%= "card__section--#{section.size}" %>">
+      <%= section %>
+    </div>
+  <% end %>
+  <div class="card__footer">
+    <%= card.footer %>
+  </div>
+</div>
+```
+
+Elements can be thought of as isolated subcomponents, and they are defined on the component. Passing `multiple: true` makes it a repeating element, and passing a block lets us declare attributes on our elements, in the same way we declare attributes on components.
+
+In order to populate them with data, we pass a block to the component helper, which yields the component, which lets us set attributes and blocks on the element in the same way we do for components:
+
+```erb
+<%= component "card", flush: true do |c| %>
+  <% c.header centered: true do %>
+    Header
+  <% end %>
+  <% c.section size: "large" do %>
+    Section 1
+  <% end %>
+  <% c.section size: "large" do %>
+    Section 2
+  <% end %>
+  <% c.footer do %>
+    Footer
+  <% end %>
+<% end %>
+```
+
+Multiple calls to a repeating element, such as `section` in the example above, will append each section to an array.
+
+Another good use case is a navigation component:
+
+```ruby
+# app/components/navigation_component.rb %>
+
+class NavigationComponent < SparkComponents::Component
+  element :items, multiple: true do
+    attribute :label, :url, active: false
+  end
+end
+```
+
+```erb
+<%= component "navigation" do |c| %>
+  <% c.item label: "Home", url: root_path, active: true %>
+  <% c.item label: "Explore" url: explore_path %>
+<% end %>
+```
+
+An alternative here is to pass a data structure to the component as an attribute, if no HTML needs to be injected when rendering the component:
+
+```erb
+<%= component "navigation", items: items %>
+```
+
+Elements can have validations, too:
+
+```ruby
+class NavigationComponent < SparkComponents::Component
+  element :items, multiple: true do
+    attribute :label, :url, active: false
+    
+    validates :label, presence: true
+    validates :url, presence: true
+  end
+end
+```
+
+Elements can also be nested, although it is recommended to keep nesting to a minimum:
+
+```ruby
+# app/components/card_component.rb %>
+
+class CardComponent < SparkComponents::Component
+  ...
+
+  element :section, multiple: true do
+    attribute :size
+
+    element :header
+    element :footer
+  end
+end
+```
+
+### Helper methods
+
+In addition to declaring attributes and elements, it is also possible to declare helper methods. This is useful if you prefer to keep logic out of your templates. Let's extract the modifier logic from the card component template:
+
+```ruby
+# app/components/card_component.rb %>
+
+class CardComponent < SparkComponents::Component
+  ...
+
+  def css_classes
+    css_classes = ["card"]
+    css_classes << "card--flush" if flush
+    css_classes.join(" ")
+  end
+end
+```
+
+```erb
+<% # app/components/card/_card.html.erb %>
+
+<%= content_tag :div, class: card.css_classes do %>
+  ...
+<% end %>
+```
+
+It's even possible to declare helpers on elements:
+
+```ruby
+# app/components/card_component.rb %>
+
+class CardComponent < SparkComponents::Component
+  ...
+
+  element :section, multiple: true do
+    attribute :size
+
+    def css_classes
+      css_classes = ["card__section"]
+      css_classes << "card__section--#{size}" if size
+      css_classes.join(" ")
+    end
+  end
+end
+```
+
+```erb
+<% # app/components/card/_card.html.erb %>
+
+<%= content_tag :div, class: card.css_classes do %>
+  ...
+  <%= content_tag :div, class: section.css_classes do %>
+    <%= section %>
+  <% end %>
+  ...
+<% end %>
+```
+
+Helper methods can also make use of the `@view` instance variable in order to call Rails helpers such as `link_to` or `content_tag`.
+
+### Rendering components without a partial
+
+For some small components, such as buttons, it might make sense to skip the partial altogether, in order to speed up rendering. This can be done by overriding `render` on the component:
+
+```ruby
+# app/components/button_component.rb %>
+
+class ButtonComponent < SparkComponents::Component
+  attribute :label, :url, :context
+
+  def render
+    @view.link_to label, url, class: css_classes
+  end
+
+  def css_classes
+    css_classes = "button"
+    css_classes << "button--#{context}" if context
+    css_classes.join(" ")
+  end
+end
+```
+
+```erb
+<%= component "button", label: "Sign up", url: sign_up_path, context: "primary" %>
+<%= component "button", label: "Sign in", url: sign_in_path %>
+```
+
+### Namespaced components
+
+Components can be nested under a namespace. This is useful if you want to practice things like [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/), [BEMIT](https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/) or any other component classification scheme. In order to create a namespaced component, stick it in a folder and wrap the class in a module:
+
+```ruby
+module Objects
+  class MediaObject < SparkComponents::Component; end
+end
+```
+
+Then call it from a template like so:
+
+```erb
+<%= component "objects/media_object" %>
+```
+
+### Nesting Components
+
+You can easily render a component within another component. In this example the nav_item component is a generic navigation element which is used in both the tab component and the breadcrumb component.
+
+```ruby
+# app/components/nav_item_component.rb %>
+
+class NavItemComponent < SparkComponents::Components
+  attribute :name, :url, :icon
+end
+```
+
+```ruby
+# app/components/tabs_component.rb %>
+
+class TabsComponent < SparkComponents::Components
+  element :tab, multiple: true, component: 'nav_item'
+end
+```
+
+```ruby
+# app/components/breadcrumb_component.rb %>
+
+class BreadcrumbComponent < SparkComponents::Components
+  element :crumb, multiple: true, component: 'nav_item'
+end
+```
+
+The erb template could look like this.
+
+```erb
+<% # app/components/tab_nav/_tab_nav.html.erb %>
+
+<nav class="tab__nav" role="navigation">
+  <% tabs.each do |tab| %>
+    <%= tab %>
+  <% end %>
+</nav>
+```
+
+Then a user would use the nav_item component as an element of the tab_nav component like this.
+
+```erb
+<%= component "tab_nav" do |nav| %>
+  <% nav.tab name: "Home", url: "/home", icon: 'house' %>
+  <% nav.tab name: "Search", url: "/search", icon: 'magnifing_glass'  %>
+  ...
+<% end %>
+```
+
+## Acknowledgements
+
+This library, together with [styleguide](https://github.com/jensljungblad/styleguide), was inspired by the writings of [Brad Frost](http://bradfrost.com) on atomic design and living style guides, and [Rizzo](http://rizzo.lonelyplanet.com), the Lonely Planet style guide. Other inspirations were:
+
+- [Catalog](https://www.catalog.style) - style guide for React
+- [Storybook](https://storybook.js.org) - style guide for React
+- [React Styleguidist](https://react-styleguidist.js.org) - style guide for React
+- [Cells](https://github.com/trailblazer/cells) - view components for Ruby
+- [Komponent](https://github.com/komposable/komponent) - view components for Ruby
+
+For a list of real world style guides, check out http://styleguides.io.

data/Rakefile

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+begin
+  require "bundler/setup"
+rescue LoadError
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
+end
+
+require "rdoc/task"
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title    = "Components"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.md")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.pattern = "test/**/*_test.rb"
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/components_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts .js
+//= link_directory ../stylesheets .css

data/app/assets/javascripts/components.js.erb

@@ -0,0 +1,7 @@
+<% SparkComponents.component_names.each do |name| %>
+  <% begin %>
+    <% require_asset "#{name}/#{name.split('/')[-1]}" %>
+  <% rescue Sprockets::FileNotFound %>
+    <% Rails.logger.debug "Components: JS not found for #{name}" %>
+  <% end %>
+<% end %>

data/app/assets/stylesheets/components.css.erb

@@ -0,0 +1,7 @@
+<% SparkComponents.component_names.each do |name| %>
+  <% begin %>
+    <% require_asset "#{name}/#{name.split('/')[-1]}" %>
+  <% rescue Sprockets::FileNotFound %>
+    <% Rails.logger.debug "Components: CSS not found for #{name}" %>
+  <% end %>
+<% end %>

data/app/helpers/spark_components/component_helper.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module SparkComponents
+  module ComponentHelper
+    def component(name, attrs = nil, &block)
+      comp = "#{name}_component".classify.constantize.new(self, attrs, &block)
+      comp.pre_render
+      comp.render
+    end
+  end
+end

data/config/routes.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+SparkComponents::Engine.routes.draw do
+end

data/lib/generators/spark_components/component_generator.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module SparkComponents
+  class ComponentGenerator < Rails::Generators::NamedBase
+    desc "Generate a component"
+    class_option :skip_erb, type: :boolean, default: false
+    class_option :skip_css, type: :boolean, default: false
+    class_option :skip_js, type: :boolean, default: false
+
+    source_root File.expand_path("templates", __dir__)
+
+    def create_component_file
+      template "component.rb.erb", "app/components/#{name}_component.rb"
+    end
+
+    def create_erb_file
+      return if options["skip_erb"]
+
+      create_file "app/components/#{name}/_#{filename}.html.erb"
+    end
+
+    def create_css_file
+      return if options["skip_css"]
+
+      create_file "app/components/#{name}/#{filename}.css"
+    end
+
+    def create_js_file
+      return if options["skip_js"]
+
+      create_file "app/components/#{name}/#{filename}.js"
+    end
+
+    private
+
+    def filename
+      name.split("/").last
+    end
+  end
+end

data/lib/generators/spark_components/templates/component.rb.erb

@@ -0,0 +1,2 @@
+class <%= name.classify %>Component < SparkComponents::Component
+end

data/lib/spark_components/attributes.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module SparkComponents
+  module Attributes
+    class Hash < Hash
+      def prefix; end
+
+      def add(obj = nil)
+        merge!(obj) unless obj.nil?
+        self
+      end
+
+      # Output all attributes as [base-]name="value"
+      def to_s
+        each_with_object([]) do |(name, value), array|
+          name = [prefix, name].compact.join("-")
+          array << %(#{name.dasherize}="#{value}") unless value.nil?
+        end.join(" ").html_safe
+      end
+
+      def collapse
+        each_with_object({}) do |(name, value), obj|
+          name = [prefix, name].compact.join("-")
+          name = name.downcase.gsub(/[\W_]+/, "-")
+          obj[name] = value unless value.nil? || value.is_a?(String) && value.empty?
+        end
+      end
+    end
+
+    class Data < Hash
+      def prefix
+        :data
+      end
+    end
+
+    class Aria < Hash
+      def prefix
+        :aria
+      end
+    end
+
+    class Classname < Array
+      def initialize(*args, &block)
+        super(*args, &block)
+        @base_set = false
+      end
+
+      # Many elements have a base class which defines core utlitiy
+      # This classname may serve as a root for other element classnames
+      # and should be distincly accessible
+      #
+      # For example:
+      #   classes = Classname.new
+      #   classes.base = 'nav__item'
+      #   now generate a wrapper: "#{classes.base}__wrapper"
+      #
+      # Ensure base class is the first element in the classes array.
+      #
+      def base=(klass)
+        return if klass.blank?
+
+        if @base_set
+          self[0] = klass
+        else
+          unshift klass
+          @base_set = true
+        end
+
+        uniq!
+      end
+
+      def base
+        first if @base_set
+      end
+
+      # Returns clasess which are not defined as a base class
+      def modifiers
+        @base_set ? self[1..size] : self
+      end
+
+      def add(*args)
+        push(*args.uniq.reject { |a| a.nil? || include?(a) })
+      end
+
+      def to_s
+        join(" ").html_safe
+      end
+    end
+  end
+end

data/lib/spark_components/component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module SparkComponents
+  class Component < Element
+    def self.model_name
+      ActiveModel::Name.new(SparkComponents::Component)
+    end
+
+    def self.component_name
+      class_name.chomp("Component").demodulize.underscore
+    end
+
+    def self.component_path
+      class_name.chomp("Component").underscore
+    end
+
+    # Allow Components to lookup their original classname
+    # even if created with Class.new(SomeComponent)
+    def self.class_name
+      name || superclass.name
+    end
+
+    def render
+      render_partial to_partial_path
+    end
+
+    def _name
+      super || self.class.component_name
+    end
+
+    def to_partial_path
+      [self.class.component_path, self.class.component_name].join("/")
+    end
+  end
+end

data/lib/spark_components/element.rb

@@ -0,0 +1,276 @@
+# frozen_string_literal: true
+
+module SparkComponents
+  class Element
+    include ActiveModel::Validations
+
+    attr_accessor :yield
+    attr_reader :parents, :attr
+
+    def self.model_name
+      ActiveModel::Name.new(SparkComponents::Element)
+    end
+
+    def self.attributes
+      @attributes ||= {}
+    end
+
+    def self.elements
+      @elements ||= {}
+    end
+
+    def self.attribute(*args)
+      args.each_with_object({}) do |arg, obj|
+        if arg.is_a?(Hash)
+          arg.each do |attr, default|
+            obj[attr.to_sym] = default
+            set_attribute(attr.to_sym, default: default)
+          end
+        else
+          obj[arg.to_sym] = nil
+          set_attribute(arg.to_sym)
+        end
+      end
+    end
+
+    def self.set_attribute(name, default: nil)
+      attributes[name] = { default: default }
+
+      define_method_or_raise(name) do
+        get_instance_variable(name)
+      end
+    end
+
+    def self.base_class(name)
+      tag_attributes[:class].base = name
+    end
+
+    def self.add_class(*args)
+      tag_attributes[:class].add(*args)
+    end
+
+    def self.data_attr(*args)
+      set_attr(:data, *args)
+    end
+
+    def self.aria_attr(*args)
+      set_attr(:aria, *args)
+    end
+
+    def self.tag_attr(*args)
+      set_attr(:tag, *args)
+    end
+
+    def self.set_attr(name, *args)
+      tag_attributes[name].add(attribute(*args))
+    end
+
+    def self.tag_attributes
+      @tag_attributes ||= {
+        class: SparkComponents::Attributes::Classname.new,
+        data: SparkComponents::Attributes::Data.new,
+        aria: SparkComponents::Attributes::Aria.new,
+        tag: SparkComponents::Attributes::Hash.new
+      }
+    end
+
+    # rubocop:disable Metrics/AbcSize
+    # rubocop:disable Metrics/CyclomaticComplexity
+    # rubocop:disable Metrics/MethodLength
+    # rubocop:disable Metrics/PerceivedComplexity
+    def self.element(name, multiple: false, component: nil, &config)
+      plural_name = name.to_s.pluralize.to_sym if multiple
+
+      # Extend components by string or class; e.g., "core/header" or Core::HeaderComponent
+      component = "#{component}_component".classify.constantize if component.is_a?(String)
+
+      elements[name] = {
+        multiple: plural_name || false, class: Class.new(component || Element, &config)
+      }
+
+      define_method_or_raise(name) do |attributes = nil, &block|
+        return get_instance_variable(multiple ? plural_name : name) unless attributes || block
+
+        element = self.class.elements[name][:class].new(@view, attributes, &block)
+        element.parent = self
+
+        if element.respond_to?(:render)
+          element.pre_render
+          element.yield = element.render
+        end
+
+        if multiple
+          get_instance_variable(plural_name) << element
+        else
+          set_instance_variable(name, element)
+        end
+      end
+
+      return if !multiple || name == plural_name
+
+      define_method_or_raise(plural_name) do
+        get_instance_variable(plural_name)
+      end
+    end
+    # rubocop:enable Metrics/AbcSize
+    # rubocop:enable Metrics/CyclomaticComplexity
+    # rubocop:enable Metrics/MethodLength
+    # rubocop:enable Metrics/PerceivedComplexity
+
+    def self.define_method_or_raise(method_name, &block)
+      # Select instance methods but not those which are intance methods received by extending a class
+      methods = (instance_methods - superclass.instance_methods(false))
+      raise(SparkComponents::Error, "Method '#{method_name}' already exists.") if methods.include?(method_name.to_sym)
+
+      define_method(method_name, &block)
+    end
+    private_class_method :define_method_or_raise
+
+    def self.inherited(subclass)
+      attributes.each { |name, options| subclass.set_attribute(name, options.dup) }
+      elements.each   { |name, options| subclass.elements[name] = options.dup }
+
+      subclass.tag_attributes.merge!(tag_attributes.each_with_object({}) do |(k, v), obj|
+        obj[k] = v.dup
+      end)
+    end
+
+    def initialize(view, attributes = nil, &block)
+      @view = view
+      attributes ||= {}
+      initialize_tag_attributes
+      assign_tag_attributes(attributes)
+      initialize_attributes(attributes)
+      initialize_elements
+      @yield = block_given? ? @view.capture(self, &block) : nil
+      validate!
+      after_init
+    end
+
+    def pre_render; end
+
+    def after_init; end
+
+    def parent=(obj)
+      @parents = [obj.parents, obj].flatten.compact
+    end
+
+    def parent
+      @parents.last
+    end
+
+    # Set tag attribute values from from parameters
+    def update_attr(name)
+      %i[aria data tag].each do |el|
+        @tag_attributes[el][name] = get_instance_variable(name) if @tag_attributes[el].key?(name)
+      end
+    end
+
+    def classnames
+      @tag_attributes[:class]
+    end
+
+    def base_class(name = nil)
+      classnames.base = name unless name.nil?
+      classnames.base
+    end
+
+    def add_class(*args)
+      classnames.add(*args)
+    end
+
+    def join_class(name, separator: "-")
+      [base_class, name].join(separator) unless base_class.nil?
+    end
+
+    def data_attr(*args)
+      @tag_attributes[:data].add(*args)
+    end
+
+    def aria_attr(*args)
+      @tag_attributes[:aria].add(*args)
+    end
+
+    def tag_attr(*args)
+      @tag_attributes[:tag].add(*args)
+    end
+
+    def attrs(add_class: true)
+      atr = Attributes::Hash.new
+      # attrtiubte order: id, class, data-, aria-, misc tag attributes
+      atr[:id] = tag_attr.delete(:id)
+      atr[:class] = classnames if add_class
+      atr.merge!(data_attr.collapse)
+      atr.merge!(aria_attr.collapse)
+      atr.merge!(tag_attr)
+      atr
+    end
+
+    def concat(*args, &block)
+      @view.concat(*args, &block)
+    end
+
+    def content_tag(*args, &block)
+      @view.content_tag(*args, &block)
+    end
+
+    def link_to(*args, &block)
+      @view.link_to(*args, &block)
+    end
+
+    def component(*args, &block)
+      @view.component(*args, &block)
+    end
+
+    def to_s
+      @yield
+    end
+
+    protected
+
+    def render_partial(file)
+      @view.render(partial: file, object: self)
+    end
+
+    def initialize_tag_attributes
+      @tag_attributes = self.class.tag_attributes.each_with_object({}) do |(name, options), obj|
+        obj[name] = options.dup
+      end
+    end
+
+    def assign_tag_attributes(attributes)
+      # support default data, class, and aria attribute names
+      data_attr(attributes.delete(:data)) if attributes[:data]
+      aria_attr(attributes.delete(:aria)) if attributes[:aria]
+      add_class(*attributes.delete(:class)) if attributes[:class]
+      tag_attr(attributes.delete(:splat)) if attributes[:splat]
+    end
+
+    def initialize_attributes(attributes)
+      self.class.attributes.each do |name, options|
+        set_instance_variable(name, attributes[name] || (options[:default] && options[:default].dup))
+        update_attr(name)
+      end
+    end
+
+    def initialize_elements
+      self.class.elements.each do |name, options|
+        if (plural_name = options[:multiple])
+          set_instance_variable(plural_name, [])
+        else
+          set_instance_variable(name, nil)
+        end
+      end
+    end
+
+    private
+
+    def get_instance_variable(name)
+      instance_variable_get(:"@#{name}")
+    end
+
+    def set_instance_variable(name, value)
+      instance_variable_set(:"@#{name}", value)
+    end
+  end
+end

data/lib/spark_components/engine.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module SparkComponents
+  class Engine < ::Rails::Engine
+    isolate_namespace SparkComponents
+
+    initializer "components.asset_paths" do |app|
+      app.config.assets.paths << SparkComponents.components_path if app.config.respond_to?(:assets)
+    end
+
+    initializer "components.view_helpers" do
+      ActiveSupport.on_load :action_controller do
+        helper SparkComponents::ComponentHelper
+      end
+
+      ActiveSupport.on_load :action_view do
+        include SparkComponents::ComponentHelper
+      end
+    end
+
+    initializer "components.view_paths" do
+      ActiveSupport.on_load :action_controller do
+        append_view_path SparkComponents.components_path
+      end
+    end
+  end
+end

data/lib/spark_components/railtie.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module SparkComponents
+  class Railtie < ::Rails::Railtie
+  end
+end

data/lib/spark_components/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module SparkComponents
+  VERSION = "1.0.0"
+end

data/lib/spark_components.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require "spark_components/attributes"
+require "spark_components/element"
+require "spark_components/component"
+require "spark_components/engine"
+
+module SparkComponents
+  class Error < StandardError; end
+
+  def self.components_path
+    Rails.root.join("app", "components")
+  end
+
+  def self.component_names
+    return [] unless Dir.exist?(components_path)
+
+    Dir.chdir(components_path) do
+      Dir.glob("**/*_component.rb").map { |component| component.chomp("_component.rb") }.sort
+    end
+  end
+end

data/lib/tasks/components_tasks.rake

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+# desc "Explaining what the task does"
+# task :components do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: spark_components
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Brandon Mathis
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-05-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.1.0
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Simple view components for Rails 5.1+
+email:
+- brandon@imathis.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/components_manifest.js
+- app/assets/javascripts/components.js.erb
+- app/assets/stylesheets/components.css.erb
+- app/helpers/spark_components/component_helper.rb
+- config/routes.rb
+- lib/generators/spark_components/component_generator.rb
+- lib/generators/spark_components/templates/component.rb.erb
+- lib/spark_components.rb
+- lib/spark_components/attributes.rb
+- lib/spark_components/component.rb
+- lib/spark_components/element.rb
+- lib/spark_components/engine.rb
+- lib/spark_components/railtie.rb
+- lib/spark_components/version.rb
+- lib/tasks/components_tasks.rake
+homepage: https://github.com/imathis/spark_components
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key: 
+specification_version: 4
+summary: Simple view components for Rails 5.1+
+test_files: []