feat(Link): add LinkProps option

[ledouxm]

Avec Tanstack Router v1.22.2, l'inférence du type des props de Link renvoie { to: any }

Cette PR ajoute la possibilité de spécifier LinkProps lors de l'override de l'interface RegisterLink

import type { LinkProps } from "@tanstack/react-router";

declare module "@codegouvfr/react-dsfr/link" {
  interface RegisterLink {
    // Link: typeof Link;
    LinkProps: LinkProps;
  }
}

Aussi, @tanstack/react-router n'exporte plus le type LinkComponent, il faut utiliser typeof Link donc la doc est obsolète ici: https://react-dsfr.codegouv.studio/routing

[garronej]

Tanks you for the heads up @ledouxm.
tanstack router is evolving very rapidely. @ddecrulle is working hard to stay on top of things, going as far as being in touch with tanner himself lol.
But look likes there is yet another breaking change. I let him see what's up, he should come back to you shortly.

[ledouxm]

I thought the solution was simple but with some more tests it seems this is not enough so I set the PR to draft and will keep digging.

Very good work on this lib btw, I've integrated it seeminglessly in no time !

Do you plan on making a pandacss adapter ? I have a PoC script translating fr variables to panda tokens and I would like discussing it with you.

[ddecrulle]

Hello, j'ai regardé sur mon projet. Le LinkComponent est toujours exporté en 1.26.3 mais le setup proposé ne fonctionne plus. Ils font beaucoup de changement sur le Link.

Je ne suis pas favorable à modifier le type interne et d'ajouter LinkProps. J'ai essayé ce setup :

startReactDsfr({
  Link,  //ts error 
})
declare module '@codegouvfr/react-dsfr/spa' {
  interface RegisterLink {
    Link: (props: LinkProps) => React.ReactElement
  }
}

J'ai une erreur de type sur le Link de startReactDsfr mais la bonne inférence de type dans les linkProps du DSFR. Il faut que l'on regarde ça plus en profondeur.

[garronej]

Very good work on this lib btw, I've integrated it seeminglessly in no time !

Merci!

Do you plan on making a pandacss adapter ?

J'ai un conflict d'intêret vu que j'ai une librairie en directe compétition avec panda mais oui carrément on peut regarder ensemble pour publier un adapteur.
La seule chose qui m'étonne c'est qu'il y en ai besoin d'un...? Parce que les tokens dans fr.colors sont déjà des CSS variables, normalement ils n'ont pas besoin d'être contextualisé.
Enfin si ça te dis on en discute en visio?

@ddecrulle Merci d'avoir regarder pour tanstack, si tu veux te joindre a nous pour parler de panda?

[ledouxm]

Si j'utilise les tokens de fr, mes tokens panda valent en gros { "background-blue-france": { value: "var(--background-blue-france)" } et donc dans le css colors-background-blue-france: var(--background-blue-france);

En plus Panda utilise les css layers pour ordonner les styles, pour éviter les "!important" il faut aussi mettre le dsfr.css dans un layer.

J'ai un script qui extrait les variables du dsfr.min.css, les transforme en semanticToken (avec la nuance light et dark mode) et les remplace par la variable créée par Panda. J'en ai fait une version AST aussi, on pourra en discuter.

Très chaud pour la visio, je t'ai envoyé un message sur Mattermost

[garronej]

je n'ai plus mattermost mais si tu veux je suis dispos avec dylan là, tu peut m'envoyer un mail a joseph.garrone@protonmail.com

[garronej]

I've updated the instructions and loosen up the types restrictions on the react-dsfr side.

https://react-dsfr.codegouv.studio/routing#tanstack

Updating to the latest tanstack router + react-dsfr version should do it.

Thanks for bringing this to our attention.