railsboot 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e03b1033fe356b40d6f9e1d7b39e739240186dc66781d5d4d1c843bf341466dc
+  data.tar.gz: 9855fd58d10806d2c35371e5ffc4b562be2ef39c23b5f7c083e81d93eb57749e
+SHA512:
+  metadata.gz: 262471240b239e5fc8af3abe6db458f8734a187d84c8d991a409fbbb8de914a62d24c40af8ec78bb250839bba985a18a46074f70bcfdd04a87358b0747327389
+  data.tar.gz: 4c7dc4f046a0bdd71b4802e2327c8d9aff68f1b6937ccb9409f171cc002d57dc9e93365f022411371a892f2e9c43b0fbfb83cd691df12c753d9a47b48e2e57f6

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Daniel Schoppmann
+
+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,45 @@
+# Railsboot
+Railsboot is an implementation of the famous Bootstrap CSS framework using Rails View Components.
+
+## Preview
+You'll find detailed information on how to use Railsboot on https://railsbootui.com
+
+## Installation
+
+Add `railsboot` to your Gemfile and run `bundle install`:
+
+```ruby
+bundle add railsboot && bundle install
+```
+
+Also make ensure that you have correctly setup bootstrap in your Rails app. Otherwise the bootstrap styles and js files will not work.
+
+## Usage
+Each view component can be rendered with either a standard component call
+
+```erb
+<%= render Railsboot::BadgeComponent.new { "My badge"} %>
+```
+
+or with the integrated component helper
+
+```erb
+<%= railsboot_badge { "My badge"} %>
+```
+
+## Configuration
+Several view components ensure a valid bootstrap theme color scheme, so if you tweaked or enhanced the standard bootstrap volor palette, you should also add this to the gem. Create an initializer (in `config/initializers/railsboot.rb`):
+
+```ruby
+# defaults to ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+Railsboot.colors = ["primary", "secondary", "my-color"]
+```
+
+## Development
+Download the source code and run
+
+1. `bundle install` for instaling the dev dependencies
+2. `bundle exec rake test` for running the test
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,14 @@
+require "bundler/setup"
+
+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

data/app/assets/config/railsboot_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/railsboot .css

data/app/assets/stylesheets/railsboot/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/components/railsboot/accordion/item_component.html.erb

@@ -0,0 +1,10 @@
+<%= render Railsboot::BaseComponent.new(**@html_attributes) do %>
+  <%= content_tag :h2, class: "accordion-header" do %>
+    <%= content_tag :button, header, class: class_names("accordion-button", "collapsed" => !@expanded), type: "button", data: {bs_toggle: "collapse", bs_target: "##{@id}"}, aria: {expanded: @expanded, controls: @id} %>
+  <% end %>
+  <%= content_tag :div, id: @id, class: class_names("accordion-collapse collapse", "show" => @expanded), data: parent_reference do %>
+    <%= content_tag :div, class: "accordion-body" do %>
+      <%= body %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/railsboot/accordion/item_component.rb

@@ -0,0 +1,21 @@
+class Railsboot::Accordion::ItemComponent < Railsboot::Component
+  renders_one :header
+  renders_one :body
+
+  def initialize(id:, parent_id: "", expanded: false, **html_attributes)
+    @id = id
+    @parent_id = parent_id
+    @expanded = expanded
+    @html_attributes = html_attributes
+
+    @html_attributes[:tag] = "div"
+    @html_attributes[:class] = class_names(
+      "accordion-item",
+      html_attributes.delete(:class)
+    )
+  end
+
+  def parent_reference
+    @parent_id.present? ? {bs_parent: "##{@parent_id}"} : {}
+  end
+end

data/app/components/railsboot/accordion_component.html.erb

@@ -0,0 +1,5 @@
+<%= render Railsboot::BaseComponent.new(**@html_attributes) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/railsboot/accordion_component.rb

@@ -0,0 +1,15 @@
+class Railsboot::AccordionComponent < Railsboot::Component
+  renders_many :items, Railsboot::Accordion::ItemComponent
+
+  def initialize(flush: false, **html_attributes)
+    @flush = flush
+    @html_attributes = html_attributes
+
+    @html_attributes[:tag] = "div"
+    @html_attributes[:class] = class_names(
+      "accordion",
+      {"accordion-flush" => @flush},
+      html_attributes.delete(:class)
+    )
+  end
+end

data/app/components/railsboot/alert_component.html.erb

@@ -0,0 +1,4 @@
+<%= render Railsboot::BaseComponent.new(**@html_attributes) do %>
+  <%= content %>
+  <%= render Railsboot::CloseButtonComponent.new(data: {bs_dismiss: "alert"}) if @dismissible %>
+<% end %>

data/app/components/railsboot/alert_component.rb

@@ -0,0 +1,21 @@
+class Railsboot::AlertComponent < Railsboot::Component
+  def initialize(color: DEFAULT_COLOR, dismissible: false, **html_attributes)
+    @color = fetch_or_raise(color, COLORS)
+    @dismissible = dismissible
+    @html_attributes = html_attributes
+
+    @html_attributes[:tag] = "div"
+    @html_attributes[:class] = class_names(
+      "alert",
+      "alert-#{@color}",
+      {"alert-dismissible fade show" => @dismissible},
+      html_attributes.delete(:class)
+    )
+  end
+
+  protected
+
+  def before_render
+    @html_attributes["role"] = "alert"
+  end
+end

data/app/components/railsboot/badge_component.html.erb

@@ -0,0 +1,3 @@
+<%= render Railsboot::BaseComponent.new(**@html_attributes) do %>
+  <% content %>
+<% end %>

data/app/components/railsboot/badge_component.rb

@@ -0,0 +1,15 @@
+class Railsboot::BadgeComponent < Railsboot::Component
+  def initialize(pill: false, color: DEFAULT_COLOR, **html_attributes)
+    @pill = pill
+    @color = fetch_or_raise(color, COLORS)
+    @html_attributes = html_attributes
+
+    @html_attributes[:tag] = :span
+    @html_attributes[:class] = class_names(
+      "badge",
+      "bg-#{@color}",
+      {"rounded-pill" => @pill},
+      html_attributes.delete(:class)
+    )
+  end
+end

data/app/components/railsboot/base_component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag(@tag, **@html_attributes) do %>
+  <%= content %>
+<% end %>

data/app/components/railsboot/base_component.rb

@@ -0,0 +1,6 @@
+class Railsboot::BaseComponent < Railsboot::Component
+  def initialize(tag:, **html_attributes)
+    @tag = tag
+    @html_attributes = html_attributes
+  end
+end

data/app/components/railsboot/breadcrumb/item_component.html.erb

@@ -0,0 +1,11 @@
+<%= render Railsboot::BaseComponent.new(**@html_attributes) do %>
+  <% if @active %>
+    <%= @text %>
+  <% else %>
+    <% if @href.present? %>
+      <%= link_to @text, @href %>
+    <% else %>
+      <%= @text %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/railsboot/breadcrumb/item_component.rb

@@ -0,0 +1,21 @@
+class Railsboot::Breadcrumb::ItemComponent < Railsboot::Component
+  def initialize(text: "", href: "", active: false, **html_attributes)
+    @text = text
+    @href = href
+    @active = active
+    @html_attributes = html_attributes
+
+    @html_attributes[:tag] = "li"
+    @html_attributes[:class] = class_names(
+      "breadcrumb-item",
+      {"active" => @active},
+      html_attributes.delete(:class)
+    )
+  end
+
+  protected
+
+  def before_render
+    @html_attributes["aria-current"] = "page" if @active
+  end
+end

data/app/components/railsboot/breadcrumb_component.html.erb

@@ -0,0 +1,7 @@
+<%= render Railsboot::BaseComponent.new(**@html_attributes) do %>
+  <%= render Railsboot::BaseComponent.new(**@wrapper_attributes) do %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/railsboot/breadcrumb_component.rb

@@ -0,0 +1,25 @@
+class Railsboot::BreadcrumbComponent < Railsboot::Component
+  renders_many :items, Railsboot::Breadcrumb::ItemComponent
+
+  def initialize(wrapper_attributes: {}, **html_attributes)
+    @wrapper_attributes = wrapper_attributes
+    @html_attributes = html_attributes
+
+    @html_attributes[:tag] = "nav"
+    @html_attributes[:class] = class_names(
+      html_attributes.delete(:class)
+    ).presence
+
+    @wrapper_attributes[:tag] = "ol"
+    @wrapper_attributes[:class] = class_names(
+      "breadcrumb",
+      wrapper_attributes.delete(:class)
+    )
+  end
+
+  private
+
+  def before_render
+    @html_attributes["aria-label"] = "breadcrumb"
+  end
+end

data/app/components/railsboot/button/button_component.rb

@@ -0,0 +1,5 @@
+class Railsboot::Button::ButtonComponent < Railsboot::ButtonComponent
+  def initialize(**html_attributes)
+    super(tag: "button", **html_attributes)
+  end
+end

data/app/components/railsboot/button/input_component.rb

@@ -0,0 +1,5 @@
+class Railsboot::Button::InputComponent < Railsboot::ButtonComponent
+  def initialize(**html_attributes)
+    super(tag: "input", **html_attributes)
+  end
+end

data/app/components/railsboot/button/link_component.rb

@@ -0,0 +1,5 @@
+class Railsboot::Button::LinkComponent < Railsboot::ButtonComponent
+  def initialize(**html_attributes)
+    super(tag: "a", **html_attributes)
+  end
+end

data/app/components/railsboot/button_component.html.erb

@@ -0,0 +1,21 @@
+<% if button? %>
+
+  <%= content_tag :button, type: "button", **@html_attributes do %>
+    <%= @text.presence || content %>
+  <% end %>
+
+<% elsif link? %>
+
+  <%= link_to @href, **@html_attributes do %>
+    <%= @text.presence || content %>
+  <% end %>
+
+<% elsif input? %>
+
+  <% if @form.present? %>
+    <%= @form.submit(**@html_attributes) %>
+  <% else %>
+    <%= helpers.tag :input, **@html_attributes %>
+  <% end %>
+
+<% end %>

data/app/components/railsboot/button_component.rb

@@ -0,0 +1,49 @@
+class Railsboot::ButtonComponent < Railsboot::Component
+  TAGS = ["button", "a", "input"].freeze
+  DEFAULT_TAG = "button".freeze
+
+  VARIANTS = (COLORS + ["link"]).freeze
+  DEFAULT_VARIANT = DEFAULT_COLOR
+
+  SIZES = ["", "lg", "sm"].freeze
+  DEFAULT_SIZE = "".freeze
+
+  def initialize(text: "", href: "", tag: DEFAULT_TAG, variant: DEFAULT_VARIANT, size: DEFAULT_SIZE, outline: false, form: nil, **html_attributes)
+    @tag = fetch_or_raise(tag, TAGS)
+    @text = text
+    @href = href
+    @variant = fetch_or_raise(variant, VARIANTS)
+    @outline = outline
+    @size = fetch_or_fallback(size, SIZES, DEFAULT_SIZE)
+    @form = form
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "btn",
+      ["btn", ("outline" if @outline), @variant].compact_blank.join("-"),
+      {"btn-#{@size}" => @size.present?},
+      html_attributes.delete(:class)
+    )
+  end
+
+  def button?
+    @tag == "button"
+  end
+
+  def link?
+    @tag == "a"
+  end
+
+  def input?
+    @tag == "input"
+  end
+
+  private
+
+  def before_render
+    if input?
+      @html_attributes["type"] = "submit"
+      @html_attributes["value"] = @text.presence || content
+    end
+  end
+end

data/app/components/railsboot/button_group_component.html.erb

@@ -0,0 +1,3 @@
+<%= render Railsboot::BaseComponent.new(**@html_attributes) do %>
+  <%= content %>
+<% end %>

data/app/components/railsboot/button_group_component.rb

@@ -0,0 +1,24 @@
+class Railsboot::ButtonGroupComponent < Railsboot::Component
+  SIZES = ["", "lg", "sm"].freeze
+  DEFAULT_SIZE = "".freeze
+
+  def initialize(aria_label: "", size: DEFAULT_SIZE, **html_attributes)
+    @aria_label = aria_label
+    @size = fetch_or_fallback(size, SIZES, DEFAULT_SIZE)
+    @html_attributes = html_attributes
+
+    @html_attributes[:tag] = "div"
+    @html_attributes[:class] = class_names(
+      "btn-group",
+      {"btn-group-#{@size}" => @size.present?},
+      html_attributes.delete(:class)
+    )
+  end
+
+  protected
+
+  def before_render
+    @html_attributes["role"] = "group"
+    @html_attributes["aria-label"] = @aria_label if @aria_label.present?
+  end
+end

data/app/components/railsboot/card/body_component.rb

@@ -0,0 +1,14 @@
+class Railsboot::Card::BodyComponent < Railsboot::CardComponent
+  def initialize(**html_attributes)
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "card-body",
+      html_attributes.delete(:class)
+    )
+  end
+
+  def call
+    render(Railsboot::BaseComponent.new(tag: "div", **@html_attributes)) { content }
+  end
+end

data/app/components/railsboot/card/footer_component.rb

@@ -0,0 +1,14 @@
+class Railsboot::Card::FooterComponent < Railsboot::CardComponent
+  def initialize(**html_attributes)
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "card-footer",
+      html_attributes.delete(:class)
+    )
+  end
+
+  def call
+    render(Railsboot::BaseComponent.new(tag: "div", **@html_attributes)) { content }
+  end
+end

data/app/components/railsboot/card/header_component.rb

@@ -0,0 +1,14 @@
+class Railsboot::Card::HeaderComponent < Railsboot::CardComponent
+  def initialize(**html_attributes)
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "card-header",
+      html_attributes.delete(:class)
+    )
+  end
+
+  def call
+    render(Railsboot::BaseComponent.new(tag: "div", **@html_attributes)) { content }
+  end
+end

data/app/components/railsboot/card_component.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag :div, **@html_attributes do %>
+  <%= content %>
+  <%= header %>
+  <% bodies.each do |body| %>
+    <%= body %>
+  <% end %>
+  <% list_groups.each do |list_group| %>
+    <%= list_group %>
+  <% end %>
+  <%= footer %>
+<% end %>

data/app/components/railsboot/card_component.rb

@@ -0,0 +1,17 @@
+class Railsboot::CardComponent < Railsboot::Component
+  renders_one :header, Railsboot::Card::HeaderComponent
+  renders_many :bodies, Railsboot::Card::BodyComponent
+  renders_many :list_groups, lambda { |**html_attributes|
+    Railsboot::ListGroupComponent.new(flush: true, **html_attributes)
+  }
+  renders_one :footer, Railsboot::Card::FooterComponent
+
+  def initialize(**html_attributes)
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "card",
+      html_attributes.delete(:class)
+    )
+  end
+end

data/app/components/railsboot/carousel/item_component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag :div, **@html_attributes do %>
+  <%= content %>
+<% end %>

data/app/components/railsboot/carousel/item_component.rb

@@ -0,0 +1,14 @@
+class Railsboot::Carousel::ItemComponent < Railsboot::Component
+  attr_reader :active
+
+  def initialize(active: false, **html_attributes)
+    @active = active
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "carousel-item",
+      {"active" => @active},
+      html_attributes.delete(:class)
+    )
+  end
+end

data/app/components/railsboot/carousel_component.html.erb

@@ -0,0 +1,15 @@
+<%= content_tag :div, **@html_attributes do %>
+  <%= content_tag :div, class: "carousel-inner" do %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% end %>
+  <button class="carousel-control-prev" type="button" data-bs-target="#<%= @id %>" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#<%= @id %>" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+<% end %>

data/app/components/railsboot/carousel_component.rb

@@ -0,0 +1,14 @@
+class Railsboot::CarouselComponent < Railsboot::Component
+  renders_many :items, Railsboot::Carousel::ItemComponent
+
+  def initialize(id:, **html_attributes)
+    @id = id
+    @html_attributes = html_attributes
+
+    @html_attributes[:id] = @id
+    @html_attributes[:class] = class_names(
+      "carousel",
+      "slide"
+    )
+  end
+end

data/app/components/railsboot/close_button_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag :button, nil, **@html_attributes %>

data/app/components/railsboot/close_button_component.rb

@@ -0,0 +1,18 @@
+class Railsboot::CloseButtonComponent < Railsboot::Component
+  def initialize(disabled: false, **html_attributes)
+    @disabled = disabled
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "btn-close",
+      html_attributes.delete(:class)
+    )
+  end
+
+  private
+
+  def before_render
+    @html_attributes["aria-label"] = "Close"
+    @html_attributes["disabled"] = "disabled" if @disabled
+  end
+end

data/app/components/railsboot/component.rb

@@ -0,0 +1,23 @@
+# parent class for all bootstrap related components
+class Railsboot::Component < ViewComponent::Base
+  COLORS = Railsboot.colors.freeze
+  DEFAULT_COLOR = "primary".freeze
+
+  protected
+
+  def fetch_or_raise(argument, constant)
+    if argument.present? && constant.include?(argument.to_s)
+      argument
+    else
+      raise ArgumentError, "The `#{argument}: #{argument}` argument is not valid, allowed options are #{constant.join(", ")}."
+    end
+  end
+
+  def fetch_or_fallback(argument, constant, fallback)
+    if argument.present? && constant.include?(argument.to_s)
+      argument
+    else
+      fallback
+    end
+  end
+end

data/app/components/railsboot/dropdown/action_component.html.erb

@@ -0,0 +1,5 @@
+<% if button? %>
+  <%= render Railsboot::Button::ButtonComponent.new(text: @text, variant: @variant, **@html_attributes) %>
+<% else %>
+  <%= render Railsboot::Button::LinkComponent.new(text: @text, variant: @variant, **@html_attributes) %>
+<% end %>

data/app/components/railsboot/dropdown/action_component.rb

@@ -0,0 +1,31 @@
+class Railsboot::Dropdown::ActionComponent < Railsboot::Component
+  TYPES = ["button", "link"].freeze
+  DEFAULT_TYPE = "button".freeze
+
+  def initialize(text: "", type: DEFAULT_TYPE, variant: Railsboot::ButtonComponent::DEFAULT_VARIANT, **html_attributes)
+    @text = text
+    @variant = variant
+    @type = fetch_or_raise(type, TYPES)
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "dropdown-toggle",
+      html_attributes.delete(:class)
+    )
+  end
+
+  def button?
+    @type == "button"
+  end
+
+  def link?
+    @type == "link"
+  end
+
+  private
+
+  def before_render
+    @html_attributes["data-bs-toggle"] = "dropdown"
+    @html_attributes["aria-expanded"] = "false"
+  end
+end

data/app/components/railsboot/dropdown/divider_component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag :li, **@html_attributes do %>
+  <hr>
+<% end %>

data/app/components/railsboot/dropdown/divider_component.rb

@@ -0,0 +1,10 @@
+class Railsboot::Dropdown::DividerComponent < Railsboot::Component
+  def initialize(**html_attributes)
+    @html_attributes = html_attributes
+
+    @html_attributes[:class] = class_names(
+      "dropdown-divider",
+      html_attributes.delete(:class)
+    )
+  end
+end