better_ui 0.6.0 → 0.7.1

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

@@ -1,249 +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"
-     class="<%= wrapper_classes %>">
-  
-  <!-- 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 has_user_dropdown? %>
-        <!-- User Dropdown -->
-        <% user_dropdown = footer[:user_dropdown] %>
-        <%= bui_dropdown(
-          trigger: user_dropdown_trigger,
-          position: :top,
-          theme: :white,
-          fullwidth: true,
-          show_chevron: false
-        ) do %>
-          <% (user_dropdown[:menu_items] || []).each do |item| %>
-            <%= bui_dropdown_item(
-              text: item[:text],
-              icon: item[:icon],
-              href: item[:href],
-              theme: item[:theme] || :default,
-              active: item[:active] || false,
-              disabled: item[:disabled] || false
-            ) %>
-          <% end %>
-        <% end %>
-      <% elsif 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? || has_user_dropdown?) ? '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>

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

@@ -1,187 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module Application
-    module Sidebar
-      class Component < ViewComponent::Base
-        # Include degli helper per utilizzare bui_icon, bui_avatar, bui_button e bui_dropdown
-        include BetterUi::General::Components::Icon::IconHelper
-        include BetterUi::General::Components::Avatar::AvatarHelper
-        include BetterUi::General::Components::Button::ButtonHelper
-        include BetterUi::General::Components::Dropdown::DropdownHelper
-        include BetterUi::General::Components::Dropdown::ItemHelper
-        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, user_dropdown)
-        # @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 wrapper_classes
-          base_classes = %w[fixed top-0 inset-y-0 h-screen z-[9999]]
-
-          # Posizione
-          base_classes << (position == :right ? "right-0" : "left-0")
-
-          # Larghezza
-          base_classes << width_class
-
-          base_classes.compact.join(" ")
-        end
-
-        def container_classes
-          base_classes = %w[flex flex-col h-full]
-
-          # 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? || footer[:user_dropdown].present?)
-        end
-
-        def has_user_dropdown?
-          footer.present? && footer[:user_dropdown].present?
-        end
-
-        def user_dropdown_trigger
-          return '' unless has_user_dropdown?
-          
-          user_dropdown = footer[:user_dropdown]
-          avatar_html = if user_dropdown[:avatar].present?
-            if user_dropdown[:avatar].is_a?(Hash)
-              bui_avatar(**user_dropdown[:avatar])
-            else
-              user_dropdown[:avatar].html_safe
-            end
-          else
-            ''
-          end
-
-          content_tag(:div, class: "flex items-center w-full text-left") do
-            avatar_section = if user_dropdown[:avatar].present?
-              content_tag(:div, avatar_html, class: "flex-shrink-0")
-            else
-              ''
-            end
-
-            text_section = content_tag(:div, class: user_dropdown[:avatar].present? ? 'ml-3 min-w-0 flex-1' : 'min-w-0 flex-1') do
-              name_part = if user_dropdown[:name].present?
-                content_tag(:p, user_dropdown[:name], class: "text-sm font-medium text-gray-700 truncate")
-              else
-                ''
-              end
-
-              subtitle_part = if user_dropdown[:subtitle].present?
-                content_tag(:p, user_dropdown[:subtitle], class: "text-xs text-gray-500 truncate")
-              else
-                ''
-              end
-
-              (name_part + subtitle_part).html_safe
-            end
-
-            chevron_section = content_tag(:div, class: "ml-auto flex-shrink-0") do
-              bui_icon("chevron-down", size: :small, classes: "text-gray-400")
-            end
-
-            (avatar_section + text_section + chevron_section).html_safe
-          end
-        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/accordion/component.html.erb

@@ -1,5 +0,0 @@
-<div <%= tag.attributes(wrapper_attributes) %>>
-  <% items.each do |item| %>
-    <%= item %>
-  <% end %>
-</div>

data/app/components/better_ui/general/accordion/component.rb

@@ -1,92 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Accordion
-      class Component < ViewComponent::Base
-        renders_many :items, "BetterUi::General::Accordion::ItemComponent"
-
-        ACCORDION_THEME = {
-          default: 'border-gray-200',
-          white: 'border-gray-100 bg-white',
-          blue: 'border-blue-200',
-          red: 'border-red-200',
-          green: 'border-green-200',
-          yellow: 'border-yellow-200',
-          violet: 'border-violet-200',
-          orange: 'border-orange-200',
-          rose: 'border-rose-200'
-        }.freeze
-
-        ACCORDION_VARIANT = {
-          minimal: '',
-          bordered: 'border rounded-lg',
-          separated: 'space-y-2'
-        }.freeze
-
-        ACCORDION_SIZE = {
-          small: 'text-sm',
-          medium: 'text-base',
-          large: 'text-lg'
-        }.freeze
-
-        def initialize(multiple: false, theme: :default, variant: :bordered, size: :medium, 
-                      classes: '', **options)
-          @multiple = multiple
-          @theme = theme
-          @variant = variant
-          @size = size
-          @classes = classes
-          @options = options
-
-          validate_params
-        end
-
-        private
-
-        attr_reader :multiple, :theme, :variant, :size, :classes, :options
-
-        def validate_params
-          validate_theme
-          validate_variant
-          validate_size
-        end
-
-        def validate_theme
-          return if ACCORDION_THEME.key?(theme)
-
-          raise ArgumentError, "Invalid theme: #{theme}. Must be one of #{ACCORDION_THEME.keys}"
-        end
-
-        def validate_variant
-          return if ACCORDION_VARIANT.key?(variant)
-
-          raise ArgumentError, "Invalid variant: #{variant}. Must be one of #{ACCORDION_VARIANT.keys}"
-        end
-
-        def validate_size
-          return if ACCORDION_SIZE.key?(size)
-
-          raise ArgumentError, "Invalid size: #{size}. Must be one of #{ACCORDION_SIZE.keys}"
-        end
-
-        # Attributi per il wrapper principale
-        def wrapper_attributes
-          base_classes = [
-            'bui-accordion',
-            ACCORDION_SIZE[size],
-            ACCORDION_VARIANT[variant],
-            ACCORDION_THEME[theme],
-            classes
-          ].compact.join(' ')
-
-          {
-            class: base_classes,
-            'data-controller': 'bui-accordion',
-            'data-bui-accordion-multiple-value': multiple
-          }.merge(options)
-        end
-      end
-    end
-  end
-end

data/app/components/better_ui/general/accordion/item_component.html.erb

@@ -1,12 +0,0 @@
-<div <%= tag.attributes(item_attributes) %>>
-  <!-- Header -->
-  <button <%= tag.attributes(header_attributes) %>>
-    <span><%= title %></span>
-    <i class="fas fa-<%= icon %> <%= icon_attributes[:class] %>" <%= tag.attributes(icon_attributes.except(:class)) %>></i>
-  </button>
-  
-  <!-- Content -->
-  <div <%= tag.attributes(content_attributes) %>>
-    <%= content %>
-  </div>
-</div>