better_ui 0.3.0 → 0.5.1

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

@@ -0,0 +1,79 @@
+module BetterUi
+  module General
+    class SpinnerComponent < ViewComponent::Base
+      attr_reader :size, :theme, :fullscreen, :label, :classes, :id
+
+      # Temi di colore disponibili
+      SPINNER_THEME = {
+        default: "bui-spinner--default",
+        white: "bui-spinner--white",
+        red: "bui-spinner--red",
+        rose: "bui-spinner--rose",
+        orange: "bui-spinner--orange",
+        green: "bui-spinner--green",
+        blue: "bui-spinner--blue",
+        yellow: "bui-spinner--yellow",
+        violet: "bui-spinner--violet"
+      }
+
+      # Dimensioni disponibili
+      SPINNER_SIZES = {
+        small: "bui-spinner--small",
+        medium: "bui-spinner--medium",
+        large: "bui-spinner--large"
+      }
+
+      # Stati e comportamenti dello spinner
+      SPINNER_STATES = {
+        fullscreen: "bui-spinner--fullscreen"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        size: :medium,
+        theme: :default,
+        fullscreen: false,
+        label: nil,
+        classes: nil,
+        id: nil
+      )
+        @size = size.to_sym
+        @theme = theme.to_sym
+        @fullscreen = fullscreen
+        @label = label
+        @classes = classes
+        @id = id
+      end
+
+      # Combina tutte le classi
+      def combined_classes
+        [
+          "bui-spinner", # Classe base per tutti gli spinner
+          get_spinner_theme_class,
+          get_spinner_size_class,
+          @fullscreen ? SPINNER_STATES[:fullscreen] : "",
+          @classes
+        ].compact.join(" ")
+      end
+      
+      def get_spinner_theme_class
+        SPINNER_THEME[@theme] || SPINNER_THEME[:default]
+      end
+      
+      def get_spinner_size_class
+        SPINNER_SIZES[@size] || SPINNER_SIZES[:medium]
+      end
+      
+      # Restituisce gli attributi per lo spinner
+      def spinner_attributes
+        attrs = {
+          class: combined_classes,
+          id: @id,
+          role: "status"
+        }
+        
+        attrs
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/table_component.html.erb

@@ -0,0 +1,73 @@
+<div class="<%= table_container_classes %>">
+  <table class="<%= table_classes %>">
+    <% if caption.present? %>
+      <caption class="<%= caption_classes %>">
+        <%= caption %>
+      </caption>
+    <% end %>
+    
+    <thead class="<%= thead_classes %>">
+      <% if header_rows_partial.present? %>
+        <%= render partial: header_rows_partial, locals: { 
+          component: self, 
+          headers: headers_for_display 
+        } %>
+      <% else %>
+        <tr>
+          <% headers_for_display.each do |header| %>
+            <th scope="col" class="<%= th_classes %>">
+              <%= header.to_s.humanize %>
+            </th>
+          <% end %>
+        </tr>
+      <% end %>
+    </thead>
+    
+    <tbody class="<%= tbody_classes %>">
+      <% data.each_with_index do |row, index| %>
+        <% if body_row_partial.present? %>
+          <%= render partial: body_row_partial, locals: { 
+            component: self, 
+            row: row,
+            index: index,
+            headers: headers_for_display 
+          } %>
+        <% else %>
+          <tr class="<%= tr_classes(index) %>">
+            <% headers_for_display.each do |header| %>
+              <td class="<%= td_classes %>">
+                <% 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) %>
+                <% else %>
+                  —
+                <% end %>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      <% end %>
+    </tbody>
+    
+    <% if footer.present? %>
+      <tfoot class="<%= tfoot_classes %>">
+        <% if footer_rows_partial.present? %>
+          <%= render partial: footer_rows_partial, locals: { 
+            component: self, 
+            footer: footer, 
+            headers: headers_for_display 
+          } %>
+        <% else %>
+          <tr>
+            <% footer.each_with_index do |value, index| %>
+              <td class="<%= tf_classes %>">
+                <%= value || "—" %>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tfoot>
+    <% end %>
+  </table>
+</div> 

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

@@ -0,0 +1,143 @@
+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: "bui-table--default",
+        white:   "bui-table--white",
+        red:     "bui-table--red",
+        rose:    "bui-table--rose",
+        orange:  "bui-table--orange",
+        green:   "bui-table--green",
+        blue:    "bui-table--blue",
+        yellow:  "bui-table--yellow",
+        violet:  "bui-table--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",
+          get_theme_class,
+          @bordered ? "bui-table--bordered" : nil,
+          @striped ? "bui-table--striped" : nil,
+          @hoverable ? "bui-table--hoverable" : nil,
+          @compact ? "bui-table--compact" : 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 get_theme_class
+        TABLE_THEMES[@variant] || TABLE_THEMES[:default]
+      end
+
+      def caption_classes
+        "bui-table__caption"
+      end
+
+      def thead_classes
+        "bui-table__header"
+      end
+
+      def tbody_classes
+        "bui-table__body"
+      end
+      
+      def tfoot_classes
+        "bui-table__footer"
+      end
+
+      def tr_classes(index)
+        "bui-table__row"
+      end
+
+      def th_classes
+        [
+          "bui-table__cell",
+          "bui-table__cell--header"
+        ].compact.join(" ")
+      end
+
+      def td_classes
+        "bui-table__cell"
+      end
+      
+      def tf_classes
+        [
+          "bui-table__cell",
+          "bui-table__cell--footer"
+        ].compact.join(" ")
+      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/controllers/better_ui/application_controller.rb

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

data/app/helpers/better_ui/general/components/avatar_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module AvatarHelper
+        def bui_avatar(image = nil, **options)
+          render BetterUi::General::AvatarComponent.new(
+            image: image,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_avatar, :bui_avatar
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/badge_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module BadgeHelper
+        def bui_badge(label = nil, **options)
+          render BetterUi::General::BadgeComponent.new(
+            label: label,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_badge, :bui_badge
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/breadcrumb_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module BreadcrumbHelper
+        def bui_breadcrumb(items = nil, **options)
+          render BetterUi::General::BreadcrumbComponent.new(
+            items: items,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_breadcrumb, :bui_breadcrumb
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/button_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module ButtonHelper
+        def bui_button(label = nil, **options)
+          render BetterUi::General::ButtonComponent.new(
+            label: label,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_button, :bui_button
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/heading_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module HeadingHelper
+        def bui_heading(title = nil, **options)
+          render BetterUi::General::HeadingComponent.new(
+            title: title,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_heading, :bui_heading
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/icon_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module IconHelper
+        def bui_icon(name = nil, **options)
+          render BetterUi::General::IconComponent.new(
+            name: name,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_icon, :bui_icon
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/link_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module LinkHelper
+        def bui_link(label = nil, **options)
+          render BetterUi::General::LinkComponent.new(
+            label: label,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_link, :bui_link
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/panel_helper.rb

@@ -0,0 +1,16 @@
+module BetterUi
+  module General
+    module Components
+      module PanelHelper
+        def bui_panel(**options, &block)
+          render BetterUi::General::PanelComponent.new(
+            **options
+          ), &block
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_panel, :bui_panel
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/spinner_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module SpinnerHelper
+        def bui_spinner(label = nil, **options)
+          render BetterUi::General::SpinnerComponent.new(
+            label: label,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_spinner, :bui_spinner
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/table_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module TableHelper
+        def bui_table(data = nil, **options, &block)
+          render BetterUi::General::TableComponent.new(
+            data: data,
+            **options
+          ), &block
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_table, :bui_table
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general_helper.rb

@@ -0,0 +1,15 @@
+module BetterUi
+  module GeneralHelper
+    # Inclusione di tutti i componenti general
+    include BetterUi::General::Components::ButtonHelper
+    include BetterUi::General::Components::IconHelper
+    include BetterUi::General::Components::LinkHelper
+    include BetterUi::General::Components::BadgeHelper
+    include BetterUi::General::Components::AvatarHelper
+    include BetterUi::General::Components::TableHelper
+    include BetterUi::General::Components::SpinnerHelper
+    include BetterUi::General::Components::HeadingHelper
+    include BetterUi::General::Components::PanelHelper
+    include BetterUi::General::Components::BreadcrumbHelper
+  end
+end 

data/app/helpers/better_ui_helper.rb

@@ -0,0 +1,12 @@
+module BetterUi
+  # Includi esplicitamente il GeneralHelper
+  require_relative 'better_ui/general_helper'
+  
+  module Helper
+    # Estendi il modulo con ActiveSupport::Concern per funzionalità helper
+    extend ActiveSupport::Concern
+    
+    # Includi gli helper disponibili
+    include BetterUi::GeneralHelper
+  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,4 @@
 BetterUi::Engine.routes.draw do
+  # Montaggio di Lookbook come root
+  mount Lookbook::Engine, at: "/"
 end