better_ui 0.1.0 → 0.5.0

data/app/components/better_ui/general/table_component.rb

@@ -0,0 +1,167 @@
+module BetterUi
+  module General
+    class TableComponent < ViewComponent::Base
+      attr_reader :data, :headers, :caption, :striped, :hoverable, :bordered, :compact, :classes, :variant, :rounded, :footer,
+                  :header_rows_partial, :body_row_partial, :footer_rows_partial
+      
+      # Costanti per configurazione stili
+      TABLE_THEMES = {
+        default: { base: "bui-table-default", border: "bui-table-border-default", bg: "bui-table-bg-default", text: "bui-table-text-default" },
+        white:   { base: "bui-table-white",   border: "bui-table-border-white",   bg: "bui-table-bg-white",   text: "bui-table-text-white" },
+        red:     { base: "bui-table-red",     border: "bui-table-border-red",     bg: "bui-table-bg-red",     text: "bui-table-text-red" },
+        rose:    { base: "bui-table-rose",    border: "bui-table-border-rose",    bg: "bui-table-bg-rose",    text: "bui-table-text-rose" },
+        orange:  { base: "bui-table-orange",  border: "bui-table-border-orange",  bg: "bui-table-bg-orange",  text: "bui-table-text-orange" },
+        green:   { base: "bui-table-green",   border: "bui-table-border-green",   bg: "bui-table-bg-green",   text: "bui-table-text-green" },
+        blue:    { base: "bui-table-blue",    border: "bui-table-border-blue",    bg: "bui-table-bg-blue",    text: "bui-table-text-blue" },
+        yellow:  { base: "bui-table-yellow",  border: "bui-table-border-yellow",  bg: "bui-table-bg-yellow",  text: "bui-table-text-yellow" },
+        violet:  { base: "bui-table-violet",  border: "bui-table-border-violet",  bg: "bui-table-bg-violet",  text: "bui-table-text-violet" }
+      }.freeze
+      
+      # Opzioni di bordi arrotondati standardizzati
+      TABLE_RADIUS = {
+        none: "bui-table-radius-none",
+        small: "bui-table-radius-small",
+        medium: "bui-table-radius-medium",
+        large: "bui-table-radius-large",
+        full: "bui-table-radius-full"
+      }.freeze
+      
+      def initialize(data:, headers: nil, caption: nil, striped: false, hoverable: false, bordered: true, compact: false, classes: nil, variant: :default, rounded: :small, footer: nil, header_rows_partial: nil, body_row_partial: nil, footer_rows_partial: nil)
+        @data = data || []
+        @headers = headers
+        @caption = caption
+        @striped = !!striped
+        @hoverable = !!hoverable
+        @bordered = !!bordered
+        @compact = !!compact
+        @classes = classes
+        @variant = (TABLE_THEMES.key?(variant.to_sym) ? variant.to_sym : :default)
+        @rounded = (TABLE_RADIUS.key?(rounded.to_sym) ? rounded.to_sym : :small)
+        @footer = footer.is_a?(Array) ? footer : nil  # Valida che sia un array
+        @header_rows_partial = header_rows_partial
+        @body_row_partial = body_row_partial
+        @footer_rows_partial = footer_rows_partial
+      end
+
+      def table_classes
+        [
+          "bui-table-base",
+          @bordered ? "bui-table-bordered" : nil,
+          @classes
+        ].compact.join(" ")
+      end
+
+      def table_container_classes
+        [
+          "bui-table-container",
+          get_border_radius_class
+        ].compact.join(" ")
+      end
+
+      def get_border_radius_class
+        TABLE_RADIUS[@rounded] || TABLE_RADIUS[:small]
+      end
+
+      def caption_classes
+        [
+          "bui-table-caption",
+          get_theme_bg_color,
+          get_theme_text_class,
+          @bordered ? "bui-table-caption-bordered #{get_theme_border_color}" : nil
+        ].compact.join(" ")
+      end
+
+      def thead_classes
+        "bui-table-header"
+      end
+
+      def tbody_classes
+        @striped ? "bui-table-row-striped" : nil
+      end
+      
+      def tfoot_classes
+        "bui-table-footer"
+      end
+
+      def tr_classes(index)
+        [
+          @hoverable ? "bui-table-row-hover" : nil,
+          @striped ? nil : (index.odd? ? "bui-table-row-alternate" : nil)
+        ].compact.join(" ")
+      end
+
+      def th_classes
+        [
+          @compact ? "bui-table-cell-compact" : "bui-table-cell",
+          get_theme_bg_color,
+          get_theme_text_class,
+          @bordered ? "bui-table-cell-bordered #{get_theme_border_color}" : nil
+        ].compact.join(" ")
+      end
+
+      def td_classes
+        [
+          @compact ? "bui-table-cell-compact" : "bui-table-cell",
+          @bordered ? "bui-table-cell-bordered #{get_theme_border_color}" : nil
+        ].compact.join(" ")
+      end
+      
+      def tf_classes
+        [
+          @compact ? "bui-table-cell-compact" : "bui-table-cell",
+          "bui-table-footer-cell",
+          get_theme_bg_color,
+          get_theme_text_class,
+          @bordered ? "bui-table-cell-bordered #{get_theme_border_color}" : nil
+        ].compact.join(" ")
+      end
+      
+      def get_theme_base_class
+        TABLE_THEMES[@variant][:base] || TABLE_THEMES[:default][:base]
+      end
+      
+      def get_theme_border_color
+        TABLE_THEMES[@variant][:border] || TABLE_THEMES[:default][:border]
+      end
+      
+      def get_theme_bg_color
+        TABLE_THEMES[@variant][:bg] || TABLE_THEMES[:default][:bg]
+      end
+      
+      def get_theme_text_class
+        TABLE_THEMES[@variant][:text] || TABLE_THEMES[:default][:text]
+      end
+
+      def headers_for_display
+        return @headers if @headers.present?
+        return [] if @data.empty?
+        
+        case first_item = @data.first
+        when Hash
+          first_item.keys
+        when -> (item) { item.respond_to?(:attributes) }
+          first_item.attributes.keys - %w[id created_at updated_at]
+        else
+          []
+        end
+      end
+      
+      # Ottiene il valore di una cella in modo consistente
+      def get_cell_value(row, header)
+        if row.is_a?(Hash)
+          row[header.to_s] || row[header.to_sym] || "—"
+        elsif row.respond_to?(header.to_sym)
+          row.send(header.to_sym)
+        elsif row.is_a?(Array) && headers_for_display.index(header)
+          row[headers_for_display.index(header)] || "—"
+        else
+          "—"
+        end
+      end
+
+      def render?
+        @data.present?
+      end
+    end
+  end
+end 

data/app/components/better_ui/theme_helper.rb

@@ -0,0 +1,171 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module ThemeHelper
+    # Colori principali del tema
+    THEME_COLORS = {
+      # Varianti cromatiche
+      default: {
+        bg: 'bg-black',
+        text: 'text-white',
+        hover: 'hover:bg-gray-900'
+      },
+      white: {
+        bg: 'bg-white',
+        text: 'text-black',
+        hover: 'hover:bg-gray-100'
+      },
+      red: {
+        bg: 'bg-red-500',
+        text: 'text-white',
+        hover: 'hover:bg-red-600'
+      },
+      rose: {
+        bg: 'bg-rose-500',
+        text: 'text-white',
+        hover: 'hover:bg-rose-600'
+      },
+      orange: {
+        bg: 'bg-orange-500',
+        text: 'text-white',
+        hover: 'hover:bg-orange-600'
+      },
+      green: {
+        bg: 'bg-green-500',
+        text: 'text-white',
+        hover: 'hover:bg-green-600'
+      },
+      blue: {
+        bg: 'bg-blue-500',
+        text: 'text-white',
+        hover: 'hover:bg-blue-600'
+      },
+      yellow: {
+        bg: 'bg-yellow-500',
+        text: 'text-black',
+        hover: 'hover:bg-yellow-600'
+      },
+      violet: {
+        bg: 'bg-violet-500',
+        text: 'text-white',
+        hover: 'hover:bg-violet-600'
+      }
+    }
+    
+    # Bordi del tema
+    THEME_BORDERS = {
+      default: 'border-gray-900',
+      white: 'border-gray-200',
+      red: 'border-red-600',
+      rose: 'border-rose-600',
+      orange: 'border-orange-600',
+      green: 'border-green-600',
+      blue: 'border-blue-600',
+      yellow: 'border-yellow-600',
+      violet: 'border-violet-600'
+    }
+    
+    # NOTA: I valori di border-radius sono ora definiti nelle costanti specifiche di ogni componente
+    # per garantire una nomenclatura standardizzata:
+    # - none: nessun arrotondamento (rounded-none)
+    # - small: arrotondamento piccolo (rounded-md)
+    # - medium: arrotondamento medio (rounded-lg)
+    # - large: arrotondamento grande (rounded-xl)
+    # - full: arrotondamento completo (rounded-full)
+    
+    # Effetti hover
+    THEME_HOVER = THEME_COLORS.transform_values { |v| v[:hover] }
+    
+    # Stili base comuni
+    COMMON_STYLES = {
+      shadow: 'shadow-sm',
+      transitions: 'transition-all duration-200'
+    }
+    
+    # Stili per elementi di layout
+    LAYOUT_STYLES = {
+      panel: {
+        base: 'border shadow-sm',
+        header: 'px-4 py-3 border-b',
+        body: 'p-4',
+        footer: 'px-4 py-3 border-t'
+      },
+      table: {
+        container: 'overflow-hidden 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[:transitions]
+        
+        variant_colors = THEME_COLORS[variant.to_sym] || THEME_COLORS[:default]
+        
+        # Versione piena
+        base_classes << variant_colors[:bg]
+        base_classes << variant_colors[:text]
+        base_classes << THEME_HOVER[variant.to_sym] || THEME_HOVER[:default]
+        
+        # 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]
+        
+        variant_colors = THEME_COLORS[variant.to_sym] || THEME_COLORS[:default]
+        
+        base_classes << variant_colors[:bg]
+        base_classes << variant_colors[:text]
+        base_classes << THEME_BORDERS[variant.to_sym] || THEME_BORDERS[:default]
+        
+      when :table
+        base_classes << 'min-w-full'
+        
+        variant_colors = THEME_COLORS[variant.to_sym] || THEME_COLORS[:default]
+        base_classes << variant_colors[:bg]
+        base_classes << variant_colors[:text]
+        
+        # Bordi
+        if options[:bordered]
+          base_classes << 'border-collapse'
+          base_classes << (THEME_BORDERS[variant.to_sym] || THEME_BORDERS[:default])
+        end
+        
+        # Classi personalizzate
+        base_classes << options[:classes] if options[:classes].present?
+      end
+      
+      base_classes.compact.join(' ')
+    end
+  end
+end 

data/app/controllers/better_ui/application_controller.rb

@@ -1,4 +1,5 @@
 module BetterUi
   class ApplicationController < ActionController::Base
+    layout 'better_ui/application'
   end
 end

data/app/controllers/better_ui/docs_controller.rb

@@ -1,41 +1,34 @@
 module BetterUi
   class DocsController < ApplicationController
     def index
-      @components = [
-        { name: 'Button', path: better_ui.docs_component_path('button') },
-        { name: 'Alert', path: better_ui.docs_component_path('alert') },
-        { name: 'Card', path: better_ui.docs_component_path('card') },
-        { name: 'Modal', path: better_ui.docs_component_path('modal') },
-        { name: 'Tabs', path: better_ui.docs_component_path('tabs') },
-        { name: 'Form Elements', path: better_ui.docs_component_path('form_elements') }
-      ]
+      # Pagina principale della documentazione
     end
     
     def show
-      doc_file = Rails.root.join('docs', "#{params[:page]}.md")
+      # 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 File.exist?(doc_file)
-        @content = File.read(doc_file)
+      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
-        @content = "# Documentazione non trovata\nLa pagina richiesta non è stata trovata."
+        # 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]
-      
-      # Percorso relativo ai file di documentazione dei componenti
-      doc_file = BetterUi::Engine.root.join('docs', 'components', "#{component_name}.md")
-      
-      if File.exist?(doc_file)
-        @content = File.read(doc_file)
-      else
-        @content = "# Componente non trovato\nLa documentazione per il componente '#{component_name}' non è stata trovata."
-      end
-      
-      # Decidere quali esempi mostrare in base al componente
-      @component_name = component_name
-      render :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/views/components/better_ui/general/table/_custom_body_row.html.erb

@@ -0,0 +1,17 @@
+<tr class="<%= component.tr_classes(index) %>">
+  <% headers.each_with_index do |header, cell_index| %>
+    <td class="<%= component.td_classes %>">
+      <% cell_value = component.get_cell_value(row, header) %>
+      <% if cell_index == 0 %>
+        <div class="flex items-center">
+          <div class="w-8 h-8 rounded-full bg-blue-100 mr-2 flex items-center justify-center text-blue-700">
+            <%= cell_value.to_s.first&.upcase || 'N/A' %>
+          </div>
+          <%= cell_value %>
+        </div>
+      <% else %>
+        <%= cell_value %>
+      <% end %>
+    </td>
+  <% end %>
+</tr> 

data/app/views/components/better_ui/general/table/_custom_footer_rows.html.erb

@@ -0,0 +1,17 @@
+<tr>
+  <% footer.each_with_index do |value, index| %>
+    <td class="<%= component.tf_classes %>">
+      <% if index == 0 %>
+        <div class="flex items-center">
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2
+ 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+          </svg>
+          <strong><%= value %></strong>
+        </div>
+      <% else %>
+        <%= value %>
+      <% end %>
+    </td>
+  <% end %>
+</tr> 

data/app/views/components/better_ui/general/table/_custom_header_rows.html.erb

@@ -0,0 +1,12 @@
+<tr>
+  <% headers.each do |header| %>
+    <th class="<%= component.th_classes %>">
+      <div class="flex items-center justify-between">
+        <%= header.to_s.humanize %>
+        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
+      </div>
+    </th>
+  <% end %>
+</tr> 

data/app/views/layouts/component_preview.html.erb

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html style="background-color: <%= params.dig(:lookbook, :display, :bg_color) || "white" %>">
+<head>
+  <title><%= content_for(:title) || "BetterUI" %></title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <link rel="icon" href="/icon.png" type="image/png">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon.png">
+
+  <%# Includes all stylesheet files in app/assets/stylesheets %>
+  <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+  <%= stylesheet_link_tag "better_ui/application" %>
+</head>
+
+<body class="bg-white text-gray-800">
+  <main class="min-h-screen p-8 bg-yellow-500">
+    <div style="
+    margin-left: auto;
+    margin-right: auto;
+    max-width: <%= params.dig(:lookbook, :display, :max_width) || "100%" %>
+  ">
+    <%= yield %> <!-- rendered preview will be injected here -->
+  </main>
+</body>
+</html>

data/config/initializers/lookbook.rb

@@ -0,0 +1,23 @@
+if defined?(Lookbook)
+  Lookbook.configure do |config|
+    # Configura la directory delle preview dei componenti
+    config.preview_paths << BetterUi::Engine.root.join('test/components/previews')
+    
+    # Configura il titolo della pagina Lookbook
+    config.page_title = 'BetterUI - Catalogo Componenti'
+    
+    # Configura i tag principali
+    config.preview_display_names = {
+      'BetterUi::General' => 'Componenti Generali',
+      'BetterUi::Application' => 'Componenti Applicazione',
+      'BetterUi::Website' => 'Componenti Sito Web'
+    }
+    
+    # Per supportare i componenti ViewComponent
+    config.listen_for_changes = {
+      component: 'app/components/**/*.rb',
+      preview: 'test/components/previews/**/*_preview.rb',
+      template: 'app/components/**/*.erb'
+    }
+  end
+end 

data/config/routes.rb

@@ -5,6 +5,11 @@ BetterUi::Engine.routes.draw do
   # Route per le pagine di documentazione generiche
   get 'docs/:page', to: 'docs#show', as: :docs_page
   
-  # Route per la documentazione dei componenti specifici
+  # Route specifica per i componenti
   get 'docs/components/:component', to: 'docs#component', as: :docs_component
+  
+  # Montaggio di Lookbook per lo sviluppo e il test
+  if Rails.env.development? || Rails.env.test?
+    mount Lookbook::Engine, at: "/lookbook"
+  end
 end

data/lib/better_ui/engine.rb

@@ -1,6 +1,11 @@
 require 'view_component'
 require 'redcarpet'
 require 'tailwindcss-rails'
+require 'coderay'
+require 'font-awesome-sass'
+require 'lookbook'
+require 'listen'
+require 'action_cable'
 
 module BetterUi
   class Engine < ::Rails::Engine
@@ -12,8 +17,13 @@ module BetterUi
       app.config.assets.paths << root.join('app', 'assets', 'images')
     end
     
+    # Assicuriamo che gli helper siano correttamente caricati
+    config.autoload_paths << root.join('app', 'helpers')
+    
     # Configurazione per rendere disponibili i componenti all'applicazione host
     initializer 'better_ui.view_helpers' do
+      require_relative '../../app/helpers/better_ui_application_helper'
+      
       ActiveSupport.on_load :action_controller do
         helper BetterUi::ApplicationHelper
       end
@@ -24,6 +34,13 @@ module BetterUi
     end
     
     # Configurazione per ViewComponent
-    config.view_component.preview_paths << root.join('spec', 'components', 'previews')
+    config.view_component.preview_paths << root.join('test', 'components', 'previews')
+    
+    # Configurazione per Lookbook in sviluppo e test
+    initializer 'better_ui.lookbook' do
+      if Rails.env.development? || Rails.env.test?
+        config.lookbook = Lookbook
+      end
+    end
   end
 end

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.1.0"
+  VERSION = "0.5.0"
 end

data/lib/better_ui.rb

@@ -23,3 +23,7 @@ module BetterUi
     end
   end
 end
+
+# Caricamento del generator
+require 'rails/generators'
+require 'generators/better_ui/stylesheet_generator' if defined?(Rails::Generators)

data/lib/generators/better_ui/stylesheet_generator.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Generators
+    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"
+      
+      class_option :prefix, type: :string, default: "custom", 
+                  desc: "Prefisso da utilizzare per il foglio di stile (default: 'custom')"
+      
+      def create_stylesheet
+        # Crea il file principale
+        template "components_stylesheet.scss", 
+                File.join("app/assets/stylesheets", "#{options[:prefix]}_better_ui_components.scss")
+        
+        # Crea la directory dei componenti se non esiste
+        directory = File.join("app/assets/stylesheets", "components")
+        FileUtils.mkdir_p(directory) unless File.directory?(directory)
+        
+        # Lista dei file dei componenti
+        component_files = ['_variables.scss', '_button.scss', '_heading.scss', '_breadcrumb.scss', 
+                          '_link.scss', '_panel.scss', '_icon.scss', '_table.scss', '_badge.scss', 
+                          '_spinner.scss', '_avatar.scss']
+        
+        # Copia i file originali
+        component_files.each do |filename|
+          copy_file "components/#{filename}", File.join(directory, filename)
+        end
+      end
+
+      def create_overrides
+        # Crea la directory dei componenti se non esiste
+        directory = File.join("app/assets/stylesheets", "components")
+        FileUtils.mkdir_p(directory) unless File.directory?(directory)
+        
+        # Lista dei file dei componenti
+        component_files = ['_variables.scss', '_button.scss', '_heading.scss', '_breadcrumb.scss', 
+                          '_link.scss', '_panel.scss', '_icon.scss', '_table.scss', '_badge.scss', 
+                          '_spinner.scss', '_avatar.scss']
+        
+        # Crea i file di override
+        component_files.each do |filename|
+          # Nome del file di override
+          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)
+            # Leggi il contenuto del file originale dalla directory templates
+            template_path = File.join(self.class.source_root, "components", filename)
+            
+            # Se il file template esiste, crea il file di override
+            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
+      
+      def show_readme
+        readme "README" if behavior == :invoke
+      end
+      
+      private
+      
+      # Genera un file di override vuoto con le stesse classi del file originale
+      def generate_empty_override(content, filename)
+        component_name = filename.sub('_', '').sub('.scss', '')
+        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"
+        
+        # Estrae le classi tramite regex
+        class_matches = content.scan(/\.(bui-[a-zA-Z0-9_-]+)\s*\{/)
+        class_matches.flatten.uniq.each do |css_class|
+          result += ".#{css_class} {\n  // Sovrascrivi qui gli stili per .#{css_class}\n}\n\n"
+        end
+        
+        # Estrae anche classi annidate usando la sintassi SCSS
+        nested_matches = content.scan(/\.(bui-[a-zA-Z0-9_-]+)\s*{[^{]*\.([\w-]+)\s*{/)
+        nested_matches.each do |parent_class, child_class|
+          result += ".#{parent_class} {\n  .#{child_class} {\n    // Sovrascrivi qui gli stili annidati\n  }\n}\n\n"
+        end
+        
+        result
+      end
+    end
+  end
+end