better_ui 0.6.0 → 0.7.1

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

@@ -1,111 +0,0 @@
-# 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/components/better_ui/general/tag/component.html.erb

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

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

@@ -1,104 +0,0 @@
-# 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/text/component.html.erb

@@ -1 +0,0 @@
-<%= tag.span(text_content, **text_attributes) %>

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

@@ -1,194 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Text
-      class Component < ViewComponent::Base
-        attr_reader :text, :theme, :size, :align, :weight, :style, :classes, :html_options
-
-        # Classi base sempre presenti
-        TEXT_BASE_CLASSES = "block"
-
-        # Temi colore con classi Tailwind dirette
-        TEXT_THEME_CLASSES = {
-          default: "text-gray-900",      # Testo nero standard
-          white: "text-white",           # Testo bianco
-          red: "text-red-600",
-          rose: "text-rose-600",
-          orange: "text-orange-600",
-          green: "text-green-600",
-          blue: "text-blue-600",
-          yellow: "text-yellow-600",
-          violet: "text-violet-600",
-          purple: "text-purple-600",
-          gray: "text-gray-600",
-          muted: "text-gray-500"
-        }.freeze
-
-        # Dimensioni con classi Tailwind dirette
-        TEXT_SIZE_CLASSES = {
-          xs: "text-xs",
-          small: "text-sm",
-          medium: "text-base",
-          large: "text-lg",
-          xl: "text-xl",
-          "2xl": "text-2xl"
-        }.freeze
-
-        # Allineamenti con classi Tailwind dirette
-        TEXT_ALIGN_CLASSES = {
-          left: "text-left",
-          center: "text-center",
-          right: "text-right",
-          justify: "text-justify"
-        }.freeze
-
-        # Peso font con classi Tailwind dirette
-        TEXT_WEIGHT_CLASSES = {
-          thin: "font-thin",
-          light: "font-light",
-          normal: "font-normal",
-          medium: "font-medium",
-          semibold: "font-semibold",
-          bold: "font-bold",
-          extrabold: "font-extrabold"
-        }.freeze
-
-        # Stili con classi Tailwind dirette
-        TEXT_STYLE_CLASSES = {
-          normal: "",
-          italic: "italic",
-          underline: "underline",
-          line_through: "line-through"
-        }.freeze
-
-        # @param text [String] testo da mostrare (opzionale se si usa blocco)
-        # @param theme [Symbol] tema del colore (:default, :white, :red, :blue, etc.)
-        # @param size [Symbol] dimensione (:xs, :small, :medium, :large, :xl, :"2xl")
-        # @param align [Symbol] allineamento (:left, :center, :right, :justify)
-        # @param weight [Symbol] peso font (:thin, :light, :normal, :medium, :semibold, :bold, :extrabold)
-        # @param style [Symbol] stile (:normal, :italic, :underline, :line_through)
-        # @param classes [String] classi CSS aggiuntive
-        # @param html_options [Hash] opzioni HTML aggiuntive
-        def initialize(
-          text: nil,
-          theme: :default,
-          size: :medium,
-          align: :left,
-          weight: :normal,
-          style: :normal,
-          classes: '',
-          **html_options
-        )
-          @text = text
-          @theme = theme.to_sym
-          @size = size.to_sym
-          @align = align.to_sym
-          @weight = weight.to_sym
-          @style = style.to_sym
-          @classes = classes
-          @html_options = html_options
-
-          validate_params
-          super()
-        end
-
-        # Combina tutte le classi CSS
-        def combined_classes
-          [
-            TEXT_BASE_CLASSES,
-            get_theme_classes,
-            get_size_classes,
-            get_align_classes,
-            get_weight_classes,
-            get_style_classes,
-            @classes,
-            @html_options[:class]
-          ].compact.join(" ")
-        end
-
-        # Attributi HTML per l'elemento
-        def text_attributes
-          attrs = @html_options.except(:class)
-          attrs[:class] = combined_classes
-          attrs
-        end
-
-        # Determina se il componente ha contenuto da renderizzare
-        def render?
-          @text.present? || content.present?
-        end
-
-        # Contenuto da mostrare (testo diretto o contenuto blocco)
-        def text_content
-          @text.present? ? @text : content
-        end
-
-        private
-
-        def validate_params
-          validate_theme
-          validate_size
-          validate_align
-          validate_weight
-          validate_style
-        end
-
-        def validate_theme
-          unless TEXT_THEME_CLASSES.key?(@theme)
-            valid_themes = TEXT_THEME_CLASSES.keys
-            raise ArgumentError, "Il tema deve essere uno tra: #{valid_themes.join(', ')}"
-          end
-        end
-
-        def validate_size
-          unless TEXT_SIZE_CLASSES.key?(@size)
-            valid_sizes = TEXT_SIZE_CLASSES.keys
-            raise ArgumentError, "La dimensione deve essere una tra: #{valid_sizes.join(', ')}"
-          end
-        end
-
-        def validate_align
-          unless TEXT_ALIGN_CLASSES.key?(@align)
-            valid_aligns = TEXT_ALIGN_CLASSES.keys
-            raise ArgumentError, "L'allineamento deve essere uno tra: #{valid_aligns.join(', ')}"
-          end
-        end
-
-        def validate_weight
-          unless TEXT_WEIGHT_CLASSES.key?(@weight)
-            valid_weights = TEXT_WEIGHT_CLASSES.keys
-            raise ArgumentError, "Il peso deve essere uno tra: #{valid_weights.join(', ')}"
-          end
-        end
-
-        def validate_style
-          unless TEXT_STYLE_CLASSES.key?(@style)
-            valid_styles = TEXT_STYLE_CLASSES.keys
-            raise ArgumentError, "Lo stile deve essere uno tra: #{valid_styles.join(', ')}"
-          end
-        end
-
-        def get_theme_classes
-          TEXT_THEME_CLASSES[@theme]
-        end
-
-        def get_size_classes
-          TEXT_SIZE_CLASSES[@size]
-        end
-
-        def get_align_classes
-          TEXT_ALIGN_CLASSES[@align]
-        end
-
-        def get_weight_classes
-          TEXT_WEIGHT_CLASSES[@weight]
-        end
-
-        def get_style_classes
-          TEXT_STYLE_CLASSES[@style]
-        end
-      end
-    end
-  end
-end

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

@@ -1,7 +0,0 @@
-<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

@@ -1,239 +0,0 @@
-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