better_ui 0.1.0 → 0.4.0

data/app/components/better_ui/application/toast_component.rb

@@ -0,0 +1,188 @@
+module BetterUi
+  module Application
+    class ToastComponent < ViewComponent::Base
+      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :position, :duration, :auto_hide
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        primary: {
+          bg: "bg-orange-50",
+          border: "border-orange-300",
+          title: "text-orange-800",
+          text: "text-orange-700",
+          icon: "text-orange-500",
+          close: "text-orange-500 hover:bg-orange-100"
+        },
+        info: {
+          bg: "bg-blue-50",
+          border: "border-blue-300",
+          title: "text-blue-800",
+          text: "text-blue-700",
+          icon: "text-blue-500",
+          close: "text-blue-500 hover:bg-blue-100"
+        },
+        success: {
+          bg: "bg-green-50",
+          border: "border-green-300",
+          title: "text-green-800",
+          text: "text-green-700",
+          icon: "text-green-500",
+          close: "text-green-500 hover:bg-green-100"
+        },
+        warning: {
+          bg: "bg-yellow-50",
+          border: "border-yellow-300",
+          title: "text-yellow-800",
+          text: "text-yellow-700",
+          icon: "text-yellow-500",
+          close: "text-yellow-500 hover:bg-yellow-100"
+        },
+        danger: {
+          bg: "bg-red-50",
+          border: "border-red-300",
+          title: "text-red-800",
+          text: "text-red-700",
+          icon: "text-red-500",
+          close: "text-red-500 hover:bg-red-100"
+        },
+        dark: {
+          bg: "bg-gray-800",
+          border: "border-gray-700",
+          title: "text-white",
+          text: "text-gray-300",
+          icon: "text-gray-400",
+          close: "text-gray-400 hover:bg-gray-700"
+        }
+      }
+
+      # Icone predefinite per ciascuna variante
+      DEFAULT_ICONS = {
+        primary: "bell",
+        info: "info-circle",
+        success: "check-circle",
+        warning: "exclamation-triangle",
+        danger: "exclamation-circle",
+        dark: "shield-exclamation"
+      }
+
+      # Posizioni possibili per i toast
+      POSITIONS = {
+        "top-right": "top-right",
+        "top-left": "top-left",
+        "bottom-right": "bottom-right",
+        "bottom-left": "bottom-left",
+        "top-center": "top-center",
+        "bottom-center": "bottom-center"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        title: nil,
+        message: nil,
+        variant: :info,
+        icon: nil, 
+        dismissible: true,
+        classes: nil,
+        data: {},
+        position: :"top-right",
+        duration: 5000,
+        auto_hide: true
+      )
+        @title = title
+        @message = message
+        @variant = variant.to_sym
+        @icon = icon
+        @dismissible = dismissible
+        @classes = classes
+        @data = data || {}
+        @position = position.to_sym
+        @duration = duration
+        @auto_hide = auto_hide
+
+        # Aggiungiamo dati per il comportamento del toast
+        @data[:controller] = "toast" if @data[:controller].blank?
+        @data[:toast_duration_value] = @duration if @auto_hide
+        @data[:toast_auto_hide_value] = @auto_hide.to_s
+        @data[:toast_position_value] = @position.to_s
+      end
+
+      # Genera l'icona in base alla variante se non specificata
+      def effective_icon
+        return @icon if @icon.present?
+        DEFAULT_ICONS[@variant]
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        position_class = POSITIONS.fetch(@position, POSITIONS[:"top-right"])
+        
+        [
+          "fixed z-50 rounded-lg p-4 border shadow-lg",
+          "transform transition-transform duration-300",
+          "data-toast-enter-from-class='translate-y-2 opacity-0'",
+          "data-toast-enter-to-class='translate-y-0 opacity-100'",
+          "data-toast-leave-from-class='translate-y-0 opacity-100'",
+          "data-toast-leave-to-class='translate-y-2 opacity-0'",
+          styles[:bg],
+          styles[:border],
+          position_class,
+          "min-w-[20rem] max-w-sm",
+          "flex items-start",
+          @classes
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il titolo
+      def title_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        
+        [
+          "font-medium",
+          styles[:title]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il messaggio
+      def message_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        
+        [
+          "mt-1",
+          styles[:text]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'icona
+      def icon_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        
+        [
+          "flex-shrink-0",
+          "mr-3 mt-0.5",
+          styles[:icon]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il pulsante di chiusura
+      def close_button_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        
+        [
+          "ml-auto -mr-1.5 -mt-1.5 inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2 focus:ring-gray-400",
+          styles[:close]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il contenuto
+      def content_classes
+        "flex-1"
+      end
+
+      # Verifica se il componente deve essere reso
+      def render?
+        @title.present? || @message.present? || content.present?
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/breadcrumb_component.html.erb

@@ -0,0 +1,39 @@
+<nav aria-label="Breadcrumb" class="<%= container_classes %>">
+  <ol class="flex flex-wrap items-center">
+    <% @items.each_with_index do |item, index| %>
+      <li class="flex items-center">
+        <% if last_item?(index) %>
+          <span class="<%= item_classes(true) %> flex items-center" aria-current="page">
+            <% if item_icon(item) %>
+              <span class="mr-1.5"><%= item_icon(item) %></span>
+            <% end %>
+            <%= item_text(item) %>
+          </span>
+        <% else %>
+          <% url = item_url(item) %>
+          <% if url.present? %>
+            <%= link_to url, class: "#{item_classes} flex items-center" do %>
+              <% if item_icon(item) %>
+                <span class="mr-1.5"><%= item_icon(item) %></span>
+              <% end %>
+              <%= item_text(item) %>
+            <% end %>
+          <% else %>
+            <span class="<%= item_classes %> flex items-center">
+              <% if item_icon(item) %>
+                <span class="mr-1.5"><%= item_icon(item) %></span>
+              <% end %>
+              <%= item_text(item) %>
+            </span>
+          <% end %>
+          
+          <% unless last_item?(index) %>
+            <span class="<%= separator_classes %>" aria-hidden="true">
+              <%= separator_text %>
+            </span>
+          <% end %>
+        <% end %>
+      </li>
+    <% end %>
+  </ol>
+</nav> 

data/app/components/better_ui/general/breadcrumb_component.rb

@@ -0,0 +1,132 @@
+module BetterUi
+  module General
+    class BreadcrumbComponent < ViewComponent::Base
+      attr_reader :items, :separator, :size, :variant, :classes, :inverse
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        default: {
+          container: "text-gray-600",
+          item: "text-gray-500 hover:text-gray-700",
+          active: "text-gray-900 font-medium",
+          separator: "text-gray-400"
+        },
+        primary: {
+          container: "text-orange-600",
+          item: "text-orange-500 hover:text-orange-700",
+          active: "text-orange-800 font-medium",
+          separator: "text-orange-300"
+        },
+        light: {
+          container: "text-gray-100",
+          item: "text-gray-200 hover:text-white",
+          active: "text-white font-medium",
+          separator: "text-gray-300"
+        }
+      }
+
+      # Dimensioni disponibili
+      SIZES = {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+
+      # Separatori predefiniti
+      SEPARATORS = {
+        slash: "/",
+        chevron: "›",
+        arrow: "→",
+        dot: "•",
+        pipe: "|"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        items: [],
+        separator: :chevron, 
+        size: :md,
+        variant: :default,
+        classes: nil,
+        inverse: false
+      )
+        @items = items || []
+        @separator = separator.to_sym
+        @size = size.to_sym
+        @variant = variant.to_sym
+        @classes = classes
+        @inverse = inverse
+      end
+
+      # Restituisce il separatore come stringa
+      def separator_text
+        if SEPARATORS.key?(@separator)
+          SEPARATORS[@separator]
+        else
+          @separator.to_s
+        end
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        [
+          "flex items-center flex-wrap",
+          SIZES.fetch(@size, SIZES[:md]),
+          VARIANTS.fetch(@variant, VARIANTS[:default])[:container],
+          @inverse ? "bg-gray-800 p-2 rounded" : "",
+          @classes
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per un elemento
+      def item_classes(active = false)
+        variant_classes = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        if active
+          variant_classes[:active]
+        else
+          variant_classes[:item]
+        end
+      end
+
+      # Genera le classi per il separatore
+      def separator_classes
+        [
+          "mx-2",
+          VARIANTS.fetch(@variant, VARIANTS[:default])[:separator]
+        ].compact.join(" ")
+      end
+
+      # Verifica se un item è l'ultimo (attivo)
+      def last_item?(index)
+        index == @items.length - 1
+      end
+
+      # Formatta il testo dell'item
+      def item_text(item)
+        item.is_a?(Hash) ? item[:label] : item.to_s
+      end
+
+      # Restituisce l'URL dell'item
+      def item_url(item)
+        item.is_a?(Hash) ? item[:url] : nil
+      end
+
+      # Restituisce l'icona dell'item se presente
+      def item_icon(item)
+        return nil unless item.is_a?(Hash) && item[:icon].present?
+        
+        if item[:icon].is_a?(String)
+          render BetterUi::General::IconComponent.new(name: item[:icon])
+        else
+          item[:icon] # Assumiamo che sia già un componente renderizzato
+        end
+      end
+
+      # Verifica se rendere il componente
+      def render?
+        @items.present? && @items.length > 0
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/button_component.html.erb

@@ -0,0 +1,34 @@
+<%# Template per il bottone %>
+<% if link? %>
+  <%= link_to @href, **link_attributes do %>
+    <% if @icon && @icon_position == :left %>
+      <span class="mr-2"><%= render_icon(@icon) %></span>
+    <% end %>
+    
+    <% if @label %>
+      <span><%= @label %></span>
+    <% end %>
+    
+    <% if @icon && @icon_position == :right %>
+      <span class="ml-2"><%= render_icon(@icon) %></span>
+    <% end %>
+    
+    <%= content %>
+  <% end %>
+<% else %>
+  <%= tag.button(**button_attributes) do %>
+    <% if @icon && @icon_position == :left %>
+      <span class="mr-2"><%= render_icon(@icon) %></span>
+    <% end %>
+    
+    <% if @label %>
+      <span><%= @label %></span>
+    <% end %>
+    
+    <% if @icon && @icon_position == :right %>
+      <span class="ml-2"><%= render_icon(@icon) %></span>
+    <% end %>
+    
+    <%= content %>
+  <% end %>
+<% end %> 

data/app/components/better_ui/general/button_component.rb

@@ -0,0 +1,193 @@
+module BetterUi
+  module General
+    class ButtonComponent < ViewComponent::Base
+      attr_reader :label, :type, :size, :outline, :full_width, :disabled, 
+                  :icon, :icon_position, :href, :method, :data, :classes, :id
+
+      # Tipi di bottoni disponibili con classi Tailwind staticamente definite
+      BUTTON_TYPES = {
+        primary: "bg-blue-600 hover:bg-blue-700 text-white",
+        secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
+        success: "bg-green-600 hover:bg-green-700 text-white",
+        danger: "bg-red-600 hover:bg-red-700 text-white",
+        warning: "bg-yellow-500 hover:bg-yellow-600 text-white",
+        info: "bg-sky-500 hover:bg-sky-600 text-white",
+        light: "bg-white hover:bg-gray-100 text-gray-800 border border-gray-300",
+        dark: "bg-gray-800 hover:bg-gray-900 text-white"
+      }
+
+      # Classi per bottoni outline
+      OUTLINE_BUTTON_TYPES = {
+        primary: "bg-transparent text-blue-600 border-blue-600 border hover:text-white hover:bg-blue-600",
+        secondary: "bg-transparent text-gray-800 border-gray-200 border hover:text-white hover:bg-gray-200",
+        success: "bg-transparent text-green-600 border-green-600 border hover:text-white hover:bg-green-600",
+        danger: "bg-transparent text-red-600 border-red-600 border hover:text-white hover:bg-red-600",
+        warning: "bg-transparent text-yellow-500 border-yellow-500 border hover:text-white hover:bg-yellow-500",
+        info: "bg-transparent text-sky-500 border-sky-500 border hover:text-white hover:bg-sky-500",
+        light: "bg-transparent text-gray-800 border-gray-300 border hover:text-gray-900 hover:bg-gray-100",
+        dark: "bg-transparent text-gray-800 border-gray-800 border hover:text-white hover:bg-gray-800"
+      }
+
+      # Dimensioni disponibili
+      BUTTON_SIZES = {
+        sm: "py-1 px-2 text-sm",
+        md: "py-2 px-4 text-base",
+        lg: "py-3 px-6 text-lg"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        label: nil,
+        type: :primary,
+        size: :md,
+        outline: false,
+        full_width: false,
+        disabled: false,
+        icon: nil,
+        icon_position: :left,
+        href: nil,
+        method: nil,
+        data: {},
+        classes: nil,
+        id: nil
+      )
+        @label = label
+        @type = type.to_sym
+        @size = size.to_sym
+        @outline = outline
+        @full_width = full_width
+        @disabled = disabled
+        @icon = icon
+        @icon_position = icon_position.to_sym
+        @href = href
+        @method = method
+        @data = data
+        @classes = classes
+        @id = id
+      end
+
+      # Determina se il bottone è un link o un button
+      def link?
+        @href.present?
+      end
+
+      # Combina tutte le classi
+      def combined_classes
+        [
+          "inline-flex items-center justify-center rounded-md font-medium",
+          "transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+          get_button_type_classes,
+          get_button_size_classes,
+          @full_width ? "w-full" : "",
+          @disabled ? "opacity-50 cursor-not-allowed" : "",
+          @classes
+        ].compact.join(" ")
+      end
+      
+      def get_button_type_classes
+        if @outline
+          get_outline_button_classes
+        else
+          get_solid_button_classes
+        end
+      end
+      
+      def get_solid_button_classes
+        case @type
+        when :primary
+          "bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500"
+        when :secondary
+          "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300"
+        when :success
+          "bg-green-500 text-white hover:bg-green-600 focus:ring-green-500"
+        when :danger
+          "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500"
+        when :warning
+          "bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-500"
+        when :info
+          "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500"
+        when :light
+          "bg-white text-gray-800 border border-gray-300 hover:bg-gray-100 focus:ring-gray-300"
+        when :dark
+          "bg-gray-800 text-white hover:bg-gray-900 focus:ring-gray-800"
+        else
+          "bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500"
+        end
+      end
+      
+      def get_outline_button_classes
+        case @type
+        when :primary
+          "bg-transparent text-orange-500 border-2 border-orange-500 hover:bg-orange-50 focus:ring-orange-500"
+        when :secondary
+          "bg-transparent text-gray-800 border-2 border-gray-300 hover:bg-gray-50 focus:ring-gray-300"
+        when :success
+          "bg-transparent text-green-500 border-2 border-green-500 hover:bg-green-50 focus:ring-green-500"
+        when :danger
+          "bg-transparent text-red-500 border-2 border-red-500 hover:bg-red-50 focus:ring-red-500"
+        when :warning
+          "bg-transparent text-amber-500 border-2 border-amber-500 hover:bg-amber-50 focus:ring-amber-500"
+        when :info
+          "bg-transparent text-blue-500 border-2 border-blue-500 hover:bg-blue-50 focus:ring-blue-500"
+        when :light
+          "bg-transparent text-gray-800 border-2 border-gray-300 hover:bg-gray-50 focus:ring-gray-300"
+        when :dark
+          "bg-transparent text-gray-800 border-2 border-gray-800 hover:bg-gray-50 focus:ring-gray-800"
+        else
+          "bg-transparent text-orange-500 border-2 border-orange-500 hover:bg-orange-50 focus:ring-orange-500"
+        end
+      end
+      
+      def get_button_size_classes
+        case @size
+        when :sm
+          "py-1 px-2.5 text-xs"
+        when :lg
+          "py-2.5 px-6 text-base"
+        else # :md
+          "py-2 px-4 text-sm"
+        end
+      end
+      
+      # Restituisce gli attributi per il bottone
+      def button_attributes
+        attrs = {
+          class: combined_classes,
+          type: "button",
+          id: @id
+        }
+        
+        attrs[:disabled] = true if @disabled
+        attrs[:data] = @data if @data.present?
+        attrs
+      end
+      
+      # Restituisce gli attributi per il link
+      def link_attributes
+        attrs = {
+          class: combined_classes,
+          id: @id
+        }
+        
+        attrs[:data] = @data.merge(turbo_method: @method) if @method.present?
+        attrs[:data] = @data if @data.present? && !@method.present?
+        attrs[:href] = @disabled ? nil : @href
+        attrs[:role] = "button"
+        attrs[:tabindex] = @disabled ? "-1" : "0"
+        attrs[:aria] = { disabled: @disabled } if @disabled
+        
+        attrs
+      end
+      
+      # Helper per renderizzare le icone
+      def render_icon(icon_name)
+        # Utilizziamo il componente Icon
+        render BetterUi::General::IconComponent.new(
+          name: icon_name,
+          size: @size == :lg ? :lg : :md,
+          fixed_width: true
+        )
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/heading_component.html.erb

@@ -0,0 +1,25 @@
+<div class="<%= container_classes %>">
+  <%# Utilizzo di tag heading dinamico in base al livello specificato %>
+  <<%= "h#{@level}" %> class="<%= heading_classes %>">
+    <% if @icon.present? %>
+      <span class="inline-flex items-center">
+        <span class="mr-2">
+          <%= render BetterUi::General::IconComponent.new(name: @icon) %>
+        </span>
+        <%= @text || content %>
+      </span>
+    <% else %>
+      <%= @text || content %>
+    <% end %>
+  </<%= "h#{@level}" %>>
+  
+  <% if @subtitle.present? %>
+    <div class="<%= subtitle_classes %>">
+      <%= @subtitle %>
+    </div>
+  <% end %>
+  
+  <% if @with_divider %>
+    <div class="<%= divider_classes %>"></div>
+  <% end %>
+</div>