better_ui_tmp 0.5.1

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

@@ -0,0 +1,255 @@
+module BetterUi
+  module General
+    module Link
+      class Component < ViewComponent::Base
+        attr_reader :label, :href, :theme, :orientation, :style, :size, :icon, :active, :disabled, :data, :method, :target
+
+        # Classi base sempre presenti
+        LINK_BASE_CLASSES = "transition-colors duration-200 no-underline"
+
+        # Temi con classi Tailwind dirette - LOGICA CORRETTA
+        LINK_THEME_CLASSES = {
+          default: "text-white hover:text-gray-300",        # Bianco per sfondi scuri
+          white: "text-gray-900 hover:text-gray-700",      # Nero per sfondi chiari
+          red: "text-red-500 hover:text-red-600",
+          rose: "text-rose-500 hover:text-rose-600",
+          orange: "text-orange-500 hover:text-orange-600",
+          green: "text-green-500 hover:text-green-600",
+          blue: "text-blue-500 hover:text-blue-600",
+          yellow: "text-yellow-600 hover:text-yellow-700",
+          violet: "text-violet-500 hover:text-violet-600"
+        }
+
+        # Orientamenti con classi Tailwind dirette
+        LINK_ORIENTATION_CLASSES = {
+          horizontal: "inline-flex items-center",
+          vertical: "flex flex-col items-center"
+        }
+
+        # Stili con classi Tailwind dirette
+        LINK_STYLE_CLASSES = {
+          default: "",
+          underline: "underline",
+          bold: "font-bold",
+          text: "no-underline"
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        LINK_SIZE_CLASSES = {
+          small: "text-sm",
+          medium: "text-base",
+          large: "text-lg"
+        }
+
+        # Stati con classi Tailwind dirette
+        LINK_STATE_CLASSES = {
+          normal: "",
+          active: "font-semibold",
+          disabled: "opacity-50 cursor-not-allowed pointer-events-none"
+        }
+
+        # @param label [String] testo del link
+        # @param href [String] URL di destinazione (nil per semplice testo)
+        # @param theme [Symbol] tema del colore (:default, :white, etc.)
+        # @param orientation [Symbol] orientamento (:horizontal, :vertical)
+        # @param style [Symbol] stile (:default, :underline, :bold, :text)
+        # @param size [Symbol] dimensione (:small, :medium, :large)
+        # @param icon [String] icona opzionale
+        # @param active [Boolean] stato attivo del link
+        # @param disabled [Boolean] stato disabilitato del link
+        # @param data [Hash] attributi data
+        # @param method [Symbol] metodo HTTP (per Turbo)
+        # @param target [String] target del link
+        # @param html_options [Hash] opzioni HTML aggiuntive
+        def initialize(
+          label:, 
+          href: nil,
+          theme: :white,
+          orientation: :horizontal,
+          style: :default,
+          size: :medium,
+          icon: nil,
+          active: false,
+          disabled: false,
+          data: {},
+          method: nil,
+          target: nil,
+          **html_options
+        )
+          @label = label
+          @href = href
+          @theme = theme.to_sym
+          @orientation = orientation.to_sym
+          @style = style.to_sym
+          @size = size.to_sym
+          @icon = icon
+          @active = active
+          @disabled = disabled
+          @data = data || {}
+          @method = method
+          @target = target
+          @html_options = html_options
+          
+          validate_params
+        end
+
+        # Determina se è un link attivo/corrente
+        def active?
+          @active
+        end
+
+        # Determina se è disabilitato
+        def disabled?
+          @disabled
+        end
+
+        # Determina se è un link o solo testo
+        def link?
+          @href.present? && !@disabled
+        end
+
+        # Combina tutte le classi CSS
+        def combined_classes
+          [
+            LINK_BASE_CLASSES,
+            get_theme_class,
+            get_orientation_class,
+            get_style_class,
+            get_size_class,
+            get_state_class,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Classi per l'icona con dimensionamento proporzionale
+        def icon_classes
+          return "" unless @icon.present?
+          
+          # Definisce spacing e dimensioni icona basate su size
+          base_spacing = case @orientation
+          when :horizontal
+            "mr-2"
+          when :vertical
+            "mb-1"
+          else
+            "mr-2"
+          end
+          
+          icon_size = case @size
+          when :small
+            "w-4 h-4"
+          when :medium
+            "w-5 h-5"
+          when :large
+            "w-6 h-6"
+          else
+            "w-5 h-5"
+          end
+          
+          "#{base_spacing} #{icon_size} inline-block"
+        end
+
+        # Classi per il testo
+        def text_classes
+          "inline-block"
+        end
+
+        # Restituisce gli attributi per il link/span
+        def element_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = combined_classes
+          
+          if link?
+            # Attributi specifici per i link
+            if @method.present?
+              attrs[:data] = @data.merge(turbo_method: @method) 
+            elsif @data.present?
+              attrs[:data] = @data
+            end
+            
+            attrs[:target] = @target if @target.present?
+            attrs[:aria] ||= {}
+            attrs[:aria][:current] = 'page' if active?
+          else
+            # Attributi per span (testo semplice o disabilitato)
+            attrs[:aria] ||= {}
+            attrs[:aria][:disabled] = true if disabled?
+          end
+          
+          attrs
+        end
+
+        # Determina se mostrare l'icona
+        def show_icon?
+          @icon.present?
+        end
+
+        # Renderizza l'icona
+        def render_icon
+          return nil unless show_icon?
+          
+          if @icon.is_a?(String)
+            render BetterUi::General::IconComponent.new(name: @icon)
+          else
+            @icon # Assumiamo che sia già un componente renderizzato
+          end
+        end
+        
+        private
+        
+        def get_theme_class
+          LINK_THEME_CLASSES[@theme] || LINK_THEME_CLASSES[:white]
+        end
+        
+        def get_orientation_class
+          LINK_ORIENTATION_CLASSES[@orientation] || LINK_ORIENTATION_CLASSES[:horizontal]
+        end
+        
+        def get_style_class
+          LINK_STYLE_CLASSES[@style] || LINK_STYLE_CLASSES[:default]
+        end
+
+        def get_size_class
+          LINK_SIZE_CLASSES[@size] || LINK_SIZE_CLASSES[:medium]
+        end
+
+        def get_state_class
+          return LINK_STATE_CLASSES[:disabled] if disabled?
+          return LINK_STATE_CLASSES[:active] if active?
+          LINK_STATE_CLASSES[:normal]
+        end
+        
+        def validate_params
+          validate_theme
+          validate_orientation
+          validate_style
+          validate_size
+        end
+        
+        def validate_theme
+          unless LINK_THEME_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{LINK_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+        
+        def validate_orientation
+          unless LINK_ORIENTATION_CLASSES.keys.include?(@orientation)
+            raise ArgumentError, "L'orientamento deve essere uno tra: #{LINK_ORIENTATION_CLASSES.keys.join(', ')}"
+          end
+        end
+        
+        def validate_style
+          unless LINK_STYLE_CLASSES.keys.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{LINK_STYLE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless LINK_SIZE_CLASSES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{LINK_SIZE_CLASSES.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+<%# Template per il panel %>
+<div <%= tag.attributes(panel_attributes) %>>
+  <% if show_header? %>
+    <div class="<%= header_classes %>">
+      <% if @header.present? %>
+        <%= raw @header %>
+      <% elsif @title.present? %>
+        <div class="<%= title_classes %>"><%= @title %></div>
+      <% end %>
+    </div>
+  <% end %>
+  
+  <% if show_body? %>
+    <div class="<%= body_classes %>">
+      <% if @body.present? %>
+        <%= raw @body %>
+      <% elsif content.present? %>
+        <%= content %>
+      <% end %>
+    </div>
+  <% end %>
+  
+  <% if show_footer? %>
+    <div class="<%= footer_classes %>">
+      <%= raw @footer %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,249 @@
+module BetterUi
+  module General
+    module Panel
+      class Component < ViewComponent::Base
+        attr_reader :header, :footer, :body, :title, :padding, :theme, :style, :radius
+
+        # Classi base sempre presenti
+        PANEL_BASE_CLASSES = "overflow-hidden"
+
+        # Temi con classi Tailwind dirette - LOGICA CORRETTA
+        PANEL_THEME_CLASSES = {
+          default: "bg-gray-800 border-gray-700",        # Scuro per sfondi scuri
+          white: "bg-white border-gray-200",             # Chiaro per sfondi chiari
+          red: "bg-red-50 border-red-200",
+          rose: "bg-rose-50 border-rose-200",
+          orange: "bg-orange-50 border-orange-200",
+          green: "bg-green-50 border-green-200",
+          blue: "bg-blue-50 border-blue-200",
+          yellow: "bg-yellow-50 border-yellow-200",
+          violet: "bg-violet-50 border-violet-200"
+        }
+
+        # Temi per testo - LOGICA CORRETTA
+        PANEL_TEXT_THEME_CLASSES = {
+          default: "text-white",                         # Testo bianco per sfondi scuri
+          white: "text-gray-900",                        # Testo nero per sfondi chiari
+          red: "text-red-900",
+          rose: "text-rose-900",
+          orange: "text-orange-900",
+          green: "text-green-900",
+          blue: "text-blue-900",
+          yellow: "text-yellow-900",
+          violet: "text-violet-900"
+        }
+
+        # Stili con classi Tailwind dirette
+        PANEL_STYLE_CLASSES = {
+          default: "border shadow-sm",
+          flat: "border-0",
+          raised: "border shadow-lg",
+          bordered: "border-2"
+        }
+
+        # Padding con classi Tailwind dirette
+        PANEL_PADDING_CLASSES = {
+          none: "p-0",
+          small: "p-2",
+          medium: "p-4",
+          large: "p-6"
+        }
+
+        # Radius con classi Tailwind dirette
+        PANEL_RADIUS_CLASSES = {
+          none: "rounded-none",
+          small: "rounded",
+          medium: "rounded-md",
+          large: "rounded-lg",
+          full: "rounded-full"
+        }
+
+        # @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
+        def initialize(
+          title: nil,
+          body: nil,
+          header: nil,
+          footer: nil,
+          theme: :white,
+          style: :default,
+          padding: :medium,
+          radius: :small,
+          **html_options
+        )
+          @title = title
+          @body = body
+          @header = header
+          @footer = footer
+          @theme = theme.to_sym
+          @style = style.to_sym
+          @padding = padding.to_sym
+          @radius = radius.to_sym
+          @html_options = html_options
+          
+          validate_params
+        end
+
+        # Combina tutte le classi CSS per il panel
+        def combined_classes
+          [
+            PANEL_BASE_CLASSES,
+            get_theme_class,
+            get_style_class,
+            get_radius_class,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi HTML per il panel
+        def panel_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = combined_classes
+          attrs
+        end
+
+        # Classi per l'header
+        def header_classes
+          [
+            "border-b",
+            get_border_theme_class,
+            get_text_theme_class,
+            get_padding_class
+          ].compact.join(" ")
+        end
+
+        # Classi per il body
+        def body_classes
+          [
+            get_text_theme_class,
+            get_padding_class
+          ].compact.join(" ")
+        end
+
+        # Classi per il footer
+        def footer_classes
+          [
+            "border-t",
+            get_border_theme_class,
+            get_text_theme_class,
+            get_padding_class
+          ].compact.join(" ")
+        end
+
+        # Classi per il title
+        def title_classes
+          [
+            "font-semibold text-lg leading-6",
+            get_text_theme_class
+          ].compact.join(" ")
+        end
+
+        # Determina se il pannello deve essere renderizzato
+        def render?
+          @body.present? || @header.present? || @footer.present? || content.present?
+        end
+
+        # Determina se mostrare l'header
+        def show_header?
+          @header.present? || @title.present?
+        end
+
+        # Determina se mostrare il body
+        def show_body?
+          @body.present? || content.present?
+        end
+
+        # Determina se mostrare il footer
+        def show_footer?
+          @footer.present?
+        end
+
+        private
+
+        def get_theme_class
+          PANEL_THEME_CLASSES[@theme] || PANEL_THEME_CLASSES[:white]
+        end
+
+        def get_text_theme_class
+          PANEL_TEXT_THEME_CLASSES[@theme] || PANEL_TEXT_THEME_CLASSES[:white]
+        end
+
+        def get_border_theme_class
+          # Usa lo stesso colore del bordo principale ma più leggero per i separatori interni
+          case @theme
+          when :default
+            "border-gray-600"
+          when :white
+            "border-gray-100"
+          when :red
+            "border-red-100"
+          when :rose
+            "border-rose-100"
+          when :orange
+            "border-orange-100"
+          when :green
+            "border-green-100"
+          when :blue
+            "border-blue-100"
+          when :yellow
+            "border-yellow-100"
+          when :violet
+            "border-violet-100"
+          else
+            "border-gray-100"
+          end
+        end
+
+        def get_style_class
+          PANEL_STYLE_CLASSES[@style] || PANEL_STYLE_CLASSES[:default]
+        end
+
+        def get_radius_class
+          PANEL_RADIUS_CLASSES[@radius] || PANEL_RADIUS_CLASSES[:small]
+        end
+
+        def get_padding_class
+          PANEL_PADDING_CLASSES[@padding] || PANEL_PADDING_CLASSES[:medium]
+        end
+
+        def validate_params
+          validate_theme
+          validate_style
+          validate_padding
+          validate_radius
+        end
+
+        def validate_theme
+          unless PANEL_THEME_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{PANEL_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_style
+          unless PANEL_STYLE_CLASSES.keys.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{PANEL_STYLE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_padding
+          unless PANEL_PADDING_CLASSES.keys.include?(@padding)
+            raise ArgumentError, "Il padding deve essere uno tra: #{PANEL_PADDING_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_radius
+          unless PANEL_RADIUS_CLASSES.keys.include?(@radius)
+            raise ArgumentError, "Il raggio deve essere uno tra: #{PANEL_RADIUS_CLASSES.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<div class="bui-progress-wrapper">
+  <div <%= progress_attributes.map { |k, v| "#{k}=\"#{v}\"" }.join(' ').html_safe %>>
+    <div <%= bar_attributes.map { |k, v| "#{k}=\"#{v}\"" }.join(' ').html_safe %>></div>
+  </div>
+  
+  <% if show_label? %>
+    <div class="bui-progress-label mt-1 text-sm text-gray-600 text-center">
+      <%= value %>%
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,160 @@
+module BetterUi
+  module General
+    module Progress
+      class Component < ViewComponent::Base
+        # Classi base sempre presenti
+        PROGRESS_BASE_CLASSES = "relative w-full bg-gray-200 rounded-full overflow-hidden"
+
+        # Classi per la barra di progresso
+        PROGRESS_BAR_BASE_CLASSES = "h-full transition-all duration-300 ease-in-out"
+
+        # Dimensioni della progress bar con classi Tailwind dirette
+        PROGRESS_SIZES = {
+          small: "h-2",
+          medium: "h-4", 
+          large: "h-6"
+        }
+
+        # Temi di progress bar con classi Tailwind dirette
+        PROGRESS_THEMES = {
+          default: "bg-gray-600",
+          white: "bg-white border border-gray-300",
+          red: "bg-red-600",
+          rose: "bg-rose-600",
+          orange: "bg-orange-600",
+          green: "bg-green-600",
+          blue: "bg-blue-600",
+          yellow: "bg-yellow-600",
+          violet: "bg-violet-600"
+        }
+
+        # Classi per il background container
+        PROGRESS_CONTAINER_THEMES = {
+          default: "bg-gray-200",
+          white: "bg-gray-100",
+          red: "bg-red-100",
+          rose: "bg-rose-100", 
+          orange: "bg-orange-100",
+          green: "bg-green-100",
+          blue: "bg-blue-100",
+          yellow: "bg-yellow-100",
+          violet: "bg-violet-100"
+        }
+
+        # @param value [Integer] percentuale di completamento (0-100)
+        # @param theme [Symbol] :default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet
+        # @param size [Symbol] :small, :medium, :large
+        # @param label [Boolean] mostra etichetta con percentuale
+        # @param classes [String] classi CSS aggiuntive per il container
+        # @param html_options [Hash] opzioni HTML per il container
+        def initialize(
+          value: 0,
+          theme: :white,
+          size: :medium,
+          label: false,
+          classes: nil,
+          **html_options
+        )
+          @value = [0, [value.to_i, 100].min].max # Clamp tra 0 e 100
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @label = label
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il container
+        def combined_classes
+          [
+            PROGRESS_BASE_CLASSES,
+            get_size_class,
+            get_container_theme_class,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per la barra di progresso
+        def bar_classes
+          [
+            PROGRESS_BAR_BASE_CLASSES,
+            get_theme_class
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi per il container della progress bar
+        def progress_attributes
+          attrs = {
+            class: combined_classes,
+            role: "progressbar",
+            "aria-valuenow": @value,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-label": "Progresso: #{@value}%"
+          }
+
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Restituisce gli attributi per la barra di progresso
+        def bar_attributes
+          {
+            class: bar_classes,
+            style: "width: #{@value}%"
+          }
+        end
+
+        # Restituisce il valore percentuale
+        attr_reader :value
+
+        # Verifica se mostrare l'etichetta
+        def show_label?
+          @label
+        end
+
+        private
+
+        def validate_params
+          validate_theme
+          validate_size
+        end
+
+        def validate_theme
+          valid_themes = PROGRESS_THEMES.keys
+          unless valid_themes.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{valid_themes.join(', ')}"
+          end
+        end
+
+        def validate_size
+          valid_sizes = PROGRESS_SIZES.keys
+          unless valid_sizes.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{valid_sizes.join(', ')}"
+          end
+        end
+
+        # Genera le classi per la dimensione
+        def get_size_class
+          PROGRESS_SIZES[@size] || PROGRESS_SIZES[:medium]
+        end
+
+        # Genera le classi per il tema della barra
+        def get_theme_class
+          PROGRESS_THEMES[@theme] || PROGRESS_THEMES[:white]
+        end
+
+        # Genera le classi per il tema del container
+        def get_container_theme_class
+          PROGRESS_CONTAINER_THEMES[@theme] || PROGRESS_CONTAINER_THEMES[:white]
+        end
+      end
+    end
+  end
+end