daisy_components 0.1.0

data/app/components/daisy_ui/actions/dropdown.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Dropdown component implementing DaisyUI's dropdown styles
+  #
+  # @example Basic usage with text trigger
+  #   <%= render(DropdownComponent.new) do |d| %>
+  #     <% d.with_trigger(text: "Click me") %>
+  #     <% d.with_item(href: "#") { "Item 1" } %>
+  #     <% d.with_item(href: "#") { "Item 2" } %>
+  #   <% end %>
+  #
+  # @example With custom trigger content
+  #   <%= render(DropdownComponent.new) do |d| %>
+  #     <% d.with_trigger do %>
+  #       <%= helpers.cog_icon("h-5 w-5") %> Settings
+  #     <% end %>
+  #     <% d.with_item(href: "#") { "Item 1" } %>
+  #     <% d.with_item(href: "#") { "Item 2" } %>
+  #     <% d.with_divider %>
+  #     <% d.with_item(href: "#", class: "text-error") { "Delete" } %>
+  #   <% end %>
+  class Dropdown < BaseComponent
+    renders_one :trigger, lambda { |**kwargs, &block|
+      return block if block
+
+      defaults = { tag_type: :div, tabindex: '0', role: :button, class: 'm-1' }
+      args = defaults.merge(kwargs)
+      render(Button.new(**args))
+    }
+
+    renders_many :items, types: {
+      item: { renders: DaisyUI::Item, as: :item },
+      divider: { renders: DaisyUI::Divider, as: :divider },
+      title: { renders: DaisyUI::Title, as: :title }
+    }
+
+    renders_one :custom_content
+
+    # Available dropdown positions from DaisyUI
+    POSITIONS = {
+      top: 'dropdown-top',
+      top_end: 'dropdown-top-end',
+      top_center: 'dropdown-top-center',
+      bottom: 'dropdown-bottom',
+      bottom_end: 'dropdown-bottom-end',
+      bottom_center: 'dropdown-bottom-center',
+      left: 'dropdown-left',
+      left_end: 'dropdown-left-end',
+      left_center: 'dropdown-left-center',
+      right: 'dropdown-right',
+      right_end: 'dropdown-right-end',
+      right_center: 'dropdown-right-center'
+    }.freeze
+
+    ALIGNMENTS = {
+      start: 'dropdown-start',
+      end: 'dropdown-end',
+      center: 'dropdown-center'
+    }.freeze
+
+    # @param position [Symbol] Position of the dropdown content relative to the trigger
+    # @param hover [Boolean, String] When true or 'content', opens the dropdown on hover instead of click
+    # @param open [Boolean] When true, forces the dropdown to stay open
+    # @param align [Symbol] When :start, :end, or :center, aligns the dropdown content
+    # @param menu_class [String] Additional classes for the menu
+    # @param menu_tabindex [Integer, nil] Tabindex for the menu (defaults to 0)
+    # @param system_arguments [Hash] Additional HTML attributes
+    def initialize(position: nil, hover: false, open: false, align: nil,
+                   menu_class: nil, menu_tabindex: 0, **system_arguments)
+      @position = build_argument(position, POSITIONS, 'position')
+      @hover = hover
+      @open = open
+      @align = build_argument(align, ALIGNMENTS, 'align')
+      @menu_class = menu_class
+      @menu_tabindex = menu_tabindex
+      super(**system_arguments)
+    end
+
+    def call
+      tag.div(**dropdown_arguments) do
+        safe_join([
+          trigger,
+          render_menu
+        ].compact)
+      end
+    end
+
+    private
+
+    def dropdown_arguments
+      {
+        class: computed_dropdown_classes,
+        **system_arguments.except(:class)
+      }.compact
+    end
+
+    def computed_dropdown_classes
+      modifiers = ['dropdown']
+      modifiers << @position if @position
+      modifiers << 'dropdown-hover' if @hover == true
+      modifiers << 'dropdown-hover-content' if @hover == 'content'
+      modifiers << 'dropdown-open' if @open
+      modifiers << @align if @align
+
+      class_names(modifiers, system_arguments[:class])
+    end
+
+    def render_menu
+      return custom_content if custom_content
+      return unless items.any?
+
+      tag.ul(tabindex: @menu_tabindex, class: computed_menu_classes) do
+        safe_join(items)
+      end
+    end
+
+    def computed_menu_classes
+      class_names(
+        'dropdown-content menu',
+        @menu_class || 'bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm'
+      )
+    end
+  end
+end

data/app/components/daisy_ui/actions/swap.rb

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Swap component implementing DaisyUI's swap styles
+  #
+  # @example Basic usage
+  #   <%= render(SwapComponent.new(
+  #     states: { on: 'ON', off: 'OFF' }
+  #   )) %>
+  #
+  # @example Theme toggle with icons
+  #   <%= render(SwapComponent.new(
+  #     states: {
+  #       on: helpers.sun_icon('h-6 w-6'),
+  #       off: helpers.moon_icon('h-6 w-6')
+  #     },
+  #     button: true,
+  #     effect: :rotate
+  #   )) %>
+  class Swap < DaisyUI::BaseComponent
+    # Available variants from DaisyUI
+    VARIANTS = {
+      primary: 'text-primary',
+      secondary: 'text-secondary',
+      accent: 'text-accent',
+      info: 'text-info',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      ghost: 'text-base-content',
+      neutral: 'text-neutral'
+    }.freeze
+
+    # Available sizes
+    SIZES = {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg'
+    }.freeze
+
+    # Available effects
+    EFFECTS = {
+      rotate: 'swap-rotate',
+      flip: 'swap-flip',
+      flip_active: 'swap-flip-active'
+    }.freeze
+
+    # @param states [Hash] Required hash with :on and :off states content
+    # @param value [Boolean] Initial state of the swap
+    # @param variant [Symbol] Color variant (primary/secondary/accent/etc)
+    # @param size [Symbol] Size variant (xs/sm/md/lg)
+    # @param effect [Symbol] Animation effect (rotate/flip/flip-active)
+    # @param active [Boolean] When true, gives the swap an active appearance
+    # @param button [Boolean] When true, renders as a button
+    # @param system_arguments [Hash] Additional HTML attributes
+    def initialize(states:, value: false, variant: nil, size: nil, effect: nil, active: false, button: false,
+                   **system_arguments)
+      @states = validate_states!(states)
+      @value = ActiveModel::Type::Boolean.new.cast(value)
+      @variant = build_argument(variant, VARIANTS, 'variant')
+      @size = build_argument(size, SIZES, 'size')
+      @effect = build_argument(effect, EFFECTS, 'effect')
+      @active = active
+      @button = button
+      super(**system_arguments)
+    end
+
+    def call
+      tag.label(**label_html_attributes) do
+        safe_join([
+          tag.input(**input_html_attributes),
+          render_state(:on),
+          render_state(:off)
+        ].compact)
+      end
+    end
+
+    private
+
+    def validate_states!(states)
+      raise ArgumentError, 'states cannot be nil' if states.nil?
+      raise ArgumentError, 'states cannot be empty' if states.empty?
+      raise ArgumentError, 'states must have both :on and :off keys' unless states.key?(:on) && states.key?(:off)
+
+      states
+    end
+
+    def input_html_attributes
+      {
+        type: 'checkbox',
+        # class: 'hidden',
+        # role: 'switch',
+        checked: @value ? 'checked' : nil
+      }.compact
+    end
+
+    def label_html_attributes
+      {
+        class: computed_classes,
+        **system_arguments.slice(:aria)
+      }.compact
+    end
+
+    def computed_classes
+      modifiers = ['swap']
+      modifiers << @effect if @effect
+      modifiers << 'swap-active' if @active
+      modifiers << 'btn btn-ghost btn-circle' if @button
+      modifiers << @size if @size
+      modifiers << @variant if @variant
+
+      class_names(modifiers, system_arguments[:class])
+    end
+
+    def render_state(state)
+      return unless @states[state]
+
+      tag.div(@states[state], class: class_names(
+        "swap-#{state}",
+        { 'swap-on': state == :on },
+        { 'swap-off': state == :off }
+      ))
+    end
+  end
+end

data/app/components/daisy_ui/base_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  class BaseComponent < ViewComponent::Base
+    def initialize(classes: nil, **system_arguments)
+      super
+      @classes = classes
+      @system_arguments = system_arguments
+    end
+
+    private
+
+    def build_argument(key, valid_values, attr_name)
+      return unless key
+
+      class_name = valid_values[key.to_sym]
+
+      return class_name if class_name
+
+      raise ArgumentError, "Invalid #{attr_name}: #{key}. Must be one of: #{valid_values.keys.join(', ')}"
+    end
+
+    def classes
+      class_names(@classes)
+    end
+
+    attr_reader :system_arguments
+  end
+end

data/app/components/daisy_ui/data_display/accordion.rb

@@ -0,0 +1,128 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Renders an accordion component that allows users to show and hide content sections.
+  #
+  # @example Basic usage
+  #   <%= render(AccordionComponent.new) do |component| %>
+  #     <% component.with_item(title: "Item 1") do %>
+  #       Content for item 1
+  #     <% end %>
+  #     <% component.with_item(title: "Item 2") do %>
+  #       Content for item 2
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example With arrow indicator
+  #   <%= render(AccordionComponent.new(indicator: :arrow)) do |component| %>
+  #     <% component.with_item(title: "Item 1") do %>
+  #       Content for item 1
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example With plus/minus indicator
+  #   <%= render(AccordionComponent.new(indicator: :plus)) do |component| %>
+  #     <% component.with_item(title: "Item 1") do %>
+  #       Content for item 1
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example Radio group behavior
+  #   <%= render(AccordionComponent.new(input_type: :radio)) do |component| %>
+  #     <% component.with_item(title: "Item 1", checked: true) do %>
+  #       Content for item 1
+  #     <% end %>
+  #     <% component.with_item(title: "Item 2") do %>
+  #       Content for item 2
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example Joined items without gaps
+  #   <%= render(AccordionComponent.new(join: true)) do |component| %>
+  #     <% component.with_item(title: "Item 1") do %>
+  #       Content for item 1
+  #     <% end %>
+  #     <% component.with_item(title: "Item 2") do %>
+  #       Content for item 2
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example Custom colors
+  #   <%= render(AccordionComponent.new(
+  #     bg_color: "bg-primary",
+  #     text_color: "text-primary-content",
+  #     border_color: "border-primary-focus"
+  #   )) do |component| %>
+  #     <% component.with_item(title: "Item 1") do %>
+  #       Content for item 1
+  #     <% end %>
+  #   <% end %>
+  class Accordion < BaseComponent
+    INDICATORS = %i[arrow plus].freeze
+    INPUT_TYPES = %i[radio checkbox].freeze
+
+    renders_many :items, lambda { |title:, name: nil, checked: false|
+      AccordionItem.new(
+        title:,
+        name: name || @input_name,
+        checked:,
+        indicator: @indicator,
+        input_type: @input_type,
+        join: @join,
+        bg_color: @join ? nil : @bg_color,
+        text_color: @text_color,
+        border_color: @border_color,
+        padding: @padding,
+        **@system_arguments
+      )
+    }
+
+    attr_reader :join, :indicator, :input_type, :bg_color, :text_color, :border_color, :padding
+
+    # @param join [Boolean] Join items together without gaps
+    # @param indicator [Symbol] Type of indicator to show (:arrow, :plus)
+    # @param input_type [Symbol] Type of input to use (:radio, :checkbox)
+    # @param bg_color [String] Background color class
+    # @param text_color [String] Text color class
+    # @param border_color [String] Border color class
+    # @param padding [String] Padding class
+    # @param name [String, nil] Name for radio/checkbox inputs (auto-generated if nil)
+    # @param system_arguments [Hash] Additional HTML attributes
+    def initialize(join: false, indicator: nil, input_type: :checkbox,
+                   bg_color: nil, text_color: nil, border_color: nil,
+                   padding: nil, name: nil, **system_arguments)
+      @join = join
+      @indicator = indicator
+      @input_type = input_type
+      @bg_color = bg_color || 'bg-base-100'
+      @text_color = text_color
+      @border_color = border_color || 'border border-base-300'
+      @padding = padding
+      @input_name = name || "accordion-#{SecureRandom.uuid}"
+      super(**system_arguments)
+    end
+
+    def call
+      return safe_join(items || []) unless @join
+
+      tag.div(**html_attributes) do
+        safe_join(items || [])
+      end
+    end
+
+    private
+
+    def html_attributes
+      system_arguments.merge(
+        class: computed_classes
+      )
+    end
+
+    def computed_classes
+      modifiers = ['join join-vertical']
+      modifiers << @bg_color if @bg_color
+
+      class_names(modifiers, system_arguments[:class])
+    end
+  end
+end

data/app/components/daisy_ui/data_display/accordion_item.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Renders a single accordion item within an AccordionComponent.
+  #
+  # @example Basic usage
+  #   <%= render(AccordionItemComponent.new(title: "Item 1")) do %>
+  #     Content for item 1
+  #   <% end %>
+  #
+  # @example With arrow indicator
+  #   <%= render(AccordionItemComponent.new(
+  #     title: "Item 1",
+  #     indicator: :arrow
+  #   )) do %>
+  #     Content for item 1
+  #   <% end %>
+  #
+  # @example With plus/minus indicator
+  #   <%= render(AccordionItemComponent.new(
+  #     title: "Item 1",
+  #     indicator: :plus
+  #   )) do %>
+  #     Content for item 1
+  #   <% end %>
+  #
+  # @example As part of a radio group
+  #   <%= render(AccordionItemComponent.new(
+  #     title: "Item 1",
+  #     input_type: :radio,
+  #     name: "group1",
+  #     checked: true
+  #   )) do %>
+  #     Content for item 1
+  #   <% end %>
+  #
+  # @example With custom colors
+  #   <%= render(AccordionItemComponent.new(
+  #     title: "Item 1",
+  #     bg_color: "bg-primary",
+  #     text_color: "text-primary-content",
+  #     border_color: "border-primary-focus"
+  #   )) do %>
+  #     Content for item 1
+  #   <% end %>
+  class AccordionItem < BaseComponent
+    INDICATORS = %i[arrow plus].freeze
+    INPUT_TYPES = %i[radio checkbox].freeze
+
+    # @param title [String] The title text for the accordion item
+    # @param name [String] Input name for radio/checkbox behavior
+    # @param indicator [Symbol] Type of indicator to show (:arrow, :plus)
+    # @param input_type [Symbol] Type of input to use (:radio, :checkbox)
+    # @param checked [Boolean] Whether the item is initially expanded
+    # @param join [Boolean] Style for joined items
+    # @param bg_color [String] Background color class
+    # @param text_color [String] Text color class
+    # @param border_color [String] Border color class
+    # @param padding [String] Padding class
+    # @param system_arguments [Hash] Additional HTML attributes
+    def initialize(title:, name:, text: nil, checked: false, indicator: nil,
+                   input_type: :checkbox, join: false, bg_color: nil, text_color: nil,
+                   border_color: nil, padding: nil, **system_arguments)
+      @title = title
+      @name = name
+      @text = text
+      @checked = checked
+      @indicator = indicator
+      @input_type = input_type
+      @join = join
+      @bg_color = bg_color
+      @text_color = text_color
+      @border_color = border_color
+      @padding = padding
+      super(**system_arguments)
+    end
+
+    def call
+      tag.div(**html_attributes) do
+        safe_join([render_input, render_title, render_content].compact)
+      end
+    end
+
+    private
+
+    def html_attributes
+      system_arguments.merge(
+        class: computed_classes
+      )
+    end
+
+    def computed_classes
+      modifiers = ['collapse']
+      modifiers << "collapse-#{@indicator}" if @indicator
+      modifiers << 'join-item' if @join
+      modifiers << @bg_color if @bg_color
+      modifiers << @border_color if @border_color
+      modifiers << @padding if @padding
+
+      class_names(modifiers, system_arguments[:class])
+    end
+
+    def render_input
+      tag.input(
+        type: @input_type,
+        name: @name,
+        checked: @checked
+      )
+    end
+
+    def render_title
+      tag.div(class: class_names('collapse-title font-semibold', @text_color)) do
+        @title
+      end
+    end
+
+    def render_content
+      tag.div(class: class_names('collapse-content text-sm', @text_color)) { content || @text }
+    end
+  end
+end

data/app/components/daisy_ui/data_display/avatar.rb

@@ -0,0 +1,131 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Avatar component implementing DaisyUI's avatar styles
+  #
+  # @example Basic usage with image
+  #   <%= render(AvatarComponent.new(img_src: "user.jpg", img_alt: "User")) %>
+  #
+  # @example With placeholder text
+  #   <%= render(AvatarComponent.new(placeholder_text: "JD")) %>
+  #
+  # @example Custom size
+  #   <%= render(AvatarComponent.new(size: :w32, img_src: "user.jpg")) %>
+  #
+  # @example Different shapes
+  #   <%= render(AvatarComponent.new(
+  #     img_src: "user.jpg",
+  #     shape: :squircle
+  #   )) %>
+  #
+  # @example With online status
+  #   <%= render(AvatarComponent.new(
+  #     img_src: "user.jpg",
+  #     status: :online
+  #   )) %>
+  #
+  # @example With custom placeholder content
+  #   <%= render(AvatarComponent.new) do |c|
+  #     c.with_placeholder do
+  #       helpers.user_icon
+  #     end
+  #   end %>
+  class Avatar < DaisyUI::BaseComponent
+    # Available avatar sizes in pixels
+    SIZES = {
+      w8: 'w-8',
+      w12: 'w-12',
+      w10: 'w-10',
+      w16: 'w-16',
+      w20: 'w-20',
+      w24: 'w-24',
+      w32: 'w-32'
+    }.freeze
+
+    # Text sizes mapped to avatar sizes
+    TEXT_SIZES = {
+      w8: 'text-xs',
+      w12: nil, # default text size
+      w16: 'text-xl',
+      w20: 'text-2xl',
+      w24: 'text-3xl',
+      w32: 'text-4xl'
+    }.freeze
+
+    # Available avatar shapes
+    SHAPES = {
+      circle: 'rounded-full',
+      squircle: 'mask mask-squircle',
+      hexagon: 'mask mask-hexagon',
+      triangle: 'mask mask-triangle'
+    }.freeze
+
+    # Available status indicators
+    STATUSES = {
+      online: 'avatar-online',
+      offline: 'avatar-offline'
+    }.freeze
+
+    # @param size [Symbol] Size of the avatar (w8/w12/w16/w20/w24/w32)
+    # @param shape [Symbol] Shape of the avatar (circle/squircle/hexagon/triangle)
+    # @param status [Symbol] Status indicator (online/offline)
+    # @param img_src [String] URL of the avatar image
+    # @param img_alt [String] Alt text for the avatar image
+    # @param placeholder_text [String] Text to show when no image is provided
+    # @param system_arguments [Hash] Additional HTML attributes
+    def initialize(size: nil, shape: nil, status: nil, img_src: nil, img_alt: nil, placeholder_text: nil,
+                   inner_class: nil,
+                   **system_arguments)
+      @size = build_argument(size, SIZES, 'size')
+      @shape = build_argument(shape, SHAPES, 'shape')
+      @status = build_argument(status, STATUSES, 'status')
+      @img_src = img_src
+      @img_alt = img_alt
+      @placeholder_text = placeholder_text
+      @size_key = size # Keep original size key for text size lookup
+      @inner_class = inner_class
+      super(**system_arguments)
+    end
+
+    def call
+      tag.div(**html_attributes) do
+        tag.div(class: inner_classes) do
+          if @img_src.present?
+            tag.img(src: @img_src, alt: @img_alt)
+          elsif @placeholder_text.present?
+            tag.span(@placeholder_text, class: text_size_class)
+          end
+        end
+      end
+    end
+
+    private
+
+    def text_size_class
+      return unless @size_key
+
+      TEXT_SIZES[@size_key]
+    end
+
+    def default_classes
+      modifiers = ['avatar']
+      modifiers << @status
+      modifiers << 'avatar-placeholder' if @placeholder_text.present?
+      class_names(modifiers, system_arguments[:class])
+    end
+
+    def inner_classes
+      class_names(
+        @size,
+        @shape || @inner_class || 'rounded',
+        { 'bg-neutral text-neutral-content': @placeholder_text.present? }
+      )
+    end
+
+    def html_attributes
+      attrs = system_arguments.except(:class)
+      attrs[:class] = default_classes
+      attrs
+    end
+  end
+end