loco_motion-rails 0.0.8 → 0.5.0

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

@@ -9,6 +9,12 @@
 # @part content_wrapper  [HTML] A wrapper for the main content of the alert.
 #   This allows for proper spacing and alignment with the icon.
 #
+# @option kws [String] :style (:default) The style of the alert.
+#   [:info, :success, :warning, :error, :default]
+# @option kws [Boolean] :soft (false) Use the soft style variant.
+# @option kws [Boolean] :outline (false) Use the outline style variant.
+# @option kws [Boolean] :dash (false) Use the dash style variant.
+#
 # @loco_example Basic Alert
 #   = daisy_alert do
 #     This is a standard alert message.
@@ -30,7 +36,77 @@
 #   = daisy_alert(icon: "exclamation-circle", css: "alert-error", icon_html: { variant: :outline }) do
 #     Error alert.
 #
+# @loco_example Default
+#   = daisy_alert do
+#     This is an default alert.
+#
+# @loco_example Info
+#   = daisy_alert(css: "alert-info") do
+#     This is an info alert.
+#
+# @loco_example Success
+#   = daisy_alert(css: "alert-success") do
+#     This is a success alert.
+#
+# @loco_example Warning
+#   = daisy_alert(css: "alert-warning") do
+#     This is a warning alert.
+#
+# @loco_example Error
+#   = daisy_alert(css: "alert-error") do
+#     This is an error alert.
+#
+# @loco_example Soft Info
+#   = daisy_alert(css: "alert-info alert-soft") do
+#     This is a soft info alert.
+#
+# @loco_example Soft Success
+#   = daisy_alert(css: "alert-success alert-soft") do
+#     This is a soft success alert.
+#
+# @loco_example Soft Warning
+#   = daisy_alert(css: "alert-warning alert-soft") do
+#     This is a soft warning alert.
+#
+# @loco_example Soft Error
+#   = daisy_alert(css: "alert-error alert-soft") do
+#     This is a soft error alert.
+#
+# @loco_example Outline Info
+#   = daisy_alert(css: "alert-info alert-outline") do
+#     This is an outline info alert.
+#
+# @loco_example Outline Success
+#   = daisy_alert(css: "alert-success alert-outline") do
+#     This is an outline success alert.
+#
+# @loco_example Outline Warning
+#   = daisy_alert(css: "alert-warning alert-outline") do
+#     This is an outline warning alert.
+#
+# @loco_example Outline Error
+#   = daisy_alert(css: "alert-error alert-outline") do
+#     This is an outline error alert.
+#
+# @loco_example Dash Info
+#   = daisy_alert(css: "alert-info alert-dash") do
+#     This is a dash info alert.
+#
+# @loco_example Dash Success
+#   = daisy_alert(css: "alert-success alert-dash") do
+#     This is a dash success alert.
+#
+# @loco_example Dash Warning
+#   = daisy_alert(css: "alert-warning alert-dash") do
+#     This is a dash warning alert.
+#
+# @loco_example Dash Error
+#   = daisy_alert(css: "alert-error alert-dash") do
+#     This is a dash error alert.
+#
 class Daisy::Feedback::AlertComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::IconableComponent
+
   define_parts :icon, :content_wrapper
 
   #
@@ -49,16 +125,24 @@ class Daisy::Feedback::AlertComponent < LocoMotion::BaseComponent
   #   `alert-info`, `alert-success`, `alert-warning`, or `alert-error` for
   #   different alert types.
   #
+  # @option kws style    [String] The style of the alert.
+  #   [:info, :success, :warning, :error, :default]
+  # @option kws soft     [Boolean] Use the soft style variant.
+  # @option kws outline  [Boolean] Use the outline style variant.
+  # @option kws dash     [Boolean] Use the dash style variant.
+  #
   def initialize(*args, **kws, &block)
     super
 
     @icon = config_option(:icon)
   end
 
+  def default_icon_size
+    "where:size-6"
+  end
+
   def before_render
     add_css(:component, "alert")
     add_html(:component, { role: "alert" })
-
-    add_css(:icon, "[:where(&)]:size-8")
   end
 end

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

@@ -20,7 +20,7 @@
 #   readability, but CSS classes must still use the `loading-*` prefix.
 #
 class Daisy::Feedback::LoadingComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   #
   # Creates a new Loading component.
@@ -41,10 +41,17 @@ class Daisy::Feedback::LoadingComponent < LocoMotion::BaseComponent
   end
 
   def before_render
-    add_css(:component, "loading")
+    setup_component
+    super
   end
-
+  
   def call
     part(:component)
   end
+  
+  private
+  
+  def setup_component
+    add_css(:component, "loading")
+  end
 end

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