loco_motion-rails 0.0.8 → 0.5.0

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

@@ -0,0 +1,221 @@
+# frozen_string_literal: true
+
+#
+# The Filter component is a group of radio buttons where choosing one option
+# hides the others and shows a reset button.
+#
+# @loco_example Basic Usage
+#   = daisy_filter(name: "frameworks", options: ["Svelte", "Vue", "React"])
+#
+# @loco_example Using Hash Options
+#   = daisy_filter(name: "languages", options: [
+#     { label: "Ruby", value: "ruby" },
+#     { label: "JavaScript", value: "js" },
+#     { label: "Python", value: "py" }
+#   ])
+#
+# @loco_example Custom Styling
+#   = daisy_filter(name: "priorities", css: "items-center") do |f|
+#     - f.with_reset_button(css: "btn-accent btn-sm rounded-full")
+#     - f.with_option(label: "Low", css: "btn-outline btn-success")
+#     - f.with_option(label: "Medium", css: "btn-outline btn-warning")
+#     - f.with_option(label: "High", css: "btn-outline btn-error")
+#
+# @loco_example Within Form Builder
+#   = form_with(model: @post) do |form|
+#     = form.daisy_filter(:category, options: ["News", "Tech", "Sports"])
+#     = form.submit "Save", class: "btn btn-primary mt-4"
+#
+# @loco_example Form Builder With Block
+#   = form_with(model: @user) do |form|
+#     = form.daisy_filter(:role) do |f|
+#       - f.with_option(label: "Admin", value: "admin")
+#       - f.with_option(label: "Editor", value: "editor")
+#       - f.with_option(label: "Viewer", value: "viewer")
+#     = form.submit "Update", class: "btn btn-primary mt-4"
+#
+module Daisy
+  module DataInput
+    class FilterComponent < LocoMotion::BaseComponent
+      class FilterOptionComponent < Daisy::DataInput::RadioButtonComponent
+        #
+        # Initialize a new filter option component.
+        #
+        # @param kws [Hash] The keyword arguments for the component.
+        #
+        # @option kws label [String] The aria-label for the radio button.
+        #
+        def initialize(**kws)
+          super(**kws)
+
+          @label = config_option(:label)
+          @index = config_option(:index)
+          @skip_styling = true
+        end
+
+        #
+        # Setup the component before rendering.
+        #
+        def before_render
+          # Make sure to pull the default name from the parent
+          @name = config_option(:name, loco_parent.name)
+          @id = config_option(:id, "#{loco_parent.id}_#{@index}")
+
+          # Call the parent setup first
+          super
+
+          # Add btn class for styling
+          add_css(:component, "btn")
+          add_html(:component, { id: @id })
+
+          # Add aria-label if specified
+          if @label.present?
+            add_html(:component, { "aria-label": @label })
+          end
+        end
+      end
+
+      class FilterResetComponent < Daisy::DataInput::RadioButtonComponent
+        #
+        # Initialize a new filter reset component.
+        #
+        # @param kws [Hash] The keyword arguments for the component.
+        #
+        # @option kws disabled [Boolean] Whether the reset button is disabled. Defaults to false.
+        #
+        def initialize(**kws)
+          super(**kws)
+
+          @skip_styling = true
+        end
+
+        #
+        # Setup the component before rendering.
+        #
+        def before_render
+          # Make sure to pull the default name from the parent
+          @name = config_option(:name, loco_parent.name)
+          @id = config_option(:id, "#{loco_parent.id}_reset")
+
+          # Call parent setup first
+          super
+
+          # Add square styling
+          add_css(:component, "where:btn where:btn-square filter-reset")
+
+          # Set type to reset
+          add_html(:component, { type: "radio", id: @id })
+        end
+      end
+
+      include ViewComponent::SlotableDefault
+
+      renders_one :reset_button, FilterResetComponent
+      renders_many :options, FilterOptionComponent
+
+      attr_reader :name, :id
+
+      #
+      # Initialize a new filter component.
+      #
+      # @param kws [Hash] The keyword arguments for the component.
+      #
+      # @option kws name [String] Required name attribute for the radio button group.
+      #
+      # @option kws options [Array] An array of options to display in the filter.
+      #   Can be an array of strings, symbols, or hashes with :label keys.
+      #
+      # @option kws value [String] The current value of the filter (for form integration).
+      #
+      def initialize(**kws)
+        super(**kws)
+
+        @name = config_option(:name)
+        @id = config_option(:id, SecureRandom.uuid)
+        @options_list = config_option(:options)
+        @value = config_option(:value)
+      end
+
+      #
+      # Setup the component before rendering.
+      #
+      def before_render
+        super
+
+        setup_component
+      end
+
+      def default_reset_button
+        FilterResetComponent.new(name: @name)
+      end
+
+      #
+      # Converts the options array into FilterOptionComponent instances.
+      # Handles both hash options (with label keys) and simple string/symbol options.
+      #
+      # @return [Array<FilterOptionComponent>] Array of option components or empty array if @options_list is nil.
+      #
+      def standard_options
+        return [] unless options_list
+
+        options_list.map.with_index do |option, index|
+          label = option.is_a?(Hash) ? option[:label] : option.to_s
+          value = option.is_a?(Hash) ? option[:value] : option
+
+          # Check if this option should be selected based on the component's value
+          checked = @value.present? && @value.to_s == value.to_s
+
+          Daisy::DataInput::FilterComponent::FilterOptionComponent.new(
+            loco_parent: component_ref,
+            name: @name,
+            label: label,
+            value: value,
+            checked: checked,
+            index: index.to_s  # Ensure index is a string
+          )
+        end
+      end
+
+      #
+      # Renders the filter 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 filter.
+      #
+      def render_filter_options
+        result = ""
+
+        if options?
+          options.each do |option|
+            result += render(option)
+          end
+        elsif standard_options.present?
+          standard_options.each do |option|
+            result += render(option)
+          end
+        end
+
+        result.html_safe
+      end
+
+      private
+
+      #
+      # Sets up the component by configuring the tag name, CSS classes, and HTML attributes.
+      #
+      def setup_component
+        # Add base component class
+        add_css(:component, "filter")
+      end
+
+      #
+      # 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].flatten.compact
+      end
+    end
+  end
+end

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

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+#
+# The Label component renders a DaisyUI styled label for form inputs.
+# It can be used with any form input component and provides visual styling
+# consistent with other Daisy UI elements.
+#
+# @loco_example Basic Usage
+#   = daisy_label(for: "input_id") do
+#     My Label
+#
+# @loco_example With Label Title
+#   = daisy_label(for: "input_id", title: "My Label")
+#
+# @loco_example Required Label
+#   = daisy_label(for: "input_id", required: true) do
+#     My Required Label
+#
+class Daisy::DataInput::LabelComponent < LocoMotion::BaseComponent
+  attr_reader :for, :title, :required
+
+  #
+  # Instantiate a new Label component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws for [String] The ID of the input element this label is for.
+  #   This connects the label to its associated form control for accessibility.
+  #
+  # @option kws title [String] The text content of the label. If not provided,
+  #   the content block will be used. If a content block is provided, it will
+  #   take precedence over the title option.
+  #
+  # @option kws required [Boolean] Whether the label is for a required input.
+  #   Defaults to false.
+  #
+  def initialize(title = nil, **kws)
+    super
+
+    @for = config_option(:for)
+    @title = config_option(:title, title)
+    @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 'label' and adds the 'label' CSS class.
+  #
+  # This configures the 'for' attribute to connect the label to its input and
+  # adds appropriate styling for required inputs when needed.
+  #
+  def setup_component
+    set_tag_name(:component, :label)
+
+    add_css(:component, "label")
+
+    add_html(:component, {
+      for: @for
+    })
+  end
+
+  #
+  # Renders the component with its content.
+  #
+  def call
+    part(:component) do
+      if content?
+        content
+      elsif @title
+        content_tag(:span, @title, class: "label-text")
+      else
+        # Fallback to empty content
+        ""
+      end
+    end
+  end
+end

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

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+#
+# The Radio Button component renders a DaisyUI styled radio button input.
+# It can be used standalone or with a form builder, and is ideal for creating
+# option groups where users must select exactly one choice.
+#
+# @loco_example Basic Usage
+#   = daisy_radio(name: "option", id: "option1", value: "1")
+#
+# @loco_example Checked Radio Button
+#   = daisy_radio(name: "option", id: "option2", value: "2", checked: true)
+#
+# @loco_example Disabled Radio Button
+#   = daisy_radio(name: "option", id: "option3", value: "3", disabled: true)
+#
+class Daisy::DataInput::RadioButtonComponent < LocoMotion::BaseComponent
+  attr_reader :name, :id, :value, :checked, :disabled, :required
+
+  #
+  # Instantiate a new Radio Button component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws name [String] The name attribute for the radio button input.
+  #
+  # @option kws id [String] The ID attribute for the radio button input.
+  #
+  # @option kws value [String] The value attribute for the radio button input.
+  #
+  # @option kws checked [Boolean] Whether the radio button is checked. Defaults to
+  #   false.
+  #
+  # @option kws disabled [Boolean] Whether the radio button is disabled. Defaults to
+  #   false.
+  #
+  # @option kws required [Boolean] Whether the radio button is required for form
+  #   validation. Defaults to false.
+  #
+  def initialize(**kws)
+    super
+
+    @name = config_option(:name)
+    @id = config_option(:id)
+    @value = config_option(:value)
+    @checked = config_option(:checked, 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 'radio' and adds the 'radio' CSS class.
+  #
+  # This configures the name, id, value, disabled state, required state, and
+  # checked state of the radio button.
+  #
+  def setup_component
+    set_tag_name(:component, :input)
+
+    add_css(:component, "radio") unless @skip_styling
+
+    add_html(:component, {
+      type: "radio",
+      name: @name,
+      id: @id,
+      value: @value,
+      checked: @checked,
+      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/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,11 @@
+= part(:component) do
+  = part(:hidden_input)
+
+  - if items?
+    - items.each do |item|
+      = item
+  - elsif content?
+    = content
+  - elsif star_items.present?
+    - star_items.each do |item|
+      = render(item)

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

@@ -0,0 +1,139 @@
+# 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 = {
+        loco_parent: component_ref,
+        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,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
+
+    = render_component
+
+    - if has_end_label?
+      - if end?
+        = self.send(:end)
+      - else
+        = part(:end) do
+          = @end
+
+- else
+  = render_component