Apidae-switcher NPM

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.

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

Build du package NPM (penser à incrémenter le numéro de version) :

npm build

Publication du package NPM :

npm publish

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 :