element_component 0.6.0 → 0.8.0

data/examples/breadcrumb_example.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Breadcrumb
+# =============================================================================
+breadcrumb = ElementComponent::Components::Breadcrumb.new do |b|
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { |item| item.add_content("Home") })
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/library") do |item|
+    item.add_content("Library")
+  end)
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { |item| item.add_content("Data") })
+end
+puts "=== Basic Breadcrumb ==="
+puts breadcrumb.render
+puts
+
+# =============================================================================
+# Breadcrumb with Two Items
+# =============================================================================
+breadcrumb = ElementComponent::Components::Breadcrumb.new do |b|
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { |item| item.add_content("Home") })
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) do |item|
+    item.add_content("Current Page")
+  end)
+end
+puts "=== Two-Item Breadcrumb ==="
+puts breadcrumb.render
+puts
+
+# =============================================================================
+# Breadcrumb with Custom Class
+# =============================================================================
+breadcrumb = ElementComponent::Components::Breadcrumb.new(class: "custom-breadcrumb") do |b|
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { |item| item.add_content("Home") })
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { |item| item.add_content("Active") })
+end
+puts "=== Breadcrumb with Custom Class ==="
+puts breadcrumb.render

data/examples/button_example.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Button
+# =============================================================================
+btn = ElementComponent::Components::Button.new(variant: :primary)
+btn.add_content("Click Me")
+puts "=== Basic Button ==="
+puts btn.render
+puts
+
+# =============================================================================
+# Outline Button
+# =============================================================================
+btn = ElementComponent::Components::Button.new(variant: :danger, outline: true)
+btn.add_content("Delete")
+puts "=== Outline Button ==="
+puts btn.render
+puts
+
+# =============================================================================
+# Size Variants
+# =============================================================================
+btn_lg = ElementComponent::Components::Button.new(variant: :success, size: :lg)
+btn_lg.add_content("Large Button")
+
+btn_sm = ElementComponent::Components::Button.new(variant: :secondary, size: :sm)
+btn_sm.add_content("Small Button")
+
+puts "=== Size Variants ==="
+puts btn_lg.render
+puts btn_sm.render
+puts
+
+# =============================================================================
+# Button as Link
+# =============================================================================
+btn = ElementComponent::Components::Button.new(variant: :primary, href: "/home")
+btn.add_content("Home")
+puts "=== Button as Link ==="
+puts btn.render
+puts
+
+# =============================================================================
+# All Contexts
+# =============================================================================
+puts "=== All Button Variants ==="
+ElementComponent::Components::Button::VALID_VARIANTS.each do |variant|
+  btn = ElementComponent::Components::Button.new(variant: variant)
+  btn.add_content(variant.to_s.capitalize)
+  puts btn.render
+end
+puts
+
+# =============================================================================
+# Button with Block
+# =============================================================================
+btn = ElementComponent::Components::Button.new(variant: :info) do |b|
+  b.add_content("Info Button")
+end
+puts "=== Button with Block ==="
+puts btn.render
+puts
+
+# =============================================================================
+# Chained API
+# =============================================================================
+btn = ElementComponent::Components::Button.new(variant: :warning)
+                                          .add_content("Caution")
+puts "=== Chained API ==="
+puts btn.render
+puts
+
+# =============================================================================
+# Button with Custom Attributes
+# =============================================================================
+btn = ElementComponent::Components::Button.new(
+  variant: :dark,
+  id: "btn-submit",
+  data: { action: "submit" }
+)
+btn.add_content("Submit")
+puts "=== Button with Custom Attributes ==="
+puts btn.render

data/examples/button_group_example.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Button Group
+# =============================================================================
+group = ElementComponent::Components::ButtonGroup.new
+group.add_content(
+  ElementComponent::Components::Button.new(variant: :primary).add_content("Left")
+)
+group.add_content(
+  ElementComponent::Components::Button.new(variant: :primary).add_content("Middle")
+)
+group.add_content(
+  ElementComponent::Components::Button.new(variant: :primary).add_content("Right")
+)
+puts "=== Basic Button Group ==="
+puts group.render
+puts
+
+# =============================================================================
+# Vertical Button Group
+# =============================================================================
+group = ElementComponent::Components::ButtonGroup.new(vertical: true)
+group.add_content(
+  ElementComponent::Components::Button.new(variant: :secondary).add_content("Top")
+)
+group.add_content(
+  ElementComponent::Components::Button.new(variant: :secondary).add_content("Bottom")
+)
+puts "=== Vertical Button Group ==="
+puts group.render
+puts
+
+# =============================================================================
+# Button Group with Size
+# =============================================================================
+group = ElementComponent::Components::ButtonGroup.new(size: :sm) do |g|
+  g.add_content(ElementComponent::Components::Button.new(variant: :success) { |b| b.add_content("Save") })
+  g.add_content(ElementComponent::Components::Button.new(variant: :danger) { |b| b.add_content("Delete") })
+end
+puts "=== Small Button Group ==="
+puts group.render
+puts
+
+# =============================================================================
+# Chained API
+# =============================================================================
+group = ElementComponent::Components::ButtonGroup.new(class: "my-group")
+group.add_content(
+  ElementComponent::Components::Button.new(variant: :info).add_content("Action")
+)
+puts "=== Button Group with Custom Class ==="
+puts group.render

data/examples/card_example.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Card
+# =============================================================================
+card = ElementComponent::Components::Card.new
+card.add_content("Simple card content")
+puts "=== Basic Card ==="
+puts card.render
+puts
+
+# =============================================================================
+# Card with Header, Body, and Footer
+# =============================================================================
+card = ElementComponent::Components::Card.new do |c|
+  c.add_content(ElementComponent::Components::CardHeader.new { |ch| ch.add_content("Header") })
+  c.add_content(ElementComponent::Components::CardBody.new { |cb| cb.add_content("Body content here") })
+  c.add_content(ElementComponent::Components::CardFooter.new { |cf| cf.add_content("Footer") })
+end
+puts "=== Card with Header, Body, Footer ==="
+puts card.render
+puts
+
+# =============================================================================
+# Card with Title and Text
+# =============================================================================
+card = ElementComponent::Components::Card.new do |c|
+  c.add_content(ElementComponent::Components::CardBody.new do |cb|
+    cb.add_content(ElementComponent::Components::CardTitle.new { |ct| ct.add_content("Card Title") })
+    cb.add_content(ElementComponent::Components::CardText.new { |ct| ct.add_content("Some quick example text.") })
+  end)
+end
+puts "=== Card with Title and Text ==="
+puts card.render
+puts
+
+# =============================================================================
+# Card with Image
+# =============================================================================
+card = ElementComponent::Components::Card.new do |c|
+  c.add_content(ElementComponent::Components::CardImage.new(src: "image.jpg", top: true))
+  c.add_content(ElementComponent::Components::CardBody.new do |cb|
+    cb.add_content(ElementComponent::Components::CardTitle.new { |ct| ct.add_content("Image Card") })
+    cb.add_content(ElementComponent::Components::CardText.new { |ct| ct.add_content("Card with an image on top.") })
+  end)
+end
+puts "=== Card with Image ==="
+puts card.render
+puts
+
+# =============================================================================
+# Chained API
+# =============================================================================
+card = ElementComponent::Components::Card.new
+card.add_content(
+  ElementComponent::Components::CardBody.new
+                                       .add_content("Chained content")
+)
+puts "=== Chained API ==="
+puts card.render

data/examples/carousel_example.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Carousel
+# =============================================================================
+carousel = ElementComponent::Components::Carousel.new(id: "basicCarousel") do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) do |item|
+    item.add_content(%(<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">))
+  end)
+  c.add_content(ElementComponent::Components::CarouselItem.new do |item|
+    item.add_content(%(<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">))
+  end)
+end
+puts "=== Basic Carousel ==="
+puts carousel.render
+puts
+
+# =============================================================================
+# Carousel with Captions
+# =============================================================================
+carousel = ElementComponent::Components::Carousel.new(id: "captionCarousel") do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) do |item|
+    item.add_content(%(<img src="hero.jpg" class="d-block w-100" alt="Hero">))
+    item.add_content(ElementComponent::Components::CarouselCaption.new do |cap|
+      cap.add_content(%(<h5>First slide</h5><p>Some description here.</p>))
+    end)
+  end)
+  c.add_content(ElementComponent::Components::CarouselItem.new do |item|
+    item.add_content(%(<img src="hero2.jpg" class="d-block w-100" alt="Hero 2">))
+    item.add_content(ElementComponent::Components::CarouselCaption.new do |cap|
+      cap.add_content(%(<h5>Second slide</h5><p>Another description.</p>))
+    end)
+  end)
+end
+puts "=== Carousel with Captions ==="
+puts carousel.render
+puts
+
+# =============================================================================
+# Fade Carousel
+# =============================================================================
+carousel = ElementComponent::Components::Carousel.new(id: "fadeCarousel", fade: true) do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) { |item| item.add_content("Slide 1") })
+  c.add_content(ElementComponent::Components::CarouselItem.new { |item| item.add_content("Slide 2") })
+end
+puts "=== Fade Carousel ==="
+puts carousel.render
+puts
+
+# =============================================================================
+# Carousel Without Indicators
+# =============================================================================
+carousel = ElementComponent::Components::Carousel.new(id: "noIndicators", indicators: false) do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) { |item| item.add_content("Slide 1") })
+end
+puts "=== Carousel Without Indicators ==="
+puts carousel.render
+puts
+
+# =============================================================================
+# Carousel Without Controls
+# =============================================================================
+carousel = ElementComponent::Components::Carousel.new(id: "noControls", controls: false) do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) { |item| item.add_content("Slide 1") })
+end
+puts "=== Carousel Without Controls ==="
+puts carousel.render
+puts
+
+# =============================================================================
+# Custom Interval
+# =============================================================================
+carousel = ElementComponent::Components::Carousel.new(id: "intervalCarousel") do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true, interval: 5000) do |item|
+    item.add_content("Slide 1")
+  end)
+  c.add_content(ElementComponent::Components::CarouselItem.new(interval: 2000) { |item| item.add_content("Slide 2") })
+end
+puts "=== Carousel with Custom Interval ==="
+puts carousel.render
+puts
+
+# =============================================================================
+# Sub-Components Rendered Independently
+# =============================================================================
+puts "=== CarouselItem ==="
+puts ElementComponent::Components::CarouselItem.new.render
+puts
+
+puts "=== CarouselItem Active ==="
+puts ElementComponent::Components::CarouselItem.new(active: true).render
+puts
+
+puts "=== CarouselCaption ==="
+puts ElementComponent::Components::CarouselCaption.new.render

data/examples/close_button_example.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Close Button
+# =============================================================================
+btn = ElementComponent::Components::CloseButton.new
+puts "=== Basic Close Button ==="
+puts btn.render
+puts
+
+# =============================================================================
+# Disabled Close Button
+# =============================================================================
+btn = ElementComponent::Components::CloseButton.new(disabled: true)
+puts "=== Disabled Close Button ==="
+puts btn.render
+puts
+
+# =============================================================================
+# Close Button with Custom Attributes
+# =============================================================================
+btn = ElementComponent::Components::CloseButton.new(
+  class: "custom-close",
+  id: "close-btn-1",
+  data: { dismiss: "modal" }
+)
+puts "=== Close Button with Custom Attributes ==="
+puts btn.render
+puts
+
+# =============================================================================
+# Close Button Inside an Alert (simulated)
+# =============================================================================
+alert = ElementComponent::Components::Alert.new(variant: :warning, dismissible: true) do |a|
+  a.add_content("This alert has a close button.")
+end
+puts "=== Close Button Inside Alert ==="
+puts alert.render

data/examples/dropdown_example.rb

@@ -0,0 +1,131 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Dropdown
+# =============================================================================
+dropdown = ElementComponent::Components::Dropdown.new do |d|
+  d.add_content(
+    ElementComponent::Element.new("button",
+                                  class: "btn btn-secondary dropdown-toggle",
+                                  type: "button",
+                                  "data-bs-toggle": "dropdown",
+                                  "aria-expanded": "false") do |btn|
+      btn.add_content("Dropdown")
+    end
+  )
+  d.add_content(
+    ElementComponent::Components::DropdownMenu.new do |menu|
+      menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Action") })
+      menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Another action") })
+      menu.add_content(ElementComponent::Components::DropdownDivider.new)
+      menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Something else") })
+    end
+  )
+end
+puts "=== Basic Dropdown ==="
+puts dropdown.render
+puts
+
+# =============================================================================
+# Dropdown with Active and Disabled Items
+# =============================================================================
+dropdown = ElementComponent::Components::Dropdown.new do |d|
+  d.add_content(
+    ElementComponent::Element.new("button",
+                                  class: "btn btn-primary dropdown-toggle",
+                                  type: "button",
+                                  "data-bs-toggle": "dropdown",
+                                  "aria-expanded": "false") do |btn|
+      btn.add_content("Menu")
+    end
+  )
+  d.add_content(
+    ElementComponent::Components::DropdownMenu.new do |menu|
+      menu.add_content(ElementComponent::Components::DropdownHeader.new { |h| h.add_content("Section 1") })
+      menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Regular item") })
+      menu.add_content(ElementComponent::Components::DropdownItem.new(active: true) do |item|
+        item.add_content("Active item")
+      end)
+      menu.add_content(ElementComponent::Components::DropdownItem.new(disabled: true) do |item|
+        item.add_content("Disabled item")
+      end)
+    end
+  )
+end
+puts "=== Dropdown with States ==="
+puts dropdown.render
+puts
+
+# =============================================================================
+# Dropdown Type Button Items
+# =============================================================================
+dropdown = ElementComponent::Components::Dropdown.new do |d|
+  d.add_content(
+    ElementComponent::Element.new("button",
+                                  class: "btn btn-success dropdown-toggle",
+                                  type: "button",
+                                  "data-bs-toggle": "dropdown",
+                                  "aria-expanded": "false") do |btn|
+      btn.add_content("Actions")
+    end
+  )
+  d.add_content(
+    ElementComponent::Components::DropdownMenu.new do |menu|
+      menu.add_content(ElementComponent::Components::DropdownItem.new(type: :button) do |item|
+        item.add_content("Save")
+      end)
+      menu.add_content(ElementComponent::Components::DropdownItem.new(type: :button) do |item|
+        item.add_content("Delete")
+      end)
+    end
+  )
+end
+puts "=== Dropdown with Button Items ==="
+puts dropdown.render
+puts
+
+# =============================================================================
+# Dropup Direction
+# =============================================================================
+dropdown = ElementComponent::Components::Dropdown.new(direction: :dropup) do |d|
+  d.add_content(
+    ElementComponent::Element.new("button",
+                                  class: "btn btn-warning dropdown-toggle",
+                                  type: "button",
+                                  "data-bs-toggle": "dropdown",
+                                  "aria-expanded": "false") do |btn|
+      btn.add_content("Up")
+    end
+  )
+  d.add_content(
+    ElementComponent::Components::DropdownMenu.new do |menu|
+      menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Item 1") })
+      menu.add_content(ElementComponent::Components::DropdownItem.new { |item| item.add_content("Item 2") })
+    end
+  )
+end
+puts "=== Dropup ==="
+puts dropdown.render
+puts
+
+# =============================================================================
+# Sub-Components Rendered Independently
+# =============================================================================
+puts "=== DropdownMenu ==="
+puts ElementComponent::Components::DropdownMenu.new.render
+puts
+
+puts "=== DropdownItem ==="
+dropdown_item = ElementComponent::Components::DropdownItem.new { |item| item.add_content("Item") }
+puts dropdown_item.render
+puts
+
+puts "=== DropdownDivider ==="
+puts ElementComponent::Components::DropdownDivider.new.render
+puts
+
+puts "=== DropdownHeader ==="
+dropdown_header = ElementComponent::Components::DropdownHeader.new { |h| h.add_content("Header") }
+puts dropdown_header.render

data/examples/list_group_example.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic List Group
+# =============================================================================
+group = ElementComponent::Components::ListGroup.new do |g|
+  g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Item 1") })
+  g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Item 2") })
+  g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Item 3") })
+end
+puts "=== Basic List Group ==="
+puts group.render
+puts
+
+# =============================================================================
+# Flush List Group
+# =============================================================================
+group = ElementComponent::Components::ListGroup.new(flush: true) do |g|
+  g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Flush Item 1") })
+  g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Flush Item 2") })
+end
+puts "=== Flush List Group ==="
+puts group.render
+puts
+
+# =============================================================================
+# Active and Disabled Items
+# =============================================================================
+group = ElementComponent::Components::ListGroup.new do |g|
+  g.add_content(ElementComponent::Components::ListGroupItem.new(active: true) do |item|
+    item.add_content("Active Item")
+  end)
+  g.add_content(ElementComponent::Components::ListGroupItem.new { |item| item.add_content("Regular Item") })
+  g.add_content(ElementComponent::Components::ListGroupItem.new(disabled: true) do |item|
+    item.add_content("Disabled Item")
+  end)
+end
+puts "=== Active and Disabled Items ==="
+puts group.render
+puts
+
+# =============================================================================
+# List Group with Links
+# =============================================================================
+group = ElementComponent::Components::ListGroup.new do |g|
+  g.add_content(ElementComponent::Components::ListGroupItem.new(href: "/page1") { |item| item.add_content("Link 1") })
+  g.add_content(ElementComponent::Components::ListGroupItem.new(href: "/page2") { |item| item.add_content("Link 2") })
+end
+puts "=== List Group with Links ==="
+puts group.render
+puts
+
+# =============================================================================
+# Variant Items
+# =============================================================================
+group = ElementComponent::Components::ListGroup.new do |g|
+  g.add_content(ElementComponent::Components::ListGroupItem.new(variant: :success) do |item|
+    item.add_content("Success")
+  end)
+  g.add_content(ElementComponent::Components::ListGroupItem.new(variant: :danger) { |item| item.add_content("Danger") })
+  g.add_content(ElementComponent::Components::ListGroupItem.new(variant: :warning) do |item|
+    item.add_content("Warning")
+  end)
+end
+puts "=== Variant Items ==="
+puts group.render