ui_components 0.1.1 → 0.1.2

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Table
+        module Item
+          class RowComponent < BaseComponent
+            erb_template <<-ERB
+              <%= tag.tr(**set_options) do %>
+                <% content.present? %>
+
+                <% slot_order.each do |slot| %>
+                  <% if send(slot).present? %>
+                    <% send(slot).each do |item| %>
+                      <%= item %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            ERB
+
+            renders_many :headers, Row::HeaderComponent
+            renders_many :data, Row::DataComponent
+
+            tracks_slot_order registered_slots.keys
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Table
+        class ItemComponent < BaseComponent
+          erb_template <<-ERB
+            <% content.present? %>
+
+            <% slot_order.each do |slot| %>
+              <% if send(slot).present? %>
+                <% send(slot).each do |item| %>
+                  <%= item %>
+                <% end %>
+              <% end %>
+            <% end %>
+          ERB
+
+          renders_many :heads, Item::HeadComponent
+          renders_many :bodies, Item::BodyComponent
+          renders_many :foots, Item::FootComponent
+
+          tracks_slot_order registered_slots.keys
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class TableComponent < BaseComponent
+        SIZES = %w[xs sm md lg xl].freeze
+
+        CSS_CLASSES_DEFAULT = %w[table].freeze
+        CSS_CLASSES_VARIANTS = (
+          %w[table-zebra table-pin-rows table-pin-cols] +
+          SIZES.map { |key| "table-#{key}" }
+        ).freeze
+        CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+        erb_template <<-ERB
+          <%= tag.table(**set_options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        renders_many :items, Table::ItemComponent
+
+        def initialize(
+            zebra: false,
+            size: nil,
+            pinned_rows: false,
+            pinned_cols: false,
+            **args
+          )
+          @zebra = zebra
+          @size = size
+          @pinned_rows = pinned_rows
+          @pinned_cols = pinned_cols
+
+          super(**args)
+        end
+
+        private
+
+        def css_class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            zebra_css_class,
+            size_css_class,
+            pinned_rows_css_class,
+            pinned_cols_css_class,
+            @css_class
+          ])
+        end
+
+        def zebra_css_class
+          "table-zebra" if @zebra
+        end
+
+        def size_css_class
+          "table-#{@size}" if SIZES.include?(@size)
+        end
+
+        def pinned_rows_css_class
+          "table-pin-rows" if @pinned_rows
+        end
+
+        def pinned_cols_css_class
+          "table-pin-cols" if @pinned_cols
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/timeline/item/item_end_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Timeline
+        module Item
+          class ItemEndComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[timeline-end].freeze
+            CSS_CLASSES_VARIANTS = %w[timeline-box].freeze
+            CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+
+            def initialize(
+                box: false,
+                **args
+              )
+              @box = box
+
+              super(**args)
+            end
+
+            private
+
+            def css_class_string
+              TailwindMerge::Merger.new.merge([
+                *CSS_CLASSES_DEFAULT,
+                box_css_class,
+                @css_class
+              ])
+            end
+
+            def box_css_class
+              "timeline-box" if @box
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/timeline/item/item_middle_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Timeline
+        module Item
+          class ItemMiddleComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[timeline-middle].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/timeline/item/item_start_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Timeline
+        module Item
+          class ItemStartComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[timeline-start].freeze
+            CSS_CLASSES_VARIANTS = %w[timeline-box].freeze
+            CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+
+            def initialize(
+                box: false,
+                **args
+              )
+              @box = box
+
+              super(**args)
+            end
+
+            private
+
+            def css_class_string
+              TailwindMerge::Merger.new.merge([
+                *CSS_CLASSES_DEFAULT,
+                box_css_class,
+                @css_class
+              ])
+            end
+
+            def box_css_class
+              "timeline-box" if @box
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/timeline/item/line_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Timeline
+        module Item
+          class LineComponent < BaseComponent
+            erb_template <<-ERB
+              <hr <%= tag.attributes(set_options) %> />
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Timeline
+        class ItemComponent < BaseComponent
+          CSS_CLASSES = (
+            Item::ItemStartComponent::CSS_CLASSES +
+            Item::ItemMiddleComponent::CSS_CLASSES +
+            Item::ItemEndComponent::CSS_CLASSES
+          ).freeze
+
+          erb_template <<-ERB
+            <%= tag.li(**set_options) do %>
+              <% content.present? %>
+
+              <%= line_start %>
+
+              <% slot_order.each do |slot| %>
+                <%= send(slot) if send(slot).present? %>
+              <% end %>
+
+              <%= line_end %>
+            <% end %>
+          ERB
+
+          renders_one :item_start, Item::ItemStartComponent
+          renders_one :item_middle, Item::ItemMiddleComponent
+          renders_one :item_end, Item::ItemEndComponent
+          renders_one :line_start, Item::LineComponent
+          renders_one :line_end, Item::LineComponent
+
+
+          tracks_slot_order registered_slots.except(:line_start ,:line_end).keys
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class TimelineComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[timeline].freeze
+        CSS_CLASSES_VARIANTS = %w[timeline-horizontal timeline-vertical timeline-snap-icon timeline-compact].freeze
+        CSS_CLASSES = (
+          CSS_CLASSES_DEFAULT +
+          CSS_CLASSES_VARIANTS +
+          Timeline::ItemComponent::CSS_CLASSES
+        ).freeze
+
+        erb_template <<-ERB
+          <%= tag.ul(**set_options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        renders_many :items, Timeline::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
+          "timeline-vertical" if @vertical
+        end
+      end
+    end
+  end
+end

data/app/controllers/ui_components/daisy_ui/data_display_components_controller.rb

@@ -8,6 +8,28 @@ module UiComponents
       def avatar; end
 
       def badge; end
+
+      def card; end
+
+      def carousel; end
+
+      def chat; end
+
+      def countdown; end
+
+      def diff; end
+
+      def kbd; end
+
+      def list; end
+
+      def stat; end
+
+      def status; end
+
+      def table; end
+
+      def timeline; end
     end
   end
 end

data/app/helpers/data_display/carousel_helper.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module DataDisplay
+  module CarouselHelper
+    def data_display_carousel_handle_component_params(key:)
+      params = { align: "#{key}", css_class: "rounded-box" }
+
+      params.delete(:align) if key == "start"
+
+      params.compact_blank.filter_map { |k, v| "#{k}: #{v.inspect}" }.join(", ")
+    end
+  end
+end

data/app/views/ui_components/daisy_ui/action_components/button.html.erb

@@ -9,14 +9,14 @@
     </ul>
   </div>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Button" } %>
-    <%= document.with_body do |body| %>
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Button" } %>
+    <%= doc.with_body do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
-                  <$= render #{component}.new do $>
-                    Default
-                  <$ end $>
+                  <$= render #{component}.new.with_content("Default") $>
                 ERB
       ) %>
     <% end %>
@@ -24,15 +24,13 @@
 
   <% sizes = { 'xs' => 'Xsmall', 'sm' => 'Small', 'md' => 'Medium', 'lg' => 'Large', 'xl' => 'Xlarge' } %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Button sizes" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Button sizes" } %>
+    <%= doc.with_body do |body| %>
       <% sizes.each do |key, value| %>
         <%= body.with_preview_example(
           source: <<~ERB
-                    <$= render #{component}.new#{"(size: \"#{key}\")" if key != "md"} do $>
-                      #{value}
-                    <$ end $>
+                    <$= render #{component}.new#{"(size: \"#{key}\")" if key != "md"}.with_content("#{value}") $>
                   ERB
         ) %>
       <% end %>
@@ -41,15 +39,13 @@
 
   <% colors = { 'default' => 'Default', 'primary' => 'Primary', 'secondary' => 'Secondary', 'accent' => 'Accent', 'info' => 'Info', 'success' => 'Success', 'warning' => 'Warning', 'error' => 'Error' } %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Button colors" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Button colors" } %>
+    <%= doc.with_body do |body| %>
       <% colors.each do |key, value| %>
         <%= body.with_preview_example(
           source: <<~ERB
-                    <$= render #{component}.new#{"(color: \"#{key}\")" if key != "default"} do $>
-                      #{value}
-                    <$ end $>
+                    <$= render #{component}.new#{"(color: \"#{key}\")" if key != "default"}.with_content("#{value}") $>
                   ERB
         ) %>
       <% end %>
@@ -59,18 +55,16 @@
   <% kinds = { 'soft' => 'Soft', 'outline' => 'Outline', 'dash' => 'Dash', 'active' => 'Active', 'disabled' => 'Disabled', 'ghost' => 'Ghost', 'link' => 'Link' } %>
 
   <% kinds.each do |kind_key, kind_value| %>
-    <%= render DocumentationComponent.new do |document| %>
-      <%= document.with_header { "# #{kind_value} buttons" } %>
-      <%= document.with_body do |body| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# #{kind_value} buttons" } %>
+      <%= doc.with_body do |body| %>
         <% colors.each do |color_key, value| %>
 
           <% next if action_button_skip_kind(kind_key:, color_key:) %>
 
           <%= body.with_preview_example(
             source: <<~ERB
-                      <$= render #{component}.new(#{action_button_handle_component_params(kind_key:, color_key:)}) do $>
-                        #{value}
-                      <$ end $>
+                      <$= render #{component}.new(#{action_button_handle_component_params(kind_key:, color_key:)}).with_content("#{value}") $>
                     ERB
           ) %>
         <% end %>
@@ -80,15 +74,13 @@
 
   <% wide_sizes = { 'wide' => 'Wide', 'block' => 'Block' } %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Wide buttons" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Wide buttons" } %>
+    <%= doc.with_body do |body| %>
       <% wide_sizes.each do |key, value| %>
         <%= body.with_preview_example(
           source: <<~ERB
-                    <$= render #{component}.new(wide_size: "#{key}") do $>
-                      #{value}
-                    <$ end $>
+                    <$= render #{component}.new(wide_size: "#{key}").with_content("#{value}") $>
                   ERB
         ) %>
       <% end %>
@@ -97,9 +89,9 @@
 
   <% shapes = { 'square' => 'Square', 'circle' => 'Circle' } %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Shape buttons" } %>
-    <%= document.with_body do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Shape buttons" } %>
+    <%= doc.with_body do |body| %>
       <% shapes.each do |key, value| %>
         <%= body.with_preview_example(
           source: <<~ERB
@@ -111,4 +103,14 @@
       <% end %>
     <% end %>
   <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Button</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Dropdown >", daisy_ui_dropdown_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
 </div>

data/app/views/ui_components/daisy_ui/action_components/dropdown.html.erb

@@ -10,16 +10,18 @@
     </ul>
   </div>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Dropdown" } %>
-    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Dropdown" } %>
+    <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |dropdown| $>
-                    <$= dropdown.with_anchor { "Click" } $>
+                    <$= dropdown.with_anchor_content("Click") $>
                     <$= dropdown.with_menu do |menu| $>
-                      <$= menu.with_item { "Item 1" } $>
-                      <$= menu.with_item { "Item 2" } $>
+                      <$= menu.with_item_content("Item 1") $>
+                      <$= menu.with_item_content("Item 2") $>
                     <$ end $>
                   <$ end $>
                 ERB
@@ -32,18 +34,18 @@
 
   <% axes.each do |axis_key| %>
     <% aligns.each do |align_key| %>
-      <%= render DocumentationComponent.new do |document| %>
-        <%= document.with_header { action_dropdown_handle_component_title(axis_key:, align_key:) } %>
-        <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+      <%= render DocumentationComponent.new do |doc| %>
+        <%= doc.with_header { action_dropdown_handle_component_title(axis_key:, align_key:) } %>
+        <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
           <% component_params = action_dropdown_handle_component_params(axis_key:, align_key:) %>
 
           <%= body.with_preview_example(
             source: <<~ERB
                       <$= render #{component}.new#{"(#{component_params})" if component_params.present?} do |dropdown| $>
-                        <$= dropdown.with_anchor { "Click" } $>
+                        <$= dropdown.with_anchor_content("Click") $>
                         <$= dropdown.with_menu do |menu| $>
-                          <$= menu.with_item { "Item 1" } $>
-                          <$= menu.with_item { "Item 2" } $>
+                          <$= menu.with_item_content("Item 1") $>
+                          <$= menu.with_item_content("Item 2") $>
                         <$ end $>
                       <$ end $>
                     ERB
@@ -56,16 +58,16 @@
   <% events = %w[hover opened] %>
 
   <% events.each do |key| %>
-    <%= render DocumentationComponent.new do |document| %>
-      <%= document.with_header { "# Dropdown - #{key}" } %>
-      <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# Dropdown - #{key}" } %>
+      <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
         <%= body.with_preview_example(
           source: <<~ERB
                     <$= render #{component}.new(#{key}: true) do |dropdown| $>
-                      <$= dropdown.with_anchor { "Click" } $>
+                      <$= dropdown.with_anchor_content("Click") $>
                       <$= dropdown.with_menu do |menu| $>
-                        <$= menu.with_item { "Item 1" } $>
-                        <$= menu.with_item { "Item 2" } $>
+                        <$= menu.with_item_content("Item 1") $>
+                        <$= menu.with_item_content("Item 2") $>
                       <$ end $>
                     <$ end $>
                   ERB
@@ -74,13 +76,13 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Card as dropdown" } %>
-    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Card as dropdown" } %>
+    <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   <$= render #{component}.new do |dropdown| $>
-                    <$= dropdown.with_anchor(css_class: "m-1") { "Click" } $>
+                    <$= dropdown.with_anchor(css_class: "m-1").with_content("Click") $>
                     <$= dropdown.with_card do |card| $>
                       <$= card.with_item do $>
                         <p>This is a card. You can use any element as a dropdown.</p>
@@ -92,9 +94,9 @@
     <% end %>
   <% end %>
 
-  <%= render DocumentationComponent.new do |document| %>
-    <%= document.with_header { "# Helper dropdown" } %>
-    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Helper dropdown" } %>
+    <%= doc.with_body(preview_options: { css_class: "text-center" }) do |body| %>
       <%= body.with_preview_example(
         source: <<~ERB
                   A normal text and a helper dropdown
@@ -114,4 +116,15 @@
       ) %>
     <% end %>
   <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Dropdown</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Button", daisy_ui_button_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Modal >", daisy_ui_modal_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
 </div>