ui_components 0.1.0

data/app/components/ui_components/daisy_ui/action/dropdown_component.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      class DropdownComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[dropdown]
+        CSS_CLASSES_VARIANTS = (
+          %w[dropdown-hover dropdown-open] +
+          ALIGNS.map { |color| "dropdown-#{color}" } +
+          AXES.map { |size| "dropdown-#{size}" }
+        ).freeze
+
+        CSS_CLASSES = (
+          CSS_CLASSES_DEFAULT +
+          CSS_CLASSES_VARIANTS +
+          Dropdown::AnchorComponent::CSS_CLASSES +
+          Dropdown::MenuComponent::CSS_CLASSES +
+          Dropdown::CardComponent::CSS_CLASSES
+        ).freeze
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) do %>
+            <%= anchor %>
+            <%= menu&.content.present? ? menu : card %>
+          <% end %>
+        ERB
+
+        renders_one :anchor, Dropdown::AnchorComponent
+        renders_one :menu, Dropdown::MenuComponent
+        renders_one :card, Dropdown::CardComponent
+
+        def initialize(
+            align: nil,
+            axis: nil,
+            hover: false,
+            opened: false,
+            **args
+          )
+          @align = align
+          @axis = axis
+          @hover = hover
+          @opened = opened
+
+          super(**args)
+        end
+
+        private
+
+        def class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            align_class,
+            axis_class,
+            hover_class,
+            opened_class,
+            @css_class
+          ])
+        end
+
+        def align_class
+          "dropdown-#{@align}" if ALIGNS.include?(@align)
+        end
+
+        def axis_class
+          "dropdown-#{@axis}" if AXES.include?(@axis)
+        end
+
+        def hover_class
+          "dropdown-hover" if @hover
+        end
+
+        def opened_class
+          "dropdown-open" if @opened
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal/anchor_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Modal
+        class AnchorComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[btn].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.button(**set_options) { content } %>
+          ERB
+
+          def initialize(
+              opener:,
+              **args
+            )
+            @opener = opener
+
+            super(**args)
+          end
+
+          private
+
+          def set_options
+            @options.merge!(class: class_string)
+            @options.merge!(style: @css_style) if @css_style.present?
+            @options.merge!(onclick: "#{@opener}.showModal()")
+            @options.compact_blank!
+          end
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              @css_class
+            ])
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/action/item_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Modal
+        module Dialog
+          module Box
+            module Action
+              class ItemComponent < BaseComponent
+                CSS_CLASSES_DEFAULT = %w[btn ml-1].freeze
+                CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+                erb_template <<-ERB
+                  <%= tag.button(**set_options) { content } %>
+                ERB
+
+                private
+
+                def class_string
+                  TailwindMerge::Merger.new.merge([
+                    *CSS_CLASSES_DEFAULT,
+                    @css_class
+                  ])
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/action_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Modal
+        module Dialog
+          module Box
+            class ActionComponent < BaseComponent
+              CSS_CLASSES_DEFAULT = %w[modal-action].freeze
+              CSS_CLASSES = (
+                CSS_CLASSES_DEFAULT +
+                Action::ItemComponent::CSS_CLASSES
+              )
+
+              erb_template <<-ERB
+                <%= tag.div(**set_options) do %>
+                  <form method="dialog">
+                    <% items.each do |item| %>
+                      <%= item %>
+                    <% end %>
+                  </form>
+                <% end %>
+              ERB
+
+              renders_many :items, Action::ItemComponent
+
+              private
+
+              def class_string
+                TailwindMerge::Merger.new.merge([
+                  *CSS_CLASSES_DEFAULT,
+                  @css_class
+                ])
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/body_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Modal
+        module Dialog
+          module Box
+            class BodyComponent < BaseComponent
+              CSS_CLASSES_DEFAULT = %w[py-4].freeze
+              CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+              erb_template <<-ERB
+                <%= tag.div(**set_options) { content } %>
+              ERB
+
+              private
+
+              def class_string
+                TailwindMerge::Merger.new.merge([
+                  *CSS_CLASSES_DEFAULT,
+                  @css_class
+                ])
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/close_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Modal
+        module Dialog
+          module Box
+            class CloseComponent < BaseComponent
+              CSS_CLASSES_DEFAULT = %w[btn btn-sm btn-circle btn-ghost absolute right-2 top-2].freeze
+              CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+              erb_template <<-ERB
+                <form method="dialog">
+                  <%= tag.button(**set_options) { content } %>
+                </form>
+              ERB
+
+              private
+
+              def class_string
+                TailwindMerge::Merger.new.merge([
+                  *CSS_CLASSES_DEFAULT,
+                  @css_class
+                ])
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/title_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Modal
+        module Dialog
+          module Box
+            class TitleComponent < BaseComponent
+              CSS_CLASSES_DEFAULT = %w[text-lg font-bold].freeze
+              CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+              erb_template <<-ERB
+                <%= tag.h3(**set_options) { content } %>
+              ERB
+
+              private
+
+              def class_string
+                TailwindMerge::Merger.new.merge([
+                  *CSS_CLASSES_DEFAULT,
+                  @css_class
+                ])
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Modal
+        module Dialog
+          class BoxComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[modal-box].freeze
+            CSS_CLASSES = (
+              CSS_CLASSES_DEFAULT +
+              Box::TitleComponent::CSS_CLASSES +
+              Box::BodyComponent::CSS_CLASSES +
+              Box::ActionComponent::CSS_CLASSES +
+              Box::CloseComponent::CSS_CLASSES
+            ).freeze
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) do %>
+                <%= close if close&.content.present? %>
+                <%= title %>
+                <%= body %>
+                <%= action unless @backdrop || close&.content.present? %>
+              <% end %>
+            ERB
+
+            renders_one :title, Box::TitleComponent
+            renders_one :body, Box::BodyComponent
+            renders_one :action, Box::ActionComponent
+            renders_one :close, Box::CloseComponent
+
+            def initialize(
+                backdrop: false,
+                **args
+              )
+              @backdrop = backdrop
+
+              super(**args)
+            end
+
+            private
+
+            def class_string
+              TailwindMerge::Merger.new.merge([
+                *CSS_CLASSES_DEFAULT,
+                @css_class
+              ])
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal/dialog_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Modal
+        class DialogComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[modal].freeze
+          CSS_CLASSES = (
+            %w[modal-backdrop] +
+            CSS_CLASSES_DEFAULT +
+            Dialog::BoxComponent::CSS_CLASSES
+          ).freeze
+
+          erb_template <<-ERB
+            <%= tag.dialog(**set_options) do %>
+              <%= box %>
+              <% if @backdrop %>
+                <form method="dialog" class="modal-backdrop">
+                  <button>close</button>
+                </form>
+              <% end %>
+            <% end %>
+          ERB
+
+          renders_one :box, ->(**args) { Dialog::BoxComponent.new(**args.merge(backdrop: @backdrop)) }
+
+          def initialize(
+              backdrop: false,
+              opener:,
+              **args
+            )
+            @backdrop = backdrop
+            @opener = opener
+
+            super(**args)
+          end
+
+          def set_options
+            @options.merge!(class: class_string)
+            @options.merge!(style: @css_style) if @css_style.present?
+            @options.merge!(id: @opener)
+            @options.compact_blank!
+          end
+
+          private
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              @css_class
+            ])
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/modal_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      class ModalComponent < BaseComponent
+        CSS_CLASSES = (
+          Modal::AnchorComponent::CSS_CLASSES +
+          Modal::DialogComponent::CSS_CLASSES
+        ).freeze
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) do %>
+            <%= anchor %>
+            <%= dialog %>
+          <% end %>
+        ERB
+
+        renders_one :anchor, ->(**args) { Modal::AnchorComponent.new(**args.merge(opener: @opener)) }
+        renders_one :dialog, ->(**args) { Modal::DialogComponent.new(**args.merge(opener: @opener)) }
+
+        def initialize(
+            opener: "my_modal",
+            **args
+          )
+          @opener = opener
+
+          super(**args)
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/swap/off_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Swap
+        class OffComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[swap-off].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) { content } %>
+          ERB
+
+          private
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              @css_class
+            ])
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/swap/on_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Swap
+        class OnComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[swap-on].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) { content } %>
+          ERB
+
+          private
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              @css_class
+            ])
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/swap_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      class SwapComponent < BaseComponent
+        EFFECTS = %w[rotate flip]
+
+        CSS_CLASSES_DEFAULT = %w[swap].freeze
+        CSS_CLASSES_VARIANTS = (
+          %w[swap-active] +
+          EFFECTS.map { |key| "swap-#{key}" }
+        ).freeze
+        CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+        erb_template <<-ERB
+          <%= tag.label(**set_options) do %>
+            <input type="checkbox" />
+            <%= on %>
+            <%= off %>
+          <% end %>
+        ERB
+
+        renders_one :on, Swap::OnComponent
+        renders_one :off, Swap::OffComponent
+
+        def initialize(
+            effect: nil,
+            active: false,
+            **args
+          )
+          @effect = effect
+          @active = active
+
+          super(**args)
+        end
+
+        private
+
+        def class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            effect_class,
+            active_class,
+            @css_class
+          ])
+        end
+
+        def effect_class
+          "swap-#{@effect}" if EFFECTS.include?(@effect)
+        end
+
+        def active_class
+          "swap-active" if @active
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    class BaseComponent < ViewComponent::Base
+      require "tailwind_merge"
+
+      SIZES = %w[xs sm lg xl].freeze
+      KINDS = %w[soft outline dash active disabled ghost link].freeze
+      COLORS = %w[neutral primary secondary accent info success warning error].freeze
+      ALIGNS = %w[start center end].freeze
+      AXES = %w[top right bottom left].freeze
+
+      CSS_CLASSES_DEFAULT = %w[].freeze
+      CSS_CLASSES_VARIANTS = %w[].freeze
+      CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+      def initialize(
+          css_class: nil,
+          css_style: nil,
+          options: {}
+        )
+        @css_class = css_class.to_s
+        @css_style = css_style.to_s
+        @options = options
+      end
+
+      private
+
+      def set_options
+        @options.merge!(class: class_string)
+        @options.merge!(style: @css_style) if @css_style.present?
+        @options.compact_blank!
+      end
+
+      def class_string
+        @css_class
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Accordion
+        class AnchorComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[collapse-title].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) { content } %>
+          ERB
+
+          private
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              @css_class
+            ])
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Accordion
+        class BodyComponent < BaseComponent
+          CSS_CLASSES_DEFAULT = %w[collapse-content].freeze
+          CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) { content } %>
+          ERB
+
+          private
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              @css_class
+            ])
+          end
+        end
+      end
+    end
+  end
+end