loco_motion-rails 0.0.8 → 0.5.0

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

data/app/components/daisy/data_input/cally_input_controller.js

@@ -0,0 +1,235 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Controller for handling calendar input interactions.
+ * Manages the popover calendar UI and synchronization between input and calendar elements.
+ */
+export default class extends Controller {
+  static targets = ["calendar", "input", "popover"]
+
+  /**
+   * Initializes the controller and sets up event listeners.
+   * Binds all methods to ensure proper 'this' context.
+   *
+   * @returns {void}
+   */
+  connect() {
+
+    // Save the bound functions so we can remove them later
+    this.boundUpdateInput = this.updateInput.bind(this)
+    this.boundUpdateCalendar = this.updateCalendar.bind(this)
+    this.boundOpenCalendar = this.openCalendar.bind(this)
+    this.boundCloseCalendar = this.closeCalendar.bind(this)
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    this.boundHandleToggle = this.handleToggle.bind(this)
+
+    // Bind all of our functions
+    this.calendarTarget.addEventListener("change", this.boundUpdateInput)
+    this.calendarTarget.addEventListener("blur", this.boundCloseCalendar)
+
+    this.inputTarget.addEventListener("change", this.boundUpdateCalendar)
+    this.inputTarget.addEventListener("keyup", this.boundUpdateCalendar)
+    this.inputTarget.addEventListener("click", this.boundOpenCalendar)
+    this.inputTarget.addEventListener("keydown", this.boundHandleKeydown)
+
+    this.popoverTarget.addEventListener("toggle", this.boundHandleToggle)
+  }
+
+  /**
+   * Cleans up event listeners when the controller is disconnected.
+   * Prevents memory leaks by removing all bound event handlers.
+   *
+   * @returns {void}
+   */
+  disconnect() {
+    this.calendarTarget.removeEventListener("change", this.boundUpdateInput)
+    this.calendarTarget.removeEventListener("blur", this.boundCloseCalendar)
+
+    this.inputTarget.removeEventListener("change", this.boundUpdateCalendar)
+    this.inputTarget.removeEventListener("keyup", this.boundUpdateCalendar)
+    this.inputTarget.removeEventListener("keydown", this.boundHandleKeydown)
+    this.inputTarget.removeEventListener("click", this.boundOpenCalendar)
+    this.popoverTarget.removeEventListener("toggle", this.boundHandleToggle)
+  }
+
+  /**
+   * Opens the calendar popover.
+   *
+   * @returns {void}
+   */
+  openCalendar() {
+    // Open the popover
+    this.popoverTarget.togglePopover(true)
+  }
+
+  /**
+   * Closes the calendar popover if the blur event is not related to calendar elements.
+   *
+   * @param {FocusEvent} event - The blur event object.
+   *
+   * @returns {void}
+   */
+  closeCalendar(event) {
+    // Don't close if we're still in the calendar elements
+    if (event?.relatedTarget && this.calendarTarget.contains(event.relatedTarget)) {
+      return
+    }
+
+    this.popoverTarget.togglePopover(false)
+  }
+
+  /**
+   * Opens the calendar if it is closed, or closes it if it is open.
+   *
+   * @returns {void}
+   */
+  toggleCalendar() {
+    this.popoverTarget.togglePopover()
+  }
+
+  /**
+   * Handles the popover toggle event.
+   * - When opening: Sets a zero-width space in empty inputs to prevent floating label flicker
+   * - When closing: Clears the single-space input to ensure proper floating label behavior
+   *
+   * @param {Event} event - The toggle event object with newState property
+   * @returns {void}
+   */
+  handleToggle(event) {
+    const hasFloatingLabel = this.inputTarget.parentElement.classList.contains("floating-label")
+    const isOpen = event.newState == 'open'
+
+    if (isOpen) {
+      // Make sure the calendar is visible
+      this.scrollCalendarIntoView()
+    }
+
+    if (hasFloatingLabel) {
+      const ZERO_WIDTH_SPACE = '\u200B'
+
+      if (isOpen) {
+        // Set the input to a zero-width space if it is empty to prevent a floating label
+        // flicker when the calendar loses focus while setting the date
+        if (this.inputTarget.value == null || this.inputTarget.value === '') {
+          this.inputTarget.value = ZERO_WIDTH_SPACE;
+        }
+      } else {
+        // Unset the zero-width space input on close so the floating label works again
+        if (this.inputTarget.value === ZERO_WIDTH_SPACE) {
+          this.inputTarget.value = null
+        }
+      }
+    }
+  }
+
+  /**
+   * Ensures the calendar popover is visible within the viewport.
+   *
+   * If the popover extends beyond the viewport edges, scrolls the window to
+   * bring it into view adding any data-auto-scroll-padding.
+   *
+   * @returns {void}
+   */
+  scrollCalendarIntoView() {
+    const rect = this.popoverTarget.getBoundingClientRect()
+    const autoScrollPadding = parseInt(this.popoverTarget.dataset.autoScrollPadding, 10)
+    const padding = isNaN(autoScrollPadding) ? 0 : autoScrollPadding
+
+    if (rect.bottom > window.innerHeight) {
+      window.scrollBy({ top: rect.bottom - window.innerHeight + padding, behavior: 'smooth' })
+    } else if (rect.top < 0) {
+      window.scrollBy({ top: rect.top - padding, behavior: 'smooth' })
+    }
+  }
+
+  /**
+   * Updates the input value from the calendar and closes the popover.
+   * Synchronizes the input field with the selected date.
+   *
+   * @returns {void}
+   */
+  updateInput() {
+    // Update the input value and close the popover
+    this.inputTarget.value = this.calendarTarget.value
+    this.closeCalendar()
+  }
+
+  /**
+   * Handles keyboard navigation for the calendar input.
+   * - SPACE: Toggles the popover
+   * - ENTER: Closes an open popover
+   * - ARROW DOWN / ARROW UP: Opens the popover and focuses the calendar
+   *
+   * @param {KeyboardEvent} event - The keyboard event object.
+   *
+   * @returns {void}
+   */
+  handleKeydown(event) {
+    const hasModifierKeys = event.ctrlKey || event.shiftKey || event.altKey || event.metaKey;
+    const isOpen = this.popoverTarget.matches(':popover-open')
+
+    //
+    // SPACE - Toggles the popover.
+    //
+    if (event.key === ' ' || event.code === 'Space') {
+      event.preventDefault()
+
+      this.toggleCalendar()
+    }
+
+    //
+    // ENTER - Closes an open popover
+    //
+    else if (isOpen && (event.key === 'Enter' || event.code === 'Enter')) {
+      // Stop the enter key from triggering the form submission
+      event.preventDefault()
+
+      this.closeCalendar()
+    }
+
+    //
+    // ARROW DOWN / ARROW UP - Opens the popover and focuses the calendar
+    //
+    else if ((event.key === 'ArrowDown' || event.code === 'ArrowUp') && !hasModifierKeys) {
+      event.preventDefault()
+
+      // If the calendar is not already open, open it
+      if (!isOpen) {
+        this.openCalendar()
+      }
+
+      // Focus the calendar element
+      this.calendarTarget.focus()
+
+      // Forward the keydown event to the calendar
+      const forwardedEvent = new KeyboardEvent('keydown', {
+        key: event.key,
+        code: event.code,
+        bubbles: true,
+        cancelable: true,
+      })
+
+      // Dispatch the forwarded event to the calendar
+      this.calendarTarget.dispatchEvent(forwardedEvent)
+    }
+  }
+
+  /**
+   * Updates the calendar's value based on the input field.
+   * Only updates if the input contains a valid ISO 8601 date.
+   *
+   * @returns {void}
+   */
+  updateCalendar() {
+    // Only update the calendar if we have a full / valid ISO 8601 date
+    let newDate = this.inputTarget.value
+
+    if (newDate.length !== 10 || new Date(newDate).toString() === "Invalid Date") {
+      return
+    }
+
+    // Set the calendar value and focused-date attributes
+    this.calendarTarget.value = newDate
+    this.calendarTarget.setAttribute('focused-date', newDate)
+  }
+}

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

@@ -0,0 +1,20 @@
+- if has_any_label?
+  = part(:label_wrapper) do
+    - if has_start_label?
+      - if start?
+        = start
+      - else
+        = part(:start) do
+          = @start
+
+    = part(:component)
+
+    - if has_end_label?
+      - if end?
+        = self.send(:end)
+      - else
+        = part(:end) do
+          = @end
+
+- else
+  = part(:component)

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

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+#
+# The Checkbox component renders a DaisyUI styled checkbox input.
+# It can be used standalone or with a form builder, and supports various styling
+# options including toggle mode for switch-like appearance.
+#
+# @part label_wrapper The wrapper element for labels (when using
+#   start/end/floating labels).
+# @part start The element that contains the start label (appears before the
+#   checkbox).
+# @part end The element that contains the end label (appears after the checkbox).
+#
+# @slot start Custom content for the start label.
+# @slot end Custom content for the end label.
+#
+# @loco_example Basic Usage
+#   = daisy_checkbox(name: "accept", id: "accept")
+#
+# @loco_example Checked Checkbox
+#   = daisy_checkbox(name: "accept", id: "accept", checked: true)
+#
+# @loco_example Toggle Checkbox
+#   = daisy_checkbox(name: "accept", id: "accept", toggle: true)
+#
+# @loco_example Disabled Checkbox
+#   = daisy_checkbox(name: "accept", id: "accept", disabled: true)
+#
+# @loco_example With End Label (common for checkboxes)
+#   = daisy_checkbox(name: "terms", id: "terms", end: "I agree to the terms and conditions")
+#
+class Daisy::DataInput::CheckboxComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::LabelableComponent
+
+  attr_reader :name, :id, :value, :checked, :toggle, :disabled, :required
+
+  #
+  # Instantiate a new Checkbox component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the checkbox input.
+  #
+  # @option kws id [String] The ID attribute for the checkbox input.
+  #
+  # @option kws value [String] The value attribute for the checkbox input.
+  #   Defaults to "1".
+  #
+  # @option kws checked [Boolean] Whether the checkbox is checked. Defaults to
+  #   false.
+  #
+  # @option kws toggle [Boolean] Whether the checkbox should be styled as a
+  #   toggle switch. Defaults to false.
+  #
+  # @option kws disabled [Boolean] Whether the checkbox is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the checkbox is required for form
+  #   validation. Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @value = config_option(:value, "1")
+    @checked = config_option(:checked, false)
+    @toggle = config_option(:toggle, false)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+  end
+
+  #
+  # Calls the {setup_component} method before rendering the component.
+  #
+  def before_render
+    super
+
+    setup_labels
+    setup_component
+  end
+
+  def setup_labels
+    add_css(:label_wrapper, "label") if has_any_label?
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML
+  # attributes.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    add_css(:component, @toggle ? "toggle" : "checkbox")
+
+    add_html(:component, {
+      type: "checkbox",
+      name: @name,
+      id: @id,
+      value: @value,
+      checked: @checked,
+      disabled: @disabled,
+      required: @required
+    })
+  end
+end

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

@@ -0,0 +1,8 @@
+= part(:component) do
+  - if legend?
+    = legend
+  - elsif @simple_legend
+    = part(:legend) { @simple_legend }
+
+  -# Render the main content passed to the component block
+  = content

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Daisy
+  module DataInput
+    # Renders a fieldset element, optionally with a legend, to group
+    # related form controls or content.
+    #
+    # @loco_example Basic fieldset
+    #   = daisy_fieldset do
+    #     Content inside fieldset
+    #
+    # @loco_example Fieldset with legend slot
+    #   = daisy_fieldset do |fieldset|
+    #     - fieldset.with_legend { "My Legend" }
+    #
+    #     Content inside fieldset
+    #
+    # @loco_example Fieldset with legend argument
+    #   = daisy_fieldset(legend: "My Legend") do
+    #     Content inside fieldset
+    #
+    class FieldsetComponent < LocoMotion::BaseComponent
+      self.component_name = :fieldset
+
+      define_parts :legend
+
+      # The legend (title) for the fieldset. Renders a `<legend>` tag.
+      # Can be provided as a slot or via the `legend` argument.
+      renders_one :legend, LocoMotion::BasicComponent.build(tag_name: :legend, css: "fieldset-legend")
+
+      # @param legend [String] Optional simple text for the legend.
+      #   Ignored if the `legend` slot is used.
+      def initialize(legend: nil, **kws)
+        @simple_legend = legend
+
+        super(**kws)
+      end
+
+      def before_render
+        setup_component
+
+        super
+      end
+
+      private
+
+      # Sets up default tags and classes for the component and its parts.
+      def setup_component
+        set_tag_name(:component, :fieldset)
+        set_tag_name(:legend, :legend)
+
+        add_css(:legend, "fieldset-legend")
+        add_css(:component, "fieldset")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+#
+# The FileInput component renders a DaisyUI styled file input.
+# It can be used standalone or with a form builder, and supports
+# various styling options including different sizes and variants.
+#
+# @note File inputs have a border by default. Use `file-input-ghost` to remove
+#   the border.
+#
+# @loco_example Basic Usage
+#   = daisy_file_input(name: "document", id: "document")
+#
+# @loco_example With Accept Attribute
+#   = daisy_file_input(name: "image", id: "image", accept: "image/*")
+#
+# @loco_example With Multiple Files
+#   = daisy_file_input(name: "documents[]", id: "documents", multiple: true)
+#
+# @loco_example Ghost Style (No Border)
+#   = daisy_file_input(name: "document", id: "document", css: "file-input-ghost")
+#
+# @loco_example Disabled File Input
+#   = daisy_file_input(name: "document", id: "document", disabled: true)
+#
+class Daisy::DataInput::FileInputComponent < LocoMotion::BaseComponent
+  attr_reader :name, :id, :accept, :multiple, :disabled, :required
+
+  #
+  # Instantiate a new FileInput component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the file input.
+  #
+  # @option kws id [String] The ID attribute for the file input.
+  #
+  # @option kws accept [String] The accept attribute for the file input,
+  #   specifying allowed file types.
+  #
+  # @option kws multiple [Boolean] Whether the file input allows multiple file
+  #   selection. Defaults to false.
+  #
+  # @option kws disabled [Boolean] Whether the file input is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the file input is required for form
+  #   validation. Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @accept = config_option(:accept, nil)
+    @multiple = config_option(:multiple, false)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+  end
+
+  #
+  # Calls the {setup_component} method before rendering the component.
+  #
+  def before_render
+    setup_component
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML
+  # attributes. Sets the tag to input with type 'file' and adds the 'file-input'
+  # CSS class.
+  #
+  # This configures the name, id, accept attribute, multiple state, disabled state,
+  # and required state of the file input.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    add_css(:component, "file-input")
+
+    add_html(:component, {
+      type: "file",
+      name: @name,
+      id: @id,
+      accept: @accept,
+      multiple: @multiple,
+      disabled: @disabled,
+      required: @required
+    })
+  end
+
+  #
+  # Renders the component inline with no additional whitespace.
+  #
+  def call
+    part(:component)
+  end
+end

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

@@ -0,0 +1,3 @@
+= part(:component) do
+  = reset_button if reset_button?
+  = render_filter_options