better_ui 0.1.1 → 0.2.0

data/app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Dropdown
+        module DropdownHelper
+          ##
+          # Crea un componente dropdown interattivo con menu contestuale.
+          #
+          # @param trigger [String] Il testo del pulsante trigger (obbligatorio)
+          # @param position [Symbol] La posizione del menu dropdown (:bottom, :top, :left, :right)
+          # @param theme [Symbol] Il tema colore del trigger (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+          # @param size [Symbol] La dimensione del trigger (:small, :medium, :large)
+          # @param rounded [Symbol] Il border radius (:none, :small, :medium, :large, :full)
+          # @param animation [Symbol] Il tipo di animazione (:fade, :slide, :none)
+          # @param classes [String] Classi CSS aggiuntive
+          # @param options [Hash] Attributi HTML aggiuntivi
+          # @param block [Proc] Il contenuto del menu dropdown
+          #
+          # @return [String] Il markup HTML del componente dropdown
+          #
+          # @example Uso base
+          #   <%= bui_dropdown(trigger: "Azioni") do %>
+          #     <%= bui_dropdown_item(text: "Modifica") %>
+          #   <% end %>
+          #
+          # @example Con posizione e tema
+          #   <%= bui_dropdown(trigger: "Menu", position: :top, theme: :blue) do %>
+          #     <%= bui_dropdown_item(text: "Profilo", icon: "user") %>
+          #     <%= bui_dropdown_divider %>
+          #     <%= bui_dropdown_item(text: "Logout", icon: "logout") %>
+          #   <% end %>
+          #
+          # @example Con dimensioni e stile
+          #   <%= bui_dropdown(trigger: "Opzioni", size: :large, rounded: :full, animation: :slide) do %>
+          #     <%= bui_dropdown_item(text: "Impostazioni", icon: "cog") %>
+          #   <% end %>
+          #
+          # @example Con link e azioni
+          #   <%= bui_dropdown(trigger: "Utente", theme: :green) do %>
+          #     <%= bui_dropdown_item(text: "Dashboard", href: "/dashboard") %>
+          #     <%= bui_dropdown_item(text: "Profilo", href: "/profile") %>
+          #     <%= bui_dropdown_divider %>
+          #     <%= bui_dropdown_item(text: "Elimina", theme: :red, icon: "trash") %>
+          #   <% end %>
+          #
+          # @example Con attributi HTML personalizzati
+          #   <%= bui_dropdown(trigger: "Menu", id: "main-menu", data: { controller: "dropdown" }) do %>
+          #     <%= bui_dropdown_item(text: "Item 1") %>
+          #   <% end %>
+          #
+          def bui_dropdown(
+            trigger:,
+            position: :bottom,
+            theme: :default,
+            size: :medium,
+            rounded: :medium,
+            animation: :fade,
+            classes: '',
+            **options,
+            &block
+          )
+            render BetterUi::General::Dropdown::Component.new(
+              trigger: trigger,
+              position: position,
+              theme: theme,
+              size: size,
+              rounded: rounded,
+              animation: animation,
+              classes: classes,
+              **options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/dropdown/item_helper.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Dropdown
+        module ItemHelper
+          ##
+          # Crea un elemento del menu dropdown.
+          #
+          # @param text [String] Il testo dell'elemento (obbligatorio)
+          # @param icon [String] Il nome dell'icona da mostrare ("edit", "trash", "share", "user", "cog", "logout")
+          # @param href [String] L'URL per renderlo un link
+          # @param theme [Symbol] Il tema colore (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+          # @param disabled [Boolean] Se l'elemento è disabilitato
+          # @param active [Boolean] Se l'elemento è attivo/selezionato
+          # @param classes [String] Classi CSS aggiuntive
+          # @param options [Hash] Attributi HTML aggiuntivi
+          #
+          # @return [String] Il markup HTML dell'elemento dropdown
+          #
+          # @example Uso base
+          #   <%= bui_dropdown_item(text: "Modifica") %>
+          #
+          # @example Con icona
+          #   <%= bui_dropdown_item(text: "Elimina", icon: "trash") %>
+          #
+          # @example Come link
+          #   <%= bui_dropdown_item(text: "Profilo", href: "/profile", icon: "user") %>
+          #
+          # @example Con tema colorato
+          #   <%= bui_dropdown_item(text: "Azione pericolosa", theme: :red, icon: "trash") %>
+          #
+          # @example Disabilitato
+          #   <%= bui_dropdown_item(text: "Non disponibile", disabled: true) %>
+          #
+          def bui_dropdown_item(
+            text:,
+            icon: nil,
+            href: nil,
+            theme: :default,
+            disabled: false,
+            active: false,
+            classes: '',
+            **options
+          )
+            render BetterUi::General::Dropdown::ItemComponent.new(
+              text: text,
+              icon: icon,
+              href: href,
+              theme: theme,
+              disabled: disabled,
+              active: active,
+              classes: classes,
+              **options
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/modal/modal_helper.rb

@@ -0,0 +1,95 @@
+module BetterUi
+  module General
+    module Components
+      module Modal
+        module ModalHelper
+          # Helper per renderizzare un modal
+          #
+          # @param title [String] Il titolo del modal (obbligatorio)
+          # @param theme [Symbol] Il tema dell'header del modal
+          # @param size [Symbol] La dimensione del modal
+          # @param rounded [Symbol] Il border radius del modal
+          # @param backdrop [Boolean] Se mostrare l'overlay di sfondo cliccabile
+          # @param closable [Boolean] Se mostrare il pulsante di chiusura
+          # @param classes [String] Classi CSS aggiuntive per il contenitore
+          # @param html_options [Hash] Attributi HTML aggiuntivi
+          #
+          # @option theme [Symbol] :default (default) Header con sfondo grigio chiaro
+          # @option theme [Symbol] :white Header con sfondo bianco
+          # @option theme [Symbol] :red Header con sfondo rosso chiaro
+          # @option theme [Symbol] :rose Header con sfondo rosa chiaro
+          # @option theme [Symbol] :orange Header con sfondo arancione chiaro
+          # @option theme [Symbol] :green Header con sfondo verde chiaro
+          # @option theme [Symbol] :blue Header con sfondo blu chiaro
+          # @option theme [Symbol] :yellow Header con sfondo giallo chiaro
+          # @option theme [Symbol] :violet Header con sfondo violetto chiaro
+          #
+          # @option size [Symbol] :small (max-w-sm) Modal piccolo
+          # @option size [Symbol] :medium (max-w-md, default) Modal medio
+          # @option size [Symbol] :large (max-w-2xl) Modal grande
+          #
+          # @option rounded [Symbol] :none (rounded-none) Nessun border radius
+          # @option rounded [Symbol] :small (rounded-md) Border radius piccolo
+          # @option rounded [Symbol] :medium (rounded-lg, default) Border radius medio
+          # @option rounded [Symbol] :large (rounded-xl) Border radius grande
+          # @option rounded [Symbol] :full (rounded-full) Border radius completo
+          #
+          # @return [String] HTML del modal
+          #
+          # @example Utilizzo base
+          #   <%= bui_modal(title: "Conferma azione") do %>
+          #     <p>Sei sicuro di voler continuare?</p>
+          #   <% end %>
+          #
+          # @example Con tema, dimensione e border radius
+          #   <%= bui_modal(title: "Attenzione", theme: :red, size: :large, rounded: :large) do %>
+          #     <p>Questa azione non può essere annullata.</p>
+          #   <% end %>
+          #
+          # @example Senza backdrop
+          #   <%= bui_modal(title: "Informazioni", backdrop: false) do %>
+          #     <p>Contenuto del modal senza overlay di sfondo.</p>
+          #   <% end %>
+          #
+          # @example Non chiudibile
+          #   <%= bui_modal(title: "Caricamento", closable: false) do %>
+          #     <p>Operazione in corso...</p>
+          #   <% end %>
+          #
+          # @example Con bottoni di azione
+          #   <%= bui_modal(title: "Elimina elemento", theme: :red) do %>
+          #     <p>Sei sicuro di voler eliminare questo elemento?</p>
+          #     <p class="text-sm text-gray-600 mt-2">Questa azione non può essere annullata.</p>
+          #     
+          #     <div class="flex justify-end space-x-3 mt-6">
+          #       <%= bui_button(label: "Annulla", type: :white, size: :medium) %>
+          #       <%= bui_button(label: "Elimina", type: :red, size: :medium) %>
+          #     </div>
+          #   <% end %>
+          def bui_modal(
+            title:,
+            theme: :default,
+            size: :medium,
+            rounded: :medium,
+            backdrop: true,
+            closable: true,
+            classes: nil,
+            **html_options,
+            &block
+          )
+            render BetterUi::General::Modal::Component.new(
+              title: title,
+              theme: theme,
+              size: size,
+              rounded: rounded,
+              backdrop: backdrop,
+              closable: closable,
+              classes: classes,
+              **html_options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/pagination/pagination_helper.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Pagination
+        module PaginationHelper
+          # Genera un componente di navigazione paginata per liste e tabelle
+          #
+          # @param current_page [Integer] La pagina corrente (1-indexed)
+          # @param total_pages [Integer] Il numero totale di pagine
+          # @param path [String] L'URL base per costruire i link di paginazione
+          # @param theme [Symbol] Il tema del componente (:default, :blue, :red, :green, :yellow, :violet, :orange, :rose, :white)
+          # @param size [Symbol] La dimensione del componente (:small, :medium, :large)
+          # @param window [Integer] Il numero di pagine da mostrare intorno alla pagina corrente (default: 2)
+          # @param show_info [Boolean] Se mostrare le informazioni sui risultati (default: false)
+          # @param per_page [Integer] Il numero di elementi per pagina (richiesto se show_info è true)
+          # @param classes [String] Classi CSS aggiuntive
+          # @param form [FormBuilder, nil] Form builder per l'integrazione con Rails form (opzionale)
+          # @param options [Hash] Attributi HTML aggiuntivi
+          # @return [String] Il markup HTML del componente pagination
+          #
+          # @example Uso base standalone
+          #   <%= bui_pagination(current_page: 3, total_pages: 10, path: '/products') %>
+          #
+          # @example Con tema e dimensione personalizzati
+          #   <%= bui_pagination(
+          #     current_page: 5, 
+          #     total_pages: 20, 
+          #     path: '/articles',
+          #     theme: :blue,
+          #     size: :large
+          #   ) %>
+          #
+          # @example Con informazioni sui risultati
+          #   <%= bui_pagination(
+          #     current_page: 2,
+          #     total_pages: 8,
+          #     path: '/users',
+          #     show_info: true,
+          #     per_page: 25,
+          #     theme: :green
+          #   ) %>
+          #
+          # @example Con finestra di pagine personalizzata
+          #   <%= bui_pagination(
+          #     current_page: 10,
+          #     total_pages: 50,
+          #     path: '/orders',
+          #     window: 3,
+          #     size: :small
+          #   ) %>
+          #
+          # @example Con attributi HTML aggiuntivi
+          #   <%= bui_pagination(
+          #     current_page: 1,
+          #     total_pages: 5,
+          #     path: '/dashboard',
+          #     classes: 'my-4',
+          #     data: { turbo_frame: 'content' }
+          #   ) %>
+          def bui_pagination(current_page:, total_pages:, path:, theme: :default, size: :medium,
+                             window: 2, show_info: false, per_page: nil, classes: '', 
+                             form: nil, **options)
+            render BetterUi::General::Pagination::Component.new(
+              current_page: current_page,
+              total_pages: total_pages,
+              path: path,
+              theme: theme,
+              size: size,
+              window: window,
+              show_info: show_info,
+              per_page: per_page,
+              classes: classes,
+              **options
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/tabs/panel_helper.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Tabs
+        module PanelHelper
+          # Crea un pannello di contenuto associato a una tab
+          #
+          # @param id [String] l'identificatore univoco del pannello (deve corrispondere al target della tab)
+          # @param active [Boolean] se questo pannello è attualmente visibile
+          # @param classes [String] classi CSS aggiuntive da applicare al pannello
+          # @param options [Hash] attributi HTML aggiuntivi da applicare all'elemento
+          # @param block [Proc] il contenuto del pannello
+          # @return [String] l'HTML del pannello
+          #
+          # @example Uso base
+          #   <%= bui_tab_panel(id: "generale", active: true) do %>
+          #     <h3>Impostazioni Generali</h3>
+          #     <p>Contenuto del pannello generale...</p>
+          #   <% end %>
+          #
+          # @example Pannello nascosto
+          #   <%= bui_tab_panel(id: "sicurezza") do %>
+          #     <h3>Sicurezza</h3>
+          #     <p>Contenuto del pannello sicurezza...</p>
+          #   <% end %>
+          #
+          # @example Con classi personalizzate
+          #   <%= bui_tab_panel(id: "notifiche", classes: "p-6 bg-gray-50") do %>
+          #     <h3>Notifiche</h3>
+          #     <p>Contenuto del pannello notifiche...</p>
+          #   <% end %>
+          #
+          # @example Con attributi personalizzati
+          #   <%= bui_tab_panel(id: "dashboard", data: { testid: "dashboard-panel" }) do %>
+          #     <div class="grid grid-cols-2 gap-4">
+          #       <div>Statistiche</div>
+          #       <div>Grafici</div>
+          #     </div>
+          #   <% end %>
+          #
+          # @example Con form Rails
+          #   <%= bui_tab_panel(id: "profile") do %>
+          #     <%= form_with model: @user do |form| %>
+          #       <%= form.text_field :name, class: "form-input" %>
+          #       <%= form.submit "Salva", class: "btn btn-primary" %>
+          #     <% end %>
+          #   <% end %>
+          def bui_tab_panel(id:, active: false, classes: '', **options, &block)
+            render BetterUi::General::Tabs::PanelComponent.new(
+              id: id,
+              active: active,
+              classes: classes,
+              **options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/tabs/tab_helper.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Tabs
+        module TabHelper
+          # Crea una singola tab all'interno di un container tabs
+          #
+          # @param text [String] il testo da visualizzare nella tab
+          # @param target [String] l'ID del pannello associato a questa tab
+          # @param active [Boolean] se questa tab è attualmente attiva
+          # @param icon [String] il nome dell'icona opzionale da visualizzare
+          # @param disabled [Boolean] se questa tab è disabilitata
+          # @param badge [String] il testo/numero del badge opzionale
+          # @param theme [Symbol] il tema di colore della tab (:default, :blue, :red, :green, :yellow, :violet, :orange, :rose, :white)
+          # @param size [Symbol] la dimensione della tab (:small, :medium, :large)
+          # @param classes [String] classi CSS aggiuntive da applicare alla tab
+          # @param options [Hash] attributi HTML aggiuntivi da applicare all'elemento
+          # @return [String] l'HTML della tab
+          #
+          # @example Uso base
+          #   <%= bui_tab(text: "Generale", target: "generale", active: true) %>
+          #
+          # @example Con icona e badge
+          #   <%= bui_tab(text: "Messaggi", target: "messages", icon: "envelope", badge: "3") %>
+          #
+          # @example Tab disabilitata
+          #   <%= bui_tab(text: "Premium", target: "premium", disabled: true, icon: "star") %>
+          #
+          # @example Con temi personalizzati
+          #   <%= bui_tab(text: "Errori", target: "errors", theme: :red, badge: "12") %>
+          #
+          # @example Con attributi personalizzati
+          #   <%= bui_tab(text: "Settings", target: "settings", classes: "font-bold", data: { testid: "settings-tab" }) %>
+          def bui_tab(text:, target:, active: false, icon: nil, disabled: false, badge: nil, 
+                     theme: :default, size: :medium, classes: '', **options)
+            render BetterUi::General::Tabs::TabComponent.new(
+              text: text,
+              target: target,
+              active: active,
+              icon: icon,
+              disabled: disabled,
+              badge: badge,
+              theme: theme,
+              size: size,
+              classes: classes,
+              **options
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/tabs/tabs_helper.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Tabs
+        module TabsHelper
+          # Crea un container di navigazione tabs per organizzare contenuti correlati
+          #
+          # @param variant [Symbol] lo stile delle tabs (:pills, :underline, :bordered, :minimal)
+          # @param theme [Symbol] il tema di colore delle tabs (:default, :blue, :red, :green, :yellow, :violet, :orange, :rose, :white)
+          # @param size [Symbol] la dimensione delle tabs (:small, :medium, :large)
+          # @param orientation [Symbol] l'orientamento delle tabs (:horizontal, :vertical)
+          # @param classes [String] classi CSS aggiuntive da applicare al container
+          # @param options [Hash] attributi HTML aggiuntivi da applicare all'elemento
+          # @param block [Proc] il contenuto delle tabs (le singole tab)
+          # @return [String] l'HTML del container tabs
+          #
+          # @example Uso base
+          #   <%= bui_tabs do %>
+          #     <%= bui_tab(text: "Generale", target: "generale", active: true) %>
+          #     <%= bui_tab(text: "Sicurezza", target: "sicurezza") %>
+          #   <% end %>
+          #
+          # @example Con temi e dimensioni
+          #   <%= bui_tabs(variant: :underline, theme: :blue, size: :large) do %>
+          #     <%= bui_tab(text: "Dashboard", target: "dashboard", active: true, icon: "chart-bar") %>
+          #     <%= bui_tab(text: "Impostazioni", target: "settings", icon: "cog-6-tooth") %>
+          #   <% end %>
+          #
+          # @example Tabs verticali
+          #   <%= bui_tabs(orientation: :vertical, variant: :pills) do %>
+          #     <%= bui_tab(text: "Profilo", target: "profile") %>
+          #     <%= bui_tab(text: "Account", target: "account") %>
+          #   <% end %>
+          #
+          # @example Con attributi personalizzati
+          #   <%= bui_tabs(classes: "my-4", data: { testid: "main-tabs" }) do %>
+          #     <%= bui_tab(text: "Home", target: "home", active: true) %>
+          #   <% end %>
+          #
+          # @example Con Rails form builder
+          #   <%= bui_tabs(form: form, variant: :bordered) do %>
+          #     <%= bui_tab(text: "Dati personali", target: "personal") %>
+          #     <%= bui_tab(text: "Contatti", target: "contacts") %>
+          #   <% end %>
+          def bui_tabs(variant: :pills, theme: :default, size: :medium, orientation: :horizontal, 
+                      classes: '', form: nil, **options, &block)
+            render BetterUi::General::Tabs::Component.new(
+              variant: variant,
+              theme: theme,
+              size: size,
+              orientation: orientation,
+              classes: classes,
+              **options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.1.1"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: better_ui
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - alessiobussolari
@@ -129,6 +129,12 @@ files:
 - app/components/better_ui/general/button/component.rb
 - app/components/better_ui/general/divider/component.html.erb
 - app/components/better_ui/general/divider/component.rb
+- app/components/better_ui/general/dropdown/component.html.erb
+- app/components/better_ui/general/dropdown/component.rb
+- app/components/better_ui/general/dropdown/divider_component.html.erb
+- app/components/better_ui/general/dropdown/divider_component.rb
+- app/components/better_ui/general/dropdown/item_component.html.erb
+- app/components/better_ui/general/dropdown/item_component.rb
 - app/components/better_ui/general/field/component.html.erb
 - app/components/better_ui/general/field/component.rb
 - app/components/better_ui/general/heading/component.html.erb
@@ -151,6 +157,10 @@ files:
 - app/components/better_ui/general/input/textarea/component.rb
 - app/components/better_ui/general/link/component.html.erb
 - app/components/better_ui/general/link/component.rb
+- app/components/better_ui/general/modal/component.html.erb
+- app/components/better_ui/general/modal/component.rb
+- app/components/better_ui/general/pagination/component.html.erb
+- app/components/better_ui/general/pagination/component.rb
 - app/components/better_ui/general/panel/component.html.erb
 - app/components/better_ui/general/panel/component.rb
 - app/components/better_ui/general/progress/component.html.erb
@@ -171,6 +181,12 @@ files:
 - app/components/better_ui/general/table/thead_component.rb
 - app/components/better_ui/general/table/tr_component.html.erb
 - app/components/better_ui/general/table/tr_component.rb
+- app/components/better_ui/general/tabs/component.html.erb
+- app/components/better_ui/general/tabs/component.rb
+- app/components/better_ui/general/tabs/panel_component.html.erb
+- app/components/better_ui/general/tabs/panel_component.rb
+- app/components/better_ui/general/tabs/tab_component.html.erb
+- app/components/better_ui/general/tabs/tab_component.rb
 - app/components/better_ui/general/tag/component.html.erb
 - app/components/better_ui/general/tag/component.rb
 - app/components/better_ui/general/tooltip/component.html.erb
@@ -189,6 +205,9 @@ files:
 - app/helpers/better_ui/general/components/button/button_helper.rb
 - app/helpers/better_ui/general/components/container/container_helper.rb
 - app/helpers/better_ui/general/components/divider/divider_helper.rb
+- app/helpers/better_ui/general/components/dropdown/divider_helper.rb
+- app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb
+- app/helpers/better_ui/general/components/dropdown/item_helper.rb
 - app/helpers/better_ui/general/components/field/field_helper.rb
 - app/helpers/better_ui/general/components/heading/heading_helper.rb
 - app/helpers/better_ui/general/components/icon/icon_helper.rb
@@ -200,6 +219,8 @@ files:
 - app/helpers/better_ui/general/components/input/text/text_helper.rb
 - app/helpers/better_ui/general/components/input/textarea/textarea_helper.rb
 - app/helpers/better_ui/general/components/link/link_helper.rb
+- app/helpers/better_ui/general/components/modal/modal_helper.rb
+- app/helpers/better_ui/general/components/pagination/pagination_helper.rb
 - app/helpers/better_ui/general/components/panel/panel_helper.rb
 - app/helpers/better_ui/general/components/progress/progress_helper.rb
 - app/helpers/better_ui/general/components/spinner/spinner_helper.rb
@@ -210,6 +231,9 @@ files:
 - app/helpers/better_ui/general/components/table/th_helper.rb
 - app/helpers/better_ui/general/components/table/thead_helper.rb
 - app/helpers/better_ui/general/components/table/tr_helper.rb
+- app/helpers/better_ui/general/components/tabs/panel_helper.rb
+- app/helpers/better_ui/general/components/tabs/tab_helper.rb
+- app/helpers/better_ui/general/components/tabs/tabs_helper.rb
 - app/helpers/better_ui/general/components/tag/tag_helper.rb
 - app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb
 - app/jobs/better_ui/application_job.rb