better_ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,83 @@
+module BetterUi
+  module General
+    module Components
+      module Panel
+        module PanelHelper
+          # Genera un pannello usando BetterUi::General::Panel::Component
+          #
+          # @param title [String] titolo del pannello (opzionale)
+          # @param body [String] contenuto HTML del pannello (opzionale)
+          # @param header [String] header personalizzato (opzionale)
+          # @param footer [String] footer del pannello (opzionale)
+          # @param theme [Symbol] tema del colore (:default, :white, etc.)
+          # @param style [Symbol] stile (:default, :flat, :raised, :bordered)
+          # @param padding [Symbol] padding interno (:none, :small, :medium, :large)
+          # @param radius [Symbol] raggio dei bordi (:none, :small, :medium, :large, :full)
+          # @param html_options [Hash] opzioni HTML aggiuntive
+          # @return [String] HTML del pannello renderizzato
+          #
+          # @example Uso base
+          #   bui_panel(title: "Dashboard")
+          #   bui_panel(body: "Contenuto del pannello")
+          #
+          # @example Pannello completo
+          #   bui_panel(
+          #     title: "Impostazioni",
+          #     body: "Configura le tue preferenze",
+          #     footer: "Ultimo aggiornamento: oggi",
+          #     theme: :blue
+          #   )
+          #
+          # @example Con header personalizzato
+          #   bui_panel(
+          #     header: "<h2>Header Custom</h2>",
+          #     body: "Il mio contenuto",
+          #     theme: :green,
+          #     style: :raised
+          #   )
+          #
+          # @example Pannello con stili avanzati
+          #   bui_panel(
+          #     title: "Card Premium",
+          #     body: "Contenuto speciale",
+          #     theme: :violet,
+          #     style: :bordered,
+          #     padding: :large,
+          #     radius: :large,
+          #     id: "premium-panel",
+          #     class: "special-panel"
+          #   )
+          #
+          # @example Con contenuto block
+          #   bui_panel(title: "Lista Utenti", theme: :white) do
+          #     "<ul><li>Utente 1</li><li>Utente 2</li></ul>".html_safe
+          #   end
+          def bui_panel(
+            title: nil,
+            body: nil,
+            header: nil,
+            footer: nil,
+            theme: :white,
+            style: :default,
+            padding: :medium,
+            radius: :small,
+            **html_options,
+            &block
+          )
+            render BetterUi::General::Panel::Component.new(
+              title: title,
+              body: body,
+              header: header,
+              footer: footer,
+              theme: theme,
+              style: style,
+              padding: padding,
+              radius: radius,
+              **html_options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/progress/progress_helper.rb

@@ -0,0 +1,53 @@
+module BetterUi
+  module General
+    module Components
+      module Progress
+        module ProgressHelper
+          # Helper per renderizzare una progress bar
+          #
+          # @param value [Integer] percentuale di completamento (0-100)
+          # @param theme [Symbol] tema del colore (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+          # @param size [Symbol] dimensione della progress bar (:small, :medium, :large)
+          # @param label [Boolean] mostra etichetta con percentuale
+          # @param classes [String] classi CSS aggiuntive
+          # @param html_options [Hash] opzioni HTML aggiuntive
+          #
+          # @return [String] HTML della progress bar
+          #
+          # @example Uso base
+          #   bui_progress(value: 75)
+          #
+          # @example Progress con etichetta
+          #   bui_progress(value: 50, label: true, theme: :green)
+          #
+          # @example Progress personalizzata
+          #   bui_progress(
+          #     value: 90,
+          #     theme: :blue,
+          #     size: :large,
+          #     label: true,
+          #     classes: "my-custom-class",
+          #     id: "main-progress"
+          #   )
+          def bui_progress(
+            value: 0,
+            theme: :white,
+            size: :medium,
+            label: false,
+            classes: nil,
+            **html_options
+          )
+            render BetterUi::General::Progress::Component.new(
+              value: value,
+              theme: theme,
+              size: size,
+              label: label,
+              classes: classes,
+              **html_options
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/spinner/spinner_helper.rb

@@ -0,0 +1,19 @@
+module BetterUi
+  module General
+    module Components
+      module Spinner
+        module SpinnerHelper
+          def bui_spinner(label = nil, **options)
+            render BetterUi::General::Spinner::Component.new(
+              label: label,
+              **options
+            )
+          end
+
+          # Supporto per la sintassi originale per compatibilità
+          alias_method :better_ui_general_spinner, :bui_spinner
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/table/table_helper.rb

@@ -0,0 +1,53 @@
+module BetterUi
+  module General
+    module Components
+      module Table
+        module TableHelper
+
+          # Renderizza un componente Table per visualizzare dati strutturati in formato tabellare.
+          #
+          # @param headers [Array<String>] Intestazioni delle colonne della tabella
+          # @param rows [Array<Array>] Dati delle righe della tabella
+          # @param striped [Boolean] Applica righe alternate con colori diversi
+          # @param bordered [Boolean] Aggiunge bordi alla tabella
+          # @param hover [Boolean] Aggiunge effetto hover sulle righe
+          # @param responsive [Boolean] Rende la tabella responsiva (scrollabile orizzontalmente)
+          # @param compact [Boolean] Riduce la spaziatura interna
+          # @param theme [Symbol] Tema della tabella (:default, :white, :gray)
+          # @param size [Symbol] Dimensione della tabella (:small, :medium, :large)
+          # @param rounded [Symbol] Arrotondamento degli angoli (:none, :small, :medium, :large)
+          # @param classes [String] Classi CSS aggiuntive
+          # @param options [Hash] Attributi HTML aggiuntivi
+          #
+          # @return [String] HTML della tabella renderizzata
+          #
+          # @example Tabella base con intestazioni e righe
+          #   <%= bui_table(headers: ['Nome', 'Email'], rows: [['Mario Rossi', 'mario@example.com']]) %>
+          #
+          # @example Tabella con righe alternate e bordi
+          #   <%= bui_table(headers: ['ID', 'Prodotto', 'Prezzo'], 
+          #                rows: [[1, 'Scarpe', '€80'], [2, 'Camicia', '€40']], 
+          #                striped: true, bordered: true) %>
+          #
+          # @example Tabella con stile personalizzato
+          #   <%= bui_table(headers: ['Data', 'Evento'], 
+          #                rows: [['10/01/2023', 'Riunione'], ['15/01/2023', 'Scadenza']], 
+          #                theme: :blue, size: :large, hover: true) %>
+          #
+          # @example Tabella responsiva per dispositivi mobili
+          #   <%= bui_table(headers: ['Prodotto', 'Descrizione', 'Prezzo', 'Disponibilità'], 
+          #                rows: [...], 
+          #                responsive: true) %>
+          #
+          # @example Tabella con attributi HTML personalizzati
+          #   <%= bui_table(headers: ['Nome', 'Email'], 
+          #                rows: [['Mario Rossi', 'mario@example.com']], 
+          #                id: 'users-table', 'data-sortable': true) %>
+          def bui_table(**options, &block)
+            render BetterUi::General::Table::Component.new(**options), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/table/tbody_helper.rb

@@ -0,0 +1,13 @@
+module BetterUi
+  module General
+    module Components
+      module Table
+        module TbodyHelper
+          def bui_tbody(**options, &block)
+            render BetterUi::General::Table::TbodyComponent.new(**options), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/table/td_helper.rb

@@ -0,0 +1,19 @@
+module BetterUi
+  module General
+    module Components
+      module Table
+        module TdHelper
+          def bui_td(content = nil, **options, &block)
+            if block_given?
+              render BetterUi::General::Table::TdComponent.new(**options), &block
+            else
+              render BetterUi::General::Table::TdComponent.new(**options) do
+                content
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/table/tfoot_helper.rb

@@ -0,0 +1,13 @@
+module BetterUi
+  module General
+    module Components
+      module Table
+        module TfootHelper
+          def bui_tfoot(**options, &block)
+            render BetterUi::General::Table::TfootComponent.new(**options), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/table/th_helper.rb

@@ -0,0 +1,19 @@
+module BetterUi
+  module General
+    module Components
+      module Table
+        module ThHelper
+          def bui_th(content = nil, **options, &block)
+            if block_given?
+              render BetterUi::General::Table::ThComponent.new(**options), &block
+            else
+              render BetterUi::General::Table::ThComponent.new(**options) do
+                content
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/table/thead_helper.rb

@@ -0,0 +1,13 @@
+module BetterUi
+  module General
+    module Components
+      module Table
+        module TheadHelper
+          def bui_thead(**options, &block)
+            render BetterUi::General::Table::TheadComponent.new(**options), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/table/tr_helper.rb

@@ -0,0 +1,13 @@
+module BetterUi
+  module General
+    module Components
+      module Table
+        module TrHelper
+          def bui_tr(**options, &block)
+            render BetterUi::General::Table::TrComponent.new(**options), &block
+          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/app/helpers/better_ui/general/components/tag/tag_helper.rb

@@ -0,0 +1,26 @@
+module BetterUi
+  module General
+    module Components
+      module Tag
+        module TagHelper
+        # Render un tag con le opzioni specificate
+        #
+        # @param text [String] testo del tag (obbligatorio)
+        # @param options [Hash] opzioni per il componente
+        #
+        # @option options [Symbol] :theme (:white) tema del colore (:default, :white, :red, etc.)
+        # @option options [Symbol] :size (:medium) dimensione (:small, :medium, :large)
+        # @option options [Symbol] :style (:filled) stile (:filled, :outline)
+        #
+        # @return [String] HTML del componente
+        def bui_tag(text, **options)
+          render BetterUi::General::Tag::Component.new(
+            text: text,
+            **options
+          )
+        end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb

@@ -0,0 +1,60 @@
+module BetterUi
+  module General
+    module Components
+      module Tooltip
+        module TooltipHelper
+          # Genera un tooltip usando BetterUi::General::Tooltip::Component
+          #
+          # @param text [String] testo del tooltip
+          # @param theme [Symbol] tema del colore (:default, :white, :red, etc.)
+          # @param position [Symbol] posizione del tooltip (:top, :right, :bottom, :left)
+          # @param size [Symbol] dimensione del tooltip (:small, :medium, :large)
+          # @param style [Symbol] stile del tooltip (:filled, :outline)
+          # @param html_options [Hash] opzioni HTML aggiuntive
+          # @param block [Block] contenuto dell'elemento trigger
+          # @return [String] HTML del tooltip renderizzato
+          #
+          # @example Uso base
+          #   bui_tooltip("Questo è un tooltip") do
+          #     bui_button(label: "Hover me")
+          #   end
+          #
+          # @example Tooltip con posizione specifica
+          #   bui_tooltip("Messaggio importante", position: :right, theme: :red) do
+          #     link_to "Info", "#", class: "text-blue-500"
+          #   end
+          #
+          # @example Tooltip con stili avanzati
+          #   bui_tooltip(
+          #     "Tooltip grande con outline",
+          #     theme: :blue,
+          #     position: :bottom,
+          #     size: :large,
+          #     style: :outline,
+          #     id: "custom-tooltip"
+          #   ) do
+          #     content_tag(:span, "Trigger personalizzato", class: "custom-trigger")
+          #   end
+          def bui_tooltip(
+            text,
+            theme: :white,
+            position: :top,
+            size: :medium,
+            style: :filled,
+            **html_options,
+            &block
+          )
+            render BetterUi::General::Tooltip::Component.new(
+              text: text,
+              theme: theme,
+              position: position,
+              size: size,
+              style: style,
+              **html_options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end