better_ui 0.4.0 → 0.5.1

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: better_ui
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.1
 platform: ruby
 authors:
 - alessiobussolari
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-02 00:00:00.000000000 Z
+date: 2025-05-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -28,44 +28,44 @@ dependencies:
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.0.0
+        version: '3.22'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.0.0
+        version: '3.22'
 - !ruby/object:Gem::Dependency
-  name: redcarpet
+  name: tailwindcss-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.6'
+        version: '4.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.6'
+        version: '4.0'
 - !ruby/object:Gem::Dependency
-  name: tailwindcss-rails
+  name: redcarpet
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '3.6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '3.6'
 - !ruby/object:Gem::Dependency
   name: coderay
   requirement: !ruby/object:Gem::Requirement
@@ -86,86 +86,101 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 6.5.1
+        version: '6.5'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 6.5.1
+        version: '6.5'
 - !ruby/object:Gem::Dependency
-  name: sqlite3
+  name: lookbook
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '2.3'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '2.3'
 - !ruby/object:Gem::Dependency
-  name: puma
+  name: listen
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.9'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.9'
 - !ruby/object:Gem::Dependency
-  name: lookbook
+  name: sqlite3
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '1.6'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: '1.6'
 - !ruby/object:Gem::Dependency
-  name: listen
+  name: puma
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '6.4'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '6.4'
 - !ruby/object:Gem::Dependency
-  name: actioncable
+  name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '6.1'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
-description: Una gem Rails che funziona come engine montabile contenente componenti
-  UI riutilizzabili e pagine di documentazione
+        version: '6.1'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.59'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.59'
+description: Better UI is a Rails gem that works as a mountable engine containing
+  reusable UI components, built with ViewComponent and Tailwind CSS, following the
+  BEM methodology. It includes documentation and interactive previews with Lookbook.
 email:
 - alessio.bussolari@pandev.it
 executables: []
@@ -175,14 +190,30 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/javascripts/better_ui/controllers/navbar_controller.js
-- app/assets/javascripts/better_ui/controllers/sidebar_controller.js
-- app/assets/javascripts/better_ui/controllers/toast_controller.js
-- app/assets/javascripts/better_ui/index.js
-- app/assets/javascripts/better_ui/toast_manager.js
+- app/assets/stylesheets/better_ui.scss
+- app/assets/stylesheets/better_ui/_base.scss
+- app/assets/stylesheets/better_ui/_components.scss
+- app/assets/stylesheets/better_ui/_utilities.scss
 - app/assets/stylesheets/better_ui/application.css
+- app/assets/stylesheets/better_ui/components/_avatar.scss
+- app/assets/stylesheets/better_ui/components/_badge.scss
+- app/assets/stylesheets/better_ui/components/_breadcrumb.scss
+- app/assets/stylesheets/better_ui/components/_button.scss
+- app/assets/stylesheets/better_ui/components/_card.scss
+- app/assets/stylesheets/better_ui/components/_heading.scss
+- app/assets/stylesheets/better_ui/components/_icon.scss
+- app/assets/stylesheets/better_ui/components/_index.scss
+- app/assets/stylesheets/better_ui/components/_link.scss
+- app/assets/stylesheets/better_ui/components/_panel.scss
+- app/assets/stylesheets/better_ui/components/_spinner.scss
+- app/assets/stylesheets/better_ui/components/_table.scss
+- app/assets/stylesheets/better_ui/components/_variables.scss
 - app/components/better_ui/application/alert_component.html.erb
 - app/components/better_ui/application/alert_component.rb
+- app/components/better_ui/application/card_component.html.erb
+- app/components/better_ui/application/card_component.rb
+- app/components/better_ui/application/card_container_component.html.erb
+- app/components/better_ui/application/card_container_component.rb
 - app/components/better_ui/application/header_component.html.erb
 - app/components/better_ui/application/header_component.rb
 - app/components/better_ui/application/navbar_component.html.erb
@@ -191,6 +222,10 @@ files:
 - app/components/better_ui/application/sidebar_component.rb
 - app/components/better_ui/application/toast_component.html.erb
 - app/components/better_ui/application/toast_component.rb
+- app/components/better_ui/general/avatar_component.html.erb
+- app/components/better_ui/general/avatar_component.rb
+- app/components/better_ui/general/badge_component.html.erb
+- app/components/better_ui/general/badge_component.rb
 - app/components/better_ui/general/breadcrumb_component.html.erb
 - app/components/better_ui/general/breadcrumb_component.rb
 - app/components/better_ui/general/button_component.html.erb
@@ -199,23 +234,58 @@ files:
 - app/components/better_ui/general/heading_component.rb
 - app/components/better_ui/general/icon_component.html.erb
 - app/components/better_ui/general/icon_component.rb
+- app/components/better_ui/general/link_component.html.erb
+- app/components/better_ui/general/link_component.rb
 - app/components/better_ui/general/panel_component.html.erb
 - app/components/better_ui/general/panel_component.rb
+- app/components/better_ui/general/spinner_component.html.erb
+- app/components/better_ui/general/spinner_component.rb
 - app/components/better_ui/general/table_component.html.erb
 - app/components/better_ui/general/table_component.rb
-- app/components/better_ui/theme_helper.rb
 - app/controllers/better_ui/application_controller.rb
-- app/controllers/better_ui/docs_controller.rb
-- app/helpers/better_ui_application_helper.rb
+- app/helpers/better_ui/general/components/avatar_helper.rb
+- app/helpers/better_ui/general/components/badge_helper.rb
+- app/helpers/better_ui/general/components/breadcrumb_helper.rb
+- app/helpers/better_ui/general/components/button_helper.rb
+- app/helpers/better_ui/general/components/heading_helper.rb
+- app/helpers/better_ui/general/components/icon_helper.rb
+- app/helpers/better_ui/general/components/link_helper.rb
+- app/helpers/better_ui/general/components/panel_helper.rb
+- app/helpers/better_ui/general/components/spinner_helper.rb
+- app/helpers/better_ui/general/components/table_helper.rb
+- app/helpers/better_ui/general_helper.rb
+- app/helpers/better_ui_helper.rb
 - app/jobs/better_ui/application_job.rb
 - app/mailers/better_ui/application_mailer.rb
 - app/models/better_ui/application_record.rb
+- app/views/components/better_ui/general/table/_custom_body_row.html.erb
+- app/views/components/better_ui/general/table/_custom_footer_rows.html.erb
+- app/views/components/better_ui/general/table/_custom_header_rows.html.erb
 - app/views/layouts/component_preview.html.erb
 - config/initializers/lookbook.rb
 - config/routes.rb
 - lib/better_ui.rb
 - lib/better_ui/engine.rb
 - lib/better_ui/version.rb
+- lib/generators/better_ui/install_generator.rb
+- lib/generators/better_ui/stylesheet_generator.rb
+- lib/generators/better_ui/templates/README
+- lib/generators/better_ui/templates/components/_avatar.scss
+- lib/generators/better_ui/templates/components/_badge.scss
+- lib/generators/better_ui/templates/components/_breadcrumb.scss
+- lib/generators/better_ui/templates/components/_button.scss
+- lib/generators/better_ui/templates/components/_card.scss
+- lib/generators/better_ui/templates/components/_heading.scss
+- lib/generators/better_ui/templates/components/_icon.scss
+- lib/generators/better_ui/templates/components/_index.scss
+- lib/generators/better_ui/templates/components/_link.scss
+- lib/generators/better_ui/templates/components/_panel.scss
+- lib/generators/better_ui/templates/components/_spinner.scss
+- lib/generators/better_ui/templates/components/_table.scss
+- lib/generators/better_ui/templates/components/_variables.scss
+- lib/generators/better_ui/templates/components_stylesheet.scss
+- lib/generators/better_ui/templates/index.scss
+- lib/generators/better_ui/templates/initializer.rb
 - lib/tasks/better_ui_tasks.rake
 homepage: https://github.com/alessiobussolari/better_ui
 licenses:
@@ -225,6 +295,7 @@ metadata:
   homepage_uri: https://github.com/alessiobussolari/better_ui
   source_code_uri: https://github.com/alessiobussolari/better_ui
   changelog_uri: https://github.com/alessiobussolari/better_ui/blob/main/CHANGELOG.md
+  rubygems_mfa_required: 'true'
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -233,7 +304,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: '3.0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
@@ -243,5 +314,5 @@ requirements: []
 rubygems_version: 3.5.11
 signing_key:
 specification_version: 4
-summary: Componenti UI riutilizzabili per Rails con documentazione integrata
+summary: Elegant and reusable UI components for Rails with integrated documentation
 test_files: []

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

@@ -1,138 +0,0 @@
-// 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

@@ -1,211 +0,0 @@
-// 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)";
-            }
-          }
-        }
-      });
-    }
-  }
-}