better_ui 0.5.0 → 0.5.1

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

@@ -1,105 +1,156 @@
-/* ==============================
- * Table Component
- * ============================== */
-
-/* Contenitore e base */
-.bui-table-container {
-  @apply overflow-hidden;
-}
-
-.bui-table-base {
-  @apply w-full;
-}
-
-.bui-table-bordered {
-  @apply border-collapse;
-}
-
-/* Bordi arrotondati */
-.bui-table-radius-none { @apply rounded-none; }
-.bui-table-radius-small { @apply rounded-md; }
-.bui-table-radius-medium { @apply rounded-lg; }
-.bui-table-radius-large { @apply rounded-xl; }
-.bui-table-radius-full { @apply rounded-3xl; }
-
-/* Celle e righe */
-.bui-table-cell { 
-  @apply px-4 py-3; 
-}
-
-.bui-table-cell-compact { 
-  @apply px-2 py-1 text-sm; 
-}
-
-.bui-table-cell-bordered {
-  @apply border;
-}
-
-/* Stili per le righe */
-.bui-table-row-hover tr:hover td { 
-  @apply bg-opacity-10 bg-gray-500; 
-}
-
-.bui-table-row-striped tr:nth-child(odd) td { 
-  @apply bg-gray-50; 
-}
-
-.bui-table-row-alternate {
-  @apply bg-gray-50;
-}
-
-/* Caption */
-.bui-table-caption { 
-  @apply p-3 font-medium; 
-}
-
-.bui-table-caption-bordered {
-  @apply border-b;
-}
-
-/* Header */
-.bui-table-header th { 
-  @apply font-semibold; 
-}
-
-/* Footer */
-.bui-table-footer td { 
-  @apply font-semibold; 
-}
-
-.bui-table-footer-cell {
-  @apply bg-opacity-90;
-}
-
-/* Varianti bordi */
-.bui-table-border-default { @apply border-gray-900; }
-.bui-table-border-white { @apply border-gray-200; }
-.bui-table-border-red { @apply border-red-600; }
-.bui-table-border-rose { @apply border-rose-600; }
-.bui-table-border-orange { @apply border-orange-600; }
-.bui-table-border-green { @apply border-green-600; }
-.bui-table-border-blue { @apply border-blue-600; }
-.bui-table-border-yellow { @apply border-yellow-600; }
-.bui-table-border-violet { @apply border-violet-600; }
-
-/* Varianti background */
-.bui-table-bg-default { @apply bg-black; }
-.bui-table-bg-white { @apply bg-white; }
-.bui-table-bg-red { @apply bg-red-500; }
-.bui-table-bg-rose { @apply bg-rose-500; }
-.bui-table-bg-orange { @apply bg-orange-500; }
-.bui-table-bg-green { @apply bg-green-500; }
-.bui-table-bg-blue { @apply bg-blue-500; }
-.bui-table-bg-yellow { @apply bg-yellow-500; }
-.bui-table-bg-violet { @apply bg-violet-500; }
-
-/* Varianti testo */
-.bui-table-text-default { @apply text-white; }
-.bui-table-text-white { @apply text-black; }
-.bui-table-text-red { @apply text-white; }
-.bui-table-text-rose { @apply text-white; }
-.bui-table-text-orange { @apply text-white; }
-.bui-table-text-green { @apply text-white; }
-.bui-table-text-blue { @apply text-white; }
-.bui-table-text-yellow { @apply text-black; }
-.bui-table-text-violet { @apply text-white; } 
+@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/_variables.scss

@@ -1,33 +0,0 @@
-/* ==============================
- * Variables
- * ============================== */
-
-/* Colori principali - usa i colori di Tailwind */
-$bui-primary: theme('colors.blue.500') !default;
-$bui-primary-hover: theme('colors.blue.600') !default;
-$bui-secondary: theme('colors.gray.500') !default;
-$bui-secondary-hover: theme('colors.gray.600') !default;
-$bui-success: theme('colors.emerald.500') !default;
-$bui-warning: theme('colors.amber.500') !default;
-$bui-danger: theme('colors.red.500') !default;
-$bui-info: theme('colors.blue.500') !default;
-
-/* Spaziature - usa gli spacing di Tailwind */
-$bui-spacing-xs: theme('spacing.1') !default;
-$bui-spacing-sm: theme('spacing.2') !default;
-$bui-spacing-md: theme('spacing.4') !default;
-$bui-spacing-lg: theme('spacing.6') !default;
-$bui-spacing-xl: theme('spacing.8') !default;
-
-/* Tipografia - usa i font di Tailwind */
-$bui-font-family: theme('fontFamily.sans') !default;
-$bui-font-size-sm: theme('fontSize.sm[0]') !default;
-$bui-font-size-base: theme('fontSize.base[0]') !default;
-$bui-font-size-lg: theme('fontSize.lg[0]') !default;
-$bui-font-size-xl: theme('fontSize.xl[0]') !default;
-
-/* Border radius - usa i radius di Tailwind */
-$bui-radius-sm: theme('borderRadius.sm') !default;
-$bui-radius-md: theme('borderRadius.md') !default;
-$bui-radius-lg: theme('borderRadius.lg') !default;
-$bui-radius-full: theme('borderRadius.full') !default; 

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

@@ -1,66 +1,35 @@
 /*
  * <%= options[:prefix] %>_better_ui_components.scss
- * Foglio di stile SCSS per la personalizzazione dei componenti di BetterUi
+ * ========================================================================
+ * File principale che utilizza il sistema moderno di moduli Sass
  * Generato il: <%= Time.now.strftime('%d/%m/%Y %H:%M') %>
  */
 
-/**
- * INDICE:
- * 1. Variabili
- * 2. Componenti generali
- * 3. Componenti applicativi
- * 4. Personalizzazioni
+/* 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;
 
-/*==================================
-  IMPORTAZIONE COMPONENTI E VARIABILI
-====================================*/
-/* Importa le variabili */
-@import "components/variables";
+/* 
+ * 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 {
-  /*==================================
-    COMPONENTI GENERALI
-  ====================================*/
-  
-  /* Importa il componente Bottone */
-  @import "components/button";
-  
-  /* Importa il componente Heading */
-  @import "components/heading";
-  
-  /* Importa il componente Breadcrumb */
-  @import "components/breadcrumb";
-  
-  /* Importa il componente Link */
-  @import "components/link";
-  
-  /* Importa il componente Panel */
-  @import "components/panel";
-  
-  /* Importa il componente Icon */
-  @import "components/icon";
-  
-  /* Importa il componente Table */
-  @import "components/table";
-  
-  /* Importa il componente Spinner */
-  @import "components/spinner";
-  
-  /* Importa il componente Badge */
-  @import "components/badge";
-  
-  /* Importa il componente Avatar */
-  @import "components/avatar";
-  
-  /*==================================
-    COMPONENTI APPLICATIVI
-  ====================================*/
-  /* Importa il componente Card */
-  @import "components/card";
-  
-  /*==================================
-    PERSONALIZZAZIONI
-  ====================================*/
-  /* Qui è possibile aggiungere personalizzazioni specifiche */
+  /* 
+   * 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