element_component 0.6.0 → 0.7.0

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

data/examples/list_group_example.rb

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

data/examples/modal_example.rb

@@ -0,0 +1,120 @@
+# 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
+    add_content(ElementComponent::Components::ModalHeader.new do
+      add_content(ElementComponent::Components::ModalTitle.new { add_content("Modal title") })
+    end)
+    add_content(ElementComponent::Components::ModalBody.new { add_content("Modal body text goes here.") })
+    add_content(ElementComponent::Components::ModalFooter.new do
+      add_content(ElementComponent::Components::Button.new(variant: :secondary) { add_content("Close") })
+      add_content(ElementComponent::Components::Button.new(variant: :primary) { add_content("Save changes") })
+    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
+    add_content(ElementComponent::Components::ModalHeader.new do
+      add_content(ElementComponent::Components::ModalTitle.new { add_content("Scrollable") })
+    end)
+    add_content(ElementComponent::Components::ModalBody.new { add_content("Long content body...") })
+    add_content(ElementComponent::Components::ModalFooter.new { 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
+    add_content(ElementComponent::Components::ModalBody.new { 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
+    add_content(ElementComponent::Components::ModalBody.new { 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
+    add_content(ElementComponent::Components::ModalBody.new { 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
+    add_content(ElementComponent::Components::ModalHeader.new(close_button: false) do
+      add_content(ElementComponent::Components::ModalTitle.new { 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