HRNet (Plug-in)

1/4

Comme indiqué dans le brief de la direction de Wealth Health, il est prévu que la conversion des plugins jQuery tiers en composants React améliorera les performances et la stabilité. Les plus gros problèmes pour les utilisateurs de HRNet sont les sélecteurs de date, les fenêtres modales, les menus déroulants et les tableaux. Tous les appels réseau et les manipulations DOM, nécessaires pour les plugins jQuery, se combinent pour ralentir le système. Plusieurs plaintes concernant ces plugins jQuery ont été reçues et la direction pense qu'il sera préférable d'avoir ses propres composants React pour avoir plus de contrôle sur l'application. Par exemple, la boîte de dialogue modale utilisée à présent pour confirmer la création de nouveaux enregistrements d'employés ne correspond pas au design que les concepteurs souhaitent utiliser. De plus, le plugin est très incompatible avec l'application de styles personnalisés, il faut donc créer un composant React auquel un style personnalisé peut être appliqué, puis publier le composant React sur npm en tant que package

Fonctionnalités

Peut changer la couleur de fond de la page de la modale.
Peut changer la couleur du corps de la modale.
Peut changer le contour de la bordure de la modale.
Peut changer la couleur du bouton de fermeture de la modale.
Peut ajouter, supprimer ou modifier l'ombre de la boîte de la modale.
Peut ajouter ou supprimer le rayon de bordure par défaut de la modale.
Peut ajouter ou supprimer le logo de la modale.
Peut changer le titre de la modale.
Peut ajouter, supprimer ou modifier un message secondaire.
Peut ajouter ou supprimer l'animation par défaut de la modale (animation : la modale descend dans la vue).

Contraintes

Suivre un paradigme de programmation fonctionnelle.
Éviter d'utiliser des classes.
Convertir 1 des 4 plugins jQuery en React.
Publier le composant React sur npm comme un paquet.
Si possible, tester le code React avec une suite de tests unitaires.

Compétences

Re-concevoir une application pour réduire la dette technique.
Analyser les performances d'une application web.
Programmer en JavaScript avec la programmation fonctionnelle.
Publier un composant React sur npm sous forme de package.

Notes

La modale personnalisable est livrée avec des couleurs par défaut déjà installées, mais vous pouvez les modifier si vous le souhaitez. Il est également possible de définir des thèmes pour les modes nuit et jour (tel que montré par le demo) et de choisir d'utiliser ou non l'animation prédéfinie. En outre, le piège du focus est déjà appliqué à la modale pour les utilisateurs de clavier. Il existe une version incluant les tests avec Jest sur la branche 'withtests' de github. Si vous voulez essayer de modifier l'apparence de la modale, vous trouverez le paquet npm à l'adresse https://www.npmjs.com/package/react-custom-modal-by-msparkystevens.