ui_components 0.1.0 → 0.1.2

data/app/components/ui_components/daisy_ui/base_component.rb

@@ -15,6 +15,8 @@ module UiComponents
       CSS_CLASSES_VARIANTS = %w[].freeze
       CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
 
+      attr_accessor :slot_order
+
       def initialize(
           css_class: nil,
           css_style: nil,
@@ -23,18 +25,37 @@ module UiComponents
         @css_class = css_class.to_s
         @css_style = css_style.to_s
         @options = options
+
+        @slot_order = []
+      end
+
+      def self.tracks_slot_order(slots)
+        slots.each do |slot|
+          singularized = slot.to_s.singularize
+          alias_method "original_with_#{singularized}", "with_#{singularized}"
+
+          define_method "with_#{singularized}" do |*args, **kwargs, &block|
+            @slot_order << slot unless @slot_order.include?(slot)
+
+            send("original_with_#{singularized}", *args, **kwargs, &block)
+          end
+        end
       end
 
       private
 
       def set_options
-        @options.merge!(class: class_string)
+        @options.merge!(class: css_class_string)
         @options.merge!(style: @css_style) if @css_style.present?
+        other_options if respond_to?(:other_options, true)
         @options.compact_blank!
       end
 
-      def class_string
-        @css_class
+      def css_class_string
+        TailwindMerge::Merger.new.merge([
+          *self.class::CSS_CLASSES_DEFAULT,
+          @css_class
+        ])
       end
     end
   end

data/app/components/ui_components/daisy_ui/data_display/accordion/item/anchor_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Accordion
+        module Item
+          class AnchorComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[collapse-title].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/accordion/item/body_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Accordion
+        module Item
+          class BodyComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[collapse-content].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -5,15 +5,15 @@ module UiComponents
     module DataDisplay
       module Accordion
         class ItemComponent < BaseComponent
-          ICONS = %w[arrow plus]
+          ICONS = %w[arrow plus].freeze
 
           CSS_CLASSES_DEFAULT = %w[collapse bg-base-100 border border-base-300].freeze
           CSS_CLASSES_VARIANTS = (ICONS.map { |key| "collapse-#{key}" }).freeze
           CSS_CLASSES = (
             CSS_CLASSES_DEFAULT +
             CSS_CLASSES_VARIANTS +
-            AnchorComponent::CSS_CLASSES +
-            BodyComponent::CSS_CLASSES
+            Item::AnchorComponent::CSS_CLASSES +
+            Item::BodyComponent::CSS_CLASSES
           ).freeze
 
           erb_template <<-ERB
@@ -24,8 +24,8 @@ module UiComponents
             <% end %>
           ERB
 
-          renders_one :anchor, AnchorComponent
-          renders_one :body, BodyComponent
+          renders_one :anchor, Item::AnchorComponent
+          renders_one :body, Item::BodyComponent
 
           def initialize(
               opener:,
@@ -44,24 +44,24 @@ module UiComponents
 
           private
 
-          def set_input_options
-            options = { type: (@toggle ? "checkbox" : "radio") }
-            options.merge!(name: @opener)
-            options.merge!(checked: "checked") if @opened
-            options.compact_blank!
-          end
-
-          def class_string
+          def css_class_string
             TailwindMerge::Merger.new.merge([
               *CSS_CLASSES_DEFAULT,
-              icon_class,
+              icon_css_class,
               @css_class
             ])
           end
 
-          def icon_class
+          def icon_css_class
             "collapse-#{@icon}" if ICONS.include?(@icon)
           end
+
+          def set_input_options
+            options = { type: (@toggle ? "checkbox" : "radio") }
+            options.merge!(name: @opener)
+            options.merge!(checked: "checked") if @opened
+            options.compact_blank!
+          end
         end
       end
     end

data/app/components/ui_components/daisy_ui/data_display/avatar/item/box_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Avatar
+        module Item
+          class BoxComponent < BaseComponent
+            MASKS = %w[squircle hexagon triangle].freeze
+
+            CSS_CLASSES_DEFAULT = %w[w-24].freeze
+            CSS_CLASSES_VARIANTS = (
+              %w[mask bg-neutral text-neutral-content ring-primary ring-offset-base-100 ring ring-offset-2] +
+              MASKS.map { |key| "mask-#{key}" }
+            ).freeze
+            CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+
+            def initialize(
+                placeholder: false,
+                with_ring: false,
+                mask: nil,
+                **args
+              )
+              @placeholder = placeholder
+              @with_ring = with_ring
+              @mask = mask
+
+              super(**args)
+            end
+
+            private
+
+            def css_class_string
+              TailwindMerge::Merger.new.merge([
+                *CSS_CLASSES_DEFAULT,
+                placeholder_css_class,
+                ring_css_class,
+                mask_css_class,
+                @css_class
+              ])
+            end
+
+            def placeholder_css_class
+              "bg-neutral text-neutral-content" if @placeholder
+            end
+
+            def ring_css_class
+              "ring-primary ring-offset-base-100 ring ring-offset-2" if @with_ring
+            end
+
+            def mask_css_class
+              "mask mask-#{@mask}" if MASKS.include?(@mask)
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -5,7 +5,7 @@ module UiComponents
     module DataDisplay
       module Avatar
         class ItemComponent < BaseComponent
-          STATUSES = %w[online offline]
+          STATUSES = %w[online offline].freeze
 
           CSS_CLASSES_DEFAULT = %w[avatar].freeze
           CSS_CLASSES_VARIANTS = (
@@ -15,7 +15,7 @@ module UiComponents
           CSS_CLASSES = (
             CSS_CLASSES_DEFAULT +
             CSS_CLASSES_VARIANTS +
-            BoxComponent::CSS_CLASSES
+            Item::BoxComponent::CSS_CLASSES
           ).freeze
 
           erb_template <<-ERB
@@ -24,7 +24,7 @@ module UiComponents
             <% end %>
           ERB
 
-          renders_one :box, ->(**args) { BoxComponent.new(**args.merge(placeholder: @placeholder)) }
+          renders_one :box, ->(**args) { Item::BoxComponent.new(**args.merge(placeholder: @placeholder)) }
 
           def initialize(
               placeholder: false,
@@ -39,20 +39,20 @@ module UiComponents
 
           private
 
-          def class_string
+          def css_class_string
             TailwindMerge::Merger.new.merge([
               *CSS_CLASSES_DEFAULT,
-              placeholder_class,
-              status_class,
+              placeholder_css_class,
+              status_css_class,
               @css_class
             ])
           end
 
-          def placeholder_class
+          def placeholder_css_class
             "avatar-placeholder" if @placeholder
           end
 
-          def status_class
+          def status_css_class
             "avatar-#{@status}" if STATUSES.include?(@status)
           end
         end

data/app/components/ui_components/daisy_ui/data_display/badge_component.rb

@@ -31,25 +31,25 @@ module UiComponents
 
         private
 
-        def class_string
+        def css_class_string
           TailwindMerge::Merger.new.merge([
             *CSS_CLASSES_DEFAULT,
-            size_class,
-            color_class,
-            kind_class,
+            size_css_class,
+            color_css_class,
+            kind_css_class,
             @css_class
           ])
         end
 
-        def size_class
+        def size_css_class
           "badge-#{@size}" if SIZES.include?(@size)
         end
 
-        def color_class
+        def color_css_class
           "badge-#{@color}" if COLORS.include?(@color)
         end
 
-        def kind_class
+        def kind_css_class
           "badge-#{@kind}" if KINDS.include?(@kind)
         end
       end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Card
+        module Body
+          class ActionComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[card-actions justify-end].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Card
+        module Body
+          class ContextComponent < BaseComponent
+            erb_template <<-ERB
+              <%= content %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Card
+        module Body
+          class TitleComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[card-title].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.h2(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Card
+        class BodyComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[card-body].freeze
+          CSS_CLASSES = (
+            CSS_CLASSES_DEFAULT +
+            Body::TitleComponent::CSS_CLASSES +
+            Body::ActionComponent::CSS_CLASSES
+          ).freeze
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) do %>
+              <% content.present? %>
+
+              <% slot_order.each do |slot| %>
+                <%= send(slot) if send(slot).present? %>
+              <% end %>
+            <% end %>
+          ERB
+
+          renders_one :title, Body::TitleComponent
+          renders_one :context, Body::ContextComponent
+          renders_one :action, Body::ActionComponent
+
+          tracks_slot_order registered_slots.keys
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Card
+        class FigureComponent < BaseComponent
+          erb_template <<-ERB
+            <%= tag.figure(**set_options) { content } %>
+          ERB
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/card_component.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class CardComponent < BaseComponent
+        SIZES = %w[xs sm md lg xl].freeze
+        BORDER_KINDS = %w[border dash].freeze
+
+        CSS_CLASSES_DEFAULT = %w[card w-96 bg-base-100 shadow-sm].freeze
+        CSS_CLASSES_VARIANTS = (
+          %w[card-side image-full] +
+          SIZES.map { |key| "card-#{key}" } +
+          BORDER_KINDS.map { |key| "card-#{key}" }
+        ).freeze
+        CSS_CLASSES = (
+          CSS_CLASSES_DEFAULT +
+          CSS_CLASSES_VARIANTS +
+          Card::BodyComponent::CSS_CLASSES
+        ).freeze
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) do %>
+            <% content.present? %>
+
+            <% slot_order.each do |slot| %>
+              <%= send(slot) if send(slot).present? %>
+            <% end %>
+          <% end %>
+        ERB
+
+        renders_one :figure, Card::FigureComponent
+        renders_one :body, Card::BodyComponent
+
+        tracks_slot_order registered_slots.keys
+
+        def initialize(
+            size: nil,
+            side: false,
+            border_kind: nil,
+            image_full: nil,
+            **args
+          )
+          @size = size
+          @side = side
+          @border_kind = border_kind
+          @image_full = image_full
+
+          super(**args)
+        end
+
+        private
+
+        def css_class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            size_css_class,
+            side_css_class,
+            border_kind_css_class,
+            image_full_css_class,
+            @css_class
+          ])
+        end
+
+        def size_css_class
+          "card-#{@size}" if SIZES.include?(@size)
+        end
+
+        def side_css_class
+          "card-side" if @side
+        end
+
+        def border_kind_css_class
+          "card-#{@border_kind}" if BORDER_KINDS.include?(@border_kind)
+        end
+
+        def image_full_css_class
+          "image-full" if @image_full
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/carousel/indicator_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Carousel
+        class IndicatorComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[flex w-full justify-center gap-2 py-2].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.dev(**set_options) { content } %>
+          ERB
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/carousel/item/passer_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Carousel
+        module Item
+          class PasserComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.dev(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/carousel/item_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Carousel
+        class ItemComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[carousel-item].freeze
+          CSS_CLASSES = (
+            CSS_CLASSES_DEFAULT +
+            Item::PasserComponent::CSS_CLASSES
+          ).freeze
+
+          erb_template <<-ERB
+            <%= tag.dev(**set_options) do %>
+              <%= content %>
+              <%= passer %>
+            <% end %>
+          ERB
+
+          renders_one :passer, Item::PasserComponent
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/carousel_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class CarouselComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[carousel].freeze
+        CSS_CLASSES_VARIANTS = (
+          %w[carousel-horizontal carousel-vertical] +
+          ALIGNS.map { |key| "carousel-#{key}" }
+        ).freeze
+        CSS_CLASSES = (
+          CSS_CLASSES_DEFAULT +
+          CSS_CLASSES_VARIANTS +
+          Carousel::ItemComponent::CSS_CLASSES +
+          Carousel::IndicatorComponent::CSS_CLASSES
+        ).freeze
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+          <%= indicator %>
+        ERB
+
+        renders_many :items, Carousel::ItemComponent
+        renders_one :indicator, Carousel::IndicatorComponent
+
+        def initialize(
+            align: nil,
+            vertical: false,
+            **args
+          )
+          @align = align
+          @vertical = vertical
+
+          super(**args)
+        end
+
+        private
+
+        def css_class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            align_css_class,
+            vertical_css_class,
+            @css_class
+          ])
+        end
+
+        def align_css_class
+          "carousel-#{@align}" if ALIGNS.include?(@align)
+        end
+
+        def vertical_css_class
+          "carousel-vertical" if @vertical
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/chat/bubble_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Chat
+        class BubbleComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[chat-bubble].freeze
+          CSS_CLASSES_VARIANTS = (COLORS.map { |key| "chat-bubble-#{key}" }).freeze
+          CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) { content } %>
+          ERB
+
+          def initialize(
+              color: nil,
+              **args
+            )
+            @color = color
+
+            super(**args)
+          end
+
+          private
+
+          def css_class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              color_css_class,
+              @css_class
+            ])
+          end
+
+          def color_css_class
+            "chat-bubble-#{@color}" if COLORS.include?(@color)
+          end
+        end
+      end
+    end
+  end
+end