better_ui 0.1.0 → 0.5.0

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

@@ -0,0 +1,318 @@
+module BetterUi
+  module Application
+    class SidebarComponent < ViewComponent::Base
+      attr_reader :title, :variant, :items, :footer, :classes, :data, :collapsible, :collapsed_default, :position, :width, :overlay_on_mobile
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        light: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          text: "text-gray-700",
+          active_bg: "bg-gray-50",
+          active_text: "text-gray-900",
+          hover: "hover:bg-gray-50 hover:text-gray-900",
+          divider: "border-gray-200",
+          shadow: "shadow-sm",
+          icon: "text-gray-500",
+          chevron: "text-gray-400",
+          heading: "text-gray-500"
+        },
+        dark: {
+          bg: "bg-gray-800",
+          border: "border-gray-700",
+          text: "text-gray-200",
+          active_bg: "bg-gray-700",
+          active_text: "text-white",
+          hover: "hover:bg-gray-700 hover:text-white",
+          divider: "border-gray-700",
+          shadow: "shadow-lg",
+          icon: "text-gray-400",
+          chevron: "text-gray-500",
+          heading: "text-gray-400"
+        },
+        primary: {
+          bg: "bg-orange-600",
+          border: "border-orange-700",
+          text: "text-white",
+          active_bg: "bg-orange-700",
+          active_text: "text-white",
+          hover: "hover:bg-orange-700",
+          divider: "border-orange-500",
+          shadow: "shadow-lg",
+          icon: "text-orange-300",
+          chevron: "text-orange-400",
+          heading: "text-orange-200"
+        },
+        blue: {
+          bg: "bg-blue-800",
+          border: "border-blue-700",
+          text: "text-gray-100",
+          active_bg: "bg-blue-700",
+          active_text: "text-white",
+          hover: "hover:bg-blue-700 hover:text-white",
+          divider: "border-blue-700",
+          shadow: "shadow-lg",
+          icon: "text-blue-300",
+          chevron: "text-blue-400",
+          heading: "text-blue-200"
+        },
+        modern: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          text: "text-gray-700",
+          active_bg: "bg-gray-100",
+          active_text: "text-gray-900",
+          hover: "hover:bg-gray-50",
+          divider: "border-gray-100",
+          shadow: "shadow-none",
+          icon: "text-gray-500",
+          chevron: "text-gray-400",
+          heading: "text-gray-500 uppercase text-xs font-medium"
+        }
+      }
+
+      # Dimensioni disponibili per la sidebar
+      WIDTHS = {
+        narrow: "w-60",
+        medium: "w-64",
+        wide: "w-72",
+        custom: "" # La larghezza custom viene specificata nelle classi aggiuntive
+      }
+
+      # Posizioni disponibili
+      POSITIONS = {
+        left: "left-0",
+        right: "right-0"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        title: nil,
+        variant: :modern,
+        items: [],
+        footer: nil,
+        classes: nil,
+        data: {},
+        collapsible: true,
+        collapsed_default: false,
+        position: :left,
+        width: :narrow,
+        overlay_on_mobile: true
+      )
+        @title = title
+        @variant = variant.to_sym
+        @items = items || []
+        @footer = footer
+        @classes = classes
+        @data = data || {}
+        @collapsible = collapsible
+        @collapsed_default = collapsed_default
+        @position = position.to_sym
+        @width = width.to_sym
+        @overlay_on_mobile = overlay_on_mobile
+
+        # Aggiungiamo controller Stimulus per la gestione della sidebar
+        @data[:controller] = "sidebar" if @data[:controller].blank?
+        @data[:sidebar_position_value] = @position.to_s
+        @data[:sidebar_collapsed_value] = @collapsed_default.to_s
+        @data[:sidebar_overlay_on_mobile_value] = @overlay_on_mobile.to_s
+      end
+
+      # Genera le classi per il container della sidebar
+      def container_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        width_class = WIDTHS.fetch(@width, WIDTHS[:narrow])
+        position_class = POSITIONS.fetch(@position, POSITIONS[:left])
+
+        [
+          "h-screen relative z-40",
+          styles[:bg],
+          styles[:border],
+          @position == :left ? "border-r" : "border-l",
+          styles[:shadow],
+          width_class,
+          position_class,
+          @classes,
+          "transition-transform duration-300 ease-in-out transform",
+          "flex flex-col"
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'overlay
+      def overlay_classes
+        [
+          "fixed inset-0 bg-black bg-opacity-50 z-30",
+          "transition-opacity duration-300 ease-in-out",
+          "hidden"
+        ].join(" ")
+      end
+
+      # Genera le classi per il pulsante del toggle
+      def toggle_button_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        position_class = @position == :left ? "right-0 -mr-3" : "left-0 -ml-3"
+
+        [
+          "absolute top-16",
+          position_class,
+          "z-50 flex items-center justify-center",
+          "w-6 h-12 rounded-lg",
+          styles[:bg],
+          styles[:border],
+          "cursor-pointer shadow-lg",
+          "transform transition-transform duration-300 ease-in-out"
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'intestazione
+      def header_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+
+        [
+          "px-4 py-4 flex items-center",
+          @variant == :modern ? "" : "border-b #{styles[:border]}"
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per i link nel menu
+      def menu_item_classes(active = false, nested = false, has_children = false)
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        padding_x = @variant == :modern ? "pl-5 pr-3" : "px-3"
+        padding_y = @variant == :modern ? "py-2.5" : "py-2"
+        rounded = @variant == :modern ? "" : "rounded-md"
+        
+        base_classes = [
+          "flex items-center #{padding_y} #{padding_x} #{rounded} my-0.5 w-full",
+        ]
+        
+        if active
+          active_classes = @variant == :modern ? "bg-gray-100 font-medium" : styles[:active_bg]
+          [
+            *base_classes,
+            active_classes,
+            styles[:active_text],
+          ].join(" ")
+        else
+          [
+            *base_classes,
+            styles[:text],
+            styles[:hover],
+            has_children ? "cursor-pointer" : ""
+          ].join(" ")
+        end
+      end
+
+      # Genera le classi per i separatori
+      def divider_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "my-2 border-t",
+          styles[:divider]
+        ].join(" ")
+      end
+
+      # Genera le classi per il footer
+      def footer_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "mt-auto px-4 py-3",
+          @variant == :modern ? "" : "border-t #{styles[:border]}"
+        ].join(" ")
+      end
+
+      # Genera le classi per le icone
+      def icon_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "mr-3 flex-shrink-0",
+          styles[:icon]
+        ].join(" ")
+      end
+
+      # Genera le classi per la label della voce di menu
+      def item_label_classes
+        [
+          "flex-1 truncate"
+        ].join(" ")
+      end
+
+      # Genera le classi per il badge nella voce di menu
+      def badge_classes(type = :default)
+        badge_types = {
+          default: "bg-gray-200 text-gray-800",
+          primary: "bg-orange-100 text-orange-800",
+          success: "bg-green-100 text-green-800",
+          warning: "bg-yellow-100 text-yellow-800",
+          danger: "bg-red-100 text-red-800",
+          info: "bg-blue-100 text-blue-800"
+        }
+        
+        [
+          "px-2 py-0.5 text-xs rounded-full",
+          badge_types.fetch(type.to_sym, badge_types[:default])
+        ].join(" ")
+      end
+
+      # Genera le classi per il titolo di sezione
+      def section_heading_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        if @variant == :modern
+          "px-5 py-2 text-xs font-medium text-gray-500"
+        else
+          [
+            "px-4 py-2 text-xs tracking-wider",
+            styles[:heading]
+          ].join(" ")
+        end
+      end
+
+      # Genera le classi per icona chevron
+      def chevron_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "ml-auto",
+          styles[:chevron]
+        ].join(" ")
+      end
+
+      # Verifica se la sidebar deve essere resa
+      def render?
+        true
+      end
+
+      # Determina se un elemento dovrebbe essere considerato attivo
+      def active_item?(item)
+        item[:active] == true
+      end
+
+      # Verifica se un elemento ha figli
+      def has_children?(item)
+        item[:children].present? && item[:children].is_a?(Array) && item[:children].any?
+      end
+
+      # Verifica se un elemento ha un badge
+      def has_badge?(item)
+        item[:badge].present?
+      end
+
+      # Ottiene il tipo di badge per un elemento
+      def badge_type(item)
+        return :default unless item[:badge].is_a?(Hash)
+        (item[:badge][:type] || :default).to_sym
+      end
+
+      # Ottiene il testo del badge per un elemento
+      def badge_text(item)
+        return item[:badge].to_s unless item[:badge].is_a?(Hash)
+        item[:badge][:text].to_s
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,35 @@
+<div role="status" aria-live="polite" class="<%= container_classes %>" 
+  <%= @data&.map { |k, v| "data-#{k}=\"#{v}\"" }&.join(' ')&.html_safe %>>
+  
+  <% if effective_icon.present? %>
+    <div class="<%= icon_classes %>">
+      <%= render BetterUi::General::IconComponent.new(name: effective_icon) %>
+    </div>
+  <% end %>
+  
+  <div class="<%= content_classes %>">
+    <% if @title.present? %>
+      <div class="<%= title_classes %>"><%= @title %></div>
+    <% end %>
+    
+    <% if @message.present? %>
+      <div class="<%= message_classes %>"><%= @message %></div>
+    <% end %>
+    
+    <% if content.present? %>
+      <div class="<%= message_classes %>"><%= content %></div>
+    <% end %>
+    
+    <% if @auto_hide %>
+      <div class="w-full bg-gray-200 h-1 mt-2 rounded overflow-hidden">
+        <div class="bg-current h-1 transition-all" data-toast-target="progressBar"></div>
+      </div>
+    <% end %>
+  </div>
+  
+  <% if @dismissible %>
+    <button type="button" class="<%= close_button_classes %>" data-action="toast#hide" aria-label="Chiudi">
+      <%= render BetterUi::General::IconComponent.new(name: "xmark") %>
+    </button>
+  <% end %>
+</div> 

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

@@ -0,0 +1,223 @@
+module BetterUi
+  module Application
+    class ToastComponent < ViewComponent::Base
+      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :position, :duration, :auto_hide, :rounded
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        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"
+        },
+        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"
+        },
+        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"
+        },
+        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"
+        },
+        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"
+        },
+        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 = {
+        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
+      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: :default,
+        icon: nil, 
+        dismissible: true,
+        classes: nil,
+        data: {},
+        position: :"top-right",
+        duration: 5000,
+        auto_hide: true,
+        rounded: :sm
+      )
+        @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
+        @rounded = rounded.to_sym
+
+        # 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] || DEFAULT_ICONS[:default]
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        position_class = POSITIONS.fetch(@position, POSITIONS[:"top-right"])
+        
+        [
+          "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'",
+          "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 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[:default])
+        
+        [
+          "font-medium",
+          styles[:title]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il messaggio
+      def message_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "mt-1",
+          styles[:text]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'icona
+      def icon_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "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[: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",
+          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/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>