Choose a Movie for Me Design System

Descrizione del Progetto

Choose a Movie for Me DS è un design system basato su Web Components, pensato per realizzare interfacce accessibili, modulari e riusabili per applicazioni di suggerimento e presentazione di film. Il progetto fornisce una libreria di componenti UI (atomi, molecole, organismi, layout e template) che rispettano le best practice di accessibilità (WCAG 2.1 AA), usano design tokens CSS e sono documentati e testati in modo automatico tramite Storybook, Playwright e jest-axe.

Architettura e Struttura

• Web Components: Tutti i componenti sono custom elements (cam-ds-*) e seguono la convenzione di naming e struttura suggerita dai design system moderni.
• Atomic Design: La struttura delle cartelle segue i livelli di atomic design:
  • Atoms: Elementi base come button, avatar, logo, poster, tipografia, ecc.
  • Molecules: Combinazioni di atomi, es. star-list, person, billing-type.
  • Organisms: Blocchi complessi, es. movie-info, people-list, availability.
  • Layout: Componenti strutturali come header, footer, content.
  • Template: Struttura di pagina completa.
  • Pages: Esempi di pagine composte.
• Design Tokens: Tutti i colori, font, spaziature sono centralizzati in /src/tokens/design-tokens.css.
• Font: L’intero sistema usa Open Sans da Google Fonts.
• Testing: Ogni componente è testato con:
  • jest-axe per l’accessibilità (incluso landmark semantico nei test)
  • Playwright per il contrasto colore e test end-to-end
  • Storybook per la documentazione interattiva e visuale
• Accessibilità: Tutti i componenti sono progettati per essere:
  • Navigabili da tastiera
  • Con focus visibile
  • Con markup semantico e ARIA appropriati
  • Testati con screen reader
  • Con contrasto minimo 4.5:1 verificato automaticamente
• Documentazione: Ogni componente ha README dettagliato, pattern d’uso, scorciatoie da tastiera, API eventi, note implementative e test.

Tecnologie Utilizzate

• Web Components (Custom Elements, Shadow DOM)
• Vite per il build system
• Storybook per la documentazione e sviluppo UI
• Jest + jest-axe per test di accessibilità
• Playwright per test end-to-end e visuali
• CSS Design Tokens
• Google Fonts (Open Sans)

Esempio di utilizzo

<cam-ds-template>
  <cam-ds-header></cam-ds-header>
  <main>
    <cam-ds-movie-info title="Inception" year="2010"></cam-ds-movie-info>
    <cam-ds-people-list people='[{"name":"Mario Rossi","role":"Regista"}]'></cam-ds-people-list>
  </main>
  <cam-ds-footer></cam-ds-footer>
</cam-ds-template>