Componenti - lucadileo9/template-catalog GitHub Wiki

Panoramica

I componenti sono il cuore del sistema modulare del progetto. Sono organizzati secondo il principio dell'Atomic Design, che suddivide i componenti in tre livelli principali: Atomi, Molecole e Organismi. Questa organizzazione garantisce coerenza, riusabilità e facilità di manutenzione.

1. Architettura dei Componenti

I componenti sono divisi in due categorie:

  • Componenti Globali: Condivisi tra tutti i template e definiti nella cartella components/.
  • Componenti Locali: Specifici per ciascun template e definiti nella cartella templates/<nome-template>/components/.

Livelli Atomic Design

  1. Atomi:

    • Componenti base e indipendenti (es. pulsanti, input, icone).
    • Esempio: Un pulsante con uno stile predefinito.

  2. Molecole:

    • Combinazioni di atomi che formano unità più complesse (es. form con campi di input e pulsanti).
    • Esempi comuni di molecole nel progetto includono:
      • Header: Barra di navigazione con logo, menu e link.
      • Footer: Sezione inferiore con informazioni di contatto e link utili.
      • Card: Contenitore riutilizzabile per visualizzare contenuti (es. prodotti, servizi).

  3. Organismi:

    • Gruppi di molecole e atomi che formano sezioni complete di una pagina (es. sidebar, griglie di prodotti).
    • Gli organismi rappresentano componenti più grandi e complessi, ma vengono utilizzati raramente nel progetto attuale, poiché la maggior parte delle esigenze è soddisfatta da Atomi e Molecole.

2. Componenti Globali nella Cartella components/

La cartella components/ contiene componenti condivisi tra tutti i template. Questi componenti possono includere:

  • Atomi: Componenti base come pulsanti o icone.
  • Molecole: Componenti più complessi come header, footer o card.
  • Organismi: Sezioni complete di pagine, anche se è raro che ce ne siano in questa cartella.
  • ui: Componenti ShadCN globali, come Button, Card, Dialog, ecc.

Nota Importante

Sebbene sia possibile avere atomi, molecole e organismi comuni nella cartella components/, è poco probabile che ci siano componenti di questo tipo, poiché ogni template tende ad avere esigenze specifiche. Infatti in questa cartella verranno utilizzati principalmente i componenti ShadCN, che sono progettati per essere riutilizzati in tutti i template. Tuttavia, mai dire mai: in futuro potrebbero essere aggiunti componenti globali se si identificano elementi comuni a tutti i template.

3. Componenti dell'App Generale

L'app generale (quella che gestisce il routing e il catalogo dei template) ha una propria cartella components/ dedicata ai componenti che utilizza. Questi componenti sono specifici per l'app generale e non vengono condivisi con i template.

Componenti Principali

  1. Header e Footer di JEMORE:

    • Il Header e il Footer dell'app generale sono identici a quelli del sito principale di JEMORE.
    • Contengono elementi come il logo, il menu di navigazione e link utili.

  2. Molecole per la Gestione delle Liste:

    • L'app generale include molecole specifiche per gestire le liste di:
      • Template: Mostra una griglia di card che rappresentano i template disponibili.
      • Siti Esterni: Mostra una griglia di card che rappresentano i siti esterni realizzati.

Questi componenti sono progettati per essere utilizzati esclusivamente nell'app generale e non influenzano i template. Infatti i colori utilizzati sono definiti specificamente nel file globals.css dell'app generale, e non sono influenzati dalle variabili CSS dei template. Essi sono definit così:

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
  --blu: #222C7C;
  --blu-scuro: #1E1E2F;
  --blu-petrolio: #383B53;
  --bianco-latte: #FDF7F7;
  --giallo: #F6D7A8;

}

4. Scelta di ShadCN

ShadCN fornisce componenti UI riutilizzabili basati su Radix UI e Tailwind CSS. Questi componenti sono globali e possono essere utilizzati in tutti i template.

Perché Usare Componenti Globali?

  • Riduzione del Codice Ripetuto: Componenti come Button, Card, Dialog e altri sono fondamentali per la costruzione di interfacce utente. Non avrebbe senso replicarli per ogni singolo template, poiché ciò porterebbe a un'enorme quantità di codice duplicato.
  • Centralizzazione: I componenti globali vengono caricati una sola volta e possono essere importati ovunque nel progetto: 
    import { Button } from 'global-ui/button';

Personalizzazione nei Template

Se un template richiede una versione personalizzata di un componente globale (es. pulsanti rotondi per tutto il progetto):

  1. Copia il componente globale nella cartella locale del template: 
    templates/pizzeria/components/ui/button.tsx
  2. Modifica il componente locale secondo le esigenze del template.
  3. Importa il componente personalizzato nelle pagine o componenti del template: 
    import { Button } from '@pizzeria/components/ui/button';

Questo approccio garantisce che le modifiche siano isolate al template specifico, senza influenzare gli altri.