better_ui 0.3.0 → 0.7.0

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

@@ -1,258 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<%# Wrapper component con controller Stimulus e slots %>
-<div <%= tag.attributes(wrapper_attributes) %>>
-  <%= trigger %>
-  <%= modal %>
-</div>

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

@@ -1,47 +0,0 @@
-module BetterUi
-  module General
-    module Modal
-      class Component < ViewComponent::Base
-        renders_one :trigger
-        renders_one :modal
-        
-        attr_reader :close_on_backdrop, :close_on_escape, :lock_scroll, :classes, :html_options
-
-
-
-        # Inizializzazione del wrapper component
-        def initialize(
-          close_on_backdrop: true,
-          close_on_escape: true,
-          lock_scroll: true,
-          classes: nil,
-          **html_options
-        )
-          @close_on_backdrop = close_on_backdrop
-          @close_on_escape = close_on_escape
-          @lock_scroll = lock_scroll
-          @classes = classes
-          @html_options = html_options
-        end
-
-        # Combina tutte le classi per il wrapper
-        def wrapper_classes
-          [@classes, @html_options[:class]].compact.join(" ")
-        end
-
-        # Restituisce gli attributi per il wrapper principale (con controller Stimulus)
-        def wrapper_attributes
-          {
-            class: wrapper_classes,
-            'data-controller': 'bui-modal',
-            'data-bui-modal-close-on-backdrop-value': close_on_backdrop,
-            'data-bui-modal-close-on-escape-value': close_on_escape,
-            'data-bui-modal-lock-scroll-value': lock_scroll
-          }.merge(@html_options.except(:class))
-        end
-
-
-      end
-    end
-  end
-end

data/app/components/better_ui/general/modal/modal_component.html.erb

@@ -1,52 +0,0 @@
-<%# Template per il modal content %>
-<% 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 %>
-          <%= helpers.bui_button(
-            label: "Chiudi", 
-            icon: "x-mark",
-            type: :white,
-            size: :small,
-            data: [
-              { name: 'bui-modal-target', value: 'closeButton' },
-              { name: 'action', value: 'click->bui-modal#closeButtonClicked' }
-            ]
-          ) %>
-        <% 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 %>
-        <%= helpers.bui_button(
-          label: "Chiudi", 
-          icon: "x-mark",
-          type: :white,
-          size: :small,
-          data: [
-            { name: 'bui-modal-target', value: 'closeButton' },
-            { name: 'action', value: 'click->bui-modal#closeButtonClicked' }
-          ]
-        ) %>
-      <% end %>
-    <% end %>
-    
-    <%# Body del modal %>
-    <div class="p-6">
-      <%= content %>
-    </div>
-  <% end %>
-<% end %>

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

@@ -1,160 +0,0 @@
-module BetterUi
-  module General
-    module Modal
-      class ModalComponent < 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 modal component
-        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
-          {
-            class: backdrop_classes,
-            'data-bui-modal-target': 'backdrop'
-          }
-        end
-
-        # Restituisce gli attributi per il contenitore
-        def container_attributes
-          {
-            class: container_classes,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": "modal-title",
-            'data-bui-modal-target': 'container'
-          }
-        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

@@ -1,85 +0,0 @@
-<% 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 %>