better_ui 0.4.0 → 0.5.0

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;
+} 

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

@@ -0,0 +1,69 @@
+/* ==============================
+ * Card Component
+ * ============================== */
+
+/* Struttura di base */
+.bui-card-base {
+  @apply bg-white border shadow-sm overflow-hidden;
+}
+
+/* Contenuto */
+.bui-card-content {
+  @apply p-4;
+}
+
+/* Intestazione */
+.bui-card-header {
+  @apply p-4 border-b;
+}
+
+/* Piè di pagina */
+.bui-card-footer {
+  @apply p-4 border-t;
+}
+
+/* Corpo */
+.bui-card-body {
+  @apply flex flex-col;
+}
+
+/* Titolo */
+.bui-card-title {
+  @apply text-lg font-medium;
+}
+
+/* Valore */
+.bui-card-value {
+  @apply text-2xl font-bold mt-2;
+}
+
+/* Valore di riferimento */
+.bui-card-value-from {
+  @apply text-sm text-gray-500 mt-1;
+}
+
+/* Trend */
+.bui-card-trend {
+  @apply mt-2 inline-flex items-center px-2 py-1 text-xs font-medium rounded;
+}
+
+/* Opzioni di border-radius */
+.bui-card-radius-none {
+  @apply rounded-none;
+}
+    
+.bui-card-radius-small {
+  @apply rounded-md;
+}
+    
+.bui-card-radius-medium {
+  @apply rounded-lg;
+}
+    
+.bui-card-radius-large {
+  @apply rounded-xl;
+}
+    
+.bui-card-radius-full {
+  @apply rounded-full;
+}