Skip to content

Resolve "update mains libraries"

Francois AUBEUT requested to merge 195-update-mains-libraries into dev

Closes #195 (closed)

Je decris ci dessous toutes les etapes par lesquelles je suis passé

Migration de React 17

Première étape est de migrer react et react-dom en version 17, cette commande doit pour l'instant etre forcée car il y a plusieurs librairies qui ne supportent pas react 17 dont material-ui V4

Le package-lock change de version egalement en meme temps. certains conflits apparaissent, il faudra les corriger plus tard

Commit refactor(react): update react version to 17

Migration de MUI V4 vers V5

j'ai suivi ce guide

  • Remplacement de MuiThemeProvider par ThemeProvider dans App.jsx
  • Installation des paquets @mui/material @mui/styles @mui/lab @mui/icons-material @emotion/react @emotion/styled
    • l'application démarre toujours sans erreurs
    • un lintfix est obligatoire pour corriger des modifications de code dûes au script
    • commit refactor(mui): install new mui packages
  • lancement des scripts de migrations:
    • npx @mui/codemod v5.0.0/preset-safe ./imports/: 121 fichiers modifiés
    • commit refactor(mui): preset-safe script modified imports
    • npx @mui/codemod v5.0.0/variant-prop ./imports: 0 fichiers modifiés
    • aucun besoin de lancer le script link-underline-hover car Link de MUI n'est pas utilisé dans le projet
  • Migrations des styles de MUI:
    • adaptV4Theme a été rajouté par les scripts pour adapter le format des themes. Pour plus de maintenabilité, je modifie la forme des themes afin de correspondre à la V5. Les props et l'override des styles se trouvent maintenant sous la clé components du thème.
    • commit refactor(mui): change themes format
  • Breaking changes sur les components
    • Retrait de la props color="primary" sur les Checkbox
    • commit refactor(mui): fix components
  • Migration de JSS pour Emotion (non obligatoire mais mieux pour la maintenabilité sur le long terme)
    • tss-react est choisi pour sa proximité d'API avec le makeStyle actuel
    • npx @mui/codemod v5.0.0/jss-to-tss-react ./imports: 83 fichiers modifiés
    • Tous les makeStyles((theme) => { sont devenus des makeStyles()((theme) => {
    • Tous les const classes = useStyles sont devenus des const { classes } = useStyles
    • corrections des cas particuliers non transformés par le script => useLayoutStyle(isMobile) => les useStyles provenant d'un autre fichier ne sont pas transformés
    • commit refactor(mui): add tss-react & update code
  • Désinstallation des paquets @material-ui et @mui/styles
  • npm audit fix pour corriger la version de react-quill et quilljs
  • correction de certains bugs visuelset de certains oublis dans la correction de makeStyles
  • commit refactor(mui): finalize migration

Migration de material-table

  • npm install @material-table/core@next
  • commit refactor(table): update @material-table/core

Tests et correction de bugs trouvés avant de poursuivre la migration

  • Fade de @mui ne doti plus etre suivi de fragment, je met des divs a la place sur 3 page
  • commit fix(mui): fix fade fragment
  • la couleur par defaut etant primary, le gris n'existe plus,je l'ajoute dans le theme pour pouvoir l'utiliser
  • Correction faite sur le systeme d'alerte, suppression du wrapper pour simplifier le composant
  • commit fix(table): mui alert & colors

Migration de react-sortable v2 vers v6

  • npm install react-sortablejs sortablejs --save
  • etrangement l'API ne change quasiment pas et presque aucun changements ne doit etre effectué, le seul changement est la creation d'un sortable grid qui utlise forwardRef de React afin d'etre utilisé dans le react-sortable.
  • commit refactor(sortable): update react-sortablejs

Derniers fix sur des erreurs

  • les boutons avec color="grey" manquant
  • react-swipeable-views pose probleme dans les deps mais n'est jjamais utilisé dans le projet. je le supprime
  • react-avatar-editor doit etre mis a jour pour utiliser react 17
  • commit fix(all): last fixes before review 1

Branche prete pour la première revue de code

Edited by Luc Bourdot

Merge request reports