better_ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Field
+      class Component < ViewComponent::Base
+        attr_reader :label, :name, :required, :error, :help_text, :id
+
+        renders_one :input
+
+        BASE_CLASSES = "flex flex-col space-y-2"
+        LABEL_CLASSES = "text-sm font-medium text-gray-700"
+        REQUIRED_CLASSES = "text-red-500 ml-1"
+        ERROR_CLASSES = "text-sm text-red-600 mt-1"
+        HELP_TEXT_CLASSES = "text-sm text-gray-500 mt-1"
+
+        def initialize(label:, name:, required: false, error: nil, help_text: nil, id: nil)
+          @label = label
+          @name = name
+          @required = required
+          @error = error
+          @help_text = help_text
+          @id = id
+          super()
+        end
+
+        private
+
+        def field_classes
+          classes = [BASE_CLASSES]
+          classes << ERROR_CLASSES if @error.present?
+          classes.join(" ")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+<%# Template per il heading %>
+<div class="<%= container_classes %>">
+  <%= tag.public_send(heading_tag, **heading_attributes) do %>
+    <% if show_icon? %>
+      <span class="<%= icon_classes %>">
+        <%= render BetterUi::General::IconComponent.new(name: @icon) %>
+      </span>
+    <% end %>
+    
+    <span><%= content %></span>
+  <% end %>
+  
+  <% if show_subtitle? %>
+    <div class="<%= subtitle_classes %>">
+      <%= @subtitle %>
+    </div>
+  <% end %>
+  
+  <% if show_divider? %>
+    <div class="<%= divider_classes %>"></div>
+  <% end %>
+</div>

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

@@ -0,0 +1,257 @@
+module BetterUi
+  module General
+    module Heading
+      class Component < ViewComponent::Base
+        attr_reader :level, :theme, :align, :size, :style, :icon, :subtitle, :with_divider
+
+        # Classi base sempre presenti
+        HEADING_BASE_CLASSES = "font-bold leading-tight"
+
+        # Temi con classi Tailwind dirette - LOGICA CORRETTA
+        HEADING_THEME_CLASSES = {
+          default: "text-white",         # Testo bianco (per sfondi scuri)
+          white: "text-gray-900",        # Testo nero (per sfondi chiari)
+          red: "text-red-500",
+          rose: "text-rose-500",
+          orange: "text-orange-500",
+          green: "text-green-500",
+          blue: "text-blue-500",
+          yellow: "text-yellow-600",
+          violet: "text-violet-500",
+          purple: "text-purple-500"
+        }
+
+        # Allineamenti con classi Tailwind dirette
+        HEADING_ALIGN_CLASSES = {
+          left: "text-left",
+          center: "text-center",
+          right: "text-right"
+        }
+
+        # Dimensioni base (verranno combinate con level)
+        HEADING_SIZE_CLASSES = {
+          small: {
+            1 => "text-2xl sm:text-3xl",
+            2 => "text-xl sm:text-2xl",
+            3 => "text-lg sm:text-xl",
+            4 => "text-base sm:text-lg",
+            5 => "text-sm sm:text-base",
+            6 => "text-xs sm:text-sm"
+          },
+          medium: {
+            1 => "text-3xl sm:text-4xl",
+            2 => "text-2xl sm:text-3xl",
+            3 => "text-xl sm:text-2xl",
+            4 => "text-lg sm:text-xl",
+            5 => "text-base sm:text-lg",
+            6 => "text-sm sm:text-base"
+          },
+          large: {
+            1 => "text-4xl sm:text-5xl",
+            2 => "text-3xl sm:text-4xl",
+            3 => "text-2xl sm:text-3xl",
+            4 => "text-xl sm:text-2xl",
+            5 => "text-lg sm:text-xl",
+            6 => "text-base sm:text-lg"
+          }
+        }
+
+        # Stili con classi Tailwind dirette
+        HEADING_STYLE_CLASSES = {
+          normal: "",
+          bold: "font-extrabold",
+          italic: "italic",
+          underline: "underline"
+        }
+
+        # Temi per subtitle - LOGICA CORRETTA
+        HEADING_SUBTITLE_THEME_CLASSES = {
+          default: "text-gray-300",      # Testo grigio chiaro (per sfondi scuri)
+          white: "text-gray-600",        # Testo grigio scuro (per sfondi chiari)
+          red: "text-red-400",
+          rose: "text-rose-400",
+          orange: "text-orange-400",
+          green: "text-green-400",
+          blue: "text-blue-400",
+          yellow: "text-yellow-500",
+          violet: "text-violet-400"
+        }
+
+        # Temi per divider - LOGICA CORRETTA
+        HEADING_DIVIDER_THEME_CLASSES = {
+          default: "border-gray-700",      # Bordo grigio scuro (per sfondi scuri)
+          white: "border-gray-200",        # Bordo grigio chiaro (per sfondi chiari)
+          red: "border-red-200",
+          rose: "border-rose-200",
+          orange: "border-orange-200",
+          green: "border-green-200",
+          blue: "border-blue-200",
+          yellow: "border-yellow-200",
+          violet: "border-violet-200"
+        }
+
+        # @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
+        def initialize(
+          level: 2,
+          theme: :white,
+          align: :left,
+          size: :medium,
+          style: :normal,
+          icon: nil,
+          subtitle: nil,
+          with_divider: false,
+          **html_options
+        )
+          @level = level.to_i.clamp(1, 6)
+          @theme = theme.to_sym
+          @align = align.to_sym
+          @size = size.to_sym
+          @style = style.to_sym
+          @icon = icon
+          @subtitle = subtitle
+          @with_divider = with_divider
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il heading
+        def heading_classes
+          [
+            HEADING_BASE_CLASSES,
+            get_theme_class,
+            get_align_class,
+            get_size_class,
+            get_style_class,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Classi per il container principale
+        def container_classes
+          "mb-4"
+        end
+
+        # Classi per il subtitle
+        def subtitle_classes
+          return "" unless @subtitle.present?
+
+          [
+            "mt-1 text-sm",
+            get_subtitle_theme_class,
+            get_align_class
+          ].compact.join(" ")
+        end
+
+        # Classi per il divider
+        def divider_classes
+          return "" unless @with_divider
+
+          [
+            "mt-2 border-t",
+            get_divider_theme_class
+          ].compact.join(" ")
+        end
+
+        # Classi per l'icona
+        def icon_classes
+          return "" unless @icon.present?
+          "mr-2 inline-block"
+        end
+
+        # Restituisce gli attributi HTML per il heading
+        def heading_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = heading_classes
+          attrs
+        end
+
+        # Tag del heading basato sul level
+        def heading_tag
+          "h#{@level}"
+        end
+
+        # Determina se mostrare l'icona
+        def show_icon?
+          @icon.present?
+        end
+
+        # Determina se mostrare il subtitle
+        def show_subtitle?
+          @subtitle.present?
+        end
+
+        # Determina se mostrare il divider
+        def show_divider?
+          @with_divider
+        end
+
+        private
+
+        def get_theme_class
+          HEADING_THEME_CLASSES[@theme] || HEADING_THEME_CLASSES[:white]
+        end
+
+        def get_align_class
+          HEADING_ALIGN_CLASSES[@align] || HEADING_ALIGN_CLASSES[:left]
+        end
+
+        def get_size_class
+          size_map = HEADING_SIZE_CLASSES[@size] || HEADING_SIZE_CLASSES[:medium]
+          size_map[@level] || size_map[2]
+        end
+
+        def get_style_class
+          HEADING_STYLE_CLASSES[@style] || HEADING_STYLE_CLASSES[:normal]
+        end
+
+        def get_subtitle_theme_class
+          HEADING_SUBTITLE_THEME_CLASSES[@theme] || HEADING_SUBTITLE_THEME_CLASSES[:white]
+        end
+
+        def get_divider_theme_class
+          HEADING_DIVIDER_THEME_CLASSES[@theme] || HEADING_DIVIDER_THEME_CLASSES[:white]
+        end
+
+        def validate_params
+          validate_theme
+          validate_align
+          validate_size
+          validate_style
+        end
+
+        def validate_theme
+          unless HEADING_THEME_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{HEADING_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_align
+          unless HEADING_ALIGN_CLASSES.keys.include?(@align)
+            raise ArgumentError, "L'allineamento deve essere uno tra: #{HEADING_ALIGN_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless HEADING_SIZE_CLASSES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{HEADING_SIZE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_style
+          unless HEADING_STYLE_CLASSES.keys.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{HEADING_STYLE_CLASSES.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<% if href.present? %>
+  <%= tag.a(**icon_attributes) do %>
+    <i class="<%= fa_class_name %> <%= icon_classes %>"></i>
+  <% end %>
+<% else %>
+  <i class="<%= fa_class_name %> <%= icon_classes %>"></i>
+<% end %>

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

@@ -0,0 +1,239 @@
+module BetterUi
+  module General
+    module Icon
+      class Component < ViewComponent::Base
+        # Classi base per l'icona con nomenclatura BEM
+        ICON_BASE_CLASSES = "bui-icon inline-flex items-center justify-center"
+
+        # Dimensioni dell'icona (standardizzate: small, medium, large)
+        ICON_SIZE_CLASSES = {
+          small: "bui-icon--small w-4 h-4 text-sm",
+          medium: "bui-icon--medium w-5 h-5 text-base",
+          large: "bui-icon--large w-6 h-6 text-lg"
+        }.freeze
+
+        # Temi dell'icona con colori coerenti
+        ICON_THEME_CLASSES = {
+          default: "bui-icon--default text-gray-600",
+          white: "bui-icon--white text-white",
+          red: "bui-icon--red text-red-600",
+          rose: "bui-icon--rose text-rose-600",
+          orange: "bui-icon--orange text-orange-600",
+          green: "bui-icon--green text-green-600",
+          blue: "bui-icon--blue text-blue-600",
+          yellow: "bui-icon--yellow text-yellow-600",
+          violet: "bui-icon--violet text-violet-600",
+          purple: "bui-icon--purple text-purple-600"
+        }.freeze
+
+        # Animazioni disponibili
+        ICON_ANIMATION_CLASSES = {
+          spin: "bui-icon--spin animate-spin",
+          pulse: "bui-icon--pulse animate-pulse"
+        }.freeze
+
+        # Trasformazioni disponibili
+        ICON_ROTATION_CLASSES = {
+          90 => "bui-icon--rotate-90 transform rotate-90",
+          180 => "bui-icon--rotate-180 transform rotate-180",
+          270 => "bui-icon--rotate-270 transform rotate-270"
+        }.freeze
+
+        ICON_FLIP_CLASSES = {
+          horizontal: "bui-icon--flip-h transform scale-x-[-1]",
+          vertical: "bui-icon--flip-v transform scale-y-[-1]",
+          both: "bui-icon--flip-both transform scale-[-1]"
+        }.freeze
+
+        # Bordo e larghezza fissa
+        ICON_BORDER_CLASSES = "bui-icon--border border border-current rounded-full p-1"
+        ICON_FIXED_WIDTH_CLASSES = "bui-icon--fixed-width w-5"
+
+        attr_reader :name, :style, :size, :theme, :spin, :pulse, :border, :fixed_width, 
+                    :rotation, :flip, :classes, :id, :href, :method, :target, :html_options
+
+        # @param name [String] Nome dell'icona (richiesto)
+        # @param style [Symbol] Stile dell'icona (:solid, :regular, :brands)
+        # @param size [Symbol] Dimensione (:small, :medium, :large)
+        # @param theme [Symbol] Tema colore (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+        # @param spin [Boolean] Rotazione continua
+        # @param pulse [Boolean] Animazione pulsazione
+        # @param border [Boolean] Mostra bordo attorno all'icona
+        # @param fixed_width [Boolean] Larghezza fissa per allineamento
+        # @param rotation [Integer] Rotazione in gradi (0, 90, 180, 270)
+        # @param flip [Symbol] Tipo di flip (:horizontal, :vertical, :both)
+        # @param classes [String] Classi CSS aggiuntive
+        # @param id [String] ID HTML
+        # @param href [String] URL per l'icona
+        # @param html_options [Hash] Attributi HTML aggiuntivi
+        def initialize(
+          name:,
+          style: :solid,
+          size: :medium,
+          theme: :default,
+          spin: false,
+          pulse: false,
+          border: false,
+          fixed_width: false,
+          rotation: nil,
+          flip: nil,
+          classes: nil,
+          id: nil,
+          href: nil,
+          method: nil,
+          target: nil,
+          **html_options
+        )
+          @name = name
+          @style = style.to_sym
+          @size = size.to_sym
+          @theme = theme.to_sym
+          @spin = spin
+          @pulse = pulse
+          @border = border
+          @fixed_width = fixed_width
+          @rotation = rotation&.to_i
+          @flip = flip&.to_sym
+          @classes = classes
+          @id = id
+          @href = href
+          @method = method
+          @target = target
+          @html_options = html_options
+
+          validate_params!
+        end
+
+        # Genera le classi CSS complete per l'icona
+        def icon_classes
+          classes = [
+            ICON_BASE_CLASSES,
+            size_classes,
+            theme_classes,
+            animation_classes,
+            transformation_classes,
+            border_classes,
+            fixed_width_classes,
+            @classes
+          ].compact.join(" ")
+        end
+
+        # Attributi HTML per l'elemento icona
+        def icon_attributes
+          attrs = {
+            class: icon_classes,
+            id: @id,
+            href: @href,
+            target: @target,
+            **@html_options
+          }.compact
+
+          # Handle method for Turbo
+          if @method.present?
+            attrs[:data] ||= {}
+            attrs[:data][:turbo_method] = @method
+          end
+
+          attrs
+        end
+
+        # Nome completo della classe FontAwesome basato su stile
+        def fa_class_name
+          prefix = case @style
+          when :solid then "fas"
+          when :regular then "far"
+          when :brands then "fab"
+          else "fas"
+          end
+
+          "#{prefix} fa-#{@name}"
+        end
+
+        # Verifica se il componente deve essere renderizzato
+        def render?
+          @name.present?
+        end
+
+        private
+
+        def validate_params!
+          validate_name!
+          validate_style!
+          validate_size!
+          validate_theme!
+          validate_rotation!
+          validate_flip!
+        end
+
+        def validate_name!
+          raise ArgumentError, "Il nome dell'icona è richiesto" if @name.blank?
+        end
+
+        def validate_style!
+          valid_styles = [ :solid, :regular, :brands ]
+          unless valid_styles.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{valid_styles.join(', ')}"
+          end
+        end
+
+        def validate_size!
+          unless ICON_SIZE_CLASSES.key?(@size)
+            valid_sizes = ICON_SIZE_CLASSES.keys
+            raise ArgumentError, "La dimensione deve essere una tra: #{valid_sizes.join(', ')}"
+          end
+        end
+
+        def validate_theme!
+          unless ICON_THEME_CLASSES.key?(@theme)
+            valid_themes = ICON_THEME_CLASSES.keys
+            raise ArgumentError, "Il tema deve essere uno tra: #{valid_themes.join(', ')}"
+          end
+        end
+
+        def validate_rotation!
+          if @rotation && !ICON_ROTATION_CLASSES.key?(@rotation)
+            valid_rotations = ICON_ROTATION_CLASSES.keys
+            raise ArgumentError, "La rotazione deve essere una tra: #{valid_rotations.join(', ')}"
+          end
+        end
+
+        def validate_flip!
+          if @flip && !ICON_FLIP_CLASSES.key?(@flip)
+            valid_flips = ICON_FLIP_CLASSES.keys
+            raise ArgumentError, "Il flip deve essere uno tra: #{valid_flips.join(', ')}"
+          end
+        end
+
+        def size_classes
+          ICON_SIZE_CLASSES[@size]
+        end
+
+        def theme_classes
+          ICON_THEME_CLASSES[@theme]
+        end
+
+        def animation_classes
+          animations = []
+          animations << ICON_ANIMATION_CLASSES[:spin] if @spin
+          animations << ICON_ANIMATION_CLASSES[:pulse] if @pulse
+          animations.join(" ")
+        end
+
+        def transformation_classes
+          transformations = []
+          transformations << ICON_ROTATION_CLASSES[@rotation] if @rotation
+          transformations << ICON_FLIP_CLASSES[@flip] if @flip
+          transformations.join(" ")
+        end
+
+        def border_classes
+          @border ? ICON_BORDER_CLASSES : nil
+        end
+
+        def fixed_width_classes
+          @fixed_width ? ICON_FIXED_WIDTH_CLASSES : nil
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/input/checkbox/component.html.erb

@@ -0,0 +1,5 @@
+<% if @label.present? %>
+  <%= render_checkbox_with_label %>
+<% else %>
+  <%= input_tag %>
+<% end %>