better_ui 0.5.0 → 0.5.1

data/app/components/better_ui/general/icon_component.rb

@@ -3,50 +3,53 @@ module BetterUi
     class IconComponent < ViewComponent::Base
       # Dimensioni disponibili
       ICON_SIZES = {
-        xsmall: "bui-icon-xsmall",
-        small: "bui-icon-small",
-        medium: "bui-icon-medium",
-        large: "bui-icon-large",
-        xlarge: "bui-icon-xlarge"
+        xsmall: "bui-icon--xs",
+        tiny: "bui-icon--xs",
+        small: "bui-icon--sm",
+        medium: "bui-icon--md",
+        large: "bui-icon--lg",
+        xlarge: "bui-icon--xl"
       }
 
-      # Stili disponibili
-      ICON_STYLES = {
-        solid: "bui-icon-solid",
-        regular: "bui-icon-regular",
-        light: "bui-icon-light",
-        brands: "bui-icon-brands",
-        duotone: "bui-icon-duotone"
+      # Colori disponibili
+      ICON_THEMES = {
+        default: "bui-icon--default",
+        white: "bui-icon--white",
+        red: "bui-icon--red",
+        rose: "bui-icon--rose",
+        orange: "bui-icon--orange",
+        green: "bui-icon--green",
+        blue: "bui-icon--blue",
+        yellow: "bui-icon--yellow",
+        violet: "bui-icon--violet"
       }
 
       # Inizializzazione del componente
       def initialize(
         name:,
         size: :medium,
-        style: :solid,
+        color: :default,
         fixed_width: false,
         spin: false,
         pulse: false,
-        border: false,
-        flip: nil,
-        rotation: nil,
+        solid: false,
+        solid_color: false,
         classes: nil
       )
         @name = name.to_s.gsub('_', '-') # Convertiamo da snake_case a kebab-case per Font Awesome
         @size = size.to_sym
-        @style = style.to_sym
+        @color = color.to_sym
         @fixed_width = fixed_width
         @spin = spin
         @pulse = pulse
-        @border = border
-        @flip = flip
-        @rotation = rotation
+        @solid = solid
+        @solid_color = solid_color
         @classes = classes
       end
 
-      # Classe CSS per lo stile dell'icona
-      def style_class
-        ICON_STYLES[@style] || ICON_STYLES[:solid]
+      # Classe CSS per il colore
+      def color_class
+        ICON_THEMES[@color] || ICON_THEMES[:default]
       end
 
       # Classe CSS per la dimensione
@@ -54,44 +57,18 @@ module BetterUi
         ICON_SIZES[@size] || ICON_SIZES[:medium]
       end
 
-      # Classe per rotazione
-      def rotation_class
-        return "" unless @rotation
-        "bui-icon-rotate-#{@rotation}"
-      end
-
-      # Classe per rovesciamento
-      def flip_class
-        return "" unless @flip
-        "bui-icon-flip-#{@flip}"
-      end
-
-      # Classi per animazioni
-      def animation_classes
-        classes = []
-        classes << "bui-icon-spin" if @spin
-        classes << "bui-icon-pulse" if @pulse
-        classes.join(" ")
-      end
-
-      # Classi per caratteristiche aggiuntive
-      def feature_classes
-        classes = []
-        classes << "bui-icon-fw" if @fixed_width
-        classes << "bui-icon-border" if @border
-        classes.join(" ")
-      end
-
       # Combinazione di tutte le classi
       def combined_classes
         [
-          style_class,
+          "bui-icon",
           "fa-#{@name}", # Questa classe deve rimanere specifica di Font Awesome
           size_class,
-          rotation_class,
-          flip_class,
-          animation_classes,
-          feature_classes,
+          color_class,
+          @fixed_width ? "bui-icon--fixed-width" : nil,
+          @spin ? "bui-icon--spin" : nil,
+          @pulse ? "bui-icon--pulse" : nil,
+          @solid ? "bui-icon--solid" : nil,
+          @solid_color ? "bui-icon--solid-primary" : nil,
           @classes
         ].reject(&:blank?).join(" ")
       end

data/app/components/better_ui/general/link_component.html.erb

@@ -1,17 +1,17 @@
 <% if link? %>
   <%= link_to href, **link_attributes do %>
     <% if render_icon %>
-      <span class="bui-link-icon-wrapper"><%= render_icon %></span>
+      <span class="bui-link__icon"><%= render_icon %></span>
     <% end %>
-    <span><%= label %></span>
+    <span class="bui-link__text"><%= label %></span>
     <%= content if content.present? %>
   <% end %>
 <% else %>
   <span class="<%= component_classes %>" <%= "aria-current='page'" if active? %>>
     <% if render_icon %>
-      <span class="bui-link-icon-wrapper"><%= render_icon %></span>
+      <span class="bui-link__icon"><%= render_icon %></span>
     <% end %>
-    <span><%= label %></span>
+    <span class="bui-link__text"><%= label %></span>
     <%= content if content.present? %>
   </span>
 <% end %> 

data/app/components/better_ui/general/link_component.rb

@@ -6,49 +6,49 @@ module BetterUi
       # Temi di colore disponibili
       LINK_THEME = {
         default: {
-          link: "bui-link-default-link",
-          active: "bui-link-default-active",
-          text: "bui-link-default-text"
+          link: "bui-link--default",
+          active: "bui-link--active bui-link--default",
+          text: "bui-link--text bui-link--default"
         },
         white: {
-          link: "bui-link-white-link",
-          active: "bui-link-white-active",
-          text: "bui-link-white-text"
+          link: "bui-link--white",
+          active: "bui-link--active bui-link--white",
+          text: "bui-link--text bui-link--white"
         },
         red: {
-          link: "bui-link-red-link",
-          active: "bui-link-red-active",
-          text: "bui-link-red-text"
+          link: "bui-link--red",
+          active: "bui-link--active bui-link--red",
+          text: "bui-link--text bui-link--red"
         },
         rose: {
-          link: "bui-link-rose-link",
-          active: "bui-link-rose-active",
-          text: "bui-link-rose-text"
+          link: "bui-link--rose",
+          active: "bui-link--active bui-link--rose",
+          text: "bui-link--text bui-link--rose"
         },
         orange: {
-          link: "bui-link-orange-link",
-          active: "bui-link-orange-active",
-          text: "bui-link-orange-text"
+          link: "bui-link--orange",
+          active: "bui-link--active bui-link--orange",
+          text: "bui-link--text bui-link--orange"
         },
         green: {
-          link: "bui-link-green-link",
-          active: "bui-link-green-active",
-          text: "bui-link-green-text"
+          link: "bui-link--green",
+          active: "bui-link--active bui-link--green",
+          text: "bui-link--text bui-link--green"
         },
         blue: {
-          link: "bui-link-blue-link",
-          active: "bui-link-blue-active",
-          text: "bui-link-blue-text"
+          link: "bui-link--blue",
+          active: "bui-link--active bui-link--blue",
+          text: "bui-link--text bui-link--blue"
         },
         yellow: {
-          link: "bui-link-yellow-link",
-          active: "bui-link-yellow-active",
-          text: "bui-link-yellow-text"
+          link: "bui-link--yellow",
+          active: "bui-link--active bui-link--yellow",
+          text: "bui-link--text bui-link--yellow"
         },
         violet: {
-          link: "bui-link-violet-link",
-          active: "bui-link-violet-active",
-          text: "bui-link-violet-text"
+          link: "bui-link--violet",
+          active: "bui-link--active bui-link--violet",
+          text: "bui-link--text bui-link--violet"
         }
       }
 
@@ -89,7 +89,7 @@ module BetterUi
       def component_classes
         theme_classes = LINK_THEME.fetch(@theme, LINK_THEME[:default])
         
-        base_classes = ["bui-link-base"]
+        base_classes = ["bui-link"]
         
         if active?
           base_classes << theme_classes[:active]

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

@@ -5,45 +5,32 @@ module BetterUi
       
       # Opzioni di padding disponibili
       PANEL_PADDING = {
-        none: 'bui-panel-padding-none',
-        small: 'bui-panel-padding-small',
-        medium: 'bui-panel-padding-medium',
-        large: 'bui-panel-padding-large'
+        none: 'bui-panel--padding-none',
+        small: 'bui-panel--padding-small',
+        medium: 'bui-panel--padding-medium',
+        large: 'bui-panel--padding-large'
       }.freeze
       
-      # Temi di colore per l'header
-      PANEL_HEADER_THEME = {
-        default: 'bui-panel-default-header',
-        white: 'bui-panel-white-header',
-        red: 'bui-panel-red-header',
-        rose: 'bui-panel-rose-header',
-        orange: 'bui-panel-orange-header',
-        green: 'bui-panel-green-header',
-        blue: 'bui-panel-blue-header',
-        yellow: 'bui-panel-yellow-header',
-        violet: 'bui-panel-violet-header'
-      }.freeze
-      
-      # Temi di colore per il footer
-      PANEL_FOOTER_THEME = {
-        default: 'bui-panel-default-footer',
-        white: 'bui-panel-white-footer',
-        red: 'bui-panel-red-footer',
-        rose: 'bui-panel-rose-footer',
-        orange: 'bui-panel-orange-footer',
-        green: 'bui-panel-green-footer',
-        blue: 'bui-panel-blue-footer',
-        yellow: 'bui-panel-yellow-footer',
-        violet: 'bui-panel-violet-footer'
+      # Temi di colore per il panel
+      PANEL_THEME = {
+        default: 'bui-panel--default',
+        white: 'bui-panel--white',
+        red: 'bui-panel--red',
+        rose: 'bui-panel--rose',
+        orange: 'bui-panel--orange',
+        green: 'bui-panel--green',
+        blue: 'bui-panel--blue',
+        yellow: 'bui-panel--yellow',
+        violet: 'bui-panel--violet'
       }.freeze
       
       # Opzioni di bordi arrotondati standardizzati
       PANEL_RADIUS = {
-        none: 'bui-panel-radius-none',
-        small: 'bui-panel-radius-small',
-        medium: 'bui-panel-radius-medium',
-        large: 'bui-panel-radius-large',
-        full: 'bui-panel-radius-full'
+        none: 'bui-panel--radius-none',
+        small: 'bui-panel--radius-small',
+        medium: 'bui-panel--radius-medium',
+        large: 'bui-panel--radius-large',
+        full: 'bui-panel--radius-full'
       }.freeze
       
       def initialize(title: nil, body: nil, header: nil, footer: nil, padding: :medium, variant: :default, rounded: :small)
@@ -58,7 +45,8 @@ module BetterUi
 
       def panel_classes
         [
-          'bui-panel-base',
+          'bui-panel',
+          get_theme_class,
           get_border_radius_class
         ].compact.join(' ')
       end
@@ -66,33 +54,34 @@ module BetterUi
       def get_border_radius_class
         PANEL_RADIUS[@rounded] || PANEL_RADIUS[:small]
       end
+      
+      def get_theme_class
+        PANEL_THEME[@variant] || PANEL_THEME[:default]
+      end
 
       def header_classes
         [
-          'bui-panel-header',
-          PANEL_HEADER_THEME[@variant] || PANEL_HEADER_THEME[:default],
+          'bui-panel__header',
           PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
         ].compact.join(' ')
       end
 
       def body_classes
         [
-          'bui-panel-body',
-          'bui-panel-body-content',
+          'bui-panel__body',
           PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
         ].compact.join(' ')
       end
 
       def footer_classes
         [
-          'bui-panel-footer',
-          PANEL_FOOTER_THEME[@variant] || PANEL_FOOTER_THEME[:default],
+          'bui-panel__footer',
           PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
         ].compact.join(' ')
       end
 
       def title_classes
-        'bui-panel-title'
+        'bui-panel__title'
       end
 
       def render?

data/app/components/better_ui/general/spinner_component.html.erb

@@ -1,14 +1,14 @@
 <div <%= spinner_attributes.to_s.html_safe %>>
-  <div class="bui-spinner-animation"></div>
+  <div class="bui-spinner__animation"></div>
   
   <% if @label.present? %>
-    <div class="bui-spinner-label">
+    <div class="bui-spinner__label">
       <%= @label %>
     </div>
   <% end %>
   
   <% if content.present? %>
-    <div class="bui-spinner-content">
+    <div class="bui-spinner__content">
       <%= content %>
     </div>
   <% end %>

data/app/components/better_ui/general/spinner_component.rb

@@ -5,27 +5,27 @@ module BetterUi
 
       # Temi di colore disponibili
       SPINNER_THEME = {
-        default: "bui-spinner-default",
-        white: "bui-spinner-white",
-        red: "bui-spinner-red",
-        rose: "bui-spinner-rose",
-        orange: "bui-spinner-orange",
-        green: "bui-spinner-green",
-        blue: "bui-spinner-blue",
-        yellow: "bui-spinner-yellow",
-        violet: "bui-spinner-violet"
+        default: "bui-spinner--default",
+        white: "bui-spinner--white",
+        red: "bui-spinner--red",
+        rose: "bui-spinner--rose",
+        orange: "bui-spinner--orange",
+        green: "bui-spinner--green",
+        blue: "bui-spinner--blue",
+        yellow: "bui-spinner--yellow",
+        violet: "bui-spinner--violet"
       }
 
       # Dimensioni disponibili
       SPINNER_SIZES = {
-        small: "bui-spinner-small",
-        medium: "bui-spinner-medium",
-        large: "bui-spinner-large"
+        small: "bui-spinner--small",
+        medium: "bui-spinner--medium",
+        large: "bui-spinner--large"
       }
 
       # Stati e comportamenti dello spinner
       SPINNER_STATES = {
-        fullscreen: "bui-spinner-fullscreen"
+        fullscreen: "bui-spinner--fullscreen"
       }
 
       # Inizializzazione del componente

data/app/components/better_ui/general/table_component.rb

@@ -6,24 +6,24 @@ module BetterUi
       
       # Costanti per configurazione stili
       TABLE_THEMES = {
-        default: { base: "bui-table-default", border: "bui-table-border-default", bg: "bui-table-bg-default", text: "bui-table-text-default" },
-        white:   { base: "bui-table-white",   border: "bui-table-border-white",   bg: "bui-table-bg-white",   text: "bui-table-text-white" },
-        red:     { base: "bui-table-red",     border: "bui-table-border-red",     bg: "bui-table-bg-red",     text: "bui-table-text-red" },
-        rose:    { base: "bui-table-rose",    border: "bui-table-border-rose",    bg: "bui-table-bg-rose",    text: "bui-table-text-rose" },
-        orange:  { base: "bui-table-orange",  border: "bui-table-border-orange",  bg: "bui-table-bg-orange",  text: "bui-table-text-orange" },
-        green:   { base: "bui-table-green",   border: "bui-table-border-green",   bg: "bui-table-bg-green",   text: "bui-table-text-green" },
-        blue:    { base: "bui-table-blue",    border: "bui-table-border-blue",    bg: "bui-table-bg-blue",    text: "bui-table-text-blue" },
-        yellow:  { base: "bui-table-yellow",  border: "bui-table-border-yellow",  bg: "bui-table-bg-yellow",  text: "bui-table-text-yellow" },
-        violet:  { base: "bui-table-violet",  border: "bui-table-border-violet",  bg: "bui-table-bg-violet",  text: "bui-table-text-violet" }
+        default: "bui-table--default",
+        white:   "bui-table--white",
+        red:     "bui-table--red",
+        rose:    "bui-table--rose",
+        orange:  "bui-table--orange",
+        green:   "bui-table--green",
+        blue:    "bui-table--blue",
+        yellow:  "bui-table--yellow",
+        violet:  "bui-table--violet"
       }.freeze
       
       # Opzioni di bordi arrotondati standardizzati
       TABLE_RADIUS = {
-        none: "bui-table-radius-none",
-        small: "bui-table-radius-small",
-        medium: "bui-table-radius-medium",
-        large: "bui-table-radius-large",
-        full: "bui-table-radius-full"
+        none: "bui-table--radius-none",
+        small: "bui-table--radius-small",
+        medium: "bui-table--radius-medium",
+        large: "bui-table--radius-large",
+        full: "bui-table--radius-full"
       }.freeze
       
       def initialize(data:, headers: nil, caption: nil, striped: false, hoverable: false, bordered: true, compact: false, classes: nil, variant: :default, rounded: :small, footer: nil, header_rows_partial: nil, body_row_partial: nil, footer_rows_partial: nil)
@@ -45,15 +45,19 @@ module BetterUi
 
       def table_classes
         [
-          "bui-table-base",
-          @bordered ? "bui-table-bordered" : nil,
+          "bui-table",
+          get_theme_class,
+          @bordered ? "bui-table--bordered" : nil,
+          @striped ? "bui-table--striped" : nil,
+          @hoverable ? "bui-table--hoverable" : nil,
+          @compact ? "bui-table--compact" : nil,
           @classes
         ].compact.join(" ")
       end
 
       def table_container_classes
         [
-          "bui-table-container",
+          "bui-table__container",
           get_border_radius_class
         ].compact.join(" ")
       end
@@ -61,76 +65,48 @@ module BetterUi
       def get_border_radius_class
         TABLE_RADIUS[@rounded] || TABLE_RADIUS[:small]
       end
+      
+      def get_theme_class
+        TABLE_THEMES[@variant] || TABLE_THEMES[:default]
+      end
 
       def caption_classes
-        [
-          "bui-table-caption",
-          get_theme_bg_color,
-          get_theme_text_class,
-          @bordered ? "bui-table-caption-bordered #{get_theme_border_color}" : nil
-        ].compact.join(" ")
+        "bui-table__caption"
       end
 
       def thead_classes
-        "bui-table-header"
+        "bui-table__header"
       end
 
       def tbody_classes
-        @striped ? "bui-table-row-striped" : nil
+        "bui-table__body"
       end
       
       def tfoot_classes
-        "bui-table-footer"
+        "bui-table__footer"
       end
 
       def tr_classes(index)
-        [
-          @hoverable ? "bui-table-row-hover" : nil,
-          @striped ? nil : (index.odd? ? "bui-table-row-alternate" : nil)
-        ].compact.join(" ")
+        "bui-table__row"
       end
 
       def th_classes
         [
-          @compact ? "bui-table-cell-compact" : "bui-table-cell",
-          get_theme_bg_color,
-          get_theme_text_class,
-          @bordered ? "bui-table-cell-bordered #{get_theme_border_color}" : nil
+          "bui-table__cell",
+          "bui-table__cell--header"
         ].compact.join(" ")
       end
 
       def td_classes
-        [
-          @compact ? "bui-table-cell-compact" : "bui-table-cell",
-          @bordered ? "bui-table-cell-bordered #{get_theme_border_color}" : nil
-        ].compact.join(" ")
+        "bui-table__cell"
       end
       
       def tf_classes
         [
-          @compact ? "bui-table-cell-compact" : "bui-table-cell",
-          "bui-table-footer-cell",
-          get_theme_bg_color,
-          get_theme_text_class,
-          @bordered ? "bui-table-cell-bordered #{get_theme_border_color}" : nil
+          "bui-table__cell",
+          "bui-table__cell--footer"
         ].compact.join(" ")
       end
-      
-      def get_theme_base_class
-        TABLE_THEMES[@variant][:base] || TABLE_THEMES[:default][:base]
-      end
-      
-      def get_theme_border_color
-        TABLE_THEMES[@variant][:border] || TABLE_THEMES[:default][:border]
-      end
-      
-      def get_theme_bg_color
-        TABLE_THEMES[@variant][:bg] || TABLE_THEMES[:default][:bg]
-      end
-      
-      def get_theme_text_class
-        TABLE_THEMES[@variant][:text] || TABLE_THEMES[:default][:text]
-      end
 
       def headers_for_display
         return @headers if @headers.present?

data/app/helpers/better_ui/general/components/avatar_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module AvatarHelper
+        def bui_avatar(image = nil, **options)
+          render BetterUi::General::AvatarComponent.new(
+            image: image,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_avatar, :bui_avatar
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/badge_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module BadgeHelper
+        def bui_badge(label = nil, **options)
+          render BetterUi::General::BadgeComponent.new(
+            label: label,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_badge, :bui_badge
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/breadcrumb_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module BreadcrumbHelper
+        def bui_breadcrumb(items = nil, **options)
+          render BetterUi::General::BreadcrumbComponent.new(
+            items: items,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_breadcrumb, :bui_breadcrumb
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/button_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module ButtonHelper
+        def bui_button(label = nil, **options)
+          render BetterUi::General::ButtonComponent.new(
+            label: label,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_button, :bui_button
+      end
+    end
+  end
+end 

data/app/helpers/better_ui/general/components/heading_helper.rb

@@ -0,0 +1,17 @@
+module BetterUi
+  module General
+    module Components
+      module HeadingHelper
+        def bui_heading(title = nil, **options)
+          render BetterUi::General::HeadingComponent.new(
+            title: title,
+            **options
+          )
+        end
+        
+        # Supporto per la sintassi originale per compatibilità
+        alias_method :better_ui_general_heading, :bui_heading
+      end
+    end
+  end
+end