better_ui 0.1.0 → 0.2.0

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/components/better_ui/general/tag/component.html.erb

@@ -0,0 +1,3 @@
+<span class="<%= tag_classes %>">
+  <%= text %>
+</span>

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