Apidae Switcher

Un ensemble de liens vers les différentes applications de l'éco-système Apidae, packagé sous la forme d'un composant React.

Fonctionnement

Le switcher est un composant React qui liste les liens vers les applications de l'écosystème Apidae.

Config

Pour que les URLs s'adaptent à l'environnement, il y a 2 méthodes :

1. Automatique

• Par défaut, si rien n'est forcé, le switcher détectera à partir de l'extension du domaine de la page actuel les URLs.

2. Forcé

• Si le switcher est utilisé en mode "bundle". Il suffit de préciser l'environnement voulu via l'attribut "data-env", exemple : data-env="prod".
• Si le switcher est utilisé en mode "composant react". Il suffit de préciser l'environnement voulu via le prop "env", exemple : <ApidaeSwitcher height={50} align={'left'} env={'prod'} />

Les valeurs autorisées sont : prod, cooking, dev.

Environnement technique

Le switcher est basé sur le framework JS React, puis packagé via Vite sous la forme de module ES et UMD. Les dépendances notables du package sont les suivantes :

• fluentui pour le design system de la plateforme

Développement

Editeur

Il est fortement recommandé d'avoir les plugins prettier et eslint d'installés sur son IDE pour faciliter le developpement.

Mise en place de l'environnement de développement

Installation des dépendances du projet via :

npm install

Pour lancer en local

npm run dev

Styles et pictos

Le composant embarque tous les styles et assets en JS, afin de ne pas dépendre de ressources externes (en dehors de la police Poppins).

La gestion des styles est effectuée en JS :

• Pour les styles spécifiques aux composants, le code utilise la librairie Griffel pour la génération de CSS-in-JS, comme préconisé par le framework Fluent UI

De même, les pictos proviennent du framework FluenUI :

• Pictos inclus dans le framework FluentUI

Déploiement sur npm

Si c'est une nouvelle version il faut préalablement de rendre dans le package.json et incrémenter la version. Ce déploimeent est nécessaire pour plateforme qui utilise la dépéndance npm pour afficher le switcher.

npm i
npm run build
npm publish

Process de livraison CI (actuel)

Le processus de livraison est piloté par une GitHub Release (event published).

1) Création de release GitHub

• Tu crées une release avec un tag de version (ex: v0.1.48 ou v0.1.48-rc-1).
• Ce tag devient la source de vérité pour la version livrée.

2) Livraison S3 (standalone)

• La CI construit le switcher en mode standalone (build-standalone).
• Le livrable S3 est un fichier unique : apidae-switcher.js.
• Le fichier est publié dans le bucket de builds sous un dossier versionné par le tag :
  • s3://builds-switcher.apidae-tourisme.com/<tag>/apidae-switcher.js

Ensuite, le workflow de déploiement manuel (Deploy to Environment) permet de copier une version donnée vers :

• s3://switcher.apidae-tourisme.com/ (prod)
• s3://switcher.apidae-tourisme.dev/ (preprod)
• s3://switcher.apidae-tourisme.cooking/ (cooking)

3) Publication npm

• La CI aligne automatiquement la version du package sur le tag de release (sans créer de tag git local).
• Puis publie sur npm avec la règle suivante :
  • tag contenant -rc- -> publication npm sur le dist-tag rc
  • sinon -> publication npm sur le dist-tag latest

4) Mise à jour automatique du repo

• Lors de la publication npm, la CI met à jour package.json et package-lock.json avec la version de la release.
• Un commit automatique est poussé sur la branche par défaut.