Nous parlons de Storybook car c'est le terme généralement employé, mais nous utilisons Histoire.
Nous avons fait ce choix car au moment de la création de notre repo, Storybook n'était pas compatible Svelte.
Lors de la release d'une nouvelle version de l'UI Kit, le Storybook des composants est déployé sur Github Pages : https://betagouv.github.io/lab-anssi-ui-kit/.
Cette librairie a pour objectif de produire des composants Svelte et leurs équivalents WebComponent.
L'architecture pour produire du Svelte utilise SvelteKit, configuré via le wizard npx sv create.
C'est ce qui explique les nombreux fichiers de configuration Svelte (Prettier, Vitest, etc.) : ils ont été rajoutés par le wizard.
Pour rajouter le build des WebComponents, on rajoute manuellement un fichier de configuration vite.webcomponents.config.ts et des appels à la commande vite -c vite.webcomponents.config.ts build lors des étapes de build du package.
Résultat : dans le repertoire dist/ on retrouvera les composants Svelte et leurs équivalents Webcomponents.
Tout le contenu de dist/ est publié via npm publish.
La commande principale pour le développement en local est npm run story:dev.
La sortie devrait ressembler à :
$ npm run story:dev
@lab-anssi/[email protected] story:dev
HISTOIRE_ENV=development histoire dev
Re-optimizing dependencies because lockfile has changed
Using 5 threads for story collection
Collect stories start all
➜ Local: http://localhost:6006/
➜ Network: use --host to exposeAprès cette commande, le Storybook local est disponible sur http://localhost:6006/.
Il devrait ressembler au Storybook disponible en ligne.