@valeriodrive/component-library

Libreria moderna di componenti React con Tailwind CSS - Accessibile, personalizzabile e pronta all'uso

Quick Start

1️⃣ Installazione

npm install @valeriodrive/component-library

Prerequisiti: Solo React 18+ o 19+

⚠️ Tailwind CSS NON è obbligatorio! La libreria include CSS pre-compilato.

2️⃣ Importa gli stili

Nel tuo file principale (main.tsx, App.tsx, o _app.tsx):

// Importa gli stili della libreria
import '@valeriodrive/component-library/styles';

// Se usi Tailwind nel tuo progetto, importa la libreria DOPO:
import './index.css'; // I tuoi stili Tailwind
import '@valeriodrive/component-library/styles'; // Stili libreria

📝 Nota: NON serve modificare tailwind.config.js! Gli stili sono già compilati.

3️⃣ Usa i componenti

import { Button, Card, Input } from '@valeriodrive/component-library';

function App() {
  return (
    <Card>
      <h2>Benvenuto!</h2>
      <Input label="Nome" placeholder="Il tuo nome" />
      <Button variant="primary">Invia</Button>
    </Card>
  );
}

Caratteristiche

• 🎨 20+ Componenti - Da base (Button, Input) a complessi (Navbar, Hero)
• ♿ Accessibilità WCAG 2.1 - Attributi ARIA, navigazione da tastiera
• 🎭 Varianti Multiple - Sistema flessibile di personalizzazione
• 📦 TypeScript - Type-safe con definizioni complete
• 🌙 Dark Mode Ready - Supporto nativo per temi
• 🚀 Ottimizzato - React.memo, useCallback, tree-shaking automatico
• ⚡ Performance - Re-render ottimizzati per prestazioni massime

Componenti Disponibili

Base

Button · Input · Select · Textarea · Checkbox · Radio · Card · Badge · Divider · Container · Grid · Stack

Complex

Navbar · Carousel · ThemeSwitcher

Sections

Hero · Services · Portfolio · Footer

Performance

Tutti i componenti sono ottimizzati per performance massime:

• ✅ React.memo - Previene re-render non necessari
• ✅ useCallback - Funzioni memoizzate per componenti complessi
• ✅ Tree-shaking - Import solo ciò che usi
• ✅ CSS ottimizzato - Classi Tailwind pre-compilate

// Import specifico - tree-shaking automatico
import { Button, Card } from '@valeriodrive/component-library';

// Ogni componente è memoizzato internamente
<Button onClick={handleClick}>Click Me</Button>

Documentazione Completa

• 📖 Guida Installazione - Setup dettagliato e troubleshooting
• 💡 Esempi - Casi d'uso reali con Next.js, Vite, CRA
• 📚 Documentazione Completa - API reference completa

Esempio Completo

import { 
  Button, 
  Input, 
  Card, 
  Navbar, 
  Hero 
} from '@valeriodrive/component-library';
import '@valeriodrive/component-library/styles';

function LoginPage() {
  return (
    <>
      <Navbar
        logo="My App"
        menuItems={[
          { label: 'Home', href: '/' },
          { label: 'About', href: '/about' }
        ]}
      />
      
      <Hero
        title="Benvenuto"
        subtitle="Accedi al tuo account"
      />
      
      <Card variant="elevated">
        <form>
          <Input 
            label="Email" 
            type="email"
            required
            error={emailError}
            errorMessage="Email non valida"
          />
          
          <Input 
            label="Password" 
            type="password"
            required
            helpText="Almeno 8 caratteri"
          />
          
          <Button 
            type="submit" 
            variant="primary" 
            fullWidth
          >
            Accedi
          </Button>
        </form>
      </Card>
    </>
  );
}

Supporto TypeScript

Tutti i componenti includono type definitions:

import type { ButtonProps, InputProps } from '@valeriodrive/component-library';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Troubleshooting Comuni

Stili non applicati?

Assicurati di aver:

1. Importato gli stili: import '@valeriodrive/component-library/styles'
2. Configurato Tailwind per includere i file della libreria nel content
3. Installato Tailwind CSS 4+ nel tuo progetto

Componenti non trovati?

Verifica che il package sia installato correttamente:

npm list @valeriodrive/component-library

Browser Support

• Chrome (ultimi 2 versioni)
• Firefox (ultimi 2 versioni)
• Safari (ultimi 2 versioni)
• Edge (ultimi 2 versioni)

Contribuire

Contributi, issues e feature requests sono benvenuti!

Licenza

MIT © TEYE

Made with ❤️ by TEYE