better_ui 0.5.0 → 0.5.1

data/lib/generators/better_ui/templates/README

@@ -1,3 +1,65 @@
+==========================================================
+                     BETTER UI
+==========================================================
+
+Fogli di stile per componenti generati con successo!
+
+STRUTTURA DEI FILE:
+----------------------------------------------------------
+I seguenti file sono stati creati:
+
+1. File principale:
+   * <%= options[:prefix] %>_better_ui_components.scss
+
+2. File indice:
+   * components/_index.scss (raccoglie tutti gli override usando @forward)
+
+3. File di override:
+   * components/_variables_overrides.scss
+   * components/_button_overrides.scss
+   * components/_heading_overrides.scss
+   ... e altri file di override
+
+COME UTILIZZARE:
+----------------------------------------------------------
+1. Il file principale già utilizza @use per importare tutti i componenti:
+   @use 'better_ui/components' as bui;
+   @use 'components/index' as overrides;
+
+2. Personalizza i componenti modificando i file *_overrides.scss:
+   Ogni file di override contiene classi vuote corrispondenti
+   alle classi originali, pronte per essere personalizzate.
+
+3. Se hai bisogno di aggiungere nuovi file SCSS, ricorda di includere
+   il riferimento nel file components/_index.scss usando @forward.
+
+BEST PRACTICES:
+----------------------------------------------------------
+* Segui la metodologia BEM per le tue personalizzazioni
+* Usa le variabili CSS definite in _variables.scss
+* Mantieni la coerenza visiva tra i componenti
+* Aggiungi nuovi modificatori nei file di override
+
+ESEMPIO DI PERSONALIZZAZIONE:
+----------------------------------------------------------
+// In _button_overrides.scss
+@layer components {
+  .bui-button {
+    // Modifica la classe base
+    @apply transition-all;
+    
+    // Modifica uno specifico modificatore
+    &--primary {
+      @apply bg-indigo-600 hover:bg-indigo-700;
+    }
+    
+    // Aggiungi un nuovo modificatore
+    &--custom {
+      @apply bg-gradient-to-r from-purple-500 to-pink-500;
+    }
+  }
+}
+
 ===============================================================================
 
 Installazione completata!
@@ -5,7 +67,7 @@ Installazione completata!
 Il tuo foglio di stile SCSS per la personalizzazione dei componenti di BetterUi
 è stato creato in:
 
-  app/assets/stylesheets/<%= options[:prefix] %>_better_ui_components.scss
+  <%= options[:path] %>/<%= options[:prefix] %>_better_ui_components.scss
 
 ===============================================================================
 
@@ -18,7 +80,7 @@ PROSSIMI PASSI:
 
    In app/assets/stylesheets/application.scss:
    
-   @import '<%= options[:prefix] %>_better_ui_components';
+   @use '<%= options[:prefix] %>_better_ui_components';
 
    Oppure in app/assets/stylesheets/application.css:
    
@@ -26,12 +88,19 @@ PROSSIMI PASSI:
     *= require <%= options[:prefix] %>_better_ui_components
     */
 
-3. Personalizza le variabili SCSS e le classi secondo le tue esigenze.
+   Se hai utilizzato un path personalizzato, assicurati di importare
+   correttamente il file dal percorso specificato.
+
+3. I file SCSS utilizzano la moderna sintassi @use e @forward di Sass
+   invece della sintassi @import deprecata. Questo ti permette di evitare
+   conflitti di nome e organizzare meglio il tuo codice SCSS.
+
+4. Personalizza le variabili SCSS e le classi secondo le tue esigenze.
    Il foglio di stile utilizza le classi di Tailwind CSS tramite la direttiva
    @apply, consentendoti di sfruttare l'ecosistema Tailwind mantenendo un
    codice SCSS organizzato e modulare.
 
-4. Nei componenti Ruby, usa le classi con prefisso 'bui-' invece di includere
+5. Nei componenti Ruby, usa le classi con prefisso 'bui-' invece di includere
    direttamente le classi Tailwind. Ad esempio per i bottoni:
    
    # Esempio di utilizzo di classi CSS personalizzate
@@ -44,7 +113,7 @@ PROSSIMI PASSI:
    Questo approccio centralizza gli stili nel foglio SCSS e rende più facile
    mantenere e modificare l'aspetto dei componenti.
 
-5. Assicurati che il tuo foglio di stile venga caricato dopo i fogli di stile
+6. Assicurati che il tuo foglio di stile venga caricato dopo i fogli di stile
    di BetterUI per sovrascrivere correttamente gli stili predefiniti.
 
 ===============================================================================

data/lib/generators/better_ui/templates/components/_avatar.scss

@@ -1,151 +1,200 @@
-/* ==============================
- * Avatar Component
- * ============================== */
-
-/* Stile base */
-.bui-avatar {
-  @apply relative inline-flex items-center justify-center;
-  @apply box-border;
-  @apply overflow-hidden;
-}
-
-/* Dimensioni */
-.bui-avatar-size-xxsmall {
-  @apply w-5 h-5;
-  @apply text-[0.625rem];
-}
-
-.bui-avatar-size-xsmall {
-  @apply w-6 h-6;
-  @apply text-xs;
-}
-
-.bui-avatar-size-small {
-  @apply w-8 h-8;
-  @apply text-sm;
-}
-
-.bui-avatar-size-medium {
-  @apply w-10 h-10;
-  @apply text-base;
-}
-
-.bui-avatar-size-large {
-  @apply w-12 h-12;
-  @apply text-lg;
-}
-
-.bui-avatar-size-xlarge {
-  @apply w-16 h-16;
-  @apply text-xl;
-}
-
-.bui-avatar-size-xxlarge {
-  @apply w-24 h-24;
-  @apply text-2xl;
-}
-
-/* Forme */
-.bui-avatar-shape-circle {
-  @apply rounded-full;
-}
-
-.bui-avatar-shape-square {
-  @apply rounded-none;
-}
-
-.bui-avatar-shape-rounded {
-  @apply rounded-md;
-}
-
-/* Immagine */
-.bui-avatar-image {
-  @apply w-full h-full object-cover;
-}
-
-/* Iniziali di fallback */
-.bui-avatar-initials {
-  @apply w-full h-full flex items-center justify-center font-medium text-white;
-}
-
-/* Temi di colore */
-.bui-avatar-default {
-  @apply bg-gray-700 text-white;
-}
-
-.bui-avatar-white {
-  @apply bg-white text-gray-800 border border-gray-200;
-}
-
-.bui-avatar-red {
-  @apply bg-red-500 text-white;
-}
-
-.bui-avatar-rose {
-  @apply bg-rose-500 text-white;
-}
-
-.bui-avatar-orange {
-  @apply bg-orange-500 text-white;
-}
-
-.bui-avatar-green {
-  @apply bg-green-500 text-white;
-}
-
-.bui-avatar-blue {
-  @apply bg-blue-500 text-white;
-}
-
-.bui-avatar-yellow {
-  @apply bg-yellow-500 text-black;
-}
-
-.bui-avatar-violet {
-  @apply bg-violet-500 text-white;
-}
-
-.bui-avatar-gray {
-  @apply bg-gray-400 text-white;
-}
-
-/* Indicatore di stato */
-.bui-avatar-status-indicator {
-  @apply absolute block rounded-full border-2 border-white;
-  @apply w-3 h-3;
-  @apply z-10;
-}
-
-/* Posizioni dell'indicatore di stato */
-.bui-avatar-status-position-bottom-right {
-  @apply bottom-0 right-0;
-}
-
-.bui-avatar-status-position-bottom-left {
-  @apply bottom-0 left-0;
-}
-
-.bui-avatar-status-position-top-right {
-  @apply top-0 right-0;
-}
-
-.bui-avatar-status-position-top-left {
-  @apply top-0 left-0;
-}
-
-/* Varianti di stato */
-.bui-avatar-status-online {
-  @apply bg-green-500;
-}
-
-.bui-avatar-status-offline {
-  @apply bg-gray-400;
-}
-
-.bui-avatar-status-busy {
-  @apply bg-red-500;
-}
-
-.bui-avatar-status-away {
-  @apply bg-yellow-500;
+@layer components {
+  // Classe base per l'avatar (Block)
+  .bui-avatar {
+    @apply inline-flex items-center justify-center relative;
+    
+    // Elements
+    &__image {
+      @apply object-cover;
+    }
+    
+    &__placeholder {
+      @apply flex items-center justify-center font-medium text-white uppercase;
+    }
+    
+    &__status {
+      @apply absolute bottom-0 right-0 block rounded-full ring-2 ring-white;
+      
+      &--online {
+        @apply bg-green-400;
+      }
+      
+      &--offline {
+        @apply bg-gray-400;
+      }
+      
+      &--busy {
+        @apply bg-red-400;
+      }
+      
+      &--away {
+        @apply bg-yellow-400;
+      }
+    }
+    
+    &__presence {
+      @apply absolute block rounded-full ring-2 ring-white;
+    }
+    
+    &__badge {
+      @apply absolute -top-1 -right-1 flex items-center justify-center;
+    }
+    
+    // Modifiers (dimensioni)
+    &--xs {
+      @apply h-6 w-6;
+      
+      .bui-avatar__placeholder {
+        @apply text-xs;
+      }
+      
+      .bui-avatar__status {
+        @apply h-1.5 w-1.5;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-4 w-4 text-[0.6rem];
+      }
+    }
+    
+    &--sm {
+      @apply h-8 w-8;
+      
+      .bui-avatar__placeholder {
+        @apply text-xs;
+      }
+      
+      .bui-avatar__status {
+        @apply h-2 w-2;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-5 w-5 text-xs;
+      }
+    }
+    
+    &--md {
+      @apply h-10 w-10;
+      
+      .bui-avatar__placeholder {
+        @apply text-sm;
+      }
+      
+      .bui-avatar__status {
+        @apply h-2.5 w-2.5;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-6 w-6 text-xs;
+      }
+    }
+    
+    &--lg {
+      @apply h-12 w-12;
+      
+      .bui-avatar__placeholder {
+        @apply text-base;
+      }
+      
+      .bui-avatar__status {
+        @apply h-3 w-3;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-7 w-7 text-sm;
+      }
+    }
+    
+    &--xl {
+      @apply h-16 w-16;
+      
+      .bui-avatar__placeholder {
+        @apply text-lg;
+      }
+      
+      .bui-avatar__status {
+        @apply h-4 w-4;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-8 w-8 text-sm;
+      }
+    }
+    
+    // Modifiers (colori placeholders)
+    &--gray {
+      .bui-avatar__placeholder {
+        @apply bg-gray-500;
+      }
+    }
+    
+    &--red {
+      .bui-avatar__placeholder {
+        @apply bg-red-500;
+      }
+    }
+    
+    &--blue {
+      .bui-avatar__placeholder {
+        @apply bg-blue-500;
+      }
+    }
+    
+    &--green {
+      .bui-avatar__placeholder {
+        @apply bg-green-500;
+      }
+    }
+    
+    &--violet {
+      .bui-avatar__placeholder {
+        @apply bg-violet-500;
+      }
+    }
+    
+    &--orange {
+      .bui-avatar__placeholder {
+        @apply bg-orange-500;
+      }
+    }
+    
+    &--yellow {
+      .bui-avatar__placeholder {
+        @apply bg-yellow-500 text-yellow-900;
+      }
+    }
+    
+    // Modifiers (forma)
+    &--circle {
+      @apply rounded-full;
+      
+      .bui-avatar__image,
+      .bui-avatar__placeholder {
+        @apply rounded-full;
+      }
+    }
+    
+    &--square {
+      @apply rounded-md;
+      
+      .bui-avatar__image,
+      .bui-avatar__placeholder {
+        @apply rounded-md;
+      }
+    }
+    
+    // Modifiers (gruppo)
+    &--group {
+      @apply -ml-2 first:ml-0;
+    }
+  }
+  
+  // Avatar group container
+  .bui-avatar-group {
+    @apply flex;
+    
+    .bui-avatar {
+      @apply border-2 border-white;
+    }
+  }
 }