ui_components 0.1.0 → 0.1.2

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Chat
+        class FooterComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[chat-footer opacity-50].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) { content } %>
+          ERB
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Chat
+        class HeaderComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[chat-header].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/chat_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class ChatComponent < BaseComponent
+        ALIGNS = %w[start end].freeze
+
+        CSS_CLASSES_DEFAULT = %w[chat].freeze
+        CSS_CLASSES_VARIANTS = (ALIGNS.map { |key| "chat-#{key}" }).freeze
+        CSS_CLASSES = (
+          CSS_CLASSES_DEFAULT +
+          CSS_CLASSES_VARIANTS +
+          Chat::HeaderComponent::CSS_CLASSES +
+          Chat::BubbleComponent::CSS_CLASSES +
+          Chat::FooterComponent::CSS_CLASSES
+        ).freeze
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) do %>
+            <%= avatar %>
+            <%= header %>
+            <%= bubble %>
+            <%= footer %>
+          <% end %>
+        ERB
+
+        renders_one :avatar, ->(**args) { Avatar::ItemComponent.new(**args.merge(css_class: "chat-image")) }
+        renders_one :header, Chat::HeaderComponent
+        renders_one :bubble, Chat::BubbleComponent
+        renders_one :footer, Chat::FooterComponent
+
+        def initialize(
+            align: nil,
+            **args
+          )
+          @align = align
+
+          super(**args)
+        end
+
+        private
+
+        def css_class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            align_css_class,
+            @css_class
+          ])
+        end
+
+        def align_css_class
+          "chat-#{@align}" if ALIGNS.include?(@align)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Countdown
+        class ItemComponent < BaseComponent
+          erb_template <<-ERB
+            <%= tag.span(**set_options) %>
+            <%= @label %>
+          ERB
+
+          def initialize(
+              value:,
+              type: "second",
+              label: nil,
+              automatic:,
+              **args
+            )
+            @value = value.to_s
+            @type = type.to_s
+            @label = label.to_s
+            @automatic = automatic
+
+            super(**args)
+          end
+
+          private
+
+          def other_options
+            @options.merge!(style: style_string)
+            @options.merge!("aria-live": "polite")
+            @options.merge!("aria-label": @value)
+
+            return unless @automatic
+
+            @options.merge!("data-countdown-type": @type)
+            @options.merge!("data-countdown-target": "value")
+          end
+
+          def style_string
+            @css_style += "--value:#{@value};"
+            @css_style
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class CountdownComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[countdown].freeze
+        CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+        erb_template <<-ERB
+          <%= tag.span(**set_options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        renders_many :items, ->(**args) { Countdown::ItemComponent.new(**args.merge(automatic: @automatic)) }
+
+        def initialize(
+            automatic: true,
+            **args
+          )
+          @automatic = automatic
+
+          super(**args)
+        end
+
+        private
+
+        def other_options
+          @options.merge!("data-controller": "countdown") if @automatic
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/{accordion/anchor_component.rb → diff/item1_component.rb}

@@ -3,9 +3,9 @@
 module UiComponents
   module DaisyUi
     module DataDisplay
-      module Accordion
-        class AnchorComponent < BaseComponent
-          CSS_CLASSES_DEFAULT = %w[collapse-title].freeze
+      module Diff
+        class Item1Component < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[diff-item-1].freeze
           CSS_CLASSES = CSS_CLASSES_DEFAULT
 
           erb_template <<-ERB
@@ -14,11 +14,8 @@ module UiComponents
 
           private
 
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
+          def other_options
+            @options.merge!(role: "img")
           end
         end
       end

data/app/components/ui_components/daisy_ui/data_display/{accordion/body_component.rb → diff/item2_component.rb}

@@ -3,9 +3,9 @@
 module UiComponents
   module DaisyUi
     module DataDisplay
-      module Accordion
-        class BodyComponent < BaseComponent
-          CSS_CLASSES_DEFAULT = %w[collapse-content].freeze
+      module Diff
+        class Item2Component < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[diff-item-2].freeze
           CSS_CLASSES = CSS_CLASSES_DEFAULT
 
           erb_template <<-ERB
@@ -14,11 +14,9 @@ module UiComponents
 
           private
 
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
+          def other_options
+            @options.merge!(role: "img")
+            @options.merge!(tabindex: "0")
           end
         end
       end

data/app/components/ui_components/daisy_ui/data_display/diff/resizer_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Diff
+        class ResizerComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[diff-resizer].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) %>
+          ERB
+
+          private
+
+          def other_options
+            @options.merge!(role: "img")
+            @options.merge!(tabindex: "0")
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class DiffComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[diff].freeze
+        CSS_CLASSES = (
+          CSS_CLASSES_DEFAULT +
+          Diff::Item1Component::CSS_CLASSES +
+          Diff::Item2Component::CSS_CLASSES +
+          Diff::ResizerComponent::CSS_CLASSES
+        ).freeze
+
+        erb_template <<-ERB
+          <%= tag.figure(**set_options) do %>
+            <%= item1 %>
+            <%= item2 %>
+            <%= resizer %>
+          <% end %>
+        ERB
+
+        renders_one :item1, Diff::Item1Component
+        renders_one :item2, Diff::Item2Component
+        renders_one :resizer, Diff::ResizerComponent
+
+        private
+
+        def other_options
+          @options.merge!(tabindex: "0")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class KbdComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[kbd].freeze
+        CSS_CLASSES_VARIANTS = (SIZES.map { |key| "kbd-#{key}" }).freeze
+        CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+        erb_template <<-ERB
+          <%= tag.kbd(**set_options) { content } %>
+        ERB
+
+        def initialize(
+            size: nil,
+            **args
+          )
+          @size = size
+
+          super(**args)
+        end
+
+        private
+
+        def css_class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            size_css_class,
+            @css_class
+          ])
+        end
+
+        def size_css_class
+          "kbd-#{@size}" if SIZES.include?(@size)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module List
+        class ItemComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[list-row].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.li(**set_options) { content } %>
+          ERB
+
+          def initialize(
+              row: true,
+              **args
+            )
+            @row = row
+
+            super(**args)
+          end
+
+          private
+
+          def css_class_string
+            TailwindMerge::Merger.new.merge([
+              *css_classes_default,
+              @css_class
+            ])
+          end
+
+          def css_classes_default
+            CSS_CLASSES_DEFAULT if @row
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class ListComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[list bg-base-100 rounded-box shadow-md].freeze
+        CSS_CLASSES = (CSS_CLASSES_DEFAULT + List::ItemComponent::CSS_CLASSES).freeze
+
+        erb_template <<-ERB
+          <%= tag.ul(**set_options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        renders_many :items, List::ItemComponent
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/stat/item/action_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Stat
+        module Item
+          class ActionComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[stat-actions].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/stat/item/description_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Stat
+        module Item
+          class DescriptionComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[stat-desc].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/stat/item/figure_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Stat
+        module Item
+          class FigureComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[stat-figure].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) do %>
+                <%= avatar ? avatar : content %>
+              <% end %>
+            ERB
+
+            renders_one :avatar, Avatar::ItemComponent
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/stat/item/title_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Stat
+        module Item
+          class TitleComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[stat-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/stat/item/value_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Stat
+        module Item
+          class ValueComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[stat-value].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/stat/item_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Stat
+        class ItemComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[stat].freeze
+          CSS_CLASSES = (
+            CSS_CLASSES_DEFAULT +
+            Item::FigureComponent::CSS_CLASSES +
+            Item::TitleComponent::CSS_CLASSES +
+            Item::ValueComponent::CSS_CLASSES +
+            Item::DescriptionComponent::CSS_CLASSES +
+            Item::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 :figure, Item::FigureComponent
+          renders_one :title, Item::TitleComponent
+          renders_one :value, Item::ValueComponent
+          renders_one :description, Item::DescriptionComponent
+          renders_one :action, Item::ActionComponent
+
+          tracks_slot_order registered_slots.keys
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+# froze_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class StatComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[stats shadow].freeze
+        CSS_CLASSES_VARIANTS = %w[stats-horizontal stats-vertical].freeze
+        CSS_CLASSES = (
+          CSS_CLASSES_DEFAULT +
+          CSS_CLASSES_VARIANTS +
+          Stat::ItemComponent::CSS_CLASSES
+        ).freeze
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        renders_many :items, Stat::ItemComponent
+
+        def initialize(
+            vertical: false,
+            **args
+          )
+          @vertical = vertical
+
+          super(**args)
+        end
+
+        private
+
+        def css_class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            vertical_css_class,
+            @css_class
+          ])
+        end
+
+        def vertical_css_class
+          "stats-vertical" if @vertical
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class StatusComponent < BaseComponent
+        ANIMATIONS = %w[ping bounce].freeze
+
+        CSS_CLASSES_DEFAULT = %w[status].freeze
+        CSS_CLASSES_VARIANTS = (
+          SIZES.map { |key| "status-#{key}" } +
+          COLORS.map { |key| "status-#{key}" }
+        ).freeze
+        CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) %>
+        ERB
+
+        def initialize(
+            size: nil,
+            color: nil,
+            animate: nil,
+            **args
+          )
+          @size = size
+          @color = color
+          @animate = animate
+
+          super(**args)
+        end
+
+        private
+
+        def css_class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            size_css_class,
+            color_css_class,
+            animate_css_class,
+            @css_class
+          ])
+        end
+
+        def size_css_class
+          "status-#{@size}" if SIZES.include?(@size)
+        end
+
+        def color_css_class
+          "status-#{@color}" if COLORS.include?(@color)
+        end
+
+        def animate_css_class
+          "animate-#{@animate}" if ANIMATIONS.include?(@animate)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Table
+        module Item
+          class BodyComponent < BaseComponent
+            erb_template <<-ERB
+              <%= tag.tbody(**set_options) do %>
+                <% rows.each do |row| %>
+                  <%= row %>
+                <% end %>
+              <% end %>
+            ERB
+
+            renders_many :rows, RowComponent
+          end
+        end
+      end
+    end
+  end
+end