better_ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,258 @@
+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 = {
+          extra_small: "text-[0.65rem]",
+          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 (:extra_small, :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 :extra_small
+            "w-3 h-3"
+          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/modal/component.html.erb

@@ -0,0 +1,42 @@
+<%# Template per il modal %>
+<% if @backdrop %>
+  <%= tag.div **backdrop_attributes do %>
+    <%= tag.div **container_attributes do %>
+      <%# Header del modal %>
+      <%= tag.div **header_attributes do %>
+        <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
+        <% if @closable %>
+          <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-200" aria-label="Chiudi modal">
+            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        <% end %>
+      <% end %>
+      
+      <%# Body del modal %>
+      <div class="p-6">
+        <%= content %>
+      </div>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= tag.div **container_attributes do %>
+    <%# Header del modal %>
+    <%= tag.div **header_attributes do %>
+      <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
+      <% if @closable %>
+        <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-200" aria-label="Chiudi modal">
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      <% end %>
+    <% end %>
+    
+    <%# Body del modal %>
+    <div class="p-6">
+      <%= content %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,165 @@
+module BetterUi
+  module General
+    module Modal
+      class Component < ViewComponent::Base
+        attr_reader :title, :theme, :size, :backdrop, :closable, :classes, :html_options
+
+        # Classi base sempre presenti per il backdrop
+        MODAL_BACKDROP_CLASSES = "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
+
+        # Classi base per il contenitore del modal
+        MODAL_CONTAINER_CLASSES = "relative bg-white shadow-xl w-full"
+
+        # Temi dell'header del modal con classi Tailwind dirette
+        MODAL_THEME = {
+          default: "bg-gray-50 border-b border-gray-200 text-gray-900",
+          white: "bg-white border-b border-gray-200 text-gray-900",
+          red: "bg-red-50 border-b border-red-200 text-red-900",
+          rose: "bg-rose-50 border-b border-rose-200 text-rose-900",
+          orange: "bg-orange-50 border-b border-orange-200 text-orange-900",
+          green: "bg-green-50 border-b border-green-200 text-green-900",
+          blue: "bg-blue-50 border-b border-blue-200 text-blue-900",
+          yellow: "bg-yellow-50 border-b border-yellow-200 text-yellow-900",
+          violet: "bg-violet-50 border-b border-violet-200 text-violet-900"
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        MODAL_SIZES = {
+          small: "max-w-sm",
+          medium: "max-w-md",
+          large: "max-w-2xl"
+        }
+
+        # Border radius con classi Tailwind dirette
+        MODAL_ROUNDED = {
+          none: "rounded-none",
+          small: "rounded-md",
+          medium: "rounded-lg",
+          large: "rounded-xl",
+          full: "rounded-full"
+        }
+
+        # Inizializzazione del componente
+        def initialize(
+          title:,
+          theme: :default,
+          size: :medium,
+          rounded: :medium,
+          backdrop: true,
+          closable: true,
+          classes: nil,
+          **html_options
+        )
+          @title = title
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @rounded = rounded.to_sym
+          @backdrop = backdrop
+          @closable = closable
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il backdrop
+        def backdrop_classes
+          MODAL_BACKDROP_CLASSES
+        end
+
+        # Combina tutte le classi per il contenitore
+        def container_classes
+          [
+            MODAL_CONTAINER_CLASSES,
+            get_modal_size_classes,
+            get_modal_rounded_classes,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per l'header
+        def header_classes
+          [
+            "flex items-center justify-between p-6",
+            get_modal_theme_classes
+          ].compact.join(" ")
+        end
+
+        def get_modal_theme_classes
+          MODAL_THEME[@theme] || MODAL_THEME[:default]
+        end
+
+        def get_modal_size_classes
+          MODAL_SIZES[@size] || MODAL_SIZES[:medium]
+        end
+
+        def get_modal_rounded_classes
+          MODAL_ROUNDED[@rounded] || MODAL_ROUNDED[:medium]
+        end
+
+        # Restituisce gli attributi per il backdrop
+        def backdrop_attributes
+          attrs = {
+            class: backdrop_classes
+          }
+
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Restituisce gli attributi per il contenitore
+        def container_attributes
+          {
+            class: container_classes,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "modal-title"
+          }
+        end
+
+        # Restituisce gli attributi per l'header
+        def header_attributes
+          {
+            class: header_classes
+          }
+        end
+
+        # Verifica se rendere il componente
+        def render?
+          @title.present?
+        end
+
+        private
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_rounded
+        end
+
+        def validate_theme
+          unless MODAL_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{MODAL_THEME.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless MODAL_SIZES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{MODAL_SIZES.keys.join(', ')}"
+          end
+        end
+
+        def validate_rounded
+          unless MODAL_ROUNDED.keys.include?(@rounded)
+            raise ArgumentError, "Il border radius deve essere uno tra: #{MODAL_ROUNDED.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,85 @@
+<% if should_show_pagination? %>
+  <nav aria-label="Pagination" class="flex items-center justify-between">
+    
+    <!-- Info testo opzionale -->
+    <% if show_info %>
+      <div class="hidden sm:block">
+        <p class="text-sm text-gray-700"><%= info_text %></p>
+      </div>
+    <% end %>
+
+    <!-- Controlli paginazione -->
+    <div class="<%= container_classes %>">
+      
+      <!-- Pulsante Previous -->
+      <% if previous_page %>
+        <a href="<%= build_url(previous_page) %>" 
+           class="<%= page_link_classes(previous_page) %> rounded-l-md"
+           aria-label="Pagina precedente">
+          <span class="sr-only">Precedente</span>
+          <%= bui_icon(name: "chevron-left", size: :medium) %>
+        </a>
+      <% else %>
+        <span class="<%= disabled_classes %> rounded-l-md" aria-label="Pagina precedente">
+          <span class="sr-only">Precedente</span>
+          <%= bui_icon(name: "chevron-left", size: :medium) %>
+        </span>
+      <% end %>
+
+      <!-- Prima pagina se necessaria -->
+      <% if show_left_ellipsis? %>
+        <a href="<%= build_url(1) %>" class="<%= page_link_classes(1) %>">1</a>
+        <span class="<%= disabled_classes %>">...</span>
+      <% end %>
+
+      <!-- Range pagine -->
+      <% page_range.each do |page_num| %>
+        <% if page_num == current_page %>
+          <span aria-current="page" class="<%= page_link_classes(page_num) %>">
+            <%= page_num %>
+          </span>
+        <% else %>
+          <a href="<%= build_url(page_num) %>" 
+             class="<%= page_link_classes(page_num) %>"
+             aria-label="Vai alla pagina <%= page_num %>">
+            <%= page_num %>
+          </a>
+        <% end %>
+      <% end %>
+
+      <!-- Ultima pagina se necessaria -->
+      <% if show_right_ellipsis? %>
+        <span class="<%= disabled_classes %>">...</span>
+        <a href="<%= build_url(total_pages) %>" class="<%= page_link_classes(total_pages) %>">
+          <%= total_pages %>
+        </a>
+      <% end %>
+
+      <!-- Pulsante Next -->
+      <% if next_page %>
+        <a href="<%= build_url(next_page) %>" 
+           class="<%= page_link_classes(next_page) %> rounded-r-md"
+           aria-label="Pagina successiva">
+          <span class="sr-only">Successiva</span>
+          <%= bui_icon(name: "chevron-right", size: :medium) %>
+        </a>
+      <% else %>
+        <span class="<%= disabled_classes %> rounded-r-md" aria-label="Pagina successiva">
+          <span class="sr-only">Successiva</span>
+          <%= bui_icon(name: "chevron-right", size: :medium) %>
+        </span>
+      <% end %>
+
+    </div>
+
+    <!-- Info mobile -->
+    <% if show_info %>
+      <div class="flex flex-1 justify-between sm:hidden">
+        <span class="text-sm text-gray-700">
+          Pagina <%= current_page %> di <%= total_pages %>
+        </span>
+      </div>
+    <% end %>
+
+  </nav>
+<% end %>