better_ui 0.1.0 → 0.4.0

data/app/assets/javascripts/better_ui/index.js

@@ -0,0 +1,159 @@
+// Entry point per tutti i componenti JavaScript di Better UI
+import { Application } from "@hotwired/stimulus"
+import ToastController from "./controllers/toast_controller"
+import NavbarController from "./controllers/navbar_controller"
+import SidebarController from "./controllers/sidebar_controller"
+
+// Configura Stimulus
+const application = Application.start()
+
+// Registra i controller
+application.register("toast", ToastController)
+application.register("navbar", NavbarController)
+application.register("sidebar", SidebarController)
+
+// Esporta i controller e altri componenti
+export { ToastController, NavbarController, SidebarController }
+export { default as ToastManager } from "./toast_manager"
+
+// Funzione di utilità per creare e mostrare un toast programmaticamente
+export function showToast(options = {}) {
+  const {
+    title = null,
+    message = "Notifica",
+    variant = "info",
+    position = "top-right",
+    duration = 5000,
+    dismissible = true,
+    autoHide = true,
+    icon = null
+  } = options;
+
+  // Crea l'elemento toast
+  const toast = document.createElement("div");
+  toast.setAttribute("role", "status");
+  toast.setAttribute("aria-live", "polite");
+  toast.classList.add(
+    "fixed", "z-50", "rounded-lg", "p-4", "border", "shadow-lg",
+    "transform", "transition-transform", "duration-300",
+    "min-w-[20rem]", "max-w-sm", "flex", "items-start",
+    position
+  );
+  
+  // Aggiungi classi specifiche per la variante
+  const variantClasses = {
+    primary: ["bg-orange-50", "border-orange-300"],
+    info: ["bg-blue-50", "border-blue-300"],
+    success: ["bg-green-50", "border-green-300"],
+    warning: ["bg-yellow-50", "border-yellow-300"],
+    danger: ["bg-red-50", "border-red-300"],
+    dark: ["bg-gray-800", "border-gray-700"]
+  };
+  
+  // Applica le classi della variante
+  const selectedVariant = variantClasses[variant] || variantClasses.info;
+  toast.classList.add(...selectedVariant);
+  
+  // Aggiungi attributi per Stimulus
+  toast.setAttribute("data-controller", "toast");
+  toast.setAttribute("data-toast-duration-value", duration);
+  toast.setAttribute("data-toast-auto-hide-value", autoHide);
+  toast.setAttribute("data-toast-position-value", position);
+  
+  // Costruisci il contenuto HTML
+  let html = "";
+  
+  // Icona
+  const defaultIcons = {
+    primary: "bell",
+    info: "info-circle",
+    success: "check-circle",
+    warning: "exclamation-triangle",
+    danger: "exclamation-circle",
+    dark: "shield-exclamation"
+  };
+  
+  const iconName = icon || defaultIcons[variant] || defaultIcons.info;
+  
+  if (iconName) {
+    const iconColorClasses = {
+      primary: "text-orange-500",
+      info: "text-blue-500",
+      success: "text-green-500",
+      warning: "text-yellow-500",
+      danger: "text-red-500",
+      dark: "text-gray-400"
+    };
+    
+    html += `
+      <div class="flex-shrink-0 mr-3 mt-0.5 ${iconColorClasses[variant] || iconColorClasses.info}">
+        <i class="fas fa-${iconName}"></i>
+      </div>
+    `;
+  }
+  
+  // Contenuto
+  const titleColorClasses = {
+    primary: "text-orange-800",
+    info: "text-blue-800",
+    success: "text-green-800",
+    warning: "text-yellow-800",
+    danger: "text-red-800",
+    dark: "text-white"
+  };
+  
+  const messageColorClasses = {
+    primary: "text-orange-700",
+    info: "text-blue-700",
+    success: "text-green-700",
+    warning: "text-yellow-700",
+    danger: "text-red-700",
+    dark: "text-gray-300"
+  };
+  
+  html += '<div class="flex-1">';
+  
+  if (title) {
+    html += `<div class="font-medium ${titleColorClasses[variant] || titleColorClasses.info}">${title}</div>`;
+  }
+  
+  if (message) {
+    html += `<div class="mt-1 ${messageColorClasses[variant] || messageColorClasses.info}">${message}</div>`;
+  }
+  
+  if (autoHide) {
+    html += `
+      <div class="w-full bg-gray-200 h-1 mt-2 rounded overflow-hidden">
+        <div class="bg-current h-1 transition-all" data-toast-target="progressBar"></div>
+      </div>
+    `;
+  }
+  
+  html += '</div>';
+  
+  // Pulsante di chiusura
+  if (dismissible) {
+    const closeButtonColorClasses = {
+      primary: "text-orange-500 hover:bg-orange-100",
+      info: "text-blue-500 hover:bg-blue-100",
+      success: "text-green-500 hover:bg-green-100",
+      warning: "text-yellow-500 hover:bg-yellow-100",
+      danger: "text-red-500 hover:bg-red-100",
+      dark: "text-gray-400 hover:bg-gray-700"
+    };
+    
+    html += `
+      <button type="button" class="ml-auto -mr-1.5 -mt-1.5 inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2 focus:ring-gray-400 ${closeButtonColorClasses[variant] || closeButtonColorClasses.info}" data-action="toast#hide" aria-label="Chiudi">
+        <i class="fas fa-xmark"></i>
+      </button>
+    `;
+  }
+  
+  // Inserisci il contenuto
+  toast.innerHTML = html;
+  
+  // Aggiungi il toast al documento
+  document.body.appendChild(toast);
+  
+  return toast;
+} 

data/app/assets/javascripts/better_ui/toast_manager.js

@@ -0,0 +1,77 @@
+// Gestore per l'impilamento dei toast in diverse posizioni
+class ToastManager {
+  constructor() {
+    // Mantiene traccia dei toast attivi per posizione
+    this.toasts = {
+      'top-right': [],
+      'top-left': [],
+      'bottom-right': [],
+      'bottom-left': [],
+      'top-center': [],
+      'bottom-center': []
+    }
+    
+    // Offset di base per ogni posizione (in px)
+    this.baseOffset = 16; // equivalente a Tailwind top-4 (16px)
+    
+    // Spaziatura tra i toast (in px)
+    this.spacing = 12;
+  }
+  
+  // Registra un nuovo toast e calcola la sua posizione
+  registerToast(toast, position) {
+    if (!this.toasts[position]) {
+      console.warn(`Posizione toast non valida: ${position}. Utilizzo 'top-right' come predefinita.`);
+      position = 'top-right';
+    }
+    
+    // Aggiungi il toast all'array della posizione specifica
+    this.toasts[position].push(toast);
+    
+    // Ricalcola le posizioni per tutti i toast in questa posizione
+    this.updatePositions(position);
+    
+    return () => this.removeToast(toast, position);
+  }
+  
+  // Rimuove un toast e ricalcola le posizioni
+  removeToast(toast, position) {
+    const index = this.toasts[position].indexOf(toast);
+    if (index !== -1) {
+      this.toasts[position].splice(index, 1);
+      this.updatePositions(position);
+    }
+  }
+  
+  // Aggiorna le posizioni di tutti i toast in una data posizione
+  updatePositions(position) {
+    const isTopPosition = position.startsWith('top-');
+    const toastArray = this.toasts[position];
+    
+    let currentOffset = this.baseOffset;
+    
+    toastArray.forEach((toast, index) => {
+      // Applica la posizione corretta
+      if (isTopPosition) {
+        toast.style.top = `${currentOffset}px`;
+      } else {
+        toast.style.bottom = `${currentOffset}px`;
+      }
+      
+      // Aggiorna l'offset per il prossimo toast
+      const height = toast.offsetHeight;
+      currentOffset += height + this.spacing;
+    });
+  }
+  
+  // Metodo statico per accedere all'istanza singleton
+  static getInstance() {
+    if (!ToastManager.instance) {
+      ToastManager.instance = new ToastManager();
+    }
+    return ToastManager.instance;
+  }
+}
+
+// Esporta il gestore come singleton
+export default ToastManager.getInstance(); 

data/app/assets/stylesheets/better_ui/application.css

@@ -12,360 +12,34 @@
  *
  *= require_tree .
  *= require_self
+ *= require font-awesome
  */
 
-/*
- * Better UI - Componenti UI per Rails
- *
- *= require_self
+/* 
+ * BetterUI - Utilizziamo Tailwind CSS per tutti gli stili
  */
 
-:root {
-  /* Colori principali */
-  --better-ui-primary: #007bff;
-  --better-ui-secondary: #6c757d;
-  --better-ui-success: #28a745;
-  --better-ui-danger: #dc3545;
-  --better-ui-warning: #ffc107;
-  --better-ui-info: #17a2b8;
-  
-  /* Colori di sfondo */
-  --better-ui-bg-light: #ffffff;
-  --better-ui-bg-dark: #343a40;
-  
-  /* Colori di testo */
-  --better-ui-text-dark: #343a40;
-  --better-ui-text-light: #f8f9fa;
-  
-  /* Bordi */
-  --better-ui-border-color: #dee2e6;
-  --better-ui-border-radius: 0.25rem;
-  
-  /* Spaziature */
-  --better-ui-spacer: 1rem;
-  --better-ui-spacer-sm: 0.5rem;
-  --better-ui-spacer-lg: 1.5rem;
-  
-  /* Transizioni */
-  --better-ui-transition: all 0.2s ease-in-out;
-}
-
-/*
- * Button
- */
-.better-ui-button {
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  border: 1px solid transparent;
-  padding: var(--better-ui-spacer-sm) var(--better-ui-spacer);
-  font-size: 1rem;
+/* Stili per il syntax highlighting di CodeRay */
+.syntax-ruby {
+  color: #333;
+  background-color: #f8f8f8;
+  font-family: Monaco, Consolas, 'Courier New', monospace;
   line-height: 1.5;
-  border-radius: var(--better-ui-border-radius);
-  transition: var(--better-ui-transition);
-  cursor: pointer;
-}
-
-.better-ui-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-
-.better-ui-button-primary {
-  color: var(--better-ui-text-light);
-  background-color: var(--better-ui-primary);
-  border-color: var(--better-ui-primary);
-}
-
-.better-ui-button-primary:hover {
-  background-color: #0069d9;
-  border-color: #0062cc;
-}
-
-.better-ui-button-secondary {
-  color: var(--better-ui-text-light);
-  background-color: var(--better-ui-secondary);
-  border-color: var(--better-ui-secondary);
-}
-
-.better-ui-button-secondary:hover {
-  background-color: #5a6268;
-  border-color: #545b62;
-}
-
-.better-ui-button-success {
-  color: var(--better-ui-text-light);
-  background-color: var(--better-ui-success);
-  border-color: var(--better-ui-success);
-}
-
-.better-ui-button-success:hover {
-  background-color: #218838;
-  border-color: #1e7e34;
-}
-
-.better-ui-button-danger {
-  color: var(--better-ui-text-light);
-  background-color: var(--better-ui-danger);
-  border-color: var(--better-ui-danger);
-}
-
-.better-ui-button-danger:hover {
-  background-color: #c82333;
-  border-color: #bd2130;
-}
-
-.better-ui-button:disabled {
-  opacity: 0.65;
-  cursor: not-allowed;
-}
-
-/*
- * Alert
- */
-.better-ui-alert {
-  position: relative;
-  padding: var(--better-ui-spacer);
-  margin-bottom: var(--better-ui-spacer);
-  border: 1px solid transparent;
-  border-radius: var(--better-ui-border-radius);
-  transition: var(--better-ui-transition);
-}
-
-.better-ui-alert-message {
-  margin-right: 2rem;
-}
-
-.better-ui-alert-close {
-  position: absolute;
-  top: var(--better-ui-spacer-sm);
-  right: var(--better-ui-spacer-sm);
-  background: transparent;
-  border: none;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: var(--better-ui-transition);
-}
-
-.better-ui-alert-close:hover {
-  opacity: 1;
-}
-
-.better-ui-alert-info {
-  color: #0c5460;
-  background-color: #d1ecf1;
-  border-color: #bee5eb;
-}
-
-.better-ui-alert-success {
-  color: #155724;
-  background-color: #d4edda;
-  border-color: #c3e6cb;
-}
-
-.better-ui-alert-warning {
-  color: #856404;
-  background-color: #fff3cd;
-  border-color: #ffeeba;
-}
-
-.better-ui-alert-danger {
-  color: #721c24;
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
-}
-
-.better-ui-alert-closing {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-/*
- * Card
- */
-.better-ui-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: var(--better-ui-bg-light);
-  background-clip: border-box;
-  border: 1px solid var(--better-ui-border-color);
-  border-radius: var(--better-ui-border-radius);
-  margin-bottom: var(--better-ui-spacer);
-}
-
-.better-ui-card-header {
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 0;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-bottom: 1px solid var(--better-ui-border-color);
-}
-
-.better-ui-card-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 500;
-}
-
-.better-ui-card-body {
-  flex: 1 1 auto;
-  padding: 1.25rem;
-}
-
-.better-ui-card-footer {
-  padding: 0.75rem 1.25rem;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-top: 1px solid var(--better-ui-border-color);
-}
-
-/*
- * Tabs
- */
-.better-ui-tabs {
-  margin-bottom: var(--better-ui-spacer);
-}
-
-.better-ui-tab-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-  border-bottom: 1px solid var(--better-ui-border-color);
-}
-
-.better-ui-tab-item {
-  display: block;
-  padding: 0.5rem 1rem;
-  border: 1px solid transparent;
-  border-top-left-radius: var(--better-ui-border-radius);
-  border-top-right-radius: var(--better-ui-border-radius);
-  cursor: pointer;
-  background: none;
-  margin-bottom: -1px;
-}
-
-.better-ui-tab-item:hover {
-  border-color: #e9ecef #e9ecef var(--better-ui-border-color);
-}
-
-.better-ui-tab-active {
-  color: var(--better-ui-primary);
-  background-color: var(--better-ui-bg-light);
-  border-color: var(--better-ui-border-color) var(--better-ui-border-color) var(--better-ui-bg-light);
-}
-
-.better-ui-tab-content {
-  padding: var(--better-ui-spacer);
-  border: 1px solid var(--better-ui-border-color);
-  border-top: 0;
-  border-bottom-right-radius: var(--better-ui-border-radius);
-  border-bottom-left-radius: var(--better-ui-border-radius);
-}
-
-/*
- * Modal
- */
-.better-ui-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1050;
-  display: none;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-}
-
-.better-ui-modal-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.better-ui-modal-background-visible {
-  opacity: 1;
-}
-
-.better-ui-modal-dialog {
-  position: relative;
-  width: 100%;
-  max-width: 500px;
-  margin: 1.75rem auto;
-  background-color: var(--better-ui-bg-light);
-  border-radius: var(--better-ui-border-radius);
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  transform: translateY(-20px);
-  opacity: 0;
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.better-ui-modal-dialog-visible {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-.better-ui-modal-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid var(--better-ui-border-color);
-}
-
-.better-ui-modal-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 500;
-}
-
-.better-ui-modal-close {
-  background: transparent;
-  border: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  line-height: 1;
-  color: var(--better-ui-text-dark);
-  opacity: 0.5;
-  cursor: pointer;
-}
-
-.better-ui-modal-close:hover {
-  opacity: 1;
-}
-
-.better-ui-modal-body {
-  position: relative;
-  padding: 1rem;
-}
-
-.better-ui-modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 1rem;
-  border-top: 1px solid var(--better-ui-border-color);
-}
-
-.better-ui-modal-footer > .better-ui-button {
-  margin-left: 0.5rem;
-}
-
-body.better-ui-modal-open {
-  overflow: hidden;
 }
+.syntax-ruby .keyword { color: #0066CC; font-weight: bold; }
+.syntax-ruby .string, .syntax-ruby .string-content { color: #008800; }
+.syntax-ruby .comment { color: #888888; font-style: italic; }
+.syntax-ruby .constant { color: #CC0000; }
+.syntax-ruby .class { color: #0086B3; font-weight: bold; }
+.syntax-ruby .module { color: #0086B3; font-weight: bold; }
+.syntax-ruby .symbol { color: #AA6600; }
+.syntax-ruby .function { color: #990000; }
+.syntax-ruby .regexp { color: #AA6600; }
+.syntax-ruby .integer, .syntax-ruby .float { color: #0000DD; }
+.syntax-ruby .global-variable, .syntax-ruby .instance-variable { color: #336699; }
+.syntax-ruby .predefined { color: #3377BB; font-weight: bold; }
+.syntax-ruby .error { color: #FF0000; background-color: #FFAAAA; }
+.syntax-ruby .delimiter { color: #555555; }
+.syntax-ruby .method { color: #990000; font-weight: bold; }
+.syntax-ruby .attribute-name { color: #994500; }
+.syntax-ruby .value { color: #0066CC; }

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>