better_ui 0.4.0 → 0.5.1

data/app/assets/javascripts/better_ui/controllers/toast_controller.js

@@ -1,161 +0,0 @@
-// Toast controller per gestire il comportamento delle notifiche toast
-import { Controller } from "@hotwired/stimulus"
-import ToastManager from "../toast_manager"
-
-export default class extends Controller {
-  static targets = ["progressBar"]
-  static values = {
-    duration: { type: Number, default: 5000 },
-    autoHide: { type: Boolean, default: true },
-    position: { type: String, default: "top-right" }
-  }
-  
-  connect() {
-    // Estrai la posizione dalle classi del toast o utilizza il valore predefinito
-    this.position = this.getPositionFromClasses() || this.positionValue;
-    
-    // Rimuovi le classi di posizione originali per evitare conflitti
-    this.removePositionClasses();
-    
-    // Registra il toast con il manager e ottieni la funzione di pulizia
-    this.cleanupFunction = ToastManager.registerToast(this.element, this.position);
-    
-    // Applica l'animazione di entrata
-    this.element.classList.add("opacity-0", "translate-y-2");
-    
-    // Permetti al DOM di essere aggiornato prima di mostrare
-    setTimeout(() => {
-      this.element.classList.remove("opacity-0", "translate-y-2");
-      this.element.classList.add("opacity-100", "translate-y-0");
-    }, 10);
-    
-    // Se auto-hide è attivato, imposta il timer
-    if (this.autoHideValue) {
-      this.startProgressBar();
-      this.hideTimeout = setTimeout(() => {
-        this.hide();
-      }, this.durationValue);
-    }
-    
-    // Aggiungi eventi per pausa/ripresa dell'auto-hide
-    this.element.addEventListener("mouseenter", this.mouseEnter.bind(this));
-    this.element.addEventListener("mouseleave", this.mouseLeave.bind(this));
-  }
-  
-  // Estrae la posizione dalle classi del toast
-  getPositionFromClasses() {
-    const positionClasses = [
-      "top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center"
-    ];
-    
-    for (const position of positionClasses) {
-      if (this.element.classList.contains(position)) {
-        return position;
-      }
-    }
-    
-    return null;
-  }
-  
-  // Rimuove le classi di posizione originali
-  removePositionClasses() {
-    const positionClasses = [
-      "top-4", "right-4", "bottom-4", "left-4", "left-1/2", "transform", "-translate-x-1/2"
-    ];
-    
-    positionClasses.forEach(cls => {
-      this.element.classList.remove(cls);
-    });
-  }
-  
-  startProgressBar() {
-    if (this.hasProgressBarTarget) {
-      this.progressBarTarget.style.width = "100%";
-      
-      // Imposta una transizione che dura quanto il timeout
-      this.progressBarTarget.style.transition = `width ${this.durationValue}ms linear`;
-      
-      // Forza un reflow per assicurare che la transizione inizi
-      void this.progressBarTarget.offsetWidth;
-      
-      // Inizia la transizione
-      this.progressBarTarget.style.width = "0%";
-    }
-  }
-  
-  disconnect() {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-    }
-    
-    // Rimuovi gli event listener
-    this.element.removeEventListener("mouseenter", this.mouseEnter.bind(this));
-    this.element.removeEventListener("mouseleave", this.mouseLeave.bind(this));
-    
-    // Esegui la funzione di pulizia per rimuovere il toast dal manager
-    if (this.cleanupFunction) {
-      this.cleanupFunction();
-    }
-  }
-  
-  hide(event) {
-    if (event) {
-      event.preventDefault();
-    }
-    
-    // Applica l'animazione di uscita
-    this.element.classList.remove("opacity-100", "translate-y-0");
-    this.element.classList.add("opacity-0", "translate-y-2");
-    
-    // Rimuovi l'elemento dopo l'animazione
-    setTimeout(() => {
-      this.element.remove();
-    }, 300);
-  }
-  
-  // Metodo per pausa e ripresa dell'autoHide quando l'utente interagisce con il toast
-  pauseAutoHide() {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      
-      if (this.hasProgressBarTarget) {
-        // Salva la larghezza corrente per riprendere da lì
-        const computedStyle = window.getComputedStyle(this.progressBarTarget);
-        this.pausedWidth = computedStyle.width;
-        this.progressBarTarget.style.transition = "none";
-        this.progressBarTarget.style.width = this.pausedWidth;
-      }
-    }
-  }
-  
-  resumeAutoHide() {
-    if (this.autoHideValue) {
-      // Calcola il tempo rimanente basato sulla larghezza della barra di progresso
-      let remainingTime = this.durationValue;
-      
-      if (this.hasProgressBarTarget && this.pausedWidth) {
-        const percentage = parseFloat(this.pausedWidth) / parseFloat(window.getComputedStyle(this.progressBarTarget.parentElement).width);
-        remainingTime = this.durationValue * percentage;
-      }
-      
-      this.hideTimeout = setTimeout(() => {
-        this.hide();
-      }, remainingTime);
-      
-      if (this.hasProgressBarTarget && this.pausedWidth) {
-        this.progressBarTarget.style.transition = `width ${remainingTime}ms linear`;
-        void this.progressBarTarget.offsetWidth;
-        this.progressBarTarget.style.width = "0%";
-      }
-    }
-  }
-  
-  // Gestori eventi per pausa/ripresa dell'autoHide
-  mouseEnter() {
-    this.pauseAutoHide();
-  }
-  
-  mouseLeave() {
-    this.resumeAutoHide();
-  }
-} 

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

@@ -1,159 +0,0 @@
-// 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

@@ -1,77 +0,0 @@
-// 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/components/better_ui/theme_helper.rb

@@ -1,169 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module ThemeHelper
-    # Colori principali del tema
-    THEME_COLORS = {
-      # Neutrali
-      white: 'bg-white',
-      black: 'bg-black',
-      
-      # Colori del tema
-      primary: {
-        light: 'bg-orange-100',
-        default: 'bg-orange-500',
-        dark: 'bg-orange-600',
-        text: 'text-white'
-      },
-      secondary: {
-        light: 'bg-gray-100',
-        default: 'bg-gray-200',
-        dark: 'bg-gray-300',
-        text: 'text-gray-800'
-      },
-      success: {
-        light: 'bg-green-100',
-        default: 'bg-green-500',
-        dark: 'bg-green-600',
-        text: 'text-white'
-      },
-      warning: {
-        light: 'bg-amber-100',
-        default: 'bg-amber-500',
-        dark: 'bg-amber-600',
-        text: 'text-white'
-      },
-      danger: {
-        light: 'bg-red-100',
-        default: 'bg-red-500',
-        dark: 'bg-red-600',
-        text: 'text-white'
-      },
-      info: {
-        light: 'bg-blue-100',
-        default: 'bg-blue-500',
-        dark: 'bg-blue-600',
-        text: 'text-white'
-      }
-    }
-    
-    # Bordi del tema
-    THEME_BORDERS = {
-      primary: 'border-orange-200',
-      secondary: 'border-gray-200',
-      success: 'border-green-200',
-      warning: 'border-amber-200',
-      danger: 'border-red-200',
-      info: 'border-blue-200'
-    }
-    
-    # Effetti hover
-    THEME_HOVER = {
-      primary: 'hover:bg-orange-600',
-      secondary: 'hover:bg-gray-300',
-      success: 'hover:bg-green-600',
-      warning: 'hover:bg-amber-600',
-      danger: 'hover:bg-red-600',
-      info: 'hover:bg-blue-600'
-    }
-    
-    # Stili base comuni
-    COMMON_STYLES = {
-      rounded: 'rounded-md',
-      shadow: 'shadow-sm',
-      transitions: 'transition-all duration-200'
-    }
-    
-    # Stili per elementi di layout
-    LAYOUT_STYLES = {
-      panel: {
-        base: 'rounded-lg border shadow-sm',
-        header: 'px-4 py-3 border-b',
-        body: 'p-4',
-        footer: 'px-4 py-3 border-t'
-      },
-      table: {
-        container: 'overflow-hidden rounded-md border shadow-sm',
-        header: 'bg-gray-50 text-left text-xs uppercase tracking-wider text-gray-500 font-medium',
-        row: {
-          base: '',
-          hover: 'hover:bg-gray-50',
-          striped: 'even:bg-white odd:bg-gray-50'
-        },
-        cell: 'px-4 py-3 text-sm text-gray-700'
-      }
-    }
-    
-    # Genera classi per un componente basato su variante
-    def self.generate_component_classes(component_type, variant, options = {})
-      base_classes = []
-      
-      case component_type
-      when :button
-        base_classes << 'inline-flex items-center justify-center'
-        base_classes << 'font-medium'
-        base_classes << COMMON_STYLES[:rounded]
-        base_classes << COMMON_STYLES[:transitions]
-        
-        if options[:outline]
-          # Versione outline
-          base_classes << 'border-2'
-          base_classes << "border-#{variant}-500"
-          base_classes << "text-#{variant}-500"
-          base_classes << "hover:bg-#{variant}-50"
-        else
-          # Versione piena
-          base_classes << THEME_COLORS.dig(variant.to_sym, :default)&.sub('bg-', '') || "bg-#{variant}-500"
-          base_classes << THEME_COLORS.dig(variant.to_sym, :text) || 'text-white'
-          base_classes << THEME_HOVER[variant.to_sym] || "hover:bg-#{variant}-600"
-        end
-        
-        # Dimensione
-        case options[:size]
-        when :sm
-          base_classes << 'px-2.5 py-1.5 text-xs'
-        when :lg
-          base_classes << 'px-6 py-3 text-base'
-        else # :md (default)
-          base_classes << 'px-4 py-2 text-sm'
-        end
-        
-        # Disabilitato
-        if options[:disabled]
-          base_classes << 'opacity-50 cursor-not-allowed'
-        end
-        
-        # Larghezza piena
-        if options[:full_width]
-          base_classes << 'w-full'
-        end
-      
-      when :panel
-        base_classes << LAYOUT_STYLES[:panel][:base]
-        
-        # Colore di sfondo in base alla variante
-        if variant.to_sym == :default
-          base_classes << 'bg-white'
-          base_classes << 'border-gray-200'
-        else
-          base_classes << THEME_COLORS.dig(variant.to_sym, :light)&.sub('bg-', '') || "bg-#{variant}-50"
-          base_classes << THEME_BORDERS[variant.to_sym] || "border-#{variant}-200"
-        end
-        
-      when :table
-        base_classes << 'min-w-full bg-white'
-        
-        # Bordi
-        if options[:bordered]
-          base_classes << 'border-collapse'
-          base_classes << (THEME_BORDERS[variant.to_sym] || 'border-gray-200')
-        end
-        
-        # Classi personalizzate
-        base_classes << options[:classes] if options[:classes].present?
-      end
-      
-      base_classes.compact.join(' ')
-    end
-  end
-end 

data/app/controllers/better_ui/docs_controller.rb

@@ -1,34 +0,0 @@
-module BetterUi
-  class DocsController < ApplicationController
-    def index
-      # Pagina principale della documentazione
-    end
-    
-    def show
-      # Verifica se esiste una vista con il nome richiesto
-      page = params[:page]
-      valid_pages = %w[introduction installation customization components/buttons components/icons components/panel components/table]
-      
-      if valid_pages.include?(page)
-        if page.start_with?('components/')
-          # Per i componenti, rendiamo esplicitamente il template nella directory corretta
-          component_name = page.split('/').last
-          render template: "better_ui/docs/components/#{component_name}"
-        else
-          render page
-        end
-      else
-        # Pagina non trovata
-        render plain: "Pagina non trovata", status: :not_found
-      end
-    end
-    
-    def component
-      # Gestisce le rotte tipo /better_ui/docs/components/button
-      component_name = params[:component]
-      render template: "better_ui/docs/components/#{component_name}"
-    rescue ActionView::MissingTemplate
-      render plain: "Componente non trovato", status: :not_found
-    end
-  end
-end 

data/app/helpers/better_ui_application_helper.rb

@@ -1,99 +0,0 @@
-module BetterUi
-  module ApplicationHelper
-    # Render markdown
-    def better_ui_markdown(text)
-      return '' if text.blank?
-      
-      renderer = Redcarpet::Render::HTML.new(
-        filter_html: false,
-        hard_wrap: true,
-        link_attributes: { target: '_blank', rel: 'noopener noreferrer' }
-      )
-      
-      markdown = Redcarpet::Markdown.new(
-        renderer,
-        autolink: true,
-        tables: true,
-        fenced_code_blocks: true,
-        strikethrough: true,
-        superscript: true,
-        underline: true,
-        highlight: true,
-        quote: true,
-        footnotes: true
-      )
-      
-      rendered_html = markdown.render(text).html_safe
-      
-      # Applica classi Tailwind agli elementi HTML generati dal markdown
-      rendered_html
-        .gsub(/<h1>/i, '<h1 class="text-3xl font-bold mb-6 pb-2 border-b border-gray-200">')
-        .gsub(/<h2>/i, '<h2 class="text-2xl font-semibold mt-8 mb-4 pb-2 border-b border-gray-100">')
-        .gsub(/<h3>/i, '<h3 class="text-xl font-medium mt-6 mb-3">')
-        .gsub(/<pre>/i, '<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto my-4">')
-        .gsub(/<code>/i, '<code class="font-mono">')
-        .gsub(/<ul>/i, '<ul class="ml-6 mb-4">')
-        .gsub(/<ol>/i, '<ol class="ml-6 mb-4">')
-        .gsub(/<p>/i, '<p class="mb-4 leading-relaxed">')
-        .gsub(/<a /i, '<a class="text-blue-600 no-underline hover:underline" ')
-        .gsub(/<blockquote>/i, '<blockquote class="border-l-4 border-gray-200 pl-4 ml-0 text-gray-600">')
-        .html_safe
-    end
-    
-    # Determina se il path corrente corrisponde a quello dato
-    def current_page?(path)
-      request.path == path
-    end
-    
-    # Helper per i componenti General
-    def better_ui_general_button(label = nil, **options)
-      render BetterUi::General::ButtonComponent.new(label: label, **options)
-    end
-    
-    def better_ui_general_panel(**options, &block)
-      render BetterUi::General::PanelComponent.new(**options), &block
-    end
-    
-    def better_ui_general_table(**options)
-      render BetterUi::General::TableComponent.new(**options)
-    end
-    
-    def better_ui_general_icon(name, **options)
-      render BetterUi::General::IconComponent.new(name: name, **options)
-    end
-    
-    # Helper per i componenti Application
-    def better_ui_application_button(label = nil, **options)
-      render BetterUi::Application::ButtonComponent.new(label: label, **options)
-    end
-    
-    def better_ui_application_panel(**options, &block)
-      render BetterUi::Application::PanelComponent.new(**options), &block
-    end
-    
-    def better_ui_application_table(**options)
-      render BetterUi::Application::TableComponent.new(**options)
-    end
-    
-    def better_ui_application_icon(name, **options)
-      render BetterUi::Application::IconComponent.new(name: name, **options)
-    end
-    
-    # Helper per i componenti Website
-    def better_ui_website_button(label = nil, **options)
-      render BetterUi::Website::ButtonComponent.new(label: label, **options)
-    end
-    
-    def better_ui_website_panel(**options, &block)
-      render BetterUi::Website::PanelComponent.new(**options), &block
-    end
-    
-    def better_ui_website_table(**options)
-      render BetterUi::Website::TableComponent.new(**options)
-    end
-    
-    def better_ui_website_icon(name, **options)
-      render BetterUi::Website::IconComponent.new(name: name, **options)
-    end
-  end
-end