better_ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,216 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Pagination
+      class Component < ViewComponent::Base
+        include BetterUi::Engine.helpers
+
+        # Costanti per temi
+        PAGINATION_THEME = {
+          default: {
+            container: 'border-gray-300',
+            page: 'border-gray-300 text-gray-500 hover:bg-gray-50 hover:text-gray-700',
+            current: 'border-blue-500 bg-blue-50 text-blue-600',
+            disabled: 'border-gray-300 text-gray-300 cursor-not-allowed'
+          },
+          blue: {
+            container: 'border-blue-300',
+            page: 'border-blue-300 text-blue-600 hover:bg-blue-50 hover:text-blue-700',
+            current: 'border-blue-500 bg-blue-100 text-blue-700',
+            disabled: 'border-blue-200 text-blue-300 cursor-not-allowed'
+          },
+          red: {
+            container: 'border-red-300',
+            page: 'border-red-300 text-red-600 hover:bg-red-50 hover:text-red-700',
+            current: 'border-red-500 bg-red-100 text-red-700',
+            disabled: 'border-red-200 text-red-300 cursor-not-allowed'
+          },
+          green: {
+            container: 'border-green-300',
+            page: 'border-green-300 text-green-600 hover:bg-green-50 hover:text-green-700',
+            current: 'border-green-500 bg-green-100 text-green-700',
+            disabled: 'border-green-200 text-green-300 cursor-not-allowed'
+          },
+          yellow: {
+            container: 'border-yellow-300',
+            page: 'border-yellow-300 text-yellow-600 hover:bg-yellow-50 hover:text-yellow-700',
+            current: 'border-yellow-500 bg-yellow-100 text-yellow-700',
+            disabled: 'border-yellow-200 text-yellow-300 cursor-not-allowed'
+          },
+          violet: {
+            container: 'border-violet-300',
+            page: 'border-violet-300 text-violet-600 hover:bg-violet-50 hover:text-violet-700',
+            current: 'border-violet-500 bg-violet-100 text-violet-700',
+            disabled: 'border-violet-200 text-violet-300 cursor-not-allowed'
+          },
+          orange: {
+            container: 'border-orange-300',
+            page: 'border-orange-300 text-orange-600 hover:bg-orange-50 hover:text-orange-700',
+            current: 'border-orange-500 bg-orange-100 text-orange-700',
+            disabled: 'border-orange-200 text-orange-300 cursor-not-allowed'
+          },
+          rose: {
+            container: 'border-rose-300',
+            page: 'border-rose-300 text-rose-600 hover:bg-rose-50 hover:text-rose-700',
+            current: 'border-rose-500 bg-rose-100 text-rose-700',
+            disabled: 'border-rose-200 text-rose-300 cursor-not-allowed'
+          },
+          white: {
+            container: 'border-white',
+            page: 'border-white text-gray-700 hover:bg-white hover:text-gray-900',
+            current: 'border-white bg-white text-gray-900',
+            disabled: 'border-white text-gray-400 cursor-not-allowed'
+          }
+        }.freeze
+
+        # Costanti per dimensioni
+        PAGINATION_SIZE = {
+          small: 'px-2 py-1 text-sm',
+          medium: 'px-3 py-2 text-base',
+          large: 'px-4 py-3 text-lg'
+        }.freeze
+
+        def initialize(current_page:, total_pages:, path:, theme: :default, size: :medium, 
+                       window: 2, show_info: false, per_page: nil, classes: '', **options)
+          @current_page = current_page.to_i
+          @total_pages = total_pages.to_i
+          @path = path
+          @theme = theme
+          @size = size
+          @window = window.to_i
+          @show_info = show_info
+          @per_page = per_page
+          @classes = classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :current_page, :total_pages, :path, :theme, :size, :window, 
+                    :show_info, :per_page, :classes, :options
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_pages
+        end
+
+        def validate_theme
+          return if PAGINATION_THEME.key?(theme)
+
+          raise ArgumentError, 
+                "Invalid theme: #{theme}. Valid themes are: #{PAGINATION_THEME.keys.join(', ')}"
+        end
+
+        def validate_size
+          return if PAGINATION_SIZE.key?(size)
+
+          raise ArgumentError, 
+                "Invalid size: #{size}. Valid sizes are: #{PAGINATION_SIZE.keys.join(', ')}"
+        end
+
+        def validate_pages
+          if current_page < 1 || current_page > total_pages
+            raise ArgumentError, "current_page must be between 1 and #{total_pages}"
+          end
+
+          if total_pages < 1
+            raise ArgumentError, "total_pages must be at least 1"
+          end
+        end
+
+        def theme_classes
+          PAGINATION_THEME[theme]
+        end
+
+        def size_classes
+          PAGINATION_SIZE[size]
+        end
+
+        def container_classes
+          "inline-flex -space-x-px rounded-md shadow-sm #{theme_classes[:container]} #{classes}".strip
+        end
+
+        def page_link_classes(page_num)
+          base_classes = "relative inline-flex items-center border #{size_classes} font-medium"
+          
+          if page_num == current_page
+            "#{base_classes} #{theme_classes[:current]}"
+          else
+            "#{base_classes} #{theme_classes[:page]} focus:z-10 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          end
+        end
+
+        def disabled_classes
+          "relative inline-flex items-center border #{size_classes} font-medium #{theme_classes[:disabled]}"
+        end
+
+        def page_range
+          return [1] if total_pages == 1
+
+          start_page = [current_page - window, 1].max
+          end_page = [current_page + window, total_pages].min
+
+          # Espandi il range se possibile
+          if end_page - start_page < (window * 2)
+            if start_page == 1
+              end_page = [start_page + (window * 2), total_pages].min
+            elsif end_page == total_pages
+              start_page = [end_page - (window * 2), 1].max
+            end
+          end
+
+          (start_page..end_page).to_a
+        end
+
+        def show_left_ellipsis?
+          page_range.first > 2
+        end
+
+        def show_right_ellipsis?
+          page_range.last < total_pages - 1
+        end
+
+        def build_url(page_num)
+          return '#' if page_num == current_page
+
+          uri = URI.parse(path)
+          params = URI.decode_www_form(uri.query || '')
+          params = params.reject { |k, _v| k == 'page' }
+          params << ['page', page_num] if page_num > 1
+
+          uri.query = params.empty? ? nil : URI.encode_www_form(params)
+          uri.to_s
+        end
+
+        def previous_page
+          current_page > 1 ? current_page - 1 : nil
+        end
+
+        def next_page
+          current_page < total_pages ? current_page + 1 : nil
+        end
+
+        def info_text
+          return '' unless show_info && per_page
+
+          start_item = ((current_page - 1) * per_page) + 1
+          end_item = [current_page * per_page, total_items].min
+          
+          "Mostrando #{start_item}-#{end_item} di #{total_items} risultati"
+        end
+
+        def total_items
+          total_pages * per_page
+        end
+
+        def should_show_pagination?
+          total_pages > 1
+        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

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>