better_ui 0.3.0 → 0.4.0

data/app/components/better_ui/theme_helper.rb

@@ -0,0 +1,169 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module ThemeHelper
+    # Colori principali del tema
+    THEME_COLORS = {
+      # Neutrali
+      white: 'bg-white',
+      black: 'bg-black',
+      
+      # Colori del tema
+      primary: {
+        light: 'bg-orange-100',
+        default: 'bg-orange-500',
+        dark: 'bg-orange-600',
+        text: 'text-white'
+      },
+      secondary: {
+        light: 'bg-gray-100',
+        default: 'bg-gray-200',
+        dark: 'bg-gray-300',
+        text: 'text-gray-800'
+      },
+      success: {
+        light: 'bg-green-100',
+        default: 'bg-green-500',
+        dark: 'bg-green-600',
+        text: 'text-white'
+      },
+      warning: {
+        light: 'bg-amber-100',
+        default: 'bg-amber-500',
+        dark: 'bg-amber-600',
+        text: 'text-white'
+      },
+      danger: {
+        light: 'bg-red-100',
+        default: 'bg-red-500',
+        dark: 'bg-red-600',
+        text: 'text-white'
+      },
+      info: {
+        light: 'bg-blue-100',
+        default: 'bg-blue-500',
+        dark: 'bg-blue-600',
+        text: 'text-white'
+      }
+    }
+    
+    # Bordi del tema
+    THEME_BORDERS = {
+      primary: 'border-orange-200',
+      secondary: 'border-gray-200',
+      success: 'border-green-200',
+      warning: 'border-amber-200',
+      danger: 'border-red-200',
+      info: 'border-blue-200'
+    }
+    
+    # Effetti hover
+    THEME_HOVER = {
+      primary: 'hover:bg-orange-600',
+      secondary: 'hover:bg-gray-300',
+      success: 'hover:bg-green-600',
+      warning: 'hover:bg-amber-600',
+      danger: 'hover:bg-red-600',
+      info: 'hover:bg-blue-600'
+    }
+    
+    # Stili base comuni
+    COMMON_STYLES = {
+      rounded: 'rounded-md',
+      shadow: 'shadow-sm',
+      transitions: 'transition-all duration-200'
+    }
+    
+    # Stili per elementi di layout
+    LAYOUT_STYLES = {
+      panel: {
+        base: 'rounded-lg border shadow-sm',
+        header: 'px-4 py-3 border-b',
+        body: 'p-4',
+        footer: 'px-4 py-3 border-t'
+      },
+      table: {
+        container: 'overflow-hidden rounded-md border shadow-sm',
+        header: 'bg-gray-50 text-left text-xs uppercase tracking-wider text-gray-500 font-medium',
+        row: {
+          base: '',
+          hover: 'hover:bg-gray-50',
+          striped: 'even:bg-white odd:bg-gray-50'
+        },
+        cell: 'px-4 py-3 text-sm text-gray-700'
+      }
+    }
+    
+    # Genera classi per un componente basato su variante
+    def self.generate_component_classes(component_type, variant, options = {})
+      base_classes = []
+      
+      case component_type
+      when :button
+        base_classes << 'inline-flex items-center justify-center'
+        base_classes << 'font-medium'
+        base_classes << COMMON_STYLES[:rounded]
+        base_classes << COMMON_STYLES[:transitions]
+        
+        if options[:outline]
+          # Versione outline
+          base_classes << 'border-2'
+          base_classes << "border-#{variant}-500"
+          base_classes << "text-#{variant}-500"
+          base_classes << "hover:bg-#{variant}-50"
+        else
+          # Versione piena
+          base_classes << THEME_COLORS.dig(variant.to_sym, :default)&.sub('bg-', '') || "bg-#{variant}-500"
+          base_classes << THEME_COLORS.dig(variant.to_sym, :text) || 'text-white'
+          base_classes << THEME_HOVER[variant.to_sym] || "hover:bg-#{variant}-600"
+        end
+        
+        # Dimensione
+        case options[:size]
+        when :sm
+          base_classes << 'px-2.5 py-1.5 text-xs'
+        when :lg
+          base_classes << 'px-6 py-3 text-base'
+        else # :md (default)
+          base_classes << 'px-4 py-2 text-sm'
+        end
+        
+        # Disabilitato
+        if options[:disabled]
+          base_classes << 'opacity-50 cursor-not-allowed'
+        end
+        
+        # Larghezza piena
+        if options[:full_width]
+          base_classes << 'w-full'
+        end
+      
+      when :panel
+        base_classes << LAYOUT_STYLES[:panel][:base]
+        
+        # Colore di sfondo in base alla variante
+        if variant.to_sym == :default
+          base_classes << 'bg-white'
+          base_classes << 'border-gray-200'
+        else
+          base_classes << THEME_COLORS.dig(variant.to_sym, :light)&.sub('bg-', '') || "bg-#{variant}-50"
+          base_classes << THEME_BORDERS[variant.to_sym] || "border-#{variant}-200"
+        end
+        
+      when :table
+        base_classes << 'min-w-full bg-white'
+        
+        # Bordi
+        if options[:bordered]
+          base_classes << 'border-collapse'
+          base_classes << (THEME_BORDERS[variant.to_sym] || 'border-gray-200')
+        end
+        
+        # Classi personalizzate
+        base_classes << options[:classes] if options[:classes].present?
+      end
+      
+      base_classes.compact.join(' ')
+    end
+  end
+end 

data/app/controllers/better_ui/application_controller.rb

@@ -1,4 +1,5 @@
 module BetterUi
   class ApplicationController < ActionController::Base
+    layout 'better_ui/application'
   end
 end

data/app/controllers/better_ui/docs_controller.rb

@@ -0,0 +1,34 @@
+module BetterUi
+  class DocsController < ApplicationController
+    def index
+      # Pagina principale della documentazione
+    end
+    
+    def show
+      # Verifica se esiste una vista con il nome richiesto
+      page = params[:page]
+      valid_pages = %w[introduction installation customization components/buttons components/icons components/panel components/table]
+      
+      if valid_pages.include?(page)
+        if page.start_with?('components/')
+          # Per i componenti, rendiamo esplicitamente il template nella directory corretta
+          component_name = page.split('/').last
+          render template: "better_ui/docs/components/#{component_name}"
+        else
+          render page
+        end
+      else
+        # Pagina non trovata
+        render plain: "Pagina non trovata", status: :not_found
+      end
+    end
+    
+    def component
+      # Gestisce le rotte tipo /better_ui/docs/components/button
+      component_name = params[:component]
+      render template: "better_ui/docs/components/#{component_name}"
+    rescue ActionView::MissingTemplate
+      render plain: "Componente non trovato", status: :not_found
+    end
+  end
+end 

data/app/helpers/better_ui_application_helper.rb

@@ -0,0 +1,99 @@
+module BetterUi
+  module ApplicationHelper
+    # Render markdown
+    def better_ui_markdown(text)
+      return '' if text.blank?
+      
+      renderer = Redcarpet::Render::HTML.new(
+        filter_html: false,
+        hard_wrap: true,
+        link_attributes: { target: '_blank', rel: 'noopener noreferrer' }
+      )
+      
+      markdown = Redcarpet::Markdown.new(
+        renderer,
+        autolink: true,
+        tables: true,
+        fenced_code_blocks: true,
+        strikethrough: true,
+        superscript: true,
+        underline: true,
+        highlight: true,
+        quote: true,
+        footnotes: true
+      )
+      
+      rendered_html = markdown.render(text).html_safe
+      
+      # Applica classi Tailwind agli elementi HTML generati dal markdown
+      rendered_html
+        .gsub(/<h1>/i, '<h1 class="text-3xl font-bold mb-6 pb-2 border-b border-gray-200">')
+        .gsub(/<h2>/i, '<h2 class="text-2xl font-semibold mt-8 mb-4 pb-2 border-b border-gray-100">')
+        .gsub(/<h3>/i, '<h3 class="text-xl font-medium mt-6 mb-3">')
+        .gsub(/<pre>/i, '<pre class="bg-gray-100 p-4 rounded-md overflow-x-auto my-4">')
+        .gsub(/<code>/i, '<code class="font-mono">')
+        .gsub(/<ul>/i, '<ul class="ml-6 mb-4">')
+        .gsub(/<ol>/i, '<ol class="ml-6 mb-4">')
+        .gsub(/<p>/i, '<p class="mb-4 leading-relaxed">')
+        .gsub(/<a /i, '<a class="text-blue-600 no-underline hover:underline" ')
+        .gsub(/<blockquote>/i, '<blockquote class="border-l-4 border-gray-200 pl-4 ml-0 text-gray-600">')
+        .html_safe
+    end
+    
+    # Determina se il path corrente corrisponde a quello dato
+    def current_page?(path)
+      request.path == path
+    end
+    
+    # Helper per i componenti General
+    def better_ui_general_button(label = nil, **options)
+      render BetterUi::General::ButtonComponent.new(label: label, **options)
+    end
+    
+    def better_ui_general_panel(**options, &block)
+      render BetterUi::General::PanelComponent.new(**options), &block
+    end
+    
+    def better_ui_general_table(**options)
+      render BetterUi::General::TableComponent.new(**options)
+    end
+    
+    def better_ui_general_icon(name, **options)
+      render BetterUi::General::IconComponent.new(name: name, **options)
+    end
+    
+    # Helper per i componenti Application
+    def better_ui_application_button(label = nil, **options)
+      render BetterUi::Application::ButtonComponent.new(label: label, **options)
+    end
+    
+    def better_ui_application_panel(**options, &block)
+      render BetterUi::Application::PanelComponent.new(**options), &block
+    end
+    
+    def better_ui_application_table(**options)
+      render BetterUi::Application::TableComponent.new(**options)
+    end
+    
+    def better_ui_application_icon(name, **options)
+      render BetterUi::Application::IconComponent.new(name: name, **options)
+    end
+    
+    # Helper per i componenti Website
+    def better_ui_website_button(label = nil, **options)
+      render BetterUi::Website::ButtonComponent.new(label: label, **options)
+    end
+    
+    def better_ui_website_panel(**options, &block)
+      render BetterUi::Website::PanelComponent.new(**options), &block
+    end
+    
+    def better_ui_website_table(**options)
+      render BetterUi::Website::TableComponent.new(**options)
+    end
+    
+    def better_ui_website_icon(name, **options)
+      render BetterUi::Website::IconComponent.new(name: name, **options)
+    end
+  end
+end 

data/app/views/layouts/component_preview.html.erb

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html style="background-color: <%= params.dig(:lookbook, :display, :bg_color) || "white" %>">
+<head>
+  <title><%= content_for(:title) || "BetterUI" %></title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <link rel="icon" href="/icon.png" type="image/png">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon.png">
+
+  <%# Includes all stylesheet files in app/assets/stylesheets %>
+  <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+  <%= stylesheet_link_tag "better_ui/application" %>
+</head>
+
+<body class="bg-white text-gray-800">
+  <main class="min-h-screen p-8 bg-yellow-500">
+    <div style="
+    margin-left: auto;
+    margin-right: auto;
+    max-width: <%= params.dig(:lookbook, :display, :max_width) || "100%" %>
+  ">
+    <%= yield %> <!-- rendered preview will be injected here -->
+  </main>
+</body>
+</html>

data/config/initializers/lookbook.rb

@@ -1,23 +1,23 @@
 if defined?(Lookbook)
   Lookbook.configure do |config|
     # Configura la directory delle preview dei componenti
-    config.preview_paths << BetterUi::Engine.root.join("test/components/previews")
-
+    config.preview_paths << BetterUi::Engine.root.join('test/components/previews')
+    
     # Configura il titolo della pagina Lookbook
-    config.page_title = "BetterUI - Catalogo Componenti"
-
+    config.page_title = 'BetterUI - Catalogo Componenti'
+    
     # Configura i tag principali
     config.preview_display_names = {
-      "BetterUi::General" => "Componenti Generali",
-      "BetterUi::Application" => "Componenti Applicazione",
-      "BetterUi::Website" => "Componenti Sito Web"
+      'BetterUi::General' => 'Componenti Generali',
+      'BetterUi::Application' => 'Componenti Applicazione',
+      'BetterUi::Website' => 'Componenti Sito Web'
     }
-
+    
     # Per supportare i componenti ViewComponent
     config.listen_for_changes = {
-      component: "app/components/**/*.rb",
-      preview: "test/components/previews/**/*_preview.rb",
-      template: "app/components/**/*.erb"
+      component: 'app/components/**/*.rb',
+      preview: 'test/components/previews/**/*_preview.rb',
+      template: 'app/components/**/*.erb'
     }
   end
-end
+end 

data/config/routes.rb

@@ -1,2 +1,15 @@
 BetterUi::Engine.routes.draw do
+  # Route principale per la documentazione
+  root to: 'docs#index'
+  
+  # Route per le pagine di documentazione generiche
+  get 'docs/:page', to: 'docs#show', as: :docs_page
+  
+  # Route specifica per i componenti
+  get 'docs/components/:component', to: 'docs#component', as: :docs_component
+  
+  # Montaggio di Lookbook per lo sviluppo e il test
+  if Rails.env.development? || Rails.env.test?
+    mount Lookbook::Engine, at: "/lookbook"
+  end
 end

data/lib/better_ui/engine.rb

@@ -1,14 +1,51 @@
+require 'view_component'
+require 'redcarpet'
+require 'tailwindcss-rails'
+require 'coderay'
+require 'font-awesome-sass'
+
 module BetterUi
   class Engine < ::Rails::Engine
     isolate_namespace BetterUi
-
-    initializer "better_ui.view_helpers" do
+    
+    # Configurazione per rendere disponibili gli assets all'applicazione host
+    initializer 'better_ui.assets' do |app|
+      app.config.assets.paths << root.join('app', 'assets', 'stylesheets')
+      app.config.assets.paths << root.join('app', 'assets', 'images')
+    end
+    
+    # Assicuriamo che gli helper siano correttamente caricati
+    config.autoload_paths << root.join('app', 'helpers')
+    
+    # Configurazione per rendere disponibili i componenti all'applicazione host
+    initializer 'better_ui.view_helpers' do
+      require_relative '../../app/helpers/better_ui_application_helper'
+      
       ActiveSupport.on_load :action_controller do
-        helper BetterUi::ApplicationHelper if defined?(BetterUi::ApplicationHelper)
+        helper BetterUi::ApplicationHelper
       end
-
+      
       ActiveSupport.on_load :action_view do
-        include BetterUi::ApplicationHelper if defined?(BetterUi::ApplicationHelper)
+        include BetterUi::ApplicationHelper
+      end
+    end
+    
+    # Configurazione per ViewComponent
+    config.view_component.preview_paths << root.join('test', 'components', 'previews')
+    
+    # Configurazione per Lookbook in sviluppo e test
+    initializer 'better_ui.lookbook' do
+      if defined?(Lookbook) && (Rails.env.development? || Rails.env.test?)
+        # Carica esplicitamente le dipendenze per le funzionalità avanzate di Lookbook
+        begin
+          require 'listen'
+          require 'action_cable'
+        rescue LoadError => e
+          # Log che le dipendenze opzionali non sono disponibili
+          puts "NOTA: Alcune funzionalità avanzate di Lookbook potrebbero non essere disponibili: #{e.message}"
+        end
+        
+        config.lookbook = Lookbook
       end
     end
   end

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.3.0"
+  VERSION = "0.4.0"
 end

data/lib/better_ui.rb

@@ -1,9 +1,25 @@
 require "better_ui/version"
 require "better_ui/engine"
-require "better_ui/railtie"
-
-require "font-awesome-sass"
 
 module BetterUi
-  # Your code goes here...
+  class Configuration
+    attr_accessor :button_defaults, :alert_defaults, :card_defaults, :tabs_defaults
+    
+    def initialize
+      @button_defaults = {}
+      @alert_defaults = {}
+      @card_defaults = {}
+      @tabs_defaults = {}
+    end
+  end
+  
+  class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+    
+    def configure
+      yield(configuration) if block_given?
+    end
+  end
 end