better_ui_tmp 0.5.1

data/app/components/better_ui/application/navbar/component.rb

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Navbar
+      class Component < ViewComponent::Base
+        # Include degli helper per utilizzare bui_icon, bui_avatar e bui_breadcrumb
+        include BetterUi::General::Components::Icon::IconHelper
+        include BetterUi::General::Components::Avatar::AvatarHelper
+        include BetterUi::General::Components::Breadcrumb::BreadcrumbHelper
+        attr_reader :theme, :position, :height, :shadow, :border, :brand, :breadcrumb, :navigation_items, :actions, :classes
+
+        # Temi navbar con classi Tailwind dirette
+        NAVBAR_THEMES = {
+          default: "bg-white text-gray-900 border-gray-200",
+          dark: "bg-gray-900 text-white border-gray-700",
+          light: "bg-gray-50 text-gray-900 border-gray-100"
+        }
+
+        # Altezze navbar con classi Tailwind dirette
+        NAVBAR_HEIGHTS = {
+          sm: "h-12",
+          md: "h-16",
+          lg: "h-20"
+        }
+
+        # Posizioni navbar con classi Tailwind dirette
+        NAVBAR_POSITIONS = {
+          top: "",
+          fixed_top: "fixed top-0 left-0 right-0 z-50",
+          sticky_top: "sticky top-0 z-40"
+        }
+
+        # Ombre navbar con classi Tailwind dirette
+        NAVBAR_SHADOWS = {
+          none: "",
+          sm: "shadow-sm",
+          md: "shadow-md",
+          lg: "shadow-lg",
+          xl: "shadow-xl"
+        }
+
+        # @param theme [Symbol] Tema colori (:default, :dark, :light), default :default
+        # @param position [Symbol] Posizione della navbar (:top, :fixed_top, :sticky_top), default :top
+        # @param height [Symbol] Altezza della navbar (:sm, :md, :lg), default :md
+        # @param shadow [Symbol] Tipo di ombra (:none, :sm, :md, :lg, :xl), default :sm
+        # @param border [Boolean] Se mostrare il bordo inferiore, default true
+        # @param brand [Hash] Configurazione brand (logo, title, href)
+        # @param breadcrumb [Hash] Configurazione breadcrumb (items, separator, theme)
+        # @param navigation_items [Array] Array di elementi di navigazione centrali
+        # @param actions [Array] Array di azioni/pulsanti a destra
+        # @param classes [String] Classi CSS aggiuntive
+        def initialize(
+          theme: :default,
+          position: :top,
+          height: :md,
+          shadow: :sm,
+          border: true,
+          brand: {},
+          breadcrumb: {},
+          navigation_items: [],
+          actions: [],
+          classes: nil
+        )
+          @theme = theme.to_sym
+          @position = position.to_sym
+          @height = height.to_sym
+          @shadow = shadow.to_sym
+          @border = border
+          @brand = brand || {}
+          @breadcrumb = breadcrumb || {}
+          @navigation_items = navigation_items || []
+          @actions = actions || []
+          @classes = classes
+        end
+
+        def container_classes
+          base_classes = %w[w-full flex items-center justify-between px-4 sm:px-6 lg:px-8]
+          
+          # Posizione
+          base_classes.concat(position_classes.split) if position != :top
+          
+          # Altezza
+          base_classes << height_class
+          
+          # Tema
+          base_classes.concat(theme_classes.split)
+          
+          # Shadow
+          base_classes << shadow_class if shadow != :none
+          
+          # Border
+          base_classes << "border-b" if border
+          
+          # Classi aggiuntive
+          base_classes << classes if classes.present?
+          
+          base_classes.compact.join(" ")
+        end
+
+        def has_brand?
+          brand.present? && (brand[:title].present? || brand[:logo].present?)
+        end
+
+        def has_breadcrumb?
+          breadcrumb.present? && breadcrumb[:items].present? && breadcrumb[:items].any?
+        end
+
+        def has_navigation?
+          navigation_items.present? && navigation_items.any?
+        end
+
+        def has_actions?
+          actions.present? && actions.any?
+        end
+
+        def render_breadcrumb
+          return unless has_breadcrumb?
+          
+          bui_breadcrumb(
+            items: breadcrumb[:items],
+            separator: breadcrumb[:separator] || :chevron,
+            theme: breadcrumb[:theme] || theme,
+            size: :small
+          )
+        end
+
+        private
+
+        def position_classes
+          NAVBAR_POSITIONS[@position] || NAVBAR_POSITIONS[:top]
+        end
+
+        def height_class
+          NAVBAR_HEIGHTS[@height] || NAVBAR_HEIGHTS[:md]
+        end
+
+        def theme_classes
+          NAVBAR_THEMES[@theme] || NAVBAR_THEMES[:default]
+        end
+
+        def shadow_class
+          NAVBAR_SHADOWS[@shadow] || NAVBAR_SHADOWS[:sm]
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/application/sidebar/component.html.erb

@@ -0,0 +1,184 @@
+<aside class="<%= container_classes %>">
+  <!-- Header Section -->
+  <% if has_header? %>
+    <div class="px-6 py-4 border-b border-gray-200">
+      <% if header[:logo].present? %>
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <% if header[:logo].is_a?(Hash) %>
+              <%= bui_avatar(**header[:logo]) %>
+            <% else %>
+              <%= header[:logo].html_safe %>
+            <% end %>
+          </div>
+          <% if header[:title].present? %>
+            <div class="ml-3">
+              <h2 class="text-lg font-semibold text-gray-900"><%= header[:title] %></h2>
+              <% if header[:subtitle].present? %>
+                <p class="text-sm text-gray-500"><%= header[:subtitle] %></p>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% elsif header[:title].present? %>
+        <div>
+          <h2 class="text-lg font-semibold text-gray-900"><%= header[:title] %></h2>
+          <% if header[:subtitle].present? %>
+            <p class="text-sm text-gray-500"><%= header[:subtitle] %></p>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <!-- Navigation Section -->
+  <nav class="flex-1 px-4 py-6 space-y-6">
+    <% navigation_sections.each do |section| %>
+      <div class="space-y-2">
+        <!-- Section Title -->
+        <% if section[:title].present? %>
+          <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
+            <%= section[:title] %>
+          </h3>
+        <% end %>
+
+        <!-- Navigation Items -->
+        <div class="space-y-1">
+          <% (section[:items] || []).each do |item| %>
+            <% if item[:type] == :collapsible && collapsible %>
+              <!-- Collapsible Section -->
+              <div>
+                <button 
+                  type="button" 
+                  class="group flex items-center justify-between w-full px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors duration-150"
+                  data-collapse-target="#<%= item[:id] %>"
+                  aria-expanded="<%= item[:expanded] || false %>"
+                >
+                  <div class="flex items-center">
+                    <% if item[:icon].present? %>
+                      <span class="mr-3 text-gray-400 group-hover:text-gray-500">
+                        <%= bui_icon(item[:icon], size: :medium) %>
+                      </span>
+                    <% end %>
+                    <span><%= item[:label] %></span>
+                  </div>
+                  <span class="ml-3 transform transition-transform duration-150 <%= 'rotate-90' if item[:expanded] %>">
+                    <%= bui_icon("chevron-right", size: :small) %>
+                  </span>
+                </button>
+                
+                <div 
+                  id="<%= item[:id] %>" 
+                  class="<%= item[:expanded] ? 'block' : 'hidden' %> mt-1 space-y-1"
+                >
+                  <% (item[:children] || []).each do |child| %>
+                    <% if child[:href].present? %>
+                      <a 
+                        href="<%= child[:href] %>" 
+                        class="<%= (child[:active] || false) ? 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 bg-gray-100 text-gray-900' : 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 text-gray-700 hover:bg-gray-50 hover:text-gray-900' %> pl-11"
+                      >
+                        <% if child[:icon].present? %>
+                          <span class="mr-3">
+                            <%= bui_icon(child[:icon], size: :small) %>
+                          </span>
+                        <% end %>
+                        <%= child[:label] %>
+                      </a>
+                    <% else %>
+                      <div class="<%= (child[:active] || false) ? 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 bg-gray-100 text-gray-900' : 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 text-gray-700 hover:bg-gray-50 hover:text-gray-900' %> pl-11 cursor-default">
+                        <% if child[:icon].present? %>
+                          <span class="mr-3">
+                            <%= bui_icon(child[:icon], size: :small) %>
+                          </span>
+                        <% end %>
+                        <%= child[:label] %>
+                      </div>
+                    <% end %>
+                  <% end %>
+                </div>
+              </div>
+            <% else %>
+              <!-- Regular Navigation Item -->
+              <% if item[:href].present? %>
+                <a 
+                  href="<%= item[:href] %>" 
+                  class="<%= (item[:active] || false) ? 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 bg-gray-100 text-gray-900' : 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 text-gray-700 hover:bg-gray-50 hover:text-gray-900' %>"
+                >
+                  <% if item[:icon].present? %>
+                    <span class="mr-3 text-gray-400 group-hover:text-gray-500">
+                      <%= bui_icon(item[:icon], size: :medium) %>
+                    </span>
+                  <% end %>
+                  <%= item[:label] %>
+                  <% if item[:badge].present? %>
+                    <span class="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                      <%= item[:badge] %>
+                    </span>
+                  <% end %>
+                </a>
+              <% else %>
+                <div class="<%= (item[:active] || false) ? 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 bg-gray-100 text-gray-900' : 'group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 text-gray-700 hover:bg-gray-50 hover:text-gray-900' %> cursor-default">
+                  <% if item[:icon].present? %>
+                    <span class="mr-3 text-gray-400">
+                      <%= bui_icon(item[:icon], size: :medium) %>
+                    </span>
+                  <% end %>
+                  <%= item[:label] %>
+                  <% if item[:badge].present? %>
+                    <span class="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                      <%= item[:badge] %>
+                    </span>
+                  <% end %>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= content if content.present? %>
+  </nav>
+
+  <!-- Footer Section -->
+  <% if has_footer? %>
+    <div class="px-6 py-4 border-t border-gray-200">
+      <% if footer[:user_info].present? %>
+        <div class="flex items-center">
+          <% if footer[:user_info][:avatar].present? %>
+            <div class="flex-shrink-0">
+              <% if footer[:user_info][:avatar].is_a?(Hash) %>
+                <%= bui_avatar(**footer[:user_info][:avatar]) %>
+              <% else %>
+                <%= footer[:user_info][:avatar].html_safe %>
+              <% end %>
+            </div>
+          <% end %>
+          <div class="<%= footer[:user_info][:avatar].present? ? 'ml-3' : '' %>">
+            <% if footer[:user_info][:name].present? %>
+              <p class="text-sm font-medium text-gray-700">
+                <%= footer[:user_info][:name] %>
+              </p>
+            <% end %>
+            <% if footer[:user_info][:email].present? %>
+              <p class="text-xs text-gray-500">
+                <%= footer[:user_info][:email] %>
+              </p>
+            <% end %>
+          </div>
+          <% if footer[:user_info][:menu_button].present? %>
+            <div class="ml-auto">
+              <%= footer[:user_info][:menu_button] %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+      
+      <% if footer[:content].present? %>
+        <div class="<%= footer[:user_info].present? ? 'mt-4' : '' %>">
+          <%= footer[:content] %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</aside>

data/app/components/better_ui/application/sidebar/component.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Sidebar
+      class Component < ViewComponent::Base
+        # Include degli helper per utilizzare bui_icon e bui_avatar
+        include BetterUi::General::Components::Icon::IconHelper
+        include BetterUi::General::Components::Avatar::AvatarHelper
+        attr_reader :width, :position, :theme, :shadow, :border, :header, :footer, :navigation_sections, :collapsible, :classes
+
+        # Larghezze sidebar con classi Tailwind dirette
+        SIDEBAR_WIDTHS = {
+          sm: "w-48",
+          md: "w-64",
+          lg: "w-72",
+          xl: "w-80"
+        }
+
+        # Temi sidebar con classi Tailwind dirette
+        SIDEBAR_THEMES = {
+          default: "bg-white text-gray-900",
+          dark: "bg-gray-900 text-white",
+          light: "bg-white text-gray-900"
+        }
+
+        # Ombre sidebar con classi Tailwind dirette
+        SIDEBAR_SHADOWS = {
+          none: "",
+          sm: "shadow-sm",
+          md: "shadow-md",
+          lg: "shadow-lg",
+          xl: "shadow-xl"
+        }
+
+        # Bordi sidebar con classi Tailwind dirette
+        SIDEBAR_BORDERS = {
+          left: "border-r border-gray-200",
+          right: "border-l border-gray-200"
+        }
+
+        # @param width [Symbol] Larghezza della sidebar (:sm, :md, :lg, :xl), default :md (w-64)
+        # @param position [Symbol] Posizione della sidebar (:left, :right), default :left
+        # @param theme [Symbol] Tema colori (:default, :dark, :light), default :default
+        # @param shadow [Symbol] Tipo di ombra (:none, :sm, :md, :lg), default :lg
+        # @param border [Boolean] Se mostrare il bordo destro/sinistro, default true
+        # @param header [Hash] Configurazione header (logo, title, subtitle)
+        # @param footer [Hash] Configurazione footer (content, user_info)
+        # @param navigation_sections [Array] Array di sezioni di navigazione
+        # @param collapsible [Boolean] Se abilitare sezioni collassabili, default true
+        # @param classes [String] Classi CSS aggiuntive
+        def initialize(
+          width: :md,
+          position: :left,
+          theme: :default,
+          shadow: :lg,
+          border: true,
+          header: {},
+          footer: {},
+          navigation_sections: [],
+          collapsible: true,
+          classes: nil
+        )
+          @width = width.to_sym
+          @position = position.to_sym
+          @theme = theme.to_sym
+          @shadow = shadow.to_sym
+          @border = border
+          @header = header || {}
+          @footer = footer || {}
+          @navigation_sections = navigation_sections || []
+          @collapsible = collapsible
+          @classes = classes
+        end
+
+        def container_classes
+          base_classes = %w[fixed inset-y-0 z-50 flex flex-col overflow-y-auto]
+          
+          # Posizione
+          base_classes << (position == :right ? "right-0" : "left-0")
+          
+          # Larghezza
+          base_classes << width_class
+          
+          # Tema
+          base_classes.concat(theme_classes)
+          
+          # Shadow
+          base_classes << shadow_class if shadow != :none
+          
+          # Border
+          base_classes << border_class if border
+          
+          # Classi aggiuntive
+          base_classes << classes if classes.present?
+          
+          base_classes.compact.join(" ")
+        end
+
+
+        def has_header?
+          header.present? && (header[:title].present? || header[:logo].present?)
+        end
+
+        def has_footer?
+          footer.present? && (footer[:content].present? || footer[:user_info].present?)
+        end
+
+        private
+
+        def width_class
+          SIDEBAR_WIDTHS[@width] || SIDEBAR_WIDTHS[:md]
+        end
+
+        def theme_classes
+          (SIDEBAR_THEMES[@theme] || SIDEBAR_THEMES[:default]).split
+        end
+
+        def shadow_class
+          SIDEBAR_SHADOWS[@shadow] || SIDEBAR_SHADOWS[:none]
+        end
+
+        def border_class
+          SIDEBAR_BORDERS[@position] || SIDEBAR_BORDERS[:left]
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/alert/component.html.erb

@@ -0,0 +1,32 @@
+<div <%= tag.attributes(alert_attributes) %>>
+  <% if (@icon.blank? ? default_icon : @icon) && @icon_position == :left %>
+    <div class="<%= get_icon_classes %> <%= get_icon_theme_class %>">
+      <%= render BetterUi::General::Icon::Component.new(name: @icon.blank? ? default_icon : @icon) %>
+    </div>
+  <% end %>
+
+  <div class="<%= get_content_classes %>">
+    <% if @title.present? %>
+      <div class="<%= ALERT_TITLE_CLASSES %>"><%= @title %></div>
+    <% end %>
+    <div class="<%= ALERT_MESSAGE_CLASSES %>">
+      <% if @html_content %>
+        <%= raw @message %>
+      <% else %>
+        <%= @message %>
+      <% end %>
+    </div>
+  </div>
+
+  <% if (@icon.blank? ? default_icon : @icon) && @icon_position == :right %>
+    <div class="<%= get_icon_classes %> <%= get_icon_theme_class %>">
+      <%= render BetterUi::General::Icon::Component.new(name: @icon.blank? ? default_icon : @icon) %>
+    </div>
+  <% end %>
+
+  <% if @dismissible %>
+    <button type="button" class="<%= get_close_classes %>" aria-label="Chiudi">
+      <%= render BetterUi::General::Icon::Component.new(name: "x", size: :sm) %>
+    </button>
+  <% end %>
+</div>