better_ui 0.4.0 → 0.5.1

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

@@ -0,0 +1,129 @@
+@layer components {
+  // Classe base per lo spinner (Block)
+  .bui-spinner {
+    @apply inline-flex flex-col items-center justify-center;
+    
+    // Elements
+    &__animation {
+      @apply inline-block rounded-full animate-spin;
+      border-top-color: transparent;
+    }
+    
+    &__label {
+      @apply mt-2 text-center;
+    }
+    
+    &__content {
+      @apply mt-4;
+    }
+    
+    // Modifiers (dimensioni)
+    &--small &__animation {
+      @apply w-5 h-5 border-2;
+    }
+    
+    &--medium &__animation {
+      @apply w-8 h-8 border-3;
+    }
+    
+    &--large &__animation {
+      @apply w-12 h-12 border-4;
+    }
+    
+    // Modifiers (temi colore)
+    &--default {
+      .bui-spinner__animation {
+        @apply border-gray-200 border-t-gray-800;
+      }
+      
+      .bui-spinner__label {
+        @apply text-gray-800;
+      }
+    }
+    
+    &--white {
+      .bui-spinner__animation {
+        @apply border-gray-100 border-t-white;
+      }
+      
+      .bui-spinner__label {
+        @apply text-white;
+      }
+    }
+    
+    &--red {
+      .bui-spinner__animation {
+        @apply border-red-100 border-t-red-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-red-600;
+      }
+    }
+    
+    &--rose {
+      .bui-spinner__animation {
+        @apply border-rose-100 border-t-rose-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-rose-600;
+      }
+    }
+    
+    &--orange {
+      .bui-spinner__animation {
+        @apply border-orange-100 border-t-orange-500;
+      }
+      
+      .bui-spinner__label {
+        @apply text-orange-500;
+      }
+    }
+    
+    &--green {
+      .bui-spinner__animation {
+        @apply border-green-100 border-t-green-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-green-600;
+      }
+    }
+    
+    &--blue {
+      .bui-spinner__animation {
+        @apply border-blue-100 border-t-blue-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-blue-600;
+      }
+    }
+    
+    &--yellow {
+      .bui-spinner__animation {
+        @apply border-yellow-100 border-t-yellow-500;
+      }
+      
+      .bui-spinner__label {
+        @apply text-yellow-500;
+      }
+    }
+    
+    &--violet {
+      .bui-spinner__animation {
+        @apply border-violet-100 border-t-violet-600;
+      }
+      
+      .bui-spinner__label {
+        @apply text-violet-600;
+      }
+    }
+    
+    // Modifiers (stati)
+    &--fullscreen {
+      @apply fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50;
+    }
+  }
+} 

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

@@ -0,0 +1,156 @@
+@layer components {
+  // Classe base per la tabella (Block)
+  .bui-table {
+    @apply w-full border-collapse;
+    
+    // Elements
+    &__container {
+      @apply overflow-hidden border shadow-sm;
+    }
+    
+    &__caption {
+      @apply p-4 font-medium text-left;
+    }
+    
+    &__header {
+      @apply bg-gray-50;
+    }
+    
+    &__footer {
+      @apply bg-gray-50;
+    }
+    
+    &__body {
+      // Styling base per il corpo della tabella
+    }
+    
+    &__cell {
+      @apply px-4 py-3 text-sm text-gray-700;
+      
+      &--header {
+        @apply bg-gray-50 text-left text-xs uppercase tracking-wider text-gray-500 font-medium;
+      }
+      
+      &--footer {
+        @apply font-medium;
+      }
+    }
+    
+    &__row {
+      @apply border-b border-gray-200;
+    }
+    
+    // Modifiers (varianti)
+    &--default {
+      @apply bg-white text-gray-900 border-gray-200;
+    }
+    
+    &--red {
+      @apply bg-red-50 text-red-900 border-red-200;
+      
+      .bui-table__header {
+        @apply bg-red-100;
+      }
+      
+      .bui-table__footer {
+        @apply bg-red-100;
+      }
+      
+      .bui-table__cell--header {
+        @apply bg-red-100 text-red-800;
+      }
+    }
+    
+    &--blue {
+      @apply bg-blue-50 text-blue-900 border-blue-200;
+      
+      .bui-table__header {
+        @apply bg-blue-100;
+      }
+      
+      .bui-table__footer {
+        @apply bg-blue-100;
+      }
+      
+      .bui-table__cell--header {
+        @apply bg-blue-100 text-blue-800;
+      }
+    }
+    
+    &--green {
+      @apply bg-green-50 text-green-900 border-green-200;
+      
+      .bui-table__header {
+        @apply bg-green-100;
+      }
+      
+      .bui-table__footer {
+        @apply bg-green-100;
+      }
+      
+      .bui-table__cell--header {
+        @apply bg-green-100 text-green-800;
+      }
+    }
+    
+    // Stati tabella
+    &--striped {
+      .bui-table__row:nth-child(even) {
+        @apply bg-gray-50;
+      }
+    }
+    
+    &--hoverable {
+      .bui-table__row:hover {
+        @apply bg-gray-100;
+      }
+    }
+    
+    &--bordered {
+      @apply border;
+      
+      .bui-table__cell {
+        @apply border;
+      }
+    }
+    
+    &--compact {
+      .bui-table__cell {
+        @apply px-2 py-1 text-xs;
+      }
+    }
+    
+    // Modifiers (border radius)
+    &--radius-none {
+      @apply rounded-none;
+      
+      .bui-table__container {
+        @apply rounded-none;
+      }
+    }
+    
+    &--radius-small {
+      @apply rounded-md;
+      
+      .bui-table__container {
+        @apply rounded-md overflow-hidden;
+      }
+    }
+    
+    &--radius-medium {
+      @apply rounded-lg;
+      
+      .bui-table__container {
+        @apply rounded-lg overflow-hidden;
+      }
+    }
+    
+    &--radius-large {
+      @apply rounded-xl;
+      
+      .bui-table__container {
+        @apply rounded-xl overflow-hidden;
+      }
+    }
+  }
+} 

data/lib/generators/better_ui/templates/components_stylesheet.scss

@@ -0,0 +1,35 @@
+/*
+ * <%= options[:prefix] %>_better_ui_components.scss
+ * ========================================================================
+ * File principale che utilizza il sistema moderno di moduli Sass
+ * Generato il: <%= Time.now.strftime('%d/%m/%Y %H:%M') %>
+ */
+
+/* Base Tailwind - importazioni fondamentali */
+@use "tailwindcss/base";
+@use "tailwindcss/components";
+@use "tailwindcss/utilities";
+
+/* 
+ * Importa i componenti originali della gemma attraverso un namespace
+ * per evitare conflitti
+ */
+@use 'better_ui/components' as bui;
+
+/* 
+ * Importa le personalizzazioni con namespace per organizzazione
+ * e chiarezza nel codice
+ */
+@use 'components/variables_overrides' as vars;
+@use 'components/index' as overrides;
+
+/* 
+ * Aggiungi stili personalizzati dell'applicazione
+ * all'interno del layer components per mantenerli organizzati
+ */
+@layer components {
+  /* 
+   * Qui puoi inserire stili personalizzati aggiuntivi
+   * che non rientrano nei file di override
+   */
+}

data/lib/generators/better_ui/templates/index.scss

@@ -0,0 +1,18 @@
+/* 
+ * components/_index.scss
+ * File indice che raccoglie e riespone tutti i moduli di override
+ * Utilizza @forward per mantenere le API originali accessibili
+ */
+
+@forward 'variables_overrides';
+@forward 'button_overrides';
+@forward 'heading_overrides';
+@forward 'breadcrumb_overrides';
+@forward 'link_overrides';
+@forward 'panel_overrides';
+@forward 'icon_overrides';
+@forward 'table_overrides';
+@forward 'badge_overrides';
+@forward 'spinner_overrides';
+@forward 'avatar_overrides';
+@forward 'card_overrides'; 

data/lib/generators/better_ui/templates/initializer.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# Configurazione di Better UI
+# Questo file contiene le impostazioni predefinite per i componenti di Better UI.
+# Puoi modificare queste impostazioni in base alle tue necessità.
+
+BetterUi.configure do |config|
+  # Configurazione predefinita per i bottoni
+  # Queste impostazioni verranno applicate a tutti i bottoni a meno che non vengano sovrascritte
+  config.button_defaults = {
+    type: :default,     # Tipo di bottone (:default, :white, :red, :green, ecc.)
+    size: :medium,      # Dimensione del bottone (:small, :medium, :large)
+    rounded: :small,    # Arrotondamento (:none, :small, :medium, :large, :full)
+    full_width: false,  # Se il bottone deve occupare tutta la larghezza disponibile
+    disabled: false     # Se il bottone è disabilitato di default
+  }
+  
+  # Configurazione predefinita per gli alert
+  config.alert_defaults = {
+    theme: :default,    # Tema dell'alert (:default, :success, :warning, :danger, :info)
+    dismissible: true,  # Se l'alert può essere chiuso dall'utente
+    icon: true          # Se mostrare l'icona associata al tema
+  }
+  
+  # Configurazione predefinita per le card
+  config.card_defaults = {
+    theme: :default,    # Tema della card (:default, :outline, :elevated)
+    padding: :medium,   # Padding interno (:small, :medium, :large)
+    rounded: :medium,   # Arrotondamento (:none, :small, :medium, :large)
+    shadow: :medium     # Ombreggiatura (:none, :small, :medium, :large)
+  }
+  
+  # Configurazione predefinita per i tab
+  config.tabs_defaults = {
+    theme: :default,    # Tema dei tab (:default, :pills, :underline)
+    size: :medium,      # Dimensione (:small, :medium, :large)
+    alignment: :left    # Allineamento (:left, :center, :right, :justified)
+  }
+  
+  # Puoi aggiungere altre configurazioni predefinite per i tuoi componenti qui
+end