better_ui 0.1.0 → 0.1.1

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

data/app/helpers/better_ui/general/components/input/radio_group/radio_group_helper.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module RadioGroup
+          # Helper per creare gruppi di radio button Better UI
+          module RadioGroupHelper
+            # Genera un gruppo completo di radio button con stili Better UI
+            #
+            # @param name [String] Nome del campo radio (comune a tutto il gruppo)
+            # @param options [Array<Hash>] Array di opzioni per ogni radio button
+            # @param selected [String, nil] Valore dell'opzione selezionata
+            # @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 direction [Symbol] Direzione del gruppo (:vertical, :horizontal)
+            # @param required [Boolean] Se il gruppo è obbligatorio
+            # @param disabled [Boolean] Se il gruppo è disabilitato
+            # @param classes [String] Classi CSS aggiuntive per il contenitore
+            # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+            # @param html_options [Hash] Opzioni HTML aggiuntive per ogni radio
+            # @return [String] HTML del gruppo radio renderizzato
+            #
+            # @example Gruppo radio base - Selezione genere
+            #   bui_input_radio_group(
+            #     name: "gender",
+            #     options: [
+            #       { value: "male", label: "Maschio" },
+            #       { value: "female", label: "Femmina" },
+            #       { value: "other", label: "Altro" }
+            #     ]
+            #   )
+            #
+            # @example Gruppo radio con tema e selezione
+            #   bui_input_radio_group(
+            #     name: "priority",
+            #     options: [
+            #       { value: "low", label: "Bassa", theme: :green },
+            #       { value: "medium", label: "Media", theme: :yellow },
+            #       { value: "high", label: "Alta", theme: :red }
+            #     ],
+            #     selected: "medium",
+            #     size: :large
+            #   )
+            #
+            # @example Gruppo radio orizzontale con Rails form
+            #   <%= form_with model: @user do |form| %>
+            #     <%= bui_input_radio_group(
+            #       name: :role,
+            #       options: [
+            #         { value: "admin", label: "Amministratore" },
+            #         { value: "user", label: "Utente" },
+            #         { value: "guest", label: "Ospite" }
+            #       ],
+            #       selected: @user.role,
+            #       direction: :horizontal,
+            #       form: form
+            #     ) %>
+            #   <% end %>
+            #
+            # @example Gruppo radio con validazione e attributi HTML
+            #   bui_input_radio_group(
+            #     name: "notification_type",
+            #     options: [
+            #       { value: "email", label: "Email" },
+            #       { value: "sms", label: "SMS" },
+            #       { value: "push", label: "Push Notification" }
+            #     ],
+            #     required: true,
+            #     theme: :blue,
+            #     html_options: { data: { action: "change->form#validateNotification" } }
+            #   )
+            #
+            # @example Gruppo radio con temi personalizzati per opzione
+            #   bui_input_radio_group(
+            #     name: "status",
+            #     options: [
+            #       { value: "active", label: "Attivo", theme: :green },
+            #       { value: "pending", label: "In Sospeso", theme: :yellow },
+            #       { value: "inactive", label: "Inattivo", theme: :red }
+            #     ],
+            #     selected: "active",
+            #     direction: :horizontal
+            #   )
+            #
+            def bui_input_radio_group(name:, options:, selected: nil, theme: :default, size: :medium, 
+                                     rounded: :full, direction: :vertical, required: false, disabled: false,
+                                     classes: '', form: nil, **html_options)
+              container_classes = [
+                'space-y-2',
+                direction == :horizontal ? 'flex flex-wrap gap-6' : 'space-y-2',
+                classes
+              ].compact.join(' ')
+
+              content_tag(:div, class: container_classes) do
+                options.map do |option|
+                  option_theme = option[:theme] || theme
+                  option_classes = option[:classes] || ''
+                  
+                  render BetterUi::General::Input::Radio::Component.new(
+                    name: name,
+                    value: option[:value],
+                    label: option[:label],
+                    checked: selected.to_s == option[:value].to_s,
+                    theme: option_theme,
+                    size: size,
+                    rounded: rounded,
+                    required: required,
+                    disabled: disabled || option[:disabled],
+                    classes: option_classes,
+                    form: form,
+                    **html_options
+                  )
+                end.join.html_safe
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/input/select/select_helper.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module Select
+          module SelectHelper
+            # Renders a Select component for selection fields from option lists.
+            #
+            # @param name [String] Name of the select field
+            # @param options [Array<Hash>] Array of select options in format [{value: 'value', label: 'label'}, ...]
+            # @param selected [String, Array, nil] Selected value or values
+            # @param required [Boolean] Whether the field is required
+            # @param disabled [Boolean] Whether the field is disabled
+            # @param multiple [Boolean] Whether multiple options can be selected
+            # @param theme [Symbol] Component theme (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+            # @param size [Symbol] Component size (:small, :medium, :large)
+            # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
+            # @param placeholder [String, nil] Placeholder text for the field (creates an initial disabled option)
+            # @param classes [String] Additional CSS classes
+            # @param form [ActionView::Helpers::FormBuilder, nil] Optional Rails form builder
+            # @param options_html [Hash] Additional HTML attributes for option tags
+            # @param html_options [Hash] Additional HTML attributes for the select tag
+            #
+            # @return [String] Rendered HTML of the Select component
+            #
+            # @example Basic select
+            #   <%= bui_input_select(name: 'country', options: [{value: 'it', label: 'Italy'}, {value: 'fr', label: 'France'}]) %>
+            #
+            # @example Select with selected option
+            #   <%= bui_input_select(name: 'role', options: roles_array, selected: 'admin') %>
+            #
+            # @example Multiple select
+            #   <%= bui_input_select(name: 'languages[]', options: languages_array, multiple: true, selected: ['en', 'fr']) %>
+            #
+            # @example Select with custom theme and size
+            #   <%= bui_input_select(name: 'category', options: categories_array, theme: :blue, size: :large) %>
+            #
+            # @example With Rails form builder
+            #   <%= form_with model: @user do |form| %>
+            #     <%= bui_input_select(name: :country_id, options: countries_array, form: form, required: true) %>
+            #   <% end %>
+            def bui_input_select(name:, options:, selected: nil, required: false, disabled: false, 
+                           multiple: false, theme: :default, size: :medium, rounded: :medium, 
+                           placeholder: nil, classes: '', form: nil, options_html: {}, **html_options)
+              
+              render BetterUi::General::Input::Select::Component.new(
+                name: name,
+                options: options,
+                selected: selected,
+                required: required,
+                disabled: disabled,
+                multiple: multiple,
+                theme: theme,
+                size: size,
+                rounded: rounded,
+                placeholder: placeholder,
+                classes: classes,
+                form: form,
+                options_html: options_html,
+                **html_options
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end