loco_motion-rails 0.0.8 → 0.5.0

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

@@ -1,16 +1,21 @@
+# frozen_string_literal: true
+
 #
 # Creates a menu component for displaying a list of items, optionally with group titles.
 #
+# @note Vertical menus no longer have a default width. Use `w-full` or other width
+#   classes if you want to control the width.
+#
 # @slot items+ {Daisy::Navigation::MenuItemComponent} The menu items to display.
 #
-# @example Basic menu with items
+# @loco_example Basic menu with items
 #   = daisy_menu do |menu|
 #     - menu.with_item do
 #       = link_to "Item 1", "#"
 #     - menu.with_item do
 #       = link_to "Item 2", "#"
 #
-# @example Menu with group titles
+# @loco_example Menu with group titles
 #   = daisy_menu do |menu|
 #     - menu.with_item(title: "Group 1") do
 #       = link_to "Item 1-1", "#"
@@ -19,10 +24,10 @@
 #       = link_to "Item 2-1", "#"
 #       = link_to "Item 2-2", "#"
 #
-# @example Menu with disabled items
+# @loco_example Menu with disabled items
 #   = daisy_menu do |menu|
 #     - menu.with_item do
-#       = link_to "Active Item", "#"
+#       = link_to "Active Item", "#", class: "menu-active"
 #     - menu.with_item(disabled: true) do
 #       Disabled Item
 #
@@ -33,15 +38,15 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
   #
   # @part title The title element for the menu item.
   #
-  # @example Basic menu item
+  # @loco_example Basic menu item
   #   = menu.with_item do
   #     = link_to "Item", "#"
   #
-  # @example Menu item with title
+  # @loco_example Menu item with title
   #   = menu.with_item(title: "Group") do
   #     = link_to "Item", "#"
   #
-  # @example Disabled menu item
+  # @loco_example Disabled menu item
   #   = menu.with_item(disabled: true) do
   #     = link_to "Item", "#"
   #
@@ -63,6 +68,7 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
     #   options include:
     #   - Text: `text-sm`, `text-base-content`
     #   - Spacing: `mt-4`, `mb-2`
+    #   - State: `menu-active`, `menu-focus`, `menu-disabled`
     #
     def initialize(*args, **kws)
       super(**kws)
@@ -77,7 +83,7 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
     #
     def before_render
       set_tag_name(:component, :li)
-      add_css(:component, "disabled pointer-events-none") if @disabled
+      add_css(:component, "menu-disabled pointer-events-none") if @disabled
 
       set_tag_name(:title, :h2)
       add_css(:title, "menu-title")
@@ -102,7 +108,7 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
   #
   # @option kws css [String] Additional CSS classes for styling. Common
   #   options include:
-  #   - Size: `w-56`, `max-w-xs`
+  #   - Layout: `menu-horizontal`, `w-full`, `w-56`
   #   - Background: `bg-base-100`, `bg-neutral`
   #   - Border: `border`, `rounded-box`
   #   - Shadow: `shadow`, `shadow-lg`

data/app/components/daisy/navigation/navbar_component.html.haml

@@ -1,4 +1,4 @@
 = part(:component) do
   = start if start?
   = center if center?
-  = end_content if end?
+  = self.send(:end) if end?

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

@@ -11,7 +11,7 @@
 # @slot end {LocoMotion::BasicComponent} The right section of the navbar.
 #   Automatically gets the `navbar-end` CSS class.
 #
-# @example Basic navbar with logo and GitHub link
+# @loco_example Basic navbar with logo and GitHub link
 #   = daisy_navbar(css: "bg-base-100") do |navbar|
 #     - navbar.with_start do
 #       = image_tag("logo.png", class: "h-8")
@@ -20,7 +20,7 @@
 #     - navbar.with_end do
 #       = link_to "GitHub", "https://github.com", target: "_blank"
 #
-# @example Navbar with all sections and dropdown
+# @loco_example Navbar with all sections and dropdown
 #   = daisy_navbar(css: "bg-base-100") do |navbar|
 #     - navbar.with_start do
 #       %span.text-lg.italic Brand
@@ -59,15 +59,4 @@ class Daisy::Navigation::NavbarComponent < LocoMotion::BaseComponent
   def before_render
     add_css(:component, "navbar")
   end
-
-  private
-
-  # Returns the end section content.
-  #
-  # Since `end` is a reserved word in Ruby, we need to use a different method
-  # name in the template.
-  #
-  def end_content
-    self.end
-  end
 end

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

@@ -8,21 +8,21 @@
 # @slot steps+ {Daisy::Navigation::StepsComponent::StepComponent} The individual
 #   steps to display.
 #
-# @example Basic steps with progress
+# @loco_example Basic steps with progress
 #   = daisy_steps do |steps|
 #     - steps.with_step(title: "Write Code", css: "step-primary")
 #     - steps.with_step(title: "Release Code", css: "step-primary")
 #     - steps.with_step(title: "Profit", css: "step-secondary")
 #     - steps.with_step(title: "Rule the World")
 #
-# @example Vertical steps
+# @loco_example Vertical steps
 #   = daisy_steps(css: "steps-vertical") do |steps|
 #     - steps.with_step(title: "Write Code", css: "step-primary")
 #     - steps.with_step(title: "Release Code", css: "step-primary")
 #     - steps.with_step(title: "Profit", css: "step-secondary")
 #     - steps.with_step(title: "Rule the World")
 #
-# @example Custom step content
+# @loco_example Custom step content
 #   = daisy_steps do |steps|
 #     - steps.with_step(number: "AB")
 #     - steps.with_step(number: "★")
@@ -33,13 +33,13 @@ class Daisy::Navigation::StepsComponent < LocoMotion::BaseComponent
   #
   # A step within a StepsComponent.
   #
-  # @example Basic step with title
+  # @loco_example Basic step with title
   #   = steps.with_step(title: "Step 1")
   #
-  # @example Step with custom number
+  # @loco_example Step with custom number
   #   = steps.with_step(number: "★", title: "Special Step")
   #
-  # @example Step with custom content
+  # @loco_example Step with custom content
   #   = steps.with_step(number: "1") do
   #     .flex.gap-2
   #       = hero_icon("check")

data/app/components/daisy/navigation/tabs_component.html.haml

@@ -1,4 +1,3 @@
 = part(:component) do
   - tabs.each do |tab|
-    - tab.set_loco_parent(component_ref)
     = tab

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

@@ -0,0 +1,186 @@
+# frozen_string_literal: true
+
+module Daisy
+  module FormBuilderHelper
+    # Extends ActionView::Helpers::FormBuilder with Daisy UI component methods
+    def self.included(base)
+      base.class_eval do
+        # Add the daisy_checkbox method to FormBuilder
+        def daisy_checkbox(name, **options)
+          # Get the object name from the form builder
+          object_name = @object_name.to_s
+
+          # Create a unique ID if not provided
+          options[:id] ||= "#{object_name}_#{name}"
+
+          # Set the name attribute
+          options[:name] = "#{object_name}[#{name}]"
+
+          # Pass the form builder's object to the component if it exists
+          if @object && @object.respond_to?(name) && !options.key?(:checked)
+            options[:checked] = @object.send(name)
+          end
+
+          # Render the checkbox component
+          @template.daisy_checkbox(**options)
+        end
+
+        # Add the daisy_toggle method to FormBuilder
+        def daisy_toggle(name, **options)
+          # Get the object name from the form builder
+          object_name = @object_name.to_s
+
+          # Create a unique ID if not provided
+          options[:id] ||= "#{object_name}_#{name}"
+
+          # Set the name attribute
+          options[:name] = "#{object_name}[#{name}]"
+
+          # Pass the form builder's object to the component if it exists
+          if @object && @object.respond_to?(name) && !options.key?(:checked)
+            options[:checked] = @object.send(name)
+          end
+
+          # Render the toggle component
+          @template.daisy_toggle(**options)
+        end
+
+        # Add the daisy_radio method to FormBuilder
+        def daisy_radio(name, **options)
+          # Get the object name from the form builder
+          object_name = @object_name.to_s
+
+          # Create a unique ID if not provided
+          value = options[:value].to_s
+          options[:id] ||= "#{object_name}_#{name}_#{value}"
+
+          # Set the name attribute
+          options[:name] = "#{object_name}[#{name}]"
+
+          # Pass the form builder's object to the component if it exists
+          if @object && @object.respond_to?(name) && !options.key?(:checked)
+            options[:checked] = @object.send(name).to_s == value
+          end
+
+          # Render the radio button component
+          @template.daisy_radio(**options)
+        end
+
+        # Add the daisy_label method to FormBuilder
+        def daisy_label(name, text = nil, **options, &block)
+          # Get the object name from the form builder
+          object_name = @object_name.to_s
+
+          # Create a for_id based on the name if not provided
+          options[:for] ||= "#{object_name}_#{name}"
+
+          # Add a humanized title from the name if not provided
+          options[:title] ||= text || name.to_s.humanize
+
+          # Render the label component
+          @template.daisy_label(**options, &block)
+        end
+
+        # Add the daisy_range method to FormBuilder
+        def daisy_range(method, **options)
+          render_daisy_component(Daisy::DataInput::RangeComponent, method, **options)
+        end
+
+        # Add the daisy_rating method to FormBuilder
+        def daisy_rating(method, **options)
+          render_daisy_component(Daisy::DataInput::RatingComponent, method, **options)
+        end
+
+        # Add the daisy_file_input method to FormBuilder
+        def daisy_file_input(method, **options)
+          render_daisy_component(Daisy::DataInput::FileInputComponent, method, **options)
+        end
+
+        # Add the daisy_text_input method to FormBuilder
+        def daisy_text_input(method, **options)
+          render_daisy_component(Daisy::DataInput::TextInputComponent, method, **options)
+        end
+
+        # Add the daisy_text_area method to FormBuilder
+        def daisy_text_area(method, **options)
+          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)
+          # 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_select(
+            name: name,
+            id: id,
+            value: value,
+            options: options,
+            options_css: options_css,
+            options_html: options_html,
+            placeholder: placeholder,
+            **args,
+            &block
+          )
+        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, &block)
+          # Get the object name from the form builder
+          object_name = @object_name.to_s
+
+          # Create a unique ID if not provided
+          options[:id] ||= "#{object_name}_#{method}"
+
+          # Set the name attribute
+          options[:name] ||= "#{object_name}[#{method}]"
+
+          # Pass the form builder's object to the component if it exists
+          options[:value] ||= object.try(method)
+
+          # Render the component
+          @template.render(component_class.new(**options), &block)
+        end
+      end
+    end
+  end
+end
+
+# Include the FormBuilderHelper in ActionView::Helpers::FormBuilder
+ActionView::Helpers::FormBuilder.include(Daisy::FormBuilderHelper)

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/daisy.rb

@@ -22,6 +22,11 @@ module Daisy
   #
   module Feedback; end
 
+  #
+  # Holds all Data Input-type components.
+  #
+  module DataInput; end
+
   #
   # Holds all Layout-type components.
   #

data/lib/hero.rb

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