better_ui 0.3.0 → 0.5.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.

Potentially problematic release.


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

Files changed (206) hide show
  1. checksums.yaml +4 -4
  2. data/MIT-LICENSE +1 -1
  3. data/README.md +227 -209
  4. data/app/assets/javascripts/better_ui/controllers/navbar_controller.js +138 -0
  5. data/app/assets/javascripts/better_ui/controllers/sidebar_controller.js +211 -0
  6. data/app/assets/javascripts/better_ui/controllers/toast_controller.js +161 -0
  7. data/app/assets/javascripts/better_ui/index.js +159 -0
  8. data/app/assets/javascripts/better_ui/toast_manager.js +77 -0
  9. data/app/assets/stylesheets/better_ui/application.css +30 -0
  10. data/app/components/better_ui/application/alert_component.html.erb +27 -0
  11. data/app/components/better_ui/application/alert_component.rb +202 -0
  12. data/app/components/better_ui/application/card_component.html.erb +24 -0
  13. data/app/components/better_ui/application/card_component.rb +53 -0
  14. data/app/components/better_ui/application/card_container_component.html.erb +8 -0
  15. data/app/components/better_ui/application/card_container_component.rb +14 -0
  16. data/app/components/better_ui/application/header_component.html.erb +88 -0
  17. data/app/components/better_ui/application/header_component.rb +188 -0
  18. data/app/components/better_ui/application/navbar_component.html.erb +294 -0
  19. data/app/components/better_ui/application/navbar_component.rb +249 -0
  20. data/app/components/better_ui/application/sidebar_component.html.erb +207 -0
  21. data/app/components/better_ui/application/sidebar_component.rb +318 -0
  22. data/app/components/better_ui/application/toast_component.html.erb +35 -0
  23. data/app/components/better_ui/application/toast_component.rb +223 -0
  24. data/app/components/better_ui/general/avatar_component.html.erb +19 -0
  25. data/app/components/better_ui/general/avatar_component.rb +171 -0
  26. data/app/components/better_ui/general/badge_component.html.erb +19 -0
  27. data/app/components/better_ui/general/badge_component.rb +123 -0
  28. data/app/components/better_ui/general/{breadcrumb/component.html.erb → breadcrumb_component.html.erb} +4 -4
  29. data/app/components/better_ui/general/breadcrumb_component.rb +130 -0
  30. data/app/components/better_ui/general/{button/component.html.erb → button_component.html.erb} +7 -7
  31. data/app/components/better_ui/general/button_component.rb +162 -0
  32. data/app/components/better_ui/general/heading_component.html.erb +25 -0
  33. data/app/components/better_ui/general/heading_component.rb +148 -0
  34. data/app/components/better_ui/general/icon_component.html.erb +2 -0
  35. data/app/components/better_ui/general/icon_component.rb +100 -0
  36. data/app/components/better_ui/general/link_component.html.erb +17 -0
  37. data/app/components/better_ui/general/link_component.rb +132 -0
  38. data/app/components/better_ui/general/panel_component.html.erb +27 -0
  39. data/app/components/better_ui/general/panel_component.rb +103 -0
  40. data/app/components/better_ui/general/spinner_component.html.erb +15 -0
  41. data/app/components/better_ui/general/spinner_component.rb +79 -0
  42. data/app/components/better_ui/general/table_component.html.erb +73 -0
  43. data/app/components/better_ui/general/table_component.rb +167 -0
  44. data/app/components/better_ui/theme_helper.rb +171 -0
  45. data/app/controllers/better_ui/application_controller.rb +1 -0
  46. data/app/controllers/better_ui/docs_controller.rb +34 -0
  47. data/app/views/components/better_ui/general/table/_custom_body_row.html.erb +17 -0
  48. data/app/views/components/better_ui/general/table/_custom_footer_rows.html.erb +17 -0
  49. data/app/views/components/better_ui/general/table/_custom_header_rows.html.erb +12 -0
  50. data/app/views/layouts/component_preview.html.erb +32 -0
  51. data/config/initializers/lookbook.rb +12 -12
  52. data/config/routes.rb +13 -0
  53. data/lib/better_ui/engine.rb +36 -5
  54. data/lib/better_ui/version.rb +1 -1
  55. data/lib/better_ui.rb +24 -4
  56. data/lib/generators/better_ui/stylesheet_generator.rb +96 -0
  57. data/lib/generators/better_ui/templates/README +56 -0
  58. data/lib/generators/better_ui/templates/components/_avatar.scss +151 -0
  59. data/lib/generators/better_ui/templates/components/_badge.scss +142 -0
  60. data/lib/generators/better_ui/templates/components/_breadcrumb.scss +107 -0
  61. data/lib/generators/better_ui/templates/components/_button.scss +106 -0
  62. data/lib/generators/better_ui/templates/components/_card.scss +69 -0
  63. data/lib/generators/better_ui/templates/components/_heading.scss +180 -0
  64. data/lib/generators/better_ui/templates/components/_icon.scss +90 -0
  65. data/lib/generators/better_ui/templates/components/_link.scss +130 -0
  66. data/lib/generators/better_ui/templates/components/_panel.scss +144 -0
  67. data/lib/generators/better_ui/templates/components/_spinner.scss +132 -0
  68. data/lib/generators/better_ui/templates/components/_table.scss +105 -0
  69. data/lib/generators/better_ui/templates/components/_variables.scss +33 -0
  70. data/lib/generators/better_ui/templates/components_stylesheet.scss +66 -0
  71. metadata +145 -156
  72. data/app/components/better_ui/application/card/component.html.erb +0 -20
  73. data/app/components/better_ui/application/card/component.rb +0 -214
  74. data/app/components/better_ui/application/main/component.html.erb +0 -9
  75. data/app/components/better_ui/application/main/component.rb +0 -123
  76. data/app/components/better_ui/application/navbar/component.html.erb +0 -92
  77. data/app/components/better_ui/application/navbar/component.rb +0 -136
  78. data/app/components/better_ui/application/sidebar/component.html.erb +0 -227
  79. data/app/components/better_ui/application/sidebar/component.rb +0 -130
  80. data/app/components/better_ui/general/accordion/component.html.erb +0 -5
  81. data/app/components/better_ui/general/accordion/component.rb +0 -92
  82. data/app/components/better_ui/general/accordion/item_component.html.erb +0 -12
  83. data/app/components/better_ui/general/accordion/item_component.rb +0 -176
  84. data/app/components/better_ui/general/alert/component.html.erb +0 -32
  85. data/app/components/better_ui/general/alert/component.rb +0 -242
  86. data/app/components/better_ui/general/avatar/component.html.erb +0 -20
  87. data/app/components/better_ui/general/avatar/component.rb +0 -301
  88. data/app/components/better_ui/general/badge/component.html.erb +0 -23
  89. data/app/components/better_ui/general/badge/component.rb +0 -248
  90. data/app/components/better_ui/general/breadcrumb/component.rb +0 -187
  91. data/app/components/better_ui/general/button/component.rb +0 -214
  92. data/app/components/better_ui/general/divider/component.html.erb +0 -10
  93. data/app/components/better_ui/general/divider/component.rb +0 -226
  94. data/app/components/better_ui/general/dropdown/component.html.erb +0 -25
  95. data/app/components/better_ui/general/dropdown/component.rb +0 -170
  96. data/app/components/better_ui/general/dropdown/divider_component.html.erb +0 -1
  97. data/app/components/better_ui/general/dropdown/divider_component.rb +0 -41
  98. data/app/components/better_ui/general/dropdown/item_component.html.erb +0 -6
  99. data/app/components/better_ui/general/dropdown/item_component.rb +0 -119
  100. data/app/components/better_ui/general/field/component.html.erb +0 -27
  101. data/app/components/better_ui/general/field/component.rb +0 -37
  102. data/app/components/better_ui/general/heading/component.html.erb +0 -22
  103. data/app/components/better_ui/general/heading/component.rb +0 -257
  104. data/app/components/better_ui/general/icon/component.html.erb +0 -7
  105. data/app/components/better_ui/general/icon/component.rb +0 -239
  106. data/app/components/better_ui/general/input/checkbox/component.html.erb +0 -5
  107. data/app/components/better_ui/general/input/checkbox/component.rb +0 -238
  108. data/app/components/better_ui/general/input/datetime/component.html.erb +0 -5
  109. data/app/components/better_ui/general/input/datetime/component.rb +0 -223
  110. data/app/components/better_ui/general/input/radio/component.html.erb +0 -5
  111. data/app/components/better_ui/general/input/radio/component.rb +0 -230
  112. data/app/components/better_ui/general/input/select/component.html.erb +0 -16
  113. data/app/components/better_ui/general/input/select/component.rb +0 -184
  114. data/app/components/better_ui/general/input/select/select_component.html.erb +0 -5
  115. data/app/components/better_ui/general/input/select/select_component.rb +0 -37
  116. data/app/components/better_ui/general/input/text/component.html.erb +0 -5
  117. data/app/components/better_ui/general/input/text/component.rb +0 -171
  118. data/app/components/better_ui/general/input/textarea/component.html.erb +0 -5
  119. data/app/components/better_ui/general/input/textarea/component.rb +0 -166
  120. data/app/components/better_ui/general/link/component.html.erb +0 -18
  121. data/app/components/better_ui/general/link/component.rb +0 -258
  122. data/app/components/better_ui/general/modal/component.html.erb +0 -5
  123. data/app/components/better_ui/general/modal/component.rb +0 -47
  124. data/app/components/better_ui/general/modal/modal_component.html.erb +0 -52
  125. data/app/components/better_ui/general/modal/modal_component.rb +0 -160
  126. data/app/components/better_ui/general/pagination/component.html.erb +0 -85
  127. data/app/components/better_ui/general/pagination/component.rb +0 -216
  128. data/app/components/better_ui/general/panel/component.html.erb +0 -28
  129. data/app/components/better_ui/general/panel/component.rb +0 -249
  130. data/app/components/better_ui/general/progress/component.html.erb +0 -11
  131. data/app/components/better_ui/general/progress/component.rb +0 -160
  132. data/app/components/better_ui/general/spinner/component.html.erb +0 -35
  133. data/app/components/better_ui/general/spinner/component.rb +0 -93
  134. data/app/components/better_ui/general/table/component.html.erb +0 -5
  135. data/app/components/better_ui/general/table/component.rb +0 -217
  136. data/app/components/better_ui/general/table/tbody_component.html.erb +0 -3
  137. data/app/components/better_ui/general/table/tbody_component.rb +0 -30
  138. data/app/components/better_ui/general/table/td_component.html.erb +0 -3
  139. data/app/components/better_ui/general/table/td_component.rb +0 -44
  140. data/app/components/better_ui/general/table/tfoot_component.html.erb +0 -3
  141. data/app/components/better_ui/general/table/tfoot_component.rb +0 -28
  142. data/app/components/better_ui/general/table/th_component.html.erb +0 -6
  143. data/app/components/better_ui/general/table/th_component.rb +0 -51
  144. data/app/components/better_ui/general/table/thead_component.html.erb +0 -3
  145. data/app/components/better_ui/general/table/thead_component.rb +0 -28
  146. data/app/components/better_ui/general/table/tr_component.html.erb +0 -3
  147. data/app/components/better_ui/general/table/tr_component.rb +0 -30
  148. data/app/components/better_ui/general/tabs/component.html.erb +0 -11
  149. data/app/components/better_ui/general/tabs/component.rb +0 -120
  150. data/app/components/better_ui/general/tabs/panel_component.html.erb +0 -3
  151. data/app/components/better_ui/general/tabs/panel_component.rb +0 -37
  152. data/app/components/better_ui/general/tabs/tab_component.html.erb +0 -13
  153. data/app/components/better_ui/general/tabs/tab_component.rb +0 -111
  154. data/app/components/better_ui/general/tag/component.html.erb +0 -3
  155. data/app/components/better_ui/general/tag/component.rb +0 -104
  156. data/app/components/better_ui/general/tooltip/component.html.erb +0 -7
  157. data/app/components/better_ui/general/tooltip/component.rb +0 -239
  158. data/app/helpers/better_ui/application/components/card/card_helper.rb +0 -96
  159. data/app/helpers/better_ui/application/components/card.rb +0 -11
  160. data/app/helpers/better_ui/application/components/main/main_helper.rb +0 -64
  161. data/app/helpers/better_ui/application/components/navbar/navbar_helper.rb +0 -77
  162. data/app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb +0 -51
  163. data/app/helpers/better_ui/application_helper.rb +0 -55
  164. data/app/helpers/better_ui/general/components/accordion/accordion_helper.rb +0 -73
  165. data/app/helpers/better_ui/general/components/accordion.rb +0 -11
  166. data/app/helpers/better_ui/general/components/alert/alert_helper.rb +0 -57
  167. data/app/helpers/better_ui/general/components/avatar/avatar_helper.rb +0 -29
  168. data/app/helpers/better_ui/general/components/badge/badge_helper.rb +0 -53
  169. data/app/helpers/better_ui/general/components/breadcrumb/breadcrumb_helper.rb +0 -37
  170. data/app/helpers/better_ui/general/components/button/button_helper.rb +0 -65
  171. data/app/helpers/better_ui/general/components/container/container_helper.rb +0 -60
  172. data/app/helpers/better_ui/general/components/divider/divider_helper.rb +0 -63
  173. data/app/helpers/better_ui/general/components/dropdown/divider_helper.rb +0 -32
  174. data/app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb +0 -79
  175. data/app/helpers/better_ui/general/components/dropdown/item_helper.rb +0 -62
  176. data/app/helpers/better_ui/general/components/field/field_helper.rb +0 -26
  177. data/app/helpers/better_ui/general/components/heading/heading_helper.rb +0 -72
  178. data/app/helpers/better_ui/general/components/icon/icon_helper.rb +0 -16
  179. data/app/helpers/better_ui/general/components/input/checkbox/checkbox_helper.rb +0 -81
  180. data/app/helpers/better_ui/general/components/input/datetime/datetime_helper.rb +0 -91
  181. data/app/helpers/better_ui/general/components/input/radio/radio_helper.rb +0 -79
  182. data/app/helpers/better_ui/general/components/input/radio_group/radio_group_helper.rb +0 -124
  183. data/app/helpers/better_ui/general/components/input/select/select_helper.rb +0 -70
  184. data/app/helpers/better_ui/general/components/input/text/text_helper.rb +0 -138
  185. data/app/helpers/better_ui/general/components/input/textarea/textarea_helper.rb +0 -73
  186. data/app/helpers/better_ui/general/components/link/link_helper.rb +0 -89
  187. data/app/helpers/better_ui/general/components/modal/modal_helper.rb +0 -85
  188. data/app/helpers/better_ui/general/components/modal.rb +0 -11
  189. data/app/helpers/better_ui/general/components/pagination/pagination_helper.rb +0 -82
  190. data/app/helpers/better_ui/general/components/panel/panel_helper.rb +0 -83
  191. data/app/helpers/better_ui/general/components/progress/progress_helper.rb +0 -53
  192. data/app/helpers/better_ui/general/components/spinner/spinner_helper.rb +0 -19
  193. data/app/helpers/better_ui/general/components/table/table_helper.rb +0 -53
  194. data/app/helpers/better_ui/general/components/table/tbody_helper.rb +0 -13
  195. data/app/helpers/better_ui/general/components/table/td_helper.rb +0 -19
  196. data/app/helpers/better_ui/general/components/table/tfoot_helper.rb +0 -13
  197. data/app/helpers/better_ui/general/components/table/th_helper.rb +0 -19
  198. data/app/helpers/better_ui/general/components/table/thead_helper.rb +0 -13
  199. data/app/helpers/better_ui/general/components/table/tr_helper.rb +0 -13
  200. data/app/helpers/better_ui/general/components/tabs/panel_helper.rb +0 -62
  201. data/app/helpers/better_ui/general/components/tabs/tab_helper.rb +0 -55
  202. data/app/helpers/better_ui/general/components/tabs/tabs_helper.rb +0 -95
  203. data/app/helpers/better_ui/general/components/tag/tag_helper.rb +0 -26
  204. data/app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb +0 -60
  205. data/app/views/layouts/better_ui/application.html.erb +0 -17
  206. data/lib/better_ui/railtie.rb +0 -20
@@ -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
@@ -1,83 +0,0 @@
1
- module BetterUi
2
- module General
3
- module Components
4
- module Panel
5
- module PanelHelper
6
- # Genera un pannello usando BetterUi::General::Panel::Component
7
- #
8
- # @param title [String] titolo del pannello (opzionale)
9
- # @param body [String] contenuto HTML del pannello (opzionale)
10
- # @param header [String] header personalizzato (opzionale)
11
- # @param footer [String] footer del pannello (opzionale)
12
- # @param theme [Symbol] tema del colore (:default, :white, etc.)
13
- # @param style [Symbol] stile (:default, :flat, :raised, :bordered)
14
- # @param padding [Symbol] padding interno (:none, :small, :medium, :large)
15
- # @param radius [Symbol] raggio dei bordi (:none, :small, :medium, :large, :full)
16
- # @param html_options [Hash] opzioni HTML aggiuntive
17
- # @return [String] HTML del pannello renderizzato
18
- #
19
- # @example Uso base
20
- # bui_panel(title: "Dashboard")
21
- # bui_panel(body: "Contenuto del pannello")
22
- #
23
- # @example Pannello completo
24
- # bui_panel(
25
- # title: "Impostazioni",
26
- # body: "Configura le tue preferenze",
27
- # footer: "Ultimo aggiornamento: oggi",
28
- # theme: :blue
29
- # )
30
- #
31
- # @example Con header personalizzato
32
- # bui_panel(
33
- # header: "<h2>Header Custom</h2>",
34
- # body: "Il mio contenuto",
35
- # theme: :green,
36
- # style: :raised
37
- # )
38
- #
39
- # @example Pannello con stili avanzati
40
- # bui_panel(
41
- # title: "Card Premium",
42
- # body: "Contenuto speciale",
43
- # theme: :violet,
44
- # style: :bordered,
45
- # padding: :large,
46
- # radius: :large,
47
- # id: "premium-panel",
48
- # class: "special-panel"
49
- # )
50
- #
51
- # @example Con contenuto block
52
- # bui_panel(title: "Lista Utenti", theme: :white) do
53
- # "<ul><li>Utente 1</li><li>Utente 2</li></ul>".html_safe
54
- # end
55
- def bui_panel(
56
- title: nil,
57
- body: nil,
58
- header: nil,
59
- footer: nil,
60
- theme: :white,
61
- style: :default,
62
- padding: :medium,
63
- radius: :small,
64
- **html_options,
65
- &block
66
- )
67
- render BetterUi::General::Panel::Component.new(
68
- title: title,
69
- body: body,
70
- header: header,
71
- footer: footer,
72
- theme: theme,
73
- style: style,
74
- padding: padding,
75
- radius: radius,
76
- **html_options
77
- ), &block
78
- end
79
- end
80
- end
81
- end
82
- end
83
- end