better_ui 0.4.0 → 0.5.1

data/lib/generators/better_ui/stylesheet_generator.rb

@@ -0,0 +1,159 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Generators
+    # Generatore per creare file SCSS personalizzati per i componenti BetterUI
+    #
+    # Questo generatore crea:
+    # 1. Un foglio di stile principale che importa tutti i componenti usando @use/@forward
+    # 2. File di override per ogni componente che permettono personalizzazioni senza modificare i file originali
+    # 3. Un file indice che raccoglie tutti gli override usando @forward
+    class StylesheetGenerator < Rails::Generators::Base
+      source_root File.expand_path('templates', __dir__)
+      
+      desc "Genera un foglio di stile SCSS di base per personalizzare i componenti di BetterUI"
+      
+      # Opzioni configurabili
+      class_option :prefix, type: :string, default: "custom", 
+                  desc: "Prefisso da utilizzare per il foglio di stile (default: 'custom')"
+      class_option :path, type: :string, default: "app/assets/stylesheets", 
+                  desc: "Path dove installare i file CSS all'interno della cartella app (default: 'app/assets/stylesheets')"
+      
+      # Lista dei file dei componenti da gestire
+      COMPONENT_FILES = [
+        '_variables.scss', 
+        '_button.scss', 
+        '_heading.scss', 
+        '_breadcrumb.scss', 
+        '_link.scss', 
+        '_panel.scss', 
+        '_icon.scss', 
+        '_table.scss', 
+        '_badge.scss', 
+        '_spinner.scss', 
+        '_avatar.scss',
+        '_card.scss'
+      ].freeze
+      
+      # Crea il foglio di stile principale
+      def create_stylesheet
+        # Crea il file principale che importa tutti i componenti
+        template "components_stylesheet.scss", 
+                File.join(options[:path], "#{options[:prefix]}_better_ui.scss")
+        
+        # Crea la directory dei componenti se non esiste
+        directory = File.join(options[:path], "components")
+        FileUtils.mkdir_p(directory) unless File.directory?(directory)
+        
+        # Crea il file indice che raccoglie tutti gli override
+        template "index.scss", File.join(directory, "_index.scss")
+      end
+
+      # Crea i file di override per ogni componente
+      def create_overrides
+        # Crea la directory dei componenti se non esiste
+        directory = File.join(options[:path], "components")
+        FileUtils.mkdir_p(directory) unless File.directory?(directory)
+        
+        # Crea i file di override per ogni componente
+        COMPONENT_FILES.each do |filename|
+          # Nome del file di override (es. _button_overrides.scss)
+          override_filename = filename.sub('.scss', '_overrides.scss')
+          override_path = File.join(directory, override_filename)
+          
+          # Crea il file di override solo se non esiste già
+          unless File.exist?(override_path)
+            # Percorso del file template originale
+            template_path = File.join(self.class.source_root, "components", filename)
+            
+            # Se il file template esiste, crea il file di override basato su di esso
+            if File.exist?(template_path)
+              original_content = File.read(template_path)
+              override_content = generate_empty_override(original_content, filename)
+              create_file override_path, override_content
+            end
+          end
+        end
+      end
+      
+      # Mostra le istruzioni README dopo l'esecuzione del generatore
+      def show_readme
+        readme "README" if behavior == :invoke
+      end
+      
+      private
+      
+      # Genera un file di override vuoto con le stesse classi del file originale
+      # 
+      # @param content [String] Il contenuto del file SCSS originale
+      # @param filename [String] Il nome del file del componente
+      # @return [String] Il contenuto formattato del file di override
+      def generate_empty_override(content, filename)
+        # Estrae il nome del componente dal nome file (es. "_button.scss" -> "button")
+        component_name = filename.sub('_', '').sub('.scss', '')
+        
+        # Intestazione del file di override
+        result = "/* ==============================\n"
+        result += " * #{component_name.capitalize} Component Overrides\n"
+        result += " * ==============================\n"
+        result += " * Questo file contiene le classi vuote per sovrascrivere gli stili di default.\n"
+        result += " * Aggiungi qui le tue personalizzazioni.\n"
+        result += " */\n\n"
+        
+        # Aggiungiamo il layer di Tailwind se presente nell'originale
+        if content.include?('@layer components')
+          result += "@layer components {\n"
+          layer_present = true
+        end
+        
+        # Estrae le classi principali (Block) usando regex
+        class_matches = content.scan(/\.(bui-[a-zA-Z0-9_-]+)\s*\{/)
+        class_matches.flatten.uniq.each do |css_class|
+          result += layer_present ? "  " : ""
+          result += ".#{css_class} {\n    // Aggiungi personalizzazioni qui\n#{layer_present ? "  " : ""}}\n\n"
+        end
+        
+        # Estrae classi modifier (es. &--small, &__icon, ecc.)
+        modifier_matches = content.scan(/&([a-zA-Z0-9_-]+)\s*\{/)
+        if !modifier_matches.empty?
+          # Raggruppa i modifier per classe principale
+          main_classes = class_matches.flatten.uniq
+          main_classes.each do |main_class|
+            # Estrae tutti i modifier di questa classe principale
+            class_content = extract_class_block(content, main_class)
+            modifiers = class_content.scan(/&([a-zA-Z0-9_-]+)\s*\{/).flatten.uniq
+            
+            if !modifiers.empty?
+              result += layer_present ? "  " : ""
+              result += ".#{main_class} {\n"
+              
+              modifiers.each do |modifier|
+                result += layer_present ? "    " : "  "
+                result += "&#{modifier} {\n      // Aggiungi personalizzazioni qui\n#{layer_present ? "    " : "  "}}\n\n"
+              end
+              
+              result += layer_present ? "  " : ""
+              result += "}\n\n"
+            end
+          end
+        end
+        
+        # Chiude il layer se presente
+        result += "}\n" if layer_present
+        
+        result
+      end
+      
+      # Estrae il blocco di codice relativo a una classe CSS specifica
+      #
+      # @param content [String] Il contenuto del file SCSS completo
+      # @param css_class [String] Il nome della classe CSS da estrarre
+      # @return [String] Il blocco di codice della classe
+      def extract_class_block(content, css_class)
+        regex = /\.(#{css_class})\s*\{((?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*)\}/m
+        match = content.match(regex)
+        match ? match[2] : ""
+      end
+    end
+  end
+end 

data/lib/generators/better_ui/templates/README

@@ -0,0 +1,125 @@
+==========================================================
+                     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!
+
+Il tuo foglio di stile SCSS per la personalizzazione dei componenti di BetterUi
+è stato creato in:
+
+  <%= options[:path] %>/<%= options[:prefix] %>_better_ui_components.scss
+
+===============================================================================
+
+PROSSIMI PASSI:
+
+1. Assicurati che Tailwind CSS sia correttamente configurato nel tuo progetto.
+   Questo foglio di stile utilizza le utility @apply di Tailwind CSS.
+
+2. Importa il foglio di stile nella tua applicazione:
+
+   In app/assets/stylesheets/application.scss:
+   
+   @use '<%= options[:prefix] %>_better_ui_components';
+
+   Oppure in app/assets/stylesheets/application.css:
+   
+   /*
+    *= require <%= options[:prefix] %>_better_ui_components
+    */
+
+   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.
+
+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
+   BUTTON_TYPES = {
+     default: "bui-btn-default",
+     red: "bui-btn-red",
+     blue: "bui-btn-blue"
+   }
+   
+   Questo approccio centralizza gli stili nel foglio SCSS e rende più facile
+   mantenere e modificare l'aspetto dei componenti.
+
+6. Assicurati che il tuo foglio di stile venga caricato dopo i fogli di stile
+   di BetterUI per sovrascrivere correttamente gli stili predefiniti.
+
+===============================================================================
+
+Per ulteriori informazioni sulla personalizzazione dei componenti,
+consulta la documentazione ufficiale su:
+https://github.com/YOUR_USERNAME/better_ui
+
+=============================================================================== 

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

@@ -0,0 +1,200 @@
+@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;
+    }
+  }
+} 

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

@@ -0,0 +1,154 @@
+@layer components {
+  // Classe base per il badge (Block)
+  .bui-badge {
+    @apply inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+    
+    // Elements
+    &__icon {
+      @apply flex-shrink-0;
+      
+      &--left {
+        @apply -ml-0.5 mr-1.5;
+      }
+      
+      &--right {
+        @apply -mr-0.5 ml-1.5;
+      }
+    }
+    
+    &__text {
+      @apply whitespace-nowrap;
+    }
+    
+    &__dot {
+      @apply h-2 w-2 rounded-full mr-1.5;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply bg-gray-100 text-gray-800;
+      
+      .bui-badge__dot {
+        @apply bg-gray-500;
+      }
+    }
+    
+    &--white {
+      @apply bg-white text-gray-800 border border-gray-200;
+      
+      .bui-badge__dot {
+        @apply bg-gray-400;
+      }
+    }
+    
+    &--red {
+      @apply bg-red-100 text-red-800;
+      
+      .bui-badge__dot {
+        @apply bg-red-500;
+      }
+    }
+    
+    &--rose {
+      @apply bg-rose-100 text-rose-800;
+      
+      .bui-badge__dot {
+        @apply bg-rose-500;
+      }
+    }
+    
+    &--orange {
+      @apply bg-orange-100 text-orange-800;
+      
+      .bui-badge__dot {
+        @apply bg-orange-500;
+      }
+    }
+    
+    &--green {
+      @apply bg-green-100 text-green-800;
+      
+      .bui-badge__dot {
+        @apply bg-green-500;
+      }
+    }
+    
+    &--blue {
+      @apply bg-blue-100 text-blue-800;
+      
+      .bui-badge__dot {
+        @apply bg-blue-500;
+      }
+    }
+    
+    &--yellow {
+      @apply bg-yellow-100 text-yellow-800;
+      
+      .bui-badge__dot {
+        @apply bg-yellow-500;
+      }
+    }
+    
+    &--violet {
+      @apply bg-violet-100 text-violet-800;
+      
+      .bui-badge__dot {
+        @apply bg-violet-500;
+      }
+    }
+    
+    // Modifiers (varianti dimensione)
+    &--small {
+      @apply text-xs px-2 py-0.5;
+    }
+    
+    &--medium {
+      @apply text-sm px-2.5 py-0.5;
+    }
+    
+    &--large {
+      @apply text-sm px-3 py-1;
+    }
+    
+    // Modifiers (varianti stile)
+    &--pill {
+      @apply rounded-full;
+    }
+    
+    &--square {
+      @apply rounded-md;
+    }
+    
+    &--outline {
+      @apply bg-transparent border;
+      
+      &.bui-badge--red {
+        @apply border-red-500 text-red-700 bg-transparent;
+      }
+      
+      &.bui-badge--green {
+        @apply border-green-500 text-green-700 bg-transparent;
+      }
+      
+      &.bui-badge--blue {
+        @apply border-blue-500 text-blue-700 bg-transparent;
+      }
+      
+      &.bui-badge--yellow {
+        @apply border-yellow-500 text-yellow-700 bg-transparent;
+      }
+      
+      &.bui-badge--violet {
+        @apply border-violet-500 text-violet-700 bg-transparent;
+      }
+      
+      &.bui-badge--orange {
+        @apply border-orange-500 text-orange-700 bg-transparent;
+      }
+      
+      &.bui-badge--rose {
+        @apply border-rose-500 text-rose-700 bg-transparent;
+      }
+    }
+  }
+}