better_ui 0.1.0 → 0.5.0

data/app/assets/javascripts/better_ui/controllers/sidebar_controller.js

@@ -0,0 +1,211 @@
+// Sidebar controller per gestire il comportamento del menu laterale
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container", "overlay", "toggleButton", "toggleIcon", "dropdown", "submenu", "chevron"]
+  static values = {
+    collapsed: { type: Boolean, default: false },
+    position: { type: String, default: "left" },
+    overlayOnMobile: { type: Boolean, default: true }
+  }
+  
+  connect() {
+    // Applica lo stato iniziale
+    if (this.collapsedValue) {
+      this.collapse();
+    } else {
+      // Assicuriamo che la sidebar sia espansa all'inizio
+      this.containerTarget.style.transform = "translateX(0)";
+    }
+    
+    // Imposta i listener per il ridimensionamento della finestra
+    window.addEventListener("resize", this.handleResize.bind(this));
+    
+    // Gestisci lo stato iniziale in base alla dimensione della finestra
+    this.handleResize();
+    
+    // Trova e apri i sottomenu con elementi attivi
+    this.openSubmenuWithActiveItems();
+  }
+  
+  disconnect() {
+    // Rimuovi i listener all'uscita
+    window.removeEventListener("resize", this.handleResize.bind(this));
+  }
+  
+  // Toggle dell'intera sidebar
+  toggle() {
+    if (this.isCollapsed()) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+  }
+  
+  // Espandi la sidebar
+  expand() {
+    // Mostra la sidebar completa
+    this.containerTarget.classList.remove("transform-translate");
+    this.containerTarget.style.transform = "translateX(0)";
+    
+    // Ruota l'icona del toggle button
+    if (this.hasToggleIconTarget) {
+      if (this.positionValue === "left") {
+        this.toggleIconTarget.style.transform = "rotate(0deg)";
+      } else {
+        this.toggleIconTarget.style.transform = "rotate(0deg)";
+      }
+    }
+    
+    // Aggiorna lo stato
+    this.collapsedValue = false;
+  }
+  
+  // Contrai la sidebar
+  collapse() {
+    const width = this.containerTarget.offsetWidth;
+    // Usa un valore più piccolo per mantenere visibile una parte della sidebar
+    const translateValue = this.positionValue === "left" ? `-${width - 10}px` : `${width - 10}px`;
+    
+    // Nascondi la sidebar
+    this.containerTarget.classList.add("transform-translate");
+    this.containerTarget.style.transform = `translateX(${translateValue})`;
+    
+    // Ruota l'icona del toggle button
+    if (this.hasToggleIconTarget) {
+      if (this.positionValue === "left") {
+        this.toggleIconTarget.style.transform = "rotate(180deg)";
+      } else {
+        this.toggleIconTarget.style.transform = "rotate(180deg)";
+      }
+    }
+    
+    // Aggiorna lo stato
+    this.collapsedValue = true;
+  }
+  
+  // Apri la sidebar
+  open() {
+    // Mostra la sidebar
+    this.containerTarget.style.transform = "translateX(0)";
+    
+    // Mostra l'overlay se necessario
+    if (this.overlayOnMobileValue && window.innerWidth < 768) {
+      this.overlayTarget.classList.remove("hidden");
+      this.overlayTarget.classList.add("opacity-100");
+      document.body.classList.add("overflow-hidden");
+    }
+    
+    // Aggiorna lo stato
+    this.collapsedValue = false;
+  }
+  
+  // Chiudi la sidebar
+  close() {
+    // Se è già contratta su desktop, non fare nulla
+    if (this.collapsedValue && window.innerWidth >= 768) {
+      return;
+    }
+    
+    // Su mobile, nascondi completamente
+    if (window.innerWidth < 768) {
+      const width = this.containerTarget.offsetWidth;
+      const translateValue = this.positionValue === "left" ? `-${width}px` : `${width}px`;
+      this.containerTarget.style.transform = `translateX(${translateValue})`;
+      
+      // Nascondi l'overlay
+      this.overlayTarget.classList.add("hidden");
+      this.overlayTarget.classList.remove("opacity-100");
+      document.body.classList.remove("overflow-hidden");
+    } else {
+      // Su desktop, contrai
+      this.collapse();
+    }
+  }
+  
+  // Verifica se la sidebar è contratta
+  isCollapsed() {
+    return this.collapsedValue;
+  }
+  
+  // Handler per il ridimensionamento della finestra
+  handleResize() {
+    // Su mobile, mostra l'overlay se la sidebar è aperta
+    if (window.innerWidth < 768) {
+      const isHidden = this.containerTarget.style.transform.includes("translateX");
+      
+      if (!isHidden && this.overlayOnMobileValue) {
+        this.overlayTarget.classList.remove("hidden");
+      } else {
+        this.overlayTarget.classList.add("hidden");
+      }
+    } else {
+      // Su desktop, nascondi l'overlay
+      this.overlayTarget.classList.add("hidden");
+      document.body.classList.remove("overflow-hidden");
+      
+      // Ripristina lo stato della sidebar in base al valore di collapsed
+      if (this.collapsedValue) {
+        this.collapse();
+      } else {
+        this.expand();
+      }
+    }
+  }
+  
+  // Toggle di un sottomenu
+  toggleSubmenu(event) {
+    const button = event.currentTarget;
+    const submenuId = button.getAttribute("aria-controls");
+    const submenu = document.getElementById(submenuId);
+    const chevron = button.querySelector("[data-sidebar-target='chevron']");
+    
+    if (submenu) {
+      const isExpanded = button.getAttribute("aria-expanded") === "true";
+      
+      if (isExpanded) {
+        // Chiudi il sottomenu
+        submenu.classList.add("hidden");
+        button.setAttribute("aria-expanded", "false");
+        if (chevron) {
+          chevron.querySelector("svg").style.transform = "rotate(0deg)";
+        }
+      } else {
+        // Apri il sottomenu
+        submenu.classList.remove("hidden");
+        button.setAttribute("aria-expanded", "true");
+        if (chevron) {
+          chevron.querySelector("svg").style.transform = "rotate(180deg)";
+        }
+      }
+    }
+  }
+  
+  // Apri automaticamente i sottomenu che contengono elementi attivi
+  openSubmenuWithActiveItems() {
+    // Trova tutti i dropdown
+    if (this.hasDropdownTarget) {
+      this.dropdownTargets.forEach(dropdown => {
+        const submenuId = dropdown.getAttribute("aria-controls");
+        const submenu = document.getElementById(submenuId);
+        
+        if (submenu) {
+          // Verifica se il sottomenu contiene elementi attivi
+          const activeItems = submenu.querySelectorAll(".bg-gray-100, .bg-gray-700, .bg-orange-700, .bg-blue-700");
+          
+          if (activeItems.length > 0) {
+            // Apri il sottomenu
+            submenu.classList.remove("hidden");
+            dropdown.setAttribute("aria-expanded", "true");
+            
+            // Ruota l'icona chevron se presente
+            const chevron = dropdown.querySelector("[data-sidebar-target='chevron']");
+            if (chevron) {
+              chevron.querySelector("svg").style.transform = "rotate(180deg)";
+            }
+          }
+        }
+      });
+    }
+  }
+} 

data/app/assets/javascripts/better_ui/controllers/toast_controller.js

@@ -0,0 +1,161 @@
+// Toast controller per gestire il comportamento delle notifiche toast
+import { Controller } from "@hotwired/stimulus"
+import ToastManager from "../toast_manager"
+
+export default class extends Controller {
+  static targets = ["progressBar"]
+  static values = {
+    duration: { type: Number, default: 5000 },
+    autoHide: { type: Boolean, default: true },
+    position: { type: String, default: "top-right" }
+  }
+  
+  connect() {
+    // Estrai la posizione dalle classi del toast o utilizza il valore predefinito
+    this.position = this.getPositionFromClasses() || this.positionValue;
+    
+    // Rimuovi le classi di posizione originali per evitare conflitti
+    this.removePositionClasses();
+    
+    // Registra il toast con il manager e ottieni la funzione di pulizia
+    this.cleanupFunction = ToastManager.registerToast(this.element, this.position);
+    
+    // Applica l'animazione di entrata
+    this.element.classList.add("opacity-0", "translate-y-2");
+    
+    // Permetti al DOM di essere aggiornato prima di mostrare
+    setTimeout(() => {
+      this.element.classList.remove("opacity-0", "translate-y-2");
+      this.element.classList.add("opacity-100", "translate-y-0");
+    }, 10);
+    
+    // Se auto-hide è attivato, imposta il timer
+    if (this.autoHideValue) {
+      this.startProgressBar();
+      this.hideTimeout = setTimeout(() => {
+        this.hide();
+      }, this.durationValue);
+    }
+    
+    // Aggiungi eventi per pausa/ripresa dell'auto-hide
+    this.element.addEventListener("mouseenter", this.mouseEnter.bind(this));
+    this.element.addEventListener("mouseleave", this.mouseLeave.bind(this));
+  }
+  
+  // Estrae la posizione dalle classi del toast
+  getPositionFromClasses() {
+    const positionClasses = [
+      "top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center"
+    ];
+    
+    for (const position of positionClasses) {
+      if (this.element.classList.contains(position)) {
+        return position;
+      }
+    }
+    
+    return null;
+  }
+  
+  // Rimuove le classi di posizione originali
+  removePositionClasses() {
+    const positionClasses = [
+      "top-4", "right-4", "bottom-4", "left-4", "left-1/2", "transform", "-translate-x-1/2"
+    ];
+    
+    positionClasses.forEach(cls => {
+      this.element.classList.remove(cls);
+    });
+  }
+  
+  startProgressBar() {
+    if (this.hasProgressBarTarget) {
+      this.progressBarTarget.style.width = "100%";
+      
+      // Imposta una transizione che dura quanto il timeout
+      this.progressBarTarget.style.transition = `width ${this.durationValue}ms linear`;
+      
+      // Forza un reflow per assicurare che la transizione inizi
+      void this.progressBarTarget.offsetWidth;
+      
+      // Inizia la transizione
+      this.progressBarTarget.style.width = "0%";
+    }
+  }
+  
+  disconnect() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+    
+    // Rimuovi gli event listener
+    this.element.removeEventListener("mouseenter", this.mouseEnter.bind(this));
+    this.element.removeEventListener("mouseleave", this.mouseLeave.bind(this));
+    
+    // Esegui la funzione di pulizia per rimuovere il toast dal manager
+    if (this.cleanupFunction) {
+      this.cleanupFunction();
+    }
+  }
+  
+  hide(event) {
+    if (event) {
+      event.preventDefault();
+    }
+    
+    // Applica l'animazione di uscita
+    this.element.classList.remove("opacity-100", "translate-y-0");
+    this.element.classList.add("opacity-0", "translate-y-2");
+    
+    // Rimuovi l'elemento dopo l'animazione
+    setTimeout(() => {
+      this.element.remove();
+    }, 300);
+  }
+  
+  // Metodo per pausa e ripresa dell'autoHide quando l'utente interagisce con il toast
+  pauseAutoHide() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      
+      if (this.hasProgressBarTarget) {
+        // Salva la larghezza corrente per riprendere da lì
+        const computedStyle = window.getComputedStyle(this.progressBarTarget);
+        this.pausedWidth = computedStyle.width;
+        this.progressBarTarget.style.transition = "none";
+        this.progressBarTarget.style.width = this.pausedWidth;
+      }
+    }
+  }
+  
+  resumeAutoHide() {
+    if (this.autoHideValue) {
+      // Calcola il tempo rimanente basato sulla larghezza della barra di progresso
+      let remainingTime = this.durationValue;
+      
+      if (this.hasProgressBarTarget && this.pausedWidth) {
+        const percentage = parseFloat(this.pausedWidth) / parseFloat(window.getComputedStyle(this.progressBarTarget.parentElement).width);
+        remainingTime = this.durationValue * percentage;
+      }
+      
+      this.hideTimeout = setTimeout(() => {
+        this.hide();
+      }, remainingTime);
+      
+      if (this.hasProgressBarTarget && this.pausedWidth) {
+        this.progressBarTarget.style.transition = `width ${remainingTime}ms linear`;
+        void this.progressBarTarget.offsetWidth;
+        this.progressBarTarget.style.width = "0%";
+      }
+    }
+  }
+  
+  // Gestori eventi per pausa/ripresa dell'autoHide
+  mouseEnter() {
+    this.pauseAutoHide();
+  }
+  
+  mouseLeave() {
+    this.resumeAutoHide();
+  }
+} 

data/app/assets/javascripts/better_ui/index.js

@@ -0,0 +1,159 @@
+// Entry point per tutti i componenti JavaScript di Better UI
+import { Application } from "@hotwired/stimulus"
+import ToastController from "./controllers/toast_controller"
+import NavbarController from "./controllers/navbar_controller"
+import SidebarController from "./controllers/sidebar_controller"
+
+// Configura Stimulus
+const application = Application.start()
+
+// Registra i controller
+application.register("toast", ToastController)
+application.register("navbar", NavbarController)
+application.register("sidebar", SidebarController)
+
+// Esporta i controller e altri componenti
+export { ToastController, NavbarController, SidebarController }
+export { default as ToastManager } from "./toast_manager"
+
+// Funzione di utilità per creare e mostrare un toast programmaticamente
+export function showToast(options = {}) {
+  const {
+    title = null,
+    message = "Notifica",
+    variant = "info",
+    position = "top-right",
+    duration = 5000,
+    dismissible = true,
+    autoHide = true,
+    icon = null
+  } = options;
+
+  // Crea l'elemento toast
+  const toast = document.createElement("div");
+  toast.setAttribute("role", "status");
+  toast.setAttribute("aria-live", "polite");
+  toast.classList.add(
+    "fixed", "z-50", "rounded-lg", "p-4", "border", "shadow-lg",
+    "transform", "transition-transform", "duration-300",
+    "min-w-[20rem]", "max-w-sm", "flex", "items-start",
+    position
+  );
+  
+  // Aggiungi classi specifiche per la variante
+  const variantClasses = {
+    primary: ["bg-orange-50", "border-orange-300"],
+    info: ["bg-blue-50", "border-blue-300"],
+    success: ["bg-green-50", "border-green-300"],
+    warning: ["bg-yellow-50", "border-yellow-300"],
+    danger: ["bg-red-50", "border-red-300"],
+    dark: ["bg-gray-800", "border-gray-700"]
+  };
+  
+  // Applica le classi della variante
+  const selectedVariant = variantClasses[variant] || variantClasses.info;
+  toast.classList.add(...selectedVariant);
+  
+  // Aggiungi attributi per Stimulus
+  toast.setAttribute("data-controller", "toast");
+  toast.setAttribute("data-toast-duration-value", duration);
+  toast.setAttribute("data-toast-auto-hide-value", autoHide);
+  toast.setAttribute("data-toast-position-value", position);
+  
+  // Costruisci il contenuto HTML
+  let html = "";
+  
+  // Icona
+  const defaultIcons = {
+    primary: "bell",
+    info: "info-circle",
+    success: "check-circle",
+    warning: "exclamation-triangle",
+    danger: "exclamation-circle",
+    dark: "shield-exclamation"
+  };
+  
+  const iconName = icon || defaultIcons[variant] || defaultIcons.info;
+  
+  if (iconName) {
+    const iconColorClasses = {
+      primary: "text-orange-500",
+      info: "text-blue-500",
+      success: "text-green-500",
+      warning: "text-yellow-500",
+      danger: "text-red-500",
+      dark: "text-gray-400"
+    };
+    
+    html += `
+      <div class="flex-shrink-0 mr-3 mt-0.5 ${iconColorClasses[variant] || iconColorClasses.info}">
+        <i class="fas fa-${iconName}"></i>
+      </div>
+    `;
+  }
+  
+  // Contenuto
+  const titleColorClasses = {
+    primary: "text-orange-800",
+    info: "text-blue-800",
+    success: "text-green-800",
+    warning: "text-yellow-800",
+    danger: "text-red-800",
+    dark: "text-white"
+  };
+  
+  const messageColorClasses = {
+    primary: "text-orange-700",
+    info: "text-blue-700",
+    success: "text-green-700",
+    warning: "text-yellow-700",
+    danger: "text-red-700",
+    dark: "text-gray-300"
+  };
+  
+  html += '<div class="flex-1">';
+  
+  if (title) {
+    html += `<div class="font-medium ${titleColorClasses[variant] || titleColorClasses.info}">${title}</div>`;
+  }
+  
+  if (message) {
+    html += `<div class="mt-1 ${messageColorClasses[variant] || messageColorClasses.info}">${message}</div>`;
+  }
+  
+  if (autoHide) {
+    html += `
+      <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>
+    `;
+  }
+  
+  html += '</div>';
+  
+  // Pulsante di chiusura
+  if (dismissible) {
+    const closeButtonColorClasses = {
+      primary: "text-orange-500 hover:bg-orange-100",
+      info: "text-blue-500 hover:bg-blue-100",
+      success: "text-green-500 hover:bg-green-100",
+      warning: "text-yellow-500 hover:bg-yellow-100",
+      danger: "text-red-500 hover:bg-red-100",
+      dark: "text-gray-400 hover:bg-gray-700"
+    };
+    
+    html += `
+      <button type="button" class="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 ${closeButtonColorClasses[variant] || closeButtonColorClasses.info}" data-action="toast#hide" aria-label="Chiudi">
+        <i class="fas fa-xmark"></i>
+      </button>
+    `;
+  }
+  
+  // Inserisci il contenuto
+  toast.innerHTML = html;
+  
+  // Aggiungi il toast al documento
+  document.body.appendChild(toast);
+  
+  return toast;
+} 

data/app/assets/javascripts/better_ui/toast_manager.js

@@ -0,0 +1,77 @@
+// Gestore per l'impilamento dei toast in diverse posizioni
+class ToastManager {
+  constructor() {
+    // Mantiene traccia dei toast attivi per posizione
+    this.toasts = {
+      'top-right': [],
+      'top-left': [],
+      'bottom-right': [],
+      'bottom-left': [],
+      'top-center': [],
+      'bottom-center': []
+    }
+    
+    // Offset di base per ogni posizione (in px)
+    this.baseOffset = 16; // equivalente a Tailwind top-4 (16px)
+    
+    // Spaziatura tra i toast (in px)
+    this.spacing = 12;
+  }
+  
+  // Registra un nuovo toast e calcola la sua posizione
+  registerToast(toast, position) {
+    if (!this.toasts[position]) {
+      console.warn(`Posizione toast non valida: ${position}. Utilizzo 'top-right' come predefinita.`);
+      position = 'top-right';
+    }
+    
+    // Aggiungi il toast all'array della posizione specifica
+    this.toasts[position].push(toast);
+    
+    // Ricalcola le posizioni per tutti i toast in questa posizione
+    this.updatePositions(position);
+    
+    return () => this.removeToast(toast, position);
+  }
+  
+  // Rimuove un toast e ricalcola le posizioni
+  removeToast(toast, position) {
+    const index = this.toasts[position].indexOf(toast);
+    if (index !== -1) {
+      this.toasts[position].splice(index, 1);
+      this.updatePositions(position);
+    }
+  }
+  
+  // Aggiorna le posizioni di tutti i toast in una data posizione
+  updatePositions(position) {
+    const isTopPosition = position.startsWith('top-');
+    const toastArray = this.toasts[position];
+    
+    let currentOffset = this.baseOffset;
+    
+    toastArray.forEach((toast, index) => {
+      // Applica la posizione corretta
+      if (isTopPosition) {
+        toast.style.top = `${currentOffset}px`;
+      } else {
+        toast.style.bottom = `${currentOffset}px`;
+      }
+      
+      // Aggiorna l'offset per il prossimo toast
+      const height = toast.offsetHeight;
+      currentOffset += height + this.spacing;
+    });
+  }
+  
+  // Metodo statico per accedere all'istanza singleton
+  static getInstance() {
+    if (!ToastManager.instance) {
+      ToastManager.instance = new ToastManager();
+    }
+    return ToastManager.instance;
+  }
+}
+
+// Esporta il gestore come singleton
+export default ToastManager.getInstance();