better_ui 0.3.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

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

@@ -1,23 +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")
-
+    config.preview_paths << BetterUi::Engine.root.join('test/components/previews')
+    
     # Configura il titolo della pagina Lookbook
-    config.page_title = "BetterUI - Catalogo Componenti"
-
+    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"
+      '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"
+      component: 'app/components/**/*.rb',
+      preview: 'test/components/previews/**/*_preview.rb',
+      template: 'app/components/**/*.erb'
     }
   end
-end
+end 

data/config/routes.rb

@@ -1,2 +1,15 @@
 BetterUi::Engine.routes.draw do
+  # Route principale per la documentazione
+  root to: 'docs#index'
+  
+  # Route per le pagine di documentazione generiche
+  get 'docs/:page', to: 'docs#show', as: :docs_page
+  
+  # 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,14 +1,45 @@
+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
     isolate_namespace BetterUi
-
-    initializer "better_ui.view_helpers" do
+    
+    # Configurazione per rendere disponibili gli assets all'applicazione host
+    initializer 'better_ui.assets' do |app|
+      app.config.assets.paths << root.join('app', 'assets', 'stylesheets')
+      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 if defined?(BetterUi::ApplicationHelper)
+        helper BetterUi::ApplicationHelper
       end
-
+      
       ActiveSupport.on_load :action_view do
-        include BetterUi::ApplicationHelper if defined?(BetterUi::ApplicationHelper)
+        include BetterUi::ApplicationHelper
+      end
+    end
+    
+    # Configurazione per ViewComponent
+    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

data/lib/better_ui/version.rb

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

data/lib/better_ui.rb

@@ -1,9 +1,29 @@
 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
+  end
 end
+
+# Caricamento del generator
+require 'rails/generators'
+require 'generators/better_ui/stylesheet_generator' if defined?(Rails::Generators)