Se passer de Geist UI

[thom4parisot]

Geist UI n'est plus maintenu, et peut-être que le passage à react@19 va poser problème (voir si les .propTypes et surtout .defaultValues vont poser problème).

C'est à la base un design system, qu'on ajoute en plus au notre. Les interfaces sont plutôt verbeuses.

Chemins de migration possibles :

Les boutons

Ça fait doublon avec notre composant <Button /> (même nom, comportements différents).

Les modales

Les <dialog> natives et un composant réutilisable suffiraient.

const openSignal = useSignal(false)

<Modal footer={footerComponent} open={openSignal}><MyForm></Modal>

Les toasts

Peut-être passer par React Toastify, qui est accessible.

Ou par React Aria, qui propose des composants sans style mais accessibles ?

[ggrossetie]

Je vote pour 😄
Initialement, j'avais choisi cette libraire car le design était minimaliste et assez proche de Stylo. Il y avait aussi des discussions sur le fait d'avoir un dark mode et je pensais qu'il serait plus simple de l'implémenter avec cette librairie.
Et enfin le useModal et useToasts() sont plutôt cool à utiliser.

[ggrossetie]

@thom4parisot est-ce que tu penses que c'est une bonne idée d'utiliser https://github.com/reactjs/react-modal pour construire nos modales ou est-ce qu'on part de zéro ?

[ggrossetie]

Quand je dis "de zéro", je veux dire de notre composant Modal qui a déjà l'air d'être pas si mal d'un point de vue accessibilité non ?

[thom4parisot]

Je pense qu'on peut les gérer nous-mêmes (c'est pas trop complexe comme composant). Un truc du genre devrait suffire pour l'invocation :

const { isOpen, open, close, Modal } = useModal()

return <Modal element={<EditTagForm tag={tag} />} />

Ça permettrait de rendre le composant à la demande (et non avant même que la modale soit invoquée), et sans boilerplate.

[ggrossetie]

Avec un forwardRef on peut faire un hook qui permet d'afficher/masquer la Modal:

export function useModal() {
  const ref = useRef(null)
  return {
    ref,
    show: () => {
      ref.current.showModal()
    },
    close: () => {
      ref.current.close()
    },
  }
}

Je pense que ça peut être intéressant de décomposer la modale en plusieurs zones :

• l'entête
• le contenu
• le pied de page avec les actions

Sur une modale qui est un peu longue, ça permet de conserver le titre et les actions visibles :

Enregistrement.de.l.ecran.2025-03-04.a.18.13.40.mov

[thom4parisot]

Je ne suis pas sûr que ça soit plus accessible que de rendre l'intégralité de la zone modale scrollable — je pense à des écrans plus petits encore, qui auront le contenu de la modale écrasé par l'entête/pied de modale.

Plusieurs niveaux de scroll = charge cognitive plus importante. (et un composant plus compliqué à gérer qui plus est).

Et puis bon, j'aimerais bien que @maiwann soit embarquée dans ces questions de design pour que ces considérations soient prises en compte.

[ggrossetie]

Plusieurs niveaux de scroll = charge cognitive plus importante.

On a une qu'une seule barre de défilement car on est dans le contexte de la modale (la reste de la page est figé). Pour être complet, voici le rendu actuel sur mon écran :

Enregistrement.de.l.ecran.2025-03-04.a.20.57.38.mov

(et un composant plus compliqué à gérer qui plus est).

C'est vrai que le composant sera moins flexible car composé de plusieurs zones.

Et puis bon, j'aimerais bien que @maiwann soit embarquée dans ces questions de design pour que ces considérations soient prises en compte.

Je n'ai pas dit le contraire 😉

[maiwann]

Je comprends l'envie de laisser les boutons accessibles peu importe le niveau de scroll, mais je trouve que cela laisse trop peu de place au contenu qui semble "écrasé", ou en tout cas pour lequel il n'y a pas beaucoup de place.

Pour ces cas, je préfère qu'on ne fixe pas les boutons en bas de la modale peu importe le scroll. Et donc qu'on soit plutot comme dans la 2e vidéo : #1150 (reply in thread)

Merci pour la vidéo ça m'aide pour me rendre compte des choses 👍

[maiwann]

Note : c'est typiquement le genre de choses que je trouverai cool à discuter en hebdo, des sujets qui seraient vite discutés et réglés.

[ggrossetie]

Les modales c'est fait, il reste encore quelques bouts :

• useToasts on a quelques pistes pour remplacer
• Loading à remplacer par notre Loading
• Card, Spacer, Divider, Text, Note, Code, Dot, Badge c'est principalement de la mise en forme des éléments HTML avec du CSS ça devrait le faire
• Avatar ça peut valoir le coup de faire une molecule
• Textarea, useInput je crois que @thom4parisot tu as fais des choses à base de formData et dans React 19 il y a des choses aussi
• Tooltip on l'utilisera bientôt plus
• Tabs pratique mais utilisé uniquement sur la page UX
• GeistProvider à virer une fois qu'on aura plus de Geist dans l'application

[ggrossetie]

@thom4parisot a supprimé le composant <Tabs> dans la page UX. J'ai pensé à https://github.com/markusenglund/react-switch pour remplacer les toggle ?