better_ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,196 @@
+module BetterUi
+  module Application
+    class AlertComponent < ViewComponent::Base
+      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :icon_position, :outline
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        primary: {
+          bg: "bg-orange-50",
+          border: "border-orange-300",
+          title: "text-orange-800",
+          text: "text-orange-700",
+          icon: "text-orange-500",
+          close: "text-orange-500 hover:bg-orange-100",
+          outline_bg: "bg-white",
+          outline_text: "text-orange-700"
+        },
+        info: {
+          bg: "bg-blue-50",
+          border: "border-blue-300",
+          title: "text-blue-800",
+          text: "text-blue-700",
+          icon: "text-blue-500",
+          close: "text-blue-500 hover:bg-blue-100",
+          outline_bg: "bg-white",
+          outline_text: "text-blue-700"
+        },
+        success: {
+          bg: "bg-green-50",
+          border: "border-green-300",
+          title: "text-green-800",
+          text: "text-green-700",
+          icon: "text-green-500",
+          close: "text-green-500 hover:bg-green-100",
+          outline_bg: "bg-white",
+          outline_text: "text-green-700"
+        },
+        warning: {
+          bg: "bg-yellow-50",
+          border: "border-yellow-300",
+          title: "text-yellow-800",
+          text: "text-yellow-700",
+          icon: "text-yellow-500",
+          close: "text-yellow-500 hover:bg-yellow-100",
+          outline_bg: "bg-white",
+          outline_text: "text-yellow-700"
+        },
+        danger: {
+          bg: "bg-red-50",
+          border: "border-red-300",
+          title: "text-red-800",
+          text: "text-red-700",
+          icon: "text-red-500",
+          close: "text-red-500 hover:bg-red-100",
+          outline_bg: "bg-white",
+          outline_text: "text-red-700"
+        },
+        dark: {
+          bg: "bg-gray-800",
+          border: "border-gray-700",
+          title: "text-white",
+          text: "text-gray-300",
+          icon: "text-gray-400",
+          close: "text-gray-400 hover:bg-gray-700",
+          outline_bg: "bg-white",
+          outline_text: "text-gray-800"
+        },
+        simple: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          title: "text-gray-800 font-semibold",
+          text: "text-gray-600",
+          icon: "text-gray-500",
+          close: "text-gray-500 hover:bg-gray-100",
+          outline_bg: "bg-white",
+          outline_text: "text-gray-700"
+        }
+      }
+
+      # Icone predefinite per ciascuna variante
+      DEFAULT_ICONS = {
+        primary: "bell",
+        info: "info-circle",
+        success: "check-circle",
+        warning: "exclamation-triangle",
+        danger: "exclamation-circle",
+        dark: "shield-exclamation",
+        simple: "info-circle"
+      }
+
+      # Posizioni possibili per le icone
+      ICON_POSITIONS = [:left, :top]
+
+      # Inizializzazione del componente
+      def initialize(
+        title: nil,
+        message: nil,
+        variant: :simple,
+        icon: nil, 
+        dismissible: false,
+        classes: nil,
+        data: {},
+        icon_position: :left,
+        outline: false
+      )
+        @title = title
+        @message = message
+        @variant = variant.to_sym
+        @icon = icon
+        @dismissible = dismissible
+        @classes = classes
+        @data = data
+        @icon_position = icon_position.to_sym
+        @outline = outline
+      end
+
+      # Genera l'icona in base alla variante se non specificata
+      def effective_icon
+        return @icon if @icon.present?
+        DEFAULT_ICONS[@variant]
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        
+        base_classes = ["p-4 mb-4 flex"]
+        
+        if @variant == :simple
+          base_classes << "border rounded-md"
+        else
+          base_classes << "rounded-lg border"
+        end
+        
+        [
+          *base_classes,
+          @outline ? styles[:outline_bg] : styles[:bg],
+          styles[:border],
+          @icon_position == :top ? "flex-col" : "items-start",
+          @classes
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il titolo
+      def title_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        
+        [
+          @variant == :simple ? "font-semibold" : "font-medium",
+          @outline ? styles[:outline_text] : styles[:title]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il messaggio
+      def message_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        
+        [
+          "mt-1",
+          @outline ? styles[:outline_text] : styles[:text]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'icona
+      def icon_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        
+        [
+          "flex-shrink-0",
+          @icon_position == :left ? "mr-3 mt-0.5" : "mb-3",
+          styles[:icon]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il pulsante di chiusura
+      def close_button_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:simple])
+        
+        [
+          "ml-auto -mr-1.5 -mt-1.5 inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2 focus:ring-gray-400",
+          styles[:close]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il contenuto
+      def content_classes
+        "flex-1"
+      end
+
+      # Verifica se il componente deve essere reso
+      def render?
+        @title.present? || @message.present? || content.present?
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,88 @@
+<header class="<%= header_classes %>" <%= @data&.map { |k, v| "data-#{k}=\"#{v}\"" }&.join(' ')&.html_safe %>>
+  <div class="<%= container_class %>">
+    <div class="md:flex md:justify-between md:items-start">
+      <div class="min-w-0 flex-1">
+        <% if has_breadcrumbs? %>
+          <nav class="<%= breadcrumb_container_classes %>" aria-label="Breadcrumb">
+            <ol class="flex items-center">
+              <% @breadcrumbs.each_with_index do |breadcrumb, index| %>
+                <li class="flex items-center">
+                  <% if index > 0 %>
+                    <span class="<%= breadcrumb_divider_classes %>" aria-hidden="true">
+                      <% if variant == :modern %>
+                        <svg class="h-4 w-4" 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="M9 5l7 7-7 7" />
+                        </svg>
+                      <% else %>
+                        /
+                      <% end %>
+                    </span>
+                  <% end %>
+                  <% is_last = index == @breadcrumbs.length - 1 %>
+                  <% if is_last || !breadcrumb[:url].present? %>
+                    <span class="<%= breadcrumb_link_classes(is_last) %>" <%= is_last ? 'aria-current="page"' : '' %>>
+                      <%= breadcrumb[:text] %>
+                    </span>
+                  <% else %>
+                    <a href="<%= breadcrumb[:url] %>" class="<%= breadcrumb_link_classes %>">
+                      <%= breadcrumb[:text] %>
+                    </a>
+                  <% end %>
+                </li>
+              <% end %>
+            </ol>
+          </nav>
+        <% end %>
+        
+        <div class="flex items-center">
+          <% if @title.is_a?(Hash) && @title[:icon].present? %>
+            <div class="mr-3 bg-gray-100 rounded-md p-2 flex-shrink-0">
+              <% if @title[:icon] == "document" %>
+                <svg class="h-5 w-5 text-gray-500" 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              <% elsif @title[:icon] == "users" %>
+                <svg class="h-5 w-5 text-gray-500" 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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              <% elsif @title[:icon] == "settings" || @title[:icon] == "gear" %>
+                <svg class="h-5 w-5 text-gray-500" 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 @title[:icon] == "dashboard" %>
+                <svg class="h-5 w-5 text-gray-500" 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="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
+                </svg>
+              <% else %>
+                <%= render BetterUi::General::IconComponent.new(name: @title[:icon], classes: "h-5 w-5 text-gray-500") %>
+              <% end %>
+            </div>
+            <h1 class="<%= title_classes %>"><%= @title[:text] %></h1>
+          <% else %>
+            <h1 class="<%= title_classes %>"><%= @title %></h1>
+          <% end %>
+        </div>
+        <% if @subtitle.present? %>
+          <p class="<%= subtitle_classes %>">
+            <%= @subtitle %>
+          </p>
+        <% end %>
+      </div>
+
+      <% if action_items.any? %>
+        <div class="<%= actions_container_classes %>">
+          <% 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 %>
+    </div>
+  </div>
+</header> 

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