better_ui_tmp 0.5.1

data/app/components/better_ui/general/card/component.html.erb

@@ -0,0 +1,21 @@
+<%# Template for card component %>
+
+<%= tag.div(**html_attributes) do %>
+  <% if header? %>
+    <div class="bui-card__header">
+      <%= header %>
+    </div>
+  <% end %>
+  
+  <% if body? %>
+    <div class="bui-card__body">
+      <%= body %>
+    </div>
+  <% end %>
+  
+  <% if footer? %>
+    <div class="bui-card__footer">
+      <%= footer %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/better_ui/general/card/component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Card
+      class Component < ViewComponent::Base
+        renders_one :header
+        renders_one :body
+        renders_one :footer
+
+        def initialize(theme: :white, style: :default, padding: :medium, radius: :medium, **options)
+          @theme = theme
+          @style = style
+          @padding = padding
+          @radius = radius
+          @options = options
+        end
+
+        private
+
+        def html_attributes
+          {
+            class: class_names(
+              "bui-card",
+              "bui-card--theme-#{@theme}",
+              "bui-card--style-#{@style}",
+              "bui-card--padding-#{@padding}",
+              "bui-card--radius-#{@radius}",
+              @options[:class]
+            ),
+            **@options.except(:class)
+          }
+        end
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/container/component.html.erb

@@ -0,0 +1,8 @@
+<%# Template per il container %>
+<div <%= tag.attributes(container_attributes) %>>
+  <% if @html_content.present? %>
+    <%= raw @html_content %>
+  <% elsif content.present? %>
+    <%= content %>
+  <% end %>
+</div>

data/app/components/better_ui/general/container/component.rb

@@ -0,0 +1,158 @@
+module BetterUi
+  module General
+    module Container
+      class Component < ViewComponent::Base
+        attr_reader :html_content, :fluid, :max_width, :padding, :background, :border, :shadow, :classes
+
+        # Classi base sempre presenti
+        CONTAINER_BASE_CLASSES = "mx-auto"
+
+        # Larghezze massime con classi Tailwind dirette
+        CONTAINER_MAX_WIDTH_CLASSES = {
+          sm: "max-w-screen-sm",
+          md: "max-w-screen-md",
+          lg: "max-w-screen-lg",
+          xl: "max-w-screen-xl",
+          xxl: "max-w-screen-2xl"
+        }
+
+        # Padding con classi Tailwind dirette
+        CONTAINER_PADDING_CLASSES = {
+          none: "p-0",
+          small: "p-2",
+          medium: "p-4",
+          large: "p-6"
+        }
+
+        # Background con classi Tailwind dirette
+        CONTAINER_BACKGROUND_CLASSES = {
+          white: "bg-white",
+          light: "bg-gray-50",
+          dark: "bg-gray-900",
+          transparent: "bg-transparent"
+        }
+
+        # Border con classi Tailwind dirette
+        CONTAINER_BORDER_CLASSES = {
+          none: "border-0",
+          small: "border",
+          medium: "border-2",
+          large: "border-4"
+        }
+
+        # Shadow con classi Tailwind dirette
+        CONTAINER_SHADOW_CLASSES = {
+          none: "shadow-none",
+          small: "shadow-sm",
+          medium: "shadow",
+          large: "shadow-lg"
+        }
+
+        # @param html_content [String] contenuto HTML del container (opzionale)
+        # @param fluid [Boolean] se il container deve essere fluid (full width)
+        # @param max_width [Symbol] larghezza massima del container (:sm, :md, :lg, :xl, :xxl)
+        # @param padding [Symbol] padding interno (:none, :small, :medium, :large)
+        # @param background [Symbol] colore di sfondo (:white, :light, :dark, :transparent)
+        # @param border [Symbol] bordo del container (:none, :small, :medium, :large)
+        # @param shadow [Symbol] ombra del container (:none, :small, :medium, :large)
+        # @param html_options [Hash] opzioni HTML aggiuntive
+        def initialize(
+          html_content: nil,
+          fluid: false,
+          max_width: :lg,
+          padding: :medium,
+          background: :white,
+          border: false,
+          shadow: :none,
+          classes: nil,
+          **html_options
+        )
+          @html_content = html_content
+          @fluid = fluid
+          @max_width = max_width.to_sym
+          @padding = padding.to_sym
+          @background = background.to_sym
+          @border = border
+          @shadow = shadow
+          @html_options = html_options
+          @classes = classes
+
+          validate_params
+        end
+
+        # Combina tutte le classi CSS per il container
+        def combined_classes
+          [
+            CONTAINER_BASE_CLASSES,
+            get_max_width_class,
+            get_padding_class,
+            get_background_class,
+            get_border_class,
+            get_shadow_class,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi HTML per il container
+        def container_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = combined_classes
+          attrs
+        end
+
+        # Determina se il container deve essere renderizzato
+        def render?
+          @html_content.present? || content.present?
+        end
+
+        private
+
+        def get_max_width_class
+          return "" if @fluid
+          CONTAINER_MAX_WIDTH_CLASSES[@max_width] || CONTAINER_MAX_WIDTH_CLASSES[:lg]
+        end
+
+        def get_padding_class
+          CONTAINER_PADDING_CLASSES[@padding] || CONTAINER_PADDING_CLASSES[:medium]
+        end
+
+        def get_background_class
+          CONTAINER_BACKGROUND_CLASSES[@background] || CONTAINER_BACKGROUND_CLASSES[:white]
+        end
+
+        def get_border_class
+          CONTAINER_BORDER_CLASSES[@border] || CONTAINER_BORDER_CLASSES[:none]
+        end
+
+        def get_shadow_class
+          CONTAINER_SHADOW_CLASSES[@shadow] || CONTAINER_SHADOW_CLASSES[:none]
+        end
+
+        def validate_params
+          validate_max_width
+          validate_padding
+          validate_background
+        end
+
+        def validate_max_width
+          unless CONTAINER_MAX_WIDTH_CLASSES.keys.include?(@max_width)
+            raise ArgumentError, "La larghezza massima deve essere una tra: #{CONTAINER_MAX_WIDTH_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_padding
+          unless CONTAINER_PADDING_CLASSES.keys.include?(@padding)
+            raise ArgumentError, "Il padding deve essere uno tra: #{CONTAINER_PADDING_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_background
+          unless CONTAINER_BACKGROUND_CLASSES.keys.include?(@background)
+            raise ArgumentError, "Il background deve essere uno tra: #{CONTAINER_BACKGROUND_CLASSES.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/divider/component.html.erb

@@ -0,0 +1,10 @@
+<%# Template per il divider %>
+<% if show_label? %>
+  <%= tag.div(**divider_attributes) do %>
+    <div class="<%= label_line_classes %>"></div>
+    <span class="<%= label_classes %>"><%= @label %></span>
+    <div class="<%= label_line_classes %>"></div>
+  <% end %>
+<% else %>
+  <%= tag.div(**divider_attributes) %>
+<% end %>

data/app/components/better_ui/general/divider/component.rb

@@ -0,0 +1,226 @@
+module BetterUi
+  module General
+    module Divider
+      class Component < ViewComponent::Base
+        attr_reader :theme, :orientation, :style, :size, :label, :height, :classes
+
+        # Classi base sempre presenti
+        DIVIDER_BASE_CLASSES = "my-4"
+
+        # Temi con classi Tailwind dirette - LOGICA CORRETTA
+        DIVIDER_THEME_CLASSES = {
+          default: "border-white",         # Bordo bianco (per sfondi scuri)
+          white: "border-gray-300",        # Bordo grigio (per sfondi chiari)
+          red: "border-red-500",
+          rose: "border-rose-500",
+          orange: "border-orange-500",
+          green: "border-green-500",
+          blue: "border-blue-500",
+          yellow: "border-yellow-500",
+          violet: "border-violet-500"
+        }
+        
+        # Orientamento con classi Tailwind dirette
+        DIVIDER_ORIENTATION_CLASSES = {
+          horizontal: "w-full border-t",
+          vertical: "h-full border-l"
+        }
+        
+        # Stili di linea con classi Tailwind dirette
+        DIVIDER_STYLE_CLASSES = {
+          solid: "border-solid",
+          dashed: "border-dashed",
+          dotted: "border-dotted",
+          double: "border-double"
+        }
+        
+        # Dimensioni con classi Tailwind dirette
+        DIVIDER_SIZE_CLASSES = {
+          thin: {
+            horizontal: "border-t",
+            vertical: "border-l"
+          },
+          medium: {
+            horizontal: "border-t-2",
+            vertical: "border-l-2"
+          },
+          thick: {
+            horizontal: "border-t-4",
+            vertical: "border-l-4"
+          }
+        }
+
+        # Classi per label con classi Tailwind dirette - LOGICA CORRETTA
+        DIVIDER_LABEL_THEME_CLASSES = {
+          default: "text-white bg-transparent px-3",     # Testo bianco trasparente (per sfondi scuri)
+          white: "text-gray-900 bg-white px-3",          # Testo nero su bianco (per sfondi chiari)
+          red: "text-red-500 bg-white px-3",
+          rose: "text-rose-500 bg-white px-3",
+          orange: "text-orange-500 bg-white px-3",
+          green: "text-green-500 bg-white px-3",
+          blue: "text-blue-500 bg-white px-3",
+          yellow: "text-yellow-600 bg-white px-3",
+          violet: "text-violet-500 bg-white px-3"
+        }
+        
+        # @param theme [Symbol] tema del divider (:default, :white, etc.)
+        # @param orientation [Symbol] orientamento del divider (:horizontal, :vertical)
+        # @param style [Symbol] stile della linea (:solid, :dashed, :dotted, :double)
+        # @param size [Symbol] dimensione della linea (:thin, :medium, :thick)
+        # @param label [String] testo opzionale da mostrare al centro del divider
+        # @param height [String] altezza per divider verticale (es. "100px", "100%")
+        # @param classes [String] classi CSS aggiuntive
+        # @param html_options [Hash] opzioni HTML per il container
+        def initialize(
+          theme: :white,
+          orientation: :horizontal,
+          style: :solid,
+          size: :medium,
+          label: nil,
+          height: nil,
+          classes: nil,
+          **html_options
+        )
+          @theme = theme.to_sym
+          @orientation = orientation.to_sym
+          @style = style.to_sym
+          @size = size.to_sym
+          @label = label
+          @height = height
+          @classes = classes
+          @html_options = html_options
+          
+          validate_params
+        end
+        
+        # Combina tutte le classi per il container
+        def combined_classes
+          base_classes = []
+          
+          if @label.present? && @orientation == :horizontal
+            # Per divider con label orizzontale: flex layout
+            base_classes = [
+              "flex items-center text-center",
+              get_theme_class,
+              get_style_class
+            ]
+          else
+            # Per divider normale
+            base_classes = [
+              DIVIDER_BASE_CLASSES,
+              get_orientation_class,
+              get_theme_class,
+              get_style_class,
+              get_size_class
+            ]
+          end
+
+          [*base_classes, @classes, @html_options[:class]].compact.join(" ")
+        end
+
+        # Classi per il label
+        def label_classes
+          return "" unless @label.present?
+          
+          [
+            "relative z-10 text-sm font-medium",
+            get_label_theme_class
+          ].compact.join(" ")
+        end
+
+        # Classi per le linee before/after quando c'è un label
+        def label_line_classes
+          return "" unless @label.present? && @orientation == :horizontal
+          
+          [
+            "flex-1 h-px",
+            get_theme_class,
+            get_style_class
+          ].compact.join(" ")
+        end
+        
+        # Genera gli attributi di stile inline necessari
+        def inline_styles
+          return nil unless @orientation == :vertical && @height.present?
+          "height: #{@height};"
+        end
+        
+        # Restituisce gli attributi per il divider
+        def divider_attributes
+          attrs = { 
+            class: combined_classes
+          }
+          
+          # Aggiungi stile inline se presente
+          attrs[:style] = inline_styles if inline_styles.present?
+          
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+          
+          attrs
+        end
+
+        # Determina se mostrare il label
+        def show_label?
+          @label.present? && @orientation == :horizontal
+        end
+        
+        private
+        
+        def get_theme_class
+          DIVIDER_THEME_CLASSES[@theme] || DIVIDER_THEME_CLASSES[:white]
+        end
+        
+        def get_orientation_class
+          DIVIDER_ORIENTATION_CLASSES[@orientation] || DIVIDER_ORIENTATION_CLASSES[:horizontal]
+        end
+        
+        def get_style_class
+          DIVIDER_STYLE_CLASSES[@style] || DIVIDER_STYLE_CLASSES[:solid]
+        end
+        
+        def get_size_class
+          size_map = DIVIDER_SIZE_CLASSES[@size] || DIVIDER_SIZE_CLASSES[:medium]
+          size_map[@orientation] || size_map[:horizontal]
+        end
+
+        def get_label_theme_class
+          DIVIDER_LABEL_THEME_CLASSES[@theme] || DIVIDER_LABEL_THEME_CLASSES[:white]
+        end
+        
+        def validate_params
+          validate_theme
+          validate_orientation
+          validate_style
+          validate_size
+        end
+        
+        def validate_theme
+          unless DIVIDER_THEME_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{DIVIDER_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+        
+        def validate_orientation
+          unless DIVIDER_ORIENTATION_CLASSES.keys.include?(@orientation)
+            raise ArgumentError, "L'orientamento deve essere uno tra: #{DIVIDER_ORIENTATION_CLASSES.keys.join(', ')}"
+          end
+        end
+        
+        def validate_style
+          unless DIVIDER_STYLE_CLASSES.keys.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{DIVIDER_STYLE_CLASSES.keys.join(', ')}"
+          end
+        end
+        
+        def validate_size
+          unless DIVIDER_SIZE_CLASSES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{DIVIDER_SIZE_CLASSES.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/heading/component.html.erb

@@ -0,0 +1,22 @@
+<%# Template per il heading %>
+<div class="<%= container_classes %>">
+  <%= tag.public_send(heading_tag, **heading_attributes) do %>
+    <% if show_icon? %>
+      <span class="<%= icon_classes %>">
+        <%= render BetterUi::General::IconComponent.new(name: @icon) %>
+      </span>
+    <% end %>
+    
+    <span><%= content %></span>
+  <% end %>
+  
+  <% if show_subtitle? %>
+    <div class="<%= subtitle_classes %>">
+      <%= @subtitle %>
+    </div>
+  <% end %>
+  
+  <% if show_divider? %>
+    <div class="<%= divider_classes %>"></div>
+  <% end %>
+</div>