element_component 0.6.0 → 0.8.0

data/examples/modal_example.rb

@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Modal
+# =============================================================================
+modal = ElementComponent::Components::Modal.new(id: "basicModal")
+modal.add_content(
+  ElementComponent::Components::ModalContent.new do |mc|
+    mc.add_content(ElementComponent::Components::ModalHeader.new do |mh|
+      mh.add_content(ElementComponent::Components::ModalTitle.new { |mt| mt.add_content("Modal title") })
+    end)
+    mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Modal body text goes here.") })
+    mc.add_content(ElementComponent::Components::ModalFooter.new do |mf|
+      mf.add_content(ElementComponent::Components::Button.new(variant: :secondary) { |btn| btn.add_content("Close") })
+      mf.add_content(ElementComponent::Components::Button.new(variant: :primary) do |btn|
+        btn.add_content("Save changes")
+      end)
+    end)
+  end
+)
+puts "=== Basic Modal ==="
+puts modal.render
+puts
+
+# =============================================================================
+# Scrollable Modal
+# =============================================================================
+modal = ElementComponent::Components::Modal.new(id: "scrollModal", scrollable: true)
+modal.add_content(
+  ElementComponent::Components::ModalContent.new do |mc|
+    mc.add_content(ElementComponent::Components::ModalHeader.new do |mh|
+      mh.add_content(ElementComponent::Components::ModalTitle.new { |mt| mt.add_content("Scrollable") })
+    end)
+    mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Long content body...") })
+    mc.add_content(ElementComponent::Components::ModalFooter.new { |mf| mf.add_content("Footer") })
+  end
+)
+puts "=== Scrollable Modal ==="
+puts modal.render
+puts
+
+# =============================================================================
+# Centered Modal
+# =============================================================================
+modal = ElementComponent::Components::Modal.new(id: "centerModal", centered: true)
+modal.add_content(
+  ElementComponent::Components::ModalContent.new do |mc|
+    mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Centered content") })
+  end
+)
+puts "=== Centered Modal ==="
+puts modal.render
+puts
+
+# =============================================================================
+# Large Modal
+# =============================================================================
+modal = ElementComponent::Components::Modal.new(id: "lgModal", size: :lg)
+modal.add_content(
+  ElementComponent::Components::ModalContent.new do |mc|
+    mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Large modal body") })
+  end
+)
+puts "=== Large Modal ==="
+puts modal.render
+puts
+
+# =============================================================================
+# Static Backdrop Modal
+# =============================================================================
+modal = ElementComponent::Components::Modal.new(id: "staticModal", static: true)
+modal.add_content(
+  ElementComponent::Components::ModalContent.new do |mc|
+    mc.add_content(ElementComponent::Components::ModalBody.new { |mb| mb.add_content("Click outside does not close") })
+  end
+)
+puts "=== Static Backdrop Modal ==="
+puts modal.render
+puts
+
+# =============================================================================
+# Header Without Close
+# =============================================================================
+modal = ElementComponent::Components::Modal.new(id: "noCloseModal")
+modal.add_content(
+  ElementComponent::Components::ModalContent.new do |mc|
+    mc.add_content(ElementComponent::Components::ModalHeader.new(close_button: false) do |mh|
+      mh.add_content(ElementComponent::Components::ModalTitle.new { |mt| mt.add_content("No close button") })
+    end)
+  end
+)
+puts "=== Modal Header Without Close ==="
+puts modal.render
+puts
+
+# =============================================================================
+# Sub-Components Rendered Independently
+# =============================================================================
+puts "=== ModalDialog ==="
+puts ElementComponent::Components::ModalDialog.new.render
+puts
+
+puts "=== ModalContent ==="
+puts ElementComponent::Components::ModalContent.new.render
+puts
+
+puts "=== ModalHeader ==="
+puts ElementComponent::Components::ModalHeader.new.render
+puts
+
+puts "=== ModalTitle ==="
+puts ElementComponent::Components::ModalTitle.new.render
+puts
+
+puts "=== ModalBody ==="
+puts ElementComponent::Components::ModalBody.new.render
+puts
+
+puts "=== ModalFooter ==="
+puts ElementComponent::Components::ModalFooter.new.render

data/examples/nav_example.rb

@@ -0,0 +1,77 @@
+# 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 |n|
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) do |link|
+      link.add_content("Home")
+    end)
+  end)
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/profile") { |link| link.add_content("Profile") })
+  end)
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/messages", disabled: true) do |link|
+      link.add_content("Messages")
+    end)
+  end)
+end
+puts "=== Nav Tabs ==="
+puts nav.render
+puts
+
+# =============================================================================
+# Nav Pills
+# =============================================================================
+nav = ElementComponent::Components::Nav.new(type: :pills) do |n|
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/") { |link| link.add_content("Home") })
+  end)
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |link| link.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 |n|
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/") { |link| link.add_content("Home") })
+  end)
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |link| link.add_content("About") })
+  end)
+end
+puts "=== Nav Fill ==="
+puts nav.render
+puts
+
+# =============================================================================
+# Vertical Nav
+# =============================================================================
+nav = ElementComponent::Components::Nav.new(vertical: true) do |n|
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/") { |link| link.add_content("Home") })
+  end)
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |link| link.add_content("About") })
+  end)
+end
+puts "=== Vertical Nav ==="
+puts nav.render

data/examples/navbar_example.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Navbar
+# =============================================================================
+navbar = ElementComponent::Components::Navbar.new do |n|
+  n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |brand| brand.add_content("Navbar") })
+  n.add_content(ElementComponent::Components::NavbarToggler.new(target: "basicNav"))
+  n.add_content(ElementComponent::Components::NavbarCollapse.new(id: "basicNav") do |collapse|
+    collapse.add_content(ElementComponent::Components::NavbarNav.new do |nav|
+      nav.add_content(ElementComponent::Components::NavItem.new do |item|
+        item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) do |link|
+          link.add_content("Home")
+        end)
+      end)
+      nav.add_content(ElementComponent::Components::NavItem.new do |item|
+        item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |link| link.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 |n|
+  n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |brand| brand.add_content("Dark") })
+  n.add_content(ElementComponent::Components::NavbarToggler.new(target: "darkNav"))
+  n.add_content(ElementComponent::Components::NavbarCollapse.new(id: "darkNav") do |collapse|
+    collapse.add_content(ElementComponent::Components::NavbarNav.new do |nav|
+      nav.add_content(ElementComponent::Components::NavItem.new do |item|
+        item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) do |link|
+          link.add_content("Home")
+        end)
+      end)
+      nav.add_content(ElementComponent::Components::NavItem.new do |item|
+        item.add_content(ElementComponent::Components::NavLink.new(href: "/contact") do |link|
+          link.add_content("Contact")
+        end)
+      end)
+      nav.add_content(ElementComponent::Components::NavItem.new do |item|
+        item.add_content(ElementComponent::Components::NavLink.new(href: "/disabled", disabled: true) do |link|
+          link.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 |n|
+  n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |brand| brand.add_content("Container") })
+  n.add_content(ElementComponent::Components::NavbarToggler.new(target: "containerNav"))
+  n.add_content(ElementComponent::Components::NavbarCollapse.new(id: "containerNav") do |collapse|
+    collapse.add_content(ElementComponent::Components::NavbarNav.new do |nav|
+      nav.add_content(ElementComponent::Components::NavItem.new do |item|
+        item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) do |link|
+          link.add_content("Home")
+        end)
+      end)
+    end)
+  end)
+end
+puts "=== Navbar with Container ==="
+puts navbar.render
+puts
+
+# =============================================================================
+# Navbar Without Container
+# =============================================================================
+navbar = ElementComponent::Components::Navbar.new(container: false) do |n|
+  n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |brand| brand.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 |p|
+  p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("1") })
+  p.add_content(ElementComponent::Components::PageItem.new(active: true) { |item| item.add_content("2") })
+  p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("3") })
+end
+puts "=== Basic Pagination ==="
+puts pager.render
+puts
+
+# =============================================================================
+# Pagination with Previous/Next
+# =============================================================================
+pager = ElementComponent::Components::Pagination.new do |p|
+  p.add_content(ElementComponent::Components::PageItem.new(disabled: true) { |item| item.add_content("Previous") })
+  p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("1") })
+  p.add_content(ElementComponent::Components::PageItem.new(active: true) { |item| item.add_content("2") })
+  p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("3") })
+  p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("Next") })
+end
+puts "=== Pagination with Previous/Next ==="
+puts pager.render
+puts
+
+# =============================================================================
+# Pagination Sizes
+# =============================================================================
+pager_sm = ElementComponent::Components::Pagination.new(size: :sm) do |p|
+  p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("1") })
+  p.add_content(ElementComponent::Components::PageItem.new(active: true) { |item| item.add_content("2") })
+end
+puts "=== Small Pagination ==="
+puts pager_sm.render
+puts
+
+pager_lg = ElementComponent::Components::Pagination.new(size: :lg) do |p|
+  p.add_content(ElementComponent::Components::PageItem.new { |item| item.add_content("1") })
+  p.add_content(ElementComponent::Components::PageItem.new(active: true) { |item| item.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 |p|
+  p.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 |p|
+  p.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 |p|
+  p.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 |p|
+  p.add_content(ElementComponent::Components::ProgressBar.new(value: 30, variant: :danger))
+  p.add_content(ElementComponent::Components::ProgressBar.new(value: 20, variant: :warning))
+  p.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 |s|
+  s.add_content(ElementComponent::Element.new("span", class: "visually-hidden") { |e| e.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 |t|
+  t.add_content("<thead><tr><th>Name</th><th>Age</th></tr></thead>")
+  t.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