better_ui 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6522f1369534716a8fe823429de29dad169ad4218482f5b3862b55f4f540831
-  data.tar.gz: 58ffe37cb7d9f769727b46430684b50d0ddbd1254e6b67838a3e5ba52d3a387a
+  metadata.gz: 7b6dbaeb8dede2be21e4bcff93ba5a7793a08f9e84521c2b46bd8e879be6d072
+  data.tar.gz: b9f58c90c95a748e694018c85aff6ceeb23ecee0f155b8cb45d9b64dc78da2e1
 SHA512:
-  metadata.gz: 9c3190b2940333413e85612676ab048b9c06a24a8138f99b202704cfc9799985386c03a37cb9485a7d57e2ca679ac1bd52535292d5ecaa36930667e5427404af
-  data.tar.gz: f11573aa7341a77d293c2af1f1ff602cb9a7eaf494767175b93459b25cbdb4a0008eacff85f2d25d8c3bacedbb99800c6fb5ef74e28ec412ac8576c8b1ac184d
+  metadata.gz: 7bba346a1d310e3869a232212c8708bbff5ef18f048d9361acc895efa78709b6de1e78bfee44dc3b30db77daf3cf380093331d1443b90d0bb6c18a7ad5d9e2e3
+  data.tar.gz: be0e614d6d37d86946d7908e8f2ae0ff83a452dcfc7fc1dd29c42560f77a368bab654e556e767e2d06dcf26236281b9f39987221f0bbee451ff7a16d1125cf39

data/app/components/better_ui/general/dropdown/component.html.erb

@@ -0,0 +1,14 @@
+<div <%= tag.attributes(container_attributes) %>>
+  <button <%= tag.attributes(trigger_attributes) %>>
+    <%= @trigger %>
+    <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </button>
+
+  <div <%= tag.attributes(menu_attributes) %>>
+    <div class="py-1" role="none">
+      <%= content %>
+    </div>
+  </div>
+</div>

data/app/components/better_ui/general/dropdown/component.rb

@@ -0,0 +1,219 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Dropdown
+      class Component < ViewComponent::Base
+        attr_reader :trigger, :position, :theme, :size, :rounded, :animation, :classes, :html_options
+
+        # Classi base per il contenitore dropdown
+        DROPDOWN_CONTAINER_CLASSES = "relative inline-block"
+
+        # Classi base per il pulsante trigger
+        DROPDOWN_TRIGGER_BASE_CLASSES = "inline-flex items-center justify-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors"
+
+        # Classi base per il menu dropdown  
+        DROPDOWN_MENU_BASE_CLASSES = "absolute z-50 mt-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none"
+
+        # Temi per il trigger del dropdown con classi Tailwind dirette
+        DROPDOWN_TRIGGER_THEME = {
+          default: "bg-white border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-blue-500",
+          white: "bg-white border-gray-300 text-gray-900 hover:bg-gray-50 focus:ring-gray-500",
+          red: "bg-red-600 border-red-600 text-white hover:bg-red-700 focus:ring-red-500",
+          rose: "bg-rose-600 border-rose-600 text-white hover:bg-rose-700 focus:ring-rose-500",
+          orange: "bg-orange-600 border-orange-600 text-white hover:bg-orange-700 focus:ring-orange-500",
+          green: "bg-green-600 border-green-600 text-white hover:bg-green-700 focus:ring-green-500",
+          blue: "bg-blue-600 border-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+          yellow: "bg-yellow-500 border-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500",
+          violet: "bg-violet-600 border-violet-600 text-white hover:bg-violet-700 focus:ring-violet-500"
+        }.freeze
+
+        # Dimensioni del trigger con classi Tailwind dirette
+        DROPDOWN_TRIGGER_SIZE = {
+          small: "px-3 py-1.5 text-sm",
+          medium: "px-4 py-2 text-sm",
+          large: "px-6 py-3 text-base"
+        }.freeze
+
+        # Border radius con classi Tailwind dirette
+        DROPDOWN_ROUNDED = {
+          none: "rounded-none",
+          small: "rounded-md",
+          medium: "rounded-lg",
+          large: "rounded-xl",
+          full: "rounded-full"
+        }.freeze
+
+        # Posizioni del menu dropdown
+        DROPDOWN_POSITION = {
+          bottom: "top-full left-0",
+          top: "bottom-full left-0",
+          left: "top-0 right-full mr-2",
+          right: "top-0 left-full ml-2"
+        }.freeze
+
+        # Animazioni del dropdown
+        DROPDOWN_ANIMATION = {
+          fade: "transition-opacity duration-150",
+          slide: "transition-all duration-150 transform",
+          none: ""
+        }.freeze
+
+        def initialize(
+          trigger:,
+          position: :bottom,
+          theme: :default,
+          size: :medium,
+          rounded: :medium,
+          animation: :fade,
+          classes: nil,
+          **html_options
+        )
+          @trigger = trigger
+          @position = position.to_sym
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @rounded = rounded.to_sym
+          @animation = animation.to_sym
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il contenitore
+        def container_classes
+          [
+            DROPDOWN_CONTAINER_CLASSES,
+            @classes
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per il trigger
+        def trigger_classes
+          [
+            DROPDOWN_TRIGGER_BASE_CLASSES,
+            get_trigger_theme_classes,
+            get_trigger_size_classes,
+            get_trigger_rounded_classes
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per il menu
+        def menu_classes
+          [
+            DROPDOWN_MENU_BASE_CLASSES,
+            get_position_classes,
+            get_animation_classes,
+            get_menu_rounded_classes
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi per il contenitore
+        def container_attributes
+          attrs = {
+            class: container_classes,
+            "data-dropdown": true
+          }
+
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Restituisce gli attributi per il trigger
+        def trigger_attributes
+          {
+            type: "button",
+            class: trigger_classes,
+            "data-dropdown-trigger": true,
+            "aria-expanded": "false",
+            "aria-haspopup": "true"
+          }
+        end
+
+        # Restituisce gli attributi per il menu
+        def menu_attributes
+          {
+            class: menu_classes,
+            "data-dropdown-menu": true,
+            role: "menu",
+            "aria-orientation": "vertical",
+            style: "display: none;"
+          }
+        end
+
+        # Verifica se rendere il componente
+        def render?
+          @trigger.present?
+        end
+
+        private
+
+        def get_trigger_theme_classes
+          DROPDOWN_TRIGGER_THEME[@theme] || DROPDOWN_TRIGGER_THEME[:default]
+        end
+
+        def get_trigger_size_classes
+          DROPDOWN_TRIGGER_SIZE[@size] || DROPDOWN_TRIGGER_SIZE[:medium]
+        end
+
+        def get_trigger_rounded_classes
+          DROPDOWN_ROUNDED[@rounded] || DROPDOWN_ROUNDED[:medium]
+        end
+
+        def get_menu_rounded_classes
+          DROPDOWN_ROUNDED[@rounded] || DROPDOWN_ROUNDED[:medium]
+        end
+
+        def get_position_classes
+          DROPDOWN_POSITION[@position] || DROPDOWN_POSITION[:bottom]
+        end
+
+        def get_animation_classes
+          DROPDOWN_ANIMATION[@animation] || DROPDOWN_ANIMATION[:fade]
+        end
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_rounded
+          validate_position
+          validate_animation
+        end
+
+        def validate_theme
+          unless DROPDOWN_TRIGGER_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{DROPDOWN_TRIGGER_THEME.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless DROPDOWN_TRIGGER_SIZE.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{DROPDOWN_TRIGGER_SIZE.keys.join(', ')}"
+          end
+        end
+
+        def validate_rounded
+          unless DROPDOWN_ROUNDED.keys.include?(@rounded)
+            raise ArgumentError, "Il border radius deve essere uno tra: #{DROPDOWN_ROUNDED.keys.join(', ')}"
+          end
+        end
+
+        def validate_position
+          unless DROPDOWN_POSITION.keys.include?(@position)
+            raise ArgumentError, "La posizione deve essere una tra: #{DROPDOWN_POSITION.keys.join(', ')}"
+          end
+        end
+
+        def validate_animation
+          unless DROPDOWN_ANIMATION.keys.include?(@animation)
+            raise ArgumentError, "L'animazione deve essere una tra: #{DROPDOWN_ANIMATION.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/dropdown/divider_component.html.erb

@@ -0,0 +1 @@
+<div <%= tag.attributes(divider_attributes) %>></div>

data/app/components/better_ui/general/dropdown/divider_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Dropdown
+      class DividerComponent < ViewComponent::Base
+        attr_reader :classes, :html_options
+
+        # Classi base per il divisore del dropdown
+        DROPDOWN_DIVIDER_CLASSES = "border-t border-gray-100 my-1"
+
+        def initialize(classes: nil, **html_options)
+          @classes = classes
+          @html_options = html_options
+        end
+
+        # Combina tutte le classi per il divisore
+        def divider_classes
+          [
+            DROPDOWN_DIVIDER_CLASSES,
+            @classes
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi per il divisore
+        def divider_attributes
+          attrs = {
+            class: divider_classes,
+            role: "separator"
+          }
+
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/dropdown/item_component.html.erb

@@ -0,0 +1,6 @@
+<<%= tag_name %> <%= tag.attributes(item_attributes) %>>
+  <% if @icon.present? %>
+    <span class="mr-3 flex-shrink-0"><%= bui_icon(@icon, classes: "h-5 w-5") %></span>
+  <% end %>
+  <%= @text %>
+</<%= tag_name %>>

data/app/components/better_ui/general/dropdown/item_component.rb

@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Dropdown
+      class ItemComponent < ViewComponent::Base
+        include BetterUi::General::Components::Icon::IconHelper
+        
+        attr_reader :text, :icon, :href, :theme, :disabled, :active, :classes, :html_options
+
+        # Classi base per l'elemento del dropdown
+        DROPDOWN_ITEM_BASE_CLASSES = "flex items-center w-full px-4 py-2 text-sm transition-colors"
+
+        # Temi per gli elementi del dropdown con classi Tailwind dirette
+        DROPDOWN_ITEM_THEME = {
+          default: "text-gray-700 hover:bg-gray-100 hover:text-gray-900",
+          white: "text-gray-900 hover:bg-gray-50",
+          red: "text-red-700 hover:bg-red-50 hover:text-red-900",
+          rose: "text-rose-700 hover:bg-rose-50 hover:text-rose-900",
+          orange: "text-orange-700 hover:bg-orange-50 hover:text-orange-900",
+          green: "text-green-700 hover:bg-green-50 hover:text-green-900",
+          blue: "text-blue-700 hover:bg-blue-50 hover:text-blue-900",
+          yellow: "text-yellow-700 hover:bg-yellow-50 hover:text-yellow-900",
+          violet: "text-violet-700 hover:bg-violet-50 hover:text-violet-900"
+        }.freeze
+
+        # Stati per gli elementi del dropdown
+        DROPDOWN_ITEM_STATE_DISABLED = "opacity-50 cursor-not-allowed pointer-events-none"
+        DROPDOWN_ITEM_STATE_ACTIVE = "bg-gray-100 text-gray-900"
+
+        def initialize(
+          text:,
+          icon: nil,
+          href: nil,
+          theme: :default,
+          disabled: false,
+          active: false,
+          classes: nil,
+          **html_options
+        )
+          @text = text
+          @icon = icon
+          @href = href
+          @theme = theme.to_sym
+          @disabled = disabled
+          @active = active
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per l'elemento
+        def item_classes
+          classes = [
+            DROPDOWN_ITEM_BASE_CLASSES,
+            get_theme_classes,
+            @classes
+          ]
+
+          classes << DROPDOWN_ITEM_STATE_DISABLED if @disabled
+          classes << DROPDOWN_ITEM_STATE_ACTIVE if @active
+
+          classes.compact.join(" ")
+        end
+
+        # Restituisce gli attributi per l'elemento
+        def item_attributes
+          attrs = {
+            class: item_classes,
+            role: "menuitem"
+          }
+
+          if @href.present? && !@disabled
+            attrs[:href] = @href
+          end
+
+          if @disabled
+            attrs["aria-disabled"] = "true"
+            attrs[:tabindex] = "-1"
+          end
+
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Determina se usare un link o un button
+        def tag_name
+          @href.present? && !@disabled ? :a : :button
+        end
+
+        # Verifica se rendere il componente
+        def render?
+          @text.present?
+        end
+
+        private
+
+        def get_theme_classes
+          DROPDOWN_ITEM_THEME[@theme] || DROPDOWN_ITEM_THEME[:default]
+        end
+
+        def validate_params
+          validate_theme
+        end
+
+        def validate_theme
+          unless DROPDOWN_ITEM_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{DROPDOWN_ITEM_THEME.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/modal/component.html.erb

@@ -0,0 +1,42 @@
+<%# Template per il modal %>
+<% if @backdrop %>
+  <%= tag.div **backdrop_attributes do %>
+    <%= tag.div **container_attributes do %>
+      <%# Header del modal %>
+      <%= tag.div **header_attributes do %>
+        <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
+        <% if @closable %>
+          <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-200" aria-label="Chiudi modal">
+            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        <% end %>
+      <% end %>
+      
+      <%# Body del modal %>
+      <div class="p-6">
+        <%= content %>
+      </div>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= tag.div **container_attributes do %>
+    <%# Header del modal %>
+    <%= tag.div **header_attributes do %>
+      <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
+      <% if @closable %>
+        <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-200" aria-label="Chiudi modal">
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      <% end %>
+    <% end %>
+    
+    <%# Body del modal %>
+    <div class="p-6">
+      <%= content %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/better_ui/general/modal/component.rb

@@ -0,0 +1,165 @@
+module BetterUi
+  module General
+    module Modal
+      class Component < ViewComponent::Base
+        attr_reader :title, :theme, :size, :backdrop, :closable, :classes, :html_options
+
+        # Classi base sempre presenti per il backdrop
+        MODAL_BACKDROP_CLASSES = "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
+
+        # Classi base per il contenitore del modal
+        MODAL_CONTAINER_CLASSES = "relative bg-white shadow-xl w-full"
+
+        # Temi dell'header del modal con classi Tailwind dirette
+        MODAL_THEME = {
+          default: "bg-gray-50 border-b border-gray-200 text-gray-900",
+          white: "bg-white border-b border-gray-200 text-gray-900",
+          red: "bg-red-50 border-b border-red-200 text-red-900",
+          rose: "bg-rose-50 border-b border-rose-200 text-rose-900",
+          orange: "bg-orange-50 border-b border-orange-200 text-orange-900",
+          green: "bg-green-50 border-b border-green-200 text-green-900",
+          blue: "bg-blue-50 border-b border-blue-200 text-blue-900",
+          yellow: "bg-yellow-50 border-b border-yellow-200 text-yellow-900",
+          violet: "bg-violet-50 border-b border-violet-200 text-violet-900"
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        MODAL_SIZES = {
+          small: "max-w-sm",
+          medium: "max-w-md",
+          large: "max-w-2xl"
+        }
+
+        # Border radius con classi Tailwind dirette
+        MODAL_ROUNDED = {
+          none: "rounded-none",
+          small: "rounded-md",
+          medium: "rounded-lg",
+          large: "rounded-xl",
+          full: "rounded-full"
+        }
+
+        # Inizializzazione del componente
+        def initialize(
+          title:,
+          theme: :default,
+          size: :medium,
+          rounded: :medium,
+          backdrop: true,
+          closable: true,
+          classes: nil,
+          **html_options
+        )
+          @title = title
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @rounded = rounded.to_sym
+          @backdrop = backdrop
+          @closable = closable
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il backdrop
+        def backdrop_classes
+          MODAL_BACKDROP_CLASSES
+        end
+
+        # Combina tutte le classi per il contenitore
+        def container_classes
+          [
+            MODAL_CONTAINER_CLASSES,
+            get_modal_size_classes,
+            get_modal_rounded_classes,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per l'header
+        def header_classes
+          [
+            "flex items-center justify-between p-6",
+            get_modal_theme_classes
+          ].compact.join(" ")
+        end
+
+        def get_modal_theme_classes
+          MODAL_THEME[@theme] || MODAL_THEME[:default]
+        end
+
+        def get_modal_size_classes
+          MODAL_SIZES[@size] || MODAL_SIZES[:medium]
+        end
+
+        def get_modal_rounded_classes
+          MODAL_ROUNDED[@rounded] || MODAL_ROUNDED[:medium]
+        end
+
+        # Restituisce gli attributi per il backdrop
+        def backdrop_attributes
+          attrs = {
+            class: backdrop_classes
+          }
+
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Restituisce gli attributi per il contenitore
+        def container_attributes
+          {
+            class: container_classes,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "modal-title"
+          }
+        end
+
+        # Restituisce gli attributi per l'header
+        def header_attributes
+          {
+            class: header_classes
+          }
+        end
+
+        # Verifica se rendere il componente
+        def render?
+          @title.present?
+        end
+
+        private
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_rounded
+        end
+
+        def validate_theme
+          unless MODAL_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{MODAL_THEME.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless MODAL_SIZES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{MODAL_SIZES.keys.join(', ')}"
+          end
+        end
+
+        def validate_rounded
+          unless MODAL_ROUNDED.keys.include?(@rounded)
+            raise ArgumentError, "Il border radius deve essere uno tra: #{MODAL_ROUNDED.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end