better_ui 0.3.0 → 0.5.1

data/app/assets/stylesheets/better_ui/components/_icon.scss

@@ -0,0 +1,134 @@
+@layer components {
+  // Classe base per l'icona (Block)
+  .bui-icon {
+    @apply inline-flex items-center justify-center;
+    
+    // Modifiers (dimensioni)
+    &--xs {
+      @apply h-3 w-3;
+      
+      svg {
+        @apply h-3 w-3;
+      }
+    }
+    
+    &--sm {
+      @apply h-4 w-4;
+      
+      svg {
+        @apply h-4 w-4;
+      }
+    }
+    
+    &--md {
+      @apply h-5 w-5;
+      
+      svg {
+        @apply h-5 w-5;
+      }
+    }
+    
+    &--lg {
+      @apply h-6 w-6;
+      
+      svg {
+        @apply h-6 w-6;
+      }
+    }
+    
+    &--xl {
+      @apply h-8 w-8;
+      
+      svg {
+        @apply h-8 w-8;
+      }
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply text-gray-500;
+    }
+    
+    &--white {
+      @apply text-white;
+    }
+    
+    &--red {
+      @apply text-red-500;
+    }
+    
+    &--rose {
+      @apply text-rose-500;
+    }
+    
+    &--orange {
+      @apply text-orange-500;
+    }
+    
+    &--green {
+      @apply text-green-500;
+    }
+    
+    &--blue {
+      @apply text-blue-500;
+    }
+    
+    &--yellow {
+      @apply text-yellow-500;
+    }
+    
+    &--violet {
+      @apply text-violet-500;
+    }
+    
+    // Modifiers (varianti stile)
+    &--solid {
+      @apply rounded-full p-2 bg-gray-100;
+    }
+    
+    &--solid-primary {
+      @apply rounded-full p-2 text-white;
+      
+      &.bui-icon--red {
+        @apply bg-red-500;
+      }
+      
+      &.bui-icon--rose {
+        @apply bg-rose-500;
+      }
+      
+      &.bui-icon--orange {
+        @apply bg-orange-500;
+      }
+      
+      &.bui-icon--green {
+        @apply bg-green-500;
+      }
+      
+      &.bui-icon--blue {
+        @apply bg-blue-500;
+      }
+      
+      &.bui-icon--yellow {
+        @apply bg-yellow-500;
+      }
+      
+      &.bui-icon--violet {
+        @apply bg-violet-500;
+      }
+    }
+    
+    // Stati
+    &--spin {
+      @apply animate-spin;
+    }
+    
+    &--pulse {
+      @apply animate-pulse;
+    }
+    
+    &--fixed-width {
+      @apply w-5;
+    }
+  }
+} 

data/app/assets/stylesheets/better_ui/components/_index.scss

@@ -0,0 +1,17 @@
+// Index file che raggruppa e riespone tutti i componenti
+// Nota: È possibile utilizzare le variabili con @use "better_ui/components/variables" as vars;
+
+// Componenti generali
+@forward "button";
+@forward "panel";
+@forward "table";
+@forward "badge";
+@forward "avatar";
+@forward "icon";
+@forward "link";
+@forward "heading";
+@forward "breadcrumb";
+@forward "spinner";
+
+// Componenti applicativi
+@forward "card"; 

data/app/assets/stylesheets/better_ui/components/_link.scss

@@ -0,0 +1,100 @@
+@layer components {
+  // Classe base per il link (Block)
+  .bui-link {
+    @apply inline-flex items-center transition-colors duration-200;
+    
+    // Elements
+    &__icon {
+      @apply flex-shrink-0;
+      
+      &--left {
+        @apply mr-1.5;
+      }
+      
+      &--right {
+        @apply ml-1.5;
+      }
+    }
+    
+    &__text {
+      @apply inline;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply text-gray-700 hover:text-gray-900;
+    }
+    
+    &--white {
+      @apply text-white hover:text-gray-100;
+    }
+    
+    &--red {
+      @apply text-red-600 hover:text-red-700;
+    }
+    
+    &--rose {
+      @apply text-rose-600 hover:text-rose-700;
+    }
+    
+    &--orange {
+      @apply text-orange-600 hover:text-orange-700;
+    }
+    
+    &--green {
+      @apply text-green-600 hover:text-green-700;
+    }
+    
+    &--blue {
+      @apply text-blue-600 hover:text-blue-700;
+    }
+    
+    &--yellow {
+      @apply text-yellow-600 hover:text-yellow-700;
+    }
+    
+    &--violet {
+      @apply text-violet-600 hover:text-violet-700;
+    }
+    
+    // Modifiers (varianti stile)
+    &--underlined {
+      @apply underline decoration-1 underline-offset-2;
+    }
+    
+    &--hover-underlined {
+      @apply no-underline hover:underline decoration-1 underline-offset-2;
+    }
+    
+    &--bold {
+      @apply font-semibold;
+    }
+    
+    // Modifiers (dimensioni)
+    &--sm {
+      @apply text-sm;
+    }
+    
+    &--base {
+      @apply text-base;
+    }
+    
+    &--lg {
+      @apply text-lg;
+    }
+    
+    // Stati
+    &--active {
+      @apply font-medium;
+    }
+    
+    &--disabled {
+      @apply pointer-events-none opacity-50;
+    }
+    
+    // Stili specifici per bottoni che sembrano link
+    &--button {
+      @apply appearance-none bg-transparent border-none p-0 cursor-pointer;
+    }
+  }
+} 

data/app/assets/stylesheets/better_ui/components/_panel.scss

@@ -0,0 +1,104 @@
+@layer components {
+  // Classe base per il pannello (Block)
+  .bui-panel {
+    @apply border shadow-sm;
+    
+    // Elements
+    &__header {
+      @apply px-4 py-3 border-b;
+    }
+    
+    &__body {
+      @apply p-4;
+    }
+    
+    &__footer {
+      @apply px-4 py-3 border-t;
+    }
+    
+    &__title {
+      @apply text-lg font-medium;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply bg-black text-white border-gray-900;
+      
+      .bui-panel__header {
+        @apply bg-gray-900;
+      }
+      
+      .bui-panel__footer {
+        @apply bg-gray-900;
+      }
+    }
+    
+    &--white {
+      @apply bg-white text-black border-gray-200;
+      
+      .bui-panel__header {
+        @apply bg-gray-50;
+      }
+      
+      .bui-panel__footer {
+        @apply bg-gray-50;
+      }
+    }
+    
+    &--red {
+      @apply bg-red-50 text-red-900 border-red-200;
+      
+      .bui-panel__header {
+        @apply bg-red-100 text-red-800;
+      }
+      
+      .bui-panel__footer {
+        @apply bg-red-100;
+      }
+    }
+    
+    // ... altre varianti di colore ...
+    
+    // Modifiers (varianti di padding)
+    &--padding-none {
+      .bui-panel__body {
+        @apply p-0;
+      }
+    }
+    
+    &--padding-small {
+      .bui-panel__body {
+        @apply p-2;
+      }
+    }
+    
+    &--padding-medium {
+      .bui-panel__body {
+        @apply p-4;
+      }
+    }
+    
+    &--padding-large {
+      .bui-panel__body {
+        @apply p-6;
+      }
+    }
+    
+    // Modifiers (border radius)
+    &--radius-none {
+      @apply rounded-none;
+    }
+    
+    &--radius-small {
+      @apply rounded-md;
+    }
+    
+    &--radius-medium {
+      @apply rounded-lg;
+    }
+    
+    &--radius-large {
+      @apply rounded-xl;
+    }
+  }
+} 

data/app/assets/stylesheets/better_ui/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/app/assets/stylesheets/better_ui/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/app/assets/stylesheets/better_ui/components/_variables.scss

@@ -0,0 +1 @@
+

data/app/assets/stylesheets/better_ui.scss

@@ -0,0 +1,4 @@
+// File principale che importa tutti i moduli
+@use "better_ui/base";
+@use "better_ui/components";
+@use "better_ui/utilities"; 

data/app/components/better_ui/application/alert_component.html.erb

@@ -0,0 +1,27 @@
+<div role="alert" class="<%= container_classes %>" <%= @data&.map { |k, v| "data-#{k}=\"#{v}\"" }&.join(' ')&.html_safe %>>
+  <% if effective_icon.present? %>
+    <div class="<%= icon_classes %>">
+      <%= render BetterUi::General::IconComponent.new(name: effective_icon) %>
+    </div>
+  <% end %>
+  
+  <div class="<%= content_classes %>">
+    <% if @title.present? %>
+      <div class="<%= title_classes %>"><%= @title %></div>
+    <% end %>
+    
+    <% if @message.present? %>
+      <div class="<%= message_classes %>"><%= @message %></div>
+    <% end %>
+    
+    <% if content.present? %>
+      <div class="<%= message_classes %>"><%= content %></div>
+    <% end %>
+  </div>
+  
+  <% if @dismissible %>
+    <button type="button" class="<%= close_button_classes %>" data-dismiss-target="[role='alert']" aria-label="Chiudi">
+      <%= render BetterUi::General::IconComponent.new(name: "xmark") %>
+    </button>
+  <% end %>
+</div>