loco_motion-rails 0.4.0 → 0.5.0

data/app/components/daisy/navigation/tabs_component.rb

@@ -8,21 +8,21 @@
 # @slot tabs+ {Daisy::Navigation::TabsComponent::TabComponent} The individual
 #   tabs to display.
 #
-# @example Basic tabs with links
-#   = daisy_tabs(css: "tabs-bordered") do |tabs|
+# @loco_example Basic tabs with links
+#   = daisy_tabs(css: "tabs-border") do |tabs|
 #     - tabs.with_tab(title: "Home", active: true)
 #     - tabs.with_tab(title: "Click Me", html: { onclick: "alert('Clicked!')" })
 #     - tabs.with_tab(title: "Google", href: "https://google.com", target: "_blank")
 #
-# @example Radio button tabs with content
-#   = daisy_tabs(css: "tabs-lifted", radio: true) do |tabs|
+# @loco_example Radio button tabs with content
+#   = daisy_tabs(css: "tabs-lift", radio: true) do |tabs|
 #     - tabs.with_tab(title: "Tab 1", checked: true) do
 #       %p Tab 1 content
 #     - tabs.with_tab(title: "Tab 2") do
 #       %p Tab 2 content
 #
-# @example Tabs with custom titles and content
-#   = daisy_tabs(css: "tabs-lifted") do |tabs|
+# @loco_example Tabs with custom titles and content
+#   = daisy_tabs(css: "tabs-lift") do |tabs|
 #     - tabs.with_tab do |tab|
 #       - tab.with_title do
 #         .flex.gap-2
@@ -31,6 +31,16 @@
 #       - tab.with_custom_content(css: "tab-content p-4") do
 #         %p Welcome home!
 #
+# @loco_example Tabs with different sizes
+#   = daisy_tabs(css: "tabs-border tabs-xl") do |tabs|
+#     - tabs.with_tab(title: "Extra Large Tab", active: true)
+#     - tabs.with_tab(title: "Another Tab")
+#
+# @loco_example Tabs with different sizes
+#   = daisy_tabs(css: "tabs-border tabs-lg") do |tabs|
+#     - tabs.with_tab(title: "Large Tab", active: true)
+#     - tabs.with_tab(title: "Another Tab")
+#
 class Daisy::Navigation::TabsComponent < LocoMotion::BaseComponent
 
   #
@@ -45,21 +55,21 @@ class Daisy::Navigation::TabsComponent < LocoMotion::BaseComponent
   # @slot custom_content Custom content to be rendered after the tab. Use this
   #   instead of the block content for complete control over the content's HTML.
   #
-  # @example Basic tab with title
+  # @loco_example Basic tab with title
   #   = tabs.with_tab(title: "Home")
   #
-  # @example Tab with custom title
+  # @loco_example Tab with custom title
   #   = tabs.with_tab do |tab|
   #     - tab.with_title do
   #       .flex.gap-2
   #         = hero_icon("home")
   #         Home
   #
-  # @example Tab with content
+  # @loco_example Tab with content
   #   = tabs.with_tab(title: "Content") do
   #     %p This is the tab's content
   #
-  # @example Tab with custom content
+  # @loco_example Tab with custom content
   #   = tabs.with_tab do |tab|
   #     - tab.with_custom_content(css: "tab-content p-4") do
   #       %p Custom content with custom wrapper
@@ -94,7 +104,7 @@ class Daisy::Navigation::TabsComponent < LocoMotion::BaseComponent
     #
     # @option kws css [String] Additional CSS classes for styling. Common
     #   options include:
-    #   - Size: `tab-lg`, `tab-md`, `tab-sm`, `tab-xs`
+    #   - Size: `tab-lg`, `tab-md` (default), `tab-sm`, `tab-xs`
     #   - Width: `w-full`, `!w-14`
     #   - Cursor: `cursor-pointer`, `!cursor-auto`
     #
@@ -112,9 +122,9 @@ class Daisy::Navigation::TabsComponent < LocoMotion::BaseComponent
 
     def before_render
       # Reset the name to the config option or the parent name if available
-      @name = config_option(:name, loco_parent&.name)
+      @name = config_option(:name, loco_parent.name)
 
-      if loco_parent&.radio?
+      if loco_parent.radio?
         setup_radio_button
       else
         setup_component
@@ -157,7 +167,7 @@ class Daisy::Navigation::TabsComponent < LocoMotion::BaseComponent
       # custom_content.to_s if custom_content?
 
       capture do
-        if loco_parent&.radio?
+        if loco_parent.radio?
           concat(part(:component))
         else
           concat(part(:component) { concat(title? ? title : @simple_title) })
@@ -187,8 +197,8 @@ class Daisy::Navigation::TabsComponent < LocoMotion::BaseComponent
   #
   # @option kws css [String] Additional CSS classes for styling. Common
   #   options include:
-  #   - Style: `tabs-bordered`, `tabs-lifted`
-  #   - Size: `tabs-lg`, `tabs-md`, `tabs-sm`, `tabs-xs`
+  #   - Style: `tabs-border`, `tabs-lift`
+  #   - Size: `tabs-xl`, `tabs-lg`, `tabs-md` (default), `tabs-sm`, `tabs-xs`
   #   - Width: `w-full`, `w-[500px]`
   #
   def initialize(*args, **kws, &block)

data/app/components/hero/icon_component.rb

@@ -8,19 +8,22 @@
 #   `:where()` pseudo-class to ensure our default classes have the lowest CSS
 #   specificity.
 #
-# @example Basic icon usage
+# @loco_example Basic icon usage
 #   = hero_icon("academic-cap")
 #   = hero_icon(icon: "adjustments-horizontal")
 #   %span.text-blue-500
 #     = hero_icon("archive-box")
 #
-# @example Customized icons
+# @loco_example Customized icons
 #   = hero_icon("no-symbol", css: "size-4 text-red-600")
 #   = hero_icon("arrow-trending-up", css: "size-10 text-green-600")
 #   = hero_icon("exclamation-triangle", css: "size-14 text-yellow-400 animate-pulse")
 #
 class Hero::IconComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  # Tippable concern provides tooltip functionality.
+  include LocoMotion::Concerns::TippableComponent
+
+  set_component_name :icon
 
   # Create a new instance of the IconComponent.
   #
@@ -41,17 +44,24 @@ class Hero::IconComponent < LocoMotion::BaseComponent
   #   - Color: `text-red-600`, `text-green-600`, `text-yellow-400`
   #   - Animation: `animate-pulse`, `animate-spin`
   #
+  # @option kws tip [String] The tooltip text to display when hovering over
+  #   the icon.
+  #
   def initialize(*args, **kws, &block)
     super
 
     # Accept either the :icon keyword argument or the first positional argument
     @icon = config_option(:icon, args[0])
     @variant = config_option(:variant)
+
+    @css = config_option(:css, "")
   end
 
   def before_render
+    super
+
     add_html(:component, { variant: @variant }) if @variant
-    add_css(:component, "[:where(&)]:size-5")
+    add_css(:component, "where:size-5") unless @css.include?("size-")
   end
 
   #
@@ -62,6 +72,6 @@ class Hero::IconComponent < LocoMotion::BaseComponent
   # additional whitespace gets added to the output.
   #
   def call
-    heroicon_tag(@icon, **rendered_html(:component))
+    heroicon(@icon, **rendered_html(:component))
   end
 end

data/app/helpers/daisy/form_builder_helper.rb

@@ -106,9 +106,14 @@ module Daisy
           render_daisy_component(Daisy::DataInput::TextAreaComponent, method, **options)
         end
 
+        # Add the daisy_cally_input method to FormBuilder
+        def daisy_cally_input(method, **options, &block)
+          render_daisy_component(Daisy::DataInput::CallyInputComponent, method, **options, &block)
+        end
+
         # Add the daisy_select method to FormBuilder
         def daisy_select(method, options: nil, option_groups: nil, placeholder: nil,
-                          options_css: nil, options_html: {}, **args, &block)
+                           options_css: nil, options_html: {}, **args, &block)
           # Extract the name from the form builder's object_name and method
           name = "#{object_name}[#{method}]"
 
@@ -132,9 +137,31 @@ module Daisy
           )
         end
 
+        # Add the daisy_filter method to FormBuilder
+        def daisy_filter(method, options: nil, **args, &block)
+          # Extract the name from the form builder's object_name and method
+          name = "#{object_name}[#{method}]"
+
+          # Get the current value from the object
+          value = object.try(method)
+
+          # Generate a default ID if not provided
+          id = args[:id] || "#{object_name}_#{method}"
+
+          # Build the component with the extracted form values and any additional options
+          @template.daisy_filter(
+            name: name,
+            id: id,
+            value: value,
+            options: options,
+            **args,
+            &block
+          )
+        end
+
         private
 
-        def render_daisy_component(component_class, method, **options)
+        def render_daisy_component(component_class, method, **options, &block)
           # Get the object name from the form builder
           object_name = @object_name.to_s
 
@@ -148,7 +175,7 @@ module Daisy
           options[:value] ||= object.try(method)
 
           # Render the component
-          @template.render component_class.new(**options)
+          @template.render(component_class.new(**options), &block)
         end
       end
     end

data/app/views/examples/daisy/data_input/filters.html.haml

@@ -0,0 +1,62 @@
+= doc_title(title: "Filters", comp: @comp) do |title|
+  :markdown
+    The Filter component is a group of radio buttons where choosing one option
+    hides the others and shows a reset button.
+
+= doc_example(title: "Basic Usage") do |doc|
+  - doc.with_description do
+    :markdown
+      The basic filter component takes an `options` array and uses a div element
+      with radio buttons styled as buttons.
+
+  = daisy_filter(name: "frameworks", options: ["Svelte", "Vue", "React"])
+
+
+= doc_example(title: "With Hash Options") do |doc|
+  - doc.with_description do
+    :markdown
+      You can also provide options as a hash with values and labels to customize
+      the display.
+
+  :ruby
+    options = [
+      { label: "Ruby", value: "ruby" },
+      { label: "JavaScript", value: "js" },
+      { label: "Python", value: "py" }
+    ]
+
+  = daisy_filter(name: "languages", options: options)
+
+
+= doc_example(title: "Custom Button Styles") do |doc|
+  - doc.with_description do
+    :markdown
+      You can customize the styles of the buttons and reset button using CSS classes.
+
+  = 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")
+
+
+= doc_example(title: "Filter Within Form") do |doc|
+  - doc.with_description do
+    :markdown
+      Filters can be used within forms to submit the selected value.
+
+  = form_with(url: "", method: :get, scope: :search, class: "mb-4") do |form|
+    = daisy_filter(name: "categories") do |f|
+      - f.with_option(label: "Category 1")
+      - f.with_option(label: "Category 2")
+    = form.submit "Apply Filters", class: "btn btn-primary mt-4"
+
+
+= doc_example(title: "Form Builder") do |doc|
+  - doc.with_description do
+    :markdown
+      You can also use the form builder to create a filter.
+
+  = form_with(url: "", method: :get, scope: :search, class: "mb-4") do |form|
+    = form.daisy_filter(:category, options: ["Technology", "Science", "Arts"])
+    = form.submit "Apply Filters", class: "btn btn-primary mt-4"

data/lib/hero.rb

@@ -1,4 +1,4 @@
-require "heroicons-rails"
+require "rails_heroicon"
 
 #
 # Parent module for all Hero components.

data/lib/loco_motion/base_component.rb

@@ -3,13 +3,17 @@ class LocoMotion::BaseComponent < ViewComponent::Base
   SELF_CLOSING_TAGS = %i[area base br col embed hr img input keygen link meta param source track wbr].freeze
   EMPTY_PART_IGNORED_TAGS = %i[textarea].freeze
 
-  include Heroicons::IconsHelper
+  include RailsHeroicon::Helper
 
   class_attribute :component_name
   class_attribute :component_parts, default: { component: {} }
   class_attribute :valid_modifiers, default: []
   class_attribute :valid_sizes, default: []
 
+  # Hooks for concerns to register initialization and setup methods
+  class_attribute :component_initializers, default: []
+  class_attribute :component_setups, default: []
+
   #
   # Return the current configuration of this component.
   #
@@ -31,6 +35,24 @@ class LocoMotion::BaseComponent < ViewComponent::Base
 
     # Create our config object
     @config = LocoMotion::ComponentConfig.new(self, **kws, &block)
+
+    # Run registered initializer hooks from concerns
+    self.class.component_initializers.each { |initializer| send(initializer) }
+
+    # Allow certain components to skip styling if they are being inherited
+    @skip_styling = config_option(:skip_styling, false)
+
+    # Allow manual passing of the loco parent on init if it's not auto-set
+    # via slots
+    @loco_parent = kws[:loco_parent] if kws.key?(:loco_parent)
+  end
+
+  #
+  # Run registered setup hooks from concerns before rendering.
+  #
+  def before_render
+    # Note: ViewComponent::Base does not define before_render, so no super call needed.
+    self.class.component_setups.each { |setup| send(setup) }
   end
 
   #
@@ -87,6 +109,26 @@ class LocoMotion::BaseComponent < ViewComponent::Base
     end
   end
 
+  #
+  # Register an instance method to be called during component initialization.
+  #
+  # @param method_name [Symbol] The name of the instance method to call.
+  #
+  def self.register_component_initializer(method_name)
+    # Ensure we don't modify the parent class's array directly
+    self.component_initializers += [method_name.to_sym]
+  end
+
+  #
+  # Register an instance method to be called before component rendering.
+  #
+  # @param method_name [Symbol] The name of the instance method to call.
+  #
+  def self.register_component_setup(method_name)
+    # Ensure we don't modify the parent class's array directly
+    self.component_setups += [method_name.to_sym]
+  end
+
   #
   # Defines a single modifier of this component. Modifiers control certain
   # rendering aspects of the component.
@@ -373,6 +415,7 @@ class LocoMotion::BaseComponent < ViewComponent::Base
       "@valid_sizes=#{valid_sizes.inspect}",
       "@config=#{@config.inspect}",
       "@component_parts=#{parts.inspect}",
+      "@loco_parent=#{loco_parent.inspect}",
     ].join(" ") + ">"
   end
 end

data/lib/loco_motion/component_config.rb

@@ -40,6 +40,7 @@ class LocoMotion::ComponentConfig
     @parts[:component][:user_tag_name] = kws[:tag_name] if kws[:tag_name]
     @parts[:component][:user_css].push(kws[:css]) if kws[:css]
     @parts[:component][:user_html].deep_merge!(kws[:html]) if kws[:html]
+    @parts[:component][:user_stimulus_controllers].push(kws[:controller]) if kws[:controller]
     @parts[:component][:user_stimulus_controllers].push(kws[:controllers]) if kws[:controllers]
   end
 

data/lib/loco_motion/concerns/iconable_component.rb

@@ -0,0 +1,134 @@
+require "active_support/concern"
+
+module LocoMotion
+  module Concerns
+    #
+    # The IconableComponent concern provides functionality for components that
+    # display icons. It supports both left and right icons and allows for
+    # customization of their CSS classes and HTML attributes.
+    #
+    module IconableComponent
+      extend ActiveSupport::Concern
+
+      included do |base|
+        base.register_component_initializer(:_initialize_iconable_component)
+        base.register_component_setup(:_setup_iconable_component)
+      end
+
+      protected
+
+      #
+      # Initialize icon-related options.
+      #
+      # @option kws icon       [String] The name of Hero icon to render. This is an
+      #   alias of `left_icon`.
+      #
+      # @option kws icon_css   [String] The CSS classes to apply to the icon. This
+      #   is an alias of `left_icon_css`.
+      #
+      # @option kws icon_html  [Hash] Additional HTML attributes to apply to the
+      #   icon. This is an alias of `left_icon_html`.
+      #
+      # @option kws left_icon  [String] The name of Hero icon to render to the
+      #   left of the content.
+      #
+      # @option kws left_icon_css  [String] The CSS classes to apply to the left
+      #   icon.
+      #
+      # @option kws left_icon_html [Hash] Additional HTML attributes to apply to
+      #   the left icon.
+      #
+      # @option kws right_icon [String] The name of Hero icon to render to the
+      #   right of the content.
+      #
+      # @option kws right_icon_css [String] The CSS classes to apply to the right
+      #   icon.
+      #
+      # @option kws right_icon_html [Hash] Additional HTML attributes to apply to
+      #   the right icon.
+      #
+      def _initialize_iconable_component
+        @icon = config_option(:icon)
+        @icon_css = config_option(:icon_css, default_icon_size)
+        @icon_options = config_option(:icon_options, {})
+        @icon_html = config_option(:icon_html, {})
+
+        @left_icon = config_option(:left_icon, @icon)
+        @left_icon_css = config_option(:left_icon_css, @icon_css)
+        @left_icon_options = config_option(:left_icon_options, @icon_html)
+        @left_icon_html = config_option(:left_icon_html, @icon_html)
+
+        @right_icon = config_option(:right_icon)
+        @right_icon_css = config_option(:right_icon_css, @icon_css)
+        @right_icon_options = config_option(:right_icon_options, {})
+        @right_icon_html = config_option(:right_icon_html, @icon_html)
+      end
+
+      #
+      # Configure CSS classes for a component with icons.
+      # This adds necessary classes for proper icon spacing and alignment.
+      #
+      def _setup_iconable_component
+        if @icon || @left_icon || @right_icon
+          add_css(:component, "where:inline-flex where:items-center where:gap-2")
+        end
+      end
+
+      def default_icon_size
+        "where:size-5"
+      end
+
+      public # Ensure these helper methods remain public
+
+      #
+      # Returns the HTML attributes for the left icon.
+      #
+      # @return [Hash] HTML attributes for the left icon
+      #
+      def left_icon_html
+        { class: @left_icon_css }.merge(@left_icon_html)
+      end
+
+      #
+      # Returns the HTML attributes for the right icon.
+      #
+      # @return [Hash] HTML attributes for the right icon
+      #
+      def right_icon_html
+        { class: @right_icon_css }.merge(@right_icon_html)
+      end
+
+      #
+      # Determines if any icons are present in the component.
+      #
+      # @return [Boolean] true if any icons are configured, false otherwise
+      #
+      def has_icons?
+        @left_icon.present? || @right_icon.present?
+      end
+
+      #
+      # Renders the left icon as a Hero::IconComponent instance.
+      #
+      # @return [String] The rendered HTML for the icon
+      #
+      def render_left_icon
+        return unless @left_icon.present?
+
+        hero_icon(@left_icon, css: @left_icon_css, html: @left_icon_html, **@left_icon_options)
+      end
+      alias_method :render_icon, :render_left_icon
+
+      #
+      # Renders the right icon using a hero icon.
+      #
+      # @return [String] The rendered HTML for the icon
+      #
+      def render_right_icon
+        return unless @right_icon.present?
+
+        hero_icon(@right_icon, css: @right_icon_css, html: @right_icon_html, **@right_icon_options)
+      end
+    end
+  end
+end

data/lib/loco_motion/concerns/labelable_component.rb

@@ -0,0 +1,142 @@
+# frozen_string_literal: true
+
+module LocoMotion
+  module Concerns
+    #
+    # Can be included in relevant components to add labeling functionality.
+    # This adds support for start, end, and floating labels that can either be
+    # provided as plain text or customized via slots.
+    #
+    # @loco_example Basic usage with a start label
+    #   class MyInputComponent < LocoMotion::BaseComponent
+    #     include LocoMotion::Concerns::LabelableComponent
+    #     # component implementation ...
+    #   end
+    #
+    #   = daisy_my_input(name: "username", start: "Username")
+    #
+    # @loco_example With an end label (useful for checkboxes/radios)
+    #   = daisy_checkbox(name: "terms", end: "I agree to the terms")
+    #
+    # @loco_example With a floating label
+    #   = daisy_text_input(name: "email", floating: "Email Address")
+    #
+    # @loco_example Using a custom slot for the label
+    #   = daisy_text_input(name: "password") do |input|
+    #     - input.with_floating do
+    #       Password
+    #       %span.text-red-500 *
+    #
+    module LabelableComponent
+      extend ActiveSupport::Concern
+
+      #
+      # Called when the module is included in a component class.
+      # Sets up the necessary parts & slots for custom label content.
+      #
+      included do
+        define_parts :label_wrapper, :start, :end, :floating
+
+        renders_one :start
+        renders_one :end
+        renders_one :floating
+
+        # NOTE: We DO NOT define attr_reader properties here because it can
+        # cause confusion / problems with the parts and slots.
+      end
+
+      #
+      # Initializes the component and sets up the label options.
+      #
+      # @param instance_args [Array] Positional arguments passed to the component
+      #
+      # @param instance_kws [Hash] Keyword arguments passed to the component
+      #
+      # @option instance_kws [String, nil] :start Text to display in the start
+      #   label position
+      #
+      # @option instance_kws [String, nil] :end Text to display in the end
+      #   label position
+      #
+      # @option instance_kws [String, nil] :floating Text to display in the
+      #   floating label position
+      #
+      # @option instance_kws [String, nil] :placeholder The input's placeholder
+      #   text.  If not provided and `floating_placeholder` is set, it will use
+      #   that value.
+      #
+      # @option instance_kws [String, nil] :floating_placeholder Text to use for
+      #   both the floating label and the input placeholder. This is a
+      #   convenience option that sets both the `floating` and `placeholder`
+      #   options to the same value. Both `floating` and `placeholder` take
+      #   precedence over `floating_placeholder`.
+      #
+      # @param instance_block [Proc] Block passed to the component for rendering
+      #   custom content
+      #
+      def initialize(*instance_args, **instance_kws, &instance_block)
+        super(*instance_args, **instance_kws, &instance_block)
+
+        @floating_placeholder = config_option(:floating_placeholder)
+
+        @start = config_option(:start)
+        @end = config_option(:end)
+        @floating = config_option(:floating, @floating_placeholder)
+        @placeholder = config_option(:placeholder, @floating_placeholder)
+      end
+
+      #
+      # Sets up the tag names for the label parts before rendering the component.
+      # This method is called automatically during the component rendering
+      # lifecycle.
+      #
+      # Note that CSS classes for labels must be handled by the implementing
+      # component since requirements differ for each type of input component.
+      #
+      def before_render
+        super
+
+        set_tag_name(:label_wrapper, :label)
+        set_tag_name(:start, :span)
+        set_tag_name(:end, :span)
+        set_tag_name(:floating, :span)
+      end
+
+      #
+      # Checks if any type of label is present.
+      #
+      # @return [Boolean] true if any label is present, false otherwise
+      #
+      def has_any_label?
+        has_start_label? || has_end_label? || has_floating_label?
+      end
+
+      #
+      # Checks if a start label is present.
+      #
+      # @return [Boolean] true if start label is present, false otherwise
+      #
+      def has_start_label?
+        start? || @start || config_option(:start).present?
+      end
+
+      #
+      # Checks if an end label is present.
+      #
+      # @return [Boolean] true if end label is present, false otherwise
+      #
+      def has_end_label?
+        end? || @end || config_option(:end).present?
+      end
+
+      #
+      # Checks if a floating label is present.
+      #
+      # @return [Boolean] true if floating label is present, false otherwise
+      #
+      def has_floating_label?
+        floating? || @floating || config_option(:floating).present?
+      end
+    end
+  end
+end