better_ui 0.3.0 → 0.5.0

data/app/components/better_ui/application/header_component.rb

@@ -0,0 +1,188 @@
+module BetterUi
+  module Application
+    class HeaderComponent < ViewComponent::Base
+      attr_reader :title, :subtitle, :breadcrumbs, :actions, :variant, :fixed, :container_class, :classes, :data, :show_breadcrumbs
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        light: {
+          bg: "bg-white border-gray-200",
+          text: "text-gray-700",
+          title: "text-gray-900",
+          subtitle: "text-gray-500",
+          border: "border-gray-200",
+          breadcrumb_text: "text-gray-500",
+          breadcrumb_hover: "hover:text-gray-700",
+          breadcrumb_active: "text-gray-900",
+          breadcrumb_divider: "text-gray-400"
+        },
+        dark: {
+          bg: "bg-gray-800 border-gray-700",
+          text: "text-gray-200",
+          title: "text-white",
+          subtitle: "text-gray-400",
+          border: "border-gray-700",
+          breadcrumb_text: "text-gray-400",
+          breadcrumb_hover: "hover:text-white",
+          breadcrumb_active: "text-white",
+          breadcrumb_divider: "text-gray-500"
+        },
+        primary: {
+          bg: "bg-orange-600",
+          text: "text-white",
+          title: "text-white",
+          subtitle: "text-orange-100",
+          border: "border-orange-500",
+          breadcrumb_text: "text-orange-200",
+          breadcrumb_hover: "hover:text-white",
+          breadcrumb_active: "text-white",
+          breadcrumb_divider: "text-orange-300"
+        },
+        transparent: {
+          bg: "bg-transparent",
+          text: "text-gray-700",
+          title: "text-gray-900",
+          subtitle: "text-gray-500",
+          border: "border-gray-200",
+          breadcrumb_text: "text-gray-500",
+          breadcrumb_hover: "hover:text-gray-700",
+          breadcrumb_active: "text-gray-900",
+          breadcrumb_divider: "text-gray-400"
+        },
+        modern: {
+          bg: "bg-white",
+          text: "text-gray-700",
+          title: "text-gray-900",
+          subtitle: "text-gray-500",
+          border: "border-gray-100",
+          breadcrumb_text: "text-gray-500",
+          breadcrumb_hover: "hover:text-gray-700",
+          breadcrumb_active: "text-gray-900",
+          breadcrumb_divider: "text-gray-400"
+        }
+      }
+
+      # Opzioni per la posizione fissa
+      FIXED_POSITIONS = {
+        top: "sticky top-0 z-40",
+        bottom: "sticky bottom-0 z-40"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        title:,
+        subtitle: nil,
+        breadcrumbs: [],
+        actions: [],
+        variant: :modern,
+        fixed: nil,
+        container_class: "container mx-auto px-4",
+        classes: nil,
+        data: {},
+        show_breadcrumbs: true
+      )
+        @title = title
+        @subtitle = subtitle
+        @breadcrumbs = breadcrumbs || []
+        @actions = actions || []
+        @variant = variant.to_sym
+        @fixed = fixed.to_sym if fixed
+        @container_class = container_class
+        @classes = classes
+        @data = data || {}
+        @show_breadcrumbs = show_breadcrumbs
+      end
+
+      # Genera le classi per il container del header
+      def header_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        position_class = @fixed.present? ? FIXED_POSITIONS[@fixed] : nil
+
+        cls = [
+          "w-full py-4",
+          styles[:bg],
+          position_class,
+          @classes
+        ]
+
+        # Aggiungi il bordo inferiore solo se non è trasparente
+        cls << "border-b" unless @variant == :transparent
+
+        cls.compact.join(" ")
+      end
+
+      # Genera classi per il titolo
+      def title_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+
+        [
+          "text-xl font-medium leading-6",
+          styles[:title]
+        ].join(" ")
+      end
+
+      # Genera classi per il sottotitolo
+      def subtitle_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+
+        [
+          "mt-1 text-sm",
+          styles[:subtitle]
+        ].join(" ")
+      end
+
+      # Genera classi per il breadcrumb
+      def breadcrumb_container_classes
+        "flex mb-3"
+      end
+
+      # Genera classi per i link del breadcrumb
+      def breadcrumb_link_classes(active = false)
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        if active
+          [
+            "text-sm font-medium",
+            styles[:breadcrumb_active]
+          ].join(" ")
+        else
+          [
+            "text-sm font-medium",
+            styles[:breadcrumb_text],
+            styles[:breadcrumb_hover]
+          ].join(" ")
+        end
+      end
+
+      # Genera classi per il divisore del breadcrumb
+      def breadcrumb_divider_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "mx-2 text-sm",
+          styles[:breadcrumb_divider]
+        ].join(" ")
+      end
+
+      # Genera classi per il contenitore delle azioni
+      def actions_container_classes
+        "mt-4 md:mt-0 flex flex-shrink-0 md:ml-4"
+      end
+
+      # Verifica se il componente deve essere reso
+      def render?
+        true
+      end
+
+      # Ritorna la lista delle azioni
+      def action_items
+        @actions
+      end
+
+      # Ritorna i breadcrumbs
+      def has_breadcrumbs?
+        @show_breadcrumbs && @breadcrumbs.present? && @breadcrumbs.any?
+      end
+    end
+  end
+end 

data/app/components/better_ui/application/navbar_component.html.erb

@@ -0,0 +1,294 @@
+<nav class="<%= navbar_classes %>" <%= @data&.map { |k, v| "data-#{k}=\"#{v}\"" }&.join(' ')&.html_safe %>>
+  <div class="<%= container_class %>">
+    <div class="flex items-center justify-between mx-auto py-3">
+      <% # Logo / Brand %>
+      <% if @brand.present? %>
+        <div class="flex items-center">
+          <% if @brand.is_a?(Hash) %>
+            <% if @brand[:logo].present? %>
+              <% if @brand[:url].present? %>
+                <a href="<%= @brand[:url] %>" class="flex items-center">
+                  <%= @brand[:logo].html_safe %>
+                  <% if @brand[:name].present? %>
+                    <span class="text-base font-semibold whitespace-nowrap ml-3 text-gray-900"><%= @brand[:name] %></span>
+                  <% end %>
+                </a>
+              <% else %>
+                <div class="flex items-center">
+                  <%= @brand[:logo].html_safe %>
+                  <% if @brand[:name].present? %>
+                    <span class="text-base font-semibold whitespace-nowrap ml-3 text-gray-900"><%= @brand[:name] %></span>
+                  <% end %>
+                </div>
+              <% end %>
+            <% elsif @brand[:name].present? %>
+              <% if @variant == :modern %>
+                <% if @brand[:url].present? %>
+                  <a href="<%= @brand[:url] %>" class="flex items-center">
+                    <div class="bg-gray-900 rounded-md p-2 mr-2">
+                      <svg class="w-5 h-5 text-white" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+                        <path fill-rule="evenodd" d="M4.5 9.75a6 6 0 0111.573-2.226 3.75 3.75 0 014.133 4.303A4.5 4.5 0 0118 20.25H6.75a5.25 5.25 0 01-2.23-10.004 6.072 6.072 0 01-.02-.496z" clip-rule="evenodd"></path>
+                      </svg>
+                    </div>
+                    <div>
+                      <span class="text-base font-semibold text-gray-900"><%= @brand[:name] %></span>
+                      <% if @brand[:subtitle].present? %>
+                        <p class="text-sm text-gray-500"><%= @brand[:subtitle] %></p>
+                      <% end %>
+                    </div>
+                  </a>
+                <% else %>
+                  <div class="flex items-center">
+                    <div class="bg-gray-900 rounded-md p-2 mr-2">
+                      <svg class="w-5 h-5 text-white" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+                        <path fill-rule="evenodd" d="M4.5 9.75a6 6 0 0111.573-2.226 3.75 3.75 0 014.133 4.303A4.5 4.5 0 0118 20.25H6.75a5.25 5.25 0 01-2.23-10.004 6.072 6.072 0 01-.02-.496z" clip-rule="evenodd"></path>
+                      </svg>
+                    </div>
+                    <div>
+                      <span class="text-base font-semibold text-gray-900"><%= @brand[:name] %></span>
+                      <% if @brand[:subtitle].present? %>
+                        <p class="text-sm text-gray-500"><%= @brand[:subtitle] %></p>
+                      <% end %>
+                    </div>
+                  </div>
+                <% end %>
+              <% else %>
+                <% if @brand[:url].present? %>
+                  <a href="<%= @brand[:url] %>" class="text-xl font-semibold whitespace-nowrap">
+                    <%= @brand[:name] %>
+                  </a>
+                <% else %>
+                  <span class="text-xl font-semibold whitespace-nowrap"><%= @brand[:name] %></span>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% else %>
+            <% if @variant == :modern %>
+              <div class="flex items-center">
+                <div class="bg-gray-900 rounded-md p-2 mr-2">
+                  <svg class="w-5 h-5 text-white" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+                    <path fill-rule="evenodd" d="M4.5 9.75a6 6 0 0111.573-2.226 3.75 3.75 0 014.133 4.303A4.5 4.5 0 0118 20.25H6.75a5.25 5.25 0 01-2.23-10.004 6.072 6.072 0 01-.02-.496z" clip-rule="evenodd"></path>
+                  </svg>
+                </div>
+                <span class="text-base font-semibold text-gray-900"><%= @brand %></span>
+              </div>
+            <% else %>
+              <span class="text-xl font-semibold whitespace-nowrap"><%= @brand %></span>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div class="flex items-center">
+        <% # Menu principale della navbar visibile su desktop %>
+        <div class="hidden md:block">
+          <% if navigation_items.any? %>
+            <ul class="flex items-center space-x-1">
+              <% navigation_items.each do |item| %>
+                <li class="<%= has_dropdown?(item) ? 'group relative' : '' %>">
+                  <% if item[:url].present? %>
+                    <a 
+                      href="<%= item[:url] %>" 
+                      class="<%= nav_link_classes(active_item?(item)) %>"
+                      <% if item[:target].present? %>target="<%= item[:target] %>"<% end %>
+                    >
+                      <% if item[:icon].present? %>
+                        <span class="flex-shrink-0 mr-2 text-gray-500 w-5 h-5 inline-flex items-center justify-center">
+                          <% if @variant == :modern %>
+                            <% if item[:icon] == "home" %>
+                              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                              </svg>
+                            <% elsif item[:icon] == "settings" || item[:icon] == "gear" %>
+                              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                              </svg>
+                            <% elsif item[:icon] == "user" || item[:icon] == "profile" %>
+                              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                              </svg>
+                            <% else %>
+                              <%= render BetterUi::General::IconComponent.new(name: item[:icon]) %>
+                            <% end %>
+                          <% else %>
+                            <%= render BetterUi::General::IconComponent.new(name: item[:icon]) %>
+                          <% end %>
+                        </span>
+                      <% end %>
+                      <span><%= item[:label] %></span>
+                      <% if has_dropdown?(item) %>
+                        <% if @variant == :modern %>
+                          <svg class="w-4 h-4 ml-1 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                          </svg>
+                        <% else %>
+                          <span class="ml-1">
+                            <%= render BetterUi::General::IconComponent.new(name: "chevron-down") %>
+                          </span>
+                        <% end %>
+                      <% end %>
+                    </a>
+                  <% else %>
+                    <span class="<%= nav_link_classes(active_item?(item)) %>">
+                      <% if item[:icon].present? %>
+                        <span class="flex-shrink-0 mr-2 text-gray-500 w-5 h-5 inline-flex items-center justify-center">
+                          <%= render BetterUi::General::IconComponent.new(name: item[:icon]) %>
+                        </span>
+                      <% end %>
+                      <%= item[:label] %>
+                      <% if has_dropdown?(item) %>
+                        <% if @variant == :modern %>
+                          <svg class="w-4 h-4 ml-1 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                          </svg>
+                        <% else %>
+                          <span class="ml-1">
+                            <%= render BetterUi::General::IconComponent.new(name: "chevron-down") %>
+                          </span>
+                        <% end %>
+                      <% end %>
+                    </span>
+                  <% end %>
+                  
+                  <% # Dropdown menu %>
+                  <% if has_dropdown?(item) %>
+                    <div class="<%= dropdown_classes %>">
+                      <% item[:dropdown].each do |dropdown_item| %>
+                        <a 
+                          href="<%= dropdown_item[:url] || '#' %>" 
+                          class="<%= dropdown_link_classes %>"
+                          <% if dropdown_item[:target].present? %>target="<%= dropdown_item[:target] %>"<% end %>
+                        >
+                          <% if dropdown_item[:icon].present? %>
+                            <span class="mr-2 inline-block text-gray-500">
+                              <%= render BetterUi::General::IconComponent.new(name: dropdown_item[:icon]) %>
+                            </span>
+                          <% end %>
+                          <%= dropdown_item[:label] %>
+                        </a>
+                      <% end %>
+                    </div>
+                  <% end %>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+        </div>
+        
+        <% # Azioni aggiuntive (pulsanti, ricerca, ecc.) %>
+        <% if action_items.any? %>
+          <div class="flex items-center ml-4">
+            <% action_items.each do |action| %>
+              <div class="ml-2">
+                <% if action.is_a?(Hash) && action[:content].present? %>
+                  <%= action[:content].html_safe %>
+                <% elsif action.is_a?(String) %>
+                  <%= action.html_safe %>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+        
+        <% # Pulsante hamburger per menu mobile %>
+        <button 
+          data-action="navbar#toggleMenu" 
+          type="button" 
+          class="<%= mobile_toggle_classes %>" 
+          aria-controls="navbar-menu" 
+          aria-expanded="false"
+        >
+          <span class="sr-only">Apri menu</span>
+          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+    
+    <% # Menu mobile %>
+    <div class="hidden md:hidden mt-2 pb-2" id="navbar-menu" data-navbar-target="menu">
+      <% if navigation_items.any? %>
+        <ul class="flex flex-col border-t border-gray-100 pt-2">
+          <% navigation_items.each do |item| %>
+            <li class="py-1">
+              <% if item[:url].present? && !has_dropdown?(item) %>
+                <a 
+                  href="<%= item[:url] %>" 
+                  class="<%= nav_link_classes(active_item?(item)) %>"
+                  <% if item[:target].present? %>target="<%= item[:target] %>"<% end %>
+                >
+                  <% if item[:icon].present? %>
+                    <span class="flex-shrink-0 mr-2 text-gray-500 w-5 h-5 inline-flex items-center justify-center">
+                      <%= render BetterUi::General::IconComponent.new(name: item[:icon]) %>
+                    </span>
+                  <% end %>
+                  <%= item[:label] %>
+                </a>
+              <% else %>
+                <div class="flex flex-col">
+                  <% dropdown_id = "dropdown-#{SecureRandom.hex(4)}" %>
+                  <button 
+                    type="button" 
+                    class="<%= nav_link_classes(active_item?(item)) %> w-full text-left flex items-center justify-between"
+                    data-action="click->navbar#toggleDropdown"
+                    data-navbar-target="dropdown"
+                    aria-expanded="false"
+                    aria-controls="<%= dropdown_id %>"
+                  >
+                    <div class="flex items-center">
+                      <% if item[:icon].present? %>
+                        <span class="flex-shrink-0 mr-2 text-gray-500 w-5 h-5 inline-flex items-center justify-center">
+                          <%= render BetterUi::General::IconComponent.new(name: item[:icon]) %>
+                        </span>
+                      <% end %>
+                      <%= item[:label] %>
+                    </div>
+                    <svg class="w-4 h-4 ml-1 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                  </button>
+                  
+                  <% if has_dropdown?(item) %>
+                    <div id="<%= dropdown_id %>" class="hidden pl-8 mt-1 space-y-1" data-navbar-target="submenu">
+                      <% item[:dropdown].each do |dropdown_item| %>
+                        <a 
+                          href="<%= dropdown_item[:url] || '#' %>" 
+                          class="block py-2 px-3 text-gray-700 hover:bg-gray-50 hover:text-gray-900 rounded-md"
+                          <% if dropdown_item[:target].present? %>target="<%= dropdown_item[:target] %>"<% end %>
+                        >
+                          <% if dropdown_item[:icon].present? %>
+                            <span class="mr-2 inline-block text-gray-500">
+                              <%= render BetterUi::General::IconComponent.new(name: dropdown_item[:icon]) %>
+                            </span>
+                          <% end %>
+                          <%= dropdown_item[:label] %>
+                        </a>
+                      <% end %>
+                    </div>
+                  <% end %>
+                </div>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+      
+      <% # Azioni aggiuntive nel menu mobile %>
+      <% if action_items.any? %>
+        <div class="mt-3 border-t border-gray-100 pt-3 px-3 space-y-2">
+          <% action_items.each do |action| %>
+            <div>
+              <% if action.is_a?(Hash) && action[:content].present? %>
+                <%= action[:content].html_safe %>
+              <% elsif action.is_a?(String) %>
+                <%= action.html_safe %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</nav>