loco_motion-rails 0.4.0 → 0.5.0

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

@@ -10,7 +10,7 @@
 #    loading states.
 #
 # @loco_example Basic Shapes
-#   = daisy_skeleton(css: "w-24 h-24 rounded-full")
+#   = daisy_skeleton(css: "size-24 rounded-full")
 #   = daisy_skeleton(css: "w-36 h-20")
 #   = daisy_skeleton(css: "w-48 h-5")
 #

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

@@ -51,8 +51,10 @@ class Daisy::Layout::DividerComponent < LocoMotion::BaseComponent
   #     `divider-accent`, `divider-info`, `divider-success`,
   #     `divider-warning`, `divider-error`
   #
-  def initialize(*args, **kws, &block)
+  def initialize(title = nil, **kws, &block)
     super
+
+    @simple_title = config_option(:title, title)
   end
 
   #
@@ -66,7 +68,7 @@ class Daisy::Layout::DividerComponent < LocoMotion::BaseComponent
   # Renders the component and its content.
   #
   def call
-    part(:component) { content }
+    part(:component) { content || @simple_title }
   end
 
 end

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

@@ -5,5 +5,4 @@
     = content
 
   - if sidebar?
-    - sidebar.set_loco_parent(component_ref)
     = sidebar

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

@@ -6,10 +6,10 @@
 # - Contact details and social media links.
 # - Newsletter signup forms.
 #
-# The component is responsive by default and will stack content on smaller
-# screens.
+# @note Footers are vertical by default. Use `footer-horizontal` to make it
+#   horizontal at your desired screen size (e.g., `lg:footer-horizontal`).
 #
-# @loco_example Basic Navigation Footer
+# @loco_example Basic Navigation Footer (Vertical)
 #   = daisy_footer(css: "bg-neutral text-neutral-content p-10") do
 #     %nav
 #       %h6.footer-title Company
@@ -17,8 +17,8 @@
 #       = 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
+# @loco_example Horizontal Footer
+#   = daisy_footer(css: "bg-base-200 text-base-content p-10 lg:footer-horizontal") do
 #     %nav
 #       %h6.footer-title Products
 #       = link_to "Features", "#", class: "link-hover"
@@ -46,7 +46,7 @@ class Daisy::Layout::FooterComponent < LocoMotion::BaseComponent
   #   - 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`
+  #   - Layout: `text-center`, `footer-horizontal` (or `lg:footer-horizontal` for large screens)
   #
   def initialize(**kws)
     super

data/app/components/daisy/mockup/device_component.rb

@@ -7,33 +7,30 @@
 # - Building portfolio pieces.
 #
 # The component includes an optional camera element and a display area that
-# can contain any content, typically an ArtboardComponent for proper sizing.
+# can contain any content with appropriate sizing classes.
 #
 # @part camera The device's camera element, shown at the top by default.
 # @part display The main display area of the device.
 #
 # @loco_example Phone with Camera
-#   = daisy_device(css: "mockup-phone") do
-#     = daisy_artboard(css: "phone-2") do
-#       .flex.flex-col.p-4
-#         .text-2xl.font-bold
-#           My App
-#         = image_tag("screenshot.jpg",
-#           class: "rounded-lg")
+#   = daisy_device(css: "mockup-phone", display_css: "overflow-auto") do
+#     .flex.flex-col.gap-4.p-4.pt-12.pb-8.bg-white
+#       .text-2xl.font-bold
+#         My App
+#       = image_tag("screenshot.jpg",
+#         class: "rounded-lg")
 #
 # @loco_example Tablet without Camera
 #   = daisy_device(css: "mockup-phone border-primary",
-#     show_camera: false) do
-#     = daisy_artboard(css: "artboard-horizontal phone-3") do
-#       .bg-base-100.p-4
-#         Tablet Content Here
+#     display_css: "overflow-auto w-[736px] h-[414px]", show_camera: false) do
+#     .flex.flex-col.gap-4.p-4.bg-white
+#       Tablet Content Here
 #
 # @loco_example Styled Device
 #   = daisy_device(css: "mockup-phone border-4
-#     border-accent shadow-xl") do
-#     = daisy_artboard(css: "phone-1") do
-#       .bg-gradient-to-br.from-primary.to-accent.p-4
-#         Premium App Design
+#     border-accent shadow-xl", display_css: "w-[320px] h-[568px]") do
+#     .flex.flex-col.p-4.bg-gradient-to-br.from-primary.to-accent
+#       Premium App Design
 #
 class Daisy::Mockup::DeviceComponent < LocoMotion::BaseComponent
 
@@ -60,8 +57,8 @@ class Daisy::Mockup::DeviceComponent < LocoMotion::BaseComponent
   # Sets up the component's CSS classes.
   #
   def before_render
-    add_css(:camera, "camera")
-    add_css(:display, "display")
+    add_css(:camera, "mockup-phone-camera")
+    add_css(:display, "mockup-phone-display")
     add_css(:display, "!mt-0") if !@show_camera
   end
 

data/app/components/daisy/navigation/breadcrumbs_component.html.haml

@@ -1,7 +1,6 @@
 = part(:component) do
   = part(:list_wrapper) do
     - items.each do |item|
-      - item.set_loco_parent(component_ref)
       = item
 
   = content

data/app/components/daisy/navigation/breadcrumbs_component.rb

@@ -7,16 +7,14 @@
 # @slot items+ {LocoMotion::BasicComponent} The individual breadcrumb items.
 #   Each item is rendered as a list item (`<li>`) element.
 #
-# @example Basic breadcrumbs with text
+# @loco_example Basic breadcrumbs with text
 #   = daisy_breadcrumbs do |breadcrumbs|
-#     - breadcrumbs.with_item do
-#       = link_to "Home", "#"
-#     - breadcrumbs.with_item do
-#       = link_to "Docs", "#"
-#     - breadcrumbs.with_item do
-#       = link_to "Components", "#"
+#     - breadcrumbs.with_item(title: "Docs", href: "/")
+#     - breadcrumbs.with_item("Breadcrumbs", "/examples")
+#     - breadcrumbs.with_item(css: "italic") do
+#       This example
 #
-# @example Breadcrumbs with icons
+# @loco_example Breadcrumbs with icons
 #   = daisy_breadcrumbs do |breadcrumbs|
 #     - breadcrumbs.with_item do
 #       = link_to "#" do
@@ -28,9 +26,82 @@
 #         Docs
 #
 class Daisy::Navigation::BreadcrumbsComponent < LocoMotion::BaseComponent
+
+
+  # Component for a single breadcrumb item in a breadcrumbs trail.
+  #
+  # @part link The link element wrapping the breadcrumb content when an href is
+  #   provided.
+  #
+  # @loco_example Simple usage
+  #   = render Daisy::Navigation::BreadcrumbItemComponent.new("Home", "/")
+  #
+  # @loco_example With icon
+  #   = render Daisy::Navigation::BreadcrumbItemComponent.new("Home", "/", icon: :home)
+  #
+  # @see Daisy::Navigation::BreadcrumbsComponent
+  class Daisy::Navigation::BreadcrumbItemComponent < LocoMotion::BaseComponent
+    include LocoMotion::Concerns::IconableComponent
+    include LocoMotion::Concerns::TippableComponent
+
+    define_part :link
+
+    # Initialize a breadcrumb item component.
+    #
+    # @param title [String, nil] The display text for the breadcrumb.
+    #
+    # @param href [String, nil] The URL for the breadcrumb link.
+    #
+    # @param args [Array] Additional positional arguments passed to the
+    #   component.
+    #
+    # @param kws [Hash] Additional keyword options.
+    #
+    # @option kws icon [Symbol] Icon name to display before the title.
+    #
+    # @option kws tip [String] Tooltip text shown on hover.
+    def initialize(title = nil, href = nil, *args, **kws)
+      super
+
+      @simple_title = config_option(:title, title)
+      @href = config_option(:href, href)
+    end
+
+    # Configure the component before rendering.
+    #
+    # Sets the component tag to be a list item and configures the link part with
+    # the href value.
+    def before_render
+      set_tag_name(:component, :li)
+
+      set_tag_name(:link, "a")
+      add_html(:link, { href: @href })
+    end
+
+    def call
+      part(:component) do
+        if @href
+          part(:link) do
+            render_icon_and_content
+          end
+        else
+          render_icon_and_content
+        end
+      end
+    end
+
+    # Render the icon (if provided) and content.
+    #
+    # @return [String] The rendered HTML for the icon and content.
+    def render_icon_and_content
+      concat(render_icon)
+      concat(content || @simple_title)
+    end
+  end
+
   define_parts :list_wrapper
 
-  renders_many :items, LocoMotion::BasicComponent.build(tag_name: :li)
+  renders_many :items, Daisy::Navigation::BreadcrumbItemComponent
 
   # Create a new instance of the BreadcrumbsComponent.
   #
@@ -45,6 +116,10 @@ class Daisy::Navigation::BreadcrumbsComponent < LocoMotion::BaseComponent
     super(**kws)
   end
 
+  # Configure the component before rendering.
+  #
+  # Adds the breadcrumbs CSS class and sets the list wrapper to use an
+  # unordered list element.
   def before_render
     add_css(:component, "breadcrumbs")
     set_tag_name(:list_wrapper, :ul)

data/app/components/daisy/navigation/dock_component.rb

@@ -0,0 +1,146 @@
+#
+# Creates a dock navigation bar, typically used in mobile-friendly applications
+# to provide quick access to important sections.
+#
+# @slot sections+ {Daisy::Navigation::DockSectionComponent} The sections to display in the dock.
+#
+# @loco_example Basic dock with icons
+#   = daisy_dock do |dock|
+#     - dock.with_section(icon: "home", href: "#")
+#     - dock.with_section(icon: "information-circle", href: "#", active: true)
+#     - dock.with_section(icon: "chart-bar", href: "#")
+#
+# @loco_example Dock with titles
+#   = daisy_dock do |dock|
+#     - dock.with_section(icon: "home", href: "#", title: "Home")
+#     - dock.with_section(icon: "information-circle", href: "#", title: "Info")
+#     - dock.with_section(icon: "chart-bar", href: "#", title: "Stats")
+#
+# @loco_example Colored dock
+#   = daisy_dock do |dock|
+#     - dock.with_section(icon: "home", href: "#", css: "text-primary")
+#     - dock.with_section(icon: "information-circle", href: "#", css: "text-secondary")
+#     - dock.with_section(icon: "chart-bar", href: "#", css: "text-accent")
+#
+class Daisy::Navigation::DockComponent < LocoMotion::BaseComponent
+
+  #
+  # A section within a Dock component.
+  #
+  # @part icon The icon element for the section.
+  # @part title The title element for the section.
+  #
+  # @loco_example Basic section with icon
+  #   = daisy_dock do |dock|
+  #     - dock.with_section(icon: "home", href: "#")
+  #
+  # @loco_example Active section with title
+  #   = daisy_dock do |dock|
+  #     - dock.with_section(icon: "information-circle", href: "#", active: true, title: "Info")
+  #
+  # @loco_example Custom title content
+  #   = daisy_dock do |dock|
+  #     - dock.with_section(icon: "chart-bar", href: "#") do
+  #       .font-bold.text-xs
+  #         Stats
+  #
+  class Daisy::Navigation::DockSectionComponent < LocoMotion::BaseComponent
+    include LocoMotion::Concerns::IconableComponent
+    include LocoMotion::Concerns::LinkableComponent
+
+    define_part :title
+
+    # Creates a new dock section.
+    #
+    # @param kws [Hash] The keyword arguments for the component.
+    #
+    # @option kws icon [String] The name of the icon to display.
+    #
+    # @option kws icon_variant [Symbol] The variant of the icon to use (default: :outline).
+    #
+    # @option kws icon_css [String] Additional CSS classes for the icon.
+    #
+    # @option kws title [String] Optional text to display below the icon.
+    #
+    # @option kws href [String] Optional URL to make the section a link.
+    #
+    # @option kws active [Boolean] Whether this section is currently active (default: false).
+    #
+    # @option kws css [String] Additional CSS classes for styling. Common
+    #   options include:
+    #   - Text color: `text-primary`, `text-secondary`, `text-accent`
+    #   - Custom colors: `text-[#449944]`
+    #
+    def initialize(**kws)
+      super(**kws)
+
+      @icon_variant = config_option(:icon_variant, :outline)
+      @title = config_option(:title)
+      @active = config_option(:active, false)
+    end
+
+    # Configure the component before rendering.
+    #
+    # Adds the dock-active class if this section is active and configures the
+    # title with appropriate styling.
+    def before_render
+      super
+
+      set_tag_name(:component, "button") unless @href
+      add_css(:component, "dock-active") if @active
+
+      set_tag_name(:title, :span)
+      add_css(:title, "dock-label")
+    end
+
+    # Render the dock section component with icon, title, and content.
+    #
+    # @return [String] The rendered HTML for the dock section.
+    def call
+      part(:component) do
+        concat(render_icon)
+        concat(part(:title) { @title }) if @title
+        concat(content)
+      end
+    end
+
+  end
+
+  renders_many :sections, Daisy::Navigation::DockSectionComponent
+
+  # Creates a new dock component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Position: `relative`, `fixed bottom-0`
+  #   - Width: `w-full`, `max-w-[400px]`
+  #   - Border: `border`, `border-base-200`
+  #   - Size: `dock-xs`, `dock-sm`, `dock-md`, `dock-lg`, `dock-xl`
+  #
+  def initialize(**kws)
+    super(**kws)
+  end
+
+  # Configure the component before rendering.
+  #
+  # Adds the dock CSS class to the component.
+  def before_render
+    add_css(:component, "dock")
+  end
+
+  # Render the dock component with all its sections and content.
+  #
+  # @return [String] The rendered HTML for the dock component.
+  def call
+    part(:component) do
+      sections.each do |section|
+        concat(section)
+      end
+
+      concat(content)
+    end
+  end
+
+end

data/app/components/daisy/navigation/link_component.rb

@@ -2,22 +2,23 @@
 # Creates a styled link component that can be used for navigation or inline text
 # links. This component is designed to work similarly to Rails' `link_to` helper.
 #
-# @example Link with custom styling
+# @loco_example Link with custom styling
 #   = daisy_link "Components", "#", css: "link-primary text-xl"
 #
-# @example Link with block content
+# @loco_example Link with block content
 #   = daisy_link "#", css: "link-hover" do
 #     = hero_icon("home")
 #     Home
 #
-# @example Link with positional arguments
+# @loco_example Link with positional arguments
 #   = daisy_link "Documentation", "#"
 #
-# @example Basic link with keyword arguments
+# @loco_example Basic link with keyword arguments
 #   = daisy_link(title: "Home", href: "#")
 #
 class Daisy::Navigation::LinkComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::LinkableComponent
 
   # Create a new instance of the LinkComponent.
   #
@@ -43,6 +44,9 @@ class Daisy::Navigation::LinkComponent < LocoMotion::BaseComponent
   #   - State: `link-hover`
   #   - Text: `text-sm`, `text-xl`, `text-2xl`
   #
+  # @option kws tip [String] The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(*args, **kws)
     super
 
@@ -68,10 +72,9 @@ class Daisy::Navigation::LinkComponent < LocoMotion::BaseComponent
   # if provided.
   #
   def before_render
-    set_tag_name(:component, :a)
-    add_css(:component, "link")
-    add_html(:component, { href: @href }) if @href
-    add_html(:component, { target: @target }) if @target
+    super
+
+    setup_component
   end
 
   #
@@ -84,4 +87,10 @@ class Daisy::Navigation::LinkComponent < LocoMotion::BaseComponent
   def call
     part(:component) { content || @title }
   end
+
+  private
+
+  def setup_component
+    add_css(:component, "link")
+  end
 end

data/app/components/daisy/navigation/menu_component.rb

@@ -1,16 +1,21 @@
+# frozen_string_literal: true
+
 #
 # Creates a menu component for displaying a list of items, optionally with group titles.
 #
+# @note Vertical menus no longer have a default width. Use `w-full` or other width
+#   classes if you want to control the width.
+#
 # @slot items+ {Daisy::Navigation::MenuItemComponent} The menu items to display.
 #
-# @example Basic menu with items
+# @loco_example Basic menu with items
 #   = daisy_menu do |menu|
 #     - menu.with_item do
 #       = link_to "Item 1", "#"
 #     - menu.with_item do
 #       = link_to "Item 2", "#"
 #
-# @example Menu with group titles
+# @loco_example Menu with group titles
 #   = daisy_menu do |menu|
 #     - menu.with_item(title: "Group 1") do
 #       = link_to "Item 1-1", "#"
@@ -19,10 +24,10 @@
 #       = link_to "Item 2-1", "#"
 #       = link_to "Item 2-2", "#"
 #
-# @example Menu with disabled items
+# @loco_example Menu with disabled items
 #   = daisy_menu do |menu|
 #     - menu.with_item do
-#       = link_to "Active Item", "#"
+#       = link_to "Active Item", "#", class: "menu-active"
 #     - menu.with_item(disabled: true) do
 #       Disabled Item
 #
@@ -33,15 +38,15 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
   #
   # @part title The title element for the menu item.
   #
-  # @example Basic menu item
+  # @loco_example Basic menu item
   #   = menu.with_item do
   #     = link_to "Item", "#"
   #
-  # @example Menu item with title
+  # @loco_example Menu item with title
   #   = menu.with_item(title: "Group") do
   #     = link_to "Item", "#"
   #
-  # @example Disabled menu item
+  # @loco_example Disabled menu item
   #   = menu.with_item(disabled: true) do
   #     = link_to "Item", "#"
   #
@@ -63,6 +68,7 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
     #   options include:
     #   - Text: `text-sm`, `text-base-content`
     #   - Spacing: `mt-4`, `mb-2`
+    #   - State: `menu-active`, `menu-focus`, `menu-disabled`
     #
     def initialize(*args, **kws)
       super(**kws)
@@ -77,7 +83,7 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
     #
     def before_render
       set_tag_name(:component, :li)
-      add_css(:component, "disabled pointer-events-none") if @disabled
+      add_css(:component, "menu-disabled pointer-events-none") if @disabled
 
       set_tag_name(:title, :h2)
       add_css(:title, "menu-title")
@@ -102,7 +108,7 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
   #
   # @option kws css [String] Additional CSS classes for styling. Common
   #   options include:
-  #   - Size: `w-56`, `max-w-xs`
+  #   - Layout: `menu-horizontal`, `w-full`, `w-56`
   #   - Background: `bg-base-100`, `bg-neutral`
   #   - Border: `border`, `rounded-box`
   #   - Shadow: `shadow`, `shadow-lg`

data/app/components/daisy/navigation/navbar_component.html.haml

@@ -1,4 +1,4 @@
 = part(:component) do
   = start if start?
   = center if center?
-  = end_content if end?
+  = self.send(:end) if end?

data/app/components/daisy/navigation/navbar_component.rb

@@ -11,7 +11,7 @@
 # @slot end {LocoMotion::BasicComponent} The right section of the navbar.
 #   Automatically gets the `navbar-end` CSS class.
 #
-# @example Basic navbar with logo and GitHub link
+# @loco_example Basic navbar with logo and GitHub link
 #   = daisy_navbar(css: "bg-base-100") do |navbar|
 #     - navbar.with_start do
 #       = image_tag("logo.png", class: "h-8")
@@ -20,7 +20,7 @@
 #     - navbar.with_end do
 #       = link_to "GitHub", "https://github.com", target: "_blank"
 #
-# @example Navbar with all sections and dropdown
+# @loco_example Navbar with all sections and dropdown
 #   = daisy_navbar(css: "bg-base-100") do |navbar|
 #     - navbar.with_start do
 #       %span.text-lg.italic Brand
@@ -59,15 +59,4 @@ class Daisy::Navigation::NavbarComponent < LocoMotion::BaseComponent
   def before_render
     add_css(:component, "navbar")
   end
-
-  private
-
-  # Returns the end section content.
-  #
-  # Since `end` is a reserved word in Ruby, we need to use a different method
-  # name in the template.
-  #
-  def end_content
-    self.end
-  end
 end

data/app/components/daisy/navigation/steps_component.rb

@@ -8,21 +8,21 @@
 # @slot steps+ {Daisy::Navigation::StepsComponent::StepComponent} The individual
 #   steps to display.
 #
-# @example Basic steps with progress
+# @loco_example Basic steps with progress
 #   = daisy_steps do |steps|
 #     - steps.with_step(title: "Write Code", css: "step-primary")
 #     - steps.with_step(title: "Release Code", css: "step-primary")
 #     - steps.with_step(title: "Profit", css: "step-secondary")
 #     - steps.with_step(title: "Rule the World")
 #
-# @example Vertical steps
+# @loco_example Vertical steps
 #   = daisy_steps(css: "steps-vertical") do |steps|
 #     - steps.with_step(title: "Write Code", css: "step-primary")
 #     - steps.with_step(title: "Release Code", css: "step-primary")
 #     - steps.with_step(title: "Profit", css: "step-secondary")
 #     - steps.with_step(title: "Rule the World")
 #
-# @example Custom step content
+# @loco_example Custom step content
 #   = daisy_steps do |steps|
 #     - steps.with_step(number: "AB")
 #     - steps.with_step(number: "★")
@@ -33,13 +33,13 @@ class Daisy::Navigation::StepsComponent < LocoMotion::BaseComponent
   #
   # A step within a StepsComponent.
   #
-  # @example Basic step with title
+  # @loco_example Basic step with title
   #   = steps.with_step(title: "Step 1")
   #
-  # @example Step with custom number
+  # @loco_example Step with custom number
   #   = steps.with_step(number: "★", title: "Special Step")
   #
-  # @example Step with custom content
+  # @loco_example Step with custom content
   #   = steps.with_step(number: "1") do
   #     .flex.gap-2
   #       = hero_icon("check")

data/app/components/daisy/navigation/tabs_component.html.haml

@@ -1,4 +1,3 @@
 = part(:component) do
   - tabs.each do |tab|
-    - tab.set_loco_parent(component_ref)
     = tab