better_ui 0.1.0 → 0.2.0

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

@@ -13,359 +13,3 @@
  *= require_tree .
  *= require_self
  */
-
-/*
- * Better UI - Componenti UI per Rails
- *
- *= require_self
- */
-
-: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;
-  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;
-}

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

@@ -0,0 +1,20 @@
+<div class="<%= card_classes %>" <%= options.map { |k, v| "#{k}=\"#{v}\"" }.join(' ').html_safe %>>
+  <p class="<%= title_classes %>"><%= title %></p>
+  <div class="mt-2 flex items-baseline justify-between">
+    <p class="<%= value_classes %>"><%= value %></p>
+    <% if show_trend? %>
+      <span class="<%= trend_classes %>">
+        <% if trend_up? %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="<%= trend_icon_size %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+          </svg>
+        <% else %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="<%= trend_icon_size %>" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+          </svg>
+        <% end %>
+        <%= change %>
+      </span>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,214 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Application
+    module Card
+      class Component < ViewComponent::Base
+        # Costanti per le classi CSS
+        CARD_THEME = {
+          default: 'bg-gray-900 border-gray-800',
+          white: 'bg-white border-gray-200',
+          red: 'bg-red-50 border-red-200',
+          rose: 'bg-rose-50 border-rose-200',
+          orange: 'bg-orange-50 border-orange-200',
+          green: 'bg-green-50 border-green-200',
+          blue: 'bg-blue-50 border-blue-200',
+          yellow: 'bg-yellow-50 border-yellow-200',
+          violet: 'bg-violet-50 border-violet-200',
+          purple: 'bg-purple-50 border-purple-200'
+        }.freeze
+
+        CARD_SIZE = {
+          small: 'p-4',
+          medium: 'p-6',
+          large: 'p-8'
+        }.freeze
+
+        CARD_ROUNDED = {
+          none: 'rounded-none',
+          small: 'rounded-md',
+          medium: 'rounded-lg',
+          large: 'rounded-xl',
+          full: 'rounded-2xl'
+        }.freeze
+
+        CARD_SHADOW = {
+          none: 'shadow-none',
+          small: 'shadow-sm',
+          medium: 'shadow-md',
+          large: 'shadow-lg'
+        }.freeze
+
+        CARD_TREND_COLOR = {
+          green: 'text-green-600',
+          red: 'text-red-600',
+          blue: 'text-blue-600',
+          yellow: 'text-yellow-600',
+          purple: 'text-purple-600',
+          indigo: 'text-indigo-600',
+          gray: 'text-gray-600'
+        }.freeze
+
+        CARD_TITLE_SIZE = {
+          small: 'text-xs',
+          medium: 'text-sm',
+          large: 'text-base'
+        }.freeze
+
+        CARD_VALUE_SIZE = {
+          small: 'text-lg',
+          medium: 'text-2xl',
+          large: 'text-3xl'
+        }.freeze
+
+        def initialize(
+          title:,
+          value:,
+          trend: nil,
+          change: nil,
+          color: :green,
+          theme: :default,
+          size: :medium,
+          rounded: :medium,
+          shadow: :small,
+          classes: nil,
+          **options
+        )
+          @title = title
+          @value = value
+          @trend = trend
+          @change = change
+          @color = color
+          @theme = theme
+          @size = size
+          @rounded = rounded
+          @shadow = shadow
+          @classes = classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :title, :value, :trend, :change, :color, :theme, :size, :rounded, :shadow, :classes, :options
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_rounded
+          validate_shadow
+          validate_trend
+          validate_color
+        end
+
+        def validate_theme
+          return if CARD_THEME.key?(theme)
+          
+          raise ArgumentError, "Invalid theme: #{theme}. Valid options: #{CARD_THEME.keys.join(', ')}"
+        end
+
+        def validate_size
+          return if CARD_SIZE.key?(size)
+          
+          raise ArgumentError, "Invalid size: #{size}. Valid options: #{CARD_SIZE.keys.join(', ')}"
+        end
+
+        def validate_rounded
+          return if CARD_ROUNDED.key?(rounded)
+          
+          raise ArgumentError, "Invalid rounded: #{rounded}. Valid options: #{CARD_ROUNDED.keys.join(', ')}"
+        end
+
+        def validate_shadow
+          return if CARD_SHADOW.key?(shadow)
+          
+          raise ArgumentError, "Invalid shadow: #{shadow}. Valid options: #{CARD_SHADOW.keys.join(', ')}"
+        end
+
+        def validate_trend
+          return if trend.nil? || [:up, :down].include?(trend)
+          
+          raise ArgumentError, "Invalid trend: #{trend}. Valid options: :up, :down, nil"
+        end
+
+        def validate_color
+          return if CARD_TREND_COLOR.key?(color)
+          
+          raise ArgumentError, "Invalid color: #{color}. Valid options: #{CARD_TREND_COLOR.keys.join(', ')}"
+        end
+
+        def card_classes
+          base_classes = [
+            CARD_THEME[theme],
+            CARD_SIZE[size],
+            CARD_ROUNDED[rounded],
+            CARD_SHADOW[shadow],
+            'border'
+          ]
+
+          base_classes << classes if classes.present?
+          base_classes.compact.join(' ')
+        end
+
+        def title_classes
+          base_classes = [
+            CARD_TITLE_SIZE[size],
+            'font-medium'
+          ]
+
+          if theme == :default
+            base_classes << 'text-gray-300'
+          else
+            base_classes << 'text-gray-500'
+          end
+
+          base_classes.join(' ')
+        end
+
+        def value_classes
+          base_classes = [
+            CARD_VALUE_SIZE[size],
+            'font-semibold'
+          ]
+
+          if theme == :default
+            base_classes << 'text-white'
+          else
+            base_classes << 'text-gray-900'
+          end
+
+          base_classes.join(' ')
+        end
+
+        def trend_classes
+          base_classes = [
+            CARD_TREND_COLOR[color],
+            'text-sm font-medium flex items-center'
+          ]
+
+          base_classes.join(' ')
+        end
+
+        def show_trend?
+          trend.present? && change.present?
+        end
+
+        def trend_up?
+          trend == :up
+        end
+
+        def trend_icon_size
+          case size
+          when :small
+            'h-3 w-3 mr-0.5'
+          when :medium
+            'h-4 w-4 mr-0.5'
+          when :large
+            'h-5 w-5 mr-1'
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/application/main/component.html.erb

@@ -0,0 +1,9 @@
+<main class="w-full fixed <%= get_layout_class %> <%= get_padding_class(padding) %><%= classes ? ' ' + classes : '' %>">
+  <div class="h-[calc(100vh-81px)] p-4">
+    <div class="h-full w-full bg-white p-4 <%= get_padding_class(inner_padding) %> <%= get_rounded_class %> <%= get_shadow_class %> overflow-y-auto">
+      <div class="h-full overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+      <%= content %>
+      </div>
+    </div>
+  </div>
+</main>