loco_motion-rails 0.0.8 → 0.5.0

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

@@ -0,0 +1,320 @@
+# frozen_string_literal: true
+
+#
+# The Select component provides a styled dropdown select input for forms.
+# It supports various styling options, including sizes, colors, and variants.
+# Additionally, it supports labelable functionality with start, end, and
+# floating labels.
+#
+# @note Select inputs have a border by default and a width of 20rem. Use
+#   `select-ghost` to remove the border.
+#
+# @part placeholder The placeholder option element that is shown when no option
+#   is selected.
+# @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
+#   select).
+# @part end The element that contains the end label (appears after the select).
+# @part floating The element that contains the floating label (appears floating
+#   above the select).
+#
+# @slot options+ Custom options to be rendered in the select.
+# @slot start Custom content for the start label.
+# @slot end Custom content for the end label.
+# @slot floating Custom content for the floating label.
+#
+# @loco_example Using simple strings for options
+#   = daisy_select(name: "size", css: "select-sm", options: ["Small", "Medium", "Large"])
+#
+# @loco_example Using a block to define options
+#   = daisy_select(name: "color", css: "select-primary") do |select|
+#     - select.with_option(value: "red", label: "Red")
+#     - select.with_option(value: "green", label: "Green")
+#     - select.with_option(value: "blue", label: "Blue")
+#
+# @loco_example With a start label
+#   = daisy_select(name: "color", start: "Select a color", options: ["Red", "Green", "Blue"])
+#
+# @loco_example With a floating label
+#   = daisy_select(name: "color", floating: "Color", options: ["Red", "Green", "Blue"])
+#
+class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::LabelableComponent
+
+  class SelectOptionComponent < LocoMotion::BasicComponent
+    attr_reader :value, :label, :selected, :disabled
+
+    #
+    # Initialize a new select option component.
+    #
+    # @param value [String, Symbol, Integer] The value of the option.
+    #
+    # @param label [String] The label to display for the option.
+    #
+    # @param selected [Boolean] Whether the option is selected. Defaults to false.
+    #
+    # @param disabled [Boolean] Whether the option is disabled. Defaults to false.
+    #
+    # @param css [String] CSS classes to apply to the option.
+    #
+    # @param html [Hash] HTML attributes to apply to the option.
+    #
+    def initialize(value:, label:, selected: false, disabled: false, css: "", html: {}, **kws)
+      @value = value
+      @label = label
+      @selected = selected
+      @disabled = disabled
+      @css = css
+      @html = html
+      super(**kws)
+    end
+
+    #
+    # Renders the option element with the appropriate attributes.
+    #
+    # @return [String] The rendered HTML for the option element.
+    #
+    def call
+      content_tag(:option, label, {
+        value: value,
+        selected: selected,
+        disabled: disabled,
+        class: @css
+      }.merge(@html))
+    end
+  end
+
+  renders_many :options, SelectOptionComponent
+
+  define_part :placeholder
+
+  attr_reader :name, :id, :value, :include_blank, :disabled, :required, :options_css, :options_html
+
+  #
+  # Initialize a new select component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the select input.
+  #
+  # @option kws id [String] The id attribute for the select input.
+  #
+  # @option kws value [String, Symbol, Integer] The current value of the select input.
+  #   Determines which option is selected on initial render.
+  #
+  # @option kws include_blank [Boolean] Whether to include a blank option at the
+  # top of the list.
+  #
+  # @option kws disabled [Boolean] Whether the select input is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the select input is required for form
+  #   validation. Defaults to false.
+  #
+  # @option kws options [Array] An array of options to display in the select input.
+  #   Can be an array of strings or hashes with :value and :label keys.
+  #
+  # @option kws options_css [String] CSS classes to apply to each option.
+  #
+  # @option kws options_html [Hash] HTML attributes to apply to each option.
+  #
+  # @option kws option_label [Symbol] The key to use for the option label.
+  #
+  # @option kws option_value [Symbol] The key to use for the option value.
+  #
+  def initialize(**kws)
+    super(**kws)
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @value = config_option(:value)
+    @include_blank = config_option(:include_blank, false)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+    @options_list = config_option(:options)
+    @options_css = config_option(:options_css, "")
+    @options_html = config_option(:options_html, {})
+    @option_label = config_option(:option_label, :label)
+    @option_value = config_option(:option_value, :value)
+  end
+
+  #
+  # Sets up the component before rendering.
+  #
+  def before_render
+    super
+
+    setup_component
+    setup_placeholder
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML attributes.
+  # Sets the tag to 'select' and adds the 'select' CSS class.
+  # Also adds Stimulus controller data attributes.
+  #
+  def setup_component
+    set_tag_name(:component, :select)
+
+    if has_floating_label?
+      add_css(:label_wrapper, "floating-label")
+      add_css(:component, "select")
+    elsif has_start_label? || has_end_label?
+      add_stimulus_controller(:label_wrapper, "select")
+
+      add_css(:label_wrapper, "select")
+      add_css(:start, "label")
+      add_css(:end, "label")
+    else
+      add_css(:component, "select")
+    end
+
+    # Add HTML attributes for the select element
+    add_html(:component,
+      name: @name,
+      id: @id,
+      disabled: @disabled,
+      required: @required
+    )
+  end
+
+  #
+  # Sets up the placeholder option that appears when no option is selected.
+  # Adds a disabled option with an empty value.
+  #
+  def setup_placeholder
+    set_tag_name(:placeholder, :option)
+    add_html(:placeholder, value: "", disabled: true, selected: @value.blank?)
+  end
+
+  #
+  # Converts the options array into SelectOptionComponent instances.
+  # Handles both hash options (with value/label keys) and simple string options.
+  #
+  # @return [Array<SelectOptionComponent>] Array of option components or empty array if @options_list is nil.
+  #
+  def default_options
+    return [] unless @options_list
+
+    options_list.map do |option|
+      value = extract_option_value(option)
+      label = extract_option_label(option, value)
+
+      Daisy::DataInput::SelectComponent::SelectOptionComponent.new(
+        value: value,
+        label: label,
+        selected: value.to_s == @value.to_s,
+        css: @options_css,
+        html: @options_html
+      )
+    end
+  end
+
+  private
+
+  # Extracts the value from an option using the configured @option_value key or method.
+  #
+  # @param option [Object] The option to extract the value from
+  # @return [Object] The extracted value
+  #
+  def extract_option_value(option)
+    if option.is_a?(Hash)
+      option[@option_value]
+    elsif option.respond_to?(@option_value)
+      option.public_send(@option_value)
+    else
+      option
+    end
+  end
+
+  # Extracts the label from an option using the configured @option_label key or method.
+  # Falls back to the value if no label can be extracted.
+  #
+  # @param option [Object] The option to extract the label from
+  # @param value [Object] The extracted value to use as fallback
+  # @return [String] The extracted label or string representation of the value
+  #
+  def extract_option_label(option, value)
+    if option.is_a?(Hash)
+      option[@option_label] || value.to_s
+    elsif option.respond_to?(@option_label)
+      option.public_send(@option_label)
+    else
+      value.to_s
+    end
+  end
+
+  # Alias for include_blank to match Ruby convention for boolean methods
+  def include_blank?
+    @include_blank
+  end
+
+  #
+  # Renders the select options based on the configuration.
+  # This method is used by the template to render options consistently.
+  #
+  # @return [String] The HTML for all options in the select.
+  #
+  def render_select_options
+    result = ""
+
+    # Add blank option if configured
+    if include_blank?
+      result += content_tag(:option, "", value: "")
+    end
+
+    # Add options from the block or default options
+    if options?
+      options.each do |option|
+        result += option.call
+      end
+    elsif default_options.present?
+      default_options.each do |option|
+        result += render(option)
+      end
+    end
+
+    result.html_safe
+  end
+
+  #
+  # Renders the component part with placeholder, options and content.
+  # This method is used by the template to render the select component consistently.
+  #
+  # @return [String] The HTML for the select component.
+  #
+  def render_component
+    part(:component) do
+      result = ""
+
+      # Add placeholder if provided
+      if @placeholder
+        result += part(:placeholder) do
+          @placeholder
+        end
+      end
+
+      # Add options
+      result += render_select_options
+
+      # Add content if present
+      if content?
+        result += (content || "")
+      end
+
+      result.html_safe
+    end
+  end
+
+  private
+
+  #
+  # Ensures the options list is always an array, even if a single option is provided.
+  #
+  # @return [Array] The list of options as an array.
+  #
+  def options_list
+    @options_list.is_a?(Array) ? @options_list : [@options_list]
+  end
+end

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

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+#
+# The TextArea component renders a DaisyUI styled textarea field.
+# It can be used standalone or with a form builder, and supports
+# various styling options and states.
+#
+# @note Text areas have a border by default. Use `textarea-ghost` to remove the
+#   border.
+#
+# @part component The main textarea element that users can type into.
+#
+# @loco_example Basic Usage
+#   = daisy_text_area(name: "message", id: "message")
+#
+# @loco_example With Placeholder
+#   = daisy_text_area(name: "message", placeholder: "Enter your message here...")
+#
+# @loco_example With Initial Value
+#   = daisy_text_area(name: "message", value: "Initial text content")
+#
+# @loco_example With Specified Rows
+#   = daisy_text_area(name: "message", rows: 6)
+#
+# @loco_example Borderless Style
+#   = daisy_text_area(name: "message", css: "textarea-ghost")
+#
+# @loco_example Different Colors
+#   .flex.flex-col.gap-4
+#     = daisy_text_area(name: "primary", placeholder: "Primary", css: "textarea-primary")
+#     = daisy_text_area(name: "secondary", placeholder: "Secondary", css: "textarea-secondary")
+#     = daisy_text_area(name: "accent", placeholder: "Accent", css: "textarea-accent")
+#
+# @loco_example Disabled TextArea
+#   = daisy_text_area(name: "message", disabled: true)
+#
+# @loco_example Required TextArea
+#   = daisy_text_area(name: "message", required: true)
+#
+# @loco_example Readonly TextArea
+#   = daisy_text_area(name: "message", readonly: true, value: "This content cannot be edited.")
+#
+class Daisy::DataInput::TextAreaComponent < LocoMotion::BaseComponent
+  attr_reader :name, :id, :value, :placeholder, :rows, :cols, :disabled, :required, :readonly
+
+  #
+  # Instantiate a new TextArea component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the textarea.
+  #
+  # @option kws id [String] The ID attribute for the textarea.
+  #
+  # @option kws value [String] The initial value of the textarea.
+  #
+  # @option kws placeholder [String] Placeholder text for the textarea.
+  #
+  # @option kws rows [Integer] The number of visible text lines. Defaults to 4.
+  #
+  # @option kws cols [Integer] The visible width of the textarea. Defaults to nil.
+  #
+  # @option kws disabled [Boolean] Whether the textarea is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the textarea is required for form
+  #   validation. Defaults to false.
+  #
+  # @option kws readonly [Boolean] Whether the textarea is read-only. Defaults to
+  #   false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @value = config_option(:value, nil)
+    @placeholder = config_option(:placeholder, nil)
+    @rows = config_option(:rows, 4)
+    @cols = config_option(:cols, nil)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+    @readonly = config_option(:readonly, 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 textarea and adds the 'textarea' CSS class.
+  #
+  # This configures various attributes of the textarea including name, id, value,
+  # placeholder, rows, cols, and states like disabled, required, and readonly.
+  #
+  def setup_component
+    set_tag_name(:component, :textarea)
+
+    add_css(:component, "textarea")
+
+    add_html(:component, {
+      name: @name,
+      id: @id,
+      placeholder: @placeholder,
+      rows: @rows,
+      cols: @cols,
+      disabled: @disabled,
+      required: @required,
+      readonly: @readonly
+    })
+  end
+
+  #
+  # Renders the component with its value as content.
+  #
+  def call
+    if @value
+      part(:component) { @value }
+    else
+      part(:component)
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+- if has_any_label?
+  = part(:label_wrapper) do
+    - if has_start_label?
+      - if start?
+        = start
+      - else
+        = part(:start) do
+          = @start
+
+    - if has_floating_label?
+      - if floating?
+        = floating
+      - else
+        = part(:floating) do
+          = @floating
+
+    = 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/text_input_component.rb

@@ -0,0 +1,142 @@
+# frozen_string_literal: true
+
+#
+# The TextInput component renders a DaisyUI styled text input field.
+# It can be used standalone or with a form builder, and supports
+# various styling options including different types, sizes and variants.
+#
+# @note Input fields have a border by default and a width of 20rem. Use
+#   `input-ghost` to remove the border.
+#
+# @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
+#   input).
+# @part end The element that contains the end label (appears after the input).
+# @part floating The element that contains the floating label (appears floating
+#   above the input).
+#
+# @slot start Content to display before the input field.
+# @slot end Content to display after the input field.
+# @slot floating Custom content for the floating label.
+#
+# @loco_example Basic Usage
+#   = daisy_text_input(name: "username", id: "username")
+#
+# @loco_example With Placeholder
+#   = daisy_text_input(name: "email", id: "email", placeholder: "Enter your email")
+#
+# @loco_example Ghost Style (No Border)
+#   = daisy_text_input(name: "search", id: "search", css: "input-ghost")
+#
+# @loco_example Different Types
+#   = daisy_text_input(name: "password", id: "password", type: "password")
+#   = daisy_text_input(name: "email", id: "email", type: "email")
+#
+# @loco_example With Start Label
+#   = daisy_text_input(name: "username", id: "username", start: "Username:")
+#
+# @loco_example With End Label
+#   = daisy_text_input(name: "email", id: "email", end: "@example.com")
+#
+# @loco_example With Floating Label
+#   = daisy_text_input(name: "username", id: "username", floating: "Username")
+#
+# @loco_example With Icons
+#   = daisy_text_input(name: "search", placeholder: "Search...") do |text_input|
+#     - text_input.with_start do
+#       = hero_icon("magnifying-glass", size: 5, css: "text-gray-400")
+#
+# @loco_example With Start and End Content
+#   = daisy_text_input(name: "email", placeholder: "Email address") do |text_input|
+#     - text_input.with_start do
+#       = hero_icon("envelope", size: 5, css: "text-gray-400")
+#     - text_input.with_end do
+#       = daisy_button(title: "Verify", css: "h-full rounded-l-none")
+#
+# @loco_example Disabled Text Input
+#   = daisy_text_input(name: "username", id: "username", disabled: true)
+#
+class Daisy::DataInput::TextInputComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::LabelableComponent
+
+  attr_reader :name, :id, :value, :type, :disabled, :required, :readonly
+
+  #
+  # Instantiate a new TextInput component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the text input.
+  #
+  # @option kws id [String] The ID attribute for the text input.
+  #
+  # @option kws value [String] The initial value of the text input.
+  #
+  # @option kws type [String] The type of input (text, password, email, etc.).
+  #   Defaults to "text".
+  #
+  # @option kws disabled [Boolean] Whether the text input is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the text input is required for form
+  #   validation. Defaults to false.
+  #
+  # @option kws readonly [Boolean] Whether the text input is read-only. Defaults to
+  #   false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @value = config_option(:value, nil)
+    @type = config_option(:type, "text")
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+    @readonly = config_option(:readonly, false)
+    @change = config_option(:change)
+  end
+
+  #
+  # Calls the {setup_component} method before rendering the component.
+  #
+  def before_render
+    super
+
+    setup_component
+  end
+
+  #
+  # Sets up the component by configuring the tag name, CSS classes, and HTML
+  # attributes. Sets the tag to input with appropriate type and adds the 'input'
+  # CSS class.
+  #
+  # This configures various attributes of the text input including name, id, value,
+  # placeholder, type, and states like disabled, required, and readonly.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    if has_floating_label?
+      add_css(:label_wrapper, "floating-label input")
+    elsif has_start_label? || has_end_label?
+      add_css(:label_wrapper, "input")
+    else
+      add_css(:component, "input")
+    end
+
+    add_html(:component, {
+      type: @type,
+      name: @name,
+      id: @id,
+      value: @value,
+      placeholder: @placeholder,
+      disabled: @disabled,
+      required: @required,
+      readonly: @readonly
+    })
+
+    add_html(:component, { onchange: "document.getElementById('#{@change}').value = this.value" }) if @change
+  end
+end

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+#
+# The Toggle component renders a DaisyUI styled toggle switch.
+# It can be used standalone or with a form builder, and provides a visual way
+# to toggle between two states (on/off).
+#
+# @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
+#   toggle).
+# @part end The element that contains the end label (appears after the toggle).
+#
+# @slot start Custom content for the start label.
+# @slot end Custom content for the end label.
+#
+# @loco_example Basic Usage
+#   = daisy_toggle(name: "notifications", id: "notifications")
+#
+# @loco_example Checked Toggle
+#   = daisy_toggle(name: "notifications", id: "notifications", checked: true)
+#
+# @loco_example Colored Toggle
+#   = daisy_toggle(name: "theme", id: "theme", css: "toggle-primary", checked: true)
+#
+# @loco_example Disabled Toggle
+#   = daisy_toggle(name: "disabled", id: "disabled", disabled: true)
+#
+# @loco_example With End Label (common for toggles)
+#   = daisy_toggle(name: "notifications", id: "notifications", end: "Enable notifications")
+#
+class Daisy::DataInput::ToggleComponent < Daisy::DataInput::CheckboxComponent
+  #
+  # Instantiate a new Toggle component.
+  #
+  # This component accepts the same options as {Daisy::DataInput::CheckboxComponent},
+  # but always sets `toggle: true` to render the checkbox as a toggle switch.
+  #
+  # @param kws [Hash] The keyword arguments for the component. See
+  #   {Daisy::DataInput::CheckboxComponent#initialize} for available options.
+  #
+  def initialize(**kws)
+    # Always force toggle to be true
+    kws[:toggle] = true
+
+    super(**kws)
+  end
+end

data/app/components/daisy/feedback/alert_component.html.haml

@@ -1,7 +1,7 @@
 = part(:component) do
   - # If we have an icon, assume we want to wrap the content
   - if @icon.present?
-    = hero_icon(@icon, **rendered_html(:icon))
+    = render_icon
     = part(:content_wrapper) do
       = content
   - else