better_ui 0.2.0 → 0.6.0

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

@@ -2,163 +2,45 @@ module BetterUi
   module General
     module Modal
       class Component < ViewComponent::Base
-        attr_reader :title, :theme, :size, :backdrop, :closable, :classes, :html_options
+        renders_one :trigger
+        renders_one :modal
+        
+        attr_reader :close_on_backdrop, :close_on_escape, :lock_scroll, :classes, :html_options
 
-        # Classi base sempre presenti per il backdrop
-        MODAL_BACKDROP_CLASSES = "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
 
-        # Classi base per il contenitore del modal
-        MODAL_CONTAINER_CLASSES = "relative bg-white shadow-xl w-full"
 
-        # Temi dell'header del modal con classi Tailwind dirette
-        MODAL_THEME = {
-          default: "bg-gray-50 border-b border-gray-200 text-gray-900",
-          white: "bg-white border-b border-gray-200 text-gray-900",
-          red: "bg-red-50 border-b border-red-200 text-red-900",
-          rose: "bg-rose-50 border-b border-rose-200 text-rose-900",
-          orange: "bg-orange-50 border-b border-orange-200 text-orange-900",
-          green: "bg-green-50 border-b border-green-200 text-green-900",
-          blue: "bg-blue-50 border-b border-blue-200 text-blue-900",
-          yellow: "bg-yellow-50 border-b border-yellow-200 text-yellow-900",
-          violet: "bg-violet-50 border-b border-violet-200 text-violet-900"
-        }
-
-        # Dimensioni con classi Tailwind dirette
-        MODAL_SIZES = {
-          small: "max-w-sm",
-          medium: "max-w-md",
-          large: "max-w-2xl"
-        }
-
-        # Border radius con classi Tailwind dirette
-        MODAL_ROUNDED = {
-          none: "rounded-none",
-          small: "rounded-md",
-          medium: "rounded-lg",
-          large: "rounded-xl",
-          full: "rounded-full"
-        }
-
-        # Inizializzazione del componente
+        # Inizializzazione del wrapper component
         def initialize(
-          title:,
-          theme: :default,
-          size: :medium,
-          rounded: :medium,
-          backdrop: true,
-          closable: true,
+          close_on_backdrop: true,
+          close_on_escape: true,
+          lock_scroll: true,
           classes: nil,
           **html_options
         )
-          @title = title
-          @theme = theme.to_sym
-          @size = size.to_sym
-          @rounded = rounded.to_sym
-          @backdrop = backdrop
-          @closable = closable
+          @close_on_backdrop = close_on_backdrop
+          @close_on_escape = close_on_escape
+          @lock_scroll = lock_scroll
           @classes = classes
           @html_options = html_options
-
-          validate_params
-        end
-
-        # Combina tutte le classi per il backdrop
-        def backdrop_classes
-          MODAL_BACKDROP_CLASSES
-        end
-
-        # Combina tutte le classi per il contenitore
-        def container_classes
-          [
-            MODAL_CONTAINER_CLASSES,
-            get_modal_size_classes,
-            get_modal_rounded_classes,
-            @classes,
-            @html_options[:class]
-          ].compact.join(" ")
-        end
-
-        # Combina tutte le classi per l'header
-        def header_classes
-          [
-            "flex items-center justify-between p-6",
-            get_modal_theme_classes
-          ].compact.join(" ")
-        end
-
-        def get_modal_theme_classes
-          MODAL_THEME[@theme] || MODAL_THEME[:default]
-        end
-
-        def get_modal_size_classes
-          MODAL_SIZES[@size] || MODAL_SIZES[:medium]
-        end
-
-        def get_modal_rounded_classes
-          MODAL_ROUNDED[@rounded] || MODAL_ROUNDED[:medium]
-        end
-
-        # Restituisce gli attributi per il backdrop
-        def backdrop_attributes
-          attrs = {
-            class: backdrop_classes
-          }
-
-          # Aggiungi altri attributi HTML se presenti
-          @html_options.except(:class).each do |key, value|
-            attrs[key] = value
-          end
-
-          attrs
         end
 
-        # Restituisce gli attributi per il contenitore
-        def container_attributes
-          {
-            class: container_classes,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": "modal-title"
-          }
+        # Combina tutte le classi per il wrapper
+        def wrapper_classes
+          [@classes, @html_options[:class]].compact.join(" ")
         end
 
-        # Restituisce gli attributi per l'header
-        def header_attributes
+        # Restituisce gli attributi per il wrapper principale (con controller Stimulus)
+        def wrapper_attributes
           {
-            class: header_classes
-          }
-        end
-
-        # Verifica se rendere il componente
-        def render?
-          @title.present?
+            class: wrapper_classes,
+            'data-controller': 'bui-modal',
+            'data-bui-modal-close-on-backdrop-value': close_on_backdrop,
+            'data-bui-modal-close-on-escape-value': close_on_escape,
+            'data-bui-modal-lock-scroll-value': lock_scroll
+          }.merge(@html_options.except(:class))
         end
 
-        private
 
-        def validate_params
-          validate_theme
-          validate_size
-          validate_rounded
-        end
-
-        def validate_theme
-          unless MODAL_THEME.keys.include?(@theme)
-            raise ArgumentError, "Il tema deve essere uno tra: #{MODAL_THEME.keys.join(', ')}"
-          end
-        end
-
-        def validate_size
-          unless MODAL_SIZES.keys.include?(@size)
-            raise ArgumentError, "La dimensione deve essere una tra: #{MODAL_SIZES.keys.join(', ')}"
-          end
-        end
-
-        def validate_rounded
-          unless MODAL_ROUNDED.keys.include?(@rounded)
-            raise ArgumentError, "Il border radius deve essere uno tra: #{MODAL_ROUNDED.keys.join(', ')}"
-          end
-        end
       end
     end
   end

data/app/components/better_ui/general/modal/modal_component.html.erb

@@ -0,0 +1,52 @@
+<%# Template per il modal content %>
+<% if @backdrop %>
+  <%= tag.div **backdrop_attributes do %>
+    <%= tag.div **container_attributes do %>
+      <%# Header del modal %>
+      <%= tag.div **header_attributes do %>
+        <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
+        <% if @closable %>
+          <%= helpers.bui_button(
+            label: "Chiudi", 
+            icon: "x-mark",
+            type: :white,
+            size: :small,
+            data: [
+              { name: 'bui-modal-target', value: 'closeButton' },
+              { name: 'action', value: 'click->bui-modal#closeButtonClicked' }
+            ]
+          ) %>
+        <% end %>
+      <% end %>
+      
+      <%# Body del modal %>
+      <div class="p-6">
+        <%= content %>
+      </div>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= tag.div **container_attributes do %>
+    <%# Header del modal %>
+    <%= tag.div **header_attributes do %>
+      <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
+      <% if @closable %>
+        <%= helpers.bui_button(
+          label: "Chiudi", 
+          icon: "x-mark",
+          type: :white,
+          size: :small,
+          data: [
+            { name: 'bui-modal-target', value: 'closeButton' },
+            { name: 'action', value: 'click->bui-modal#closeButtonClicked' }
+          ]
+        ) %>
+      <% end %>
+    <% end %>
+    
+    <%# Body del modal %>
+    <div class="p-6">
+      <%= content %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/better_ui/general/modal/modal_component.rb

@@ -0,0 +1,160 @@
+module BetterUi
+  module General
+    module Modal
+      class ModalComponent < ViewComponent::Base
+        attr_reader :title, :theme, :size, :backdrop, :closable, :classes, :html_options
+
+        # Classi base sempre presenti per il backdrop
+        MODAL_BACKDROP_CLASSES = "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
+
+        # Classi base per il contenitore del modal
+        MODAL_CONTAINER_CLASSES = "relative bg-white shadow-xl w-full"
+
+        # Temi dell'header del modal con classi Tailwind dirette
+        MODAL_THEME = {
+          default: "bg-gray-50 border-b border-gray-200 text-gray-900",
+          white: "bg-white border-b border-gray-200 text-gray-900",
+          red: "bg-red-50 border-b border-red-200 text-red-900",
+          rose: "bg-rose-50 border-b border-rose-200 text-rose-900",
+          orange: "bg-orange-50 border-b border-orange-200 text-orange-900",
+          green: "bg-green-50 border-b border-green-200 text-green-900",
+          blue: "bg-blue-50 border-b border-blue-200 text-blue-900",
+          yellow: "bg-yellow-50 border-b border-yellow-200 text-yellow-900",
+          violet: "bg-violet-50 border-b border-violet-200 text-violet-900"
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        MODAL_SIZES = {
+          small: "max-w-sm",
+          medium: "max-w-md",
+          large: "max-w-2xl"
+        }
+
+        # Border radius con classi Tailwind dirette
+        MODAL_ROUNDED = {
+          none: "rounded-none",
+          small: "rounded-md",
+          medium: "rounded-lg",
+          large: "rounded-xl",
+          full: "rounded-full"
+        }
+
+        # Inizializzazione del modal component
+        def initialize(
+          title:,
+          theme: :default,
+          size: :medium,
+          rounded: :medium,
+          backdrop: true,
+          closable: true,
+          classes: nil,
+          **html_options
+        )
+          @title = title
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @rounded = rounded.to_sym
+          @backdrop = backdrop
+          @closable = closable
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il backdrop
+        def backdrop_classes
+          MODAL_BACKDROP_CLASSES
+        end
+
+        # Combina tutte le classi per il contenitore
+        def container_classes
+          [
+            MODAL_CONTAINER_CLASSES,
+            get_modal_size_classes,
+            get_modal_rounded_classes,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per l'header
+        def header_classes
+          [
+            "flex items-center justify-between p-6",
+            get_modal_theme_classes
+          ].compact.join(" ")
+        end
+
+        def get_modal_theme_classes
+          MODAL_THEME[@theme] || MODAL_THEME[:default]
+        end
+
+        def get_modal_size_classes
+          MODAL_SIZES[@size] || MODAL_SIZES[:medium]
+        end
+
+        def get_modal_rounded_classes
+          MODAL_ROUNDED[@rounded] || MODAL_ROUNDED[:medium]
+        end
+
+        # Restituisce gli attributi per il backdrop
+        def backdrop_attributes
+          {
+            class: backdrop_classes,
+            'data-bui-modal-target': 'backdrop'
+          }
+        end
+
+        # Restituisce gli attributi per il contenitore
+        def container_attributes
+          {
+            class: container_classes,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "modal-title",
+            'data-bui-modal-target': 'container'
+          }
+        end
+
+        # Restituisce gli attributi per l'header
+        def header_attributes
+          {
+            class: header_classes
+          }
+        end
+
+        # Verifica se rendere il componente
+        def render?
+          @title.present?
+        end
+
+        private
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_rounded
+        end
+
+        def validate_theme
+          unless MODAL_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{MODAL_THEME.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless MODAL_SIZES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{MODAL_SIZES.keys.join(', ')}"
+          end
+        end
+
+        def validate_rounded
+          unless MODAL_ROUNDED.keys.include?(@rounded)
+            raise ArgumentError, "Il border radius deve essere uno tra: #{MODAL_ROUNDED.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -1,3 +1,11 @@
-<div <%= tag.attributes(container_attributes) %>>
-  <%= content %>
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <!-- Navigation Tabs -->
+  <div <%= tag.attributes(navigation_attributes) %>>
+    <%= navigation %>
+  </div>
+  
+  <!-- Tab Panels -->
+  <div <%= tag.attributes(panels_attributes) %>>
+    <%= panels %>
+  </div>
 </div>

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

@@ -4,6 +4,8 @@ module BetterUi
   module General
     module Tabs
       class Component < ViewComponent::Base
+        renders_one :navigation
+        renders_one :panels
         TABS_VARIANT = {
           pills: 'bg-gray-100 rounded-lg p-1',
           underline: 'border-b border-gray-200',
@@ -34,12 +36,14 @@ module BetterUi
           vertical: 'flex-col'
         }.freeze
 
-        def initialize(variant: :pills, theme: :default, size: :medium, orientation: :horizontal, classes: '', **options)
+        def initialize(variant: :pills, theme: :default, size: :medium, orientation: :horizontal, 
+                      navigation_classes: '', panels_classes: 'mt-4', **options)
           @variant = variant
           @theme = theme
           @size = size
           @orientation = orientation
-          @classes = classes
+          @navigation_classes = navigation_classes
+          @panels_classes = panels_classes
           @options = options
 
           validate_params
@@ -47,7 +51,7 @@ module BetterUi
 
         private
 
-        attr_reader :variant, :theme, :size, :orientation, :classes, :options
+        attr_reader :variant, :theme, :size, :orientation, :navigation_classes, :panels_classes, :options
 
         def validate_params
           validate_variant
@@ -80,21 +84,35 @@ module BetterUi
           raise ArgumentError, "Invalid orientation: #{orientation}. Must be one of #{TABS_ORIENTATION.keys}"
         end
 
-        def container_attributes
+        # Attributi per il wrapper principale (con data-controller)
+        def wrapper_attributes
+          {
+            'data-controller': 'bui-tabs'
+          }.merge(options)
+        end
+
+        # Attributi per il container della navigazione tabs
+        def navigation_attributes
           base_classes = [
             'flex',
             TABS_ORIENTATION[orientation],
             TABS_VARIANT[variant],
             TABS_THEME_DEFAULT[theme],
             TABS_SIZE[size],
-            classes
+            navigation_classes
           ].compact.join(' ')
 
           {
             class: base_classes,
-            role: 'tablist',
-            'data-controller': 'bui-tabs'
-          }.merge(options)
+            role: 'tablist'
+          }
+        end
+
+        # Attributi per il container dei panel
+        def panels_attributes
+          {
+            class: panels_classes
+          }
         end
       end
     end

data/app/components/better_ui/general/tabs/panel_component.rb

@@ -18,7 +18,7 @@ module BetterUi
         def panel_attributes
           base_classes = [
             'focus:outline-none',
-            active ? 'block' : 'hidden',
+            'hidden', # Sempre nascosto inizialmente, JavaScript gestisce la visibilità
             classes
           ].compact.join(' ')
 

data/app/components/better_ui/general/tabs/tab_component.rb

@@ -92,7 +92,7 @@ module BetterUi
             'aria-controls': target,
             'data-bui-tabs-target': 'tab',
             'data-target': target,
-            'data-action': disabled ? '' : 'click->bui-tabs#switchTab',
+            'data-action': disabled ? '' : 'click->bui-tabs#switchTab keydown->bui-tabs#keydown',
             tabindex: active ? '0' : '-1',
             id: "tab-#{target}"
           }.merge(options)

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

@@ -0,0 +1 @@
+<%= tag.span(text_content, **text_attributes) %>