better_ui 0.1.0 → 0.5.0

data/app/assets/stylesheets/better_ui/application.css

@@ -12,360 +12,34 @@
  *
  *= require_tree .
  *= require_self
+ *= require font-awesome
  */
 
-/*
- * Better UI - Componenti UI per Rails
- *
- *= require_self
+/* 
+ * BetterUI - Utilizziamo Tailwind CSS per tutti gli stili
  */
 
-:root {
-  /* Colori principali */
-  --better-ui-primary: #007bff;
-  --better-ui-secondary: #6c757d;
-  --better-ui-success: #28a745;
-  --better-ui-danger: #dc3545;
-  --better-ui-warning: #ffc107;
-  --better-ui-info: #17a2b8;
-  
-  /* Colori di sfondo */
-  --better-ui-bg-light: #ffffff;
-  --better-ui-bg-dark: #343a40;
-  
-  /* Colori di testo */
-  --better-ui-text-dark: #343a40;
-  --better-ui-text-light: #f8f9fa;
-  
-  /* Bordi */
-  --better-ui-border-color: #dee2e6;
-  --better-ui-border-radius: 0.25rem;
-  
-  /* Spaziature */
-  --better-ui-spacer: 1rem;
-  --better-ui-spacer-sm: 0.5rem;
-  --better-ui-spacer-lg: 1.5rem;
-  
-  /* Transizioni */
-  --better-ui-transition: all 0.2s ease-in-out;
-}
-
-/*
- * Button
- */
-.better-ui-button {
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  border: 1px solid transparent;
-  padding: var(--better-ui-spacer-sm) var(--better-ui-spacer);
-  font-size: 1rem;
+/* Stili per il syntax highlighting di CodeRay */
+.syntax-ruby {
+  color: #333;
+  background-color: #f8f8f8;
+  font-family: Monaco, Consolas, 'Courier New', monospace;
   line-height: 1.5;
-  border-radius: var(--better-ui-border-radius);
-  transition: var(--better-ui-transition);
-  cursor: pointer;
-}
-
-.better-ui-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-
-.better-ui-button-primary {
-  color: var(--better-ui-text-light);
-  background-color: var(--better-ui-primary);
-  border-color: var(--better-ui-primary);
-}
-
-.better-ui-button-primary:hover {
-  background-color: #0069d9;
-  border-color: #0062cc;
-}
-
-.better-ui-button-secondary {
-  color: var(--better-ui-text-light);
-  background-color: var(--better-ui-secondary);
-  border-color: var(--better-ui-secondary);
-}
-
-.better-ui-button-secondary:hover {
-  background-color: #5a6268;
-  border-color: #545b62;
-}
-
-.better-ui-button-success {
-  color: var(--better-ui-text-light);
-  background-color: var(--better-ui-success);
-  border-color: var(--better-ui-success);
-}
-
-.better-ui-button-success:hover {
-  background-color: #218838;
-  border-color: #1e7e34;
-}
-
-.better-ui-button-danger {
-  color: var(--better-ui-text-light);
-  background-color: var(--better-ui-danger);
-  border-color: var(--better-ui-danger);
-}
-
-.better-ui-button-danger:hover {
-  background-color: #c82333;
-  border-color: #bd2130;
-}
-
-.better-ui-button:disabled {
-  opacity: 0.65;
-  cursor: not-allowed;
-}
-
-/*
- * Alert
- */
-.better-ui-alert {
-  position: relative;
-  padding: var(--better-ui-spacer);
-  margin-bottom: var(--better-ui-spacer);
-  border: 1px solid transparent;
-  border-radius: var(--better-ui-border-radius);
-  transition: var(--better-ui-transition);
-}
-
-.better-ui-alert-message {
-  margin-right: 2rem;
-}
-
-.better-ui-alert-close {
-  position: absolute;
-  top: var(--better-ui-spacer-sm);
-  right: var(--better-ui-spacer-sm);
-  background: transparent;
-  border: none;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: var(--better-ui-transition);
-}
-
-.better-ui-alert-close:hover {
-  opacity: 1;
-}
-
-.better-ui-alert-info {
-  color: #0c5460;
-  background-color: #d1ecf1;
-  border-color: #bee5eb;
-}
-
-.better-ui-alert-success {
-  color: #155724;
-  background-color: #d4edda;
-  border-color: #c3e6cb;
-}
-
-.better-ui-alert-warning {
-  color: #856404;
-  background-color: #fff3cd;
-  border-color: #ffeeba;
-}
-
-.better-ui-alert-danger {
-  color: #721c24;
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
-}
-
-.better-ui-alert-closing {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-/*
- * Card
- */
-.better-ui-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: var(--better-ui-bg-light);
-  background-clip: border-box;
-  border: 1px solid var(--better-ui-border-color);
-  border-radius: var(--better-ui-border-radius);
-  margin-bottom: var(--better-ui-spacer);
-}
-
-.better-ui-card-header {
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 0;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-bottom: 1px solid var(--better-ui-border-color);
-}
-
-.better-ui-card-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 500;
-}
-
-.better-ui-card-body {
-  flex: 1 1 auto;
-  padding: 1.25rem;
-}
-
-.better-ui-card-footer {
-  padding: 0.75rem 1.25rem;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-top: 1px solid var(--better-ui-border-color);
-}
-
-/*
- * Tabs
- */
-.better-ui-tabs {
-  margin-bottom: var(--better-ui-spacer);
-}
-
-.better-ui-tab-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-  border-bottom: 1px solid var(--better-ui-border-color);
-}
-
-.better-ui-tab-item {
-  display: block;
-  padding: 0.5rem 1rem;
-  border: 1px solid transparent;
-  border-top-left-radius: var(--better-ui-border-radius);
-  border-top-right-radius: var(--better-ui-border-radius);
-  cursor: pointer;
-  background: none;
-  margin-bottom: -1px;
-}
-
-.better-ui-tab-item:hover {
-  border-color: #e9ecef #e9ecef var(--better-ui-border-color);
-}
-
-.better-ui-tab-active {
-  color: var(--better-ui-primary);
-  background-color: var(--better-ui-bg-light);
-  border-color: var(--better-ui-border-color) var(--better-ui-border-color) var(--better-ui-bg-light);
-}
-
-.better-ui-tab-content {
-  padding: var(--better-ui-spacer);
-  border: 1px solid var(--better-ui-border-color);
-  border-top: 0;
-  border-bottom-right-radius: var(--better-ui-border-radius);
-  border-bottom-left-radius: var(--better-ui-border-radius);
-}
-
-/*
- * Modal
- */
-.better-ui-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1050;
-  display: none;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-}
-
-.better-ui-modal-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.better-ui-modal-background-visible {
-  opacity: 1;
-}
-
-.better-ui-modal-dialog {
-  position: relative;
-  width: 100%;
-  max-width: 500px;
-  margin: 1.75rem auto;
-  background-color: var(--better-ui-bg-light);
-  border-radius: var(--better-ui-border-radius);
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  transform: translateY(-20px);
-  opacity: 0;
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.better-ui-modal-dialog-visible {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-.better-ui-modal-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid var(--better-ui-border-color);
-}
-
-.better-ui-modal-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 500;
-}
-
-.better-ui-modal-close {
-  background: transparent;
-  border: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  line-height: 1;
-  color: var(--better-ui-text-dark);
-  opacity: 0.5;
-  cursor: pointer;
-}
-
-.better-ui-modal-close:hover {
-  opacity: 1;
-}
-
-.better-ui-modal-body {
-  position: relative;
-  padding: 1rem;
-}
-
-.better-ui-modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 1rem;
-  border-top: 1px solid var(--better-ui-border-color);
-}
-
-.better-ui-modal-footer > .better-ui-button {
-  margin-left: 0.5rem;
-}
-
-body.better-ui-modal-open {
-  overflow: hidden;
 }
+.syntax-ruby .keyword { color: #0066CC; font-weight: bold; }
+.syntax-ruby .string, .syntax-ruby .string-content { color: #008800; }
+.syntax-ruby .comment { color: #888888; font-style: italic; }
+.syntax-ruby .constant { color: #CC0000; }
+.syntax-ruby .class { color: #0086B3; font-weight: bold; }
+.syntax-ruby .module { color: #0086B3; font-weight: bold; }
+.syntax-ruby .symbol { color: #AA6600; }
+.syntax-ruby .function { color: #990000; }
+.syntax-ruby .regexp { color: #AA6600; }
+.syntax-ruby .integer, .syntax-ruby .float { color: #0000DD; }
+.syntax-ruby .global-variable, .syntax-ruby .instance-variable { color: #336699; }
+.syntax-ruby .predefined { color: #3377BB; font-weight: bold; }
+.syntax-ruby .error { color: #FF0000; background-color: #FFAAAA; }
+.syntax-ruby .delimiter { color: #555555; }
+.syntax-ruby .method { color: #990000; font-weight: bold; }
+.syntax-ruby .attribute-name { color: #994500; }
+.syntax-ruby .value { color: #0066CC; }

data/app/components/better_ui/application/alert_component.html.erb

@@ -0,0 +1,27 @@
+<div role="alert" class="<%= container_classes %>" <%= @data&.map { |k, v| "data-#{k}=\"#{v}\"" }&.join(' ')&.html_safe %>>
+  <% if effective_icon.present? %>
+    <div class="<%= icon_classes %>">
+      <%= render BetterUi::General::IconComponent.new(name: effective_icon) %>
+    </div>
+  <% end %>
+  
+  <div class="<%= content_classes %>">
+    <% if @title.present? %>
+      <div class="<%= title_classes %>"><%= @title %></div>
+    <% end %>
+    
+    <% if @message.present? %>
+      <div class="<%= message_classes %>"><%= @message %></div>
+    <% end %>
+    
+    <% if content.present? %>
+      <div class="<%= message_classes %>"><%= content %></div>
+    <% end %>
+  </div>
+  
+  <% if @dismissible %>
+    <button type="button" class="<%= close_button_classes %>" data-dismiss-target="[role='alert']" aria-label="Chiudi">
+      <%= render BetterUi::General::IconComponent.new(name: "xmark") %>
+    </button>
+  <% end %>
+</div>

data/app/components/better_ui/application/alert_component.rb

@@ -0,0 +1,202 @@
+module BetterUi
+  module Application
+    class AlertComponent < ViewComponent::Base
+      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :icon_position, :outline, :rounded
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        default: {
+          bg: "bg-black",
+          border: "border-gray-900",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-gray-800"
+        },
+        white: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          title: "text-black",
+          text: "text-black",
+          icon: "text-black",
+          close: "text-black hover:bg-gray-100"
+        },
+        red: {
+          bg: "bg-red-500",
+          border: "border-red-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-red-600"
+        },
+        rose: {
+          bg: "bg-rose-500",
+          border: "border-rose-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-rose-600"
+        },
+        orange: {
+          bg: "bg-orange-500",
+          border: "border-orange-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-orange-600"
+        },
+        green: {
+          bg: "bg-green-500",
+          border: "border-green-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-green-600"
+        },
+        blue: {
+          bg: "bg-blue-500",
+          border: "border-blue-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-blue-600"
+        },
+        yellow: {
+          bg: "bg-yellow-500",
+          border: "border-yellow-600",
+          title: "text-black",
+          text: "text-black",
+          icon: "text-black",
+          close: "text-black hover:bg-yellow-600"
+        },
+        violet: {
+          bg: "bg-violet-500",
+          border: "border-violet-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-violet-600"
+        }
+      }
+
+      # Icone predefinite per ciascuna variante
+      DEFAULT_ICONS = {
+        default: "bell",
+        white: "info-circle",
+        red: "exclamation-circle",
+        rose: "exclamation-circle",
+        orange: "bell",
+        green: "check-circle",
+        blue: "info-circle",
+        yellow: "exclamation-triangle",
+        violet: "shield-exclamation"
+      }
+
+      # Posizioni possibili per le icone
+      ICON_POSITIONS = [:left, :top]
+
+      # Inizializzazione del componente
+      def initialize(
+        title: nil,
+        message: nil,
+        variant: :default,
+        icon: nil, 
+        dismissible: false,
+        classes: nil,
+        data: {},
+        icon_position: :left,
+        outline: false,
+        rounded: :sm
+      )
+        @title = title
+        @message = message
+        @variant = variant.to_sym
+        @icon = icon
+        @dismissible = dismissible
+        @classes = classes
+        @data = data
+        @icon_position = icon_position.to_sym
+        @outline = outline
+        @rounded = rounded.to_sym
+      end
+
+      # Genera l'icona in base alla variante se non specificata
+      def effective_icon
+        return @icon if @icon.present?
+        DEFAULT_ICONS[@variant] || DEFAULT_ICONS[:default]
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        base_classes = ["p-4 mb-4 flex border"]
+        base_classes << get_border_radius_class
+        
+        [
+          *base_classes,
+          styles[:bg],
+          styles[:border],
+          @icon_position == :top ? "flex-col" : "items-start",
+          @classes
+        ].compact.join(" ")
+      end
+
+      # Genera il border-radius
+      def get_border_radius_class
+        ThemeHelper::BORDER_RADIUS[@rounded] || ThemeHelper::BORDER_RADIUS[:sm]
+      end
+
+      # Genera le classi per il titolo
+      def title_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "font-medium",
+          styles[:title]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il messaggio
+      def message_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "mt-1",
+          styles[:text]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'icona
+      def icon_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "flex-shrink-0",
+          @icon_position == :left ? "mr-3 mt-0.5" : "mb-3",
+          styles[:icon]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il pulsante di chiusura
+      def close_button_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "ml-auto -mr-1.5 -mt-1.5 inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2 focus:ring-gray-400",
+          styles[:close]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il contenuto
+      def content_classes
+        "flex-1"
+      end
+
+      # Verifica se il componente deve essere reso
+      def render?
+        @title.present? || @message.present? || content.present?
+      end
+    end
+  end
+end 

data/app/components/better_ui/application/card_component.html.erb

@@ -0,0 +1,24 @@
+<div class="bui-card-base <%= get_border_radius_class %> px-4 py-5 sm:p-6">
+  <dt class="bui-card-title text-gray-900"><%= title %></dt>
+  <dd class="bui-card-body mt-1 flex items-baseline justify-between md:block lg:flex">
+    <div class="flex items-baseline">
+      <span class="bui-card-value text-indigo-600"><%= value %></span>
+      <span class="bui-card-value-from ml-2">from <%= value_from %></span>
+    </div>
+
+    <div class="bui-card-trend <%= trend_classes %>">
+      <% if trend_type == :up %>
+        <svg class="mr-0.5 -ml-1 size-5 shrink-0 self-center <%= trend_icon_classes %>" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+          <path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" />
+        </svg>
+        <span class="sr-only">Incremento di</span>
+      <% else %>
+        <svg class="mr-0.5 -ml-1 size-5 shrink-0 self-center <%= trend_icon_classes %>" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+          <path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" />
+        </svg>
+        <span class="sr-only">Decremento di</span>
+      <% end %>
+      <%= trend_value %>
+    </div>
+  </dd>
+</div> 

data/app/components/better_ui/application/card_component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    class CardComponent < ViewComponent::Base
+      attr_reader :title, :value, :value_from, :trend_value, :trend_type, :rounded
+
+      # Opzioni di bordi arrotondati standardizzati
+      CARD_RADIUS = {
+        none: 'bui-card-radius-none',
+        small: 'bui-card-radius-small',
+        medium: 'bui-card-radius-medium',
+        large: 'bui-card-radius-large',
+        full: 'bui-card-radius-full'
+      }.freeze
+
+      # @param title [String] Titolo della card
+      # @param value [String] Valore principale da visualizzare
+      # @param value_from [String] Valore precedente di riferimento
+      # @param trend_value [String] Percentuale di variazione
+      # @param trend_type [Symbol] Tipo di variazione (:up o :down)
+      # @param rounded [Symbol] Tipo di border-radius (:none, :small, :medium, :large, :full), default :small
+      def initialize(title:, value:, value_from:, trend_value:, trend_type: :up, rounded: :small)
+        @title = title
+        @value = value
+        @value_from = value_from
+        @trend_value = trend_value
+        @trend_type = trend_type.to_sym
+        @rounded = rounded.to_sym
+      end
+
+      def trend_classes
+        if trend_type == :up
+          'bg-green-500 text-white'
+        else
+          'bg-black text-white'
+        end
+      end
+
+      def trend_icon_classes
+        if trend_type == :up
+          'text-white'
+        else
+          'text-white'
+        end
+      end
+
+      def get_border_radius_class
+        CARD_RADIUS[@rounded] || CARD_RADIUS[:small]
+      end
+    end
+  end
+end 

data/app/components/better_ui/application/card_container_component.html.erb

@@ -0,0 +1,8 @@
+<div>
+  <h3 class="text-base font-semibold text-gray-900"><%= @title %></h3>
+  <dl class="mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm md:grid-cols-3 md:divide-x md:divide-y-0">
+    <% cards.each do |card| %>
+      <%= card %>
+    <% end %>
+  </dl>
+</div>