better_ui 0.1.1 → 0.3.0

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,119 @@
+# 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",
+            "data-bui-dropdown-target": "item"
+          }
+
+          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,5 @@
+<%# Wrapper component con controller Stimulus e slots %>
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <%= trigger %>
+  <%= modal %>
+</div>

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

@@ -0,0 +1,47 @@
+module BetterUi
+  module General
+    module Modal
+      class Component < ViewComponent::Base
+        renders_one :trigger
+        renders_one :modal
+        
+        attr_reader :close_on_backdrop, :close_on_escape, :lock_scroll, :classes, :html_options
+
+
+
+        # Inizializzazione del wrapper component
+        def initialize(
+          close_on_backdrop: true,
+          close_on_escape: true,
+          lock_scroll: true,
+          classes: nil,
+          **html_options
+        )
+          @close_on_backdrop = close_on_backdrop
+          @close_on_escape = close_on_escape
+          @lock_scroll = lock_scroll
+          @classes = classes
+          @html_options = html_options
+        end
+
+        # Combina tutte le classi per il wrapper
+        def wrapper_classes
+          [@classes, @html_options[:class]].compact.join(" ")
+        end
+
+        # Restituisce gli attributi per il wrapper principale (con controller Stimulus)
+        def wrapper_attributes
+          {
+            class: wrapper_classes,
+            'data-controller': 'bui-modal',
+            'data-bui-modal-close-on-backdrop-value': close_on_backdrop,
+            'data-bui-modal-close-on-escape-value': close_on_escape,
+            'data-bui-modal-lock-scroll-value': lock_scroll
+          }.merge(@html_options.except(:class))
+        end
+
+
+      end
+    end
+  end
+end

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

@@ -0,0 +1,52 @@
+<%# Template per il modal content %>
+<% 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 %>
+          <%= helpers.bui_button(
+            label: "Chiudi", 
+            icon: "x-mark",
+            type: :white,
+            size: :small,
+            data: [
+              { name: 'bui-modal-target', value: 'closeButton' },
+              { name: 'action', value: 'click->bui-modal#closeButtonClicked' }
+            ]
+          ) %>
+        <% 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 %>
+        <%= helpers.bui_button(
+          label: "Chiudi", 
+          icon: "x-mark",
+          type: :white,
+          size: :small,
+          data: [
+            { name: 'bui-modal-target', value: 'closeButton' },
+            { name: 'action', value: 'click->bui-modal#closeButtonClicked' }
+          ]
+        ) %>
+      <% end %>
+    <% end %>
+    
+    <%# Body del modal %>
+    <div class="p-6">
+      <%= content %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,160 @@
+module BetterUi
+  module General
+    module Modal
+      class ModalComponent < 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 modal component
+        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
+          {
+            class: backdrop_classes,
+            'data-bui-modal-target': 'backdrop'
+          }
+        end
+
+        # Restituisce gli attributi per il contenitore
+        def container_attributes
+          {
+            class: container_classes,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "modal-title",
+            'data-bui-modal-target': 'container'
+          }
+        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

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

@@ -0,0 +1,85 @@
+<% if should_show_pagination? %>
+  <nav aria-label="Pagination" class="flex items-center justify-between">
+    
+    <!-- Info testo opzionale -->
+    <% if show_info %>
+      <div class="hidden sm:block">
+        <p class="text-sm text-gray-700"><%= info_text %></p>
+      </div>
+    <% end %>
+
+    <!-- Controlli paginazione -->
+    <div class="<%= container_classes %>">
+      
+      <!-- Pulsante Previous -->
+      <% if previous_page %>
+        <a href="<%= build_url(previous_page) %>" 
+           class="<%= page_link_classes(previous_page) %> rounded-l-md"
+           aria-label="Pagina precedente">
+          <span class="sr-only">Precedente</span>
+          <%= bui_icon(name: "chevron-left", size: :medium) %>
+        </a>
+      <% else %>
+        <span class="<%= disabled_classes %> rounded-l-md" aria-label="Pagina precedente">
+          <span class="sr-only">Precedente</span>
+          <%= bui_icon(name: "chevron-left", size: :medium) %>
+        </span>
+      <% end %>
+
+      <!-- Prima pagina se necessaria -->
+      <% if show_left_ellipsis? %>
+        <a href="<%= build_url(1) %>" class="<%= page_link_classes(1) %>">1</a>
+        <span class="<%= disabled_classes %>">...</span>
+      <% end %>
+
+      <!-- Range pagine -->
+      <% page_range.each do |page_num| %>
+        <% if page_num == current_page %>
+          <span aria-current="page" class="<%= page_link_classes(page_num) %>">
+            <%= page_num %>
+          </span>
+        <% else %>
+          <a href="<%= build_url(page_num) %>" 
+             class="<%= page_link_classes(page_num) %>"
+             aria-label="Vai alla pagina <%= page_num %>">
+            <%= page_num %>
+          </a>
+        <% end %>
+      <% end %>
+
+      <!-- Ultima pagina se necessaria -->
+      <% if show_right_ellipsis? %>
+        <span class="<%= disabled_classes %>">...</span>
+        <a href="<%= build_url(total_pages) %>" class="<%= page_link_classes(total_pages) %>">
+          <%= total_pages %>
+        </a>
+      <% end %>
+
+      <!-- Pulsante Next -->
+      <% if next_page %>
+        <a href="<%= build_url(next_page) %>" 
+           class="<%= page_link_classes(next_page) %> rounded-r-md"
+           aria-label="Pagina successiva">
+          <span class="sr-only">Successiva</span>
+          <%= bui_icon(name: "chevron-right", size: :medium) %>
+        </a>
+      <% else %>
+        <span class="<%= disabled_classes %> rounded-r-md" aria-label="Pagina successiva">
+          <span class="sr-only">Successiva</span>
+          <%= bui_icon(name: "chevron-right", size: :medium) %>
+        </span>
+      <% end %>
+
+    </div>
+
+    <!-- Info mobile -->
+    <% if show_info %>
+      <div class="flex flex-1 justify-between sm:hidden">
+        <span class="text-sm text-gray-700">
+          Pagina <%= current_page %> di <%= total_pages %>
+        </span>
+      </div>
+    <% end %>
+
+  </nav>
+<% end %>