Resolve "update mains libraries"
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 desmakeStyles()((theme) => {
- Tous les
const classes = useStyles
sont devenus desconst { 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