better_ui 0.4.0 → 0.5.0

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

@@ -1,137 +1,163 @@
 module BetterUi
   module General
     class TableComponent < ViewComponent::Base
-      attr_reader :data, :headers, :caption, :striped, :hoverable, :bordered, :compact, :classes, :variant
+      attr_reader :data, :headers, :caption, :striped, :hoverable, :bordered, :compact, :classes, :variant, :rounded, :footer,
+                  :header_rows_partial, :body_row_partial, :footer_rows_partial
       
-      def initialize(data:, headers: nil, caption: nil, striped: false, hoverable: false, bordered: true, compact: false, classes: nil, variant: :default)
+      # 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
+        @striped = !!striped
+        @hoverable = !!hoverable
+        @bordered = !!bordered
+        @compact = !!compact
         @classes = classes
-        @variant = variant.to_sym
+        @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
-        ThemeHelper.generate_component_classes(:table, @variant, { bordered: @bordered, classes: @classes })
+        [
+          "bui-table-base",
+          @bordered ? "bui-table-bordered" : nil,
+          @classes
+        ].compact.join(" ")
       end
 
       def table_container_classes
         [
-          ThemeHelper::LAYOUT_STYLES[:table][:container],
-          get_border_color
-        ].compact.join(' ')
+          "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
         [
-          'px-4 py-2',
-          'text-sm font-medium text-left',
-          caption_color_classes,
-          @bordered ? "border-b #{get_border_color}" : nil
-        ].compact.join(' ')
+          "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
-        ThemeHelper::LAYOUT_STYLES[:table][:header]
+        "bui-table-header"
       end
 
       def tbody_classes
-        @striped ? ThemeHelper::LAYOUT_STYLES[:table][:row][:striped] : nil
+        @striped ? "bui-table-row-striped" : nil
+      end
+      
+      def tfoot_classes
+        "bui-table-footer"
       end
 
       def tr_classes(index)
         [
-          @hoverable ? ThemeHelper::LAYOUT_STYLES[:table][:row][:hover] : nil,
-          @striped ? nil : (index.odd? ? 'bg-gray-50' : nil)
-        ].compact.join(' ')
+          @hoverable ? "bui-table-row-hover" : nil,
+          @striped ? nil : (index.odd? ? "bui-table-row-alternate" : nil)
+        ].compact.join(" ")
       end
 
       def th_classes
         [
-          @compact ? 'px-2 py-1' : 'px-4 py-3',
-          'text-left text-xs font-medium uppercase tracking-wider',
-          th_color_classes,
-          @bordered ? "border #{get_border_color}" : nil
-        ].compact.join(' ')
+          @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 ? 'px-2 py-1' : 'px-4 py-3',
-          @bordered ? "border #{get_border_color}" : nil,
-          'text-sm'
-        ].compact.join(' ')
+          @compact ? "bui-table-cell-compact" : "bui-table-cell",
+          @bordered ? "bui-table-cell-bordered #{get_theme_border_color}" : nil
+        ].compact.join(" ")
       end
       
-      def get_border_color
-        case @variant
-        when :primary
-          'border-orange-200'
-        when :success
-          'border-green-200'
-        when :warning
-          'border-amber-200'
-        when :danger
-          'border-red-200'
-        when :info
-          'border-blue-200'
-        else
-          'border-gray-200'
-        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 caption_color_classes
-        case @variant
-        when :primary
-          'bg-orange-50 text-orange-700'
-        when :success
-          'bg-green-50 text-green-700'
-        when :warning
-          'bg-amber-50 text-amber-700'
-        when :danger
-          'bg-red-50 text-red-700'
-        when :info
-          'bg-blue-50 text-blue-700'
-        else
-          'bg-gray-50 text-gray-700'
-        end
+      def get_theme_base_class
+        TABLE_THEMES[@variant][:base] || TABLE_THEMES[:default][:base]
       end
       
-      def th_color_classes
-        case @variant
-        when :primary
-          'text-orange-700'
-        when :success
-          'text-green-700'
-        when :warning
-          'text-amber-700'
-        when :danger
-          'text-red-700'
-        when :info
-          'text-blue-700'
-        else
-          'text-gray-700'
-        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?
         
-        # Se non sono stati forniti headers, li derivo dalle chiavi del primo elemento
-        first_item = @data.first
-        if first_item.is_a?(Hash)
+        case first_item = @data.first
+        when Hash
           first_item.keys
-        elsif first_item.respond_to?(:attributes)
-          first_item.attributes.keys - ['id', 'created_at', 'updated_at']
+        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?

data/app/components/better_ui/theme_helper.rb

@@ -4,72 +4,80 @@ 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'
+      # 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'
       },
-      secondary: {
-        light: 'bg-gray-100',
-        default: 'bg-gray-200',
-        dark: 'bg-gray-300',
-        text: 'text-gray-800'
+      rose: {
+        bg: 'bg-rose-500',
+        text: 'text-white',
+        hover: 'hover:bg-rose-600'
       },
-      success: {
-        light: 'bg-green-100',
-        default: 'bg-green-500',
-        dark: 'bg-green-600',
-        text: 'text-white'
+      orange: {
+        bg: 'bg-orange-500',
+        text: 'text-white',
+        hover: 'hover:bg-orange-600'
       },
-      warning: {
-        light: 'bg-amber-100',
-        default: 'bg-amber-500',
-        dark: 'bg-amber-600',
-        text: 'text-white'
+      green: {
+        bg: 'bg-green-500',
+        text: 'text-white',
+        hover: 'hover:bg-green-600'
       },
-      danger: {
-        light: 'bg-red-100',
-        default: 'bg-red-500',
-        dark: 'bg-red-600',
-        text: 'text-white'
+      blue: {
+        bg: 'bg-blue-500',
+        text: 'text-white',
+        hover: 'hover:bg-blue-600'
       },
-      info: {
-        light: 'bg-blue-100',
-        default: 'bg-blue-500',
-        dark: 'bg-blue-600',
-        text: 'text-white'
+      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 = {
-      primary: 'border-orange-200',
-      secondary: 'border-gray-200',
-      success: 'border-green-200',
-      warning: 'border-amber-200',
-      danger: 'border-red-200',
-      info: 'border-blue-200'
+      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 = {
-      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'
-    }
+    THEME_HOVER = THEME_COLORS.transform_values { |v| v[:hover] }
     
     # Stili base comuni
     COMMON_STYLES = {
-      rounded: 'rounded-md',
       shadow: 'shadow-sm',
       transitions: 'transition-all duration-200'
     }
@@ -77,13 +85,13 @@ module BetterUi
     # Stili per elementi di layout
     LAYOUT_STYLES = {
       panel: {
-        base: 'rounded-lg border shadow-sm',
+        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 rounded-md border shadow-sm',
+        container: 'overflow-hidden border shadow-sm',
         header: 'bg-gray-50 text-left text-xs uppercase tracking-wider text-gray-500 font-medium',
         row: {
           base: '',
@@ -102,21 +110,14 @@ module BetterUi
       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
+        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]
@@ -141,22 +142,23 @@ module BetterUi
       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
+        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 bg-white'
+        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] || 'border-gray-200')
+          base_classes << (THEME_BORDERS[variant.to_sym] || THEME_BORDERS[:default])
         end
         
         # Classi personalizzate

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/lib/better_ui/engine.rb

@@ -3,6 +3,9 @@ require 'redcarpet'
 require 'tailwindcss-rails'
 require 'coderay'
 require 'font-awesome-sass'
+require 'lookbook'
+require 'listen'
+require 'action_cable'
 
 module BetterUi
   class Engine < ::Rails::Engine
@@ -35,16 +38,7 @@ module BetterUi
     
     # Configurazione per Lookbook in sviluppo e test
     initializer 'better_ui.lookbook' do
-      if defined?(Lookbook) && (Rails.env.development? || Rails.env.test?)
-        # Carica esplicitamente le dipendenze per le funzionalità avanzate di Lookbook
-        begin
-          require 'listen'
-          require 'action_cable'
-        rescue LoadError => e
-          # Log che le dipendenze opzionali non sono disponibili
-          puts "NOTA: Alcune funzionalità avanzate di Lookbook potrebbero non essere disponibili: #{e.message}"
-        end
-        
+      if Rails.env.development? || Rails.env.test?
         config.lookbook = Lookbook
       end
     end

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.4.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