element_component 0.5.0 → 0.7.0

data/examples/alert_example.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Alert
+# =============================================================================
+alert = ElementComponent::Components::Alert.new(variant: :success)
+alert.add_content("Operation completed successfully!")
+puts "=== Basic Alert ==="
+puts alert.render
+puts
+
+# =============================================================================
+# All Variants
+# =============================================================================
+puts "=== All Alert Contexts ==="
+ElementComponent::Components::Alert::VALID_VARIANTS.each do |variant|
+  alert = ElementComponent::Components::Alert.new(variant: variant)
+  alert.add_content("#{variant.capitalize} alert message here.")
+  puts alert.render
+end
+puts
+
+# =============================================================================
+# Dismissible Alert (use block DSL so close button is always last)
+# =============================================================================
+alert = ElementComponent::Components::Alert.new(variant: :warning, dismissible: true) do
+  add_content("This alert can be dismissed.")
+end
+puts "=== Dismissible Alert ==="
+puts alert.render
+puts
+
+# =============================================================================
+# Alert with Custom Attributes
+# =============================================================================
+alert = ElementComponent::Components::Alert.new(
+  variant: :primary,
+  id: "main-alert",
+  style: "margin-top: 20px;"
+)
+alert.add_content("This alert has a custom ID and inline style.")
+puts "=== Alert with Custom Attributes ==="
+puts alert.render
+puts
+
+# =============================================================================
+# Alert with Heading and Link (block DSL)
+# =============================================================================
+alert = ElementComponent::Components::Alert.new(variant: :info) do
+  add_content(ElementComponent::Components::AlertHeading.new.tap { |h| h.add_content("Information") })
+  add_content("This is an important notice. ")
+  add_content(ElementComponent::Components::AlertLink.new(href: "/details").tap { |l| l.add_content("View details") })
+end
+puts "=== Alert with Heading and Link ==="
+puts alert.render
+puts
+
+# =============================================================================
+# Dismissible Alert with Heading and Link
+# =============================================================================
+alert = ElementComponent::Components::Alert.new(variant: :danger, dismissible: true) do
+  add_content(ElementComponent::Components::AlertHeading.new.tap { |h| h.add_content("Error!") })
+  add_content("Something went wrong. ")
+  add_content(ElementComponent::Components::AlertLink.new(href: "/support").tap do |l|
+    l.add_content("Contact support")
+  end)
+end
+puts "=== Dismissible Alert with Heading and Link ==="
+puts alert.render
+puts
+
+# =============================================================================
+# Chained API Usage
+# =============================================================================
+alert = ElementComponent::Components::Alert.new(variant: :secondary)
+                                           .add_content("This alert was built using chained calls.")
+puts "=== Chained API ==="
+puts alert.render
+puts
+
+# =============================================================================
+# Using Sub-Components Independently
+# =============================================================================
+heading = ElementComponent::Components::AlertHeading.new
+heading.add_content("Standalone Heading")
+
+link = ElementComponent::Components::AlertLink.new(href: "https://example.com")
+link.add_content("Standalone Link")
+
+close_btn = ElementComponent::Components::AlertCloseButton.new
+
+puts "=== Sub-Components Rendered Independently ==="
+puts heading.render
+puts link.render
+puts close_btn.render

data/examples/badge_example.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Badge
+# =============================================================================
+badge = ElementComponent::Components::Badge.new(variant: :primary)
+badge.add_content("New")
+puts "=== Basic Badge ==="
+puts badge.render
+puts
+
+# =============================================================================
+# Pill Badge
+# =============================================================================
+badge = ElementComponent::Components::Badge.new(variant: :danger, pill: true)
+badge.add_content("99+")
+puts "=== Pill Badge ==="
+puts badge.render
+puts
+
+# =============================================================================
+# All Contexts
+# =============================================================================
+puts "=== All Badge Variants ==="
+ElementComponent::Components::Badge::VALID_VARIANTS.each do |variant|
+  badge = ElementComponent::Components::Badge.new(variant: variant)
+  badge.add_content(variant.to_s.capitalize)
+  puts badge.render
+end
+puts
+
+# =============================================================================
+# Badge with Block
+# =============================================================================
+badge = ElementComponent::Components::Badge.new(variant: :success) do
+  add_content("Completed")
+end
+puts "=== Badge with Block ==="
+puts badge.render
+puts
+
+# =============================================================================
+# Chained API
+# =============================================================================
+badge = ElementComponent::Components::Badge.new(variant: :warning)
+                                           .add_content("Warning")
+puts "=== Chained API ==="
+puts badge.render
+puts
+
+# =============================================================================
+# Badge with Custom Attributes
+# =============================================================================
+badge = ElementComponent::Components::Badge.new(
+  variant: :info,
+  id: "badge-1",
+  style: "font-size: 1.2em;"
+)
+badge.add_content("Custom")
+puts "=== Badge with Custom Attributes ==="
+puts badge.render

data/examples/breadcrumb_example.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Breadcrumb
+# =============================================================================
+breadcrumb = ElementComponent::Components::Breadcrumb.new do
+  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { add_content("Home") })
+  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/library") { add_content("Library") })
+  add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { add_content("Data") })
+end
+puts "=== Basic Breadcrumb ==="
+puts breadcrumb.render
+puts
+
+# =============================================================================
+# Breadcrumb with Two Items
+# =============================================================================
+breadcrumb = ElementComponent::Components::Breadcrumb.new do
+  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { add_content("Home") })
+  add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { add_content("Current Page") })
+end
+puts "=== Two-Item Breadcrumb ==="
+puts breadcrumb.render
+puts
+
+# =============================================================================
+# Breadcrumb with Custom Class
+# =============================================================================
+breadcrumb = ElementComponent::Components::Breadcrumb.new(class: "custom-breadcrumb") do
+  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { add_content("Home") })
+  add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { 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
+  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
+  add_content(ElementComponent::Components::Button.new(variant: :success) { add_content("Save") })
+  add_content(ElementComponent::Components::Button.new(variant: :danger) { 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
+  add_content(ElementComponent::Components::CardHeader.new { add_content("Header") })
+  add_content(ElementComponent::Components::CardBody.new { add_content("Body content here") })
+  add_content(ElementComponent::Components::CardFooter.new { 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
+  add_content(ElementComponent::Components::CardBody.new do
+    add_content(ElementComponent::Components::CardTitle.new { add_content("Card Title") })
+    add_content(ElementComponent::Components::CardText.new { 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
+  add_content(ElementComponent::Components::CardImage.new(src: "image.jpg", top: true))
+  add_content(ElementComponent::Components::CardBody.new do
+    add_content(ElementComponent::Components::CardTitle.new { add_content("Image Card") })
+    add_content(ElementComponent::Components::CardText.new { 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,95 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Carousel
+# =============================================================================
+carousel = ElementComponent::Components::Carousel.new(id: "basicCarousel") do
+  add_content(ElementComponent::Components::CarouselItem.new(active: true) do
+    add_content(%(<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">))
+  end)
+  add_content(ElementComponent::Components::CarouselItem.new do
+    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
+  add_content(ElementComponent::Components::CarouselItem.new(active: true) do
+    add_content(%(<img src="hero.jpg" class="d-block w-100" alt="Hero">))
+    add_content(ElementComponent::Components::CarouselCaption.new do
+      add_content(%(<h5>First slide</h5><p>Some description here.</p>))
+    end)
+  end)
+  add_content(ElementComponent::Components::CarouselItem.new do
+    add_content(%(<img src="hero2.jpg" class="d-block w-100" alt="Hero 2">))
+    add_content(ElementComponent::Components::CarouselCaption.new do
+      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
+  add_content(ElementComponent::Components::CarouselItem.new(active: true) { add_content("Slide 1") })
+  add_content(ElementComponent::Components::CarouselItem.new { 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
+  add_content(ElementComponent::Components::CarouselItem.new(active: true) { 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
+  add_content(ElementComponent::Components::CarouselItem.new(active: true) { add_content("Slide 1") })
+end
+puts "=== Carousel Without Controls ==="
+puts carousel.render
+puts
+
+# =============================================================================
+# Custom Interval
+# =============================================================================
+carousel = ElementComponent::Components::Carousel.new(id: "intervalCarousel") do
+  add_content(ElementComponent::Components::CarouselItem.new(active: true, interval: 5000) { add_content("Slide 1") })
+  add_content(ElementComponent::Components::CarouselItem.new(interval: 2000) { 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
+  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,123 @@
+# frozen_string_literal: true
+
+require_relative "../lib/element_component"
+
+# =============================================================================
+# Basic Dropdown
+# =============================================================================
+dropdown = ElementComponent::Components::Dropdown.new do
+  add_content(
+    ElementComponent::Element.new("button",
+                                  class: "btn btn-secondary dropdown-toggle",
+                                  type: "button",
+                                  "data-bs-toggle": "dropdown",
+                                  "aria-expanded": "false") do
+      add_content("Dropdown")
+    end
+  )
+  add_content(
+    ElementComponent::Components::DropdownMenu.new do
+      add_content(ElementComponent::Components::DropdownItem.new { add_content("Action") })
+      add_content(ElementComponent::Components::DropdownItem.new { add_content("Another action") })
+      add_content(ElementComponent::Components::DropdownDivider.new)
+      add_content(ElementComponent::Components::DropdownItem.new { 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
+  add_content(
+    ElementComponent::Element.new("button",
+                                  class: "btn btn-primary dropdown-toggle",
+                                  type: "button",
+                                  "data-bs-toggle": "dropdown",
+                                  "aria-expanded": "false") do
+      add_content("Menu")
+    end
+  )
+  add_content(
+    ElementComponent::Components::DropdownMenu.new do
+      add_content(ElementComponent::Components::DropdownHeader.new { add_content("Section 1") })
+      add_content(ElementComponent::Components::DropdownItem.new { add_content("Regular item") })
+      add_content(ElementComponent::Components::DropdownItem.new(active: true) { add_content("Active item") })
+      add_content(ElementComponent::Components::DropdownItem.new(disabled: true) { add_content("Disabled item") })
+    end
+  )
+end
+puts "=== Dropdown with States ==="
+puts dropdown.render
+puts
+
+# =============================================================================
+# Dropdown Type Button Items
+# =============================================================================
+dropdown = ElementComponent::Components::Dropdown.new do
+  add_content(
+    ElementComponent::Element.new("button",
+                                  class: "btn btn-success dropdown-toggle",
+                                  type: "button",
+                                  "data-bs-toggle": "dropdown",
+                                  "aria-expanded": "false") do
+      add_content("Actions")
+    end
+  )
+  add_content(
+    ElementComponent::Components::DropdownMenu.new do
+      add_content(ElementComponent::Components::DropdownItem.new(type: :button) { add_content("Save") })
+      add_content(ElementComponent::Components::DropdownItem.new(type: :button) { add_content("Delete") })
+    end
+  )
+end
+puts "=== Dropdown with Button Items ==="
+puts dropdown.render
+puts
+
+# =============================================================================
+# Dropup Direction
+# =============================================================================
+dropdown = ElementComponent::Components::Dropdown.new(direction: :dropup) do
+  add_content(
+    ElementComponent::Element.new("button",
+                                  class: "btn btn-warning dropdown-toggle",
+                                  type: "button",
+                                  "data-bs-toggle": "dropdown",
+                                  "aria-expanded": "false") do
+      add_content("Up")
+    end
+  )
+  add_content(
+    ElementComponent::Components::DropdownMenu.new do
+      add_content(ElementComponent::Components::DropdownItem.new { add_content("Item 1") })
+      add_content(ElementComponent::Components::DropdownItem.new { 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 { 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 { add_content("Header") }
+puts dropdown_header.render