loco_motion-rails 0.0.7 → 0.4.0

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

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+#
+# The Range component renders a DaisyUI styled range input slider.
+# It can be used standalone or with a form builder, and supports customization
+# of min/max values, step increments, and color variants.
+#
+# @loco_example Basic Usage
+#   = daisy_range(name: "volume", id: "volume", min: 0, max: 100, value: 50)
+#
+# @loco_example Range with Steps
+#   = daisy_range(name: "step_range", id: "step_range", min: 0, max: 100, step: 25)
+#
+# @loco_example Range with Different Colors
+#   = daisy_range(name: "primary_range", id: "primary_range", css: "range-primary")
+#   = daisy_range(name: "error_range", id: "error_range", css: "range-error")
+#
+class Daisy::DataInput::RangeComponent < LocoMotion::BaseComponent
+  attr_reader :name, :id, :min, :max, :step, :value, :disabled, :required
+
+  #
+  # Instantiate a new Range component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the range input.
+  #
+  # @option kws id [String] The ID attribute for the range input.
+  #
+  # @option kws min [Integer] The minimum value (default: 0).
+  #
+  # @option kws max [Integer] The maximum value (default: 100).
+  #
+  # @option kws step [Integer] The step increment (default: 1).
+  #
+  # @option kws value [Integer] The current value (default: min).
+  #
+  # @option kws disabled [Boolean] Whether the range input is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the range input is required for form
+  #   validation. Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @min = config_option(:min, 0)
+    @max = config_option(:max, 100)
+    @step = config_option(:step, 1)
+    @value = config_option(:value, @min)
+    @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 'range' and adds the 'range' CSS class.
+  #
+  # This configures the min, max, step values along with name, id, value, disabled state, 
+  # and required state of the range input.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    add_css(:component, "range")
+
+    add_html(:component, {
+      type: "range",
+      name: @name,
+      id: @id,
+      min: @min,
+      max: @max,
+      step: @step,
+      value: @value,
+      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/rating_component.html.haml

@@ -0,0 +1,13 @@
+= part(:component) do
+  = part(:hidden_input)
+
+  - if items?
+    - items.each do |item|
+      - item.set_loco_parent(component_ref)
+      = item
+  - elsif content?
+    = content
+  - elsif star_items.present?
+    - star_items.each do |item|
+      - item.set_loco_parent(component_ref)
+      = render(item)

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

@@ -0,0 +1,138 @@
+# frozen_string_literal: true
+
+#
+# The Rating component renders a DaisyUI styled rating input using radio buttons.
+# It can be used standalone or with a form builder, allowing users to select a
+# rating from 1 to a configurable maximum value. Supports customization of size,
+# colors, and initial value.
+#
+# @loco_example Basic Usage
+#   = daisy_rating(name: "product_rating", id: "product_rating")
+#
+# @loco_example Disabled Rating
+#   = daisy_rating(name: "disabled_rating", value: 3, disabled: true)
+#
+# @loco_example Rating with Different Colors
+#   = daisy_rating(name: "primary_rating", css: "[&>input]:bg-primary")
+#   = daisy_rating(name: "warning_rating", css: "[&>input]:bg-warning")
+#
+# @loco_example Rating with Different Sizes
+#   = daisy_rating(name: "small_rating", css: "rating-sm")
+#   = daisy_rating(name: "large_rating", css: "rating-lg")
+#
+class Daisy::DataInput::RatingComponent < LocoMotion::BaseComponent
+  #
+  # Inner component for rendering individual rating items as radio inputs.
+  #
+  class RatingItemComponent < LocoMotion::BasicComponent
+    #
+    # Sets up the component before rendering.
+    #
+    def before_render
+      set_tag_name(:component, :input)
+      add_html(:component, { name: loco_parent&.name, type: "radio" })
+    end
+
+    #
+    # Renders the component with the appropriate attributes.
+    # Takes the name from the parent component and sets the type to radio.
+    #
+    # @return [String] The rendered HTML for the rating item.
+    #
+    def call
+      part(:component)
+    end
+  end
+
+  define_part :hidden_input
+
+  renders_many :items, RatingItemComponent
+
+  attr_reader :name, :value, :max, :disabled, :required, :id, :inputs_css, :inputs_html
+
+  #
+  # Instantiate a new Rating component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the radio inputs.
+  #
+  # @option kws value [Integer] The current rating value.
+  #
+  # @option kws max [Integer] The maximum rating value (default: 5).
+  #
+  # @option kws disabled [Boolean] Whether the rating is disabled. Defaults to
+  #   false. When disabled, users cannot interact with the rating control.
+  #
+  # @option kws required [Boolean] Whether the rating input is required for form
+  #   validation. Defaults to false.
+  #
+  # @option kws id [String] The ID for the first radio input.
+  #
+  # @option kws inputs_css [String] CSS classes to apply to each rating input.
+  #
+  # @option kws inputs_html [Hash] HTML attributes to apply to each rating input.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @value = config_option(:value)
+    @max = config_option(:max, 5)
+    @disabled = config_option(:disabled, false)
+    @required = config_option(:required, false)
+    @id = config_option(:id)
+    @inputs_css = config_option(:inputs_css)
+    @inputs_html = config_option(:inputs_html, {})
+  end
+
+  #
+  # Calls the {setup_component} and {setup_hidden_input} methods before rendering
+  # the component. This prepares the rating container and creates a hidden input
+  # if needed.
+  #
+  def before_render
+    setup_component
+    setup_hidden_input
+  end
+
+  #
+  # Sets up the component by configuring the tag name and CSS classes.
+  #
+  def setup_component
+    set_tag_name(:component, :div)
+    add_css(:component, "rating")
+    add_html(:component, id: @id) if @id
+  end
+
+  #
+  # Sets up a hidden input so that the rating can start empty.
+  #
+  def setup_hidden_input
+    set_tag_name(:hidden_input, :input)
+    add_css(:hidden_input, "hidden")
+    add_html(:hidden_input, { type: "radio", name: @name, value: nil, checked: @value.blank? })
+  end
+
+  #
+  # Declares some default items to use if no custom items are provided.
+  #
+  def star_items
+    (1..@max).map do |rating|
+      input_attrs = {
+        css: ["[:where(&)]:mask [:where(&)]:mask-star", @inputs_css].compact.join(" "),
+        html: {
+          name: @name,
+          value: rating,
+          checked: @value == rating,
+          required: @required && rating == 1,
+          disabled: @disabled,
+          "aria-label": "#{rating} star",
+          **@inputs_html
+        }
+      }
+
+      RatingItemComponent.new(**input_attrs)
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+= part(:component) do
+  - if @placeholder_text
+    = part(:placeholder) do
+      = @placeholder_text
+
+  - if options?
+    - options.each do |option|
+      - option.set_loco_parent(component_ref)
+      = option.call
+  - elsif default_options.present?
+    - default_options.each do |option|
+      - option.set_loco_parent(component_ref)
+      = render(option)
+  - elsif content?
+    = content

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

@@ -0,0 +1,178 @@
+# frozen_string_literal: true
+
+#
+# The Select component provides a styled dropdown select input for forms.
+# It supports various styling options, including sizes, colors, bordered and ghost variants.
+#
+# @part placeholder The placeholder option element that is shown when no option is selected.
+#
+# @slot options+ Custom options to be rendered in the select.
+#
+# @loco_example Using simple strings for options
+#   = daisy_select(name: "size", css: "select-sm select-bordered", 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")
+class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
+  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, :placeholder_text, :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 placeholder [String] Optional placeholder text to display when no
+  #   option is selected. Appears as a disabled 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.
+  #
+  def initialize(**kws)
+    super(**kws)
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @value = config_option(:value)
+    @placeholder_text = config_option(:placeholder)
+    @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, {})
+  end
+
+  #
+  # Sets up the component before rendering.
+  #
+  def before_render
+    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.
+  #
+  def setup_component
+    set_tag_name(:component, :select)
+    add_css(:component, "select")
+
+    # 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 = option.is_a?(Hash) ? option[:value] : option
+      label = option.is_a?(Hash) ? option[:label] : option.to_s
+
+      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
+
+  #
+  # 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,124 @@
+# 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.
+#
+# @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 With Border Style
+#   = daisy_text_area(name: "message", css: "textarea-bordered")
+#
+# @loco_example Different Colors
+#   .flex.flex-col.gap-4
+#     = daisy_text_area(name: "primary", placeholder: "Primary", css: "textarea-primary textarea-bordered")
+#     = daisy_text_area(name: "secondary", placeholder: "Secondary", css: "textarea-secondary textarea-bordered")
+#     = daisy_text_area(name: "accent", placeholder: "Accent", css: "textarea-accent textarea-bordered")
+#
+# @loco_example Disabled TextArea
+#   = daisy_text_area(name: "message", disabled: true, css: "textarea-bordered")
+#
+# @loco_example Required TextArea
+#   = daisy_text_area(name: "message", required: true, css: "textarea-bordered")
+#
+# @loco_example Readonly TextArea
+#   = daisy_text_area(name: "message", readonly: true, value: "This content cannot be edited.", css: "textarea-bordered")
+#
+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,6 @@
+= part(:component) do
+  = start if start?
+
+  = part(:input)
+
+  = end_content if end?