better_ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,180 @@
+/* ==============================
+ * Heading Component
+ * ============================== */
+
+/* Varianti di colore per le intestazioni */
+.bui-header-default-heading {
+  @apply text-gray-900;
+}
+
+.bui-header-default-subtitle {
+  @apply text-gray-600;
+}
+
+.bui-header-default-divider {
+  @apply border-gray-200;
+}
+
+.bui-header-white-heading {
+  @apply text-gray-100;
+}
+
+.bui-header-white-subtitle {
+  @apply text-gray-300;
+}
+
+.bui-header-white-divider {
+  @apply border-gray-200;
+}
+
+.bui-header-red-heading {
+  @apply text-red-700;
+}
+
+.bui-header-red-subtitle {
+  @apply text-red-500;
+}
+
+.bui-header-red-divider {
+  @apply border-red-300;
+}
+
+.bui-header-rose-heading {
+  @apply text-rose-700;
+}
+
+.bui-header-rose-subtitle {
+  @apply text-rose-500;
+}
+
+.bui-header-rose-divider {
+  @apply border-rose-300;
+}
+
+.bui-header-orange-heading {
+  @apply text-orange-700;
+}
+
+.bui-header-orange-subtitle {
+  @apply text-orange-500;
+}
+
+.bui-header-orange-divider {
+  @apply border-orange-300;
+}
+
+.bui-header-green-heading {
+  @apply text-green-700;
+}
+
+.bui-header-green-subtitle {
+  @apply text-green-500;
+}
+
+.bui-header-green-divider {
+  @apply border-green-300;
+}
+
+.bui-header-blue-heading {
+  @apply text-blue-700;
+}
+
+.bui-header-blue-subtitle {
+  @apply text-blue-500;
+}
+
+.bui-header-blue-divider {
+  @apply border-blue-300;
+}
+
+.bui-header-yellow-heading {
+  @apply text-yellow-700;
+}
+
+.bui-header-yellow-subtitle {
+  @apply text-yellow-500;
+}
+
+.bui-header-yellow-divider {
+  @apply border-yellow-300;
+}
+
+.bui-header-violet-heading {
+  @apply text-violet-700;
+}
+
+.bui-header-violet-subtitle {
+  @apply text-violet-500;
+}
+
+.bui-header-violet-divider {
+  @apply border-violet-300;
+}
+
+/* Classi per le dimensioni dell'intestazione */
+.bui-header-small-heading {
+  @apply text-xl;
+}
+
+.bui-header-small-subtitle {
+  @apply text-base;
+}
+
+.bui-header-medium-heading {
+  @apply text-2xl;
+}
+
+.bui-header-medium-subtitle {
+  @apply text-lg;
+}
+
+.bui-header-large-heading {
+  @apply text-3xl;
+}
+
+.bui-header-large-subtitle {
+  @apply text-xl;
+}
+
+/* Classi per l'allineamento dell'intestazione */
+.bui-header-left {
+  @apply text-left;
+}
+
+.bui-header-center {
+  @apply text-center;
+}
+
+.bui-header-right {
+  @apply text-right;
+}
+
+/* Stili comuni */
+.bui-header-heading-base {
+  @apply font-bold;
+}
+
+.bui-header-subtitle-base {
+  @apply mt-1;
+}
+
+.bui-header-divider-base {
+  @apply border-t mt-2;
+}
+
+.bui-header-container-base {
+  @apply mb-4;
+}
+
+.bui-header-container-with-divider {
+  @apply mb-4 pb-2;
+}
+
+/* Stili per le icone */
+.bui-header-icon-container {
+  @apply inline-flex items-center;
+}
+
+.bui-header-icon-wrapper {
+  @apply mr-2;
+} 

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

@@ -0,0 +1,90 @@
+/* ==============================
+ * Icon Component
+ * ============================== */
+
+/* Stili di base e presentazione */
+.bui-icon-base {
+  @apply inline-block;
+}
+
+/* Varianti di stile */
+.bui-icon-solid {
+  @apply fas;
+}
+
+.bui-icon-regular {
+  @apply far;
+}
+
+.bui-icon-light {
+  @apply fal;
+}
+
+.bui-icon-brands {
+  @apply fab;
+}
+
+.bui-icon-duotone {
+  @apply fad;
+}
+
+/* Dimensioni */
+.bui-icon-xsmall {
+  @apply fa-xs;
+}
+
+.bui-icon-small {
+  @apply fa-sm;
+}
+
+.bui-icon-medium {
+  /* Default di Font Awesome, non richiede classi aggiuntive */
+}
+
+.bui-icon-large {
+  @apply fa-lg;
+}
+
+.bui-icon-xlarge {
+  @apply fa-xl;
+}
+
+/* Rotazioni */
+.bui-icon-rotate-90 {
+  @apply fa-rotate-90;
+}
+
+.bui-icon-rotate-180 {
+  @apply fa-rotate-180;
+}
+
+.bui-icon-rotate-270 {
+  @apply fa-rotate-270;
+}
+
+/* Flip */
+.bui-icon-flip-horizontal {
+  @apply fa-flip-horizontal;
+}
+
+.bui-icon-flip-vertical {
+  @apply fa-flip-vertical;
+}
+
+/* Animazioni */
+.bui-icon-spin {
+  @apply fa-spin;
+}
+
+.bui-icon-pulse {
+  @apply fa-pulse;
+}
+
+/* Altre opzioni */
+.bui-icon-fw {
+  @apply fa-fw;
+}
+
+.bui-icon-border {
+  @apply fa-border;
+} 

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

@@ -0,0 +1,130 @@
+/* ==============================
+ * Link Component
+ * ============================== */
+
+/* Classe base per i link */
+.bui-link-base {
+  @apply flex items-center;
+}
+
+/* Contenitore icona */
+.bui-link-icon-wrapper {
+  @apply mr-1.5;
+}
+
+/* Temi di colore - Default */
+.bui-link-default-link {
+  @apply text-gray-300 hover:text-white;
+}
+
+.bui-link-default-active {
+  @apply text-white font-medium;
+}
+
+.bui-link-default-text {
+  @apply text-white;
+}
+
+/* Temi di colore - White */
+.bui-link-white-link {
+  @apply text-gray-600 hover:text-gray-900;
+}
+
+.bui-link-white-active {
+  @apply text-black font-medium;
+}
+
+.bui-link-white-text {
+  @apply text-black;
+}
+
+/* Temi di colore - Red */
+.bui-link-red-link {
+  @apply text-red-200 hover:text-white;
+}
+
+.bui-link-red-active {
+  @apply text-white font-medium;
+}
+
+.bui-link-red-text {
+  @apply text-white;
+}
+
+/* Temi di colore - Rose */
+.bui-link-rose-link {
+  @apply text-rose-200 hover:text-white;
+}
+
+.bui-link-rose-active {
+  @apply text-white font-medium;
+}
+
+.bui-link-rose-text {
+  @apply text-white;
+}
+
+/* Temi di colore - Orange */
+.bui-link-orange-link {
+  @apply text-orange-200 hover:text-white;
+}
+
+.bui-link-orange-active {
+  @apply text-white font-medium;
+}
+
+.bui-link-orange-text {
+  @apply text-white;
+}
+
+/* Temi di colore - Green */
+.bui-link-green-link {
+  @apply text-green-200 hover:text-white;
+}
+
+.bui-link-green-active {
+  @apply text-white font-medium;
+}
+
+.bui-link-green-text {
+  @apply text-white;
+}
+
+/* Temi di colore - Blue */
+.bui-link-blue-link {
+  @apply text-blue-200 hover:text-white;
+}
+
+.bui-link-blue-active {
+  @apply text-white font-medium;
+}
+
+.bui-link-blue-text {
+  @apply text-white;
+}
+
+/* Temi di colore - Yellow */
+.bui-link-yellow-link {
+  @apply text-yellow-700 hover:text-black;
+}
+
+.bui-link-yellow-active {
+  @apply text-black font-medium;
+}
+
+.bui-link-yellow-text {
+  @apply text-black;
+}
+
+/* Temi di colore - Violet */
+.bui-link-violet-link {
+  @apply text-violet-200 hover:text-white;
+}
+
+.bui-link-violet-active {
+  @apply text-white font-medium;
+}
+
+.bui-link-violet-text {
+  @apply text-white;
+} 

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

@@ -0,0 +1,144 @@
+/* ==============================
+ * Panel Component
+ * ============================== */
+
+/* Struttura di base */
+.bui-panel-base {
+  @apply border shadow-sm;
+}
+
+/* Intestazione */
+.bui-panel-header {
+  @apply px-4 py-3 border-b;
+}
+
+/* Corpo */
+.bui-panel-body {
+  @apply p-4;
+}
+
+.bui-panel-body-content {
+  @apply overflow-x-auto break-words;
+}
+
+/* Piè di pagina */
+.bui-panel-footer {
+  @apply px-4 py-3 border-t;
+}
+
+/* Titolo */
+.bui-panel-title {
+  @apply text-lg font-medium;
+}
+
+/* Opzioni di padding */
+.bui-panel-padding-none {
+  @apply p-0;
+}
+
+.bui-panel-padding-small {
+  @apply p-2;
+}
+
+.bui-panel-padding-medium {
+  @apply p-4;
+}
+
+.bui-panel-padding-large {
+  @apply p-6;
+}
+
+/* Opzioni di border-radius */
+.bui-panel-radius-none {
+  @apply rounded-none;
+}
+
+.bui-panel-radius-small {
+  @apply rounded-md;
+}
+
+.bui-panel-radius-medium {
+  @apply rounded-lg;
+}
+
+.bui-panel-radius-large {
+  @apply rounded-xl;
+}
+
+.bui-panel-radius-full {
+  @apply rounded-full;
+}
+
+/* Temi di colore per header */
+.bui-panel-default-header {
+  @apply bg-black text-white;
+}
+
+.bui-panel-white-header {
+  @apply bg-white text-black;
+}
+
+.bui-panel-red-header {
+  @apply bg-red-500 text-white;
+}
+
+.bui-panel-rose-header {
+  @apply bg-rose-500 text-white;
+}
+
+.bui-panel-orange-header {
+  @apply bg-orange-500 text-white;
+}
+
+.bui-panel-green-header {
+  @apply bg-green-500 text-white;
+}
+
+.bui-panel-blue-header {
+  @apply bg-blue-500 text-white;
+}
+
+.bui-panel-yellow-header {
+  @apply bg-yellow-500 text-black;
+}
+
+.bui-panel-violet-header {
+  @apply bg-violet-500 text-white;
+}
+
+/* Temi di colore per footer */
+.bui-panel-default-footer {
+  @apply bg-black text-white;
+}
+
+.bui-panel-white-footer {
+  @apply bg-white text-black;
+}
+
+.bui-panel-red-footer {
+  @apply bg-red-500 text-white;
+}
+
+.bui-panel-rose-footer {
+  @apply bg-rose-500 text-white;
+}
+
+.bui-panel-orange-footer {
+  @apply bg-orange-500 text-white;
+}
+
+.bui-panel-green-footer {
+  @apply bg-green-500 text-white;
+}
+
+.bui-panel-blue-footer {
+  @apply bg-blue-500 text-white;
+}
+
+.bui-panel-yellow-footer {
+  @apply bg-yellow-500 text-black;
+}
+
+.bui-panel-violet-footer {
+  @apply bg-violet-500 text-white;
+} 

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