better_ui 0.4.0 → 0.5.0

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

@@ -1,46 +1,55 @@
 module BetterUi
   module General
     class ButtonComponent < ViewComponent::Base
-      attr_reader :label, :type, :size, :outline, :full_width, :disabled, 
-                  :icon, :icon_position, :href, :method, :data, :classes, :id
+      attr_reader :label, :type, :size, :full_width, :disabled, 
+                  :icon, :icon_position, :href, :method, :data, :classes, :id, :rounded
 
-      # Tipi di bottoni disponibili con classi Tailwind staticamente definite
-      BUTTON_TYPES = {
-        primary: "bg-blue-600 hover:bg-blue-700 text-white",
-        secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
-        success: "bg-green-600 hover:bg-green-700 text-white",
-        danger: "bg-red-600 hover:bg-red-700 text-white",
-        warning: "bg-yellow-500 hover:bg-yellow-600 text-white",
-        info: "bg-sky-500 hover:bg-sky-600 text-white",
-        light: "bg-white hover:bg-gray-100 text-gray-800 border border-gray-300",
-        dark: "bg-gray-800 hover:bg-gray-900 text-white"
+      # Temi di bottoni disponibili con classi CSS personalizzate
+      BUTTON_THEME = {
+        default: "bui-btn-default",
+        white: "bui-btn-white",
+        red: "bui-btn-red",
+        rose: "bui-btn-rose",
+        orange: "bui-btn-orange",
+        green: "bui-btn-green",
+        blue: "bui-btn-blue",
+        yellow: "bui-btn-yellow",
+        violet: "bui-btn-violet"
       }
 
-      # Classi per bottoni outline
-      OUTLINE_BUTTON_TYPES = {
-        primary: "bg-transparent text-blue-600 border-blue-600 border hover:text-white hover:bg-blue-600",
-        secondary: "bg-transparent text-gray-800 border-gray-200 border hover:text-white hover:bg-gray-200",
-        success: "bg-transparent text-green-600 border-green-600 border hover:text-white hover:bg-green-600",
-        danger: "bg-transparent text-red-600 border-red-600 border hover:text-white hover:bg-red-600",
-        warning: "bg-transparent text-yellow-500 border-yellow-500 border hover:text-white hover:bg-yellow-500",
-        info: "bg-transparent text-sky-500 border-sky-500 border hover:text-white hover:bg-sky-500",
-        light: "bg-transparent text-gray-800 border-gray-300 border hover:text-gray-900 hover:bg-gray-100",
-        dark: "bg-transparent text-gray-800 border-gray-800 border hover:text-white hover:bg-gray-800"
-      }
-
-      # Dimensioni disponibili
+      # Dimensioni disponibili con classi CSS personalizzate
       BUTTON_SIZES = {
-        sm: "py-1 px-2 text-sm",
-        md: "py-2 px-4 text-base",
-        lg: "py-3 px-6 text-lg"
+        small: "bui-btn-size-small",
+        medium: "bui-btn-size-medium",
+        large: "bui-btn-size-large"
+      }
+      
+      # Border radius disponibili con classi CSS personalizzate
+      BUTTON_RADIUS = {
+        none: "bui-btn-radius-none",
+        small: "bui-btn-radius-small",
+        medium: "bui-btn-radius-medium",
+        large: "bui-btn-radius-large",
+        full: "bui-btn-radius-full"
+      }
+      
+      # Stati e comportamenti del bottone
+      BUTTON_STATES = {
+        disabled: "bui-btn-disabled",
+        full_width: "bui-btn-full-width"
+      }
+      
+      # Layout e stili comuni
+      BUTTON_LAYOUT = {
+        default: "bui-btn-layout-default",
+        focus: "bui-btn-focus"
       }
 
       # Inizializzazione del componente
       def initialize(
         label: nil,
-        type: :primary,
-        size: :md,
-        outline: false,
+        type: :default,
+        size: :medium,
         full_width: false,
         disabled: false,
         icon: nil,
@@ -49,12 +58,12 @@ module BetterUi
         method: nil,
         data: {},
         classes: nil,
-        id: nil
+        id: nil,
+        rounded: :small
       )
         @label = label
         @type = type.to_sym
         @size = size.to_sym
-        @outline = outline
         @full_width = full_width
         @disabled = disabled
         @icon = icon
@@ -64,6 +73,7 @@ module BetterUi
         @data = data
         @classes = classes
         @id = id
+        @rounded = rounded.to_sym
       end
 
       # Determina se il bottone è un link o un button
@@ -74,79 +84,28 @@ module BetterUi
       # Combina tutte le classi
       def combined_classes
         [
-          "inline-flex items-center justify-center rounded-md font-medium",
-          "transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+          "bui-btn", # Classe base per tutti i bottoni
+          BUTTON_LAYOUT[:default],
+          BUTTON_LAYOUT[:focus],
+          get_border_radius_class,
           get_button_type_classes,
           get_button_size_classes,
-          @full_width ? "w-full" : "",
-          @disabled ? "opacity-50 cursor-not-allowed" : "",
+          @full_width ? BUTTON_STATES[:full_width] : "",
+          @disabled ? BUTTON_STATES[:disabled] : "",
           @classes
         ].compact.join(" ")
       end
       
       def get_button_type_classes
-        if @outline
-          get_outline_button_classes
-        else
-          get_solid_button_classes
-        end
+        BUTTON_THEME[@type] || BUTTON_THEME[:default]
       end
       
-      def get_solid_button_classes
-        case @type
-        when :primary
-          "bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500"
-        when :secondary
-          "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300"
-        when :success
-          "bg-green-500 text-white hover:bg-green-600 focus:ring-green-500"
-        when :danger
-          "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500"
-        when :warning
-          "bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-500"
-        when :info
-          "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500"
-        when :light
-          "bg-white text-gray-800 border border-gray-300 hover:bg-gray-100 focus:ring-gray-300"
-        when :dark
-          "bg-gray-800 text-white hover:bg-gray-900 focus:ring-gray-800"
-        else
-          "bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500"
-        end
-      end
-      
-      def get_outline_button_classes
-        case @type
-        when :primary
-          "bg-transparent text-orange-500 border-2 border-orange-500 hover:bg-orange-50 focus:ring-orange-500"
-        when :secondary
-          "bg-transparent text-gray-800 border-2 border-gray-300 hover:bg-gray-50 focus:ring-gray-300"
-        when :success
-          "bg-transparent text-green-500 border-2 border-green-500 hover:bg-green-50 focus:ring-green-500"
-        when :danger
-          "bg-transparent text-red-500 border-2 border-red-500 hover:bg-red-50 focus:ring-red-500"
-        when :warning
-          "bg-transparent text-amber-500 border-2 border-amber-500 hover:bg-amber-50 focus:ring-amber-500"
-        when :info
-          "bg-transparent text-blue-500 border-2 border-blue-500 hover:bg-blue-50 focus:ring-blue-500"
-        when :light
-          "bg-transparent text-gray-800 border-2 border-gray-300 hover:bg-gray-50 focus:ring-gray-300"
-        when :dark
-          "bg-transparent text-gray-800 border-2 border-gray-800 hover:bg-gray-50 focus:ring-gray-800"
-        else
-          "bg-transparent text-orange-500 border-2 border-orange-500 hover:bg-orange-50 focus:ring-orange-500"
-        end
+      def get_border_radius_class
+        BUTTON_RADIUS[@rounded] || BUTTON_RADIUS[:small]
       end
       
       def get_button_size_classes
-        case @size
-        when :sm
-          "py-1 px-2.5 text-xs"
-        when :lg
-          "py-2.5 px-6 text-base"
-        else # :md
-          "py-2 px-4 text-sm"
-        end
+        BUTTON_SIZES[@size] || BUTTON_SIZES[:medium]
       end
       
       # Restituisce gli attributi per il bottone
@@ -181,10 +140,20 @@ module BetterUi
       
       # Helper per renderizzare le icone
       def render_icon(icon_name)
+        # Mappa le dimensioni del bottone alle dimensioni dell'icona
+        icon_size = case @size
+                   when :large
+                     :large
+                   when :small
+                     :small
+                   else
+                     :medium
+                   end
+        
         # Utilizziamo il componente Icon
         render BetterUi::General::IconComponent.new(
           name: icon_name,
-          size: @size == :lg ? :lg : :md,
+          size: icon_size,
           fixed_width: true
         )
       end

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

@@ -2,9 +2,9 @@
   <%# Utilizzo di tag heading dinamico in base al livello specificato %>
   <<%= "h#{@level}" %> class="<%= heading_classes %>">
     <% if @icon.present? %>
-      <span class="inline-flex items-center">
-        <span class="mr-2">
-          <%= render BetterUi::General::IconComponent.new(name: @icon) %>
+      <span class="bui-header-icon-container">
+        <span class="bui-header-icon-wrapper">
+          <%= render BetterUi::General::IconComponent.new(name: @icon, size: get_icon_size) %>
         </span>
         <%= @text || content %>
       </span>

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

@@ -4,77 +4,75 @@ module BetterUi
       attr_reader :text, :level, :variant, :size, :align, :classes, :icon, :subtitle, :with_divider
 
       # Varianti di colore disponibili
-      VARIANTS = {
+      HEADER_THEME = {
         default: {
-          heading: "text-gray-900",
-          subtitle: "text-gray-600",
-          divider: "border-gray-200"
+          heading: "bui-header-default-heading",
+          subtitle: "bui-header-default-subtitle",
+          divider: "bui-header-default-divider"
         },
-        primary: {
-          heading: "text-orange-700",
-          subtitle: "text-orange-500",
-          divider: "border-orange-300"
+        white: {
+          heading: "bui-header-white-heading",
+          subtitle: "bui-header-white-subtitle",
+          divider: "bui-header-white-divider"
         },
-        success: {
-          heading: "text-green-700",
-          subtitle: "text-green-500",
-          divider: "border-green-300"
+        red: {
+          heading: "bui-header-red-heading",
+          subtitle: "bui-header-red-subtitle",
+          divider: "bui-header-red-divider"
         },
-        warning: {
-          heading: "text-yellow-700",
-          subtitle: "text-yellow-500",
-          divider: "border-yellow-300"
+        rose: {
+          heading: "bui-header-rose-heading",
+          subtitle: "bui-header-rose-subtitle",
+          divider: "bui-header-rose-divider"
         },
-        danger: {
-          heading: "text-red-700",
-          subtitle: "text-red-500",
-          divider: "border-red-300"
+        orange: {
+          heading: "bui-header-orange-heading",
+          subtitle: "bui-header-orange-subtitle",
+          divider: "bui-header-orange-divider"
         },
-        info: {
-          heading: "text-blue-700",
-          subtitle: "text-blue-500",
-          divider: "border-blue-300"
+        green: {
+          heading: "bui-header-green-heading",
+          subtitle: "bui-header-green-subtitle",
+          divider: "bui-header-green-divider"
         },
-        light: {
-          heading: "text-gray-100",
-          subtitle: "text-gray-300",
-          divider: "border-gray-700"
+        blue: {
+          heading: "bui-header-blue-heading",
+          subtitle: "bui-header-blue-subtitle",
+          divider: "bui-header-blue-divider"
+        },
+        yellow: {
+          heading: "bui-header-yellow-heading",
+          subtitle: "bui-header-yellow-subtitle",
+          divider: "bui-header-yellow-divider"
+        },
+        violet: {
+          heading: "bui-header-violet-heading",
+          subtitle: "bui-header-violet-subtitle",
+          divider: "bui-header-violet-divider"
         }
       }
 
       # Dimensioni disponibili
-      SIZES = {
-        xs: {
-          heading: "text-lg", 
-          subtitle: "text-sm"
-        },
-        sm: {
-          heading: "text-xl", 
-          subtitle: "text-base"
-        },
-        md: {
-          heading: "text-2xl", 
-          subtitle: "text-lg"
+      HEADER_SIZES = {
+        small: {
+          heading: "bui-header-small-heading", 
+          subtitle: "bui-header-small-subtitle"
         },
-        lg: {
-          heading: "text-3xl", 
-          subtitle: "text-xl"
+        medium: {
+          heading: "bui-header-medium-heading", 
+          subtitle: "bui-header-medium-subtitle"
         },
-        xl: {
-          heading: "text-4xl", 
-          subtitle: "text-2xl"
-        },
-        xxl: {
-          heading: "text-5xl", 
-          subtitle: "text-3xl"
+        large: {
+          heading: "bui-header-large-heading", 
+          subtitle: "bui-header-large-subtitle"
         }
       }
 
       # Allineamenti disponibili
-      ALIGNMENTS = {
-        left: "text-left",
-        center: "text-center",
-        right: "text-right"
+      HEADER_ALIGNMENTS = {
+        left: "bui-header-left",
+        center: "bui-header-center",
+        right: "bui-header-right"
       }
 
       # Inizializzazione del componente
@@ -82,7 +80,7 @@ module BetterUi
         text: nil,
         level: 2,
         variant: :default,
-        size: :md,
+        size: :medium,
         align: :left,
         classes: nil,
         icon: nil,
@@ -103,10 +101,10 @@ module BetterUi
       # Genera le classi per l'heading
       def heading_classes
         [
-          VARIANTS.fetch(@variant, VARIANTS[:default])[:heading],
-          SIZES.fetch(@size, SIZES[:md])[:heading],
-          ALIGNMENTS.fetch(@align, ALIGNMENTS[:left]),
-          "font-bold",
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:heading],
+          HEADER_SIZES.fetch(@size, HEADER_SIZES[:medium])[:heading],
+          HEADER_ALIGNMENTS.fetch(@align, HEADER_ALIGNMENTS[:left]),
+          "bui-header-heading-base",
           @classes
         ].compact.join(" ")
       end
@@ -114,28 +112,36 @@ module BetterUi
       # Genera le classi per il sottotitolo
       def subtitle_classes
         [
-          VARIANTS.fetch(@variant, VARIANTS[:default])[:subtitle],
-          SIZES.fetch(@size, SIZES[:md])[:subtitle],
-          ALIGNMENTS.fetch(@align, ALIGNMENTS[:left]),
-          "mt-1"
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:subtitle],
+          HEADER_SIZES.fetch(@size, HEADER_SIZES[:medium])[:subtitle],
+          HEADER_ALIGNMENTS.fetch(@align, HEADER_ALIGNMENTS[:left]),
+          "bui-header-subtitle-base"
         ].compact.join(" ")
       end
 
       # Genera le classi per il divisore
       def divider_classes
         [
-          "border-t",
-          "mt-2",
-          VARIANTS.fetch(@variant, VARIANTS[:default])[:divider]
+          "bui-header-divider-base",
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:divider]
         ].compact.join(" ")
       end
 
       # Genera le classi per il container
       def container_classes
-        [
-          "mb-4",
-          @with_divider ? "pb-2" : ""
-        ].compact.join(" ")
+        @with_divider ? "bui-header-container-with-divider" : "bui-header-container-base"
+      end
+      
+      # Helper per determinare la dimensione dell'icona in base alla dimensione dell'heading
+      def get_icon_size
+        case @size
+        when :large
+          :medium
+        when :small
+          :xsmall
+        else
+          :small
+        end
       end
     end
   end

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

@@ -1,2 +1,2 @@
 <%# Template per l'icona %>
-<i class="<%= combined_classes %>" aria-hidden="true"></i> 
+<i class="bui-icon-base <%= combined_classes %>" aria-hidden="true"></i> 

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

@@ -2,28 +2,27 @@ module BetterUi
   module General
     class IconComponent < ViewComponent::Base
       # Dimensioni disponibili
-      SIZE_CLASSES = {
-        xs: "fa-xs",
-        sm: "fa-sm",
-        md: "", # Default di Font Awesome
-        lg: "fa-lg",
-        xl: "fa-xl",
-        "2xl": "fa-2xl"
+      ICON_SIZES = {
+        xsmall: "bui-icon-xsmall",
+        small: "bui-icon-small",
+        medium: "bui-icon-medium",
+        large: "bui-icon-large",
+        xlarge: "bui-icon-xlarge"
       }
 
       # Stili disponibili
-      STYLE_CLASSES = {
-        solid: "fas",
-        regular: "far",
-        light: "fal",
-        brands: "fab",
-        duotone: "fad"
+      ICON_STYLES = {
+        solid: "bui-icon-solid",
+        regular: "bui-icon-regular",
+        light: "bui-icon-light",
+        brands: "bui-icon-brands",
+        duotone: "bui-icon-duotone"
       }
 
       # Inizializzazione del componente
       def initialize(
         name:,
-        size: :md,
+        size: :medium,
         style: :solid,
         fixed_width: false,
         spin: false,
@@ -47,39 +46,39 @@ module BetterUi
 
       # Classe CSS per lo stile dell'icona
       def style_class
-        STYLE_CLASSES[@style] || STYLE_CLASSES[:solid]
+        ICON_STYLES[@style] || ICON_STYLES[:solid]
       end
 
       # Classe CSS per la dimensione
       def size_class
-        SIZE_CLASSES[@size] || SIZE_CLASSES[:md]
+        ICON_SIZES[@size] || ICON_SIZES[:medium]
       end
 
       # Classe per rotazione
       def rotation_class
         return "" unless @rotation
-        "fa-rotate-#{@rotation}"
+        "bui-icon-rotate-#{@rotation}"
       end
 
       # Classe per rovesciamento
       def flip_class
         return "" unless @flip
-        "fa-flip-#{@flip}"
+        "bui-icon-flip-#{@flip}"
       end
 
       # Classi per animazioni
       def animation_classes
         classes = []
-        classes << "fa-spin" if @spin
-        classes << "fa-pulse" if @pulse
+        classes << "bui-icon-spin" if @spin
+        classes << "bui-icon-pulse" if @pulse
         classes.join(" ")
       end
 
       # Classi per caratteristiche aggiuntive
       def feature_classes
         classes = []
-        classes << "fa-fw" if @fixed_width
-        classes << "fa-border" if @border
+        classes << "bui-icon-fw" if @fixed_width
+        classes << "bui-icon-border" if @border
         classes.join(" ")
       end
 
@@ -87,7 +86,7 @@ module BetterUi
       def combined_classes
         [
           style_class,
-          "fa-#{@name}",
+          "fa-#{@name}", # Questa classe deve rimanere specifica di Font Awesome
           size_class,
           rotation_class,
           flip_class,

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

@@ -0,0 +1,17 @@
+<% if link? %>
+  <%= link_to href, **link_attributes do %>
+    <% if render_icon %>
+      <span class="bui-link-icon-wrapper"><%= render_icon %></span>
+    <% end %>
+    <span><%= 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>
+    <% end %>
+    <span><%= label %></span>
+    <%= content if content.present? %>
+  </span>
+<% end %>