Bibliothèque de composants UI nosgestesclimat

[laem]

Il faut qu'on réfléchisse à la possibilité d'exporter l'UI de simulation comme des composants par exemple npmjs.com.

La réutilisatrice pourrait alors intégrer par exemple le composant suivant :

// Dans la base de code nosgestesclimat-site

const SimulationBlock  = ({customEnd, customChart, customCategories, themeColor})=>
<div>
   <SessionBar />
			<Simulation
				noFeedback
themeColor={themeColor}
				orderByCategories={customCategories || categories}
				customEnd={
					customEnd
				}
				explanations={
					<>
						<customChart />
					</>
				}
			/>
			<ShareButton
				text="Mesure ton impact sur le simulateur Ecolab climat !"
				url={'https://' + window.location.hostname + props.match.url}
				title={rule.title}
			/>
			<BandeauContribuer />
</div>

De cette façon :

import SimulationBlock from 'nosgestesclimat-ui'
import AlmostNeverUsePieCharsPlease from './Chart'

export default ()=> <div>

<h1>Mon super simulateur climat 2</h1>
<SimulationBlock 
{...{themeColor: 'cyan', customChart: <AlmostNeverUsePieCharsPlease /> }}

/>
</div>

[laem]

L'autre option possible étant qu'on héberge dans notre dépôt des composants de personnalisation qui seraient déclenchés par un paramètre dans l'iframe.

Les contributeurs feraient donc des PR ici.

Via l'iframe, on pourrait donc :

• modifier la couleur dominante
• choisir un autre écran de fin
• exporter les données dans le site parent
• changer le logo
• passer en mode "propulsé par Nos Gestes Climat"

L'avantage, c'est que le travail fait pour ce mode d'iframe serait en grande partie à faire (sous une forme proche) pour l'export de composant.

[laem]

Je réfléchis au mode Composant. Quelques éléments :

• [ ] permettre d'inclure le CSS nécessaire, mais pas le nécessaire général qui modifierait l'apparence de l'application cliente (oui pour .ui__.button.plain mais pas p {background: chartreuse})
• [ ] exporter un composant via Webpack sur NPM. Possibilité d'utiliser github dans 1 premier temps pour les tests ?
• [ ] peut-il y avoir conflit de librairies ? Version de react, version de styled-components etc.
• [ ] que doit inclure notre export ? comment gérer le routeur ?

Pour le routeur, je crois que dans un premier temps on peut exposer un composant sans routing. Les liens doc devraient donc rediriger vers NGC.fr. Il doit inclure le système de state redux. Aucune des pages "meta". Désactiver le tracking matomo.

• [ ] plein d'autres choses à faire au fur et à mesure de l'implé.

En conclusion j'ai bien peur que proposer un composant nous demande un travail substantiellement plus important que l'adaptation de l'iframe. Au moins 2 jours complets, plus probablement 4.