npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ci-cd-yoan-ranchon

v0.1.0

Published

Downloads

125

Readme

** WARNING : Pour lancer le projet en local il faut commenter 2 lignes dans le fichier next config

Formulaire d'inscription avec validation et gestion des erreurs

Ce projet est une application réalisée avec un framework JavaScript (React avec TypeScript) permettant à un utilisateur de s’enregistrer à travers un formulaire avec des règles de validation strictes et une gestion d’erreurs détaillée. Il est entièrement testé, documenté et déployé sur GitHub Pages avec un workflow CI/CD automatisé.


Fonctionnalités principales

  1. Formulaire d'inscription utilisateur :

    • Champs requis :
      • Nom : Validation pour interdire les caractères spéciaux et les chiffres (accents, trémas, et tirets acceptés).
      • Prénom : Validation identique à celle du nom.
      • Email : Validation de format (doit respecter les normes RFC 5322).
      • Date de naissance : L'utilisateur doit avoir au moins 18 ans.
      • Ville : Champ texte classique.
      • Code postal : Doit respecter le format français (5 chiffres).
    • Le bouton "Sauvegarder" est désactivé tant que tous les champs ne sont pas remplis correctement.
  2. Validation des données :

    • Les champs sont validés dynamiquement.
    • Affichage des messages d'erreur sous chaque champ non valide, en rouge.
  3. Sauvegarde des données :

    • Si les champs sont valides :
      • Les données sont sauvegardées dans le local storage.
      • Un toaster de succès s’affiche.
      • Les champs du formulaire sont vidés.
    • Si les champs ne sont pas valides :
      • Un toaster d’erreur s’affiche.
      • Les champs en erreur sont mis en évidence.

Règles de validation

  1. Nom et prénom :

    • Doivent contenir uniquement des lettres, des accents, des trémas et des tirets.
    • Aucun chiffre ni caractère spécial autorisé.
  2. Email :

    • Doit être conforme aux standards internationaux de validation.
  3. Date de naissance :

    • L'utilisateur doit être âgé d'au moins 18 ans.
  4. Code postal :

    • Doit comporter exactement 5 chiffres pour respecter le format français.

Tests et couverture

Tests unitaires (UT)

Tous les composants et fonctions critiques sont testés. Les tests couvrent les cas suivants :

  • Calcul de l’âge à partir de la date de naissance.
  • Vérification que l'âge est supérieur ou égal à 18 ans.
  • Validation des formats :
    • Nom et prénom (avec cas particuliers comme accents, tirets, trémas).
    • Email valide et non valide.
    • Code postal en format français.
  • Désactivation du bouton lorsque les champs sont incomplets.
  • Fonction de sauvegarde dans le local storage.
  • Apparition des toasters (succès ou erreur) et des messages d’erreur.

Tests d'intégration (IT)

  • Vérification de bout en bout :
    • Remplissage correct du formulaire.
    • Sauvegarde réussie dans le local storage avec affichage du toaster de succès.
    • Gestion des erreurs et affichage des messages rouges.
    • Vidage des champs après soumission réussie.

Couverture attendue

  • Couverture totale à 100 % pour tous les fichiers critiques (hors index.tsx et reportWebVitals.ts).
  • Rapport généré avec Codecov et intégré dans le pipeline CI/CD.

Pipeline CI/CD

  1. GitHub Actions :

    • Workflow automatisé exécutant :
      • Tests unitaires (UT).
      • Tests d'intégration (IT).
      • Rapport de couverture.
    • Déploiement conditionné au succès des tests.
  2. Déploiement :

    • GitHub Pages : Le projet est automatiquement déployé après validation.
    • npm : Les tests doivent réussir avant tout déploiement.