better_ui_tmp 0.5.1

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

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Tag
+      class Component < ViewComponent::Base
+        def initialize(text:, theme: :white, size: :medium, style: :filled, **options)
+          @text = text
+          @theme = theme.to_sym
+          @size = size.to_sym 
+          @style = style.to_sym
+          @options = options
+        end
+
+        private
+
+        attr_reader :text, :theme, :size, :style, :options
+
+        def tag_classes
+          base_classes = %w[
+            inline-flex
+            items-center
+            justify-center
+            font-medium
+            transition-colors
+            duration-200
+            bui-tag
+          ]
+
+          base_classes.concat(size_classes)
+          base_classes.concat(theme_classes)
+          base_classes.concat(style_classes)
+          base_classes.join(' ')
+        end
+
+        def size_classes
+          case size
+          when :small
+            %w[text-xs px-2 py-1 rounded]
+          when :large
+            %w[text-base px-4 py-2 rounded-lg]
+          else # :medium
+            %w[text-sm px-3 py-1.5 rounded-md]
+          end
+        end
+
+        def theme_classes
+          case theme
+          when :default
+            %w[bg-gray-100 text-gray-800]
+          when :red
+            %w[bg-red-100 text-red-800]
+          when :rose
+            %w[bg-rose-100 text-rose-800]
+          when :orange
+            %w[bg-orange-100 text-orange-800]
+          when :green
+            %w[bg-green-100 text-green-800]
+          when :blue
+            %w[bg-blue-100 text-blue-800]
+          when :yellow
+            %w[bg-yellow-100 text-yellow-800]
+          when :violet
+            %w[bg-violet-100 text-violet-800]
+          else # :white
+            %w[bg-white text-gray-700 border border-gray-200]
+          end
+        end
+
+        def style_classes
+          case style
+          when :outline
+            outline_theme_classes
+          else # :filled
+            []
+          end
+        end
+
+        def outline_theme_classes
+          case theme
+          when :default
+            %w[bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50]
+          when :red
+            %w[bg-transparent border-red-300 text-red-700 hover:bg-red-50]
+          when :rose
+            %w[bg-transparent border-rose-300 text-rose-700 hover:bg-rose-50]
+          when :orange
+            %w[bg-transparent border-orange-300 text-orange-700 hover:bg-orange-50]
+          when :green
+            %w[bg-transparent border-green-300 text-green-700 hover:bg-green-50]
+          when :blue
+            %w[bg-transparent border-blue-300 text-blue-700 hover:bg-blue-50]
+          when :yellow
+            %w[bg-transparent border-yellow-300 text-yellow-700 hover:bg-yellow-50]
+          when :violet
+            %w[bg-transparent border-violet-300 text-violet-700 hover:bg-violet-50]
+          else # :white
+            %w[bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50]
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<div <%= tag.attributes(tooltip_attributes) %>>
+  <%= content %>
+  <div class="<%= bubble_classes %>">
+    <%= @text %>
+    <div class="<%= arrow_classes %>"></div>
+  </div>
+</div>

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

@@ -0,0 +1,239 @@
+module BetterUi
+  module General
+    module Tooltip
+      class Component < ViewComponent::Base
+        # Classi base sempre presenti
+        TOOLTIP_BASE_CLASSES = "relative inline-block"
+
+        # Classi base per il bubble del tooltip
+        TOOLTIP_BUBBLE_BASE_CLASSES = "absolute z-50 px-2 py-1 text-sm rounded shadow-lg opacity-0 pointer-events-none transition-opacity duration-200"
+
+        # Classi per la visibilità su hover
+        TOOLTIP_HOVER_CLASSES = "group-hover:opacity-100"
+
+        # Posizioni del tooltip con classi Tailwind dirette
+        TOOLTIP_POSITIONS = {
+          top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
+          right: "left-full top-1/2 transform -translate-y-1/2 ml-2",
+          bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
+          left: "right-full top-1/2 transform -translate-y-1/2 mr-2"
+        }
+
+        # Dimensioni del tooltip con classi Tailwind dirette
+        TOOLTIP_SIZES = {
+          small: "px-1.5 py-0.5 text-xs",
+          medium: "px-2 py-1 text-sm",
+          large: "px-3 py-2 text-base"
+        }
+
+        # Temi di tooltip con classi Tailwind dirette - Stile filled
+        TOOLTIP_FILLED_THEMES = {
+          default: "bg-gray-900 text-white",
+          white: "bg-white text-gray-900 border border-gray-200",
+          red: "bg-red-600 text-white",
+          rose: "bg-rose-600 text-white",
+          orange: "bg-orange-600 text-white",
+          green: "bg-green-600 text-white",
+          blue: "bg-blue-600 text-white",
+          yellow: "bg-yellow-600 text-white",
+          violet: "bg-violet-600 text-white"
+        }
+
+        # Temi di tooltip con classi Tailwind dirette - Stile outline
+        TOOLTIP_OUTLINE_THEMES = {
+          default: "bg-white text-gray-900 border border-gray-900",
+          white: "bg-gray-50 text-gray-900 border border-gray-300",
+          red: "bg-white text-red-600 border border-red-600",
+          rose: "bg-white text-rose-600 border border-rose-600",
+          orange: "bg-white text-orange-600 border border-orange-600",
+          green: "bg-white text-green-600 border border-green-600",
+          blue: "bg-white text-blue-600 border border-blue-600",
+          yellow: "bg-white text-yellow-600 border border-yellow-600",
+          violet: "bg-white text-violet-600 border border-violet-600"
+        }
+
+        # Classi per le frecce del tooltip - Filled
+        TOOLTIP_ARROW_BASE_CLASSES = "absolute w-2 h-2 transform rotate-45"
+
+        TOOLTIP_ARROW_POSITIONS = {
+          top: "top-full left-1/2 -translate-x-1/2 -mt-1",
+          right: "right-full top-1/2 -translate-y-1/2 -mr-1",
+          bottom: "bottom-full left-1/2 -translate-x-1/2 -mb-1",
+          left: "left-full top-1/2 -translate-y-1/2 -ml-1"
+        }
+
+        TOOLTIP_ARROW_FILLED_THEMES = {
+          default: "bg-gray-900",
+          white: "bg-white border border-gray-200",
+          red: "bg-red-600",
+          rose: "bg-rose-600",
+          orange: "bg-orange-600",
+          green: "bg-green-600",
+          blue: "bg-blue-600",
+          yellow: "bg-yellow-600",
+          violet: "bg-violet-600"
+        }
+
+        TOOLTIP_ARROW_OUTLINE_THEMES = {
+          default: "bg-white border border-gray-900",
+          white: "bg-gray-50 border border-gray-300",
+          red: "bg-white border border-red-600",
+          rose: "bg-white border border-rose-600",
+          orange: "bg-white border border-orange-600",
+          green: "bg-white border border-green-600",
+          blue: "bg-white border border-blue-600",
+          yellow: "bg-white border border-yellow-600",
+          violet: "bg-white border border-violet-600"
+        }
+
+        # @param text [String] testo del tooltip
+        # @param theme [Symbol] :default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet
+        # @param position [Symbol] :top, :right, :bottom, :left posizione del tooltip
+        # @param size [Symbol] :small, :medium, :large dimensione del tooltip
+        # @param style [Symbol] :filled, :outline stile del tooltip
+        # @param classes [String] classi CSS aggiuntive per il container
+        # @param html_options [Hash] opzioni HTML per il container
+        def initialize(
+          text: nil,
+          theme: :white,
+          position: :top,
+          size: :medium,
+          style: :filled,
+          classes: nil,
+          **html_options
+        )
+          @text = text
+          @theme = theme.to_sym
+          @position = position.to_sym
+          @size = size.to_sym
+          @style = style.to_sym
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il container
+        def combined_classes
+          [
+            TOOLTIP_BASE_CLASSES,
+            "group", # Necessario per il trigger hover
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per il bubble del tooltip
+        def bubble_classes
+          [
+            TOOLTIP_BUBBLE_BASE_CLASSES,
+            get_position_class,
+            get_size_class,
+            get_theme_class,
+            TOOLTIP_HOVER_CLASSES
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per la freccia del tooltip
+        def arrow_classes
+          [
+            TOOLTIP_ARROW_BASE_CLASSES,
+            get_arrow_position_class,
+            get_arrow_theme_class
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi per il container del tooltip
+        def tooltip_attributes
+          attrs = {
+            class: combined_classes,
+            role: "tooltip",
+            "data-tooltip": @text
+          }
+
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Genera le classi per la posizione
+        def get_position_class
+          TOOLTIP_POSITIONS[@position] || TOOLTIP_POSITIONS[:top]
+        end
+
+        # Genera le classi per la dimensione
+        def get_size_class
+          TOOLTIP_SIZES[@size] || TOOLTIP_SIZES[:medium]
+        end
+
+        # Genera le classi per il tema
+        def get_theme_class
+          if @style == :outline
+            TOOLTIP_OUTLINE_THEMES[@theme] || TOOLTIP_OUTLINE_THEMES[:white]
+          else
+            TOOLTIP_FILLED_THEMES[@theme] || TOOLTIP_FILLED_THEMES[:white]
+          end
+        end
+
+        # Genera le classi per la posizione della freccia
+        def get_arrow_position_class
+          TOOLTIP_ARROW_POSITIONS[@position] || TOOLTIP_ARROW_POSITIONS[:top]
+        end
+
+        # Genera le classi per il tema della freccia
+        def get_arrow_theme_class
+          if @style == :outline
+            TOOLTIP_ARROW_OUTLINE_THEMES[@theme] || TOOLTIP_ARROW_OUTLINE_THEMES[:white]
+          else
+            TOOLTIP_ARROW_FILLED_THEMES[@theme] || TOOLTIP_ARROW_FILLED_THEMES[:white]
+          end
+        end
+
+        # Verifica se il componente deve essere renderizzato
+        def render?
+          @text.present? && content.present?
+        end
+
+        private
+
+        def validate_params
+          validate_theme
+          validate_position
+          validate_size
+          validate_style
+        end
+
+        def validate_theme
+          valid_themes = TOOLTIP_FILLED_THEMES.keys
+          unless valid_themes.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{valid_themes.join(', ')}"
+          end
+        end
+
+        def validate_position
+          valid_positions = TOOLTIP_POSITIONS.keys
+          unless valid_positions.include?(@position)
+            raise ArgumentError, "La posizione deve essere una tra: #{valid_positions.join(', ')}"
+          end
+        end
+
+        def validate_size
+          valid_sizes = TOOLTIP_SIZES.keys
+          unless valid_sizes.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{valid_sizes.join(', ')}"
+          end
+        end
+
+        def validate_style
+          valid_styles = [:filled, :outline]
+          unless valid_styles.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{valid_styles.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/controllers/better_ui/application_controller.rb

@@ -0,0 +1,5 @@
+module BetterUi
+  class ApplicationController < ActionController::Base
+    layout 'better_ui/application'
+  end
+end

data/app/helpers/better_ui/application/components/main/main_helper.rb

@@ -0,0 +1,42 @@
+module BetterUi
+  module Application
+    module Components
+      module Main
+        module MainHelper
+          # Helper per creare il contenitore principale dell'applicazione
+          #
+          # @param padding [Boolean] Se applicare il padding al contenitore principale, default true
+          # @param inner_padding [Boolean] Se applicare il padding al contenitore interno, default true
+          # @param rounded [Symbol] Tipo di border-radius del contenitore interno (:none, :small, :medium, :large, :full), default :small
+          # @param shadow [Symbol] Tipo di ombra del contenitore interno (:none, :sm, :md, :lg), default :md
+          # @param with_sidebar [Boolean] Se lasciare lo spazio per la sidebar, default true
+          # @param with_navbar [Boolean] Se lasciare lo spazio per la navbar, default true
+          # @param classes [String] Classi CSS aggiuntive per il contenitore principale
+          # @param block [Proc] Blocco contenente il contenuto del main
+          #
+          # @return [String] HTML del componente main
+          def bui_main(
+            padding: true,
+            inner_padding: true,
+            rounded: :small,
+            shadow: :md,
+            with_sidebar: true,
+            with_navbar: true,
+            classes: nil,
+            &block
+          )
+            render BetterUi::Application::Main::Component.new(
+              padding: padding,
+              inner_padding: inner_padding,
+              rounded: rounded,
+              shadow: shadow,
+              with_sidebar: with_sidebar,
+              with_navbar: with_navbar,
+              classes: classes
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/application/components/main.rb

@@ -0,0 +1,13 @@
+module BetterUi
+  module Application
+    module Components
+      module Main
+        # Require dell'helper main
+        require_relative 'main/main_helper'
+
+        # Include dell'helper nel modulo Main
+        include MainHelper
+      end
+    end
+  end
+end

data/app/helpers/better_ui/application/components/navbar/navbar_helper.rb

@@ -0,0 +1,51 @@
+module BetterUi
+  module Application
+    module Components
+      module Navbar
+        module NavbarHelper
+          # Helper per creare la navbar dell'applicazione
+          #
+          # @param theme [Symbol] Tema colori (:default, :dark, :light), default :default
+          # @param position [Symbol] Posizione della navbar (:top, :fixed_top, :sticky_top), default :top
+          # @param height [Symbol] Altezza della navbar (:sm, :md, :lg), default :md
+          # @param shadow [Symbol] Tipo di ombra (:none, :sm, :md, :lg, :xl), default :sm
+          # @param border [Boolean] Se mostrare il bordo inferiore, default true
+          # @param brand [Hash] Configurazione brand (logo, title, href)
+          # @param breadcrumb [Hash] Configurazione breadcrumb (items, separator, theme)
+          # @param navigation_items [Array] Array di elementi di navigazione centrali
+          # @param actions [Array] Array di azioni/pulsanti a destra
+          # @param classes [String] Classi CSS aggiuntive
+          # @param block [Proc] Blocco contenente contenuto aggiuntivo della navbar
+          #
+          # @return [String] HTML del componente navbar
+          def bui_navbar(
+            theme: :default,
+            position: :top,
+            height: :md,
+            shadow: :sm,
+            border: true,
+            brand: {},
+            breadcrumb: {},
+            navigation_items: [],
+            actions: [],
+            classes: nil,
+            &block
+          )
+            render BetterUi::Application::Navbar::Component.new(
+              theme: theme,
+              position: position,
+              height: height,
+              shadow: shadow,
+              border: border,
+              brand: brand,
+              breadcrumb: breadcrumb,
+              navigation_items: navigation_items,
+              actions: actions,
+              classes: classes
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/application/components/navbar.rb

@@ -0,0 +1,13 @@
+module BetterUi
+  module Application
+    module Components
+      module Navbar
+        # Require dell'helper navbar
+        require_relative 'navbar/navbar_helper'
+
+        # Include dell'helper nel modulo Navbar
+        include NavbarHelper
+      end
+    end
+  end
+end

data/app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb

@@ -0,0 +1,51 @@
+module BetterUi
+  module Application
+    module Components
+      module Sidebar
+        module SidebarHelper
+          # Helper per creare la sidebar dell'applicazione
+          #
+          # @param width [Symbol] Larghezza della sidebar (:sm, :md, :lg, :xl), default :md
+          # @param position [Symbol] Posizione della sidebar (:left, :right), default :left
+          # @param theme [Symbol] Tema colori (:default, :dark, :light), default :default
+          # @param shadow [Symbol] Tipo di ombra (:none, :sm, :md, :lg), default :lg
+          # @param border [Boolean] Se mostrare il bordo destro/sinistro, default true
+          # @param header [Hash] Configurazione header (logo, title, subtitle)
+          # @param footer [Hash] Configurazione footer (content, user_info)
+          # @param navigation_sections [Array] Array di sezioni di navigazione
+          # @param collapsible [Boolean] Se abilitare sezioni collassabili, default true
+          # @param classes [String] Classi CSS aggiuntive
+          # @param block [Proc] Blocco contenente contenuto aggiuntivo della sidebar
+          #
+          # @return [String] HTML del componente sidebar
+          def bui_sidebar(
+            width: :md,
+            position: :left,
+            theme: :default,
+            shadow: :lg,
+            border: true,
+            header: {},
+            footer: {},
+            navigation_sections: [],
+            collapsible: true,
+            classes: nil,
+            &block
+          )
+            render BetterUi::Application::Sidebar::Component.new(
+              width: width,
+              position: position,
+              theme: theme,
+              shadow: shadow,
+              border: border,
+              header: header,
+              footer: footer,
+              navigation_sections: navigation_sections,
+              collapsible: collapsible,
+              classes: classes
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/application/components/sidebar.rb

@@ -0,0 +1,13 @@
+module BetterUi
+  module Application
+    module Components
+      module Sidebar
+        # Require dell'helper sidebar
+        require_relative 'sidebar/sidebar_helper'
+
+        # Include dell'helper nel modulo Sidebar
+        include SidebarHelper
+      end
+    end
+  end
+end

data/app/helpers/better_ui/application_helper.rb

@@ -0,0 +1,10 @@
+module BetterUi
+  module ApplicationHelper
+    # Inclusione dei moduli aggregatori per i componenti application
+    # Questo assicura che tutti gli helper specifici dei componenti siano disponibili.
+
+    include BetterUi::Application::Components::Main if defined?(BetterUi::Application::Components::Main)
+    include BetterUi::Application::Components::Sidebar if defined?(BetterUi::Application::Components::Sidebar)
+    include BetterUi::Application::Components::Navbar if defined?(BetterUi::Application::Components::Navbar)
+  end
+end

data/app/helpers/better_ui/form_helper.rb

@@ -0,0 +1,5 @@
+module BetterUi
+  module FormHelper
+
+  end
+end

data/app/helpers/better_ui/general/components/alert/alert_helper.rb

@@ -0,0 +1,29 @@
+module BetterUi
+  module General
+    module Components
+      module Alert
+        module AlertHelper
+          # Render un alert con le opzioni specificate
+          #
+          # @param options [Hash] opzioni per il componente
+          #
+          # @option options [String] :title (nil) titolo dell'alert
+          # @option options [String] :message (nil) contenuto dell'alert
+          # @option options [Symbol] :theme (:default) :default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet
+          # @option options [String] :icon (nil) nome dell'icona (usa default se nil)
+          # @option options [Symbol] :icon_position (:left) :left, :right posizione dell'icona
+          # @option options [Boolean] :dismissible (false) se l'alert può essere chiuso
+          # @option options [Symbol] :rounded (:medium) :none, :small, :medium, :large, :full arrotondamento degli angoli
+          # @option options [Symbol] :importance (:medium) :high, :medium, :low livello di importanza per accessibilità
+          # @option options [Boolean] :html_content (false) se il messaggio contiene HTML
+          # @option options [String] :classes (nil) classi CSS aggiuntive
+          #
+          # @return [String] HTML del componente
+          def bui_alert(**options)
+            render BetterUi::General::Alert::Component.new(**options)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module BetterUi
+  module General
+    module Components
+      module Alert
+        # Require dell'helper alert
+        require_relative 'alert/alert_helper'
+
+        # Include dell'helper nel modulo Alert
+        include AlertHelper
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/avatar/avatar_helper.rb

@@ -0,0 +1,29 @@
+module BetterUi
+  module General
+    module Components
+      module Avatar
+        module AvatarHelper
+          # Render un avatar con le opzioni specificate
+          #
+          # @param options [Hash] opzioni per il componente
+          #
+          # @option options [String] :name (nil) nome per le iniziali
+          # @option options [String] :src (nil) URL dell'immagine
+          # @option options [Symbol] :size (:medium) :xxsmall, :xsmall, :small, :medium, :large, :xlarge, :xxlarge
+          # @option options [Symbol] :shape (:circle) :circle, :square, :rounded
+          # @option options [Symbol] :status (nil) :online, :offline, :busy, :away
+          # @option options [Symbol] :status_position (:bottom_right) :bottom_right, :bottom_left, :top_right, :top_left
+          # @option options [Symbol] :theme (:white) :default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet
+          # @option options [Symbol] :style (:filled) :filled, :outline, :light
+          # @option options [String] :classes (nil) classi CSS aggiuntive
+          # @option options [String] :id (nil) ID HTML
+          #
+          # @return [String] HTML del componente
+          def bui_avatar(**options)
+            render BetterUi::General::Avatar::Component.new(**options)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+module BetterUi
+  module General
+    module Components
+      module Avatar
+        # Require dell'helper avatar
+        require_relative 'avatar/avatar_helper'
+
+        # Include dell'helper nel modulo Avatar
+        include AvatarHelper
+      end
+    end
+  end
+end