L'auteur décrit avec humour et frustration l'incroyable complexité des boutons radio dans un projet utilisant Shadcn, un framework UI basé sur Radix. Initialement simple avec une balise HTML native, le bouton radio devient un composant React complexe de 45 lignes, intégrant des dépendances externes pour un simple cercle. L'article explore les couches de complexité ajoutées par Shadcn et Radix, questionnant la nécessité de cette sur-ingénierie pour un élément basique. Il se termine avec ce bout de code qui permet de faire la même chose... en plus simple

input[type="radio"] {
  /* Disable the browser's default radio button styles */
  appearance: none;
  margin: 0;

  /* Recreate the circle container */
  border: 1px solid black;
  background: white;
  border-radius: 50%;

  /* Center our dot in the container */
  display: inline-grid;
  place-content: center;

  /* Use a pseudo-element to display our "dot" */
  &::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
  }

  /* And display it when the radio button is checked */
  &:checked::before {
    background: black;
  }
}

Symfony UX Toolkit révolutionne l'expérience de développement frontend en intégrant la philosophie de Shadcn/ui, permettant de créer des composants UI personnalisables et accessibles directement dans Twig. En copiant et adaptant du code plutôt que d'utiliser des dépendances NPM, les développeurs gagnent en contrôle et en flexibilité. L'outil génère des composants avec une logique PHP, des templates Twig sémantiques et des contrôleurs Stimulus pour une accessibilité et une maintenance optimisées. Le résultat est une réduction significative du volume de code, une accessibilité standardisée et une productivité accrue.