better_ui 0.3.0 → 0.4.0

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

@@ -1,123 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module Application
-    module Main
-      class Component < ViewComponent::Base
-        attr_reader :padding, :inner_padding, :rounded, :shadow, :with_sidebar, :sidebar_width, :classes
-
-        # Arrotondamento bordi con classi Tailwind dirette
-        MAIN_ROUNDED = {
-          none: "",
-          small: "rounded-lg",
-          medium: "rounded-xl",
-          large: "rounded-2xl",
-          full: "rounded-full"
-        }.freeze
-
-        # Ombre con classi Tailwind dirette
-        MAIN_SHADOW = {
-          none: "",
-          small: "shadow-sm",
-          medium: "shadow-md", 
-          large: "shadow-lg"
-        }.freeze
-        
-        # Padding con classi Tailwind dirette
-        MAIN_PADDING = {
-          true: "p-6",
-          false: "p-0"
-        }.freeze
-        
-        # Classi layout per sidebar
-        MAIN_LAYOUT = {
-          sidebar: { sm: "pl-48", md: "pl-64", lg: "pl-72", xl: "pl-80" },  # Con Sidebar
-          none: ""              # Senza sidebar
-        }.freeze
-        
-        # Larghezza sidebar (deve corrispondere a SIDEBAR_WIDTHS del componente Sidebar)
-        MAIN_SIDEBAR_WIDTH = {
-          sm: 48,
-          md: 64,
-          lg: 72,
-          xl: 80
-        }.freeze
-        
-        # @param padding [Boolean] Se applicare il padding al contenitore principale
-        # @param inner_padding [Boolean] Se applicare il padding al contenitore interno
-        # @param rounded [Symbol] Tipo di border-radius del contenitore interno (:none, :small, :medium, :large, :full), default :small
-        # @param shadow [Symbol] Tipo di ombra del contenitore interno (:none, :small, :medium, :large), default :medium
-        # @param with_sidebar [Boolean] Se lasciare lo spazio per la sidebar
-        # @param sidebar_width [Symbol] Larghezza della sidebar (:sm, :md, :lg, :xl), default :md
-        # @param classes [String] Classi CSS aggiuntive per il contenitore principale
-        def initialize(
-          padding: true,
-          inner_padding: true,
-          rounded: :small,
-          shadow: :medium,
-          with_sidebar: true,
-          sidebar_width: :md,
-          classes: nil
-        )
-          @padding = padding
-          @inner_padding = inner_padding
-          @rounded = rounded.to_sym
-          @shadow = shadow.to_sym
-          @with_sidebar = with_sidebar
-          @sidebar_width = sidebar_width.to_sym
-          @classes = classes
-          
-          validate_params
-        end
-
-
-        
-        private
-        
-        def get_layout_class
-          if with_sidebar
-            MAIN_LAYOUT[:sidebar][@sidebar_width] || MAIN_LAYOUT[:sidebar][:md]
-          else
-            MAIN_LAYOUT[:none]
-          end
-        end
-        
-        def get_padding_class(enabled)
-          MAIN_PADDING[enabled] || MAIN_PADDING[false]
-        end
-        
-        def get_rounded_class
-          MAIN_ROUNDED[@rounded] || MAIN_ROUNDED[:small]
-        end
-        
-        def get_shadow_class
-          MAIN_SHADOW[@shadow] || MAIN_SHADOW[:medium]
-        end
-        
-        def validate_params
-          validate_rounded
-          validate_shadow
-          validate_sidebar_width if with_sidebar
-        end
-        
-        def validate_rounded
-          unless MAIN_ROUNDED.keys.include?(@rounded)
-            raise ArgumentError, "L'arrotondamento deve essere uno tra: #{MAIN_ROUNDED.keys.join(', ')}"
-          end
-        end
-        
-        def validate_shadow
-          unless MAIN_SHADOW.keys.include?(@shadow)
-            raise ArgumentError, "L'ombra deve essere una tra: #{MAIN_SHADOW.keys.join(', ')}"
-          end
-        end
-        
-        def validate_sidebar_width
-          unless MAIN_SIDEBAR_WIDTH.keys.include?(@sidebar_width)
-            raise ArgumentError, "La larghezza della sidebar deve essere una tra: #{MAIN_SIDEBAR_WIDTH.keys.join(', ')}"
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,92 +0,0 @@
-<header class="<%= container_classes %>">
-  <div class="flex items-center justify-between">
-    <!-- Left side - custom content-->
-    <div class="flex items-center">
-      <%= content %>
-    </div>
-
-    <!-- User actions -->
-    <div class="flex items-center space-x-4">
-      <% if has_actions? %>
-        <% actions.each do |action| %>
-          <div class="flex-shrink-0">
-            <% if action[:type] == :button %>
-              <% if action[:href].present? %>
-                <a 
-                  href="<%= action[:href] %>" 
-                  class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 <%= action[:theme] == :primary ? 'bg-gray-900 text-white hover:bg-gray-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' %>"
-                >
-                  <% if action[:icon].present? %>
-                    <%= bui_icon(action[:icon], size: :small) %>
-                    <% if action[:label].present? %>
-                      <span class="ml-2"><%= action[:label] %></span>
-                    <% end %>
-                  <% else %>
-                    <%= action[:label] %>
-                  <% end %>
-                </a>
-              <% else %>
-                <button 
-                  type="button"
-                  class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 <%= action[:theme] == :primary ? 'bg-gray-900 text-white hover:bg-gray-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' %>"
-                  <% if action[:data].present? %>
-                    <% action[:data].each do |key, value| %>
-                      data-<%= key %>="<%= value %>"
-                    <% end %>
-                  <% end %>
-                >
-                  <% if action[:icon].present? %>
-                    <%= bui_icon(action[:icon], size: :small) %>
-                    <% if action[:label].present? %>
-                      <span class="ml-2"><%= action[:label] %></span>
-                    <% end %>
-                  <% else %>
-                    <%= action[:label] %>
-                  <% end %>
-                </button>
-              <% end %>
-            <% elsif action[:type] == :avatar %>
-              <% if action[:href].present? %>
-                <a href="<%= action[:href] %>" class="flex-shrink-0 hover:opacity-75 transition-opacity duration-150">
-              <% end %>
-              
-              <% if action[:avatar].is_a?(Hash) %>
-                <%= bui_avatar(**action[:avatar]) %>
-              <% else %>
-                <%= action[:avatar].html_safe %>
-              <% end %>
-              
-              <% if action[:href].present? %>
-                </a>
-              <% end %>
-            <% elsif action[:type] == :icon %>
-              <% if action[:href].present? %>
-                <a 
-                  href="<%= action[:href] %>" 
-                  class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors duration-150"
-                >
-                  <%= bui_icon(action[:icon], size: :medium) %>
-                </a>
-              <% else %>
-                <button 
-                  type="button"
-                  class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors duration-150"
-                  <% if action[:data].present? %>
-                    <% action[:data].each do |key, value| %>
-                      data-<%= key %>="<%= value %>"
-                    <% end %>
-                  <% end %>
-                >
-                  <%= bui_icon(action[:icon], size: :medium) %>
-                </button>
-              <% end %>
-            <% else %>
-              <!-- Custom content -->
-              <%= action[:content].html_safe if action[:content].present? %>
-            <% end %>
-          </div>
-        <% end %>
-      <% end %>
-    </div>
-  </div>
-</header>

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

@@ -1,136 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module Application
-    module Navbar
-      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 :theme, :shadow, :border, :actions, :classes, :with_sidebar, :sidebar_width
-
-        # Temi navbar con classi Tailwind dirette
-        NAVBAR_THEME = {
-          default: "bg-white text-gray-900 border-gray-200",
-          white: "bg-white text-gray-900 border-gray-200",
-          red: "bg-red-50 text-red-900 border-red-200",
-          rose: "bg-rose-50 text-rose-900 border-rose-200",
-          orange: "bg-orange-50 text-orange-900 border-orange-200",
-          green: "bg-green-50 text-green-900 border-green-200",
-          blue: "bg-blue-50 text-blue-900 border-blue-200",
-          yellow: "bg-yellow-50 text-yellow-900 border-yellow-200",
-          violet: "bg-violet-50 text-violet-900 border-violet-200"
-        }.freeze
-
-        # Ombre navbar con classi Tailwind dirette
-        NAVBAR_SHADOW = {
-          none: "",
-          small: "shadow-sm",
-          medium: "shadow-md",
-          large: "shadow-lg"
-        }.freeze
-        
-        # Larghezze sidebar con valori numerici per utilizzo in classi custom
-        NAVBAR_SIDEBAR_WIDTH = {
-          sm: 48,
-          md: 64,
-          lg: 72,
-          xl: 80
-        }.freeze
-
-        # @param theme [Symbol] Tema colori (default, white, red, rose, orange, green, blue, yellow, violet), default :default
-        # @param shadow [Symbol] Tipo di ombra (none, small, medium, large), default :small
-        # @param border [Boolean] Se mostrare il bordo inferiore, default true
-        # @param actions [Array] Array di azioni/pulsanti a destra
-        # @param classes [String] Classi CSS aggiuntive
-        # @param with_sidebar [Boolean] Se la navbar è affiancata a una sidebar, default false
-        # @param sidebar_width [Symbol] Larghezza della sidebar affiancata (:sm, :md, :lg, :xl), default :md
-        def initialize(
-          theme: :default,
-          shadow: :small,
-          border: false,
-          actions: [],
-          classes: nil,
-          with_sidebar: false,
-          sidebar_width: :md
-        )
-          @theme = theme.to_sym
-          @shadow = shadow.to_sym
-          @border = border
-          @actions = actions || []
-          @classes = classes
-          @with_sidebar = with_sidebar
-          @sidebar_width = sidebar_width.to_sym
-
-          validate_params
-        end
-
-        def container_classes
-          base_classes = %w[h-[81px] px-6 py-4]
-          
-          # Width
-          if with_sidebar
-            sidebar_width_value = NAVBAR_SIDEBAR_WIDTH[@sidebar_width] || NAVBAR_SIDEBAR_WIDTH[:md]
-            base_classes << "pl-#{sidebar_width_value}"
-            base_classes << "ml-auto"
-          else
-            base_classes << "w-full"
-          end
-
-          # 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_actions?
-          actions.present? && actions.any?
-        end
-
-        private
-
-        def theme_classes
-          NAVBAR_THEME[@theme] || NAVBAR_THEME[:default]
-        end
-
-        def shadow_class
-          NAVBAR_SHADOW[@shadow] || NAVBAR_SHADOW[:small]
-        end
-        
-        def validate_params
-          validate_theme
-          validate_shadow
-          validate_sidebar_width if with_sidebar
-        end
-        
-        def validate_theme
-          unless NAVBAR_THEME.keys.include?(@theme)
-            raise ArgumentError, "Il tema deve essere uno tra: #{NAVBAR_THEME.keys.join(', ')}"
-          end
-        end
-        
-        def validate_shadow
-          unless NAVBAR_SHADOW.keys.include?(@shadow)
-            raise ArgumentError, "L'ombra deve essere una tra: #{NAVBAR_SHADOW.keys.join(', ')}"
-          end
-        end
-        
-        def validate_sidebar_width
-          unless NAVBAR_SIDEBAR_WIDTH.keys.include?(@sidebar_width)
-            raise ArgumentError, "La larghezza della sidebar deve essere una tra: #{NAVBAR_SIDEBAR_WIDTH.keys.join(', ')}"
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,227 +0,0 @@
-<div data-controller="bui-sidebar" 
-     data-bui-sidebar-width-value="<%= @width == :md ? 256 : 320 %>"
-     data-bui-sidebar-min-width-value="200"
-     data-bui-sidebar-max-width-value="400"
-     data-bui-sidebar-pinned-value="true">
-  
-  <!-- Mobile Overlay -->
-  <div data-bui-sidebar-target="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"></div>
-  
-  <!-- Sidebar Container -->
-  <aside data-bui-sidebar-target="container" class="<%= container_classes %>">
-  <!-- Header Section -->
-  <% if has_header? %>
-    <div class="px-6 py-4 border-b border-gray-200">
-      <div class="flex items-center justify-between">
-        <% 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 %>
-        
-        <!-- Collapse Button (solo se collapsible) -->
-        <% if collapsible %>
-          <%= bui_button(
-            icon: "arrow-left",
-            type: :white,
-            size: :small,
-            title: "Comprimi sidebar"
-          ) %>
-        <% end %>
-      </div>
-    </div>
-  <% end %>
-
-  <!-- Navigation Section -->
-  <nav class="flex-1 px-4 py-6 space-y-6 overflow-y-auto">
-    <% navigation_sections.each do |section| %>
-      <div class="space-y-2">
-        <!-- Section Title -->
-        <% if section[:title].present? %>
-          <% if section[:href] %>
-            <%= link_to section[:href], class: "px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider" do %>
-              <%= section[:title] %>
-            <% end %>
-          <% else %>
-            <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
-              <%= section[:title] %>
-            </h3>
-          <% end %>
-        <% 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-bui-sidebar-target="sectionTrigger"
-                  data-bui-sidebar-section-id="<%= item[:id] %>"
-                  data-action="click->bui-sidebar#toggleSection"
-                  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] %>" data-bui-sidebar-chevron>
-                    <%= bui_icon("chevron-right", size: :small) %>
-                  </span>
-                </button>
-                
-                <div 
-                  data-bui-sidebar-target="sectionContent"
-                  data-bui-sidebar-section-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 %>
-  
-  <!-- Resize Handle (solo se NON collapsible) -->
-  <% unless collapsible %>
-    <div data-bui-sidebar-target="resizeHandle" 
-         class="absolute top-0 right-0 w-1 h-full bg-transparent hover:bg-blue-500 cursor-col-resize transition-colors duration-150 group">
-      <div class="absolute inset-y-0 -right-1 w-3 flex items-center justify-center">
-        <div class="w-0.5 h-8 bg-gray-300 group-hover:bg-blue-500 transition-colors duration-150"></div>
-      </div>
-    </div>
-  <% end %>
-</aside>
-
-</div>