better_ui 0.3.0 → 0.5.0

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 %>

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

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

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