better_ui 0.3.0 → 0.5.0

data/lib/generators/better_ui/stylesheet_generator.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Generators
+    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"
+      
+      class_option :prefix, type: :string, default: "custom", 
+                  desc: "Prefisso da utilizzare per il foglio di stile (default: 'custom')"
+      
+      def create_stylesheet
+        # Crea il file principale
+        template "components_stylesheet.scss", 
+                File.join("app/assets/stylesheets", "#{options[:prefix]}_better_ui_components.scss")
+        
+        # Crea la directory dei componenti se non esiste
+        directory = File.join("app/assets/stylesheets", "components")
+        FileUtils.mkdir_p(directory) unless File.directory?(directory)
+        
+        # Lista dei file dei componenti
+        component_files = ['_variables.scss', '_button.scss', '_heading.scss', '_breadcrumb.scss', 
+                          '_link.scss', '_panel.scss', '_icon.scss', '_table.scss', '_badge.scss', 
+                          '_spinner.scss', '_avatar.scss']
+        
+        # Copia i file originali
+        component_files.each do |filename|
+          copy_file "components/#{filename}", File.join(directory, filename)
+        end
+      end
+
+      def create_overrides
+        # Crea la directory dei componenti se non esiste
+        directory = File.join("app/assets/stylesheets", "components")
+        FileUtils.mkdir_p(directory) unless File.directory?(directory)
+        
+        # Lista dei file dei componenti
+        component_files = ['_variables.scss', '_button.scss', '_heading.scss', '_breadcrumb.scss', 
+                          '_link.scss', '_panel.scss', '_icon.scss', '_table.scss', '_badge.scss', 
+                          '_spinner.scss', '_avatar.scss']
+        
+        # Crea i file di override
+        component_files.each do |filename|
+          # Nome del file di override
+          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)
+            # Leggi il contenuto del file originale dalla directory templates
+            template_path = File.join(self.class.source_root, "components", filename)
+            
+            # Se il file template esiste, crea il file di override
+            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
+      
+      def show_readme
+        readme "README" if behavior == :invoke
+      end
+      
+      private
+      
+      # Genera un file di override vuoto con le stesse classi del file originale
+      def generate_empty_override(content, filename)
+        component_name = filename.sub('_', '').sub('.scss', '')
+        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"
+        
+        # Estrae le classi tramite regex
+        class_matches = content.scan(/\.(bui-[a-zA-Z0-9_-]+)\s*\{/)
+        class_matches.flatten.uniq.each do |css_class|
+          result += ".#{css_class} {\n  // Sovrascrivi qui gli stili per .#{css_class}\n}\n\n"
+        end
+        
+        # Estrae anche classi annidate usando la sintassi SCSS
+        nested_matches = content.scan(/\.(bui-[a-zA-Z0-9_-]+)\s*{[^{]*\.([\w-]+)\s*{/)
+        nested_matches.each do |parent_class, child_class|
+          result += ".#{parent_class} {\n  .#{child_class} {\n    // Sovrascrivi qui gli stili annidati\n  }\n}\n\n"
+        end
+        
+        result
+      end
+    end
+  end
+end 

data/lib/generators/better_ui/templates/README

@@ -0,0 +1,56 @@
+===============================================================================
+
+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
+
+===============================================================================
+
+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:
+   
+   @import '<%= options[:prefix] %>_better_ui_components';
+
+   Oppure in app/assets/stylesheets/application.css:
+   
+   /*
+    *= require <%= options[:prefix] %>_better_ui_components
+    */
+
+3. 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
+   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.
+
+5. 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,151 @@
+/* ==============================
+ * 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;
+} 

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

@@ -0,0 +1,142 @@
+/* ==============================
+ * Badge Component
+ * ============================== */
+
+/* Stile base */
+.bui-badge {
+  @apply inline-flex items-center justify-center;
+  @apply font-medium whitespace-nowrap;
+  @apply transition-colors;
+}
+
+/* Posizionamento icone */
+.bui-badge-icon-left {
+  @apply mr-1;
+}
+
+.bui-badge-icon-right {
+  @apply ml-1;
+}
+
+/* Varianti di dimensione */
+.bui-badge-size-small {
+  @apply py-0.5 px-1.5 text-xs;
+}
+
+.bui-badge-size-medium {
+  @apply py-1 px-2 text-sm;
+}
+
+.bui-badge-size-large {
+  @apply py-1.5 px-3 text-base;
+}
+
+/* Varianti di border-radius */
+.bui-badge-radius-none {
+  @apply rounded-none;
+}
+
+.bui-badge-radius-small {
+  @apply rounded;
+}
+
+.bui-badge-radius-medium {
+  @apply rounded-md;
+}
+
+.bui-badge-radius-large {
+  @apply rounded-lg;
+}
+
+.bui-badge-radius-full {
+  @apply rounded-full;
+}
+
+/* Varianti stile */
+.bui-badge-outline {
+  @apply bg-transparent border;
+}
+
+.bui-badge-notification {
+  @apply absolute -top-1 -right-1 min-w-[1.25rem] h-5 py-0 px-1.5;
+  @apply flex items-center justify-center text-xs;
+  @apply rounded-full;
+}
+
+/* Varianti di colore - Standard */
+.bui-badge-default {
+  @apply bg-gray-800 text-white;
+}
+
+.bui-badge-white {
+  @apply bg-white text-gray-800 border border-gray-200;
+}
+
+.bui-badge-red {
+  @apply bg-red-500 text-white;
+}
+
+.bui-badge-rose {
+  @apply bg-rose-500 text-white;
+}
+
+.bui-badge-orange {
+  @apply bg-orange-500 text-white;
+}
+
+.bui-badge-green {
+  @apply bg-green-500 text-white;
+}
+
+.bui-badge-blue {
+  @apply bg-blue-500 text-white;
+}
+
+.bui-badge-yellow {
+  @apply bg-yellow-500 text-black;
+}
+
+.bui-badge-violet {
+  @apply bg-violet-500 text-white;
+}
+
+.bui-badge-gray {
+  @apply bg-gray-200 text-gray-800;
+}
+
+/* Varianti di colore - Outline */
+.bui-badge-outline.bui-badge-default {
+  @apply border-gray-800 text-gray-800;
+}
+
+.bui-badge-outline.bui-badge-red {
+  @apply border-red-500 text-red-600;
+}
+
+.bui-badge-outline.bui-badge-rose {
+  @apply border-rose-500 text-rose-600;
+}
+
+.bui-badge-outline.bui-badge-orange {
+  @apply border-orange-500 text-orange-600;
+}
+
+.bui-badge-outline.bui-badge-green {
+  @apply border-green-500 text-green-600;
+}
+
+.bui-badge-outline.bui-badge-blue {
+  @apply border-blue-500 text-blue-600;
+}
+
+.bui-badge-outline.bui-badge-yellow {
+  @apply border-yellow-500 text-yellow-600;
+}
+
+.bui-badge-outline.bui-badge-violet {
+  @apply border-violet-500 text-violet-600;
+}
+
+.bui-badge-outline.bui-badge-gray {
+  @apply border-gray-300 text-gray-600;
+} 

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

@@ -0,0 +1,107 @@
+/* ==============================
+ * Breadcrumb Component
+ * ============================== */
+
+/* Classi di base per il container e gli elementi */
+.bui-breadcrumb-container {
+  @apply flex items-center flex-wrap;
+}
+
+.bui-breadcrumb-list {
+  @apply flex flex-wrap items-center;
+}
+
+.bui-breadcrumb-item {
+  @apply flex items-center;
+}
+
+.bui-breadcrumb-separator {
+  @apply mx-2;
+}
+
+/* Dimensioni */
+.bui-breadcrumb-small {
+  @apply text-xs;
+}
+
+.bui-breadcrumb-medium {
+  @apply text-sm;
+}
+
+.bui-breadcrumb-large {
+  @apply text-base;
+}
+
+/* Temi colore - Container */
+.bui-breadcrumb-default-container {
+  @apply text-white;
+}
+
+.bui-breadcrumb-white-container {
+  @apply text-black;
+}
+
+.bui-breadcrumb-red-container {
+  @apply text-white;
+}
+
+.bui-breadcrumb-rose-container {
+  @apply text-white;
+}
+
+.bui-breadcrumb-orange-container {
+  @apply text-white;
+}
+
+.bui-breadcrumb-green-container {
+  @apply text-white;
+}
+
+.bui-breadcrumb-blue-container {
+  @apply text-white;
+}
+
+.bui-breadcrumb-yellow-container {
+  @apply text-black;
+}
+
+.bui-breadcrumb-violet-container {
+  @apply text-white;
+}
+
+/* Temi colore - Separatori */
+.bui-breadcrumb-default-separator {
+  @apply text-gray-500;
+}
+
+.bui-breadcrumb-white-separator {
+  @apply text-gray-400;
+}
+
+.bui-breadcrumb-red-separator {
+  @apply text-red-300;
+}
+
+.bui-breadcrumb-rose-separator {
+  @apply text-rose-300;
+}
+
+.bui-breadcrumb-orange-separator {
+  @apply text-orange-300;
+}
+
+.bui-breadcrumb-green-separator {
+  @apply text-green-300;
+}
+
+.bui-breadcrumb-blue-separator {
+  @apply text-blue-300;
+}
+
+.bui-breadcrumb-yellow-separator {
+  @apply text-yellow-600;
+}
+
+.bui-breadcrumb-violet-separator {
+  @apply text-violet-300;
+} 

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

@@ -0,0 +1,106 @@
+/* ==============================
+ * Button Component
+ * ============================== */
+
+/* Stile base */
+.bui-btn {
+  @apply py-2 px-4 font-medium rounded transition-colors;
+}
+
+/* Layout e posizionamento */
+.bui-btn-layout-default {
+  @apply inline-flex items-center justify-center font-medium;
+}
+
+.bui-btn-focus {
+  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
+}
+
+/* Varianti di colore */
+.bui-btn-default {
+  @apply bg-black text-white hover:bg-gray-900;
+}
+
+.bui-btn-white {
+  @apply bg-white text-black hover:bg-gray-100;
+}
+
+.bui-btn-red {
+  @apply bg-red-500 text-white hover:bg-red-600;
+}
+
+.bui-btn-rose {
+  @apply bg-rose-500 text-white hover:bg-rose-600;
+}
+
+.bui-btn-orange {
+  @apply bg-orange-500 text-white hover:bg-orange-600;
+}
+
+.bui-btn-green {
+  @apply bg-green-500 text-white hover:bg-green-600;
+}
+
+.bui-btn-blue {
+  @apply bg-blue-500 text-white hover:bg-blue-600;
+}
+
+.bui-btn-yellow {
+  @apply bg-yellow-500 text-black hover:bg-yellow-600;
+}
+
+.bui-btn-violet {
+  @apply bg-violet-500 text-white hover:bg-violet-600;
+}
+
+/* Varianti di dimensione */
+.bui-btn-size-small {
+  @apply py-1 px-2.5 text-xs;
+}
+
+.bui-btn-size-medium {
+  @apply py-2 px-4 text-sm;
+}
+
+.bui-btn-size-large {
+  @apply py-2.5 px-6 text-base;
+}
+
+/* Varianti di border-radius */
+.bui-btn-radius-none {
+  @apply rounded-none;
+}
+
+.bui-btn-radius-small {
+  @apply rounded-md;
+}
+
+.bui-btn-radius-medium {
+  @apply rounded-lg;
+}
+
+.bui-btn-radius-large {
+  @apply rounded-xl;
+}
+
+.bui-btn-radius-full {
+  @apply rounded-full;
+}
+
+/* Stati e modificatori */
+.bui-btn-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.bui-btn-full-width {
+  @apply w-full;
+}
+
+/* Posizionamento icone */
+.bui-btn-icon-left {
+  @apply mr-2;
+}
+
+.bui-btn-icon-right {
+  @apply ml-2;
+}