Carbon Components Angular : une implémentation Angular du Carbon Design System
Une implémentation angulaire du Carbon Design System pour IBM. Nous pouvons maintenant exécuter npm start et commencer à créer notre application !
En bref
- De quoi s’agit-il ?
- Analyse en français de carbon-design-system/carbon-components-angular : fonctionnement, usage documenté et limites visibles dans le dépôt.
- À qui s’adresse-t-il ?
- Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet.
- Puis-je l’utiliser commercialement ?
- Oui. Apache-2.0 est une licence permissive : vous pouvez utiliser, modifier et vendre un logiciel qui en dépend, à condition de conserver les mentions de droit d’auteur et de licence.
- Est-il encore maintenu ?
- Oui. Les derniers commits datent d’il y a 5 jours.
- En quel langage est-il écrit ?
- Principalement TypeScript, d’après les statistiques de langage de GitHub.
Ces réponses reposent sur les données GitHub du projet (dernière synchronisation le 14 septembre 2026) et sur notre analyse. Elles ne constituent pas un avis juridique.
ANALYSE OPEN SOURCE APPROFONDIE
Vue d'ensemble du projet
Carbon Components Angular est un projet open source écrit en TypeScript qui fournit une implémentation Angular du Carbon Design System. Selon les métadonnées du dépôt, la description du projet est « An Angular implementation of the Carbon Design System for IBM. » Il compte actuellement 564 étoiles, 319 forks et 231 problèmes ouverts, avec la branche par défaut master. La page d'accueil du projet est https://angular.carbondesignsystem.com, indiquant son rôle d'implémentation orientée Angular dans l'écosystème Carbon.
Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet. Les résultats observés dans une application réelle ne doivent pas être extrapolés aux versions absentes de cette matrice. Dans la section « Vue d'ensemble du projet », ce contrôle porte sur le point décrit et non sur une capacité générale.
Démarrage rapide
Le README recommande de démarrer avec un nouveau projet @angular/cli utilisant SCSS. Tout d'abord, exécutez `npx @angular/cli new my-project --style=scss`, puis accédez au répertoire du projet et installez trois packages : `carbon-components-angular`, `@carbon/styles` et `@carbon/icons`. Ensuite, incluez les styles Carbon dans `src/styles.scss` en utilisant `@use '@carbon/styles/scss/config' with (...)` pour définir `$use-flexbox-grid: true` et `$font-path: '@ibm/plex'`, suivi de `@use '@carbon/styles'` et de l'appel à `styles.theme(styles.$white)` sur l'élément html. Enfin, créez un fichier `module.d.ts` pour déclarer le module `@carbon/icons/*`.
Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet. Les résultats observés dans une application réelle ne doivent pas être extrapolés aux versions absentes de cette matrice. Dans la section « Démarrage rapide », ce contrôle porte sur le point décrit et non sur une capacité générale.
Matrice de versions et de support
Le README fournit deux matrices de support. La première montre la compatibilité entre les versions d'Angular et les versions majeures de Carbon Components Angular : v3 prend en charge Angular 6 à 8, v4 prend en charge Angular 7 à 15 (sauf 9), et v5 prend en charge Angular 14 à 21. La deuxième matrice définit le support communautaire et actif : v1 et v2 ne sont pas du tout pris en charge, v3 et v4 ont uniquement un support communautaire, et v5 est la version actuellement activement prise en charge. Le README déclare que le projet prévoit de supporter la dernière version et la version précédente, sans garantie au-delà.
Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet. Les résultats observés dans une application réelle ne doivent pas être extrapolés aux versions absentes de cette matrice. Dans la section « Matrice de versions et de support », ce contrôle porte sur le point décrit et non sur une capacité générale.
Directives de contribution
Les contributeurs commencent par forker le dépôt et le cloner localement, puis exécutent `npm install` et `npm run storybook` pour démarrer Storybook. Pour ajouter un composant, créez un dossier sous `src` contenant le code du composant, les styles, les tests et l'histoire, puis exportez le module depuis `index.ts`. Pour les corrections, mettez à jour la documentation et envisagez d'ajouter ou de modifier un cas de test. Avant de soumettre une PR, exécutez `npm test` et `npm run lint` pour vous assurer que les tests et le lint passent. Le README liste également des commandes npm telles que `npm run build` pour générer dist et `docs:build` pour construire la documentation.
Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet. Les résultats observés dans une application réelle ne doivent pas être extrapolés aux versions absentes de cette matrice. Dans la section « Directives de contribution », ce contrôle porte sur le point décrit et non sur une capacité générale.
Soumission de problèmes et style de code
Les directives sur les problèmes exigent un défaut par problème, avec un titre descriptif mentionnant le composant et la version. Le problème doit inclure les versions affectées, une description, les étapes pour reproduire, le comportement attendu et actuel, des captures d'écran si nécessaire et des extraits de code pertinents. L'ajout d'étiquettes comme bug, accessibility, design ou discussion est encouragé. Les contributeurs doivent suivre le guide de style Angular et se référer au guide de style et aux directives de l'API des composants dans le wiki du projet. Les employés d'IBM sont invités à compléter les étapes W3 Developer avant de contribuer à des projets open source.
Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet. Les résultats observés dans une application réelle ne doivent pas être extrapolés aux versions absentes de cette matrice. Dans la section « Soumission de problèmes et style de code », ce contrôle porte sur le point décrit et non sur une capacité générale.
Philosophie du projet
Le README énonce une philosophie claire : les composants devraient être la plus petite unité de calcul, avec des pages et des applications composées de nombreux composants. Les composants devraient déléguer au consommateur autant que possible, gardant les applications comme source unique de vérité. Les composants devraient faire une seule chose bien, éviter la sur-spécialisation et ne maintenir que l'état nécessaire, en privilégiant les composants sans état. Ils ne devraient pas nécessairement implémenter le guide de style point par point ; le guide fournit des fonctionnalités globales, et les composants devraient permettre des conceptions spécifiques au produit sans intégrer de fonctionnalités supplémentaires.
Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet. Les résultats observés dans une application réelle ne doivent pas être extrapolés aux versions absentes de cette matrice. Dans la section « Philosophie du projet », ce contrôle porte sur le point décrit et non sur une capacité générale.
Licence et télémétrie
Le projet est sous licence Apache-2.0, qui accorde aux utilisateurs le droit de reproduire, modifier, distribuer et sous-licencier l'œuvre, y compris les licences de droit d'auteur et de brevet. Le texte de licence couvre les définitions, les contributions et les conditions de distribution mais ne traite pas du support, de la sécurité ou de la garantie ; ceux-ci sont hors de portée de la licence. De plus, le README note que le package utilise IBM Telemetry pour collecter des données de métriques dé-identifiées et anonymisées, et que l'installation implique un consentement, avec une option de désinscription via la documentation fournie.
Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet. Les résultats observés dans une application réelle ne doivent pas être extrapolés aux versions absentes de cette matrice. Dans la section « Licence et télémétrie », ce contrôle porte sur le point décrit et non sur une capacité générale.
Conclusion éditoriale
Le contrôle doit partir de la matrice de versions de `carbon-components-angular`, puis installer la combinaison Angular et Carbon indiquée. Il faut tester un composant avec ses styles, ses directives et son comportement clavier, en consultant le Storybook du projet. Les résultats observés dans une application réelle ne doivent pas être extrapolés aux versions absentes de cette matrice. Cette conclusion concerne carbon-components-angular et ses fichiers ou commandes documentés.
Notes de la communauté