better_ui 0.1.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

@@ -1,41 +1,34 @@
 module BetterUi
   class DocsController < ApplicationController
     def index
-      @components = [
-        { name: 'Button', path: better_ui.docs_component_path('button') },
-        { name: 'Alert', path: better_ui.docs_component_path('alert') },
-        { name: 'Card', path: better_ui.docs_component_path('card') },
-        { name: 'Modal', path: better_ui.docs_component_path('modal') },
-        { name: 'Tabs', path: better_ui.docs_component_path('tabs') },
-        { name: 'Form Elements', path: better_ui.docs_component_path('form_elements') }
-      ]
+      # Pagina principale della documentazione
     end
     
     def show
-      doc_file = Rails.root.join('docs', "#{params[:page]}.md")
+      # 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 File.exist?(doc_file)
-        @content = File.read(doc_file)
+      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
-        @content = "# Documentazione non trovata\nLa pagina richiesta non è stata trovata."
+        # 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]
-      
-      # Percorso relativo ai file di documentazione dei componenti
-      doc_file = BetterUi::Engine.root.join('docs', 'components', "#{component_name}.md")
-      
-      if File.exist?(doc_file)
-        @content = File.read(doc_file)
-      else
-        @content = "# Componente non trovato\nLa documentazione per il componente '#{component_name}' non è stata trovata."
-      end
-      
-      # Decidere quali esempi mostrare in base al componente
-      @component_name = component_name
-      render :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

@@ -0,0 +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')
+    
+    # Configura il titolo della pagina Lookbook
+    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'
+    }
+    
+    # Per supportare i componenti ViewComponent
+    config.listen_for_changes = {
+      component: 'app/components/**/*.rb',
+      preview: 'test/components/previews/**/*_preview.rb',
+      template: 'app/components/**/*.erb'
+    }
+  end
+end 

data/config/routes.rb

@@ -5,6 +5,11 @@ BetterUi::Engine.routes.draw do
   # Route per le pagine di documentazione generiche
   get 'docs/:page', to: 'docs#show', as: :docs_page
   
-  # Route per la documentazione dei componenti specifici
+  # 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,6 +1,8 @@
 require 'view_component'
 require 'redcarpet'
 require 'tailwindcss-rails'
+require 'coderay'
+require 'font-awesome-sass'
 
 module BetterUi
   class Engine < ::Rails::Engine
@@ -12,8 +14,13 @@ module BetterUi
       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
       end
@@ -24,6 +31,22 @@ module BetterUi
     end
     
     # Configurazione per ViewComponent
-    config.view_component.preview_paths << root.join('spec', 'components', 'previews')
+    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
 end

data/lib/better_ui/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: better_ui
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.4.0
 platform: ruby
 authors:
 - alessiobussolari
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-01 00:00:00.000000000 Z
+date: 2025-05-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -66,6 +66,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: coderay
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+- !ruby/object:Gem::Dependency
+  name: font-awesome-sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.5.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.5.1
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -94,6 +122,48 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: lookbook
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+- !ruby/object:Gem::Dependency
+  name: listen
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: actioncable
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Una gem Rails che funziona come engine montabile contenente componenti
   UI riutilizzabili e pagine di documentazione
 email:
@@ -105,17 +175,43 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/javascripts/better_ui/controllers/navbar_controller.js
+- app/assets/javascripts/better_ui/controllers/sidebar_controller.js
+- app/assets/javascripts/better_ui/controllers/toast_controller.js
+- app/assets/javascripts/better_ui/index.js
+- app/assets/javascripts/better_ui/toast_manager.js
 - app/assets/stylesheets/better_ui/application.css
+- app/components/better_ui/application/alert_component.html.erb
+- app/components/better_ui/application/alert_component.rb
+- app/components/better_ui/application/header_component.html.erb
+- app/components/better_ui/application/header_component.rb
+- app/components/better_ui/application/navbar_component.html.erb
+- app/components/better_ui/application/navbar_component.rb
+- app/components/better_ui/application/sidebar_component.html.erb
+- app/components/better_ui/application/sidebar_component.rb
+- app/components/better_ui/application/toast_component.html.erb
+- app/components/better_ui/application/toast_component.rb
+- app/components/better_ui/general/breadcrumb_component.html.erb
+- app/components/better_ui/general/breadcrumb_component.rb
+- app/components/better_ui/general/button_component.html.erb
+- app/components/better_ui/general/button_component.rb
+- app/components/better_ui/general/heading_component.html.erb
+- app/components/better_ui/general/heading_component.rb
+- app/components/better_ui/general/icon_component.html.erb
+- app/components/better_ui/general/icon_component.rb
+- app/components/better_ui/general/panel_component.html.erb
+- app/components/better_ui/general/panel_component.rb
+- app/components/better_ui/general/table_component.html.erb
+- app/components/better_ui/general/table_component.rb
+- app/components/better_ui/theme_helper.rb
 - app/controllers/better_ui/application_controller.rb
 - app/controllers/better_ui/docs_controller.rb
-- app/helpers/better_ui/application_helper.rb
+- app/helpers/better_ui_application_helper.rb
 - app/jobs/better_ui/application_job.rb
 - app/mailers/better_ui/application_mailer.rb
 - app/models/better_ui/application_record.rb
-- app/views/better_ui/docs/component.html.erb
-- app/views/better_ui/docs/index.html.erb
-- app/views/better_ui/docs/show.html.erb
-- app/views/layouts/better_ui/application.html.erb
+- app/views/layouts/component_preview.html.erb
+- config/initializers/lookbook.rb
 - config/routes.rb
 - lib/better_ui.rb
 - lib/better_ui/engine.rb