loco_motion-rails 0.0.6 → 0.0.8

data/app/components/daisy/feedback/tooltip_component.rb

@@ -0,0 +1,77 @@
+#
+# The TooltipComponent displays informative text when users hover over an
+# element. It can be used in two ways:
+# 1. As a wrapper component around any HTML content.
+# 2. Through the TippableComponent concern, which many components include.
+#
+# This component is also aliased as `daisy_tip` for convenience.
+#
+# @loco_example Basic Usage
+#   = daisy_tip "Helpful information" do
+#     %span Need help?
+#
+#   = daisy_tip "Delete this item", css: "tooltip-error" do
+#     = hero_icon("trash", css: "size-5 text-error")
+#
+# @loco_example Positioned Tips
+#   = daisy_tip "Opens settings menu", css: "tooltip-left" do
+#     = daisy_button(title: "Settings", icon: "cog-6-tooth")
+#
+#   = daisy_tip "View user profile", css: "tooltip-bottom tooltip-info" do
+#     = daisy_avatar(src: image_path("avatars/user.jpg"))
+#
+# @loco_example Component Integration
+#   = daisy_button(title: "Save Changes",
+#     css: "btn-primary",
+#     tip: "Save your current progress")
+#
+#   = daisy_chat do |chat|
+#     - chat.with_avatar(css: "tooltip-left tooltip-info",
+#       tip: "Online",
+#       src: image_path("avatars/user.jpg"))
+#     - chat.with_bubble do
+#       Hello!
+#
+class Daisy::Feedback::TooltipComponent < LocoMotion::BaseComponent
+
+  #
+  # Creates a new Tooltip component.
+  #
+  # @param args [Array] If provided, the first argument is used as the `tip`
+  #   text.
+  # @param kws  [Hash]  Keyword arguments for customizing the tooltip.
+  #
+  # @option kws tip [String] The text to display in the tooltip. Can be
+  #   passed as the first positional argument or as a keyword argument.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Position modifiers: `tooltip-top`, `tooltip-bottom`,
+  #     `tooltip-left`, `tooltip-right`
+  #   - Colors: `tooltip-primary`, `tooltip-secondary`, `tooltip-accent`,
+  #     `tooltip-info`, `tooltip-success`, `tooltip-warning`, `tooltip-error`
+  #   - Open state: `tooltip-open`
+  #
+  def initialize(*args, **kws, &block)
+    super
+
+    # Accept a `tip` keyword argument, or the first positional argument
+    @tip = config_option(:tip, args[0])
+  end
+
+  #
+  # Sets up the component's CSS and HTML attributes.
+  #
+  def before_render
+    add_css(:component, "tooltip")
+    add_html(:component, { data: { tip: @tip } }) if @tip
+  end
+
+  #
+  # Renders the component and its content (inline).
+  #
+  def call
+    part(:component) { content }
+  end
+
+end

data/app/components/daisy/layout/artboard_component.rb

@@ -0,0 +1,59 @@
+#
+# The ArtboardComponent provides a fixed-size container that mimics mobile
+# device screens. It's particularly useful for:
+# - Prototyping mobile interfaces.
+# - Displaying responsive design examples.
+# - Creating device-specific mockups.
+#
+# The component includes preset sizes for common mobile devices and supports
+# both portrait and landscape orientations.
+#
+# @loco_example Portrait Mode
+#   = daisy_artboard(css: "phone-4") do
+#     = daisy_hero do
+#       iPhone 13 (375×812)
+#
+# @loco_example Landscape Mode
+#   = daisy_artboard(css: "phone-4 artboard-horizontal") do
+#     = daisy_hero do
+#       iPhone 13 (812×375)
+#
+# @loco_example Custom Demo Style
+#   = daisy_artboard(css: "phone-1 artboard-demo") do
+#     iPhone SE (320×568)
+#
+class Daisy::Layout::ArtboardComponent < LocoMotion::BaseComponent
+
+  #
+  # Creates a new Artboard component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the artboard.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Device sizes: `phone-1` (320×568), `phone-2` (375×667),
+  #     `phone-3` (414×736), `phone-4` (375×812), `phone-5` (414×896),
+  #     `phone-6` (320×1024)
+  #   - Orientation: `artboard-horizontal` for landscape mode
+  #   - Demo style: `artboard-demo` for visible borders and background
+  #
+  def initialize(*args, **kws, &block)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
+  def before_render
+    add_css(:component, "artboard")
+  end
+
+  #
+  # Renders the component and its content.
+  #
+  def call
+    part(:component) { content }
+  end
+
+end

data/app/components/daisy/layout/divider_component.rb

@@ -0,0 +1,72 @@
+#
+# The DividerComponent creates a visual separator between content sections,
+# either horizontally or vertically. It can include optional text or content
+# in the center and supports various colors to match your theme.
+#
+# Common use cases include:
+# - Separating sections of a page.
+# - Creating visual breaks between cards or content blocks.
+# - Providing alternative options with "OR" text.
+# - Organizing form sections.
+#
+# @loco_example Basic Dividers
+#   = daisy_divider
+#
+#   = daisy_divider do
+#     OR
+#
+# @loco_example Vertical Dividers
+#   .flex.grow
+#     = daisy_card(css: "h-48") do
+#       Left Content
+#
+#     = daisy_divider(css: "divider-horizontal") do
+#       OR
+#
+#     = daisy_card(css: "h-48") do
+#       Right Content
+#
+# @loco_example Colored Dividers
+#   = daisy_divider(css: "divider-primary") do
+#     Primary
+#
+#   = daisy_divider(css: "divider-accent") do
+#     Accent
+#
+#   = daisy_divider(css: "divider-success") do
+#     Success
+#
+class Daisy::Layout::DividerComponent < LocoMotion::BaseComponent
+
+  #
+  # Creates a new Divider component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the divider.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Orientation: `divider-horizontal` for vertical divider
+  #   - Colors: `divider-neutral`, `divider-primary`, `divider-secondary`,
+  #     `divider-accent`, `divider-info`, `divider-success`,
+  #     `divider-warning`, `divider-error`
+  #
+  def initialize(*args, **kws, &block)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
+  def before_render
+    add_css(:component, "divider")
+  end
+
+  #
+  # Renders the component and its content.
+  #
+  def call
+    part(:component) { content }
+  end
+
+end

data/app/components/daisy/layout/drawer_component.html.haml

@@ -0,0 +1,9 @@
+= part(:component) do
+  = part(:input)
+
+  = part(:content_wrapper) do
+    = content
+
+  - if sidebar?
+    - sidebar.set_loco_parent(component_ref)
+    = sidebar

data/app/components/daisy/layout/drawer_component.rb

@@ -0,0 +1,155 @@
+#
+# The DrawerComponent provides a sliding sidebar panel that can be toggled
+# open and closed. It's commonly used for:
+# - Navigation menus
+# - Filter panels
+# - Additional information panels
+# - Mobile-friendly navigation
+#
+# The drawer includes an overlay that covers the main content when open and
+# can be configured to slide in from either the left or right side.
+#
+# @part input            [LocoMotion::BaseComponent] The input checkbox that
+#   toggles the sidebar visibility.
+#
+# @part content_wrapper  [LocoMotion::BaseComponent] The wrapper for the main
+#   page content that remains visible when the drawer is closed.
+#
+# @part overlay         [LocoMotion::BaseComponent] The semi-transparent
+#   overlay that covers the main content when the drawer is open. Clicking it
+#   closes the drawer.
+#
+# @slot sidebar        [Daisy::Layout::DrawerSidebarComponent] The sidebar
+#   panel that slides in when the drawer is opened. Contains the overlay
+#   within itself.
+#
+# @loco_example Basic Left Drawer
+#   = daisy_drawer do |drawer|
+#     - drawer.with_sidebar do
+#       .bg-base-100.p-4.w-40
+#         Menu Items
+#
+#     = daisy_button(tag_name: "label",
+#       css: "btn btn-primary",
+#       title: "Open Menu",
+#       html: { for: drawer.id })
+#
+# @loco_example Right Drawer
+#   = daisy_drawer(css: "drawer-end") do |drawer|
+#     - drawer.with_sidebar do
+#       .bg-base-100.p-4.w-40
+#         Filter Options
+#
+#     = daisy_button(tag_name: "label",
+#       css: "btn btn-secondary",
+#       title: "Show Filters",
+#       html: { for: drawer.id })
+#
+# @loco_example Styled Drawer
+#   = daisy_drawer do |drawer|
+#     - drawer.with_sidebar do
+#       .bg-base-200.p-4.w-80.h-full
+#         .flex.justify-between.items-center.mb-4
+#           %h2.text-xl Settings
+#           = daisy_button(tag_name: "label",
+#             css: "btn btn-ghost btn-circle",
+#             icon: "x-mark",
+#             html: { for: drawer.id })
+#
+class Daisy::Layout::DrawerComponent < LocoMotion::BaseComponent
+  #
+  # The DrawerSidebarComponent is a child of the {DrawerComponent} and renders
+  # the drawer sidebar and the overlay.
+  #
+  class Daisy::Layout::DrawerSidebarComponent < LocoMotion::BaseComponent
+    #
+    # Sets up the component's CSS classes.
+    #
+    def before_render
+      add_css(:component, "drawer-side")
+    end
+
+    #
+    # Renders the sidebar, the overlay, and its content.
+    #
+    def call
+      part(:component) do
+        # We need to render the parent component's overlay inside of the sidebar
+        concat(loco_parent.part(:overlay))
+        concat(content)
+      end
+    end
+  end
+
+  define_parts :input, :content_wrapper, :overlay
+
+  renders_one :sidebar, Daisy::Layout::DrawerSidebarComponent
+
+  #
+  # The ID of the drawer. Can be passed in as a configuration option, but
+  # defaults to a random UUID.
+  #
+  attr_reader :id
+
+  #
+  # Creates a new Drawer component.
+  #
+  # @param kws [Hash] Keyword arguments for customizing the drawer.
+  #
+  # @option kws id  [String] The ID of the drawer. Defaults to a random UUID.
+  #   This is used to connect the toggle button with the drawer.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Position: `drawer-end` to slide from right instead of left
+  #   - Responsive: `lg:drawer-open` to keep drawer open on large screens
+  #   - Z-index: `z-[100]` to control stacking order
+  #
+  def initialize(**kws)
+    super
+
+    @id = config_option(:id, SecureRandom.uuid)
+  end
+
+  #
+  # Sets up the various parts of the component.
+  #
+  def before_render
+    setup_component
+    setup_input
+    setup_content_wrapper
+    setup_overlay
+  end
+
+  #
+  # Adds the `drawer` class to the component itself.
+  #
+  def setup_component
+    add_css(:component, "drawer")
+  end
+
+  #
+  # Sets up the input checkbox that toggles the sidebar.
+  #
+  def setup_input
+    set_tag_name(:input, :input)
+    add_css(:input, "drawer-toggle")
+    add_html(:input, { type: "checkbox", id: @id })
+  end
+
+  #
+  # Adds the `drawer-content` class to the content wrapper.
+  #
+  def setup_content_wrapper
+    add_css(:content_wrapper, "drawer-content")
+  end
+
+  #
+  # Sets up the overlay that covers the page when the sidebar is open.
+  #
+  def setup_overlay
+    set_tag_name(:overlay, :label)
+    add_css(:overlay, "drawer-overlay")
+    add_html(:overlay, { for: @id, "aria-label": "close sidebar" })
+  end
+end

data/app/components/daisy/layout/footer_component.rb

@@ -0,0 +1,69 @@
+#
+# The FooterComponent creates a responsive container for page footer content.
+# Common use cases include:
+# - Site navigation and sitemap links.
+# - Copyright and legal information.
+# - Contact details and social media links.
+# - Newsletter signup forms.
+#
+# The component is responsive by default and will stack content on smaller
+# screens.
+#
+# @loco_example Basic Navigation Footer
+#   = daisy_footer(css: "bg-neutral text-neutral-content p-10") do
+#     %nav
+#       %h6.footer-title Company
+#       = link_to "About", "/about", class: "link-hover"
+#       = link_to "Contact", "/contact", class: "link-hover"
+#       = link_to "Jobs", "/careers", class: "link-hover"
+#
+# @loco_example Multi-Column Footer
+#   = daisy_footer(css: "bg-base-200 text-base-content p-10") do
+#     %nav
+#       %h6.footer-title Products
+#       = link_to "Features", "#", class: "link-hover"
+#       = link_to "Pricing", "#", class: "link-hover"
+#
+#     %nav
+#       %h6.footer-title Support
+#       = link_to "Documentation", "#", class: "link-hover"
+#       = link_to "Help Center", "#", class: "link-hover"
+#
+# @loco_example Copyright Footer
+#   = daisy_footer(css: "bg-neutral text-neutral-content p-4 text-center") do
+#     %small
+#       Copyright © 2024 Company Name.
+#       All rights reserved.
+#
+class Daisy::Layout::FooterComponent < LocoMotion::BaseComponent
+  #
+  # Creates a new Footer component.
+  #
+  # @param kws [Hash] Keyword arguments for customizing the footer.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Background: `bg-neutral`, `bg-base-200`
+  #   - Text color: `text-neutral-content`, `text-base-content`
+  #   - Spacing: `p-4`, `p-10`
+  #   - Layout: `text-center`, `grid grid-cols-2 gap-4`
+  #
+  def initialize(**kws)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes and HTML tag.
+  #
+  def before_render
+    add_css(:component, "footer")
+    set_tag_name(:component, :footer)
+  end
+
+  #
+  # Renders the component and its content.
+  #
+  def call
+    part(:component) { content }
+  end
+end

data/app/components/daisy/layout/hero_component.html.haml

@@ -0,0 +1,5 @@
+= part(:component) do
+  = overlay if overlay?
+
+  = part(:content_wrapper) do
+    = content

data/app/components/daisy/layout/hero_component.rb

@@ -0,0 +1,83 @@
+#
+# The HeroComponent creates an eye-catching, full-width section typically used
+# at the top of a page. Common use cases include:
+# - Landing page introductions.
+# - Feature showcases.
+# - Call-to-action sections.
+# - Image-rich banners.
+#
+# The component is responsive by default and provides flexible layout options
+# for content positioning and image integration.
+#
+# @part content_wrapper [LocoMotion::BaseComponent] The wrapper for the hero
+#   content, providing flex-based layout control.
+#
+# @slot overlay [LocoMotion::BasicComponent] An optional `<div>` positioned
+#   behind the content for background effects like semi-transparency or blur.
+#
+# @loco_example Basic Hero
+#   = daisy_hero(css: "bg-base-200 text-center") do
+#     %div
+#       %h1.text-5xl.font-bold Welcome
+#       %p.my-6 Discover amazing features.
+#       = daisy_button(css: "btn btn-primary",
+#         title: "Get Started")
+#
+# @loco_example Hero with Image
+#   = daisy_hero(css: "bg-base-200",
+#     content_wrapper_css: "flex-col md:flex-row") do
+#     %img.h-40.rounded{
+#       src: image_path("hero-image.jpg"),
+#       alt: "Hero Image" }
+#     %div
+#       %h1.text-5xl.font-bold Features
+#       %p.my-6 Explore what we offer.
+#
+# @loco_example Hero with Background Overlay
+#   = daisy_hero(css: "min-h-96",
+#     html: { style: "background-image: url('bg.jpg')" }) do |hero|
+#     - hero.with_overlay(css: "bg-black/50 backdrop-blur")
+#     %div.text-white
+#       %h1.text-5xl.font-bold Discover
+#       %p.my-6 Start your journey today.
+#
+class Daisy::Layout::HeroComponent < LocoMotion::BaseComponent
+  define_part :content_wrapper
+
+  renders_one :overlay, LocoMotion::BasicComponent.build(css: "hero-overlay")
+
+  #
+  # Creates a new Hero component.
+  #
+  # @param kws [Hash] Keyword arguments for customizing the hero.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Height: `min-h-screen`, `min-h-[50vh]`
+  #   - Background: `bg-base-200`, `bg-primary`
+  #   - Text: `text-center`, `text-primary-content`
+  #
+  # @option kws content_wrapper_css [String] CSS classes for the content
+  #   wrapper. Common options include:
+  #   - Layout: `flex-col`, `flex-col md:flex-row`
+  #   - Spacing: `gap-4`, `space-y-4`
+  #   - Alignment: `items-center`, `justify-between`
+  #
+  # @option kws html [Hash] HTML attributes for the hero container.
+  #   Commonly used for background images:
+  #   ```ruby
+  #   html: { style: "background-image: url('image.jpg')" }
+  #   ```
+  #
+  def initialize(**kws)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
+  def before_render
+    add_css(:component, "hero")
+    add_css(:content_wrapper, "hero-content")
+  end
+end

data/app/components/daisy/layout/indicator_component.rb

@@ -0,0 +1,83 @@
+#
+# The IndicatorComponent positions notification elements around its content to
+# draw attention to important information. Common use cases include:
+# - Notification badges on avatars.
+# - Cart item counters.
+# - "New" badges on features.
+# - Status indicators on elements.
+#
+# By default, indicators are positioned in the top-right corner, but they can
+# be positioned anywhere around the content using CSS classes.
+#
+# @slot item+ [LocoMotion::BasicComponent] The items to be rendered around
+#   the content. Multiple items can be added and positioned independently.
+#
+# @loco_example Basic Badge Indicator
+#   = daisy_indicator do |indicator|
+#     - indicator.with_item do
+#       = daisy_badge(title: "8",
+#         css: "badge-secondary")
+#
+#     = daisy_avatar(src: "avatar.jpg")
+#
+# @loco_example Multiple Indicators
+#   = daisy_indicator do |indicator|
+#     - indicator.with_item(css: "indicator-top indicator-start") do
+#       = daisy_badge(title: "New",
+#         css: "badge-accent")
+#
+#     - indicator.with_item(css: "indicator-bottom indicator-end") do
+#       = daisy_badge(title: "Sale",
+#         css: "badge-secondary")
+#
+#     = daisy_button(title: "View Item")
+#
+# @loco_example Custom Positioning
+#   = daisy_indicator do |indicator|
+#     - # Center of left edge
+#     - indicator.with_item(css: "indicator-middle indicator-start") do
+#       Online
+#
+#     - # Center of right edge
+#     - indicator.with_item(css: "indicator-middle indicator-end") do
+#       Available
+#
+#     .w-40.h-40.bg-base-200
+#
+class Daisy::Layout::IndicatorComponent < LocoMotion::BaseComponent
+  renders_many :items, LocoMotion::BasicComponent.build(css: "indicator-item")
+
+  #
+  # Creates a new Indicator component.
+  #
+  # @param kws [Hash] Keyword arguments for customizing the indicator.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Spacing: `p-2`, `m-4`
+  #   - Alignment: `inline-flex`, `inline-grid`
+  #
+  def initialize(**kws)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
+  def before_render
+    add_css(:component, "indicator")
+  end
+
+  #
+  # Renders the component, all indicator items, and the main content.
+  #
+  def call
+    part(:component) do
+      items.each do |item|
+        concat(item)
+      end
+
+      concat(content) if content?
+    end
+  end
+end

data/app/components/daisy/layout/join_component.rb

@@ -1,10 +1,81 @@
-class Daisy::Layout::JoinComponent < LocoMotion.configuration.base_component_class
+#
+# The JoinComponent combines multiple elements into a cohesive group without
+# gaps between them. Common use cases include:
+# - Button groups for toolbars.
+# - Input fields with prefix/suffix elements.
+# - Segmented navigation controls.
+# - Pagination controls.
+#
+# Note: Each joined item must include the `join-item` CSS class manually, as
+# automatic application could cause rendering issues in complex scenarios.
+#
+# @slot item+ [LocoMotion::BaseComponent] The elements to be joined together.
+#   Each item should include the `join-item` CSS class.
+#
+# @loco_example Basic Button Group
+#   = daisy_join do |join|
+#     - join.with_item do
+#       = daisy_button(title: "Previous",
+#         css: "join-item")
+#     - join.with_item do
+#       = daisy_button(title: "Current",
+#         css: "join-item btn-active")
+#     - join.with_item do
+#       = daisy_button(title: "Next",
+#         css: "join-item")
+#
+# @loco_example Icon Button Group
+#   = daisy_join do |join|
+#     - join.with_item do
+#       = daisy_button(icon: "chevron-left",
+#         css: "join-item")
+#     - join.with_item do
+#       = daisy_button(icon: "home",
+#         css: "join-item")
+#     - join.with_item do
+#       = daisy_button(icon: "chevron-right",
+#         css: "join-item")
+#
+# @loco_example Vertical Join
+#   = daisy_join(css: "join-vertical") do |join|
+#     - join.with_item do
+#       = daisy_button(title: "Menu",
+#         css: "w-full join-item")
+#     - join.with_item do
+#       = daisy_button(title: "Settings",
+#         css: "w-full join-item")
+#     - join.with_item do
+#       = daisy_button(title: "Account",
+#         css: "w-full join-item")
+#
+class Daisy::Layout::JoinComponent < LocoMotion::BaseComponent
   renders_many :items
 
+  #
+  # Creates a new Join component.
+  #
+  # @param kws [Hash] Keyword arguments for customizing the join.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Direction: `join-vertical` for vertical stacking
+  #   - Size: `min-w-32`, `w-full`
+  #   - Spacing: `gap-0`, `gap-px` (if gaps are needed)
+  #
+  def initialize(**kws)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
   def before_render
     add_css(:component, "join")
   end
 
+  #
+  # Renders all joined items in sequence.
+  #
   def call
     part(:component) do
       items.each do |item|