better_ui 0.1.0 → 0.2.0

data/app/helpers/better_ui/general/components/divider/divider_helper.rb

@@ -0,0 +1,63 @@
+module BetterUi
+  module General
+    module Components
+      module Divider
+        module DividerHelper
+          # Genera un divider usando BetterUi::General::Divider::Component
+          #
+          # @param theme [Symbol] tema del divider (:default, :white, etc.)
+          # @param orientation [Symbol] orientamento del divider (:horizontal, :vertical)
+          # @param style [Symbol] stile della linea (:solid, :dashed, :dotted, :double)
+          # @param size [Symbol] dimensione della linea (:thin, :medium, :thick)
+          # @param label [String] testo opzionale da mostrare al centro del divider
+          # @param height [String] altezza per divider verticale (es. "100px", "100%")
+          # @param classes [String] classi CSS aggiuntive
+          # @param html_options [Hash] opzioni HTML per il container
+          # @return [String] HTML del divider renderizzato
+          #
+          # @example Uso base
+          #   bui_divider
+          #   bui_divider(theme: :blue, size: :thick)
+          #
+          # @example Con label
+          #   bui_divider(label: "Oppure", theme: :red)
+          #
+          # @example Divider verticale
+          #   bui_divider(orientation: :vertical, height: "100px", theme: :green)
+          #
+          # @example Con opzioni avanzate
+          #   bui_divider(
+          #     theme: :violet,
+          #     orientation: :horizontal,
+          #     style: :dashed,
+          #     size: :medium,
+          #     label: "Sezione",
+          #     classes: "my-8",
+          #     id: "main-divider"
+          #   )
+          def bui_divider(
+            theme: :white,
+            orientation: :horizontal,
+            style: :solid,
+            size: :medium,
+            label: nil,
+            height: nil,
+            classes: nil,
+            **html_options
+          )
+            render BetterUi::General::Divider::Component.new(
+              theme: theme,
+              orientation: orientation,
+              style: style,
+              size: size,
+              label: label,
+              height: height,
+              classes: classes,
+              **html_options
+            )
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Dropdown
+        module DividerHelper
+          ##
+          # Crea un divisore per separare gruppi di elementi nel menu dropdown.
+          #
+          # @param classes [String] Classi CSS aggiuntive
+          # @param options [Hash] Attributi HTML aggiuntivi
+          #
+          # @return [String] Il markup HTML del divisore dropdown
+          #
+          # @example Uso base
+          #   <%= bui_dropdown_divider %>
+          #
+          # @example Con classi personalizzate
+          #   <%= bui_dropdown_divider(classes: "my-4") %>
+          #
+          def bui_dropdown_divider(classes: '', **options)
+            render BetterUi::General::Dropdown::DividerComponent.new(
+              classes: classes,
+              **options
+            )
+          end
+        end
+      end
+    end
+  end
+end

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/field/field_helper.rb

@@ -0,0 +1,26 @@
+module BetterUi
+  module General
+    module Components
+      module Field
+        module FieldHelper
+          # @param label [String] Label del campo
+          # @param name [String] Nome del campo
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param error [String] Messaggio di errore
+          # @param help_text [String] Testo di aiuto
+          # @return [BetterUi::General::FieldComponent] Componente del campo
+          def bui_field(label:, name:, required: false, error: nil, help_text: nil, id: nil, &block)
+            render BetterUi::General::Field::Component.new(
+              label: label,
+              name: name,
+              required: required,
+              error: error,
+              help_text: help_text,
+              id: id || SecureRandom.uuid
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/heading/heading_helper.rb

@@ -0,0 +1,72 @@
+module BetterUi
+  module General
+    module Components
+      module Heading
+        module HeadingHelper
+          # Genera un heading usando BetterUi::General::Heading::Component
+          #
+          # @param text [String] testo del heading
+          # @param level [Integer] livello del heading (1-6)
+          # @param theme [Symbol] tema del colore (:default, :white, etc.)
+          # @param align [Symbol] allineamento (:left, :center, :right)
+          # @param size [Symbol] dimensione (:small, :medium, :large)
+          # @param style [Symbol] stile (:normal, :bold, :italic, :underline)
+          # @param icon [String] icona opzionale
+          # @param subtitle [String] sottotitolo opzionale
+          # @param with_divider [Boolean] mostra linea divisoria
+          # @param html_options [Hash] opzioni HTML per il container
+          # @return [String] HTML del heading renderizzato
+          #
+          # @example Uso base
+          #   bui_heading("Titolo principale")
+          #   bui_heading("Sottotitolo", level: 3, theme: :blue)
+          #
+          # @example Con icona e sottotitolo
+          #   bui_heading("Dashboard", icon: "home", subtitle: "Panoramica generale")
+          #
+          # @example Con divider
+          #   bui_heading("Sezione", level: 2, with_divider: true, theme: :green)
+          #
+          # @example Con opzioni avanzate
+          #   bui_heading(
+          #     "Titolo personalizzato",
+          #     level: 1,
+          #     theme: :violet,
+          #     align: :center,
+          #     size: :large,
+          #     style: :bold,
+          #     icon: "star",
+          #     subtitle: "Con tutte le opzioni",
+          #     with_divider: true,
+          #     id: "main-title",
+          #     class: "custom-heading"
+          #   )
+          def bui_heading(
+            text,
+            level: 2,
+            theme: :white,
+            align: :left,
+            size: :medium,
+            style: :normal,
+            icon: nil,
+            subtitle: nil,
+            with_divider: false,
+            **html_options
+          )
+            render BetterUi::General::Heading::Component.new(
+              level: level,
+              theme: theme,
+              align: align,
+              size: size,
+              style: style,
+              icon: icon,
+              subtitle: subtitle,
+              with_divider: with_divider,
+              **html_options
+            ).with_content(text)
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/icon/icon_helper.rb

@@ -0,0 +1,16 @@
+module BetterUi
+  module General
+    module Components
+      module Icon
+        module IconHelper
+          def bui_icon(name = nil, **options)
+            render BetterUi::General::Icon::Component.new(
+              name: name,
+              **options
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/input/checkbox/checkbox_helper.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module Checkbox
+          module CheckboxHelper
+            # Renderizza un componente Checkbox con tutti i parametri disponibili.
+            #
+            # @param name [String] Nome del campo checkbox (obbligatorio)
+            # @param value [String] Valore del checkbox (default: "1")
+            # @param checked [Boolean] Se il checkbox è selezionato
+            # @param required [Boolean] Se il campo è obbligatorio
+            # @param disabled [Boolean] Se il campo è disabilitato
+            # @param indeterminate [Boolean] Se il checkbox è in stato indeterminate
+            # @param label [String, nil] Testo della label associata al checkbox
+            # @param label_position [Symbol] Posizione della label (:left, :right)
+            # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+            # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+            # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
+            # @param classes [String] Classi CSS aggiuntive
+            # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+            # @param options [Hash] Opzioni aggiuntive per l'input (es. data attributes, aria attributes)
+            #
+            # @return [String] HTML del componente Checkbox renderizzato
+            #
+            # @example Uso base
+            #   <%= bui_input_checkbox(name: 'accept_terms') %>
+            #
+            # @example Con label
+            #   <%= bui_input_checkbox(name: 'newsletter', label: 'Iscriviti alla newsletter', checked: true) %>
+            #
+            # @example Con label a sinistra
+            #   <%= bui_input_checkbox(name: 'terms', label: 'Accetto i termini e condizioni', label_position: :left, required: true) %>
+            #
+            # @example Con tema e dimensione personalizzati
+            #   <%= bui_input_checkbox(name: 'important', label: 'Importante', theme: :green, size: :large) %>
+            #
+            # @example Con border radius personalizzato
+            #   <%= bui_input_checkbox(name: 'rounded_option', label: 'Opzione arrotondata', rounded: :full) %>
+            #
+            # @example Con classi aggiuntive
+            #   <%= bui_input_checkbox(name: 'custom', label: 'Campo personalizzato', classes: 'mb-4', checked: true) %>
+            #
+            # @example Con attributi HTML aggiuntivi
+            #   <%= bui_input_checkbox(name: 'data-field', label: 'Campo obbligatorio', 'data-validation': 'required', 'aria-describedby': 'help-text') %>
+            #
+            # @example Con Rails form builder
+            #   <%= form_with model: @user do |form| %>
+            #     <%= bui_input_checkbox(name: :terms_accepted, label: 'Accetto i termini', form: form, theme: :green, required: true) %>
+            #   <% end %>
+            #
+            # @example Stato indeterminate
+            #   <%= bui_input_checkbox(name: 'partial_selection', label: 'Selezione parziale', indeterminate: true, theme: :blue) %>
+            def bui_input_checkbox(name:, value: '1', checked: false, required: false, disabled: false,
+                                   indeterminate: false, label: nil, label_position: :right, theme: :default, 
+                                   size: :medium, rounded: :medium, classes: '', form: nil, **options)
+              render BetterUi::General::Input::Checkbox::Component.new(
+                name: name,
+                value: value,
+                checked: checked,
+                required: required,
+                disabled: disabled,
+                indeterminate: indeterminate,
+                label: label,
+                label_position: label_position,
+                theme: theme,
+                size: size,
+                rounded: rounded,
+                classes: classes,
+                form: form,
+                **options
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/input/datetime/datetime_helper.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module Datetime
+          module DatetimeHelper
+            # Crea un campo input datetime unificato
+            #
+            # @param name [String] Nome del campo input (obbligatorio)
+            # @param type [Symbol] Tipo del campo datetime (default: :date)
+            #   Valori disponibili: :date, :month, :week, :time
+            # @param value [String] Valore del campo nel formato appropriato per il tipo
+            # @param required [Boolean] Se il campo è obbligatorio (default: false)
+            # @param disabled [Boolean] Se il campo è disabilitato (default: false)
+            # @param min [String] Valore minimo selezionabile nel formato appropriato
+            # @param max [String] Valore massimo selezionabile nel formato appropriato
+            # @param theme [Symbol] Tema del componente (default: :default)
+            #   Valori disponibili: :default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet
+            # @param size [Symbol] Dimensione del componente (default: :medium)
+            #   Valori disponibili: :small, :medium, :large
+            # @param rounded [Symbol] Border radius (default: :medium)
+            #   Valori disponibili: :none, :small, :medium, :large, :full
+            # @param classes [String] Classi CSS aggiuntive
+            # @param form [ActionView::Helpers::FormBuilder] Form builder Rails opzionale per integrazione con form
+            # @param options [Hash] Attributi HTML aggiuntivi da passare all'elemento input
+            # @return [String] HTML del componente datetime input renderizzato
+            #
+            # @example Uso base per date
+            #   <%= bui_input_datetime(name: 'birthdate', type: :date) %>
+            #
+            # @example Input per mese con validazione
+            #   <%= bui_input_datetime(name: 'report_month', type: :month, required: true, min: '2024-01', max: '2024-12') %>
+            #
+            # @example Input per settimana con tema
+            #   <%= bui_input_datetime(name: 'work_week', type: :week, theme: :blue, size: :large) %>
+            #
+            # @example Input per time con stili personalizzati
+            #   <%= bui_input_datetime(name: 'meeting_time', type: :time, theme: :green, rounded: :full) %>
+            #
+            # @example Con Rails form builder
+            #   <%= form_with model: @event do |form| %>
+            #     <%= bui_input_datetime(name: :start_date, type: :date, form: form, theme: :blue, required: true) %>
+            #     <%= bui_input_datetime(name: :start_time, type: :time, form: form, theme: :green) %>
+            #   <% end %>
+            def bui_input_datetime(name:, type: :date, value: nil, required: false, disabled: false, 
+                                   min: nil, max: nil, theme: :default, size: :medium, rounded: :medium, 
+                                   classes: '', form: nil, **options)
+              render BetterUi::General::Input::Datetime::Component.new(
+                name: name,
+                type: type,
+                value: value,
+                required: required,
+                disabled: disabled,
+                min: min,
+                max: max,
+                theme: theme,
+                size: size,
+                rounded: rounded,
+                classes: classes,
+                form: form,
+                **options
+              )
+            end
+
+            # Helper convenienza per input date
+            def bui_input_date(name:, **options)
+              bui_input_datetime(name: name, type: :date, **options)
+            end
+
+            # Helper convenienza per input month
+            def bui_input_month(name:, **options)
+              bui_input_datetime(name: name, type: :month, **options)
+            end
+
+            # Helper convenienza per input week
+            def bui_input_week(name:, **options)
+              bui_input_datetime(name: name, type: :week, **options)
+            end
+
+            # Helper convenienza per input time
+            def bui_input_time(name:, **options)
+              bui_input_datetime(name: name, type: :time, **options)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/input/radio/radio_helper.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module Radio
+          # Helper specifico per radio button Better UI
+          module RadioHelper
+            # Genera un radio button con stili Better UI
+            #
+            # @param name [String] Nome del campo radio (obbligatorio)
+            # @param value [String] Valore del radio button (obbligatorio)
+            # @param checked [Boolean] Se il radio è selezionato
+            # @param required [Boolean] Se il campo è obbligatorio
+            # @param disabled [Boolean] Se il campo è disabilitato
+            # @param label [String, nil] Testo della label associata al radio
+            # @param label_position [Symbol] Posizione della label (:left, :right)
+            # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+            # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+            # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
+            # @param classes [String] Classi CSS aggiuntive
+            # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+            # @param options [Hash] Opzioni aggiuntive per l'input
+            # @return [String] HTML del radio button renderizzato
+            #
+            # @example Gruppo radio base - Selezione genere (STESSO name, value DIVERSI)
+            #   bui_input_radio(name: "gender", value: "male", label: "Maschio")
+            #   bui_input_radio(name: "gender", value: "female", label: "Femmina") 
+            #   bui_input_radio(name: "gender", value: "other", label: "Altro")
+            #
+            # @example Gruppo radio con temi diversi - Priorità task
+            #   bui_input_radio(name: "priority", value: "low", label: "Bassa", theme: :green)
+            #   bui_input_radio(name: "priority", value: "medium", label: "Media", theme: :yellow)
+            #   bui_input_radio(name: "priority", value: "high", label: "Alta", theme: :red, size: :large)
+            #
+            # @example Gruppo radio con Rails form builder
+            #   <%= form_with model: @user do |form| %>
+            #     <%= bui_input_radio(name: :role, value: "admin", label: "Amministratore", form: form) %>
+            #     <%= bui_input_radio(name: :role, value: "user", label: "Utente", form: form) %>
+            #     <%= bui_input_radio(name: :role, value: "guest", label: "Ospite", form: form) %>
+            #   <% end %>
+            #
+            # @example Gruppo radio con selezione dinamica e validazione
+            #   current_method = @user&.payment_method
+            #   bui_input_radio(name: "payment", value: "card", label: "Carta", checked: current_method == "card", required: true)
+            #   bui_input_radio(name: "payment", value: "bank", label: "Bonifico", checked: current_method == "bank", required: true)
+            #   bui_input_radio(name: "payment", value: "cash", label: "Contrassegno", checked: current_method == "cash", required: true)
+            #
+            # @example Gruppo radio con attributi HTML personalizzati
+            #   bui_input_radio(name: "notification", value: "email", label: "Email", theme: :blue, data: { action: "change->form#updateNotification" })
+            #   bui_input_radio(name: "notification", value: "sms", label: "SMS", theme: :blue, data: { action: "change->form#updateNotification" })
+            #   bui_input_radio(name: "notification", value: "push", label: "Push", theme: :blue, data: { action: "change->form#updateNotification" })
+            #
+            def bui_input_radio(name:, value:, checked: false, required: false, disabled: false, 
+                               label: nil, label_position: :right, theme: :default, 
+                               size: :medium, rounded: :full, classes: '', form: nil, **options)
+              render BetterUi::General::Input::Radio::Component.new(
+                name: name,
+                value: value,
+                checked: checked,
+                required: required,
+                disabled: disabled,
+                label: label,
+                label_position: label_position,
+                theme: theme,
+                size: size,
+                rounded: rounded,
+                classes: classes,
+                form: form,
+                **options
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end