better_ui 0.3.0 → 0.5.1

data/lib/better_ui/engine.rb

@@ -1,14 +1,101 @@
+require 'view_component'
+require 'redcarpet'
+require 'tailwindcss-rails'
+require 'coderay'
+require 'font-awesome-sass'
+begin
+  require 'lookbook'
+rescue LoadError
+  # Lookbook non è richiesto, è una dipendenza opzionale
+end
+begin
+  require 'listen'
+rescue LoadError
+  # Listen non è richiesto, è una dipendenza opzionale
+end
+begin
+  require 'action_cable'
+rescue LoadError
+  # ActionCable non è richiesto, è una dipendenza opzionale
+end
+
 module BetterUi
+  # Engine Rails per Better UI
+  # Gestisce l'isolamento del namespace, le dipendenze, gli asset e le configurazioni
   class Engine < ::Rails::Engine
     isolate_namespace BetterUi
-
-    initializer "better_ui.view_helpers" do
+    
+    # Configurazione per rendere disponibili gli assets all'applicazione host
+    initializer 'better_ui.assets' do |app|
+      # Aggiungi i percorsi asset
+      app.config.assets.paths << root.join('app', 'assets', 'stylesheets')
+      app.config.assets.paths << root.join('app', 'assets', 'images')
+      app.config.assets.paths << root.join('app', 'assets', 'fonts')
+      
+      # Aggiungi i file SCSS e CSS alla precompilazione
+      if app.config.respond_to?(:assets)
+        app.config.assets.precompile += %w( 
+          better_ui/application.css
+          better_ui/components/*.css
+          better_ui/components/**/*.css
+          better_ui/components/index.css
+        )
+      end
+      
+      # Configurazione per Propshaft se disponibile
+      if defined?(Propshaft) && app.config.respond_to?(:asset_host)
+        app.config.asset_host = app.config.asset_host
+      end
+    end
+    
+    # Assicuriamo che gli helper siano correttamente caricati
+    config.autoload_paths << root.join('app', 'helpers')
+    config.eager_load_paths << root.join('app', 'helpers')
+    
+    # Caricamento dei componenti helper
+    initializer 'better_ui.load_helpers', before: :load_config_initializers do
+      # Carica prima i componenti singoli
+      Dir.glob(root.join('app/helpers/better_ui/general/components/*.rb')).sort.each do |component|
+        require component
+      end
+      
+      # Poi carica il general_helper che li unisce tutti
+      require_relative '../../app/helpers/better_ui/general_helper' if File.exist?(root.join('app/helpers/better_ui/general_helper.rb'))
+      
+      # Infine carica il modulo principale
+      require_relative '../../app/helpers/better_ui_helper' if File.exist?(root.join('app/helpers/better_ui_helper.rb'))
+    end
+    
+    # Configurazione per rendere disponibili i componenti all'applicazione host
+    initializer 'better_ui.view_helpers' do      
       ActiveSupport.on_load :action_controller do
-        helper BetterUi::ApplicationHelper if defined?(BetterUi::ApplicationHelper)
+        helper BetterUi::Helper if defined?(BetterUi::Helper)
       end
-
+      
       ActiveSupport.on_load :action_view do
-        include BetterUi::ApplicationHelper if defined?(BetterUi::ApplicationHelper)
+        include BetterUi::Helper if defined?(BetterUi::Helper)
+      end
+    end
+    
+    # Configurazione per ViewComponent
+    config.view_component.preview_paths ||= []
+    config.view_component.preview_paths << root.join('test', 'components', 'previews')
+    
+    # Configurazione per Lookbook in sviluppo e test
+    if defined?(Lookbook)
+      initializer 'better_ui.lookbook' do
+        if Rails.env.development? || Rails.env.test?
+          config.lookbook = Lookbook
+        end
+      end
+    end
+    
+    # Configurazione per l'uso personalizzato dei componenti
+    initializer 'better_ui.custom_configuration', before: :load_config_initializers do |app|
+      app.config.to_prepare do
+        BetterUi.configure do |config|
+          # Configurazione di default, può essere sovrascritta dall'applicazione host
+        end
       end
     end
   end

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.3.0"
+  VERSION = "0.5.1"
 end

data/lib/better_ui.rb

@@ -1,9 +1,37 @@
 require "better_ui/version"
 require "better_ui/engine"
-require "better_ui/railtie"
-
-require "font-awesome-sass"
 
 module BetterUi
-  # Your code goes here...
+  class Configuration
+    attr_accessor :button_defaults, :alert_defaults, :card_defaults, :tabs_defaults
+    
+    def initialize
+      @button_defaults = {}
+      @alert_defaults = {}
+      @card_defaults = {}
+      @tabs_defaults = {}
+    end
+  end
+  
+  class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+    
+    def configure
+      yield(configuration) if block_given?
+    end
+    
+    # Metodo utile per accedere al percorso degli stilesheets
+    def stylesheets_path
+      File.join(File.dirname(__FILE__), '..', 'app', 'assets', 'stylesheets')
+    end
+  end
+end
+
+# Caricamento dei generator
+require 'rails/generators'
+if defined?(Rails::Generators)
+  require 'generators/better_ui/stylesheet_generator'
+  require 'generators/better_ui/install_generator'
 end

data/lib/generators/better_ui/install_generator.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Generators
+    # Generatore per l'installazione di Better UI in un'applicazione Rails
+    #
+    # Questo generatore:
+    # 1. Aggiunge le dipendenze necessarie
+    # 2. Monta l'engine nelle routes
+    # 3. Aggiunge gli asset all'applicazione
+    # 4. Crea un file di configurazione initializer
+    # 5. Genera i file di stile personalizzabili (opzionalmente)
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path('templates', __dir__)
+      
+      desc "Installa Better UI nell'applicazione Rails"
+      
+      class_option :skip_routes, type: :boolean, default: false,
+                  desc: "Salta l'aggiunta del mount engine nelle routes"
+      class_option :skip_stylesheets, type: :boolean, default: false,
+                  desc: "Salta la generazione dei file di stile personalizzabili"
+      class_option :skip_config, type: :boolean, default: false,
+                  desc: "Salta la creazione del file di configurazione"
+      
+      def mount_engine
+        return if options[:skip_routes]
+        
+        route_file = "config/routes.rb"
+        
+        if File.exist?(route_file)
+          mount_code = "  mount BetterUi::Engine => '/better_ui'"
+          
+          append_to_file route_file, injectible_routes(mount_code)
+          
+          say "Engine di Better UI montato in #{route_file}", :green
+        else
+          say "File routes.rb non trovato. Salta il montaggio dell'engine.", :yellow
+        end
+      end
+      
+      def copy_initializer
+        return if options[:skip_config]
+        
+        template "initializer.rb", "config/initializers/better_ui.rb"
+        say "File di configurazione creato in config/initializers/better_ui.rb", :green
+      end
+      
+      def add_assets
+        application_css = "app/assets/stylesheets/application.css"
+        application_scss = "app/assets/stylesheets/application.scss"
+        
+        file_to_update = if File.exist?(application_scss)
+          application_scss
+        elsif File.exist?(application_css)
+          application_css
+        else
+          nil
+        end
+        
+        if file_to_update
+          if file_to_update.end_with?('.css')
+            inject_into_file file_to_update, " *= require better_ui/application\n", before: " */\n"
+          else
+            append_to_file file_to_update, "\n@import 'better_ui/application';\n"
+          end
+          
+          say "Better UI assets aggiunti a #{file_to_update}", :green
+        else
+          say "File CSS dell'applicazione non trovato. Salta l'aggiunta degli assets.", :yellow
+        end
+      end
+      
+      def create_stylesheets
+        return if options[:skip_stylesheets]
+        
+        generate "better_ui:stylesheet"
+        say "Fogli di stile personalizzabili generati", :green
+      end
+      
+      def show_instructions
+        say "\n========================================================", :green
+        say "Better UI installato con successo!", :green
+        say "========================================================", :green
+        say "\nPer utilizzare i componenti nella tua applicazione:", :blue
+        say "- Accedi a http://localhost:3000/better_ui per vedere la documentazione", :blue
+        say "- Utilizza i componenti nel tuo codice, ad esempio:", :blue
+        say "  <%= render BetterUi::General::ButtonComponent.new(label: 'Clicca qui') %>", :blue
+        say "\nPer personalizzare i componenti, modifica i file in:", :blue
+        say "  app/assets/stylesheets/components/", :blue
+        say "- I file *_overrides.scss contengono le classi vuote per le personalizzazioni", :blue
+        say "\nPer configurare i valori predefiniti, modifica:", :blue
+        say "  config/initializers/better_ui.rb", :blue
+        say "\n========================================================\n", :green
+      end
+      
+      private
+      
+      def injectible_routes(mount_code)
+        "\n#{mount_code}\n"
+      end
+    end
+  end
+end 

data/lib/generators/better_ui/stylesheet_generator.rb

@@ -0,0 +1,159 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Generators
+    # Generatore per creare file SCSS personalizzati per i componenti BetterUI
+    #
+    # Questo generatore crea:
+    # 1. Un foglio di stile principale che importa tutti i componenti usando @use/@forward
+    # 2. File di override per ogni componente che permettono personalizzazioni senza modificare i file originali
+    # 3. Un file indice che raccoglie tutti gli override usando @forward
+    class StylesheetGenerator < Rails::Generators::Base
+      source_root File.expand_path('templates', __dir__)
+      
+      desc "Genera un foglio di stile SCSS di base per personalizzare i componenti di BetterUI"
+      
+      # Opzioni configurabili
+      class_option :prefix, type: :string, default: "custom", 
+                  desc: "Prefisso da utilizzare per il foglio di stile (default: 'custom')"
+      class_option :path, type: :string, default: "app/assets/stylesheets", 
+                  desc: "Path dove installare i file CSS all'interno della cartella app (default: 'app/assets/stylesheets')"
+      
+      # Lista dei file dei componenti da gestire
+      COMPONENT_FILES = [
+        '_variables.scss', 
+        '_button.scss', 
+        '_heading.scss', 
+        '_breadcrumb.scss', 
+        '_link.scss', 
+        '_panel.scss', 
+        '_icon.scss', 
+        '_table.scss', 
+        '_badge.scss', 
+        '_spinner.scss', 
+        '_avatar.scss',
+        '_card.scss'
+      ].freeze
+      
+      # Crea il foglio di stile principale
+      def create_stylesheet
+        # Crea il file principale che importa tutti i componenti
+        template "components_stylesheet.scss", 
+                File.join(options[:path], "#{options[:prefix]}_better_ui.scss")
+        
+        # Crea la directory dei componenti se non esiste
+        directory = File.join(options[:path], "components")
+        FileUtils.mkdir_p(directory) unless File.directory?(directory)
+        
+        # Crea il file indice che raccoglie tutti gli override
+        template "index.scss", File.join(directory, "_index.scss")
+      end
+
+      # Crea i file di override per ogni componente
+      def create_overrides
+        # Crea la directory dei componenti se non esiste
+        directory = File.join(options[:path], "components")
+        FileUtils.mkdir_p(directory) unless File.directory?(directory)
+        
+        # Crea i file di override per ogni componente
+        COMPONENT_FILES.each do |filename|
+          # Nome del file di override (es. _button_overrides.scss)
+          override_filename = filename.sub('.scss', '_overrides.scss')
+          override_path = File.join(directory, override_filename)
+          
+          # Crea il file di override solo se non esiste già
+          unless File.exist?(override_path)
+            # Percorso del file template originale
+            template_path = File.join(self.class.source_root, "components", filename)
+            
+            # Se il file template esiste, crea il file di override basato su di esso
+            if File.exist?(template_path)
+              original_content = File.read(template_path)
+              override_content = generate_empty_override(original_content, filename)
+              create_file override_path, override_content
+            end
+          end
+        end
+      end
+      
+      # Mostra le istruzioni README dopo l'esecuzione del generatore
+      def show_readme
+        readme "README" if behavior == :invoke
+      end
+      
+      private
+      
+      # Genera un file di override vuoto con le stesse classi del file originale
+      # 
+      # @param content [String] Il contenuto del file SCSS originale
+      # @param filename [String] Il nome del file del componente
+      # @return [String] Il contenuto formattato del file di override
+      def generate_empty_override(content, filename)
+        # Estrae il nome del componente dal nome file (es. "_button.scss" -> "button")
+        component_name = filename.sub('_', '').sub('.scss', '')
+        
+        # Intestazione del file di override
+        result = "/* ==============================\n"
+        result += " * #{component_name.capitalize} Component Overrides\n"
+        result += " * ==============================\n"
+        result += " * Questo file contiene le classi vuote per sovrascrivere gli stili di default.\n"
+        result += " * Aggiungi qui le tue personalizzazioni.\n"
+        result += " */\n\n"
+        
+        # Aggiungiamo il layer di Tailwind se presente nell'originale
+        if content.include?('@layer components')
+          result += "@layer components {\n"
+          layer_present = true
+        end
+        
+        # Estrae le classi principali (Block) usando regex
+        class_matches = content.scan(/\.(bui-[a-zA-Z0-9_-]+)\s*\{/)
+        class_matches.flatten.uniq.each do |css_class|
+          result += layer_present ? "  " : ""
+          result += ".#{css_class} {\n    // Aggiungi personalizzazioni qui\n#{layer_present ? "  " : ""}}\n\n"
+        end
+        
+        # Estrae classi modifier (es. &--small, &__icon, ecc.)
+        modifier_matches = content.scan(/&([a-zA-Z0-9_-]+)\s*\{/)
+        if !modifier_matches.empty?
+          # Raggruppa i modifier per classe principale
+          main_classes = class_matches.flatten.uniq
+          main_classes.each do |main_class|
+            # Estrae tutti i modifier di questa classe principale
+            class_content = extract_class_block(content, main_class)
+            modifiers = class_content.scan(/&([a-zA-Z0-9_-]+)\s*\{/).flatten.uniq
+            
+            if !modifiers.empty?
+              result += layer_present ? "  " : ""
+              result += ".#{main_class} {\n"
+              
+              modifiers.each do |modifier|
+                result += layer_present ? "    " : "  "
+                result += "&#{modifier} {\n      // Aggiungi personalizzazioni qui\n#{layer_present ? "    " : "  "}}\n\n"
+              end
+              
+              result += layer_present ? "  " : ""
+              result += "}\n\n"
+            end
+          end
+        end
+        
+        # Chiude il layer se presente
+        result += "}\n" if layer_present
+        
+        result
+      end
+      
+      # Estrae il blocco di codice relativo a una classe CSS specifica
+      #
+      # @param content [String] Il contenuto del file SCSS completo
+      # @param css_class [String] Il nome della classe CSS da estrarre
+      # @return [String] Il blocco di codice della classe
+      def extract_class_block(content, css_class)
+        regex = /\.(#{css_class})\s*\{((?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*)\}/m
+        match = content.match(regex)
+        match ? match[2] : ""
+      end
+    end
+  end
+end 

data/lib/generators/better_ui/templates/README

@@ -0,0 +1,125 @@
+==========================================================
+                     BETTER UI
+==========================================================
+
+Fogli di stile per componenti generati con successo!
+
+STRUTTURA DEI FILE:
+----------------------------------------------------------
+I seguenti file sono stati creati:
+
+1. File principale:
+   * <%= options[:prefix] %>_better_ui_components.scss
+
+2. File indice:
+   * components/_index.scss (raccoglie tutti gli override usando @forward)
+
+3. File di override:
+   * components/_variables_overrides.scss
+   * components/_button_overrides.scss
+   * components/_heading_overrides.scss
+   ... e altri file di override
+
+COME UTILIZZARE:
+----------------------------------------------------------
+1. Il file principale già utilizza @use per importare tutti i componenti:
+   @use 'better_ui/components' as bui;
+   @use 'components/index' as overrides;
+
+2. Personalizza i componenti modificando i file *_overrides.scss:
+   Ogni file di override contiene classi vuote corrispondenti
+   alle classi originali, pronte per essere personalizzate.
+
+3. Se hai bisogno di aggiungere nuovi file SCSS, ricorda di includere
+   il riferimento nel file components/_index.scss usando @forward.
+
+BEST PRACTICES:
+----------------------------------------------------------
+* Segui la metodologia BEM per le tue personalizzazioni
+* Usa le variabili CSS definite in _variables.scss
+* Mantieni la coerenza visiva tra i componenti
+* Aggiungi nuovi modificatori nei file di override
+
+ESEMPIO DI PERSONALIZZAZIONE:
+----------------------------------------------------------
+// In _button_overrides.scss
+@layer components {
+  .bui-button {
+    // Modifica la classe base
+    @apply transition-all;
+    
+    // Modifica uno specifico modificatore
+    &--primary {
+      @apply bg-indigo-600 hover:bg-indigo-700;
+    }
+    
+    // Aggiungi un nuovo modificatore
+    &--custom {
+      @apply bg-gradient-to-r from-purple-500 to-pink-500;
+    }
+  }
+}
+
+===============================================================================
+
+Installazione completata!
+
+Il tuo foglio di stile SCSS per la personalizzazione dei componenti di BetterUi
+è stato creato in:
+
+  <%= options[:path] %>/<%= 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:
+   
+   @use '<%= options[:prefix] %>_better_ui_components';
+
+   Oppure in app/assets/stylesheets/application.css:
+   
+   /*
+    *= require <%= options[:prefix] %>_better_ui_components
+    */
+
+   Se hai utilizzato un path personalizzato, assicurati di importare
+   correttamente il file dal percorso specificato.
+
+3. I file SCSS utilizzano la moderna sintassi @use e @forward di Sass
+   invece della sintassi @import deprecata. Questo ti permette di evitare
+   conflitti di nome e organizzare meglio il tuo codice SCSS.
+
+4. 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.
+
+5. 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.
+
+6. 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
+
+===============================================================================