better_ui 0.1.0 → 0.1.1

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/helpers/better_ui/application/components/card/card_helper.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Components
+      module Card
+        module CardHelper
+          # Helper per creare una card per metriche e statistiche nelle dashboard applicative
+          #
+          # @param title [String] Il titolo/etichetta della metrica
+          # @param value [String] Il valore principale da visualizzare
+          # @param trend [Symbol, nil] La direzione del trend (:up, :down, nil), default nil
+          # @param change [String, nil] Il valore del cambiamento (es. "+12%"), default nil
+          # @param color [Symbol] Il colore del trend (:green, :red, :blue, :yellow, :purple, :indigo, :gray), default :green
+          # @param theme [Symbol] Il tema della card (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet, :purple), default :default
+          # @param size [Symbol] La dimensione della card (:small, :medium, :large), default :medium
+          # @param rounded [Symbol] Il livello di arrotondamento (:none, :small, :medium, :large, :full), default :medium
+          # @param shadow [Symbol] Il tipo di ombra (:none, :small, :medium, :large), default :small
+          # @param classes [String, nil] Classi CSS aggiuntive per il contenitore principale
+          # @param form [Nil] Parametro form per compatibilità con form builder (non utilizzato)
+          # @param options [Hash] Attributi HTML aggiuntivi da passare al div principale
+          #
+          # @return [String] HTML della card per metriche
+          #
+          # @example Card base con solo titolo e valore
+          #   <%= bui_card(title: "Utenti Attivi", value: "1.234") %>
+          #
+          # @example Card con trend positivo
+          #   <%= bui_card(
+          #     title: "Vendite Totali",
+          #     value: "€ 45.231",
+          #     trend: :up,
+          #     change: "+12%",
+          #     color: :green
+          #   ) %>
+          #
+          # @example Card con trend negativo
+          #   <%= bui_card(
+          #     title: "Conversioni",
+          #     value: "2.8%",
+          #     trend: :down,
+          #     change: "-5%",
+          #     color: :red
+          #   ) %>
+          #
+          # @example Card con tema e dimensioni personalizzate
+          #   <%= bui_card(
+          #     title: "Revenue",
+          #     value: "$89,432",
+          #     theme: :primary,
+          #     size: :large,
+          #     rounded: :large,
+          #     shadow: :medium
+          #   ) %>
+          #
+          # @example Card con attributi HTML aggiuntivi
+          #   <%= bui_card(
+          #     title: "Performance",
+          #     value: "98.5%",
+          #     classes: "transition-all hover:shadow-lg",
+          #     data: { controller: "stats" },
+          #     id: "performance-card"
+          #   ) %>
+          def bui_card(
+            title:,
+            value:,
+            trend: nil,
+            change: nil,
+            color: :green,
+            theme: :default,
+            size: :medium,
+            rounded: :medium,
+            shadow: :small,
+            classes: nil,
+            form: nil,
+            **options
+          )
+            render BetterUi::Application::Card::Component.new(
+              title: title,
+              value: value,
+              trend: trend,
+              change: change,
+              color: color,
+              theme: theme,
+              size: size,
+              rounded: rounded,
+              shadow: shadow,
+              classes: classes,
+              **options
+            )
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Components
+      module Card
+        include BetterUi::Application::Components::Card::CardHelper
+      end
+    end
+  end
+end

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

@@ -0,0 +1,64 @@
+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, :small, :medium, :large), default :medium
+          # @param with_sidebar [Boolean] Se lasciare lo spazio per la sidebar, default true
+          # @param sidebar_width [Symbol] Larghezza della sidebar (:sm, :md, :lg, :xl), default :md
+          # @param classes [String] Classi CSS aggiuntive per il contenitore principale
+          # @param form [Nil] Parametro form per compatibilità con form builder (non utilizzato)
+          # @param block [Proc] Blocco contenente il contenuto del main
+          #
+          # @return [String] HTML del componente main
+          #
+          # @example Main base
+          #   <%= bui_main %>
+          # 
+          # @example Main con tema
+          #   <%= bui_main(rounded: :medium, shadow: :lg) %>
+          #
+          # @example Main senza sidebar
+          #   <%= bui_main(with_sidebar: false) %>
+          #
+          # @example Main con padding personalizzati
+          #   <%= bui_main(padding: false, inner_padding: true) %>
+          #
+          # @example Main con classi aggiuntive
+          #   <%= bui_main(
+          #     classes: "my-8",
+          #     data: { controller: "main" }
+          #   ) %>
+          def bui_main(
+            padding: true,
+            inner_padding: true,
+            rounded: :small,
+            shadow: :medium,
+            with_sidebar: true,
+            sidebar_width: :md,
+            classes: nil,
+            form: nil, 
+            **options,
+            &block
+          )
+            render BetterUi::Application::Main::Component.new(
+              padding: padding,
+              inner_padding: inner_padding,
+              rounded: rounded,
+              shadow: shadow,
+              with_sidebar: with_sidebar,
+              sidebar_width: sidebar_width,
+              classes: classes,
+              **options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Components
+      module Navbar
+        module NavbarHelper
+          # Helper per creare la navbar dell'applicazione
+          #
+          # @param theme [Symbol] Tema colori (default, white, red, rose, orange, green, blue, yellow, violet), default :default
+          # @param shadow [Symbol] Tipo di ombra (none, small, medium, large), default :small
+          # @param border [Boolean] Se mostrare il bordo inferiore, default true
+          # @param actions [Array] Array di azioni/pulsanti a destra
+          # @param classes [String] Classi CSS aggiuntive
+          # @param with_sidebar [Boolean] Se la navbar è affiancata a una sidebar, default false
+          # @param sidebar_width [Symbol] Larghezza della sidebar affiancata (:sm, :md, :lg, :xl), default :md
+          # @param form [Nil] Parametro form per compatibilità con form builder (non utilizzato)
+          # @param options [Hash] Opzioni HTML aggiuntive
+          # @param block [Proc] Blocco contenente contenuto aggiuntivo della navbar
+          #
+          # @return [String] HTML del componente navbar
+          #
+          # @example Navbar base
+          #   <%= bui_navbar %>
+          # 
+          # @example Navbar con tema
+          #   <%= bui_navbar(theme: :blue) %>
+          #
+          #
+          # @example Navbar con azioni
+          #   <%= bui_navbar(
+          #     actions: [
+          #       { 
+          #         type: :avatar,
+          #         avatar: { initials: 'AB', theme: :green },
+          #         href: '/profile'
+          #       },
+          #       {
+          #         type: :icon,
+          #         icon: 'chat',
+          #         data: { action: 'click->chat#toggle' }
+          #       }
+          #     ]
+          #   ) %>
+          #
+          # @example Navbar con classi aggiuntive
+          #   <%= bui_navbar(
+          #     classes: "my-8",
+          #     data: { controller: "navbar" }
+          #   ) %>
+          def bui_navbar(
+            theme: :default,
+            shadow: :small,
+            border: true,
+            actions: [],
+            classes: nil,
+            with_sidebar: false,
+            sidebar_width: :md,
+            form: nil, 
+            **options,
+            &block
+          )
+            render BetterUi::Application::Navbar::Component.new(
+              theme: theme,
+              shadow: shadow,
+              border: border,
+              actions: actions,
+              classes: classes,
+              with_sidebar: with_sidebar,
+              sidebar_width: sidebar_width
+            ), &block
+          end
+        end
+      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