daisy_components 0.1.0

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

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Avatar group component that displays a collection of avatars with customizable styling
+  #
+  # @example Basic usage
+  #   <%= render(AvatarGroupComponent.new) do |group| %>
+  #     <% group.with_avatar(img_src: "path/to/image.jpg", img_alt: "User 1") %>
+  #     <% group.with_avatar(img_src: "path/to/image.jpg", img_alt: "User 2") %>
+  #   <% end %>
+  #
+  # @example With max display and counter
+  #   <%= render(AvatarGroupComponent.new(max_display: 2)) do |group| %>
+  #     <% group.with_avatar(img_src: "path/to/image.jpg", img_alt: "User 1") %>
+  #     <% group.with_avatar(img_src: "path/to/image.jpg", img_alt: "User 2") %>
+  #     <% group.with_avatar(img_src: "path/to/image.jpg", img_alt: "User 3") %>
+  #   <% end %>
+  class AvatarGroup < DaisyUI::BaseComponent
+    SIZES = Avatar::SIZES
+    SHAPES = Avatar::SHAPES
+    DEFAULT_SPACING = 1.5
+
+    renders_many :avatars, lambda { |**system_arguments|
+      Avatar.new(
+        size: @size,
+        shape: @shape&.to_sym,
+        inner_class: system_arguments.delete(:inner_class),
+        **system_arguments
+      )
+    }
+
+    # Initializes a new Avatar Group component
+    #
+    # @param size [Symbol, nil] Size of the avatars. Must be one of: w8, w12, w16, w20, w24, w32
+    # @param shape [Symbol, nil] Shape of the avatars. Must be one of: circle, squircle, hexagon, triangle
+    # @param spacing [Float] Space between avatars in rem units (default: 1.5)
+    # @param max_display [Integer, nil] Maximum number of avatars to display before showing a counter
+    # @param system_arguments [Hash] Additional HTML attributes to be applied to the wrapper element
+    def initialize(size: nil, shape: nil, spacing: DEFAULT_SPACING, max_display: nil, **system_arguments)
+      @size = size
+      @shape = shape
+      @spacing = spacing.to_f
+      @max_display = max_display&.to_i
+
+      super(**system_arguments)
+    end
+
+    # @return [String] Rendered HTML for the avatar group
+    def call
+      tag.div(**html_attributes) do
+        content = []
+        content.concat(displayed_avatars)
+        content << render_counter if remaining_count
+        safe_join(content)
+      end
+    end
+
+    private
+
+    def default_classes
+      class_names(
+        'avatar-group',
+        spacing_class,
+        system_arguments[:class]
+      )
+    end
+
+    def html_attributes
+      attrs = system_arguments.except(:class)
+      attrs[:class] = default_classes
+      attrs
+    end
+
+    def displayed_avatars
+      return avatars if avatars.empty? || !@max_display
+
+      avatars.first(@max_display)
+    end
+
+    def remaining_count
+      return unless @max_display && avatars.size > @max_display
+
+      avatars.size - @max_display
+    end
+
+    def render_counter
+      Avatar.new(
+        size: @size,
+        shape: @shape,
+        placeholder_text: "+#{remaining_count}",
+        inner_class: 'bg-neutral text-neutral-content'
+      ).call
+    end
+
+    def spacing_class
+      # Convert rem to tailwind spacing units (1rem = 4 units)
+      # Clamp between 0 and 16 (4rem) to ensure valid Tailwind classes
+      rem = [(@spacing * 4).round, 0].max.clamp(0, 16)
+      "-space-x-#{rem}"
+    end
+  end
+end

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

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Badge component implementing DaisyUI's badge styles
+  #
+  # @example Basic usage
+  #   <%= render(BadgeComponent.new(text: "Badge")) %>
+  #
+  # @example Primary variant
+  #   <%= render(BadgeComponent.new(text: "Primary", color: :primary)) %>
+  #
+  # @example Outline style
+  #   <%= render(BadgeComponent.new(text: "Outline", variant: :outline)) %>
+  #
+  # @example Small size with icon
+  #   <%= render(BadgeComponent.new(
+  #     text: "Icon",
+  #     size: :sm,
+  #     icon: helpers.check_icon
+  #   )) %>
+  #
+  # @example Soft style with color
+  #   <%= render(BadgeComponent.new(
+  #     text: "Soft",
+  #     variant: :soft,
+  #     color: :primary
+  #   )) %>
+  #
+  # @example With block content
+  #   <%= render(BadgeComponent.new) do %>
+  #     Complex <strong>content</strong>
+  #   <% end %>
+  #
+  # @example With custom tag type
+  #   <%= render(BadgeComponent.new(text: "Badge", tag_type: :span)) %>
+  class Badge < DaisyUI::BaseComponent
+    # Available badge colors from DaisyUI
+    COLORS = {
+      primary: 'badge-primary',
+      secondary: 'badge-secondary',
+      accent: 'badge-accent',
+      neutral: 'badge-neutral',
+      ghost: 'badge-ghost',
+      info: 'badge-info',
+      success: 'badge-success',
+      warning: 'badge-warning',
+      error: 'badge-error'
+    }.freeze
+
+    # Available badge sizes from DaisyUI
+    SIZES = {
+      xl: 'badge-xl',
+      lg: 'badge-lg',
+      md: 'badge-md',
+      sm: 'badge-sm',
+      xs: 'badge-xs'
+    }.freeze
+
+    # Available badge variants from DaisyUI
+    VARIANTS = {
+      outline: 'badge-outline',
+      soft: 'badge-soft',
+      dash: 'badge-dash',
+      ghost: 'badge-ghost'
+    }.freeze
+
+    # @param text [String] The text content to display inside the badge
+    # @param color [String] Visual style of the badge
+    #    (neutral/primary/secondary/accent/info/success/warning/error/ghost)
+    # @param size [String] Size of the badge (xl/lg/md/sm/xs)
+    # @param variant [String] Variant of the badge (outline/soft/dash/ghost)
+    # @param icon [String] SVG icon to display before the text
+    # @param tag_type [Symbol] HTML tag to use for the badge (default: :div)
+    # @param system_arguments [Hash] Additional HTML attributes to be applied to the badge
+    def initialize(
+      text = nil,
+      color: nil,
+      size: nil,
+      variant: nil,
+      icon: nil,
+      tag_type: :div,
+      **system_arguments
+    )
+      @text = text
+      @color = build_argument(color, COLORS, 'color')
+      @size = build_argument(size, SIZES, 'size')
+      @variant = build_argument(variant, VARIANTS, 'variant')
+      @icon = icon
+      @tag_type = tag_type
+
+      super(**system_arguments)
+    end
+
+    def call
+      tag.public_send(@tag_type, **html_attributes) do
+        safe_join([render_icon, content || @text].compact)
+      end
+    end
+
+    delegate :to_s, to: :call
+
+    private
+
+    def render_icon
+      return unless @icon
+
+      helpers.sanitize(@icon, tags: %w[svg path g circle],
+                              attributes: %w[class viewBox fill stroke d])
+    end
+
+    def computed_classes
+      modifiers = ['badge']
+      modifiers << @variant
+      modifiers << @color
+      modifiers << @size
+
+      class_names(modifiers, system_arguments[:class])
+    end
+
+    def html_attributes
+      attrs = system_arguments.except(:class)
+      attrs[:class] = computed_classes
+      attrs
+    end
+  end
+end

data/app/components/daisy_ui/data_display/card/actions.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  class Card
+    # Actions component for the card, handling action buttons layout
+    #
+    # @example Basic usage
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body do |body| %>
+    #       <% body.with_actions do %>
+    #         <%= render(ButtonComponent.new(text: "Action")) %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With multiple buttons
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body do |body| %>
+    #       <% body.with_actions(justify: :between) do |actions| %>
+    #         <% actions.with_button(text: "Cancel", variant: :ghost) %>
+    #         <% actions.with_button(text: "Submit", color: :primary) %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With custom buttons
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body do |body| %>
+    #       <% body.with_actions(justify: :end) do %>
+    #         <%= render(ButtonComponent.new(text: "Delete", color: :error)) %>
+    #         <%= render(ButtonComponent.new(text: "Save", color: :primary)) %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    class Actions < BaseComponent
+      # Available justification options for actions layout
+      JUSTIFY_OPTIONS = {
+        start: 'justify-start',
+        end: 'justify-end',
+        center: 'justify-center',
+        between: 'justify-between',
+        around: 'justify-around',
+        evenly: 'justify-evenly'
+      }.freeze
+
+      # Renders multiple actions (buttons or badges)
+      renders_many :actions, types: {
+        button: { renders: DaisyUI::Button, as: :button },
+        badge: { renders: DaisyUI::Badge, as: :badge }
+      }
+
+      # @param justify [Symbol] Justification for action buttons layout
+      # @param system_arguments [Hash] Additional HTML attributes
+      def initialize(justify: nil, **system_arguments)
+        @justify = build_justify(justify)
+        super(**system_arguments)
+      end
+
+      def call
+        tag.div(**html_attributes) do
+          if actions.any?
+            safe_join(actions)
+          else
+            content
+          end
+        end
+      end
+
+      private
+
+      def build_justify(key)
+        return nil unless key
+
+        class_name = JUSTIFY_OPTIONS[key.to_sym]
+        return class_name if class_name
+
+        raise ArgumentError, "Invalid justify: #{key}. Must be one of: #{JUSTIFY_OPTIONS.keys.join(', ')}"
+      end
+
+      def computed_classes
+        modifiers = ['card-actions']
+        modifiers << @justify if @justify
+
+        class_names(modifiers, system_arguments[:class])
+      end
+
+      def html_attributes
+        system_arguments.merge(
+          class: computed_classes
+        )
+      end
+    end
+  end
+end

data/app/components/daisy_ui/data_display/card/body.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  class Card
+    # Body component for the card, containing title, description and actions
+    #
+    # @example Basic usage
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body do |body| %>
+    #       <% body.with_title { "Title" } %>
+    #       <% body.with_description { "Description" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With simple button
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body(
+    #       title: "Title",
+    #       description: "Description",
+    #       button: { text: "Action", color: :primary, justify: :end }
+    #     ) %>
+    #   <% end %>
+    #
+    # @example With multiple buttons
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body do |body| %>
+    #       <% body.with_title { "Title" } %>
+    #       <% body.with_actions(justify: :between) do |actions| %>
+    #         <% actions.with_button(text: "Cancel", variant: :ghost) %>
+    #         <% actions.with_bage(text: "Submit", color: :primary) %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    class Body < BaseComponent
+      # Title is a component slot that renders TitleComponent
+      renders_one :title, DaisyUI::Card::Title
+
+      # Actions is a component slot that renders ActionsComponent
+      renders_one :actions, DaisyUI::Card::Actions
+
+      # Description is a content slot that can contain any content
+      renders_one :description
+
+      # @param variant [Symbol] Card variant affecting body layout
+      # @param description [String] Card description text
+      # @param title [String] Card title text
+      # @param button [Hash] Simple button configuration
+      # @option button [String] :text Button text
+      # @option button [Symbol] :color Button color
+      # @option button [Symbol] :variant Button variant
+      # @option button [Symbol] :size Button size
+      # @option button [Symbol] :justify Button justification
+      # @param system_arguments [Hash] Additional HTML attributes
+      def initialize(variant: nil,
+                     description: nil,
+                     title: nil,
+                     button: nil,
+                     **system_arguments)
+        @variant = variant
+        @description = description
+        @title = title
+        @button = button
+        super(**system_arguments)
+      end
+
+      def call
+        tag.div(**html_attributes) do
+          safe_join([
+            title,
+            render_description,
+            actions
+          ].compact)
+        end
+      end
+
+      def before_render
+        with_title(@title) if @title && !title?
+        with_description { tag.p(@description) } if @description && !description?
+        setup_button if @button && !actions?
+      end
+
+      private
+
+      def render_description
+        return description if description?
+
+        tag.p(@description) if @description
+      end
+
+      def setup_button
+        button_config = @button.symbolize_keys
+        justify = button_config.delete(:justify)
+
+        with_actions(justify: justify) do |actions|
+          actions.with_button(**button_config)
+        end
+      end
+
+      def computed_classes
+        modifiers = %w[card-body]
+        modifiers << 'flex flex-col justify-between' if @variant == :side
+
+        class_names(modifiers, system_arguments[:class])
+      end
+
+      def html_attributes
+        system_arguments.merge(
+          class: computed_classes
+        )
+      end
+    end
+  end
+end

data/app/components/daisy_ui/data_display/card/figure.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  class Card
+    # Figure component for the card, handling image display
+    #
+    # @example Basic usage with URL
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_figure(img_url: "https://picsum.photos/400/200") %>
+    #   <% end %>
+    #
+    # @example Custom image tag
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_figure do |figure| %>
+    #       <% figure.with_image do %>
+    #         <%= image_tag "custom.jpg", class: "rounded-xl" %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    class Figure < BaseComponent
+      # Image is a content slot that can contain any image content
+      renders_one :image
+
+      # @param img_url [String] URL for the card image
+      # @param alt [String] Alt text for the image
+      # @param system_arguments [Hash] Additional HTML attributes
+      def initialize(img_url: nil, img_alt: nil, **system_arguments)
+        @img_url = img_url
+        @img_alt = img_alt
+        super(**system_arguments)
+      end
+
+      def before_render
+        with_image { tag.img(src: @img_url, alt: @img_alt) } if @img_url && !image?
+      end
+
+      def call
+        tag.figure(**system_arguments) do
+          safe_join([image, content].compact)
+        end
+      end
+    end
+  end
+end

data/app/components/daisy_ui/data_display/card/title.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  class Card
+    # Title component for the card, handling the title display
+    #
+    # @example Basic usage
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body do |body| %>
+    #       <% body.with_title { "Card Title" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With custom tag
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body do |body| %>
+    #       <% body.with_title(tag_name: :h1) { "Large Title" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With text parameter
+    #   <%= render(CardComponent.new) do |component| %>
+    #     <% component.with_body do |body| %>
+    #       <% body.with_title("Simple Title") %>
+    #     <% end %>
+    #   <% end %>
+    class Title < BaseComponent
+      # @param text [String] The title text (optional if block given)
+      # @param tag_name [Symbol] HTML tag to use for the title
+      # @param system_arguments [Hash] Additional HTML attributes
+      def initialize(text = nil, tag_name: :h2, **system_arguments)
+        @text = text
+        @tag_name = tag_name
+        super(**system_arguments)
+      end
+
+      def call
+        content_tag(@tag_name, **html_attributes) do
+          content || @text
+        end
+      end
+
+      private
+
+      def computed_classes
+        class_names('card-title', system_arguments[:class])
+      end
+
+      def html_attributes
+        system_arguments.merge(
+          class: computed_classes
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,157 @@
+# frozen_string_literal: true
+
+module DaisyUI
+  # Card component for displaying content in a contained card format
+  #
+  # @example Basic usage with simple button
+  #   <%= render(CardComponent.new(
+  #     title: "Card Title",
+  #     description: "Card description here",
+  #     button: { text: "Action", color: :primary, justify: :end }
+  #   )) %>
+  #
+  # @example With figure/image
+  #   <%= render(CardComponent.new(
+  #     img_url: "https://picsum.photos/400/200"
+  #   )) %>
+  #
+  # @example Bordered variant
+  #   <%= render(CardComponent.new(variant: :bordered)) do |component| %>
+  #     <% component.with_body(title: "Bordered Card") %>
+  #   <% end %>
+  #
+  # @example Side image variant
+  #   <%= render(CardComponent.new(
+  #     variant: :side,
+  #     img_url: "https://picsum.photos/200/400"
+  #   )) do |component| %>
+  #     <% component.with_body do |body| %>
+  #       <% body.with_title { "Side Image" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example With actions
+  #   <%= render(CardComponent.new) do |component| %>
+  #     <% component.with_body do |body| %>
+  #       <% body.with_title { "Card with Actions" } %>
+  #       <% body.with_actions(justify: :between) do %>
+  #         <%= render(ButtonComponent.new(text: "Action")) %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  class Card < BaseComponent
+    # Available card variants
+    VARIANTS = {
+      compact: 'card-compact',
+      side: 'card-side',
+      side_responsive: 'lg:card-side',
+      bordered: 'card-border',
+      dash: 'card-dash'
+    }.freeze
+
+    COLORS = {
+      primary: 'bg-primary text-primary-content',
+      secondary: 'bg-secondary text-secondary-content',
+      accent: 'bg-accent text-accent-content',
+      neutral: 'bg-neutral text-neutral-content',
+      base: 'bg-base-100'
+    }.freeze
+
+    SIZES = {
+      xs: 'card-xs',
+      sm: 'card-sm',
+      md: 'card-md',
+      lg: 'card-lg',
+      xl: 'card-xl'
+    }.freeze
+
+    renders_one :figure, lambda { |**system_arguments|
+      Figure.new(img_url: @img_url, img_alt: @img_alt, **system_arguments)
+    }
+
+    renders_one :body, lambda { |**system_arguments|
+      Body.new(
+        variant: @variant,
+        title: @title,
+        description: @description,
+        button: @button,
+        **system_arguments
+      )
+    }
+
+    # @param variant [Symbol] Card layout variant (:compact, :side, :bordered)
+    # @param image_full [Boolean] Makes the image cover the full card
+    # @param title [String] Card title (optional)
+    # @param description [String] Card description (optional)
+    # @param button [Hash] Simple button configuration (optional)
+    # @option button [String] :text Button text
+    # @option button [Symbol] :color Button color (primary, secondary, etc)
+    # @option button [Symbol] :variant Button variant (outline, soft, etc)
+    # @option button [Symbol] :size Button size (xs, sm, md, lg, xl)
+    # @option button [Symbol] :justify Button justification (start, end, center, between, around, evenly)
+    # @param img_url [String] URL for the card image (optional)
+    # @param system_arguments [Hash] Additional HTML attributes
+    def initialize(variant: nil,
+                   image_full: false,
+                   title: nil,
+                   description: nil,
+                   button: nil,
+                   img_url: nil,
+                   img_alt: nil,
+                   bottom_image: false,
+                   shadow: false,
+                   size: nil,
+                   color: :base,
+                   **system_arguments)
+      @variant = build_argument(variant, VARIANTS, 'variant')
+      @color = build_argument(color, COLORS, 'color')
+      @size = build_argument(size, SIZES, 'size')
+      @image_full = image_full
+      @title = title
+      @description = description
+      @button = button
+      @img_url = img_url
+      @img_alt = img_alt
+      @shadow = shadow
+      @bottom_image = bottom_image
+      super(**system_arguments)
+    end
+
+    def before_render
+      with_figure if @img_url && !figure?
+      with_body unless body?
+    end
+
+    def call
+      tag.div(**html_attributes) do
+        safe_join(render_in_oder)
+      end
+    end
+
+    def render_in_oder
+      if @bottom_image
+        [body, figure].compact
+      else
+        [figure, body].compact
+      end
+    end
+
+    private
+
+    def computed_classes
+      modifiers = %w[card]
+      modifiers << @color if @color.present?
+      modifiers << @variant if @variant.present?
+      modifiers << 'image-full' if @image_full
+      modifiers << 'shadow-sm' if @shadow
+      modifiers << 'w-96' unless @variant.in?([VARIANTS[:side], VARIANTS[:side_responsive]])
+      modifiers << @size if @size.present?
+      class_names(modifiers, system_arguments[:class])
+    end
+
+    def html_attributes
+      safe_args = system_arguments.except(:bottom_image)
+      safe_args.merge(class: computed_classes)
+    end
+  end
+end