@lab-anssi/ui-kit 1.23.2 → 1.25.0

package/README.md

@@ -13,42 +13,79 @@
 
 ---
 
-## Storybook des composants
+## Introduction
 
-> Nous parlons de _Storybook_ car c'est le terme généralement employé, mais nous utilisons [Histoire](https://histoire.dev/).  
-> Nous avons fait ce choix car au moment de la création de notre repo, Storybook n'était pas compatible Svelte.
+Le **UI Kit du Lab. ANSSI** est une bibliothèque de composants **Svelte**, pensée pour accélérer la création d’interfaces cohérentes et accessibles au sein des divers [produits du **Lab ANSSI**](https://beta.gouv.fr/incubateurs/lab-innov-anssi.html).
 
-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/](https://betagouv.github.io/lab-anssi-ui-kit/).
+Cette bibliothèque propose à la fois des composants **Svelte** et leurs équivalents **WebComponents**, facilitant leur intégration dans différents environnements front-end.
 
-## Architecture de build
+Le projet s’appuie sur des outils modernes tels que SvelteKit, Vite, Storybook et Vitest pour garantir une expérience de développement fluide, des tests robustes et une documentation interactive.
 
-Cette librairie a pour objectif de produire des composants Svelte et leurs équivalents [WebComponent](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
+## Pour commencer
 
-L'architecture pour produire du Svelte utilise [SvelteKit](https://svelte.dev/docs/kit/packaging), 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.
+### Prérequis
 
-Pour rajouter le build des WebComponents, on rajoute manuellement un fichier de configuration [`vite.webcomponents.config.ts`](./vite.webcomponents.config.ts) et des appels à la commande `vite -c vite.webcomponents.config.ts build` lors des étapes de build du package.
+- Node.js (version recommandée : >= 24)
+- Svelte (version recommandée : >= 5.37.3)
+- Vite (version recommandée : >= 7.0.6)
+- Storybook (version recommandée : >= 9.1.1)
+- npm
 
-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`.
+### Développement en local
 
-## Développement en local
+Clonez le dépôt puis installez les dépendances :
 
-La commande principale pour le développement en local est `npm run story:dev`.  
-La sortie devrait ressembler à :
+```bash
+git clone https://github.com/betagouv/lab-anssi-ui-kit.git
+cd lab-anssi-ui-kit
+npm install
+```
+
+### Documentation interactive
+
+Storybook est intégré à ce dépôt afin de fournir des exemples d’utilisation, la liste des props et des cas d’usage pour chaque composant.<br/>
+Les stories sont regroupées dans le dossier `stories/` et sont écrites en respectant [le format CSF](https://storybook.js.org/docs/writing-stories#component-story-format) de Storybook.
+
+Pour explorer et tester les composants en local, lancez Storybook à l'aide de la commande :
+
+```bash
+npm run storybook:dev
+```
+
+Suite à l'exécution de cette commande, Storybook se lancera automatiquement en ouvrant une fenêtre de votre navigateur par défaut vers l'url [http://localhost:6006](http://localhost:6006).
+
+> [!NOTE]
+> Le Storybook est également déployé en ligne sur GitHub Pages et est consultable à l'url suivante : [https://betagouv.github.io/lab-anssi-ui-kit/](https://betagouv.github.io/lab-anssi-ui-kit/)
 
-```shell
+## Usage
 
-$ npm run story:dev
+L'intégralité des composants présents dans ce dépôts sont publiés sur NPM afin qu'ils puissent être consommés dans différents environnements front-end.<br/>
+La bibliothèque expose ses composants dans un dossier `dist/` qui est construit à l'aide de la commande `npm run build`.
 
-@lab-anssi/ui-kit@1.19.0 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 expose
+Ainsi, pour pouvoir consommer les éléments de cette librairie dans votre projet, vous devrez commencer par installer le package à l'aide de cette commande :
+
+```bash
+npm i --save-dev @lab-anssi/ui-kit@latest
 ```
 
-Après cette commande, le Storybook local est disponible sur http://localhost:6006/.  
-Il devrait ressembler [au Storybook disponible en ligne](https://betagouv.github.io/lab-anssi-ui-kit/).
+Vous pouvez ensuite importer les composants dans vos projets **Svelte** ou utiliser les **WebComponents** générés dans n’importe quelle application web.
+
+### Exemple d’import Svelte
+
+```ts
+import { Alerte, CentreAide, ResumePssi } from "@lab-anssi/ui-kit";
+```
+
+### Exemple d'utilisation des WebComponents
+
+Les **WebComponents** sont disponibles dans le dossier `dist/webcomponents` et peuvent être intégrés dans n’importe quel projet HTML/JS en commençant par importer la librairie WebComponents à l'aide du script suivant :
+
+```html
+<script src="https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/1.23.2/lab-anssi-ui-kit.iife.js"></script>
+```
+
+Une fois cet import effectué, les WebComponents sont prêts à être consommés dans votre projet :
+
+```html
+<lab-anssi-centre-aide nom-service="MonService" liens="[...]"></lab-anssi-centre-aide>
+```

package/dist/Alerte.svelte

@@ -9,10 +9,8 @@
   }}
 />
 
-<script>export let description;
-export let type = "information";
-export let fermable = true;
-let estOuvert = true;
+<script lang="ts">let { description, type = "information", fermable = true } = $props();
+let estOuvert = $state(true);
 </script>
 
 {#if estOuvert}
@@ -23,7 +21,7 @@ let estOuvert = true;
       {#if fermable}
         <button
           class="fermer"
-          on:click={() => {
+          onclick={() => {
             estOuvert = false;
           }}
         ></button>

package/dist/Alerte.svelte.d.ts

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        description: string;
-        type?: "information" | "erreur";
-        fermable?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AlerteProps = typeof __propDef.props;
-export type AlerteEvents = typeof __propDef.events;
-export type AlerteSlots = typeof __propDef.slots;
-export default class Alerte extends SvelteComponent<AlerteProps, AlerteEvents, AlerteSlots> {
+interface Props {
+    description: string;
+    type?: "information" | "erreur";
+    fermable?: boolean;
 }
-export {};
+declare const Alerte: import("svelte").Component<Props, {}, "">;
+type Alerte = ReturnType<typeof Alerte>;
+export default Alerte;

package/dist/CentreAide.svelte

@@ -1,27 +1,27 @@
 <svelte:options customElement="lab-anssi-centre-aide" />
 
-<script>import { fly } from "svelte/transition";
+<script lang="ts">import { run } from "svelte/legacy";
+import { fly } from "svelte/transition";
 import { createEventDispatcher } from "svelte";
 import { srcAsset } from "./assets/assets";
-export let nomService;
-export let liens;
+let { nomService, liens } = $props();
 const emetEvenement = createEventDispatcher();
-let liensMisEnForme = [];
-$: {
+let liensMisEnForme = $state([]);
+run(() => {
   liensMisEnForme = JSON.parse(liens);
   if (!Array.isArray(liensMisEnForme) || liensMisEnForme.some((l) => !l.texte)) {
     throw new Error(
       "Les liens doivent respecter le type : { texte: string; href?: string; preventDefault?: boolean; id?: string }[]"
     );
   }
-}
-let ouvert = false;
+});
+let ouvert = $state(false);
 </script>
 
 {#if !ouvert}
   <button
     class="declencheur-centre-aide"
-    on:click={() => (ouvert = true)}
+    onclick={() => (ouvert = true)}
     transition:fly={{ y: 300 }}
   >
     <img src={srcAsset("/icones/centre-aide.svg")} alt="Icône du centre d'aide" />
@@ -40,7 +40,7 @@ let ouvert = false;
         />
         <h4>Centre d'aide</h4>
       </div>
-      <button on:click={() => (ouvert = false)}>
+      <button onclick={() => (ouvert = false)}>
         <span>Fermer</span>
         <img
           src={srcAsset("/icones/croix-blanche.svg")}
@@ -59,7 +59,7 @@ let ouvert = false;
             href={lien.href}
             target="_blank"
             id={lien.id}
-            on:click={(e) => {
+            onclick={(e) => {
               if (lien.preventDefault) e.preventDefault();
               emetEvenement("lienclique", { target: e.currentTarget });
             }}>{lien.texte}</a

package/dist/CentreAide.svelte.d.ts

@@ -1,23 +1,26 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        nomService: string;
-        liens: string;
-    };
-    events: {
-        lienclique: CustomEvent<{
-            target: EventTarget & HTMLAnchorElement;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+interface Props {
+    nomService: string;
+    liens: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CentreAideProps = typeof __propDef.props;
-export type CentreAideEvents = typeof __propDef.events;
-export type CentreAideSlots = typeof __propDef.slots;
-export default class CentreAide extends SvelteComponent<CentreAideProps, CentreAideEvents, CentreAideSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CentreAide: $$__sveltets_2_IsomorphicComponent<Props, {
+    lienclique: CustomEvent<{
+        target: EventTarget & HTMLAnchorElement;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type CentreAide = InstanceType<typeof CentreAide>;
+export default CentreAide;