Interaction de l'interface

:root {
  --primary: oklch(0.7 0.15 200);
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  --border: oklch(0.25 0 0);
  /* ... plus de variables de couleur */
}

// app/layout.tsx
import { ThemeProvider } from '@/components/theme-provider'

export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  )
}

.dark {
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  /* Toutes les variables de couleur en mode sombre */
}

// Exemple complet de composant de formulaire
'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'

const formSchema = z.object({
  username: z.string().min(2, 'Le nom d’utilisateur doit comporter au moins 2 caractères'),
  email: z.string().email('Adresse e-mail invalide'),
})

export function UserForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
      email: '',
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Nom d’utilisateur</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Envoyer</Button>
      </form>
    </Form>
  )
}

// Utilisez tabIndex pour contrôler l'ordre de tabulation
<button tabIndex={1}>Premier</button>
<button tabIndex={2}>Deuxième</button>

// Ignorer les éléments non interactifs
<div tabIndex={-1}>Ignorer cet élément</div>

// Retirer de l'ordre de tabulation (déconseillé sauf si nécessaire)
<button tabIndex={-1}>Inaccessible via Tab</button>

// Piège de focus (Focus Trap) - utilisé dans les modales
import { FocusTrap } from '@radix-ui/react-focus-trap'

<FocusTrap>
  <Dialog>
    {/* Le focus est limité à l'intérieur de la boîte de dialogue */}
  </Dialog>
</FocusTrap>

// Style visible au focus
<button className="focus-visible:ring-2 focus-visible:ring-primary">
  {/* Afficher l’anneau de focus lors de la navigation au clavier */}
</button>

// aria-label : fournit une étiquette à un élément
<button aria-label="Fermer la boîte de dialogue">
  <X />
</button>

// aria-labelledby : fait référence à l’ID d’un autre élément
<div aria-labelledby="dialog-title">
  <h2 id="dialog-title">Titre de la boîte de dialogue</h2>
</div>

// aria-describedby : fournit une description supplémentaire
<input 
  aria-describedby="email-help"
  aria-invalid={hasError}
/>
<span id="email-help">Veuillez saisir une adresse e-mail valide</span>

// Utiliser des balises sémantiques
<nav>Navigation</nav>
<main>Contenu principal</main>
<article>Article</article>
<section>Section</section>
<aside>Barre latérale</aside>
<header>En-tête</header>
<footer>Pied de page</footer>

// À éviter : utiliser div à la place des balises sémantiques
<div className="nav"> {/* Non recommandé */}
<nav> {/* Recommandé */}

// Utilisez l’attribut role (lorsque les balises sémantiques ne sont pas disponibles)
<div role="button" tabIndex={0} onClick={handleClick}>
  Bouton personnalisé
</div>

<div role="alert" aria-live="polite">
  Avis important
</div>

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  {/* Boîte de dialogue modale */}
</div>

// Erreur : utiliser uniquement la couleur pour indiquer l’état
<span className="text-red-500">Erreur</span>

// Correct : couleur + icône/texte
<span className="text-red-500 flex items-center gap-1">
  <AlertCircle />
  Erreur : veuillez saisir une valeur valide
</span>

// Utiliser memo pour éviter les re-rendus inutiles
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* rendu complexe */}</div>
})

// Utiliser useMemo pour mettre en cache les résultats calculés
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

// Utiliser useCallback pour mettre en cache les fonctions
const handleClick = useCallback(() => {
  doSomething(id)
}, [id])

// Utiliser react-window ou react-virtualized
import { FixedSizeList } from 'react-window'

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {Row}
</FixedSizeList>

// Importation dynamique du composant
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false, // si vous devez désactiver le SSR
})

// Découpage du code au niveau des routes (géré automatiquement par Next.js)
// app/dashboard/page.tsx sera découpé automatiquement

// Optimisation automatique par le composant Image de Next.js
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // image au-dessus de la ligne de flottaison
  loading="lazy" // image sous la ligne de flottaison
  placeholder="blur" // espace réservé flouté
/>

// Prend en charge les formats modernes tels que WebP et AVIF
// Génère automatiquement des images responsives

// Use next/font to optimize fonts
import { GeistSans } from 'next/font/google'

const geistSans = GeistSans({
  subsets: ['latin'],
  display: 'swap', // Font loading strategy
  preload: true,
})

// Font subsetting, load only the required characters

// Préconnecter les domaines tiers
<link rel="preconnect" href="https://fonts.googleapis.com" />

// Précharger les ressources critiques
<link rel="preload" href="/fonts/geist.woff2" as="font" />

// Pré-récupérer les ressources de la page suivante
<link rel="prefetch" href="/dashboard" />