better_ui 0.1.1 → 0.2.0

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

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,3 @@
+<div <%= tag.attributes(container_attributes) %>>
+  <%= content %>
+</div>

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

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Tabs
+      class Component < ViewComponent::Base
+        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, classes: '', **options)
+          @variant = variant
+          @theme = theme
+          @size = size
+          @orientation = orientation
+          @classes = classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :variant, :theme, :size, :orientation, :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
+
+        def container_attributes
+          base_classes = [
+            'flex',
+            TABS_ORIENTATION[orientation],
+            TABS_VARIANT[variant],
+            TABS_THEME_DEFAULT[theme],
+            TABS_SIZE[size],
+            classes
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            role: 'tablist',
+            'data-controller': 'bui-tabs'
+          }.merge(options)
+        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',
+            active ? 'block' : 'hidden',
+            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',
+            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

@@ -10,9 +10,14 @@ module BetterUi
     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
@@ -26,6 +31,10 @@ module BetterUi
     include General::Components::Table::TrHelper
 
     include General::Components::Tag::TagHelper
+    include General::Components::Tabs::TabsHelper
+    include General::Components::Tabs::TabHelper
+    
+    include General::Components::Tabs::PanelHelper
     include General::Components::Tooltip::TooltipHelper
 
     # General Form Components

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