@acton-technology/angular-dsfr
v18.1.1
Published
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](https://gitlab.mim-libre.fr/men/transverse/dsmen) mais y ajoute une surcouche notamment pour les
Downloads
162
Readme
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
npm 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 :
...
"styles": [
...
"./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.css",
"./node_modules/@gouvfr/dsfr/dist/utility/utility.css"
],
"scripts": [
...
"./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.module.js"
]
...
Ceci appliquera le style DSFR aux composants.
Il sera ensuite possible d'importer les modules dédiés dans la fichier app.module.ts
:
import { DsfrButtonModule, ... } from "@edugouvfr/ngx-dsfr";
import { 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 :
npm run build-dev
Ensuite, on peut lancer la démo avec :
npm 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 :
schematics 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é avecdsfr-
.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épertoiresrc/lib
de la librairie) où le composant sera créé. Par défaut, il sera créé dans le répertoiresrc/lib
.
À noter que le schematic
parcourra les répertoire pour mettre à jour les fichiers index.ts
ainsi que public-api.ts
.