better_ui 0.4.0 → 0.5.0

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

@@ -1,91 +1,95 @@
 module BetterUi
   module Application
     class AlertComponent < ViewComponent::Base
-      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :icon_position, :outline
+      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :icon_position, :outline, :rounded
 
       # 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",
-          outline_bg: "bg-white",
-          outline_text: "text-orange-700"
+        default: {
+          bg: "bg-black",
+          border: "border-gray-900",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-gray-800"
         },
-        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",
-          outline_bg: "bg-white",
-          outline_text: "text-blue-700"
+        white: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          title: "text-black",
+          text: "text-black",
+          icon: "text-black",
+          close: "text-black hover:bg-gray-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",
-          outline_bg: "bg-white",
-          outline_text: "text-green-700"
+        red: {
+          bg: "bg-red-500",
+          border: "border-red-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-red-600"
         },
-        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",
-          outline_bg: "bg-white",
-          outline_text: "text-yellow-700"
+        rose: {
+          bg: "bg-rose-500",
+          border: "border-rose-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-rose-600"
         },
-        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",
-          outline_bg: "bg-white",
-          outline_text: "text-red-700"
+        orange: {
+          bg: "bg-orange-500",
+          border: "border-orange-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-orange-600"
         },
-        dark: {
-          bg: "bg-gray-800",
-          border: "border-gray-700",
+        green: {
+          bg: "bg-green-500",
+          border: "border-green-600",
           title: "text-white",
-          text: "text-gray-300",
-          icon: "text-gray-400",
-          close: "text-gray-400 hover:bg-gray-700",
-          outline_bg: "bg-white",
-          outline_text: "text-gray-800"
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-green-600"
         },
-        simple: {
-          bg: "bg-white",
-          border: "border-gray-200",
-          title: "text-gray-800 font-semibold",
-          text: "text-gray-600",
-          icon: "text-gray-500",
-          close: "text-gray-500 hover:bg-gray-100",
-          outline_bg: "bg-white",
-          outline_text: "text-gray-700"
+        blue: {
+          bg: "bg-blue-500",
+          border: "border-blue-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-blue-600"
+        },
+        yellow: {
+          bg: "bg-yellow-500",
+          border: "border-yellow-600",
+          title: "text-black",
+          text: "text-black",
+          icon: "text-black",
+          close: "text-black hover:bg-yellow-600"
+        },
+        violet: {
+          bg: "bg-violet-500",
+          border: "border-violet-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-violet-600"
         }
       }
 
       # Icone predefinite per ciascuna variante
       DEFAULT_ICONS = {
-        primary: "bell",
-        info: "info-circle",
-        success: "check-circle",
-        warning: "exclamation-triangle",
-        danger: "exclamation-circle",
-        dark: "shield-exclamation",
-        simple: "info-circle"
+        default: "bell",
+        white: "info-circle",
+        red: "exclamation-circle",
+        rose: "exclamation-circle",
+        orange: "bell",
+        green: "check-circle",
+        blue: "info-circle",
+        yellow: "exclamation-triangle",
+        violet: "shield-exclamation"
       }
 
       # Posizioni possibili per le icone
@@ -95,13 +99,14 @@ module BetterUi
       def initialize(
         title: nil,
         message: nil,
-        variant: :simple,
+        variant: :default,
         icon: nil, 
         dismissible: false,
         classes: nil,
         data: {},
         icon_position: :left,
-        outline: false
+        outline: false,
+        rounded: :sm
       )
         @title = title
         @message = message
@@ -112,58 +117,59 @@ module BetterUi
         @data = data
         @icon_position = icon_position.to_sym
         @outline = outline
+        @rounded = rounded.to_sym
       end
 
       # Genera l'icona in base alla variante se non specificata
       def effective_icon
         return @icon if @icon.present?
-        DEFAULT_ICONS[@variant]
+        DEFAULT_ICONS[@variant] || DEFAULT_ICONS[:default]
       end
 
       # Genera le classi per il container
       def container_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
-        base_classes = ["p-4 mb-4 flex"]
-        
-        if @variant == :simple
-          base_classes << "border rounded-md"
-        else
-          base_classes << "rounded-lg border"
-        end
+        base_classes = ["p-4 mb-4 flex border"]
+        base_classes << get_border_radius_class
         
         [
           *base_classes,
-          @outline ? styles[:outline_bg] : styles[:bg],
+          styles[:bg],
           styles[:border],
           @icon_position == :top ? "flex-col" : "items-start",
           @classes
         ].compact.join(" ")
       end
 
+      # Genera il border-radius
+      def get_border_radius_class
+        ThemeHelper::BORDER_RADIUS[@rounded] || ThemeHelper::BORDER_RADIUS[:sm]
+      end
+
       # Genera le classi per il titolo
       def title_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
         [
-          @variant == :simple ? "font-semibold" : "font-medium",
-          @outline ? styles[:outline_text] : styles[:title]
+          "font-medium",
+          styles[:title]
         ].compact.join(" ")
       end
 
       # Genera le classi per il messaggio
       def message_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
         [
           "mt-1",
-          @outline ? styles[:outline_text] : styles[:text]
+          styles[:text]
         ].compact.join(" ")
       end
 
       # Genera le classi per l'icona
       def icon_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
         [
           "flex-shrink-0",
@@ -174,7 +180,7 @@ module BetterUi
 
       # Genera le classi per il pulsante di chiusura
       def close_button_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
         [
           "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",

data/app/components/better_ui/application/card_component.html.erb

@@ -0,0 +1,24 @@
+<div class="bui-card-base <%= get_border_radius_class %> px-4 py-5 sm:p-6">
+  <dt class="bui-card-title text-gray-900"><%= title %></dt>
+  <dd class="bui-card-body mt-1 flex items-baseline justify-between md:block lg:flex">
+    <div class="flex items-baseline">
+      <span class="bui-card-value text-indigo-600"><%= value %></span>
+      <span class="bui-card-value-from ml-2">from <%= value_from %></span>
+    </div>
+
+    <div class="bui-card-trend <%= trend_classes %>">
+      <% if trend_type == :up %>
+        <svg class="mr-0.5 -ml-1 size-5 shrink-0 self-center <%= trend_icon_classes %>" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+          <path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" />
+        </svg>
+        <span class="sr-only">Incremento di</span>
+      <% else %>
+        <svg class="mr-0.5 -ml-1 size-5 shrink-0 self-center <%= trend_icon_classes %>" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+          <path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" />
+        </svg>
+        <span class="sr-only">Decremento di</span>
+      <% end %>
+      <%= trend_value %>
+    </div>
+  </dd>
+</div> 

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

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    class CardComponent < ViewComponent::Base
+      attr_reader :title, :value, :value_from, :trend_value, :trend_type, :rounded
+
+      # Opzioni di bordi arrotondati standardizzati
+      CARD_RADIUS = {
+        none: 'bui-card-radius-none',
+        small: 'bui-card-radius-small',
+        medium: 'bui-card-radius-medium',
+        large: 'bui-card-radius-large',
+        full: 'bui-card-radius-full'
+      }.freeze
+
+      # @param title [String] Titolo della card
+      # @param value [String] Valore principale da visualizzare
+      # @param value_from [String] Valore precedente di riferimento
+      # @param trend_value [String] Percentuale di variazione
+      # @param trend_type [Symbol] Tipo di variazione (:up o :down)
+      # @param rounded [Symbol] Tipo di border-radius (:none, :small, :medium, :large, :full), default :small
+      def initialize(title:, value:, value_from:, trend_value:, trend_type: :up, rounded: :small)
+        @title = title
+        @value = value
+        @value_from = value_from
+        @trend_value = trend_value
+        @trend_type = trend_type.to_sym
+        @rounded = rounded.to_sym
+      end
+
+      def trend_classes
+        if trend_type == :up
+          'bg-green-500 text-white'
+        else
+          'bg-black text-white'
+        end
+      end
+
+      def trend_icon_classes
+        if trend_type == :up
+          'text-white'
+        else
+          'text-white'
+        end
+      end
+
+      def get_border_radius_class
+        CARD_RADIUS[@rounded] || CARD_RADIUS[:small]
+      end
+    end
+  end
+end 

data/app/components/better_ui/application/card_container_component.html.erb

@@ -0,0 +1,8 @@
+<div>
+  <h3 class="text-base font-semibold text-gray-900"><%= @title %></h3>
+  <dl class="mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm md:grid-cols-3 md:divide-x md:divide-y-0">
+    <% cards.each do |card| %>
+      <%= card %>
+    <% end %>
+  </dl>
+</div> 

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    class CardContainerComponent < ViewComponent::Base
+      renders_many :cards, CardComponent
+
+      # @param title [String] Titolo del container delle card
+      def initialize(title:)
+        @title = title
+      end
+    end
+  end
+end 

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

@@ -1,68 +1,95 @@
 module BetterUi
   module Application
     class ToastComponent < ViewComponent::Base
-      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :position, :duration, :auto_hide
+      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :position, :duration, :auto_hide, :rounded
 
       # 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"
+        default: {
+          bg: "bg-black",
+          border: "border-gray-900",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-gray-800"
+        },
+        white: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          title: "text-black",
+          text: "text-black",
+          icon: "text-black",
+          close: "text-black hover:bg-gray-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"
+        red: {
+          bg: "bg-red-500",
+          border: "border-red-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-red-600"
         },
-        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"
+        rose: {
+          bg: "bg-rose-500",
+          border: "border-rose-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-rose-600"
         },
-        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"
+        orange: {
+          bg: "bg-orange-500",
+          border: "border-orange-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-orange-600"
         },
-        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"
+        green: {
+          bg: "bg-green-500",
+          border: "border-green-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-green-600"
         },
-        dark: {
-          bg: "bg-gray-800",
-          border: "border-gray-700",
+        blue: {
+          bg: "bg-blue-500",
+          border: "border-blue-600",
           title: "text-white",
-          text: "text-gray-300",
-          icon: "text-gray-400",
-          close: "text-gray-400 hover:bg-gray-700"
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-blue-600"
+        },
+        yellow: {
+          bg: "bg-yellow-500",
+          border: "border-yellow-600",
+          title: "text-black",
+          text: "text-black",
+          icon: "text-black",
+          close: "text-black hover:bg-yellow-600"
+        },
+        violet: {
+          bg: "bg-violet-500",
+          border: "border-violet-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-violet-600"
         }
       }
 
       # Icone predefinite per ciascuna variante
       DEFAULT_ICONS = {
-        primary: "bell",
-        info: "info-circle",
-        success: "check-circle",
-        warning: "exclamation-triangle",
-        danger: "exclamation-circle",
-        dark: "shield-exclamation"
+        default: "bell",
+        white: "info-circle",
+        red: "exclamation-circle",
+        rose: "exclamation-circle",
+        orange: "bell",
+        green: "check-circle",
+        blue: "info-circle",
+        yellow: "exclamation-triangle",
+        violet: "shield-exclamation"
       }
 
       # Posizioni possibili per i toast
@@ -79,14 +106,15 @@ module BetterUi
       def initialize(
         title: nil,
         message: nil,
-        variant: :info,
+        variant: :default,
         icon: nil, 
         dismissible: true,
         classes: nil,
         data: {},
         position: :"top-right",
         duration: 5000,
-        auto_hide: true
+        auto_hide: true,
+        rounded: :sm
       )
         @title = title
         @message = message
@@ -98,6 +126,7 @@ module BetterUi
         @position = position.to_sym
         @duration = duration
         @auto_hide = auto_hide
+        @rounded = rounded.to_sym
 
         # Aggiungiamo dati per il comportamento del toast
         @data[:controller] = "toast" if @data[:controller].blank?
@@ -109,16 +138,17 @@ module BetterUi
       # Genera l'icona in base alla variante se non specificata
       def effective_icon
         return @icon if @icon.present?
-        DEFAULT_ICONS[@variant]
+        DEFAULT_ICONS[@variant] || DEFAULT_ICONS[:default]
       end
 
       # Genera le classi per il container
       def container_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         position_class = POSITIONS.fetch(@position, POSITIONS[:"top-right"])
         
         [
-          "fixed z-50 rounded-lg p-4 border shadow-lg",
+          "fixed z-50 p-4 border shadow-lg",
+          get_border_radius_class,
           "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'",
@@ -133,9 +163,14 @@ module BetterUi
         ].compact.join(" ")
       end
 
+      # Genera il border-radius
+      def get_border_radius_class
+        ThemeHelper::BORDER_RADIUS[@rounded] || ThemeHelper::BORDER_RADIUS[:sm]
+      end
+
       # Genera le classi per il titolo
       def title_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
         [
           "font-medium",
@@ -145,7 +180,7 @@ module BetterUi
 
       # Genera le classi per il messaggio
       def message_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
         [
           "mt-1",
@@ -155,7 +190,7 @@ module BetterUi
 
       # Genera le classi per l'icona
       def icon_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
         [
           "flex-shrink-0",
@@ -166,7 +201,7 @@ module BetterUi
 
       # Genera le classi per il pulsante di chiusura
       def close_button_classes
-        styles = VARIANTS.fetch(@variant, VARIANTS[:info])
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
         
         [
           "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",

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

@@ -0,0 +1,19 @@
+<div <%= avatar_attributes.to_s.html_safe %>>
+  <% if show_image? %>
+    <img 
+      src="<%= @src %>" 
+      alt="<%= @name || 'Avatar' %>" 
+      class="bui-avatar-image"
+      width="<%= pixel_size %>"
+      height="<%= pixel_size %>"
+    >
+  <% else %>
+    <div class="bui-avatar-initials">
+      <%= initials %>
+    </div>
+  <% end %>
+  
+  <% if show_status? %>
+    <span class="<%= status_indicator_classes %>"></span>
+  <% end %>
+</div>