better_ui 0.1.0 → 0.1.1

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

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

@@ -0,0 +1,35 @@
+<div <%= tag.attributes(container_attributes) %>>
+  <div class="flex-shrink-0">
+    <svg class="<%= svg_classes %> animate-spin" viewBox="0 0 24 24" fill="none">
+      <circle 
+        cx="12" 
+        cy="12" 
+        r="10" 
+        stroke="currentColor" 
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-dasharray="32" 
+        stroke-dashoffset="32">
+        <animate 
+          attributeName="stroke-dasharray" 
+          dur="2s" 
+          values="0 32;16 16;0 32;0 32" 
+          repeatCount="indefinite" />
+        <animate 
+          attributeName="stroke-dashoffset" 
+          dur="2s" 
+          values="0;-16;-32;-32" 
+          repeatCount="indefinite" />
+        <animateTransform 
+          attributeName="transform" 
+          type="rotate" 
+          dur="2s" 
+          values="0 12 12;360 12 12" 
+          repeatCount="indefinite" />
+      </circle>
+    </svg>
+  </div>
+  <% if show_label? %>
+    <span class="text-sm font-medium"><%= label %></span>
+  <% end %>
+</div>

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

@@ -0,0 +1,93 @@
+module BetterUi
+  module General
+    module Spinner
+      class Component < ViewComponent::Base
+        THEMES = %i[default white red rose orange green blue yellow violet].freeze
+        SIZES = %i[small medium large].freeze
+        STYLES = %i[default outline].freeze
+
+        # Classi base sempre presenti
+        SPINNER_BASE_CLASSES = "inline-flex items-center gap-2"
+
+        # Dimensioni SVG con classi Tailwind dirette
+        SPINNER_SIZES = {
+          small: "w-4 h-4",    # 16px
+          medium: "w-6 h-6",   # 24px
+          large: "w-8 h-8"     # 32px
+        }
+
+        # Temi colore con classi Tailwind dirette
+        SPINNER_THEMES = {
+          default: "text-gray-900",
+          white: "text-white",
+          red: "text-red-500",
+          rose: "text-rose-500",
+          orange: "text-orange-500",
+          green: "text-green-500",
+          blue: "text-blue-500",
+          yellow: "text-yellow-500",
+          violet: "text-violet-500"
+        }
+
+        # Stili con classi Tailwind dirette
+        SPINNER_STYLES = {
+          default: "",
+          outline: "opacity-75"
+        }
+
+        def initialize(theme: :default, size: :medium, style: :default, label: nil, **html_options)
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @style = style.to_sym
+          @label = label
+          @html_options = html_options
+
+          validate_options!
+        end
+
+        private
+
+        attr_reader :theme, :size, :style, :label, :html_options
+
+        def validate_options!
+          raise ArgumentError, "Theme deve essere uno di: #{THEMES.join(', ')}" unless THEMES.include?(theme)
+          raise ArgumentError, "Size deve essere uno di: #{SIZES.join(', ')}" unless SIZES.include?(size)
+          raise ArgumentError, "Style deve essere uno di: #{STYLES.join(', ')}" unless STYLES.include?(style)
+        end
+
+        def combined_classes
+          [
+            SPINNER_BASE_CLASSES,
+            get_spinner_theme_classes,
+            get_spinner_style_classes,
+            html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def get_spinner_theme_classes
+          SPINNER_THEMES[theme] || SPINNER_THEMES[:default]
+        end
+
+        def get_spinner_style_classes
+          SPINNER_STYLES[style] || SPINNER_STYLES[:default]
+        end
+
+        def get_spinner_size_classes
+          SPINNER_SIZES[size] || SPINNER_SIZES[:medium]
+        end
+
+        def container_attributes
+          html_options.except(:class).merge(class: combined_classes)
+        end
+
+        def svg_classes
+          get_spinner_size_classes
+        end
+
+        def show_label?
+          label.present?
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<div <%= tag.attributes(container_attributes) %>>
+  <table <%= tag.attributes(table_attributes) %>>
+    <%= content %>
+  </table>
+</div>