better_ui 0.4.0 → 0.5.1

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-button--default",
+        white: "bui-button--white",
+        red: "bui-button--red",
+        rose: "bui-button--rose",
+        orange: "bui-button--orange",
+        green: "bui-button--green",
+        blue: "bui-button--blue",
+        yellow: "bui-button--yellow",
+        violet: "bui-button--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-button--small",
+        medium: "bui-button--medium",
+        large: "bui-button--large"
+      }
+      
+      # Border radius disponibili con classi CSS personalizzate
+      BUTTON_RADIUS = {
+        none: "bui-button--radius-none",
+        small: "bui-button--radius-small",
+        medium: "bui-button--radius-medium",
+        large: "bui-button--radius-large",
+        full: "bui-button--radius-full"
+      }
+      
+      # Stati e comportamenti del bottone
+      BUTTON_STATES = {
+        disabled: "bui-button--disabled",
+        full_width: "bui-button--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,26 @@ 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-button", # Classe base per tutti i bottoni
+          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 +138,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

@@ -1,25 +1 @@
-<div class="<%= container_classes %>">
-  <%# 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>
-        <%= @text || content %>
-      </span>
-    <% else %>
-      <%= @text || content %>
-    <% end %>
-  </<%= "h#{@level}" %>>
-  
-  <% if @subtitle.present? %>
-    <div class="<%= subtitle_classes %>">
-      <%= @subtitle %>
-    </div>
-  <% end %>
-  
-  <% if @with_divider %>
-    <div class="<%= divider_classes %>"></div>
-  <% end %>
-</div> 
+<%= content_tag("h#{@level}", content, class: heading_classes) %>

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

@@ -1,142 +1,49 @@
 module BetterUi
   module General
     class HeadingComponent < ViewComponent::Base
-      attr_reader :text, :level, :variant, :size, :align, :classes, :icon, :subtitle, :with_divider
+      attr_reader :level, :variant, :align, :classes
 
       # Varianti di colore disponibili
-      VARIANTS = {
-        default: {
-          heading: "text-gray-900",
-          subtitle: "text-gray-600",
-          divider: "border-gray-200"
-        },
-        primary: {
-          heading: "text-orange-700",
-          subtitle: "text-orange-500",
-          divider: "border-orange-300"
-        },
-        success: {
-          heading: "text-green-700",
-          subtitle: "text-green-500",
-          divider: "border-green-300"
-        },
-        warning: {
-          heading: "text-yellow-700",
-          subtitle: "text-yellow-500",
-          divider: "border-yellow-300"
-        },
-        danger: {
-          heading: "text-red-700",
-          subtitle: "text-red-500",
-          divider: "border-red-300"
-        },
-        info: {
-          heading: "text-blue-700",
-          subtitle: "text-blue-500",
-          divider: "border-blue-300"
-        },
-        light: {
-          heading: "text-gray-100",
-          subtitle: "text-gray-300",
-          divider: "border-gray-700"
-        }
-      }
-
-      # Dimensioni disponibili
-      SIZES = {
-        xs: {
-          heading: "text-lg", 
-          subtitle: "text-sm"
-        },
-        sm: {
-          heading: "text-xl", 
-          subtitle: "text-base"
-        },
-        md: {
-          heading: "text-2xl", 
-          subtitle: "text-lg"
-        },
-        lg: {
-          heading: "text-3xl", 
-          subtitle: "text-xl"
-        },
-        xl: {
-          heading: "text-4xl", 
-          subtitle: "text-2xl"
-        },
-        xxl: {
-          heading: "text-5xl", 
-          subtitle: "text-3xl"
-        }
+      HEADER_THEME = {
+        default: "bui-heading--default",
+        white: "bui-heading--white",
+        red: "bui-heading--red",
+        rose: "bui-heading--rose",
+        orange: "bui-heading--orange",
+        green: "bui-heading--green",
+        blue: "bui-heading--blue",
+        yellow: "bui-heading--yellow",
+        violet: "bui-heading--violet"
       }
 
       # Allineamenti disponibili
-      ALIGNMENTS = {
-        left: "text-left",
-        center: "text-center",
-        right: "text-right"
+      HEADER_ALIGNMENTS = {
+        left: "bui-heading--left",
+        center: "bui-heading--center",
+        right: "bui-heading--right"
       }
 
-      # Inizializzazione del componente
       def initialize(
-        text: nil,
         level: 2,
         variant: :default,
-        size: :md,
         align: :left,
-        classes: nil,
-        icon: nil,
-        subtitle: nil,
-        with_divider: false
+        classes: nil
       )
-        @text = text
         @level = level.to_i.clamp(1, 6)
         @variant = variant.to_sym
-        @size = size.to_sym
         @align = align.to_sym
         @classes = classes
-        @icon = icon
-        @subtitle = subtitle
-        @with_divider = with_divider
       end
 
-      # 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",
+          "bui-heading",
+          "bui-heading--#{@level}",
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default]),
+          HEADER_ALIGNMENTS.fetch(@align, HEADER_ALIGNMENTS[:left]),
           @classes
         ].compact.join(" ")
       end
-
-      # 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"
-        ].compact.join(" ")
-      end
-
-      # Genera le classi per il divisore
-      def divider_classes
-        [
-          "border-t",
-          "mt-2",
-          VARIANTS.fetch(@variant, VARIANTS[:default])[:divider]
-        ].compact.join(" ")
-      end
-
-      # Genera le classi per il container
-      def container_classes
-        [
-          "mb-4",
-          @with_divider ? "pb-2" : ""
-        ].compact.join(" ")
-      end
     end
   end
 end 

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

@@ -2,97 +2,73 @@ 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--xs",
+        tiny: "bui-icon--xs",
+        small: "bui-icon--sm",
+        medium: "bui-icon--md",
+        large: "bui-icon--lg",
+        xlarge: "bui-icon--xl"
       }
 
-      # Stili disponibili
-      STYLE_CLASSES = {
-        solid: "fas",
-        regular: "far",
-        light: "fal",
-        brands: "fab",
-        duotone: "fad"
+      # 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: :md,
-        style: :solid,
+        size: :medium,
+        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
-        STYLE_CLASSES[@style] || STYLE_CLASSES[:solid]
+      # Classe CSS per il colore
+      def color_class
+        ICON_THEMES[@color] || ICON_THEMES[:default]
       end
 
       # Classe CSS per la dimensione
       def size_class
-        SIZE_CLASSES[@size] || SIZE_CLASSES[:md]
-      end
-
-      # Classe per rotazione
-      def rotation_class
-        return "" unless @rotation
-        "fa-rotate-#{@rotation}"
-      end
-
-      # Classe per rovesciamento
-      def flip_class
-        return "" unless @flip
-        "fa-flip-#{@flip}"
-      end
-
-      # Classi per animazioni
-      def animation_classes
-        classes = []
-        classes << "fa-spin" if @spin
-        classes << "fa-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.join(" ")
+        ICON_SIZES[@size] || ICON_SIZES[:medium]
       end
 
       # Combinazione di tutte le classi
       def combined_classes
         [
-          style_class,
-          "fa-#{@name}",
+          "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

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