MUI portability

[Fen747]

Hi,

I'm currently working for the DINUM's Rizomo project, where we currently use MUI. We are considering using the DSFR as soon as possible, and therefore are interested to know more about it and where it stands in your current Roadmap ?

Thank you

[bzg]

@garronej is actively working on this project and can complete my answer.

The short-term goal is to use DSFR react components for https://sill.etalab.gouv.fr.

The long-term goal is to provide an always up-to-date set of DSFR react components.

We have had discussions with https://github.com/dataesr/react-dsfr to try coordinating our work: dataesr/react-dsfr is certainly more usable right now (and @garronej might contribute to it too), but if codegouvfr/react-dsfr manages to provide a stable solution that it easier to maintain for the long run, projects will be more than welcome to rely on it.

Since we're at DINUM too, let's arrange a meeting?

[garronej]

Hi @Fen747,
Thanks for reaching out,
To add on top of what @bzg just said,

Specifically about the MUI integration:

Keep in mind that the MUI integration isn't endorsed nor approved by the core DSFR team!
Official components should always be preferred over the MUI's ones.

I'm currently working on this right now.
The MUI theme adapter is almost done.
I'currently completing mapping the spacing.
I advise you to wait a few days before starting using it, though.
My good UX designer college, @marchufschmitt, is abou to join the team, I'm waiting for him to do its magic with the color and typography mapping.
If all goes according to plan the MUI component should look like legit DSFR component out of the box 🤩

I'll ping you as soon as it's ready.

But as @bzg said, as of now, this module does not provide any of the 42 official components.
It just provides tooling to integrates in well-established frameworks and utilities for using the DSFR fundamentals (color, spacing, typography, breakpoints) with CSS in JS solution.
If you are looking for, components please use https://github.com/dataesr/react-dsfr instead. It's the more usable solution as of today.

[bzg]

Oh! @garronej was quicker than me :)

About this:

PS: Keep in mind that the MUI integration isn't endorsed nor approved by the core DSFR team!

Still, we had a fruitful discussion with the DSFR team and they are of course interesting in listing officially supported libraries, and codegouvfr/react-dsfr will certainly be one of them.

[garronej]

L'integration a bien avancé:

https://etalab-2.gitbook.io/dsfr-react/mui-integration

https://user-images.githubusercontent.com/6702424/204353935-ad43532b-5dde-41e1-bb08-0ac70a730a6e.mov

[bzg]

<3 the atmosphere of the video, reminds me of https://www.youtube.com/watch?v=Tj-GZJhfBmI :)

[garronej]

Mais oui, en plus il y a le coté obscur de la force!

[garronej]

Si non j'ai fait un tuto un peut plus traditionelle (pour Next.js, les SPA pas besoin de tuto c'est facil ) https://www.youtube.com/watch?v=0n0S6PcyG28&t=727s

[bzg]

Nous devons avancer sur l'utilisation de https://tube.numerique.gouv.fr pour la publication de vidéos liées à nos tâches.

[garronej]

Screen Recording 2022-12-02 at 19.04.28-vp9-chrome.webm

Marc a fait du super boulot. Je ferme mtn.

https://react-dsfr.etalab.studio/mui

[bzg]

Super boulot indeed, merci beaucoup !