better_ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,132 @@
+/* ==============================
+ * Spinner Component
+ * ============================== */
+
+/* Stile base */
+.bui-spinner {
+  @apply inline-flex flex-col items-center justify-center;
+}
+
+/* Animazione dello spinner */
+.bui-spinner-animation {
+  @apply inline-block rounded-full animate-spin;
+  border-top-color: transparent;
+}
+
+/* Base per il contenuto */
+.bui-spinner-label {
+  @apply mt-2 text-center;
+}
+
+.bui-spinner-content {
+  @apply mt-4;
+}
+
+/* Modalità fullscreen */
+.bui-spinner-fullscreen {
+  @apply fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50;
+}
+
+/* Varianti di dimensione */
+.bui-spinner-small .bui-spinner-animation {
+  @apply w-5 h-5 border-2;
+}
+
+.bui-spinner-medium .bui-spinner-animation {
+  @apply w-8 h-8 border-3;
+}
+
+.bui-spinner-large .bui-spinner-animation {
+  @apply w-12 h-12 border-4;
+}
+
+/* Varianti di colore */
+.bui-spinner-default {
+  .bui-spinner-animation {
+    @apply border-gray-200 border-t-gray-800;
+  }
+
+  .bui-spinner-label {
+    @apply text-gray-800;
+  }
+}
+
+.bui-spinner-white {
+  .bui-spinner-animation {
+    @apply border-gray-100 border-t-white;
+  }
+
+  .bui-spinner-label {
+    @apply text-white;
+  }
+}
+
+.bui-spinner-red {
+  .bui-spinner-animation {
+    @apply border-red-100 border-t-red-600;
+  }
+
+  .bui-spinner-label {
+    @apply text-red-600;
+  }
+}
+
+.bui-spinner-rose {
+  .bui-spinner-animation {
+    @apply border-rose-100 border-t-rose-600;
+  }
+
+  .bui-spinner-label {
+    @apply text-rose-600;
+  }
+}
+
+.bui-spinner-orange {
+  .bui-spinner-animation {
+    @apply border-orange-100 border-t-orange-500;
+  }
+
+  .bui-spinner-label {
+    @apply text-orange-500;
+  }
+}
+
+.bui-spinner-green {
+  .bui-spinner-animation {
+    @apply border-green-100 border-t-green-600;
+  }
+
+  .bui-spinner-label {
+    @apply text-green-600;
+  }
+}
+
+.bui-spinner-blue {
+  .bui-spinner-animation {
+    @apply border-blue-100 border-t-blue-600;
+  }
+
+  .bui-spinner-label {
+    @apply text-blue-600;
+  }
+}
+
+.bui-spinner-yellow {
+  .bui-spinner-animation {
+    @apply border-yellow-100 border-t-yellow-500;
+  }
+
+  .bui-spinner-label {
+    @apply text-yellow-500;
+  }
+}
+
+.bui-spinner-violet {
+  .bui-spinner-animation {
+    @apply border-violet-100 border-t-violet-600;
+  }
+
+  .bui-spinner-label {
+    @apply text-violet-600;
+  }
+} 

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

@@ -0,0 +1,105 @@
+/* ==============================
+ * 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; } 

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

@@ -0,0 +1,33 @@
+/* ==============================
+ * 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

@@ -0,0 +1,66 @@
+/*
+ * <%= options[:prefix] %>_better_ui_components.scss
+ * Foglio di stile SCSS per la personalizzazione dei componenti di BetterUi
+ * Generato il: <%= Time.now.strftime('%d/%m/%Y %H:%M') %>
+ */
+
+/**
+ * INDICE:
+ * 1. Variabili
+ * 2. Componenti generali
+ * 3. Componenti applicativi
+ * 4. Personalizzazioni
+ */
+
+/*==================================
+  IMPORTAZIONE COMPONENTI E VARIABILI
+====================================*/
+/* Importa le variabili */
+@import "components/variables";
+
+@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 */
+}