better_ui 0.3.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f8b92fdba76f5e84f09fb6a3bf9879b209e0e7dfd8f864186784db24b808c59
-  data.tar.gz: 4d21e971baeecb10c7a3c5952041ac7e6911342e0efe4d0015efb92f9f214652
+  metadata.gz: ee8e6a1b636ddcd65276d5c410c5b0c9a239d236cdbf507d168bb68abe63c12d
+  data.tar.gz: 930f7752b6c813943b49d29bd635da5109355f036eea0bf1d5fc9aed45932173
 SHA512:
-  metadata.gz: 778ee8d067130b37947a227ccf1322e8cf5b82d19c9b3f7a0371cc16b62071daaeb5eb6a191898ef2b06419486fe656bc22bea4314fbf98884fdf16259ac8409
-  data.tar.gz: 1df545b428bdb281fb6f78b7be2e58e455bd6bd67f0202684f51b9e756c9ccc3e928a283f97d98a924185e1bb859b63f8cf2a91857ef49478cf6bfc3f254629d
+  metadata.gz: f91edcfb87541fbdeb97e2bc3899c1b1d3a8508bd94a6e6a9955ea56940830cfcc98df3e23f82e9bcb975039b6d3122c36f7c0e75316822ec11f03d206105647
+  data.tar.gz: 9422f6159176dc75cd254009f55660831aca51c98e7a4d829a5ab6b4911d5fc569f44ae05c549a452d5fd403a844a1b589642244c1922f485f59874094618921

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright Umberto Peserico
+Copyright alessiobussolari
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -1,301 +1,211 @@
-# BetterUI
+# Better UI
 
-Una libreria completa di componenti UI per applicazioni Rails costruita con ViewComponent e Tailwind CSS. Include 26 componenti con un sistema di design unificato e documentazione interattiva.
+[![Gem Version](https://badge.fury.io/rb/better_ui.svg)](https://badge.fury.io/rb/better_ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-- 🎨 **Componenti Eleganti**: Componenti UI pre-costruiti con styling Tailwind CSS
-- 📖 **Documentazione Interattiva**: Preview Lookbook integrate per tutti i componenti
-- 🔧 **Altamente Personalizzabile**: Opzioni di configurazione flessibili per ogni componente
-- 🚀 **Production Ready**: Componenti testati che seguono le best practices
-- 📱 **Responsive**: Tutti i componenti sono mobile-first e responsive
-- ♿ **Accessibile**: Costruiti pensando all'accessibilità
+A comprehensive UI component library for Rails applications built with ViewComponent and Tailwind CSS, following BEM methodology.
 
-## Panoramica
+![Better UI Components](https://via.placeholder.com/800x400?text=Better+UI+Components)
 
-Better UI è una gem Rails che fornisce una collezione di componenti UI riutilizzabili costruiti con ViewComponent e Tailwind CSS. Include un sistema di design unificato con tematizzazione consistente e gestione completa dei form.
+## Table of Contents
 
-### Caratteristiche Principali
+- [Overview](#overview)
+- [Installation](#installation)
+  - [Basic Installation](#basic-installation)
+  - [Advanced Installation Options](#advanced-installation-options)
+  - [Tailwind CSS Configuration](#tailwind-css-configuration)
+- [Documentation](#documentation)
+- [Usage](#usage)
+- [Customization](#customization)
+- [Components](#components)
+- [Testing](#testing)
+- [Contributing](#contributing)
+- [License](#license)
+- [Resources](#resources)
 
-- **Solo TailwindCSS**: Approccio puro Tailwind senza file CSS/SCSS personalizzati
-- **26 Componenti**: Libreria completa organizzata per scopo
-- **Sistema Input Unificato**: Componenti input supportano 14+ tipi (text, email, password, number, date, time, etc.)
-- **Documentazione Interattiva**: Integrazione Lookbook con preview live
-- **Sistema Helper**: Helper Rails-friendly con integrazione form builder
-- **Tematizzazione Consistente**: 9 temi standard (default, white, red, rose, orange, green, blue, yellow, violet)
-- **Dimensionamento Flessibile**: 3 dimensioni standard (small, medium, large) con 5 opzioni border radius
-- **Accessibilità**: Componenti progettati seguendo le best practices di accessibilità
+## Overview
 
-## Installazione
+Better UI is a Rails gem that provides a collection of reusable UI components built with ViewComponent and Tailwind CSS. It follows the BEM (Block Element Modifier) methodology to ensure consistent naming and styling conventions.
 
-Aggiungi questa riga al Gemfile della tua applicazione:
+Key features:
+- **Modern Sass Architecture**: Uses `@use` and `@forward` instead of deprecated `@import`
+- **Modular Components**: Each component is isolated and can be used independently
+- **Customizable**: Override components styles with your own customizations
+- **Interactive Documentation**: Built-in documentation viewer with Lookbook
+- **Responsive Design**: All components are responsive by default
+- **Accessibility**: Components are designed with accessibility in mind
 
-```ruby
-gem "better_ui"
-```
+For more detailed information, see the [components documentation](COMPONENTS.md).
+
+## Installation
+
+### Basic Installation
 
-Per lo sviluppo con documentazione Lookbook:
+1. Add the gem to your Gemfile:
 
 ```ruby
-gem "better_ui"
-gem "lookbook", group: :development
+gem 'better_ui'
 ```
 
-Quindi esegui:
+2. Run bundle install:
 
 ```bash
-$ bundle install
+bundle install
 ```
 
-## Setup
-
-### 1. Mount Engine (Opzionale)
-
-Se vuoi accedere alle route interne di BetterUI, monta l'engine in `config/routes.rb`:
+3. Run the installer:
 
-```ruby
-Rails.application.routes.draw do
-  mount BetterUi::Engine => "/better_ui"
-  # le tue altre route...
-end
+```bash
+bin/rails generate better_ui:install
 ```
 
-### 2. Setup Lookbook (Raccomandato per Development)
-
-Per accedere alla documentazione interattiva dei componenti durante lo sviluppo, monta Lookbook in `config/routes.rb`:
-
-```ruby
-Rails.application.routes.draw do
-  # Monta Lookbook solo in development
-  mount Lookbook::Engine => "/lookbook" if Rails.env.development?
-
-  # le tue altre route...
-end
-```
+The installer will:
+- Mount the Better UI engine at `/better_ui`
+- Add the necessary assets to your application
+- Create a configuration file at `config/initializers/better_ui.rb`
+- Generate customizable stylesheets in `app/assets/stylesheets/components/`
 
-**Fatto!** I componenti BetterUI e le loro preview sono automaticamente disponibili in Lookbook.
+### Advanced Installation Options
 
-### 3. Includi Tailwind CSS
+You can customize the installation process with the following options:
 
-Assicurati che la tua applicazione includa Tailwind CSS, dato che i componenti BetterUI si basano sulle classi Tailwind. Se non hai Tailwind CSS installato, segui la [guida ufficiale di installazione Tailwind CSS](https://tailwindcss.com/docs/guides/ruby-on-rails).
+```bash
+# Skip mounting the engine in routes
+bin/rails generate better_ui:install --skip-routes
 
-## Utilizzo
+# Skip generating stylesheets
+bin/rails generate better_ui:install --skip-stylesheets
 
-I componenti Better UI possono essere utilizzati in due modi: istanziazione diretta o metodi helper.
+# Skip creating the configuration file
+bin/rails generate better_ui:install --skip-config
 
-### Metodi Helper (Raccomandato)
+# All options together
+bin/rails generate better_ui:install --skip-routes --skip-stylesheets --skip-config
+```
 
-```erb
-<%# Input di testo con validazione %>
-<%= bui_input_text(
-  name: 'email',
-  value: @user.email,
-  type: :email,
-  theme: :blue,
-  size: :large,
-  required: true
-) %>
+### Tailwind CSS Configuration
 
-<%# Button con theme e size %>
-<%= bui_button(
-  'Invia Form',
-  theme: :green,
-  size: :large,
-  type: :submit
-) %>
+Better UI requires Tailwind CSS to be properly configured in your application. If you haven't already set up Tailwind CSS, follow these steps:
 
-<%# Card con blocco di contenuto %>
-<%= bui_card(title: 'Profilo Utente', theme: :white) do %>
-  <p>Contenuto informazioni utente qui</p>
-<% end %>
+1. Install Tailwind CSS in your Rails application:
 
-<%# Integrazione con form %>
-<%= form_with model: @user do |form| %>
-  <%= bui_input_text(name: 'name', form: form, required: true) %>
-  <%= bui_input_text(name: 'email', type: :email, form: form) %>
-  <%= bui_button('Salva', type: :submit, theme: :blue) %>
-<% end %>
+```bash
+bin/rails tailwindcss:install
 ```
 
-### Istanziazione Diretta
-
-```erb
-<%# Rendering diretto del componente %>
-<%= render BetterUi::General::Input::Text::Component.new(
-  name: 'username',
-  type: :text,
-  theme: :default,
-  size: :medium
-) %>
-
-<%# Componente button %>
-<%= render BetterUi::General::Button::Component.new(
-  'Cliccami',
-  theme: :blue,
-  size: :large
-) %>
+2. Configure Tailwind to include Better UI's components:
+
+In your `tailwind.config.js` file, add:
+
+```javascript
+module.exports = {
+  content: [
+    './app/views/**/*.{html,html.erb,erb}',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/components/**/*.{rb,html,html.erb,erb}',
+    // Add this line for Better UI components
+    './app/components/better_ui/**/*.{rb,html,html.erb,erb}'
+  ],
+  // other configurations...
+}
 ```
 
-### Sistema di Tematizzazione
-
-Tutti i componenti supportano tematizzazione consistente:
+For more detailed installation instructions, see [INSTALLATION.md](INSTALLATION.md).
 
-- **9 Temi Standard**: default, white, red, rose, orange, green, blue, yellow, violet
-- **3 Dimensioni Standard**: small, medium, large
-- **5 Opzioni Border Radius**: none, small, medium, large, full
+## Documentation
 
-### Approccio Styling
+After installation, you can access the interactive documentation at:
 
-Better UI usa un approccio TailwindCSS puro con costanti per styling manutenibile:
-
-```ruby
-# Le costanti del componente definiscono le opzioni di styling
-BUTTON_THEME_CLASSES = {
-  default: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
-  blue: 'bg-blue-600 text-white hover:bg-blue-700',
-  green: 'bg-green-600 text-white hover:bg-green-700'
-}.freeze
-
-BUTTON_SIZE_CLASSES = {
-  small: 'px-3 py-1.5 text-sm',
-  medium: 'px-4 py-2 text-base',
-  large: 'px-6 py-3 text-lg'
-}.freeze
+```
+http://localhost:3000/better_ui
 ```
 
-## Componenti Disponibili
-
-Better UI include 26 componenti organizzati in tre categorie:
-
-### Componenti Application (4)
-
-Componenti di layout e navigazione per interfacce applicative:
-
-- **Card**: Container di contenuto con supporto header e azioni
-- **Main**: Area contenuto principale dell'applicazione con layout responsive
-- **Navbar**: Barra di navigazione superiore con supporto contenuto flessibile
-- **Sidebar**: Navigazione laterale collassabile
-
-### Componenti General (22)
+This provides:
+- Interactive component previews
+- Component API documentation
+- Usage examples and code snippets
+- Styling reference
 
-Elementi UI core per costruire interfacce:
+## Usage
 
-**Display & Feedback**
+Using Better UI components in your views is straightforward:
 
-- **Alert**: Messaggi di notifica con temi multipli e opzioni dismissible
-- **Avatar**: Immagini profilo utente con supporto fallback
-- **Badge**: Indicatori di stato e etichette
-- **Progress**: Barre di progresso e indicatori di caricamento
-- **Spinner**: Animazioni di caricamento
-- **Tooltip**: Overlay di aiuto contestuale e informazioni
+```erb
+<%# Basic button %>
+<%= render BetterUi::General::ButtonComponent.new(label: 'Click me') %>
+
+<%# Button with more options %>
+<%= render BetterUi::General::ButtonComponent.new(
+  label: 'Submit',
+  variant: 'primary',
+  size: 'large',
+  icon_left: 'check',
+  data: { turbo: false }
+) %>
 
-**Navigazione & Struttura**
+<%# Panel component %>
+<%= render BetterUi::General::PanelComponent.new(title: 'User Details') do %>
+  <p>This is the panel content</p>
+<% end %>
+```
 
-- **Breadcrumb**: Indicatori di percorso di navigazione
-- **Divider**: Separatori di contenuto visivi
-- **Heading**: Intestazioni con tipografia consistente
-- **Icon**: Sistema icone SVG con libreria estesa
-- **Link**: Elementi anchor potenziati con supporto theme
-- **Panel**: Sezioni di contenuto organizzate
-- **Table**: Tabelle dati con sorting e funzionalità responsive
-- **Tag**: Elementi di categorizzazione ed etichettatura
+For more detailed usage instructions, see [USAGE.md](USAGE.md).
 
-**Form & Input**
+## Customization
 
-- **Button**: Button azione con varianti multiple e stati
-- **Field**: Wrapper campo form con supporto label e validazione
-- **Input**: Sistema input unificato che supporta 14+ tipi:
-  - **Text**: text, email, password, search, url, tel
-  - **Number**: number, range
-  - **Date/Time**: date, datetime-local, time, month, week
-  - **File**: upload file
-  - **Color**: color picker
-  - **Checkbox**: Opzioni multi-selezione
-  - **Radio**: Opzioni selezione singola
-  - **Select**: Selezioni dropdown
-  - **Textarea**: Input testo multi-riga
+Better UI is designed to be highly customizable:
 
-### Componenti Form (0)
+1. **Style Customization**: Edit the generated override files in `app/assets/stylesheets/components/`
+2. **Component Configuration**: Configure default options in `config/initializers/better_ui.rb`
+3. **Component Extensions**: Extend existing components or create your own
 
-Riservati per futuri componenti form specializzati e widget form complessi.
+Example of customizing a component style:
 
-## Personalizzazione e Styling
+```scss
+// app/assets/stylesheets/components/_button_overrides.scss
+@layer components {
+  .bui-button {
+    &--primary {
+      @apply bg-indigo-600 hover:bg-indigo-700;
+    }
+  }
+}
+```
 
-I componenti BetterUI usano classi Tailwind CSS. Puoi:
+For more detailed customization instructions, see [CUSTOMIZATION.md](CUSTOMIZATION.md).
 
-1. **Sovrascrivere classi**: Passa classi personalizzate tramite il parametro `classes`
-2. **Estendere componenti**: Crea i tuoi componenti che ereditano da BetterUI
-3. **Personalizzazione theme**: Modifica la configurazione Tailwind per tematizzazione consistente
+## Components
 
-```erb
-<!-- Aggiungi classi personalizzate -->
-<%= render BetterUi::General::Button::Component.new(
-  label: "Button Personalizzato",
-  classes: "my-custom-class hover:scale-105"
-) %>
-```
+Better UI includes a wide range of components categorized into:
 
-Better UI è progettato per essere altamente personalizzabile mantenendo consistenza:
+- **General Components**: Basic UI elements like buttons, badges, icons
+- **Application Components**: Complex UI elements like cards, alerts, sidebars
+- **Website Components**: Components specifically designed for websites
 
-1. **Personalizzazione Theme**: Modifica le costanti dei componenti per cambiare lo styling di default
-2. **Configurazione Componenti**: Configura opzioni di default in `config/initializers/better_ui.rb`
-3. **Integrazione TailwindCSS**: Tutto lo styling usa classi TailwindCSS per massima flessibilità
-4. **Estensioni Componenti**: Estendi componenti esistenti o crea i tuoi seguendo i pattern stabiliti
+For a full list of available components and their documentation, see [COMPONENTS.md](COMPONENTS.md).
 
 ## Testing
 
-I componenti Better UI sono testati completamente. Puoi eseguire la test suite con:
+Better UI components are thoroughly tested. You can run the test suite with:
 
 ```bash
 bin/rails test
 ```
 
-## Supporto Browser
-
-I componenti BetterUI supportano tutti i browser moderni che supportano:
-
-- CSS Grid e Flexbox
-- Funzionalità JavaScript ES6+
-- Tailwind CSS
+For more detailed testing instructions, see [TESTING.md](TESTING.md).
 
 ## Contributing
 
-1. Forka il repository
-2. Crea il tuo branch feature (`git checkout -b feature/componente-fantastico`)
-3. Aggiungi il tuo componente con test e preview Lookbook
-4. Committa le tue modifiche (`git commit -am 'Aggiungi componente fantastico'`)
-5. Pusha al branch (`git push origin feature/componente-fantastico`)
-6. Crea una Pull Request
-
-### Setup Development
-
-```bash
-git clone https://github.com/alessiobussolari/better_ui.git
-cd better_ui
-bundle install
-cd test/dummy
-bundle exec rails server
-```
-
-Visita `http://localhost:3000/lookbook` per vedere la documentazione dei componenti.
-
-## Roadmap
-
-- 🎯 Componenti form avanzati (input complessi, validazioni)
-- 📊 Componenti chart e visualizzazione dati
-- 🎭 Componenti animazione e transizione
-- 🌙 Supporto dark mode
-- 📱 Componenti specifici mobile
-- 🔧 Tool di configurazione e generatori
+Contributions are welcome! Please check out our [contribution guidelines](CONTRIBUTING.md).
 
 ## License
 
-La gem è disponibile come open source sotto i termini della [MIT License](https://opensource.org/licenses/MIT).
-
-## Support
-
-- 📖 [Documentazione](https://github.com/alessiobussolari/better_ui)
-- 🐛 [Issue Tracker](https://github.com/alessiobussolari/better_ui/issues)
-- 💬 [Discussioni](https://github.com/alessiobussolari/better_ui/discussions)
+Better UI is available as open source under the terms of the [MIT License](LICENSE).
 
----
+## Resources
 
-Costruito con ❤️ da [PanDev](https://github.com/alessiobussolari)
+- [Troubleshooting Guide](TROUBLESHOOTING.md)
+- [FAQs](FAQ.md)
+- [Changelog](CHANGELOG.md)
+- [Roadmap](ROADMAP.md)

data/app/assets/stylesheets/better_ui/_base.scss

@@ -0,0 +1,9 @@
+// Base che importa Tailwind
+@use "tailwindcss/base";
+@use "tailwindcss/components";
+@use "tailwindcss/utilities";
+
+// Stili comuni dell'applicazione
+html, body {
+  @apply font-sans text-gray-900 leading-normal;
+} 

data/app/assets/stylesheets/better_ui/_components.scss

@@ -0,0 +1,2 @@
+// Re-espone tutti i componenti con un singolo import
+@forward "components/index"; 

data/app/assets/stylesheets/better_ui/_utilities.scss

@@ -0,0 +1,14 @@
+@layer utilities {
+  // Utility classes aggiuntive che estendono Tailwind
+  .spacing-responsive {
+    @apply px-4 py-6 md:px-6 md:py-8 lg:px-8 lg:py-10;
+  }
+  
+  .text-shadow {
+    @apply shadow-sm;
+  }
+  
+  .card-shadow {
+    @apply shadow-md hover:shadow-lg transition-shadow duration-200;
+  }
+} 

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

@@ -12,4 +12,36 @@
  *
  *= require_tree .
  *= require_self
+ *= require font-awesome
+ *= require better_ui
  */
+
+/* 
+ * BetterUI - Utilizziamo Tailwind CSS per tutti gli stili 
+ * Ora organizzati con la moderna sintassi di Sass (@use/@forward)
+ */
+
+/* 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;
+}
+.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; }