loco_motion-rails 0.4.0 → 0.5.0

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

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

@@ -0,0 +1,165 @@
+module Daisy
+  module DataInput
+    # A specialized input component that combines a text input with a calendar
+    # picker. The calendar appears in a popover when the input is focused or
+    # clicked.
+    #
+    # @part popover The container for the calendar popover.
+    #
+    # @slot input The text input component.
+    # @slot calendar The calendar component that appears in the popover.
+    #
+    # @loco_example Basic Usage
+    #   = daisy_cally_input(name: "event_date", value: Date.today)
+    #
+    # @loco_example With custom calendar and input components
+    #   = daisy_cally_input(name: "event_date") do |c|
+    #     = c.with_calendar(css: "custom-calendar")
+    #     = c.with_input(css: "custom-input")
+    class CallyInputComponent < LocoMotion::BaseComponent
+      # A specialized text input component for the CallyInput that handles
+      # popover targeting and data attributes needed for the Stimulus
+      # controller.
+      class CallyTextInputComponent < Daisy::DataInput::TextInputComponent
+        # Sets up the HTML attributes needed for the text input before
+        # rendering.  Configures the popover target, ID, name, and data
+        # attributes required for the Stimulus controller to function properly.
+        #
+        # @return [void]
+        def before_render
+          parent_config = loco_parent.config
+
+          # Since we're pulling options from the parent, we have to do a little
+          # more work to ensure we set it up correctly.
+          @start = config_option(:start, parent_config.options[:start])
+          @end = config_option(:end, parent_config.options[:end])
+          @floating_placeholder = config_option(:floating_placeholder, parent_config.options[:floating_placeholder])
+          @floating = config_option(:floating, parent_config.options[:floating] || @floating_placeholder)
+          @placeholder = config_option(:placeholder, parent_config.options[:placeholder] || @floating_placeholder)
+
+          super
+
+          add_html(:component, {
+            popovertarget: loco_parent.popover_id,
+            id: @id || loco_parent.input_id,
+            name: @name || loco_parent.name,
+            value: @value || parent_config.options[:value],
+            placeholder: @placeholder,
+            style: "anchor-name:--#{loco_parent.anchor}",
+            data: {
+              "loco-cally-input-target": "input"
+            }
+          })
+        end
+
+        def call
+          render_parent_to_string
+        end
+      end
+
+      # A specialized calendar component for the CallyInput that handles the calendar
+      # display and interaction within a popover.
+      class CallyCalendarComponent < Daisy::DataInput::CallyComponent
+        # Sets up the HTML attributes needed for the calendar before rendering.
+        # Configures the ID, value, and data attributes required for the Stimulus controller.
+        #
+        # @return [void]
+        def before_render
+          super
+
+          add_html(:component, {
+            id: @id || loco_parent.calendar_id,
+            value: @value || loco_parent.value,
+            data: {
+              "loco-cally-input-target": "calendar"
+            }
+          })
+        end
+
+        def call
+          render_parent_to_string
+        end
+      end
+
+      include ViewComponent::SlotableDefault
+      include LocoMotion::Concerns::LabelableComponent
+
+      define_parts :popover
+
+      renders_one :calendar, CallyCalendarComponent
+      renders_one :input, CallyTextInputComponent
+
+      attr_reader :id, :name, :value, :calendar_id, :input_id, :popover_id, :anchor, :auto_scroll_padding
+
+      # Initializes a new CallyInputComponent.
+      #
+      # @param [Hash] kws The options hash
+      # @option kws [String] :id A unique identifier for the input (default: auto-generated)
+      # @option kws [String] :name The name attribute for the input field
+      # @option kws [Date, String] :value The initial value of the input (default: nil)
+      # @option kws [Integer] :auto_scroll_padding The padding to use when scrolling the calendar into view (default: 100)
+      # @option kws [String] :css Additional CSS classes for the component
+      def initialize(**kws)
+        super(**kws)
+
+        @id = config_option(:id, SecureRandom.uuid)
+        @name = config_option(:name)
+        @value = config_option(:value)
+        @auto_scroll_padding = config_option(:auto_scroll_padding, 100)
+
+        # Input ID should match our ID
+        @input_id = @id
+
+        # Other IDs / options are generated
+        @calendar_id = "#{@id}-calendar"
+        @popover_id = "#{@id}-popover"
+        @anchor = "#{@id}-anchor"
+      end
+
+      # Sets up the component before rendering.
+      # Calls the parent's before_render and then runs the component setup.
+      #
+      # @return [void]
+      def before_render
+        super
+
+        setup_component
+      end
+
+      # Provides a default calendar component instance.
+      # This is used when no custom calendar component is provided.
+      #
+      # @return [CallyCalendarComponent] A new instance of the default calendar component
+      def default_calendar
+         CallyCalendarComponent.new
+      end
+
+      # Provides a default input component instance.
+      # This is used when no custom input component is provided.
+      #
+      # @return [CallyTextInputComponent] A new instance of the default input component
+      def default_input
+        CallyTextInputComponent.new
+      end
+
+      private
+
+      # Sets up the component's HTML structure and attributes.
+      # Configures the Stimulus controller and popover attributes.
+      #
+      # @return [void]
+      # @private
+      def setup_component
+        # Ensure we attach the Stimulus controller
+        add_stimulus_controller(:component, "loco-cally-input")
+
+        # Add relevant popover part HTML
+        add_html(:popover, { id: @popover_id, popover: "auto", style: "position-anchor:--#{@anchor}" })
+        add_html(:popover, { data: { "loco-cally-input-target": "popover", "auto-scroll-padding": @auto_scroll_padding } })
+
+        # Note that we NEED the dropdown class so that the anchor positioning works properly
+        add_css(:popover, "where:dropdown where:bg-base-100 where:rounded where:shadow-lg")
+      end
+    end
+  end
+end