better_ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,10 @@
+<%# Template per il divider %>
+<% if show_label? %>
+  <%= tag.div(**divider_attributes) do %>
+    <div class="<%= label_line_classes %>"></div>
+    <span class="<%= label_classes %>"><%= @label %></span>
+    <div class="<%= label_line_classes %>"></div>
+  <% end %>
+<% else %>
+  <%= tag.div(**divider_attributes) %>
+<% end %>

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

@@ -0,0 +1,226 @@
+module BetterUi
+  module General
+    module Divider
+      class Component < ViewComponent::Base
+        attr_reader :theme, :orientation, :style, :size, :label, :height, :classes
+
+        # Classi base sempre presenti
+        DIVIDER_BASE_CLASSES = "my-4"
+
+        # Temi con classi Tailwind dirette - LOGICA CORRETTA
+        DIVIDER_THEME_CLASSES = {
+          default: "border-white",         # Bordo bianco (per sfondi scuri)
+          white: "border-gray-300",        # Bordo grigio (per sfondi chiari)
+          red: "border-red-500",
+          rose: "border-rose-500",
+          orange: "border-orange-500",
+          green: "border-green-500",
+          blue: "border-blue-500",
+          yellow: "border-yellow-500",
+          violet: "border-violet-500"
+        }
+
+        # Orientamento con classi Tailwind dirette
+        DIVIDER_ORIENTATION_CLASSES = {
+          horizontal: "w-full border-t",
+          vertical: "h-full border-l"
+        }
+
+        # Stili di linea con classi Tailwind dirette
+        DIVIDER_STYLE_CLASSES = {
+          solid: "border-solid",
+          dashed: "border-dashed",
+          dotted: "border-dotted",
+          double: "border-double"
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        DIVIDER_SIZE_CLASSES = {
+          thin: {
+            horizontal: "border-t",
+            vertical: "border-l"
+          },
+          medium: {
+            horizontal: "border-t-2",
+            vertical: "border-l-2"
+          },
+          thick: {
+            horizontal: "border-t-4",
+            vertical: "border-l-4"
+          }
+        }
+
+        # Classi per label con classi Tailwind dirette - LOGICA CORRETTA
+        DIVIDER_LABEL_THEME_CLASSES = {
+          default: "text-white bg-transparent px-3",     # Testo bianco trasparente (per sfondi scuri)
+          white: "text-gray-900 bg-white px-3",          # Testo nero su bianco (per sfondi chiari)
+          red: "text-red-500 bg-white px-3",
+          rose: "text-rose-500 bg-white px-3",
+          orange: "text-orange-500 bg-white px-3",
+          green: "text-green-500 bg-white px-3",
+          blue: "text-blue-500 bg-white px-3",
+          yellow: "text-yellow-600 bg-white px-3",
+          violet: "text-violet-500 bg-white px-3"
+        }
+
+        # @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
+        def initialize(
+          theme: :white,
+          orientation: :horizontal,
+          style: :solid,
+          size: :medium,
+          label: nil,
+          height: nil,
+          classes: nil,
+          **html_options
+        )
+          @theme = theme.to_sym
+          @orientation = orientation.to_sym
+          @style = style.to_sym
+          @size = size.to_sym
+          @label = label
+          @height = height
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il container
+        def combined_classes
+          base_classes = []
+
+          if @label.present? && @orientation == :horizontal
+            # Per divider con label orizzontale: flex layout
+            base_classes = [
+              "flex items-center text-center",
+              get_theme_class,
+              get_style_class
+            ]
+          else
+            # Per divider normale
+            base_classes = [
+              DIVIDER_BASE_CLASSES,
+              get_orientation_class,
+              get_theme_class,
+              get_style_class,
+              get_size_class
+            ]
+          end
+
+          [ *base_classes, @classes, @html_options[:class] ].compact.join(" ")
+        end
+
+        # Classi per il label
+        def label_classes
+          return "" unless @label.present?
+
+          [
+            "relative z-10 text-sm font-medium",
+            get_label_theme_class
+          ].compact.join(" ")
+        end
+
+        # Classi per le linee before/after quando c'è un label
+        def label_line_classes
+          return "" unless @label.present? && @orientation == :horizontal
+
+          [
+            "flex-1 h-px",
+            get_theme_class,
+            get_style_class
+          ].compact.join(" ")
+        end
+
+        # Genera gli attributi di stile inline necessari
+        def inline_styles
+          return nil unless @orientation == :vertical && @height.present?
+          "height: #{@height};"
+        end
+
+        # Restituisce gli attributi per il divider
+        def divider_attributes
+          attrs = {
+            class: combined_classes
+          }
+
+          # Aggiungi stile inline se presente
+          attrs[:style] = inline_styles if inline_styles.present?
+
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Determina se mostrare il label
+        def show_label?
+          @label.present? && @orientation == :horizontal
+        end
+
+        private
+
+        def get_theme_class
+          DIVIDER_THEME_CLASSES[@theme] || DIVIDER_THEME_CLASSES[:white]
+        end
+
+        def get_orientation_class
+          DIVIDER_ORIENTATION_CLASSES[@orientation] || DIVIDER_ORIENTATION_CLASSES[:horizontal]
+        end
+
+        def get_style_class
+          DIVIDER_STYLE_CLASSES[@style] || DIVIDER_STYLE_CLASSES[:solid]
+        end
+
+        def get_size_class
+          size_map = DIVIDER_SIZE_CLASSES[@size] || DIVIDER_SIZE_CLASSES[:medium]
+          size_map[@orientation] || size_map[:horizontal]
+        end
+
+        def get_label_theme_class
+          DIVIDER_LABEL_THEME_CLASSES[@theme] || DIVIDER_LABEL_THEME_CLASSES[:white]
+        end
+
+        def validate_params
+          validate_theme
+          validate_orientation
+          validate_style
+          validate_size
+        end
+
+        def validate_theme
+          unless DIVIDER_THEME_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{DIVIDER_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_orientation
+          unless DIVIDER_ORIENTATION_CLASSES.keys.include?(@orientation)
+            raise ArgumentError, "L'orientamento deve essere uno tra: #{DIVIDER_ORIENTATION_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_style
+          unless DIVIDER_STYLE_CLASSES.keys.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{DIVIDER_STYLE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless DIVIDER_SIZE_CLASSES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{DIVIDER_SIZE_CLASSES.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+<%# Form field component template %>
+<div class="<%= BASE_CLASSES %>">
+  <% if label.present? %>
+    <label for="<%= id %>" class="<%= LABEL_CLASSES %>">
+      <%= label %>
+      <% if required %>
+        <span class="<%= REQUIRED_CLASSES %>">*</span>
+      <% end %>
+    </label>
+  <% end %>
+
+  <div class="mt-1">
+    <%= content %>
+  </div>
+
+  <% if error.present? %>
+    <div class="<%= ERROR_CLASSES %>">
+      <%= error %>
+    </div>
+  <% end %>
+
+  <% if help_text.present? %>
+    <div class="<%= HELP_TEXT_CLASSES %>">
+      <%= help_text %>
+    </div>
+  <% end %>
+</div> 

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 %>