better_ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,132 @@
+module BetterUi
+  module General
+    class LinkComponent < ViewComponent::Base
+      attr_reader :label, :href, :theme, :icon, :classes, :active, :data, :method, :target
+
+      # Temi di colore disponibili
+      LINK_THEME = {
+        default: {
+          link: "bui-link-default-link",
+          active: "bui-link-default-active",
+          text: "bui-link-default-text"
+        },
+        white: {
+          link: "bui-link-white-link",
+          active: "bui-link-white-active",
+          text: "bui-link-white-text"
+        },
+        red: {
+          link: "bui-link-red-link",
+          active: "bui-link-red-active",
+          text: "bui-link-red-text"
+        },
+        rose: {
+          link: "bui-link-rose-link",
+          active: "bui-link-rose-active",
+          text: "bui-link-rose-text"
+        },
+        orange: {
+          link: "bui-link-orange-link",
+          active: "bui-link-orange-active",
+          text: "bui-link-orange-text"
+        },
+        green: {
+          link: "bui-link-green-link",
+          active: "bui-link-green-active",
+          text: "bui-link-green-text"
+        },
+        blue: {
+          link: "bui-link-blue-link",
+          active: "bui-link-blue-active",
+          text: "bui-link-blue-text"
+        },
+        yellow: {
+          link: "bui-link-yellow-link",
+          active: "bui-link-yellow-active",
+          text: "bui-link-yellow-text"
+        },
+        violet: {
+          link: "bui-link-violet-link",
+          active: "bui-link-violet-active",
+          text: "bui-link-violet-text"
+        }
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        label:, 
+        href: nil,
+        theme: :default,
+        icon: nil,
+        classes: nil,
+        active: false,
+        data: {},
+        method: nil,
+        target: nil
+      )
+        @label = label
+        @href = href
+        @theme = theme.to_sym
+        @icon = icon
+        @classes = classes
+        @active = active
+        @data = data || {}
+        @method = method
+        @target = target
+      end
+
+      # Determina se è un link attivo/corrente
+      def active?
+        @active
+      end
+
+      # Determina se è un link o solo testo
+      def link?
+        @href.present?
+      end
+
+      # Genera le classi per il componente
+      def component_classes
+        theme_classes = LINK_THEME.fetch(@theme, LINK_THEME[:default])
+        
+        base_classes = ["bui-link-base"]
+        
+        if active?
+          base_classes << theme_classes[:active]
+        elsif link?
+          base_classes << theme_classes[:link]
+        else
+          base_classes << theme_classes[:text]
+        end
+        
+        base_classes << @classes if @classes.present?
+        
+        base_classes.compact.join(" ")
+      end
+
+      # Restituisce gli attributi per il link
+      def link_attributes
+        attrs = {
+          class: component_classes
+        }
+        
+        attrs[:data] = @data.merge(turbo_method: @method) if @method.present?
+        attrs[:data] = @data if @data.present? && !@method.present?
+        attrs[:target] = @target if @target.present?
+        
+        attrs
+      end
+
+      # Renderizza l'icona
+      def render_icon
+        return nil unless @icon.present?
+        
+        if @icon.is_a?(String)
+          render BetterUi::General::IconComponent.new(name: @icon)
+        else
+          @icon # Assumiamo che sia già un componente renderizzato
+        end
+      end
+    end
+  end
+end 

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

@@ -1,92 +1,98 @@
 module BetterUi
   module General
     class PanelComponent < ViewComponent::Base
-      attr_reader :header, :footer, :body, :title, :padding, :variant
+      attr_reader :header, :footer, :body, :title, :padding, :variant, :rounded
       
-      PADDING_OPTIONS = {
-        none: '',
-        small: 'p-2',
-        medium: 'p-4',
-        large: 'p-6'
+      # Opzioni di padding disponibili
+      PANEL_PADDING = {
+        none: 'bui-panel-padding-none',
+        small: 'bui-panel-padding-small',
+        medium: 'bui-panel-padding-medium',
+        large: 'bui-panel-padding-large'
       }.freeze
       
-      def initialize(title: nil, body: nil, header: nil, footer: nil, padding: :medium, variant: :default)
+      # Temi di colore per l'header
+      PANEL_HEADER_THEME = {
+        default: 'bui-panel-default-header',
+        white: 'bui-panel-white-header',
+        red: 'bui-panel-red-header',
+        rose: 'bui-panel-rose-header',
+        orange: 'bui-panel-orange-header',
+        green: 'bui-panel-green-header',
+        blue: 'bui-panel-blue-header',
+        yellow: 'bui-panel-yellow-header',
+        violet: 'bui-panel-violet-header'
+      }.freeze
+      
+      # Temi di colore per il footer
+      PANEL_FOOTER_THEME = {
+        default: 'bui-panel-default-footer',
+        white: 'bui-panel-white-footer',
+        red: 'bui-panel-red-footer',
+        rose: 'bui-panel-rose-footer',
+        orange: 'bui-panel-orange-footer',
+        green: 'bui-panel-green-footer',
+        blue: 'bui-panel-blue-footer',
+        yellow: 'bui-panel-yellow-footer',
+        violet: 'bui-panel-violet-footer'
+      }.freeze
+      
+      # Opzioni di bordi arrotondati standardizzati
+      PANEL_RADIUS = {
+        none: 'bui-panel-radius-none',
+        small: 'bui-panel-radius-small',
+        medium: 'bui-panel-radius-medium',
+        large: 'bui-panel-radius-large',
+        full: 'bui-panel-radius-full'
+      }.freeze
+      
+      def initialize(title: nil, body: nil, header: nil, footer: nil, padding: :medium, variant: :default, rounded: :small)
         @title = title
         @body = body
         @header = header
         @footer = footer
         @padding = padding.to_sym
         @variant = variant.to_sym
+        @rounded = rounded.to_sym
       end
 
       def panel_classes
-        ThemeHelper.generate_component_classes(:panel, @variant)
+        [
+          'bui-panel-base',
+          get_border_radius_class
+        ].compact.join(' ')
+      end
+
+      def get_border_radius_class
+        PANEL_RADIUS[@rounded] || PANEL_RADIUS[:small]
       end
 
       def header_classes
         [
-          'panel-header',
-          ThemeHelper::LAYOUT_STYLES[:panel][:header],
-          header_color_classes,
-          PADDING_OPTIONS.fetch(@padding, PADDING_OPTIONS[:medium])
+          'bui-panel-header',
+          PANEL_HEADER_THEME[@variant] || PANEL_HEADER_THEME[:default],
+          PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
         ].compact.join(' ')
       end
 
       def body_classes
         [
-          'panel-body',
-          ThemeHelper::LAYOUT_STYLES[:panel][:body],
-          'overflow-x-auto break-words',
-          PADDING_OPTIONS.fetch(@padding, PADDING_OPTIONS[:medium])
+          'bui-panel-body',
+          'bui-panel-body-content',
+          PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
         ].compact.join(' ')
       end
 
       def footer_classes
         [
-          'panel-footer',
-          ThemeHelper::LAYOUT_STYLES[:panel][:footer],
-          footer_color_classes,
-          'overflow-x-auto break-words',
-          PADDING_OPTIONS.fetch(@padding, PADDING_OPTIONS[:medium])
+          'bui-panel-footer',
+          PANEL_FOOTER_THEME[@variant] || PANEL_FOOTER_THEME[:default],
+          PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
         ].compact.join(' ')
       end
 
       def title_classes
-        'text-lg font-medium'
-      end
-      
-      def header_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
-      end
-      
-      def footer_color_classes
-        case @variant
-        when :primary
-          'bg-orange-50 text-orange-600'
-        when :success
-          'bg-green-50 text-green-600'
-        when :warning
-          'bg-amber-50 text-amber-600'
-        when :danger
-          'bg-red-50 text-red-600'
-        when :info
-          'bg-blue-50 text-blue-600'
-        else
-          'bg-gray-50 text-gray-600'
-        end
+        'bui-panel-title'
       end
 
       def render?

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

@@ -0,0 +1,15 @@
+<div <%= spinner_attributes.to_s.html_safe %>>
+  <div class="bui-spinner-animation"></div>
+  
+  <% if @label.present? %>
+    <div class="bui-spinner-label">
+      <%= @label %>
+    </div>
+  <% end %>
+  
+  <% if content.present? %>
+    <div class="bui-spinner-content">
+      <%= content %>
+    </div>
+  <% end %>
+</div> 

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

@@ -7,31 +7,67 @@
     <% end %>
     
     <thead class="<%= thead_classes %>">
-      <tr>
-        <% headers_for_display.each do |header| %>
-          <th scope="col" class="<%= th_classes %>">
-            <%= header.to_s.humanize %>
-          </th>
-        <% end %>
-      </tr>
+      <% 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| %>
-        <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>
+        <% 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>