better_ui 0.3.0 → 0.5.1

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.

Potentially problematic release.


This version of better_ui might be problematic. Click here for more details.

Files changed (231) hide show
  1. checksums.yaml +4 -4
  2. data/MIT-LICENSE +1 -1
  3. data/README.md +140 -230
  4. data/app/assets/stylesheets/better_ui/_base.scss +9 -0
  5. data/app/assets/stylesheets/better_ui/_components.scss +2 -0
  6. data/app/assets/stylesheets/better_ui/_utilities.scss +14 -0
  7. data/app/assets/stylesheets/better_ui/application.css +32 -0
  8. data/app/assets/stylesheets/better_ui/components/_avatar.scss +200 -0
  9. data/app/assets/stylesheets/better_ui/components/_badge.scss +154 -0
  10. data/app/assets/stylesheets/better_ui/components/_breadcrumb.scss +106 -0
  11. data/app/assets/stylesheets/better_ui/components/_button.scss +105 -0
  12. data/app/assets/stylesheets/better_ui/components/_card.scss +60 -0
  13. data/app/assets/stylesheets/better_ui/components/_heading.scss +81 -0
  14. data/app/assets/stylesheets/better_ui/components/_icon.scss +134 -0
  15. data/app/assets/stylesheets/better_ui/components/_index.scss +17 -0
  16. data/app/assets/stylesheets/better_ui/components/_link.scss +100 -0
  17. data/app/assets/stylesheets/better_ui/components/_panel.scss +104 -0
  18. data/app/assets/stylesheets/better_ui/components/_spinner.scss +129 -0
  19. data/app/assets/stylesheets/better_ui/components/_table.scss +156 -0
  20. data/app/assets/stylesheets/better_ui/components/_variables.scss +1 -0
  21. data/app/assets/stylesheets/better_ui.scss +4 -0
  22. data/app/components/better_ui/application/alert_component.html.erb +27 -0
  23. data/app/components/better_ui/application/alert_component.rb +202 -0
  24. data/app/components/better_ui/application/card_component.html.erb +24 -0
  25. data/app/components/better_ui/application/card_component.rb +53 -0
  26. data/app/components/better_ui/application/card_container_component.html.erb +8 -0
  27. data/app/components/better_ui/application/card_container_component.rb +14 -0
  28. data/app/components/better_ui/application/header_component.html.erb +88 -0
  29. data/app/components/better_ui/application/header_component.rb +188 -0
  30. data/app/components/better_ui/application/navbar_component.html.erb +294 -0
  31. data/app/components/better_ui/application/navbar_component.rb +249 -0
  32. data/app/components/better_ui/application/sidebar_component.html.erb +207 -0
  33. data/app/components/better_ui/application/sidebar_component.rb +318 -0
  34. data/app/components/better_ui/application/toast_component.html.erb +35 -0
  35. data/app/components/better_ui/application/toast_component.rb +223 -0
  36. data/app/components/better_ui/general/avatar_component.html.erb +19 -0
  37. data/app/components/better_ui/general/avatar_component.rb +171 -0
  38. data/app/components/better_ui/general/{badge/component.html.erb → badge_component.html.erb} +2 -6
  39. data/app/components/better_ui/general/badge_component.rb +135 -0
  40. data/app/components/better_ui/general/{breadcrumb/component.html.erb → breadcrumb_component.html.erb} +4 -4
  41. data/app/components/better_ui/general/breadcrumb_component.rb +130 -0
  42. data/app/components/better_ui/general/{button/component.html.erb → button_component.html.erb} +7 -7
  43. data/app/components/better_ui/general/button_component.rb +160 -0
  44. data/app/components/better_ui/general/heading_component.html.erb +1 -0
  45. data/app/components/better_ui/general/heading_component.rb +49 -0
  46. data/app/components/better_ui/general/icon_component.html.erb +2 -0
  47. data/app/components/better_ui/general/icon_component.rb +77 -0
  48. data/app/components/better_ui/general/link_component.html.erb +17 -0
  49. data/app/components/better_ui/general/link_component.rb +132 -0
  50. data/app/components/better_ui/general/panel_component.html.erb +27 -0
  51. data/app/components/better_ui/general/panel_component.rb +92 -0
  52. data/app/components/better_ui/general/spinner_component.html.erb +15 -0
  53. data/app/components/better_ui/general/spinner_component.rb +79 -0
  54. data/app/components/better_ui/general/table_component.html.erb +73 -0
  55. data/app/components/better_ui/general/table_component.rb +143 -0
  56. data/app/controllers/better_ui/application_controller.rb +1 -0
  57. data/app/helpers/better_ui/general/components/avatar_helper.rb +17 -0
  58. data/app/helpers/better_ui/general/components/badge_helper.rb +17 -0
  59. data/app/helpers/better_ui/general/components/breadcrumb_helper.rb +17 -0
  60. data/app/helpers/better_ui/general/components/button_helper.rb +17 -0
  61. data/app/helpers/better_ui/general/components/heading_helper.rb +17 -0
  62. data/app/helpers/better_ui/general/components/icon_helper.rb +17 -0
  63. data/app/helpers/better_ui/general/components/link_helper.rb +17 -0
  64. data/app/helpers/better_ui/general/components/panel_helper.rb +16 -0
  65. data/app/helpers/better_ui/general/components/spinner_helper.rb +17 -0
  66. data/app/helpers/better_ui/general/components/table_helper.rb +17 -0
  67. data/app/helpers/better_ui/general_helper.rb +15 -0
  68. data/app/helpers/better_ui_helper.rb +12 -0
  69. data/app/views/components/better_ui/general/table/_custom_body_row.html.erb +17 -0
  70. data/app/views/components/better_ui/general/table/_custom_footer_rows.html.erb +17 -0
  71. data/app/views/components/better_ui/general/table/_custom_header_rows.html.erb +12 -0
  72. data/app/views/layouts/component_preview.html.erb +32 -0
  73. data/config/initializers/lookbook.rb +12 -12
  74. data/config/routes.rb +2 -0
  75. data/lib/better_ui/engine.rb +92 -5
  76. data/lib/better_ui/version.rb +1 -1
  77. data/lib/better_ui.rb +32 -4
  78. data/lib/generators/better_ui/install_generator.rb +103 -0
  79. data/lib/generators/better_ui/stylesheet_generator.rb +159 -0
  80. data/lib/generators/better_ui/templates/README +125 -0
  81. data/lib/generators/better_ui/templates/components/_avatar.scss +200 -0
  82. data/lib/generators/better_ui/templates/components/_badge.scss +154 -0
  83. data/lib/generators/better_ui/templates/components/_breadcrumb.scss +106 -0
  84. data/lib/generators/better_ui/templates/components/_button.scss +109 -0
  85. data/lib/generators/better_ui/templates/components/_card.scss +60 -0
  86. data/lib/generators/better_ui/templates/components/_heading.scss +81 -0
  87. data/lib/generators/better_ui/templates/components/_icon.scss +134 -0
  88. data/lib/generators/better_ui/templates/components/_index.scss +17 -0
  89. data/lib/generators/better_ui/templates/components/_link.scss +100 -0
  90. data/lib/generators/better_ui/templates/components/_panel.scss +104 -0
  91. data/lib/generators/better_ui/templates/components/_spinner.scss +129 -0
  92. data/lib/generators/better_ui/templates/components/_table.scss +156 -0
  93. data/lib/generators/better_ui/templates/components/_variables.scss +0 -0
  94. data/lib/generators/better_ui/templates/components_stylesheet.scss +35 -0
  95. data/lib/generators/better_ui/templates/index.scss +18 -0
  96. data/lib/generators/better_ui/templates/initializer.rb +41 -0
  97. metadata +178 -147
  98. data/app/components/better_ui/application/card/component.html.erb +0 -20
  99. data/app/components/better_ui/application/card/component.rb +0 -214
  100. data/app/components/better_ui/application/main/component.html.erb +0 -9
  101. data/app/components/better_ui/application/main/component.rb +0 -123
  102. data/app/components/better_ui/application/navbar/component.html.erb +0 -92
  103. data/app/components/better_ui/application/navbar/component.rb +0 -136
  104. data/app/components/better_ui/application/sidebar/component.html.erb +0 -227
  105. data/app/components/better_ui/application/sidebar/component.rb +0 -130
  106. data/app/components/better_ui/general/accordion/component.html.erb +0 -5
  107. data/app/components/better_ui/general/accordion/component.rb +0 -92
  108. data/app/components/better_ui/general/accordion/item_component.html.erb +0 -12
  109. data/app/components/better_ui/general/accordion/item_component.rb +0 -176
  110. data/app/components/better_ui/general/alert/component.html.erb +0 -32
  111. data/app/components/better_ui/general/alert/component.rb +0 -242
  112. data/app/components/better_ui/general/avatar/component.html.erb +0 -20
  113. data/app/components/better_ui/general/avatar/component.rb +0 -301
  114. data/app/components/better_ui/general/badge/component.rb +0 -248
  115. data/app/components/better_ui/general/breadcrumb/component.rb +0 -187
  116. data/app/components/better_ui/general/button/component.rb +0 -214
  117. data/app/components/better_ui/general/divider/component.html.erb +0 -10
  118. data/app/components/better_ui/general/divider/component.rb +0 -226
  119. data/app/components/better_ui/general/dropdown/component.html.erb +0 -25
  120. data/app/components/better_ui/general/dropdown/component.rb +0 -170
  121. data/app/components/better_ui/general/dropdown/divider_component.html.erb +0 -1
  122. data/app/components/better_ui/general/dropdown/divider_component.rb +0 -41
  123. data/app/components/better_ui/general/dropdown/item_component.html.erb +0 -6
  124. data/app/components/better_ui/general/dropdown/item_component.rb +0 -119
  125. data/app/components/better_ui/general/field/component.html.erb +0 -27
  126. data/app/components/better_ui/general/field/component.rb +0 -37
  127. data/app/components/better_ui/general/heading/component.html.erb +0 -22
  128. data/app/components/better_ui/general/heading/component.rb +0 -257
  129. data/app/components/better_ui/general/icon/component.html.erb +0 -7
  130. data/app/components/better_ui/general/icon/component.rb +0 -239
  131. data/app/components/better_ui/general/input/checkbox/component.html.erb +0 -5
  132. data/app/components/better_ui/general/input/checkbox/component.rb +0 -238
  133. data/app/components/better_ui/general/input/datetime/component.html.erb +0 -5
  134. data/app/components/better_ui/general/input/datetime/component.rb +0 -223
  135. data/app/components/better_ui/general/input/radio/component.html.erb +0 -5
  136. data/app/components/better_ui/general/input/radio/component.rb +0 -230
  137. data/app/components/better_ui/general/input/select/component.html.erb +0 -16
  138. data/app/components/better_ui/general/input/select/component.rb +0 -184
  139. data/app/components/better_ui/general/input/select/select_component.html.erb +0 -5
  140. data/app/components/better_ui/general/input/select/select_component.rb +0 -37
  141. data/app/components/better_ui/general/input/text/component.html.erb +0 -5
  142. data/app/components/better_ui/general/input/text/component.rb +0 -171
  143. data/app/components/better_ui/general/input/textarea/component.html.erb +0 -5
  144. data/app/components/better_ui/general/input/textarea/component.rb +0 -166
  145. data/app/components/better_ui/general/link/component.html.erb +0 -18
  146. data/app/components/better_ui/general/link/component.rb +0 -258
  147. data/app/components/better_ui/general/modal/component.html.erb +0 -5
  148. data/app/components/better_ui/general/modal/component.rb +0 -47
  149. data/app/components/better_ui/general/modal/modal_component.html.erb +0 -52
  150. data/app/components/better_ui/general/modal/modal_component.rb +0 -160
  151. data/app/components/better_ui/general/pagination/component.html.erb +0 -85
  152. data/app/components/better_ui/general/pagination/component.rb +0 -216
  153. data/app/components/better_ui/general/panel/component.html.erb +0 -28
  154. data/app/components/better_ui/general/panel/component.rb +0 -249
  155. data/app/components/better_ui/general/progress/component.html.erb +0 -11
  156. data/app/components/better_ui/general/progress/component.rb +0 -160
  157. data/app/components/better_ui/general/spinner/component.html.erb +0 -35
  158. data/app/components/better_ui/general/spinner/component.rb +0 -93
  159. data/app/components/better_ui/general/table/component.html.erb +0 -5
  160. data/app/components/better_ui/general/table/component.rb +0 -217
  161. data/app/components/better_ui/general/table/tbody_component.html.erb +0 -3
  162. data/app/components/better_ui/general/table/tbody_component.rb +0 -30
  163. data/app/components/better_ui/general/table/td_component.html.erb +0 -3
  164. data/app/components/better_ui/general/table/td_component.rb +0 -44
  165. data/app/components/better_ui/general/table/tfoot_component.html.erb +0 -3
  166. data/app/components/better_ui/general/table/tfoot_component.rb +0 -28
  167. data/app/components/better_ui/general/table/th_component.html.erb +0 -6
  168. data/app/components/better_ui/general/table/th_component.rb +0 -51
  169. data/app/components/better_ui/general/table/thead_component.html.erb +0 -3
  170. data/app/components/better_ui/general/table/thead_component.rb +0 -28
  171. data/app/components/better_ui/general/table/tr_component.html.erb +0 -3
  172. data/app/components/better_ui/general/table/tr_component.rb +0 -30
  173. data/app/components/better_ui/general/tabs/component.html.erb +0 -11
  174. data/app/components/better_ui/general/tabs/component.rb +0 -120
  175. data/app/components/better_ui/general/tabs/panel_component.html.erb +0 -3
  176. data/app/components/better_ui/general/tabs/panel_component.rb +0 -37
  177. data/app/components/better_ui/general/tabs/tab_component.html.erb +0 -13
  178. data/app/components/better_ui/general/tabs/tab_component.rb +0 -111
  179. data/app/components/better_ui/general/tag/component.html.erb +0 -3
  180. data/app/components/better_ui/general/tag/component.rb +0 -104
  181. data/app/components/better_ui/general/tooltip/component.html.erb +0 -7
  182. data/app/components/better_ui/general/tooltip/component.rb +0 -239
  183. data/app/helpers/better_ui/application/components/card/card_helper.rb +0 -96
  184. data/app/helpers/better_ui/application/components/card.rb +0 -11
  185. data/app/helpers/better_ui/application/components/main/main_helper.rb +0 -64
  186. data/app/helpers/better_ui/application/components/navbar/navbar_helper.rb +0 -77
  187. data/app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb +0 -51
  188. data/app/helpers/better_ui/application_helper.rb +0 -55
  189. data/app/helpers/better_ui/general/components/accordion/accordion_helper.rb +0 -73
  190. data/app/helpers/better_ui/general/components/accordion.rb +0 -11
  191. data/app/helpers/better_ui/general/components/alert/alert_helper.rb +0 -57
  192. data/app/helpers/better_ui/general/components/avatar/avatar_helper.rb +0 -29
  193. data/app/helpers/better_ui/general/components/badge/badge_helper.rb +0 -53
  194. data/app/helpers/better_ui/general/components/breadcrumb/breadcrumb_helper.rb +0 -37
  195. data/app/helpers/better_ui/general/components/button/button_helper.rb +0 -65
  196. data/app/helpers/better_ui/general/components/container/container_helper.rb +0 -60
  197. data/app/helpers/better_ui/general/components/divider/divider_helper.rb +0 -63
  198. data/app/helpers/better_ui/general/components/dropdown/divider_helper.rb +0 -32
  199. data/app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb +0 -79
  200. data/app/helpers/better_ui/general/components/dropdown/item_helper.rb +0 -62
  201. data/app/helpers/better_ui/general/components/field/field_helper.rb +0 -26
  202. data/app/helpers/better_ui/general/components/heading/heading_helper.rb +0 -72
  203. data/app/helpers/better_ui/general/components/icon/icon_helper.rb +0 -16
  204. data/app/helpers/better_ui/general/components/input/checkbox/checkbox_helper.rb +0 -81
  205. data/app/helpers/better_ui/general/components/input/datetime/datetime_helper.rb +0 -91
  206. data/app/helpers/better_ui/general/components/input/radio/radio_helper.rb +0 -79
  207. data/app/helpers/better_ui/general/components/input/radio_group/radio_group_helper.rb +0 -124
  208. data/app/helpers/better_ui/general/components/input/select/select_helper.rb +0 -70
  209. data/app/helpers/better_ui/general/components/input/text/text_helper.rb +0 -138
  210. data/app/helpers/better_ui/general/components/input/textarea/textarea_helper.rb +0 -73
  211. data/app/helpers/better_ui/general/components/link/link_helper.rb +0 -89
  212. data/app/helpers/better_ui/general/components/modal/modal_helper.rb +0 -85
  213. data/app/helpers/better_ui/general/components/modal.rb +0 -11
  214. data/app/helpers/better_ui/general/components/pagination/pagination_helper.rb +0 -82
  215. data/app/helpers/better_ui/general/components/panel/panel_helper.rb +0 -83
  216. data/app/helpers/better_ui/general/components/progress/progress_helper.rb +0 -53
  217. data/app/helpers/better_ui/general/components/spinner/spinner_helper.rb +0 -19
  218. data/app/helpers/better_ui/general/components/table/table_helper.rb +0 -53
  219. data/app/helpers/better_ui/general/components/table/tbody_helper.rb +0 -13
  220. data/app/helpers/better_ui/general/components/table/td_helper.rb +0 -19
  221. data/app/helpers/better_ui/general/components/table/tfoot_helper.rb +0 -13
  222. data/app/helpers/better_ui/general/components/table/th_helper.rb +0 -19
  223. data/app/helpers/better_ui/general/components/table/thead_helper.rb +0 -13
  224. data/app/helpers/better_ui/general/components/table/tr_helper.rb +0 -13
  225. data/app/helpers/better_ui/general/components/tabs/panel_helper.rb +0 -62
  226. data/app/helpers/better_ui/general/components/tabs/tab_helper.rb +0 -55
  227. data/app/helpers/better_ui/general/components/tabs/tabs_helper.rb +0 -95
  228. data/app/helpers/better_ui/general/components/tag/tag_helper.rb +0 -26
  229. data/app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb +0 -60
  230. data/app/views/layouts/better_ui/application.html.erb +0 -17
  231. data/lib/better_ui/railtie.rb +0 -20
@@ -1,124 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module BetterUi
4
- module General
5
- module Components
6
- module Input
7
- module RadioGroup
8
- # Helper per creare gruppi di radio button Better UI
9
- module RadioGroupHelper
10
- # Genera un gruppo completo di radio button con stili Better UI
11
- #
12
- # @param name [String] Nome del campo radio (comune a tutto il gruppo)
13
- # @param options [Array<Hash>] Array di opzioni per ogni radio button
14
- # @param selected [String, nil] Valore dell'opzione selezionata
15
- # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
16
- # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
17
- # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
18
- # @param direction [Symbol] Direzione del gruppo (:vertical, :horizontal)
19
- # @param required [Boolean] Se il gruppo è obbligatorio
20
- # @param disabled [Boolean] Se il gruppo è disabilitato
21
- # @param classes [String] Classi CSS aggiuntive per il contenitore
22
- # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
23
- # @param html_options [Hash] Opzioni HTML aggiuntive per ogni radio
24
- # @return [String] HTML del gruppo radio renderizzato
25
- #
26
- # @example Gruppo radio base - Selezione genere
27
- # bui_input_radio_group(
28
- # name: "gender",
29
- # options: [
30
- # { value: "male", label: "Maschio" },
31
- # { value: "female", label: "Femmina" },
32
- # { value: "other", label: "Altro" }
33
- # ]
34
- # )
35
- #
36
- # @example Gruppo radio con tema e selezione
37
- # bui_input_radio_group(
38
- # name: "priority",
39
- # options: [
40
- # { value: "low", label: "Bassa", theme: :green },
41
- # { value: "medium", label: "Media", theme: :yellow },
42
- # { value: "high", label: "Alta", theme: :red }
43
- # ],
44
- # selected: "medium",
45
- # size: :large
46
- # )
47
- #
48
- # @example Gruppo radio orizzontale con Rails form
49
- # <%= form_with model: @user do |form| %>
50
- # <%= bui_input_radio_group(
51
- # name: :role,
52
- # options: [
53
- # { value: "admin", label: "Amministratore" },
54
- # { value: "user", label: "Utente" },
55
- # { value: "guest", label: "Ospite" }
56
- # ],
57
- # selected: @user.role,
58
- # direction: :horizontal,
59
- # form: form
60
- # ) %>
61
- # <% end %>
62
- #
63
- # @example Gruppo radio con validazione e attributi HTML
64
- # bui_input_radio_group(
65
- # name: "notification_type",
66
- # options: [
67
- # { value: "email", label: "Email" },
68
- # { value: "sms", label: "SMS" },
69
- # { value: "push", label: "Push Notification" }
70
- # ],
71
- # required: true,
72
- # theme: :blue,
73
- # html_options: { data: { action: "change->form#validateNotification" } }
74
- # )
75
- #
76
- # @example Gruppo radio con temi personalizzati per opzione
77
- # bui_input_radio_group(
78
- # name: "status",
79
- # options: [
80
- # { value: "active", label: "Attivo", theme: :green },
81
- # { value: "pending", label: "In Sospeso", theme: :yellow },
82
- # { value: "inactive", label: "Inattivo", theme: :red }
83
- # ],
84
- # selected: "active",
85
- # direction: :horizontal
86
- # )
87
- #
88
- def bui_input_radio_group(name:, options:, selected: nil, theme: :default, size: :medium,
89
- rounded: :full, direction: :vertical, required: false, disabled: false,
90
- classes: '', form: nil, **html_options)
91
- container_classes = [
92
- 'space-y-2',
93
- direction == :horizontal ? 'flex flex-wrap gap-6' : 'space-y-2',
94
- classes
95
- ].compact.join(' ')
96
-
97
- content_tag(:div, class: container_classes) do
98
- options.map do |option|
99
- option_theme = option[:theme] || theme
100
- option_classes = option[:classes] || ''
101
-
102
- render BetterUi::General::Input::Radio::Component.new(
103
- name: name,
104
- value: option[:value],
105
- label: option[:label],
106
- checked: selected.to_s == option[:value].to_s,
107
- theme: option_theme,
108
- size: size,
109
- rounded: rounded,
110
- required: required,
111
- disabled: disabled || option[:disabled],
112
- classes: option_classes,
113
- form: form,
114
- **html_options
115
- )
116
- end.join.html_safe
117
- end
118
- end
119
- end
120
- end
121
- end
122
- end
123
- end
124
- end
@@ -1,70 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module BetterUi
4
- module General
5
- module Components
6
- module Input
7
- module Select
8
- module SelectHelper
9
- # Renders a Select component for selection fields from option lists.
10
- #
11
- # @param name [String] Name of the select field
12
- # @param options [Array<Hash>] Array of select options in format [{value: 'value', label: 'label'}, ...]
13
- # @param selected [String, Array, nil] Selected value or values
14
- # @param required [Boolean] Whether the field is required
15
- # @param disabled [Boolean] Whether the field is disabled
16
- # @param multiple [Boolean] Whether multiple options can be selected
17
- # @param theme [Symbol] Component theme (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
18
- # @param size [Symbol] Component size (:small, :medium, :large)
19
- # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
20
- # @param placeholder [String, nil] Placeholder text for the field (creates an initial disabled option)
21
- # @param classes [String] Additional CSS classes
22
- # @param form [ActionView::Helpers::FormBuilder, nil] Optional Rails form builder
23
- # @param options_html [Hash] Additional HTML attributes for option tags
24
- # @param html_options [Hash] Additional HTML attributes for the select tag
25
- #
26
- # @return [String] Rendered HTML of the Select component
27
- #
28
- # @example Basic select
29
- # <%= bui_input_select(name: 'country', options: [{value: 'it', label: 'Italy'}, {value: 'fr', label: 'France'}]) %>
30
- #
31
- # @example Select with selected option
32
- # <%= bui_input_select(name: 'role', options: roles_array, selected: 'admin') %>
33
- #
34
- # @example Multiple select
35
- # <%= bui_input_select(name: 'languages[]', options: languages_array, multiple: true, selected: ['en', 'fr']) %>
36
- #
37
- # @example Select with custom theme and size
38
- # <%= bui_input_select(name: 'category', options: categories_array, theme: :blue, size: :large) %>
39
- #
40
- # @example With Rails form builder
41
- # <%= form_with model: @user do |form| %>
42
- # <%= bui_input_select(name: :country_id, options: countries_array, form: form, required: true) %>
43
- # <% end %>
44
- def bui_input_select(name:, options:, selected: nil, required: false, disabled: false,
45
- multiple: false, theme: :default, size: :medium, rounded: :medium,
46
- placeholder: nil, classes: '', form: nil, options_html: {}, **html_options)
47
-
48
- render BetterUi::General::Input::Select::Component.new(
49
- name: name,
50
- options: options,
51
- selected: selected,
52
- required: required,
53
- disabled: disabled,
54
- multiple: multiple,
55
- theme: theme,
56
- size: size,
57
- rounded: rounded,
58
- placeholder: placeholder,
59
- classes: classes,
60
- form: form,
61
- options_html: options_html,
62
- **html_options
63
- )
64
- end
65
- end
66
- end
67
- end
68
- end
69
- end
70
- end
@@ -1,138 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module BetterUi
4
- module General
5
- module Components
6
- module Input
7
- module Text
8
- module TextHelper
9
- # Renderizza un componente Text Input con tutti i parametri disponibili.
10
- #
11
- # @param name [String] Nome del campo input (obbligatorio)
12
- # @param value [String, nil] Valore del campo
13
- # @param placeholder [String, nil] Placeholder del campo
14
- # @param required [Boolean] Se il campo è obbligatorio
15
- # @param disabled [Boolean] Se il campo è disabilitato
16
- # @param type [Symbol] Tipo del campo input (:text, :password, :email, :tel, :url, :number, :search, :color)
17
- # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
18
- # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
19
- # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
20
- # @param classes [String] Classi CSS aggiuntive
21
- # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
22
- # @param options [Hash] Opzioni aggiuntive per l'input (es. data attributes, aria attributes)
23
- #
24
- # @return [String] HTML del componente Text Input renderizzato
25
- #
26
- # @example Uso base
27
- # <%= bui_input_text(name: 'email') %>
28
- #
29
- # @example Con placeholder e validazione
30
- # <%= bui_input_text(name: 'email', placeholder: 'Inserisci la tua email', required: true) %>
31
- #
32
- # @example Con tema e dimensione personalizzati
33
- # <%= bui_input_text(name: 'search', theme: :blue, size: :large, placeholder: 'Cerca...') %>
34
- #
35
- # @example Con border radius personalizzato
36
- # <%= bui_input_text(name: 'username', rounded: :full, placeholder: 'Username') %>
37
- #
38
- # @example Con classi aggiuntive
39
- # <%= bui_input_text(name: 'custom', classes: 'mb-4', placeholder: 'Campo personalizzato') %>
40
- #
41
- # @example Con attributi HTML aggiuntivi
42
- # <%= bui_input_text(name: 'data-field', 'data-validation': 'email', 'aria-label': 'Campo email') %>
43
- #
44
- # @example Con Rails form builder
45
- # <%= form_with model: @user do |form| %>
46
- # <%= bui_input_text(name: :email, form: form, theme: :blue, placeholder: 'Email utente') %>
47
- # <% end %>
48
- def bui_input_text(name:, value: nil, placeholder: nil, required: false, disabled: false,
49
- type: :text, theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
50
- render BetterUi::General::Input::Text::Component.new(
51
- name: name,
52
- value: value,
53
- placeholder: placeholder,
54
- required: required,
55
- disabled: disabled,
56
- type: type,
57
- theme: theme,
58
- size: size,
59
- rounded: rounded,
60
- classes: classes,
61
- form: form,
62
- **options
63
- )
64
- end
65
-
66
- # Helper specifici per ogni tipo di input
67
-
68
- # Input di tipo password
69
- def bui_input_password(name:, value: nil, placeholder: nil, required: false, disabled: false,
70
- theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
71
- bui_input_text(
72
- name: name, value: value, placeholder: placeholder, required: required, disabled: disabled,
73
- type: :password, theme: theme, size: size, rounded: rounded, classes: classes, form: form, **options
74
- )
75
- end
76
-
77
- # Input di tipo email
78
- def bui_input_email(name:, value: nil, placeholder: nil, required: false, disabled: false,
79
- theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
80
- bui_input_text(
81
- name: name, value: value, placeholder: placeholder, required: required, disabled: disabled,
82
- type: :email, theme: theme, size: size, rounded: rounded, classes: classes, form: form, **options
83
- )
84
- end
85
-
86
- # Input di tipo tel
87
- def bui_input_tel(name:, value: nil, placeholder: nil, required: false, disabled: false,
88
- theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
89
- bui_input_text(
90
- name: name, value: value, placeholder: placeholder, required: required, disabled: disabled,
91
- type: :tel, theme: theme, size: size, rounded: rounded, classes: classes, form: form, **options
92
- )
93
- end
94
-
95
- # Input di tipo url
96
- def bui_input_url(name:, value: nil, placeholder: nil, required: false, disabled: false,
97
- theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
98
- bui_input_text(
99
- name: name, value: value, placeholder: placeholder, required: required, disabled: disabled,
100
- type: :url, theme: theme, size: size, rounded: rounded, classes: classes, form: form, **options
101
- )
102
- end
103
-
104
- # Input di tipo number
105
- def bui_input_number(name:, value: nil, placeholder: nil, required: false, disabled: false,
106
- theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
107
- bui_input_text(
108
- name: name, value: value, placeholder: placeholder, required: required, disabled: disabled,
109
- type: :number, theme: theme, size: size, rounded: rounded, classes: classes, form: form, **options
110
- )
111
- end
112
-
113
- # Input di tipo search
114
- def bui_input_search(name:, value: nil, placeholder: nil, required: false, disabled: false,
115
- theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
116
- bui_input_text(
117
- name: name, value: value, placeholder: placeholder, required: required, disabled: disabled,
118
- type: :search, theme: theme, size: size, rounded: rounded, classes: classes, form: form, **options
119
- )
120
- end
121
-
122
-
123
-
124
-
125
- # Input di tipo color
126
- def bui_input_color(name:, value: nil, placeholder: nil, required: false, disabled: false,
127
- theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
128
- bui_input_text(
129
- name: name, value: value, placeholder: placeholder, required: required, disabled: disabled,
130
- type: :color, theme: theme, size: size, rounded: rounded, classes: classes, form: form, **options
131
- )
132
- end
133
- end
134
- end
135
- end
136
- end
137
- end
138
- end
@@ -1,73 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module BetterUi
4
- module General
5
- module Components
6
- module Input
7
- module Textarea
8
- module TextareaHelper
9
- # Renderizza un componente Textarea con tutti i parametri disponibili.
10
- #
11
- # @param name [String] Nome del campo textarea (obbligatorio)
12
- # @param value [String, nil] Valore del campo
13
- # @param placeholder [String, nil] Placeholder del campo
14
- # @param required [Boolean] Se il campo è obbligatorio
15
- # @param disabled [Boolean] Se il campo è disabilitato
16
- # @param rows [Integer] Numero di righe per la textarea
17
- # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
18
- # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
19
- # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
20
- # @param classes [String] Classi CSS aggiuntive
21
- # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
22
- # @param options [Hash] Opzioni aggiuntive per la textarea (es. data attributes, aria attributes)
23
- #
24
- # @return [String] HTML del componente Textarea renderizzato
25
- #
26
- # @example Uso base
27
- # <%= bui_input_textarea(name: 'description') %>
28
- #
29
- # @example Con placeholder e validazione
30
- # <%= bui_input_textarea(name: 'message', placeholder: 'Inserisci il tuo messaggio', required: true) %>
31
- #
32
- # @example Con numero di righe personalizzato
33
- # <%= bui_input_textarea(name: 'content', rows: 5, placeholder: 'Contenuto lungo...') %>
34
- #
35
- # @example Con tema e dimensione personalizzati
36
- # <%= bui_input_textarea(name: 'feedback', theme: :blue, size: :large, rows: 4) %>
37
- #
38
- # @example Con border radius personalizzato
39
- # <%= bui_input_textarea(name: 'notes', rounded: :large, rows: 3, placeholder: 'Note aggiuntive') %>
40
- #
41
- # @example Con classi aggiuntive
42
- # <%= bui_input_textarea(name: 'custom', classes: 'mb-4', rows: 6, placeholder: 'Campo personalizzato') %>
43
- #
44
- # @example Con attributi HTML aggiuntivi
45
- # <%= bui_input_textarea(name: 'data-field', rows: 4, 'data-validation': 'required', 'aria-label': 'Campo textarea') %>
46
- #
47
- # @example Con Rails form builder
48
- # <%= form_with model: @post do |form| %>
49
- # <%= bui_input_textarea(name: :content, form: form, theme: :blue, rows: 8, placeholder: 'Contenuto del post') %>
50
- # <% end %>
51
- def bui_input_textarea(name:, value: nil, placeholder: nil, required: false, disabled: false,
52
- rows: 3, theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
53
- render BetterUi::General::Input::Textarea::Component.new(
54
- name: name,
55
- value: value,
56
- placeholder: placeholder,
57
- required: required,
58
- disabled: disabled,
59
- rows: rows,
60
- theme: theme,
61
- size: size,
62
- rounded: rounded,
63
- classes: classes,
64
- form: form,
65
- **options
66
- )
67
- end
68
- end
69
- end
70
- end
71
- end
72
- end
73
- end
@@ -1,89 +0,0 @@
1
- module BetterUi
2
- module General
3
- module Components
4
- module Link
5
- module LinkHelper
6
- # Genera un link usando BetterUi::General::Link::Component
7
- #
8
- # @param label [String] testo del link
9
- # @param href [String] URL di destinazione (nil per semplice testo)
10
- # @param theme [Symbol] tema del colore (:default, :white, etc.)
11
- # @param orientation [Symbol] orientamento (:horizontal, :vertical)
12
- # @param style [Symbol] stile (:default, :underline, :bold, :text)
13
- # @param size [Symbol] dimensione (:extra_small, :small, :medium, :large)
14
- # @param icon [String] icona opzionale
15
- # @param active [Boolean] stato attivo del link
16
- # @param disabled [Boolean] stato disabilitato del link
17
- # @param data [Hash] attributi data
18
- # @param method [Symbol] metodo HTTP (per Turbo)
19
- # @param target [String] target del link
20
- # @param html_options [Hash] opzioni HTML aggiuntive
21
- # @return [String] HTML del link renderizzato
22
- #
23
- # @example Uso base
24
- # bui_link("Home", href: "/")
25
- # bui_link("Contatti", href: "/contact", theme: :blue)
26
- #
27
- # @example Con icona
28
- # bui_link("Dashboard", href: "/admin", icon: "home", theme: :green)
29
- #
30
- # @example Link attivo
31
- # bui_link("Pagina corrente", href: "/current", active: true)
32
- #
33
- # @example Link disabilitato (diventa span)
34
- # bui_link("Non disponibile", disabled: true)
35
- #
36
- # @example Con attributi Turbo
37
- # bui_link("Elimina", href: "/delete", method: :delete,
38
- # data: { confirm: "Sei sicuro?" }, theme: :red)
39
- #
40
- # @example Con opzioni avanzate
41
- # bui_link(
42
- # "Link esterno",
43
- # href: "https://example.com",
44
- # theme: :violet,
45
- # orientation: :vertical,
46
- # style: :bold,
47
- # size: :large,
48
- # icon: "external-link",
49
- # target: "_blank",
50
- # id: "external-link",
51
- # class: "custom-link"
52
- # )
53
- def bui_link(
54
- label,
55
- href: nil,
56
- theme: :white,
57
- orientation: :horizontal,
58
- style: :default,
59
- size: :medium,
60
- icon: nil,
61
- active: false,
62
- disabled: false,
63
- data: {},
64
- method: nil,
65
- target: nil,
66
- **html_options,
67
- &block
68
- )
69
- render BetterUi::General::Link::Component.new(
70
- label: label,
71
- href: href,
72
- theme: theme,
73
- orientation: orientation,
74
- style: style,
75
- size: size,
76
- icon: icon,
77
- active: active,
78
- disabled: disabled,
79
- data: data,
80
- method: method,
81
- target: target,
82
- **html_options
83
- ), &block
84
- end
85
- end
86
- end
87
- end
88
- end
89
- end
@@ -1,85 +0,0 @@
1
- module BetterUi
2
- module General
3
- module Components
4
- module Modal
5
- module ModalHelper
6
- # Helper per renderizzare un modal con trigger e contenuto
7
- #
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
11
- # @param classes [String] Classi CSS aggiuntive per il contenitore
12
- # @param html_options [Hash] Attributi HTML aggiuntivi
13
- #
14
- # @option theme [Symbol] :default (default) Header con sfondo grigio chiaro
15
- # @option theme [Symbol] :white Header con sfondo bianco
16
- # @option theme [Symbol] :red Header con sfondo rosso chiaro
17
- # @option theme [Symbol] :rose Header con sfondo rosa chiaro
18
- # @option theme [Symbol] :orange Header con sfondo arancione chiaro
19
- # @option theme [Symbol] :green Header con sfondo verde chiaro
20
- # @option theme [Symbol] :blue Header con sfondo blu chiaro
21
- # @option theme [Symbol] :yellow Header con sfondo giallo chiaro
22
- # @option theme [Symbol] :violet Header con sfondo violetto chiaro
23
- #
24
- # @option size [Symbol] :small (max-w-sm) Modal piccolo
25
- # @option size [Symbol] :medium (max-w-md, default) Modal medio
26
- # @option size [Symbol] :large (max-w-2xl) Modal grande
27
- #
28
- # @option rounded [Symbol] :none (rounded-none) Nessun border radius
29
- # @option rounded [Symbol] :small (rounded-md) Border radius piccolo
30
- # @option rounded [Symbol] :medium (rounded-lg, default) Border radius medio
31
- # @option rounded [Symbol] :large (rounded-xl) Border radius grande
32
- # @option rounded [Symbol] :full (rounded-full) Border radius completo
33
- #
34
- # @return [String] HTML del modal
35
- #
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
- # <% end %>
43
- #
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 %>
50
- # <% end %>
51
- #
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 %>
64
- # <% end %>
65
- def bui_modal(
66
- close_on_backdrop: true,
67
- close_on_escape: true,
68
- lock_scroll: true,
69
- classes: nil,
70
- **html_options,
71
- &block
72
- )
73
- render BetterUi::General::Modal::Component.new(
74
- close_on_backdrop: close_on_backdrop,
75
- close_on_escape: close_on_escape,
76
- lock_scroll: lock_scroll,
77
- classes: classes,
78
- **html_options
79
- ), &block
80
- end
81
- end
82
- end
83
- end
84
- end
85
- end
@@ -1,11 +0,0 @@
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
@@ -1,82 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module BetterUi
4
- module General
5
- module Components
6
- module Pagination
7
- module PaginationHelper
8
- # Genera un componente di navigazione paginata per liste e tabelle
9
- #
10
- # @param current_page [Integer] La pagina corrente (1-indexed)
11
- # @param total_pages [Integer] Il numero totale di pagine
12
- # @param path [String] L'URL base per costruire i link di paginazione
13
- # @param theme [Symbol] Il tema del componente (:default, :blue, :red, :green, :yellow, :violet, :orange, :rose, :white)
14
- # @param size [Symbol] La dimensione del componente (:small, :medium, :large)
15
- # @param window [Integer] Il numero di pagine da mostrare intorno alla pagina corrente (default: 2)
16
- # @param show_info [Boolean] Se mostrare le informazioni sui risultati (default: false)
17
- # @param per_page [Integer] Il numero di elementi per pagina (richiesto se show_info è true)
18
- # @param classes [String] Classi CSS aggiuntive
19
- # @param form [FormBuilder, nil] Form builder per l'integrazione con Rails form (opzionale)
20
- # @param options [Hash] Attributi HTML aggiuntivi
21
- # @return [String] Il markup HTML del componente pagination
22
- #
23
- # @example Uso base standalone
24
- # <%= bui_pagination(current_page: 3, total_pages: 10, path: '/products') %>
25
- #
26
- # @example Con tema e dimensione personalizzati
27
- # <%= bui_pagination(
28
- # current_page: 5,
29
- # total_pages: 20,
30
- # path: '/articles',
31
- # theme: :blue,
32
- # size: :large
33
- # ) %>
34
- #
35
- # @example Con informazioni sui risultati
36
- # <%= bui_pagination(
37
- # current_page: 2,
38
- # total_pages: 8,
39
- # path: '/users',
40
- # show_info: true,
41
- # per_page: 25,
42
- # theme: :green
43
- # ) %>
44
- #
45
- # @example Con finestra di pagine personalizzata
46
- # <%= bui_pagination(
47
- # current_page: 10,
48
- # total_pages: 50,
49
- # path: '/orders',
50
- # window: 3,
51
- # size: :small
52
- # ) %>
53
- #
54
- # @example Con attributi HTML aggiuntivi
55
- # <%= bui_pagination(
56
- # current_page: 1,
57
- # total_pages: 5,
58
- # path: '/dashboard',
59
- # classes: 'my-4',
60
- # data: { turbo_frame: 'content' }
61
- # ) %>
62
- def bui_pagination(current_page:, total_pages:, path:, theme: :default, size: :medium,
63
- window: 2, show_info: false, per_page: nil, classes: '',
64
- form: nil, **options)
65
- render BetterUi::General::Pagination::Component.new(
66
- current_page: current_page,
67
- total_pages: total_pages,
68
- path: path,
69
- theme: theme,
70
- size: size,
71
- window: window,
72
- show_info: show_info,
73
- per_page: per_page,
74
- classes: classes,
75
- **options
76
- )
77
- end
78
- end
79
- end
80
- end
81
- end
82
- end