better_ui 0.1.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c59e86ef83ec560909908edbbbecd0c33a3663df87de94e99fff0475be5b23d
-  data.tar.gz: dc7a3b578f0b2cc70f3e25c843dbc918723bf4d0b7d9bdb4b511e2ad073cc5fd
+  metadata.gz: 2242792aeee217a121cb73ec14ccc317d8f9c7af9e3dcdcf52629d05eca55731
+  data.tar.gz: 86015104cb387605208eaa8f9ffbdeb3764542fd089e09cf2dd011cecc37640b
 SHA512:
-  metadata.gz: 66fdc7a9f14ff11b0d79caaff30d1b35ba4878dbbfcbddca7571684eb3628c62288a4fff4a33416b285c479ab96ca22ed271949184c472cb36f4131270a15552
-  data.tar.gz: abaf0df7af66450518ab1620ca0fe165e411c2b96a6accfc3a49acb91a93b82c64c7093bacbb7e5e272040275b96063dee0253608a08f406d2e1122ff78cb8c3
+  metadata.gz: df1b73b3f9c3782a562ef7b585fd9bbac50c45fc8cc9661fe6ff8aa335c53f988c65ce4ab430c7c6dc82d74419b9dd80e026ad50c4533742b7940153fba2e653
+  data.tar.gz: 1010406d6a425b0ca48e1acf0af262634a7f5babf54edd34dfd6c7b6943dbdb1a18c250d800f68b9e41ec7bc94d095a8ed9d3e3ca7efb540bbb3ddbe4d310105

data/README.md

@@ -14,6 +14,7 @@ BetterUI è una gemma Rails che fornisce componenti UI riutilizzabili con docume
 - **Documentazione integrata** - Visualizza esempi e documentazione direttamente nel browser
 - **Altamente personalizzabile** - Adatta facilmente lo stile al tuo brand
 - **Componenti modulari** - Usa solo ciò di cui hai bisogno
+- **Preview dei componenti** - Visualizza e interagisci con i componenti usando Lookbook
 
 ## 📦 Componenti disponibili
 
@@ -24,6 +25,10 @@ BetterUI è una gemma Rails che fornisce componenti UI riutilizzabili con docume
 | **Card** | Contenitori flessibili con header, body e footer |
 | **Modal** | Finestre di dialogo modali |
 | **Tabs** | Navigazione a schede |
+| **Navbar** | Barra di navigazione responsive con supporto per menu dropdown |
+| **Sidebar** | Menu laterale con supporto per navigazione gerarchica |
+| **Toast** | Notifiche temporanee con timer e animazioni |
+| **Header** | Intestazioni di pagina con titolo, sottotitolo, breadcrumb e azioni |
 | **Form Elements** | Campi di input stilizzati (in arrivo) |
 
 ## 🚀 Installazione
@@ -82,11 +87,70 @@ Una volta installato, puoi iniziare ad usare i componenti:
     <p>Contenuto della card...</p>
   <% end %>
 <% end %>
+
+<%# Header con breadcrumb %>
+<%= render BetterUi::Application::HeaderComponent.new(
+  title: "Dashboard",
+  subtitle: "Gestisci tutto da qui",
+  breadcrumbs: [
+    { text: "Home", url: "/" },
+    { text: "Dashboard" }
+  ],
+  actions: [
+    { content: button_html("Nuovo", "primary") }
+  ]
+) %>
 ```
 
 Visita `/better_ui` nella tua applicazione per vedere la documentazione completa e gli esempi.
 
-## 🎨 Personalizzazione
+### Il componente Header
+
+Il componente Header è progettato per creare intestazioni di pagina complete con numerose funzionalità:
+
+```erb
+<%= render BetterUi::Application::HeaderComponent.new(
+  title: {
+    text: "Impostazioni",
+    icon: "settings"
+  },
+  subtitle: "Configura le preferenze del sistema",
+  breadcrumbs: [
+    { text: "Home", url: "/" },
+    { text: "Admin", url: "/admin" },
+    { text: "Impostazioni" }
+  ],
+  variant: :modern,
+  fixed: :top,
+  show_breadcrumbs: true,
+  actions: [
+    { content: button_html("Salva", "primary") },
+    { content: button_html("Annulla", "secondary") }
+  ]
+) %>
+```
+
+Il componente supporta:
+- Titolo con opzionale icona integrata
+- Sottotitolo descrittivo
+- Breadcrumbs completi con link di navigazione
+- Azioni contestuali (pulsanti, menu, ecc.)
+- Varianti di stile: modern, light, dark, primary, transparent
+- Posizionamento fisso (in alto o in basso)
+- Controllo della visibilità dei breadcrumb
+
+### Preview dei componenti con Lookbook
+
+BetterUI integra [Lookbook](https://github.com/allmarkedup/lookbook) per visualizzare in anteprima i componenti UI:
+
+1. Accedi a `/better_ui/lookbook` nella tua applicazione per visualizzare il catalogo componenti
+2. Esplora le varianti e le configurazioni disponibili per ogni componente
+3. Visualizza il codice sorgente e il markup generato
+4. Interagisci con i componenti in tempo reale
+
+Lookbook è disponibile solo negli ambienti di sviluppo e test.
+
+## 🎮 Personalizzazione
 
 ### Usa l'inizializzatore
 

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

@@ -0,0 +1,138 @@
+// Navbar controller per gestire il comportamento del menu mobile e dei dropdown
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "dropdown", "submenu"]
+  
+  connect() {
+    // Verifica se siamo su mobile e aggiorna lo stato del menu
+    this.updateMenuState();
+    
+    // Aggiungi un event listener per il resize della finestra
+    window.addEventListener("resize", this.updateMenuState.bind(this));
+    
+    // Chiudi menu quando si clicca su un link (solo su mobile)
+    if (this.hasMenuTarget) {
+      const links = this.menuTarget.querySelectorAll("a");
+      links.forEach(link => {
+        link.addEventListener("click", () => {
+          // Se siamo su mobile, chiudi il menu
+          if (window.innerWidth < 768) {
+            this.closeMenu();
+          }
+        });
+      });
+    }
+
+    // Aggiungi listener per i click all'esterno del menu
+    document.addEventListener("click", this.handleClickOutside.bind(this))
+  }
+  
+  disconnect() {
+    // Rimuovi event listener per il resize della finestra
+    window.removeEventListener("resize", this.updateMenuState.bind(this));
+
+    // Rimuovi listener al disconnette
+    document.removeEventListener("click", this.handleClickOutside.bind(this))
+  }
+  
+  // Metodo per alternare l'apertura/chiusura del menu
+  toggleMenu(event) {
+    event.stopPropagation()
+    const isExpanded = this.menuTarget.classList.contains("hidden") === false
+    
+    if (isExpanded) {
+      this.closeMenu()
+    } else {
+      this.openMenu()
+    }
+  }
+  
+  // Metodo per chiudere il menu
+  closeMenu() {
+    this.menuTarget.classList.add("hidden")
+    
+    // Aggiorna l'attributo aria-expanded
+    const button = this.element.querySelector("[aria-controls='navbar-menu']")
+    if (button) {
+      button.setAttribute("aria-expanded", "false")
+    }
+  }
+  
+  // Metodo per aggiornare lo stato del menu in base alla dimensione della finestra
+  updateMenuState() {
+    if (this.hasMenuTarget) {
+      // Se siamo su desktop (md breakpoint - 768px)
+      if (window.innerWidth >= 768) {
+        // Assicurati che il menu sia visibile su desktop
+        this.menuTarget.classList.remove("hidden");
+        this.menuTarget.classList.add("md:block");
+      } else {
+        // Su mobile, nascondi il menu di default
+        this.menuTarget.classList.add("hidden");
+      }
+      
+      // Aggiorna l'attributo aria-expanded
+      const button = this.element.querySelector("[aria-controls='navbar-menu']");
+      if (button) {
+        const isExpanded = window.innerWidth >= 768 ? "true" : "false";
+        button.setAttribute("aria-expanded", isExpanded);
+      }
+    }
+  }
+
+  openMenu() {
+    this.menuTarget.classList.remove("hidden")
+    
+    // Chiudi tutti i dropdown nel menu mobile
+    if (this.hasSubmenuTarget) {
+      this.submenuTargets.forEach(submenu => {
+        submenu.classList.add("hidden")
+      })
+    }
+
+    // Aggiorna stato del pulsante
+    event.currentTarget.setAttribute("aria-expanded", "true")
+  }
+
+  toggleDropdown(event) {
+    event.stopPropagation()
+    const button = event.currentTarget
+    const dropdownId = button.getAttribute("aria-controls")
+    const dropdown = document.getElementById(dropdownId)
+    
+    if (dropdown) {
+      const isExpanded = button.getAttribute("aria-expanded") === "true"
+      
+      if (isExpanded) {
+        dropdown.classList.add("hidden")
+        button.setAttribute("aria-expanded", "false")
+      } else {
+        // Chiudi tutti gli altri dropdown prima di aprire quello corrente
+        if (this.hasSubmenuTarget) {
+          this.submenuTargets.forEach(submenu => {
+            if (submenu.id !== dropdownId) {
+              submenu.classList.add("hidden")
+              
+              // Trova e aggiorna il pulsante associato
+              const associatedButton = this.element.querySelector(`[aria-controls='${submenu.id}']`)
+              if (associatedButton) {
+                associatedButton.setAttribute("aria-expanded", "false")
+              }
+            }
+          })
+        }
+        
+        dropdown.classList.remove("hidden")
+        button.setAttribute("aria-expanded", "true")
+      }
+    }
+  }
+
+  handleClickOutside(event) {
+    // Chiudi il menu se si fa clic all'esterno
+    if (this.element.contains(event.target) === false) {
+      this.closeMenu()
+    }
+  }
+} 

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();
+  }
+}