better_ui 0.1.1 → 0.3.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/tabs/component.html.erb

@@ -0,0 +1,11 @@
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <!-- Navigation Tabs -->
+  <div <%= tag.attributes(navigation_attributes) %>>
+    <%= navigation %>
+  </div>
+  
+  <!-- Tab Panels -->
+  <div <%= tag.attributes(panels_attributes) %>>
+    <%= panels %>
+  </div>
+</div>

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

@@ -0,0 +1,120 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Tabs
+      class Component < ViewComponent::Base
+        renders_one :navigation
+        renders_one :panels
+        TABS_VARIANT = {
+          pills: 'bg-gray-100 rounded-lg p-1',
+          underline: 'border-b border-gray-200',
+          bordered: 'border border-gray-200 rounded-lg',
+          minimal: ''
+        }.freeze
+
+        TABS_THEME_DEFAULT = {
+          default: 'text-gray-600',
+          blue: 'text-blue-600',
+          red: 'text-red-600',
+          green: 'text-green-600',
+          yellow: 'text-yellow-600',
+          violet: 'text-violet-600',
+          orange: 'text-orange-600',
+          rose: 'text-rose-600',
+          white: 'text-white'
+        }.freeze
+
+        TABS_SIZE = {
+          small: 'text-sm',
+          medium: 'text-base',
+          large: 'text-lg'
+        }.freeze
+
+        TABS_ORIENTATION = {
+          horizontal: 'flex-row',
+          vertical: 'flex-col'
+        }.freeze
+
+        def initialize(variant: :pills, theme: :default, size: :medium, orientation: :horizontal, 
+                      navigation_classes: '', panels_classes: 'mt-4', **options)
+          @variant = variant
+          @theme = theme
+          @size = size
+          @orientation = orientation
+          @navigation_classes = navigation_classes
+          @panels_classes = panels_classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :variant, :theme, :size, :orientation, :navigation_classes, :panels_classes, :options
+
+        def validate_params
+          validate_variant
+          validate_theme
+          validate_size
+          validate_orientation
+        end
+
+        def validate_variant
+          return if TABS_VARIANT.key?(variant)
+
+          raise ArgumentError, "Invalid variant: #{variant}. Must be one of #{TABS_VARIANT.keys}"
+        end
+
+        def validate_theme
+          return if TABS_THEME_DEFAULT.key?(theme)
+
+          raise ArgumentError, "Invalid theme: #{theme}. Must be one of #{TABS_THEME_DEFAULT.keys}"
+        end
+
+        def validate_size
+          return if TABS_SIZE.key?(size)
+
+          raise ArgumentError, "Invalid size: #{size}. Must be one of #{TABS_SIZE.keys}"
+        end
+
+        def validate_orientation
+          return if TABS_ORIENTATION.key?(orientation)
+
+          raise ArgumentError, "Invalid orientation: #{orientation}. Must be one of #{TABS_ORIENTATION.keys}"
+        end
+
+        # Attributi per il wrapper principale (con data-controller)
+        def wrapper_attributes
+          {
+            'data-controller': 'bui-tabs'
+          }.merge(options)
+        end
+
+        # Attributi per il container della navigazione tabs
+        def navigation_attributes
+          base_classes = [
+            'flex',
+            TABS_ORIENTATION[orientation],
+            TABS_VARIANT[variant],
+            TABS_THEME_DEFAULT[theme],
+            TABS_SIZE[size],
+            navigation_classes
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            role: 'tablist'
+          }
+        end
+
+        # Attributi per il container dei panel
+        def panels_attributes
+          {
+            class: panels_classes
+          }
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/tabs/panel_component.html.erb

@@ -0,0 +1,3 @@
+<div <%= tag.attributes(panel_attributes) %>>
+  <%= content %>
+</div>

data/app/components/better_ui/general/tabs/panel_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Tabs
+      class PanelComponent < ViewComponent::Base
+        def initialize(id:, active: false, classes: '', **options)
+          @id = id
+          @active = active
+          @classes = classes
+          @options = options
+        end
+
+        private
+
+        attr_reader :id, :active, :classes, :options
+
+        def panel_attributes
+          base_classes = [
+            'focus:outline-none',
+            'hidden', # Sempre nascosto inizialmente, JavaScript gestisce la visibilità
+            classes
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            role: 'tabpanel',
+            id: id,
+            'aria-labelledby': "tab-#{id}",
+            'data-bui-tabs-target': 'panel',
+            tabindex: '0'
+          }.merge(options)
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/tabs/tab_component.html.erb

@@ -0,0 +1,13 @@
+<button <%= tag.attributes(tab_attributes) %>>
+  <% if has_icon? %>
+    <%= bui_icon(name: icon, classes: 'w-5 h-5') %>
+  <% end %>
+  
+  <span><%= text %></span>
+  
+  <% if has_badge? %>
+    <span class="ml-2 bg-red-100 text-red-800 text-xs font-medium px-2 py-0.5 rounded-full">
+      <%= badge %>
+    </span>
+  <% end %>
+</button>

data/app/components/better_ui/general/tabs/tab_component.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Tabs
+      class TabComponent < ViewComponent::Base
+        include BetterUi::General::Components::Icon::IconHelper
+
+        TAB_THEME_ACTIVE = {
+          default: 'bg-white text-gray-900 shadow-sm',
+          blue: 'bg-blue-600 text-white',
+          red: 'bg-red-600 text-white',
+          green: 'bg-green-600 text-white',
+          yellow: 'bg-yellow-600 text-white',
+          violet: 'bg-violet-600 text-white',
+          orange: 'bg-orange-600 text-white',
+          rose: 'bg-rose-600 text-white',
+          white: 'bg-white text-gray-900'
+        }.freeze
+
+        TAB_THEME_INACTIVE = {
+          default: 'text-gray-500 hover:text-gray-700',
+          blue: 'text-blue-600 hover:text-blue-700',
+          red: 'text-red-600 hover:text-red-700',
+          green: 'text-green-600 hover:text-green-700',
+          yellow: 'text-yellow-600 hover:text-yellow-700',
+          violet: 'text-violet-600 hover:text-violet-700',
+          orange: 'text-orange-600 hover:text-orange-700',
+          rose: 'text-rose-600 hover:text-rose-700',
+          white: 'text-gray-600 hover:text-gray-700'
+        }.freeze
+
+        TAB_SIZE = {
+          small: 'px-3 py-1.5 text-sm',
+          medium: 'px-4 py-2 text-base',
+          large: 'px-6 py-3 text-lg'
+        }.freeze
+
+        def initialize(text:, target:, active: false, icon: nil, disabled: false, badge: nil, 
+                      theme: :default, size: :medium, classes: '', **options)
+          @text = text
+          @target = target
+          @active = active
+          @icon = icon
+          @disabled = disabled
+          @badge = badge
+          @theme = theme
+          @size = size
+          @classes = classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :text, :target, :active, :icon, :disabled, :badge, :theme, :size, :classes, :options
+
+        def validate_params
+          validate_theme
+          validate_size
+        end
+
+        def validate_theme
+          return if TAB_THEME_ACTIVE.key?(theme)
+
+          raise ArgumentError, "Invalid theme: #{theme}. Must be one of #{TAB_THEME_ACTIVE.keys}"
+        end
+
+        def validate_size
+          return if TAB_SIZE.key?(size)
+
+          raise ArgumentError, "Invalid size: #{size}. Must be one of #{TAB_SIZE.keys}"
+        end
+
+        def tab_attributes
+          theme_classes = active ? TAB_THEME_ACTIVE[theme] : TAB_THEME_INACTIVE[theme]
+          
+          base_classes = [
+            'inline-flex items-center justify-center gap-2 font-medium rounded-md transition-colors',
+            'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
+            TAB_SIZE[size],
+            theme_classes,
+            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+            classes
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            role: 'tab',
+            'aria-selected': active.to_s,
+            'aria-controls': target,
+            'data-bui-tabs-target': 'tab',
+            'data-target': target,
+            'data-action': disabled ? '' : 'click->bui-tabs#switchTab keydown->bui-tabs#keydown',
+            tabindex: active ? '0' : '-1',
+            id: "tab-#{target}"
+          }.merge(options)
+        end
+
+        def has_icon?
+          icon.present?
+        end
+
+        def has_badge?
+          badge.present?
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/application_helper.rb

@@ -4,18 +4,26 @@ module BetterUi
     # Questo assicura che tutti gli helper specifici dei componenti siano disponibili.
 
     # General Components
+    include General::Components::Accordion::AccordionHelper
     include General::Components::Alert::AlertHelper
     include General::Components::Avatar::AvatarHelper
     include General::Components::Badge::BadgeHelper
     include General::Components::Breadcrumb::BreadcrumbHelper
     include General::Components::Button::ButtonHelper
     include General::Components::Divider::DividerHelper
+    include General::Components::Dropdown::DropdownHelper
+    include General::Components::Dropdown::ItemHelper
+    include General::Components::Dropdown::DividerHelper
     include General::Components::Heading::HeadingHelper
     include General::Components::Icon::IconHelper
     include General::Components::Link::LinkHelper
+    include General::Components::Modal::ModalHelper
+    include General::Components::Pagination::PaginationHelper
     include General::Components::Panel::PanelHelper
     include General::Components::Progress::ProgressHelper
     include General::Components::Spinner::SpinnerHelper
+    include General::Components::Tag::TagHelper
+    include General::Components::Tooltip::TooltipHelper
 
     include General::Components::Table::TableHelper
     include General::Components::Table::TbodyHelper
@@ -24,9 +32,10 @@ module BetterUi
     include General::Components::Table::ThHelper
     include General::Components::Table::TheadHelper
     include General::Components::Table::TrHelper
-
-    include General::Components::Tag::TagHelper
-    include General::Components::Tooltip::TooltipHelper
+  
+    include General::Components::Tabs::TabsHelper
+    include General::Components::Tabs::TabHelper
+    include General::Components::Tabs::PanelHelper
 
     # General Form Components
     include General::Components::Input::Checkbox::CheckboxHelper

data/app/helpers/better_ui/general/components/accordion/accordion_helper.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Accordion
+        module AccordionHelper
+          # Rendering di un accordion con item collassabili/espandibili
+          #
+          # @param multiple [Boolean] se permettere multipli item aperti contemporaneamente
+          # @param theme [Symbol] tema di colore per l'accordion
+          # @param variant [Symbol] variante visuale dell'accordion
+          # @param size [Symbol] dimensione del testo e padding
+          # @param classes [String] classi CSS aggiuntive per il wrapper
+          # @param options [Hash] attributi HTML aggiuntivi da passare al componente
+          # @return [String] HTML renderizzato dell'accordion
+          #
+          # @example Uso base standalone
+          #   <%= bui_accordion do |accordion| %>
+          #     <%= accordion.with_item(title: "Domanda 1") do %>
+          #       <p>Risposta alla prima domanda</p>
+          #     <% end %>
+          #   <% end %>
+          #
+          # @example Con tema e configurazioni
+          #   <%= bui_accordion(multiple: true, theme: :blue, size: :large) do |accordion| %>
+          #     <%= accordion.with_item(title: "FAQ 1", expanded: true) do %>
+          #       <p>Contenuto della prima FAQ</p>
+          #     <% end %>
+          #     <%= accordion.with_item(title: "FAQ 2") do %>
+          #       <p>Contenuto della seconda FAQ</p>
+          #     <% end %>
+          #   <% end %>
+          #
+          # @example Con varianti stilistiche
+          #   <%= bui_accordion(variant: :separated, theme: :green) do |accordion| %>
+          #     <%= accordion.with_item(title: "Sezione 1") do %>
+          #       <div>Contenuto complesso con HTML</div>
+          #     <% end %>
+          #   <% end %>
+          #
+          # @example Con attributi HTML aggiuntivi
+          #   <%= bui_accordion(id: "faq-accordion", "data-testid": "main-faq") do |accordion| %>
+          #     <%= accordion.with_item(title: "Come funziona?") do %>
+          #       <p>Spiegazione dettagliata...</p>
+          #     <% end %>
+          #   <% end %>
+          #
+          # @example Con item disabilitati e icone personalizzate
+          #   <%= bui_accordion(theme: :violet, size: :small) do |accordion| %>
+          #     <%= accordion.with_item(title: "Disponibile", icon: "check-circle") do %>
+          #       <p>Questa sezione è disponibile</p>
+          #     <% end %>
+          #     <%= accordion.with_item(title: "Non disponibile", disabled: true) do %>
+          #       <p>Questa sezione è disabilitata</p>
+          #     <% end %>
+          #   <% end %>
+          def bui_accordion(multiple: false, theme: :default, variant: :bordered, size: :medium, 
+                           classes: '', **options, &block)
+            render BetterUi::General::Accordion::Component.new(
+              multiple: multiple,
+              theme: theme,
+              variant: variant,
+              size: size,
+              classes: classes,
+              **options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/accordion.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Accordion
+        include BetterUi::General::Components::Accordion::AccordionHelper
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/dropdown/divider_helper.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Dropdown
+        module DividerHelper
+          ##
+          # Crea un divisore per separare gruppi di elementi nel menu dropdown.
+          #
+          # @param classes [String] Classi CSS aggiuntive
+          # @param options [Hash] Attributi HTML aggiuntivi
+          #
+          # @return [String] Il markup HTML del divisore dropdown
+          #
+          # @example Uso base
+          #   <%= bui_dropdown_divider %>
+          #
+          # @example Con classi personalizzate
+          #   <%= bui_dropdown_divider(classes: "my-4") %>
+          #
+          def bui_dropdown_divider(classes: '', **options)
+            render BetterUi::General::Dropdown::DividerComponent.new(
+              classes: classes,
+              **options
+            )
+          end
+        end
+      end
+    end
+  end
+end