loco_motion-rails 0.0.8 → 0.5.0

data/app/components/daisy/data_display/kbd_component.rb

@@ -27,9 +27,9 @@
 #   %p
 #     Press
 #     = daisy_kbd("Alt")
-#     + 
+#     +
 #     = daisy_kbd("Shift")
-#     + 
+#     +
 #     = daisy_kbd("M")
 #     to open the menu.
 #
@@ -42,10 +42,12 @@
 #     to confirm.
 #
 class Daisy::DataDisplay::KbdComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   set_component_name :kbd
 
+  attr_reader :simple_title
+
   #
   # Creates a new kbd component.
   #
@@ -53,13 +55,20 @@ class Daisy::DataDisplay::KbdComponent < LocoMotion::BaseComponent
   #
   # @param kws [Hash] The keyword arguments for the component.
   #
+  # @option kws [String] :tip The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(*args, **kws, &block)
     super
 
+    @simple_title = args[0]
+
     set_tag_name(:component, :span)
   end
 
   def before_render
+    super
+
     setup_component
   end
 
@@ -71,7 +80,7 @@ class Daisy::DataDisplay::KbdComponent < LocoMotion::BaseComponent
   # additional whitespace gets added to the output.
   #
   def call
-    part(:component) { content }
+    part(:component) { content || simple_title }
   end
 
   private

data/app/components/daisy/data_display/list_component.html.haml

@@ -0,0 +1,5 @@
+= part :component do
+  = header if header?
+  - items.each do |item|
+    = item
+  = content

data/app/components/daisy/data_display/list_component.rb

@@ -0,0 +1,82 @@
+#
+# The List component is a vertical layout to display information in rows. It can
+# contain various content types including text, images, and actions arranged in a
+# consistent format.
+#
+# The List component is useful for displaying structured data like user profiles,
+# media libraries, or content collections with a consistent layout.
+#
+# @part component The main list container (ul element)
+# @part header The optional header container for the list
+#
+# @slot item+ {Daisy::DataDisplay::ListItemComponent} Individual list items or
+#   rows in the list
+#
+# @loco_example Basic Usage
+#   = daisy_list do |list|
+#     - list.with_item { "Item 1" }
+#     - list.with_item { "Item 2" }
+#     - list.with_item { "Item 3" }
+#
+# @loco_example With Header
+#   = daisy_list(header: "Featured Items") do |list|
+#     - list.with_item { "Featured Item 1" }
+#     - list.with_item { "Featured Item 2" }
+#     - list.with_item { "Featured Item 3" }
+#
+# @loco_example With Rich Content
+#   = daisy_list(header: "Most played songs", css: "bg-base-100 rounded-box shadow-md") do |list|
+#     - list.with_item do |item|
+#       .flex.items-center.gap-2
+#         = image_tag("album_cover.jpg", class: "size-10 rounded-box")
+#         .flex.flex-col
+#           .font-medium Song Title
+#           .text-xs.opacity-60 Artist Name
+#         = daisy_button(icon: "play", css: "btn-ghost btn-square")
+#
+# @loco_example With Dividers
+#   = daisy_list(css: "divide-y") do |list|
+#     - list.with_item { "Item with divider below" }
+#     - list.with_item { "Another divided item" }
+#     - list.with_item { "Last item" }
+#
+# @!parse class Daisy::DataDisplay::ListComponent < LocoMotion::BaseComponent; end
+class Daisy::DataDisplay::ListComponent < LocoMotion::BaseComponent
+  renders_many :items, "Daisy::DataDisplay::ListItemComponent"
+  renders_one :header, LocoMotion::BasicComponent.build(tag_name: :li)
+
+  set_component_name :list
+
+  # @return [String] Optional header text for the list
+  attr_reader :simple_header, :header_css, :header_html
+
+  #
+  # Create a new List component.
+  #
+  # @param kwargs [Hash] The keyword arguments for the component.
+  #
+  # @option kwargs [String] :header Optional header text to display at the top
+  #   of the list.
+  #
+  # @option kwargs [String] :css Additional CSS classes to apply to the list.
+  #   Common options include:
+  #   - `bg-base-100` for background color
+  #   - `rounded-box` for rounded corners
+  #   - `shadow-md` for drop shadow
+  #   - `divide-y` for dividers between items
+  #
+  def initialize(**kws, &block)
+    super
+
+    @simple_header = config_option(:header)
+    @header_css = config_option(:header_css)
+    @header_html = config_option(:header_html)
+  end
+
+  def before_render
+    add_css(:component, "list")
+    set_tag_name(:component, :ul)
+
+    with_header(tag_name: :li, css: header_css, html: header_html) { simple_header } if simple_header && !header?
+  end
+end

data/app/components/daisy/data_display/list_item_component.rb

@@ -0,0 +1,39 @@
+#
+# The ListItem component represents an individual row within a List component.
+# It provides a consistent layout for displaying content in a list format.
+#
+# @part image Optional image container for the item
+#
+# @loco_example Basic Usage
+#   = daisy_list do |list|
+#     - list.with_item { "Simple list item" }
+#
+# @loco_example With Image
+#   = daisy_list do |list|
+#     - list.with_item do
+#       = image_tag(src: "profile.jpg", class: "rounded-full size-8")
+#       User Profile
+#
+# @!parse class Daisy::DataDisplay::ListItemComponent < LocoMotion::BaseComponent; end
+class Daisy::DataDisplay::ListItemComponent < LocoMotion::BaseComponent
+  #
+  # Create a new ListItem component.
+  #
+  # @param kwargs [Hash] The keyword arguments for the component.
+  #
+  # @option kwargs [String] :css Additional CSS classes to apply to the list item.
+  #
+  def initialize(**kwargs, &block)
+    super
+  end
+
+  # Called before rendering to setup the component CSS and structure
+  def before_render
+    set_tag_name(:component, :li)
+    add_css(:component, "list-row")
+  end
+
+  def call
+    part(:component) { content }
+  end
+end

data/app/components/daisy/data_display/stat_component.html.haml

@@ -4,17 +4,17 @@
     = part(:figure) do
       - if figure?
         = figure
-      - if @icon.present?
-        = heroicon_tag(@icon, class: "inline-block h-8 w-8 stroke-current")
+
+      = render_icon
+
       - if @src.present?
         = daisy_avatar(src: @src)
-        
 
   - if title?
     = title
   - elsif @simple_title.present?
     = part(:title) do
-      = @simple_title    
+      = @simple_title
 
   = part(:value) do
     = content
@@ -23,5 +23,4 @@
     = description
   - elsif @simple_description.present?
     = part(:description) do
-      = @simple_description  
-    
+      = @simple_description

data/app/components/daisy/data_display/stat_component.rb

@@ -3,6 +3,9 @@
 # description, and figure. It's perfect for dashboards, summaries, or any
 # situation where you need to highlight important numbers or metrics.
 #
+# @note Stats have a transparent background by default. Use `bg-base-100` if you
+#   need a background color.
+#
 # Includes the {LocoMotion::Concerns::TippableComponent} module to enable easy
 # tooltip addition.
 #
@@ -21,27 +24,29 @@
 #   image via the src option or an icon via the icon option.
 #
 # @loco_example Basic Usage
-#   = daisy_stat(title: "Downloads", value: "31K", css: "bg-base-200")
+#   = daisy_stat(title: "Downloads", value: "31K")
 #
 # @loco_example With Description
-#   = daisy_stat(title: "New Users", value: "2.6K", description: "↗︎ 400 (22%)", css: "bg-base-200")
+#   = daisy_stat(title: "New Users", value: "2.6K", description: "↗︎ 400 (22%)")
 #
 # @loco_example With Icon
-#   = daisy_stat(title: "Page Views", value: "89,400", icon: "eye", css: "bg-base-200") do |stat|
+#   = daisy_stat(title: "Page Views", value: "89,400", icon: "eye") do |stat|
 #     = stat.with_description do
 #       .flex.items-center.gap-1
-#         = heroicon_tag "arrow-up", class: "size-4 text-success"
+#         = heroicon "arrow-up", class: "size-4 text-success"
 #         %span.text-success 14%
 #         from last month
 #
 # @loco_example With Custom Figure
-#   = daisy_stat(title: "Success Rate", value: "98%", css: "bg-base-200") do |stat|
+#   = daisy_stat(title: "Success Rate", value: "98%") do |stat|
 #     = stat.with_figure do
 #       .text-success
-#         = heroicon_tag "check-circle", class: "size-10"
+#         = heroicon "check-circle", class: "size-10"
 #
 class Daisy::DataDisplay::StatComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::IconableComponent
+  include LocoMotion::Concerns::LinkableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   set_component_name :stat
 
@@ -76,17 +81,25 @@ class Daisy::DataDisplay::StatComponent < LocoMotion::BaseComponent
   # @option kws [String] :icon Name of a heroicon to display in the figure
   #   section.
   #
+  # @option kws [String] :tip The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(*args, **kws, &block)
     super
 
     @simple_title = config_option(:title)
     @simple_description = config_option(:description)
     @src = config_option(:src)
-    @icon = config_option(:icon)
   end
 
   def before_render
     setup_component
+
+    super
+  end
+
+  def default_icon_size
+    "where:size-8"
   end
 
   private

data/app/components/daisy/data_display/status_component.rb

@@ -0,0 +1,47 @@
+#
+# The StatusComponent displays a small icon to visually show the current status of an element,
+# such as online, offline, error, etc. It follows the DaisyUI status component pattern.
+#
+# @loco_example Basic Status
+#   = daisy_status()
+#
+# @loco_example Status with Size
+#   = daisy_status(css: "status-xs")
+#   = daisy_status(css: "status-sm")
+#   = daisy_status(css: "status-md")
+#   = daisy_status(css: "status-lg")
+#   = daisy_status(css: "status-xl")
+#
+# @loco_example Status with Color
+#   = daisy_status(css: "status-primary")
+#   = daisy_status(css: "status-secondary")
+#   = daisy_status(css: "status-accent")
+#   = daisy_status(css: "status-info")
+#   = daisy_status(css: "status-success")
+#   = daisy_status(css: "status-warning")
+#   = daisy_status(css: "status-error")
+#
+# @loco_example Status with Accessibility
+#   = daisy_status(css: "status-success", html: { aria: { label: "Status: Online" } })
+class Daisy::DataDisplay::StatusComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::TippableComponent
+
+  def initialize(**kws)
+    super(**kws)
+  end
+
+  def before_render
+    setup_component
+    super # Call super after setup
+  end
+
+  def call
+    part(:component)
+  end
+
+  private
+
+  def setup_component
+    add_css(:component, "status")
+  end
+end

data/app/components/daisy/data_display/timeline_component.rb

@@ -37,7 +37,7 @@
 #
 #       - event.with_middle do
 #         .bg-primary.text-primary-content.p-2.rounded-full
-#           = heroicon_tag "star"
+#           = heroicon "star"
 #
 #       - event.with_end do
 #         %h3.font-bold Milestone Reached

data/app/components/daisy/data_input/cally_component.html.haml

@@ -0,0 +1,14 @@
+= part(:component) do
+  = previous_icon if previous_icon?
+  = next_icon if next_icon?
+
+  - if @month_count
+    = part(:months) do
+      - @month_count.times do |index|
+        = render(MonthComponent.new(**month_options(index)))
+
+  - elsif months?
+    = months
+
+  - else
+    = content

data/app/components/daisy/data_input/cally_component.rb

@@ -0,0 +1,182 @@
+# frozen_string_literal: true
+
+module Daisy
+  module DataInput
+    # The Cally component provides a customizable calendar interface for date selection.
+    # It supports both single date and date range selection, with configurable display
+    # options including the number of months to show and navigation controls.
+    #
+    # @part component The root calendar element that contains all other parts.
+    # @part months The container element that holds the individual month components.
+    #
+    # @slot previous_icon [PreviousIcon] The icon used for navigating to the
+    #   previous month. Defaults to a chevron-left icon.
+    #   @see #default_previous_icon
+    # @slot next_icon [NextIcon] The icon used for navigating to the next month.
+    #   Defaults to a chevron-right icon.
+    #   @see #default_next_icon
+    # @slot months+ [MonthComponent] The month components to display in the calendar.
+    #   Multiple months can be displayed side by side.
+    #   @see #month_options
+    #
+    # @loco_example Basic calendar with default options
+    #   = daisy_cally
+    #
+    # @loco_example Calendar with range selection enabled
+    #   = daisy_cally(modifier: :range)
+    #
+    # @loco_example Calendar showing multiple months with custom value
+    #   = daisy_cally(months: 2, value: Date.today)
+    #
+    # @loco_example Calendar with min/max date constraints
+    #   = daisy_cally(min: 1.month.ago, max: 1.month.from_now)
+    class CallyComponent < LocoMotion::BaseComponent
+      include ViewComponent::SlotableDefault
+
+      # A component for the previous navigation icon in the calendar header.
+      #
+      # @note This is used internally by CallyComponent
+      class PreviousIcon < Hero::IconComponent
+        def before_render
+          super
+
+          add_html(:component, { slot: "previous" })
+        end
+      end
+
+      # A component for the next navigation icon in the calendar header.
+      #
+      # @note This is used internally by CallyComponent
+      class NextIcon < Hero::IconComponent
+        def before_render
+          super
+
+          add_html(:component, { slot: "next" })
+        end
+      end
+
+      # A component representing a single month in the calendar.
+      #
+      # @note This is used internally by CallyComponent
+      class MonthComponent < LocoMotion::BaseComponent
+        # @param offset [Integer, nil] The offset of this month from the start date
+        def initialize(**kws)
+          super
+
+          @offset = config_option(:offset)
+        end
+
+        def before_render
+          super
+
+          set_tag_name(:component, "calendar-month")
+          add_html(:component, { offset: @offset }) if @offset
+        end
+
+        def call
+          part(:component)
+        end
+      end
+
+      define_modifiers :range
+
+      renders_one :previous_icon, PreviousIcon
+      renders_one :next_icon, NextIcon
+      renders_many :months, MonthComponent
+
+      define_parts :months
+
+      # Initializes a new CallyComponent.
+      #
+      # The Cally component provides a customizable calendar interface for date
+      # selection.  It supports single date selection by default and can be
+      # configured for date range selection.  The component automatically
+      # handles navigation between months and can display multiple months.
+      #
+      # @param change [String] ID of an input to update with the selected date.
+      #   Mutually exclusive with `update`.
+      # @param update [String] ID of an element to update with the selected
+      #   date. Mutually exclusive with `change`.
+      # @param id [String] The ID of the calendar element
+      # @param value [String, Date] The currently selected date or range
+      # @param min [String, Date] The minimum selectable date
+      # @param max [String, Date] The maximum selectable date
+      # @param today [String, Date] The date to consider as 'today'
+      # @param months [Integer] Number of months to display (default: 1)
+      def initialize(**kws)
+        super
+
+        # If we don't have any modifiers, assume we want a single month for a date select
+        @month_count = config_option(:months, modifiers.blank? ? 1 : nil)
+        @change = config_option(:change)
+        @update = config_option(:update)
+
+        @id = config_option(:id)
+        @value = config_option(:value)
+        @min = config_option(:min)
+        @max = config_option(:max)
+        @today = config_option(:today)
+      end
+
+      # Configures the calendar component before rendering.
+      #
+      # Sets up the appropriate tag name based on whether range selection is
+      # enabled, adds CSS classes, and configures HTML attributes for the
+      # calendar component.
+      def before_render
+        super
+
+        if modifiers.include?(:range)
+          set_tag_name(:component, "calendar-range")
+        else
+          set_tag_name(:component, "calendar-date")
+        end
+
+        add_css(:component, "cally")
+        add_html(:component, { months: @month_count }) if @month_count
+
+        add_html(:component, {
+          id: @id,
+          value: @value,
+          min: @min,
+          max: @max,
+          today: @today
+        })
+
+        if @change
+          add_html(:component, { onchange: "document.getElementById('#{@change}').value = this.value" })
+        end
+
+        if @update
+          add_html(:component, { onchange: "document.getElementById('#{@update}').innerHTML = this.value" })
+        end
+      end
+
+      # Generates options for a month component at the given index.
+      #
+      # @param index [Integer] The 0-based index of the month
+      # @return [Hash] Options hash for the month component
+      def month_options(index)
+        options = {}
+
+        options[:offset] = index if index > 0
+
+        options
+      end
+
+      # Provides a default previous icon if none is specified.
+      #
+      # @return [PreviousIcon] A chevron-left icon
+      def default_previous_icon
+        PreviousIcon.new(icon: "chevron-left")
+      end
+
+      # Provides a default next icon if none is specified.
+      #
+      # @return [NextIcon] A chevron-right icon
+      def default_next_icon
+        NextIcon.new(icon: "chevron-right")
+      end
+    end
+  end
+end

data/app/components/daisy/data_input/cally_input_component.html.haml

@@ -0,0 +1,5 @@
+= part(:component) do
+  = input
+
+  = part(:popover) do
+    = calendar