Librairie Angular DSFR

Cette librairie a pour vocation d'encapsuler un ensemble de composant DSFR. Elle se base sur le travail de https://gitlab.mim-libre.fr/men/transverse/dsmen mais y ajoute une surcouche notamment pour les composants de formulaire.

L'idée est non seulement d'encapsuler le style, l'accessibilité, mais aussi la logique de validation, de gestion des erreurs et de gestion des messages d'erreur. Ainsi, on peut se concentrer sur le métier et non sur la technique.

Documentation

Un sommaire de la documentation est disponible ici.

Configuration dans un nouveau projet

Installation

1npm i @acton-technology/angular-dsfr

Ceci installera les composants de la librairie de base, mais aussi les surcharges AOT.

Configuration

Il faut ensuite configurer Angular pour que ce dernier utilise les styles et scripts DSFR natifs.

Dans le fichier angular.json, dans le chemin projects.<nom-du-projet>.architect.build.options, ajouter les lignes suivantes :

1    ...
2    "styles": [
3      ...
4      "./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.css",
5      "./node_modules/@gouvfr/dsfr/dist/utility/utility.css"
6    ],
7    "scripts": [
8      ...
9      "./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.module.js"
10    ]
11    ...

Ceci appliquera le style DSFR aux composants.

Il sera ensuite possible d'importer les modules dédiés dans la fichier app.module.ts :

1import { DsfrButtonModule, ... } from "@edugouvfr/ngx-dsfr";
2import { DsfrFormInputModule, ... } from '@acton-technology/angular-dsfr';

Pour bien utiliser les surcharges, penser à vérifier que l'import soit bien @acton-technology/angular-dsfr.

Environnement de développement

Prérequis

Avant de commencer à développer, il faut faire un lien symbolique entre le README du projet et le README de la librairie (pour que celui soit disponible dans le package publié).

Commandes

Il existe un environnement de développement afin d'afficher les composants et leur utilisation.

Pour builder la librairie en continu, lancer la commande suivante :

1npm run build-dev

Ensuite, on peut lancer la démo avec :

1npm run start

Faire attention à ne pas commit des tests dans demo-app au risque de polluer la démo.

Utilisation des schematics

Un schematic a été mis en place pour simplifier la création de composant dans la librairie. Il est utilisable avec la commande suivante :

1schematics custom-component:custom-component --name=my-component --description="Description du composant" --path=my/path

• name (requis) est le nom du composant à créer. Il sera automatiquement préfixé avec dsfr-.
• description (requis) est la description du composant à créer. L'idéal est de suivre le nom dans la navigation des composants DSFR dans la documentation officielle.
• path (optionnel) est le chemin relatif (à partir du répertoire src/lib de la librairie) où le composant sera créé. Par défaut, il sera créé dans le répertoire src/lib.

À noter que le schematic parcourra les répertoire pour mettre à jour les fichiers index.ts ainsi que public-api.ts.

Troubleshooting

• Erreur : angular Ivy full compilation mode.node_modules/@types/node/module.d.ts: Overload signatures must all be optional or required. Dans ce cas, vérifier que la dépendance à @types/node dans le package.json soit adéquate à la version de node utilisée.