element_component 0.6.0 → 0.7.0

data/examples/nav_example.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Nav
+# =============================================================================
+nav = ElementComponent::Components::Nav.new
+puts "=== Basic Nav ==="
+puts nav.render
+puts
+
+# =============================================================================
+# Nav Tabs
+# =============================================================================
+nav = ElementComponent::Components::Nav.new(type: :tabs) do
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
+  end)
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/profile") { add_content("Profile") })
+  end)
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/messages", disabled: true) do
+      add_content("Messages")
+    end)
+  end)
+end
+puts "=== Nav Tabs ==="
+puts nav.render
+puts
+
+# =============================================================================
+# Nav Pills
+# =============================================================================
+nav = ElementComponent::Components::Nav.new(type: :pills) do
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/") { add_content("Home") })
+  end)
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
+  end)
+end
+puts "=== Nav Pills ==="
+puts nav.render
+puts
+
+# =============================================================================
+# Nav Fill and Justified
+# =============================================================================
+nav = ElementComponent::Components::Nav.new(type: :pills, fill: true) do
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/") { add_content("Home") })
+  end)
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
+  end)
+end
+puts "=== Nav Fill ==="
+puts nav.render
+puts
+
+# =============================================================================
+# Vertical Nav
+# =============================================================================
+nav = ElementComponent::Components::Nav.new(vertical: true) do
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/") { add_content("Home") })
+  end)
+  add_content(ElementComponent::Components::NavItem.new do
+    add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
+  end)
+end
+puts "=== Vertical Nav ==="
+puts nav.render

data/examples/navbar_example.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Navbar
+# =============================================================================
+navbar = ElementComponent::Components::Navbar.new do
+  add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Navbar") })
+  add_content(ElementComponent::Components::NavbarToggler.new(target: "basicNav"))
+  add_content(ElementComponent::Components::NavbarCollapse.new(id: "basicNav") do
+    add_content(ElementComponent::Components::NavbarNav.new do
+      add_content(ElementComponent::Components::NavItem.new do
+        add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
+      end)
+      add_content(ElementComponent::Components::NavItem.new do
+        add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
+      end)
+    end)
+  end)
+end
+puts "=== Basic Navbar ==="
+puts navbar.render
+puts
+
+# =============================================================================
+# Dark Navbar
+# =============================================================================
+navbar = ElementComponent::Components::Navbar.new(theme: :dark, background: :dark) do
+  add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Dark") })
+  add_content(ElementComponent::Components::NavbarToggler.new(target: "darkNav"))
+  add_content(ElementComponent::Components::NavbarCollapse.new(id: "darkNav") do
+    add_content(ElementComponent::Components::NavbarNav.new do
+      add_content(ElementComponent::Components::NavItem.new do
+        add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
+      end)
+      add_content(ElementComponent::Components::NavItem.new do
+        add_content(ElementComponent::Components::NavLink.new(href: "/contact") { add_content("Contact") })
+      end)
+      add_content(ElementComponent::Components::NavItem.new do
+        add_content(ElementComponent::Components::NavLink.new(href: "/disabled", disabled: true) do
+          add_content("Disabled")
+        end)
+      end)
+    end)
+  end)
+end
+puts "=== Dark Navbar ==="
+puts navbar.render
+puts
+
+# =============================================================================
+# Navbar with Container
+# =============================================================================
+navbar = ElementComponent::Components::Navbar.new(container: "container") do
+  add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Container") })
+  add_content(ElementComponent::Components::NavbarToggler.new(target: "containerNav"))
+  add_content(ElementComponent::Components::NavbarCollapse.new(id: "containerNav") do
+    add_content(ElementComponent::Components::NavbarNav.new do
+      add_content(ElementComponent::Components::NavItem.new do
+        add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
+      end)
+    end)
+  end)
+end
+puts "=== Navbar with Container ==="
+puts navbar.render
+puts
+
+# =============================================================================
+# Navbar Without Container
+# =============================================================================
+navbar = ElementComponent::Components::Navbar.new(container: false) do
+  add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Fluid") })
+end
+puts "=== Navbar Without Container ==="
+puts navbar.render
+puts
+
+# =============================================================================
+# Sub-Components Rendered Independently
+# =============================================================================
+puts "=== NavbarBrand ==="
+puts ElementComponent::Components::NavbarBrand.new(href: "/").render
+puts
+
+puts "=== NavbarToggler ==="
+puts ElementComponent::Components::NavbarToggler.new(target: "myNav").render
+puts
+
+puts "=== NavbarCollapse ==="
+puts ElementComponent::Components::NavbarCollapse.new(id: "myNav").render
+puts
+
+puts "=== NavbarNav ==="
+puts ElementComponent::Components::NavbarNav.new.render

data/examples/pagination_example.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Pagination
+# =============================================================================
+pager = ElementComponent::Components::Pagination.new do
+  add_content(ElementComponent::Components::PageItem.new { add_content("1") })
+  add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("2") })
+  add_content(ElementComponent::Components::PageItem.new { add_content("3") })
+end
+puts "=== Basic Pagination ==="
+puts pager.render
+puts
+
+# =============================================================================
+# Pagination with Previous/Next
+# =============================================================================
+pager = ElementComponent::Components::Pagination.new do
+  add_content(ElementComponent::Components::PageItem.new(disabled: true) { add_content("Previous") })
+  add_content(ElementComponent::Components::PageItem.new { add_content("1") })
+  add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("2") })
+  add_content(ElementComponent::Components::PageItem.new { add_content("3") })
+  add_content(ElementComponent::Components::PageItem.new { add_content("Next") })
+end
+puts "=== Pagination with Previous/Next ==="
+puts pager.render
+puts
+
+# =============================================================================
+# Pagination Sizes
+# =============================================================================
+pager_sm = ElementComponent::Components::Pagination.new(size: :sm) do
+  add_content(ElementComponent::Components::PageItem.new { add_content("1") })
+  add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("2") })
+end
+puts "=== Small Pagination ==="
+puts pager_sm.render
+puts
+
+pager_lg = ElementComponent::Components::Pagination.new(size: :lg) do
+  add_content(ElementComponent::Components::PageItem.new { add_content("1") })
+  add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("2") })
+end
+puts "=== Large Pagination ==="
+puts pager_lg.render

data/examples/progress_example.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Progress Bar
+# =============================================================================
+progress = ElementComponent::Components::Progress.new do
+  add_content(ElementComponent::Components::ProgressBar.new(value: 75))
+end
+puts "=== Basic Progress Bar ==="
+puts progress.render
+puts
+
+# =============================================================================
+# Progress Bar with Variant
+# =============================================================================
+progress = ElementComponent::Components::Progress.new do
+  add_content(ElementComponent::Components::ProgressBar.new(value: 50, variant: :info))
+end
+puts "=== Progress Bar with Variant ==="
+puts progress.render
+puts
+
+# =============================================================================
+# Striped and Animated Progress Bar
+# =============================================================================
+progress = ElementComponent::Components::Progress.new do
+  add_content(ElementComponent::Components::ProgressBar.new(
+                value: 60, variant: :warning, striped: true, animated: true
+              ))
+end
+puts "=== Striped and Animated ==="
+puts progress.render
+puts
+
+# =============================================================================
+# Multiple Progress Bars
+# =============================================================================
+progress = ElementComponent::Components::Progress.new do
+  add_content(ElementComponent::Components::ProgressBar.new(value: 30, variant: :danger))
+  add_content(ElementComponent::Components::ProgressBar.new(value: 20, variant: :warning))
+  add_content(ElementComponent::Components::ProgressBar.new(value: 40, variant: :success))
+end
+puts "=== Multiple Progress Bars ==="
+puts progress.render
+puts
+
+# =============================================================================
+# Standalone Progress Bar
+# =============================================================================
+bar = ElementComponent::Components::ProgressBar.new(value: 85, variant: :success)
+puts "=== Standalone Progress Bar ==="
+puts bar.render

data/examples/spinner_example.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Border Spinner
+# =============================================================================
+spinner = ElementComponent::Components::Spinner.new
+puts "=== Basic Border Spinner ==="
+puts spinner.render
+puts
+
+# =============================================================================
+# Grow Spinner
+# =============================================================================
+spinner = ElementComponent::Components::Spinner.new(type: :grow)
+puts "=== Grow Spinner ==="
+puts spinner.render
+puts
+
+# =============================================================================
+# Color Variants
+# =============================================================================
+puts "=== Color Variants ==="
+%i[primary secondary success danger warning info light dark].each do |variant|
+  spinner = ElementComponent::Components::Spinner.new(variant: variant)
+  puts spinner.render
+end
+puts
+
+# =============================================================================
+# Spinner with Screen Reader Text
+# =============================================================================
+spinner = ElementComponent::Components::Spinner.new do
+  add_content(ElementComponent::Element.new("span", class: "visually-hidden") { add_content("Loading...") })
+end
+puts "=== Spinner with Text ==="
+puts spinner.render
+puts
+
+# =============================================================================
+# Spinner with Custom Attributes
+# =============================================================================
+spinner = ElementComponent::Components::Spinner.new(
+  variant: :primary,
+  style: "width: 3rem; height: 3rem;"
+)
+puts "=== Spinner with Custom Attributes ==="
+puts spinner.render

data/examples/table_example.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Table
+# =============================================================================
+table = ElementComponent::Components::Table.new
+puts "=== Basic Table ==="
+puts table.render
+puts
+
+# =============================================================================
+# Table with All Options
+# =============================================================================
+table = ElementComponent::Components::Table.new(
+  striped: true, bordered: true, hover: true, small: true, variant: :dark
+)
+puts "=== Table with All Options ==="
+puts table.render
+puts
+
+# =============================================================================
+# Table with Content
+# =============================================================================
+table = ElementComponent::Components::Table.new(striped: true) do
+  add_content("<thead><tr><th>Name</th><th>Age</th></tr></thead>")
+  add_content("<tbody><tr><td>John</td><td>30</td></tr></tbody>")
+end
+puts "=== Table with Content ==="
+puts table.render
+puts
+
+# =============================================================================
+# Table Variants
+# =============================================================================
+puts "=== Table Variants ==="
+%i[primary secondary success danger warning info light dark].each do |variant|
+  t = ElementComponent::Components::Table.new(variant: variant)
+  puts t.render
+end

data/lib/element_component/components/alert.rb

@@ -7,13 +7,13 @@ require_relative "alert/close_button"
 module ElementComponent
   module Components
     class Alert < Element
-      VALID_CONTEXTS = %i[primary secondary success danger warning info light dark].freeze
+      VALID_VARIANTS = %i[primary secondary success danger warning info light dark].freeze
 
-      def initialize(context: :primary, dismissible: false, **attributes, &block)
+      def initialize(variant: :primary, dismissible: false, **attributes, &block)
         super("div", &block)
 
         add_attribute(class: "alert")
-        add_attribute(class: "alert-#{context}")
+        add_attribute(class: "alert-#{variant}")
         add_attribute(class: "alert-dismissible") if dismissible
         add_attribute(role: "alert")
 

data/lib/element_component/components/badge.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class Badge < Element
+      VALID_VARIANTS = %i[primary secondary success danger warning info light dark].freeze
+
+      def initialize(variant: :primary, pill: false, **attributes, &block)
+        super("span", &block)
+
+        add_attribute(class: "badge")
+        add_attribute(class: "bg-#{variant}")
+        add_attribute(class: "rounded-pill") if pill
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/breadcrumb/item.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class BreadcrumbItem < Element
+      def initialize(href: nil, active: false, **attributes, &block)
+        super("li", &block)
+
+        add_attribute(class: "breadcrumb-item")
+        add_attribute(class: "active") if active
+        add_attribute("aria-current": "page") if active
+        add_attribute(attributes) unless attributes.empty?
+
+        @href = href
+      end
+
+      private
+
+      def mount_content
+        inner = super
+        if @href && @contents.none?(Element)
+          "<a href=\"#{@href}\">#{inner}</a>"
+        else
+          inner
+        end
+      end
+    end
+  end
+end

data/lib/element_component/components/breadcrumb.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require_relative "breadcrumb/item"
+
+module ElementComponent
+  module Components
+    class Breadcrumb < Element
+      def initialize(**attributes, &)
+        super("nav", &)
+
+        add_attribute("aria-label": "breadcrumb")
+        add_attribute(attributes) unless attributes.empty?
+      end
+
+      def build
+        @html << "<#{@element}"
+        @html << (mount_attributes.empty? ? ">" : " #{mount_attributes}>")
+        @html << "<ol class=\"breadcrumb\">"
+        @html << mount_content
+        @html << "</ol>"
+        @html << "</#{@element}>" if @closing_tag
+        @html
+      end
+    end
+  end
+end

data/lib/element_component/components/button.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class Button < Element
+      VALID_VARIANTS = %i[primary secondary success danger warning info light dark link].freeze
+      VALID_SIZES = %i[sm lg].freeze
+
+      def initialize(variant: :primary, outline: false, size: nil, href: nil, **attributes, &block)
+        if href
+          super("a", &block)
+          add_attribute(href: href)
+        else
+          super("button", &block)
+          add_attribute(type: "button")
+        end
+
+        add_attribute(class: "btn")
+        add_attribute(class: outline ? "btn-outline-#{variant}" : "btn-#{variant}")
+        add_attribute(class: "btn-#{size}") if size
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/button_group.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ButtonGroup < Element
+      VALID_SIZES = %i[sm lg].freeze
+
+      def initialize(size: nil, vertical: false, **attributes, &block)
+        super("div", &block)
+
+        add_attribute(class: vertical ? "btn-group-vertical" : "btn-group")
+        add_attribute(class: "btn-group-#{size}") if size
+        add_attribute(role: "group")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/body.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardBody < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "card-body")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/footer.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardFooter < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "card-footer")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/header.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardHeader < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "card-header")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/image.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardImage < Element
+      def initialize(src: "", top: false, bottom: false, **attributes, &block)
+        super("img", closing_tag: false, &block)
+
+        add_attribute(class: "card-img")
+        add_attribute(class: "card-img-top") if top
+        add_attribute(class: "card-img-bottom") if bottom
+        add_attribute(src: src)
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/text.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardText < Element
+      def initialize(**attributes, &)
+        super("p", &)
+
+        add_attribute(class: "card-text")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/title.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardTitle < Element
+      def initialize(**attributes, &)
+        super("h5", &)
+
+        add_attribute(class: "card-title")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require_relative "card/header"
+require_relative "card/body"
+require_relative "card/footer"
+require_relative "card/title"
+require_relative "card/text"
+require_relative "card/image"
+
+module ElementComponent
+  module Components
+    class Card < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "card")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/carousel/caption.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CarouselCaption < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "carousel-caption")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/carousel/item.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CarouselItem < Element
+      def initialize(active: false, interval: nil, **attributes, &block)
+        super("div", &block)
+
+        add_attribute(class: "carousel-item")
+        add_attribute(class: "active") if active
+        add_attribute("data-bs-interval": interval.to_s) if interval
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end