better_ui 0.1.0 → 0.1.1

data/app/components/better_ui/general/input/select/select_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Select
+        class SelectComponent < ViewComponent::Base
+          attr_reader :name, :options, :selected, :required, :disabled, :multiple, :options_html, :classes, :html_options
+
+          BASE_SELECT_CLASSES = "h-10 px-3 py-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed"
+          # @param name [String] Nome del campo
+          # @param options [Array] Opzioni del select ([{value => label}, {value => label}, ...])
+          # @param selected [String, Array] Valore selezionato
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @param multiple [Boolean] Se il select è multiplo
+          # @param options_html [Hash] Opzioni HTML aggiuntive per le option
+          # @param classes [String] Classi del campo
+          # @param html_options [Hash] Opzioni HTML del campo
+          def initialize(name:, options:, selected: nil, required: false, disabled: false, multiple: false, options_html: {}, classes: '', **html_options)
+            @name = name
+            @type = :select
+            @required = required
+            @disabled = disabled
+            @options = options.map { |option| { value: option[:value], label: option[:label] } }
+            @selected = selected
+            @multiple = multiple
+            @options_html = options_html
+            @classes = BASE_SELECT_CLASSES + classes
+
+            puts "Optionssssssssssssssssssssssss: #{selected}" 
+          end
+        end
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/input/text/component.html.erb

@@ -0,0 +1,5 @@
+<% if @form %>
+  <%= @form.text_field(@name, **form_input_attributes) %>
+<% else %>
+  <%= tag.input(**input_attributes) %>
+<% end %>

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

@@ -0,0 +1,171 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Text
+        class Component < ViewComponent::Base
+          attr_reader :name, :value, :placeholder, :required, :disabled, :classes, :options,
+                      :theme, :size, :rounded, :form, :type
+
+          # Temi supportati per il Text Input
+          TEXT_INPUT_THEME = {
+            default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
+            white: 'border-white focus:border-gray-300 focus:ring-gray-300 bg-white',
+            red: 'border-red-300 focus:border-red-500 focus:ring-red-500',
+            rose: 'border-rose-300 focus:border-rose-500 focus:ring-rose-500',
+            orange: 'border-orange-300 focus:border-orange-500 focus:ring-orange-500',
+            green: 'border-green-300 focus:border-green-500 focus:ring-green-500',
+            blue: 'border-blue-300 focus:border-blue-500 focus:ring-blue-500',
+            yellow: 'border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500',
+            violet: 'border-violet-300 focus:border-violet-500 focus:ring-violet-500'
+          }.freeze
+
+          # Dimensioni supportate per il Text Input
+          TEXT_INPUT_SIZES = {
+            small: 'h-8 px-2 py-1 text-xs',
+            medium: 'h-10 px-3 py-2 text-sm',
+            large: 'h-12 px-4 py-3 text-base'
+          }.freeze
+
+          # Border radius supportati per il Text Input
+          TEXT_INPUT_RADIUS = {
+            none: 'rounded-none',
+            small: 'rounded-sm',
+            medium: 'rounded-md',
+            large: 'rounded-lg',
+            full: 'rounded-full'
+          }.freeze
+
+          # Tipi supportati per il Text Input
+          TEXT_INPUT_TYPES = [
+            :text, :password, :email, :tel, :url, :number, :search,
+            :date, :time, :datetime_local, :month, :week, :color
+          ].freeze
+
+          # Classi base per il Text Input
+          TEXT_INPUT_BASE_CLASSES = 'block w-full border shadow-sm disabled:bg-gray-100 disabled:cursor-not-allowed focus:outline-none focus:ring-1'
+
+          # @param name [String] Nome del campo input
+          # @param value [String] Valore del campo
+          # @param placeholder [String] Placeholder del campo
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @param type [Symbol] Tipo del campo input (:text, :password, :email, :tel, :url, :number, :search, :date, :time, :datetime_local, :month, :week, :color)
+          # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+          # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+          # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
+          # @param classes [String] Classi CSS aggiuntive
+          # @param form [ActionView::Helpers::FormBuilder] Form builder Rails opzionale
+          # @param options [Hash] Opzioni aggiuntive per l'input
+          def initialize(name:, value: nil, placeholder: nil, required: false, disabled: false, 
+                         type: :text, theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
+            @name = name
+            @value = value
+            @placeholder = placeholder
+            @required = required
+            @disabled = disabled
+            @type = type
+            @theme = theme
+            @size = size
+            @rounded = rounded
+            @classes = classes
+            @form = form
+            @options = options
+
+            validate_params
+            super()
+          end
+
+          # Attributi per l'elemento input standalone
+          def input_attributes
+            {
+              type: @type,
+              name: @name,
+              id: @name,
+              value: @value,
+              placeholder: @placeholder,
+              required: @required,
+              disabled: @disabled,
+              class: build_classes
+            }.merge(@options)
+          end
+
+          # Attributi per l'elemento input con form builder
+          def form_input_attributes
+            {
+              class: build_classes,
+              placeholder: @placeholder,
+              required: @required,
+              disabled: @disabled
+            }.merge(@options)
+          end
+
+          private
+
+          # Costruisce le classi CSS complete
+          def build_classes
+            [
+              TEXT_INPUT_BASE_CLASSES,
+              get_theme_classes,
+              get_size_classes,
+              get_rounded_classes,
+              @classes
+            ].compact.join(' ')
+          end
+
+          # Restituisce le classi del tema
+          def get_theme_classes
+            TEXT_INPUT_THEME[@theme]
+          end
+
+          # Restituisce le classi della dimensione
+          def get_size_classes
+            TEXT_INPUT_SIZES[@size]
+          end
+
+          # Restituisce le classi del border radius
+          def get_rounded_classes
+            TEXT_INPUT_RADIUS[@rounded]
+          end
+
+          # Valida i parametri del componente
+          def validate_params
+            validate_type
+            validate_theme
+            validate_size
+            validate_rounded
+          end
+
+          # Valida il tema
+          def validate_theme
+            return if TEXT_INPUT_THEME.key?(@theme)
+
+            raise ArgumentError, "Tema non valido: #{@theme}. Temi supportati: #{TEXT_INPUT_THEME.keys.join(', ')}"
+          end
+
+          # Valida la dimensione
+          def validate_size
+            return if TEXT_INPUT_SIZES.key?(@size)
+
+            raise ArgumentError, "Dimensione non valida: #{@size}. Dimensioni supportate: #{TEXT_INPUT_SIZES.keys.join(', ')}"
+          end
+
+          # Valida il border radius
+          def validate_rounded
+            return if TEXT_INPUT_RADIUS.key?(@rounded)
+
+            raise ArgumentError, "Border radius non valido: #{@rounded}. Valori supportati: #{TEXT_INPUT_RADIUS.keys.join(', ')}"
+          end
+
+          # Valida il tipo
+          def validate_type
+            return if TEXT_INPUT_TYPES.include?(@type)
+
+            raise ArgumentError, "Tipo non valido: #{@type}. Tipi supportati: #{TEXT_INPUT_TYPES.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/input/textarea/component.html.erb

@@ -0,0 +1,5 @@
+<% if @form %>
+  <%= @form.text_area(@name, **form_textarea_attributes) %>
+<% else %>
+  <%= tag.textarea(**textarea_attributes) %>
+<% end %>

data/app/components/better_ui/general/input/textarea/component.rb

@@ -0,0 +1,166 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Textarea
+        class Component < ViewComponent::Base
+          attr_reader :name, :value, :placeholder, :required, :disabled, :classes, :options,
+                      :theme, :size, :rounded, :form, :rows
+
+          # Temi supportati per il Textarea
+          TEXTAREA_THEME = {
+            default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
+            white: 'border-white focus:border-gray-300 focus:ring-gray-300 bg-white',
+            red: 'border-red-300 focus:border-red-500 focus:ring-red-500',
+            rose: 'border-rose-300 focus:border-rose-500 focus:ring-rose-500',
+            orange: 'border-orange-300 focus:border-orange-500 focus:ring-orange-500',
+            green: 'border-green-300 focus:border-green-500 focus:ring-green-500',
+            blue: 'border-blue-300 focus:border-blue-500 focus:ring-blue-500',
+            yellow: 'border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500',
+            violet: 'border-violet-300 focus:border-violet-500 focus:ring-violet-500'
+          }.freeze
+
+          # Dimensioni supportate per il Textarea
+          TEXTAREA_SIZES = {
+            small: 'px-2 py-1 text-xs',
+            medium: 'px-3 py-2 text-sm',
+            large: 'px-4 py-3 text-base'
+          }.freeze
+
+          # Border radius supportati per il Textarea
+          TEXTAREA_RADIUS = {
+            none: 'rounded-none',
+            small: 'rounded-sm',
+            medium: 'rounded-md',
+            large: 'rounded-lg',
+            full: 'rounded-2xl'
+          }.freeze
+
+          # Classi base per il Textarea
+          TEXTAREA_BASE_CLASSES = 'block w-full border shadow-sm disabled:bg-gray-100 disabled:cursor-not-allowed focus:outline-none focus:ring-1 resize-y'
+
+          # @param name [String] Nome del campo textarea
+          # @param value [String] Valore del campo
+          # @param placeholder [String] Placeholder del campo
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @param rows [Integer] Numero di righe per la textarea
+          # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+          # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+          # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
+          # @param classes [String] Classi CSS aggiuntive
+          # @param form [ActionView::Helpers::FormBuilder] Form builder Rails opzionale
+          # @param options [Hash] Opzioni aggiuntive per la textarea
+          def initialize(name:, value: nil, placeholder: nil, required: false, disabled: false, 
+                         rows: 3, theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
+            @name = name
+            @value = value
+            @placeholder = placeholder
+            @required = required
+            @disabled = disabled
+            @rows = rows
+            @theme = theme
+            @size = size
+            @rounded = rounded
+            @classes = classes
+            @form = form
+            @options = options
+
+            validate_params
+            super()
+          end
+
+          # Attributi per l'elemento textarea standalone
+          def textarea_attributes
+            {
+              name: @name,
+              id: @name,
+              value: @value,
+              placeholder: @placeholder,
+              required: @required,
+              disabled: @disabled,
+              rows: @rows,
+              class: build_classes
+            }.merge(@options)
+          end
+
+          # Attributi per l'elemento textarea con form builder
+          def form_textarea_attributes
+            {
+              class: build_classes,
+              placeholder: @placeholder,
+              required: @required,
+              disabled: @disabled,
+              rows: @rows
+            }.merge(@options)
+          end
+
+          private
+
+          # Costruisce le classi CSS complete
+          def build_classes
+            [
+              TEXTAREA_BASE_CLASSES,
+              get_theme_classes,
+              get_size_classes,
+              get_rounded_classes,
+              @classes
+            ].compact.join(' ')
+          end
+
+          # Restituisce le classi del tema
+          def get_theme_classes
+            TEXTAREA_THEME[@theme]
+          end
+
+          # Restituisce le classi della dimensione
+          def get_size_classes
+            TEXTAREA_SIZES[@size]
+          end
+
+          # Restituisce le classi del border radius
+          def get_rounded_classes
+            TEXTAREA_RADIUS[@rounded]
+          end
+
+          # Valida i parametri del componente
+          def validate_params
+            validate_theme
+            validate_size
+            validate_rounded
+            validate_rows
+          end
+
+          # Valida il tema
+          def validate_theme
+            return if TEXTAREA_THEME.key?(@theme)
+
+            raise ArgumentError, "Tema non valido: #{@theme}. Temi supportati: #{TEXTAREA_THEME.keys.join(', ')}"
+          end
+
+          # Valida la dimensione
+          def validate_size
+            return if TEXTAREA_SIZES.key?(@size)
+
+            raise ArgumentError, "Dimensione non valida: #{@size}. Dimensioni supportate: #{TEXTAREA_SIZES.keys.join(', ')}"
+          end
+
+          # Valida il border radius
+          def validate_rounded
+            return if TEXTAREA_RADIUS.key?(@rounded)
+
+            raise ArgumentError, "Border radius non valido: #{@rounded}. Valori supportati: #{TEXTAREA_RADIUS.keys.join(', ')}"
+          end
+
+          # Valida il numero di righe
+          def validate_rows
+            return if @rows.is_a?(Integer) && @rows.positive?
+
+            raise ArgumentError, "Il numero di righe deve essere un intero positivo: #{@rows}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<%# Template per il link %>
+<% if link? %>
+  <%= link_to @href, **element_attributes do %>
+    <% if show_icon? %>
+      <span class="<%= icon_classes %>"><%= render_icon %></span>
+    <% end %>
+    <span class="<%= text_classes %>"><%= @label %></span>
+    <%= content %>
+  <% end %>
+<% else %>
+  <%= tag.span(**element_attributes) do %>
+    <% if show_icon? %>
+      <span class="<%= icon_classes %>"><%= render_icon %></span>
+    <% end %>
+    <span class="<%= text_classes %>"><%= @label %></span>
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,258 @@
+module BetterUi
+  module General
+    module Link
+      class Component < ViewComponent::Base
+        attr_reader :label, :href, :theme, :orientation, :style, :size, :icon, :active, :disabled, :data, :method, :target
+
+        # Classi base sempre presenti
+        LINK_BASE_CLASSES = "transition-colors duration-200 no-underline"
+
+        # Temi con classi Tailwind dirette - LOGICA CORRETTA
+        LINK_THEME_CLASSES = {
+          default: "text-white hover:text-gray-300",        # Bianco per sfondi scuri
+          white: "text-gray-900 hover:text-gray-700",      # Nero per sfondi chiari
+          red: "text-red-500 hover:text-red-600",
+          rose: "text-rose-500 hover:text-rose-600",
+          orange: "text-orange-500 hover:text-orange-600",
+          green: "text-green-500 hover:text-green-600",
+          blue: "text-blue-500 hover:text-blue-600",
+          yellow: "text-yellow-600 hover:text-yellow-700",
+          violet: "text-violet-500 hover:text-violet-600"
+        }
+
+        # Orientamenti con classi Tailwind dirette
+        LINK_ORIENTATION_CLASSES = {
+          horizontal: "inline-flex items-center",
+          vertical: "flex flex-col items-center"
+        }
+
+        # Stili con classi Tailwind dirette
+        LINK_STYLE_CLASSES = {
+          default: "",
+          underline: "underline",
+          bold: "font-bold",
+          text: "no-underline"
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        LINK_SIZE_CLASSES = {
+          extra_small: "text-[0.65rem]",
+          small: "text-sm",
+          medium: "text-base",
+          large: "text-lg"
+        }
+
+        # Stati con classi Tailwind dirette
+        LINK_STATE_CLASSES = {
+          normal: "",
+          active: "font-semibold",
+          disabled: "opacity-50 cursor-not-allowed pointer-events-none"
+        }
+
+        # @param label [String] testo del link
+        # @param href [String] URL di destinazione (nil per semplice testo)
+        # @param theme [Symbol] tema del colore (:default, :white, etc.)
+        # @param orientation [Symbol] orientamento (:horizontal, :vertical)
+        # @param style [Symbol] stile (:default, :underline, :bold, :text)
+        # @param size [Symbol] dimensione (:extra_small, :small, :medium, :large)
+        # @param icon [String] icona opzionale
+        # @param active [Boolean] stato attivo del link
+        # @param disabled [Boolean] stato disabilitato del link
+        # @param data [Hash] attributi data
+        # @param method [Symbol] metodo HTTP (per Turbo)
+        # @param target [String] target del link
+        # @param html_options [Hash] opzioni HTML aggiuntive
+        def initialize(
+          label:,
+          href: nil,
+          theme: :white,
+          orientation: :horizontal,
+          style: :default,
+          size: :medium,
+          icon: nil,
+          active: false,
+          disabled: false,
+          data: {},
+          method: nil,
+          target: nil,
+          **html_options
+        )
+          @label = label
+          @href = href
+          @theme = theme.to_sym
+          @orientation = orientation.to_sym
+          @style = style.to_sym
+          @size = size.to_sym
+          @icon = icon
+          @active = active
+          @disabled = disabled
+          @data = data || {}
+          @method = method
+          @target = target
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Determina se è un link attivo/corrente
+        def active?
+          @active
+        end
+
+        # Determina se è disabilitato
+        def disabled?
+          @disabled
+        end
+
+        # Determina se è un link o solo testo
+        def link?
+          @href.present? && !@disabled
+        end
+
+        # Combina tutte le classi CSS
+        def combined_classes
+          [
+            LINK_BASE_CLASSES,
+            get_theme_class,
+            get_orientation_class,
+            get_style_class,
+            get_size_class,
+            get_state_class,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Classi per l'icona con dimensionamento proporzionale
+        def icon_classes
+          return "" unless @icon.present?
+
+          # Definisce spacing e dimensioni icona basate su size
+          base_spacing = case @orientation
+          when :horizontal
+            "mr-2"
+          when :vertical
+            "mb-1"
+          else
+            "mr-2"
+          end
+
+          icon_size = case @size
+          when :extra_small
+            "w-3 h-3"
+          when :small
+            "w-4 h-4"
+          when :medium
+            "w-5 h-5"
+          when :large
+            "w-6 h-6"
+          else
+            "w-5 h-5"
+          end
+
+          "#{base_spacing} #{icon_size} inline-block"
+        end
+
+        # Classi per il testo
+        def text_classes
+          "inline-block"
+        end
+
+        # Restituisce gli attributi per il link/span
+        def element_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = combined_classes
+
+          if link?
+            # Attributi specifici per i link
+            if @method.present?
+              attrs[:data] = @data.merge(turbo_method: @method)
+            elsif @data.present?
+              attrs[:data] = @data
+            end
+
+            attrs[:target] = @target if @target.present?
+            attrs[:aria] ||= {}
+            attrs[:aria][:current] = "page" if active?
+          else
+            # Attributi per span (testo semplice o disabilitato)
+            attrs[:aria] ||= {}
+            attrs[:aria][:disabled] = true if disabled?
+          end
+
+          attrs
+        end
+
+        # Determina se mostrare l'icona
+        def show_icon?
+          @icon.present?
+        end
+
+        # Renderizza l'icona
+        def render_icon
+          return nil unless show_icon?
+
+          if @icon.is_a?(String)
+            render BetterUi::General::IconComponent.new(name: @icon)
+          else
+            @icon # Assumiamo che sia già un componente renderizzato
+          end
+        end
+
+        private
+
+        def get_theme_class
+          LINK_THEME_CLASSES[@theme] || LINK_THEME_CLASSES[:white]
+        end
+
+        def get_orientation_class
+          LINK_ORIENTATION_CLASSES[@orientation] || LINK_ORIENTATION_CLASSES[:horizontal]
+        end
+
+        def get_style_class
+          LINK_STYLE_CLASSES[@style] || LINK_STYLE_CLASSES[:default]
+        end
+
+        def get_size_class
+          LINK_SIZE_CLASSES[@size] || LINK_SIZE_CLASSES[:medium]
+        end
+
+        def get_state_class
+          return LINK_STATE_CLASSES[:disabled] if disabled?
+          return LINK_STATE_CLASSES[:active] if active?
+          LINK_STATE_CLASSES[:normal]
+        end
+
+        def validate_params
+          validate_theme
+          validate_orientation
+          validate_style
+          validate_size
+        end
+
+        def validate_theme
+          unless LINK_THEME_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{LINK_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_orientation
+          unless LINK_ORIENTATION_CLASSES.keys.include?(@orientation)
+            raise ArgumentError, "L'orientamento deve essere uno tra: #{LINK_ORIENTATION_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_style
+          unless LINK_STYLE_CLASSES.keys.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{LINK_STYLE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless LINK_SIZE_CLASSES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{LINK_SIZE_CLASSES.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+<%# Template per il panel %>
+<div <%= tag.attributes(panel_attributes) %>>
+  <% if show_header? %>
+    <div class="<%= header_classes %>">
+      <% if @header.present? %>
+        <%= raw @header %>
+      <% elsif @title.present? %>
+        <div class="<%= title_classes %>"><%= @title %></div>
+      <% end %>
+    </div>
+  <% end %>
+  
+  <% if show_body? %>
+    <div class="<%= body_classes %>">
+      <% if @body.present? %>
+        <%= raw @body %>
+      <% elsif content.present? %>
+        <%= content %>
+      <% end %>
+    </div>
+  <% end %>
+  
+  <% if show_footer? %>
+    <div class="<%= footer_classes %>">
+      <%= raw @footer %>
+    </div>
+  <% end %>
+</div>