better_ui 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/components/better_ui/application/sidebar/component.html.erb +53 -16
  3. data/app/components/better_ui/application/sidebar/component.rb +3 -2
  4. data/app/components/better_ui/general/accordion/component.html.erb +5 -0
  5. data/app/components/better_ui/general/accordion/component.rb +92 -0
  6. data/app/components/better_ui/general/accordion/item_component.html.erb +12 -0
  7. data/app/components/better_ui/general/accordion/item_component.rb +176 -0
  8. data/app/components/better_ui/general/button/component.html.erb +4 -4
  9. data/app/components/better_ui/general/dropdown/component.html.erb +18 -7
  10. data/app/components/better_ui/general/dropdown/component.rb +8 -57
  11. data/app/components/better_ui/general/dropdown/item_component.rb +2 -1
  12. data/app/components/better_ui/general/modal/component.html.erb +5 -42
  13. data/app/components/better_ui/general/modal/component.rb +22 -140
  14. data/app/components/better_ui/general/modal/modal_component.html.erb +52 -0
  15. data/app/components/better_ui/general/modal/modal_component.rb +160 -0
  16. data/app/components/better_ui/general/tabs/component.html.erb +10 -2
  17. data/app/components/better_ui/general/tabs/component.rb +26 -8
  18. data/app/components/better_ui/general/tabs/panel_component.rb +1 -1
  19. data/app/components/better_ui/general/tabs/tab_component.rb +1 -1
  20. data/app/helpers/better_ui/application_helper.rb +4 -4
  21. data/app/helpers/better_ui/general/components/accordion/accordion_helper.rb +73 -0
  22. data/app/helpers/better_ui/general/components/accordion.rb +11 -0
  23. data/app/helpers/better_ui/general/components/modal/modal_helper.rb +34 -44
  24. data/app/helpers/better_ui/general/components/modal.rb +11 -0
  25. data/app/helpers/better_ui/general/components/tabs/tabs_helper.rb +59 -26
  26. data/lib/better_ui/version.rb +1 -1
  27. metadata +11 -2
data/app/helpers/better_ui/general/components/modal/modal_helper.rb CHANGED
@@ -3,14 +3,11 @@ module BetterUi
3
3
  module Components
4
4
  module Modal
5
5
  module ModalHelper
6
- # Helper per renderizzare un modal
6
+ # Helper per renderizzare un modal con trigger e contenuto
7
7
  #
8
- # @param title [String] Il titolo del modal (obbligatorio)
9
- # @param theme [Symbol] Il tema dell'header del modal
10
- # @param size [Symbol] La dimensione del modal
11
- # @param rounded [Symbol] Il border radius del modal
12
- # @param backdrop [Boolean] Se mostrare l'overlay di sfondo cliccabile
13
- # @param closable [Boolean] Se mostrare il pulsante di chiusura
8
+ # @param close_on_backdrop [Boolean] Se chiudere il modal cliccando sul backdrop
9
+ # @param close_on_escape [Boolean] Se chiudere il modal premendo Escape
10
+ # @param lock_scroll [Boolean] Se bloccare lo scroll del body quando il modal è aperto
14
11
  # @param classes [String] Classi CSS aggiuntive per il contenitore
15
12
  # @param html_options [Hash] Attributi HTML aggiuntivi
16
13
  #
@@ -36,54 +33,47 @@ module BetterUi
36
33
  #
37
34
  # @return [String] HTML del modal
38
35
  #
39
- # @example Utilizzo base
40
- # <%= bui_modal(title: "Conferma azione") do %>
41
- # <p>Sei sicuro di voler continuare?</p>
36
+ # @example Utilizzo base con button trigger
37
+ # <%= bui_modal do |modal| %>
38
+ # <% modal.with_trigger(label: "Apri Modal", as: :button, type: :primary) %>
39
+ # <% modal.with_modal(title: "Conferma azione") do %>
40
+ # <p>Sei sicuro di voler continuare?</p>
41
+ # <% end %>
42
42
  # <% end %>
43
43
  #
44
- # @example Con tema, dimensione e border radius
45
- # <%= bui_modal(title: "Attenzione", theme: :red, size: :large, rounded: :large) do %>
46
- # <p>Questa azione non può essere annullata.</p>
44
+ # @example Con link trigger
45
+ # <%= bui_modal do |modal| %>
46
+ # <% modal.with_trigger(label: "Visualizza dettagli", as: :link, variant: :underline) %>
47
+ # <% modal.with_modal(title: "Dettagli elemento", theme: :blue, size: :large) do %>
48
+ # <p>Informazioni dettagliate sull'elemento selezionato.</p>
49
+ # <% end %>
47
50
  # <% end %>
48
51
  #
49
- # @example Senza backdrop
50
- # <%= bui_modal(title: "Informazioni", backdrop: false) do %>
51
- # <p>Contenuto del modal senza overlay di sfondo.</p>
52
- # <% end %>
53
- #
54
- # @example Non chiudibile
55
- # <%= bui_modal(title: "Caricamento", closable: false) do %>
56
- # <p>Operazione in corso...</p>
57
- # <% end %>
58
- #
59
- # @example Con bottoni di azione
60
- # <%= bui_modal(title: "Elimina elemento", theme: :red) do %>
61
- # <p>Sei sicuro di voler eliminare questo elemento?</p>
62
- # <p class="text-sm text-gray-600 mt-2">Questa azione non può essere annullata.</p>
63
- #
64
- # <div class="flex justify-end space-x-3 mt-6">
65
- # <%= bui_button(label: "Annulla", type: :white, size: :medium) %>
66
- # <%= bui_button(label: "Elimina", type: :red, size: :medium) %>
67
- # </div>
52
+ # @example Modal con configurazione avanzata
53
+ # <%= bui_modal(close_on_backdrop: false, lock_scroll: false) do |modal| %>
54
+ # <% modal.with_trigger(label: "Elimina", as: :button, type: :red, size: :small) %>
55
+ # <% modal.with_modal(title: "Elimina elemento", theme: :red, backdrop: true, closable: true) do %>
56
+ # <p>Sei sicuro di voler eliminare questo elemento?</p>
57
+ # <p class="text-sm text-gray-600 mt-2">Questa azione non può essere annullata.</p>
58
+ #
59
+ # <div class="flex justify-end space-x-3 mt-6">
60
+ # <%= bui_button(label: "Annulla", type: :white, size: :medium) %>
61
+ # <%= bui_button(label: "Elimina", type: :red, size: :medium) %>
62
+ # </div>
63
+ # <% end %>
68
64
  # <% end %>
69
65
  def bui_modal(
70
- title:,
71
- theme: :default,
72
- size: :medium,
73
- rounded: :medium,
74
- backdrop: true,
75
- closable: true,
66
+ close_on_backdrop: true,
67
+ close_on_escape: true,
68
+ lock_scroll: true,
76
69
  classes: nil,
77
70
  **html_options,
78
71
  &block
79
72
  )
80
73
  render BetterUi::General::Modal::Component.new(
81
- title: title,
82
- theme: theme,
83
- size: size,
84
- rounded: rounded,
85
- backdrop: backdrop,
86
- closable: closable,
74
+ close_on_backdrop: close_on_backdrop,
75
+ close_on_escape: close_on_escape,
76
+ lock_scroll: lock_scroll,
87
77
  classes: classes,
88
78
  **html_options
89
79
  ), &block
data/app/helpers/better_ui/general/components/modal.rb ADDED
@@ -0,0 +1,11 @@
1
+ # frozen_string_literal: true
2
+
3
+ module BetterUi
4
+ module General
5
+ module Components
6
+ module Modal
7
+ include BetterUi::General::Components::Modal::ModalHelper
8
+ end
9
+ end
10
+ end
11
+ end
data/app/helpers/better_ui/general/components/tabs/tabs_helper.rb CHANGED
@@ -5,53 +5,86 @@ module BetterUi
5
5
  module Components
6
6
  module Tabs
7
7
  module TabsHelper
8
- # Crea un container di navigazione tabs per organizzare contenuti correlati
8
+ # Crea un sistema completo di tabs con navigazione e panel inclusi
9
9
  #
10
10
  # @param variant [Symbol] lo stile delle tabs (:pills, :underline, :bordered, :minimal)
11
11
  # @param theme [Symbol] il tema di colore delle tabs (:default, :blue, :red, :green, :yellow, :violet, :orange, :rose, :white)
12
12
  # @param size [Symbol] la dimensione delle tabs (:small, :medium, :large)
13
13
  # @param orientation [Symbol] l'orientamento delle tabs (:horizontal, :vertical)
14
- # @param classes [String] classi CSS aggiuntive da applicare al container
15
- # @param options [Hash] attributi HTML aggiuntivi da applicare all'elemento
16
- # @param block [Proc] il contenuto delle tabs (le singole tab)
17
- # @return [String] l'HTML del container tabs
14
+ # @param navigation_classes [String] classi CSS aggiuntive per la navigazione
15
+ # @param panels_classes [String] classi CSS aggiuntive per i panel (default: 'mt-4')
16
+ # @param options [Hash] attributi HTML aggiuntivi da applicare all'elemento wrapper
17
+ # @param block [Proc] il contenuto che definisce navigation e panels tramite slots
18
+ # @return [String] l'HTML completo del sistema tabs
18
19
  #
19
- # @example Uso base
20
- # <%= bui_tabs do %>
21
- # <%= bui_tab(text: "Generale", target: "generale", active: true) %>
22
- # <%= bui_tab(text: "Sicurezza", target: "sicurezza") %>
20
+ # @example Uso base con slots
21
+ # <%= bui_tabs do |tabs| %>
22
+ # <% tabs.with_navigation do %>
23
+ # <%= bui_tab(text: "Tab 1", target: "tab1", active: true) %>
24
+ # <%= bui_tab(text: "Tab 2", target: "tab2") %>
25
+ # <% end %>
26
+ # <% tabs.with_panels do %>
27
+ # <%= bui_tab_panel(id: "tab1", active: true) do %>
28
+ # Contenuto del primo pannello
29
+ # <% end %>
30
+ # <%= bui_tab_panel(id: "tab2") do %>
31
+ # Contenuto del secondo pannello
32
+ # <% end %>
33
+ # <% end %>
23
34
  # <% end %>
24
35
  #
25
36
  # @example Con temi e dimensioni
26
- # <%= bui_tabs(variant: :underline, theme: :blue, size: :large) do %>
27
- # <%= bui_tab(text: "Dashboard", target: "dashboard", active: true, icon: "chart-bar") %>
28
- # <%= bui_tab(text: "Impostazioni", target: "settings", icon: "cog-6-tooth") %>
37
+ # <%= bui_tabs(variant: :underline, theme: :blue, size: :large) do |tabs| %>
38
+ # <% tabs.with_navigation do %>
39
+ # <%= bui_tab(text: "Dashboard", target: "dashboard", active: true, icon: "chart-bar") %>
40
+ # <%= bui_tab(text: "Impostazioni", target: "settings", icon: "cog-6-tooth") %>
41
+ # <% end %>
42
+ # <% tabs.with_panels do %>
43
+ # <%= bui_tab_panel(id: "dashboard", active: true) do %>
44
+ # Dashboard content...
45
+ # <% end %>
46
+ # <%= bui_tab_panel(id: "settings") do %>
47
+ # Settings content...
48
+ # <% end %>
49
+ # <% end %>
29
50
  # <% end %>
30
51
  #
31
52
  # @example Tabs verticali
32
- # <%= bui_tabs(orientation: :vertical, variant: :pills) do %>
33
- # <%= bui_tab(text: "Profilo", target: "profile") %>
34
- # <%= bui_tab(text: "Account", target: "account") %>
53
+ # <%= bui_tabs(orientation: :vertical, variant: :pills) do |tabs| %>
54
+ # <% tabs.with_navigation do %>
55
+ # <%= bui_tab(text: "Profilo", target: "profile", active: true) %>
56
+ # <%= bui_tab(text: "Account", target: "account") %>
57
+ # <% end %>
58
+ # <% tabs.with_panels do %>
59
+ # <%= bui_tab_panel(id: "profile", active: true) do %>
60
+ # Informazioni profilo...
61
+ # <% end %>
62
+ # <%= bui_tab_panel(id: "account") do %>
63
+ # Impostazioni account...
64
+ # <% end %>
65
+ # <% end %>
35
66
  # <% end %>
36
67
  #
37
- # @example Con attributi personalizzati
38
- # <%= bui_tabs(classes: "my-4", data: { testid: "main-tabs" }) do %>
39
- # <%= bui_tab(text: "Home", target: "home", active: true) %>
40
- # <% end %>
41
- #
42
- # @example Con Rails form builder
43
- # <%= bui_tabs(form: form, variant: :bordered) do %>
44
- # <%= bui_tab(text: "Dati personali", target: "personal") %>
45
- # <%= bui_tab(text: "Contatti", target: "contacts") %>
68
+ # @example Con classi personalizzate
69
+ # <%= bui_tabs(navigation_classes: "border-b-2", panels_classes: "p-6 bg-gray-50") do |tabs| %>
70
+ # <% tabs.with_navigation do %>
71
+ # <%= bui_tab(text: "Home", target: "home", active: true) %>
72
+ # <% end %>
73
+ # <% tabs.with_panels do %>
74
+ # <%= bui_tab_panel(id: "home", active: true) do %>
75
+ # Home content with custom styling...
76
+ # <% end %>
77
+ # <% end %>
46
78
  # <% end %>
47
79
  def bui_tabs(variant: :pills, theme: :default, size: :medium, orientation: :horizontal,
48
- classes: '', form: nil, **options, &block)
80
+ navigation_classes: '', panels_classes: 'mt-4', **options, &block)
49
81
  render BetterUi::General::Tabs::Component.new(
50
82
  variant: variant,
51
83
  theme: theme,
52
84
  size: size,
53
85
  orientation: orientation,
54
- classes: classes,
86
+ navigation_classes: navigation_classes,
87
+ panels_classes: panels_classes,
55
88
  **options
56
89
  ), &block
57
90
  end
data/lib/better_ui/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module BetterUi
2
- VERSION = "0.2.0"
2
+ VERSION = "0.3.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: better_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.0
4
+ version: 0.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - alessiobussolari
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-06-01 00:00:00.000000000 Z
12
+ date: 2025-06-03 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -117,6 +117,10 @@ files:
117
117
  - app/components/better_ui/application/navbar/component.rb
118
118
  - app/components/better_ui/application/sidebar/component.html.erb
119
119
  - app/components/better_ui/application/sidebar/component.rb
120
+ - app/components/better_ui/general/accordion/component.html.erb
121
+ - app/components/better_ui/general/accordion/component.rb
122
+ - app/components/better_ui/general/accordion/item_component.html.erb
123
+ - app/components/better_ui/general/accordion/item_component.rb
120
124
  - app/components/better_ui/general/alert/component.html.erb
121
125
  - app/components/better_ui/general/alert/component.rb
122
126
  - app/components/better_ui/general/avatar/component.html.erb
@@ -159,6 +163,8 @@ files:
159
163
  - app/components/better_ui/general/link/component.rb
160
164
  - app/components/better_ui/general/modal/component.html.erb
161
165
  - app/components/better_ui/general/modal/component.rb
166
+ - app/components/better_ui/general/modal/modal_component.html.erb
167
+ - app/components/better_ui/general/modal/modal_component.rb
162
168
  - app/components/better_ui/general/pagination/component.html.erb
163
169
  - app/components/better_ui/general/pagination/component.rb
164
170
  - app/components/better_ui/general/panel/component.html.erb
@@ -198,6 +204,8 @@ files:
198
204
  - app/helpers/better_ui/application/components/navbar/navbar_helper.rb
199
205
  - app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb
200
206
  - app/helpers/better_ui/application_helper.rb
207
+ - app/helpers/better_ui/general/components/accordion.rb
208
+ - app/helpers/better_ui/general/components/accordion/accordion_helper.rb
201
209
  - app/helpers/better_ui/general/components/alert/alert_helper.rb
202
210
  - app/helpers/better_ui/general/components/avatar/avatar_helper.rb
203
211
  - app/helpers/better_ui/general/components/badge/badge_helper.rb
@@ -219,6 +227,7 @@ files:
219
227
  - app/helpers/better_ui/general/components/input/text/text_helper.rb
220
228
  - app/helpers/better_ui/general/components/input/textarea/textarea_helper.rb
221
229
  - app/helpers/better_ui/general/components/link/link_helper.rb
230
+ - app/helpers/better_ui/general/components/modal.rb
222
231
  - app/helpers/better_ui/general/components/modal/modal_helper.rb
223
232
  - app/helpers/better_ui/general/components/pagination/pagination_helper.rb
224
233
  - app/helpers/better_ui/general/components/panel/panel_helper.rb