Comment créer un thème et publier

Faites passer votre bibliothèque de composants angulaires au niveau supérieur : publiez-la sur npm et proposez des options de thème.

Dans un article précédent, nous avons montré comment créer un Bibliothèque angulaire qui fournit un composant bouton. Nous l’avons construit et consommé localement, mais dans le monde réel, une bibliothèque doit être accessible et facile à installer, et fournir un moyen simple d’ajouter des thèmes avec des couleurs (comme une bibliothèque professionnelle). Aujourd’hui, nous faisons un pas en avant avec notre bibliothèque en proposant des thèmes et en les publiant sur npm.

Au cours du processus d’ajout du support de thème à notre bibliothèque, nous apprendrons comment y parvenir à l’aide de variables CSS. Les variables CSS nous permettent de styliser les éléments HTML en fonction de leurs attributs dans notre bibliothèque, de les exporter de la bibliothèque pour les utiliser dans les applications et de les publier sur npm.

Pour faciliter le processus d’apprentissage, introduisons un scénario qui reflète les défis du monde réel.

Le scénario

Dans le post précédent, nous avons créé la bibliothèque ngx-banane-ui et l’a expérimenté dans une application bancaire. Cependant, notre société a maintenant une excellente opportunité de créer une nouvelle application pour vendre des produits liés à la banane (appelons-la le Banana Bazaar), et elle souhaite utiliser notre bibliothèque ngx-banana-ui. C’est fantastique car cela fait gagner du temps et accélère la progression de l’équipe. Cependant, deux nouveaux défis se posent :

• L’équipe travaille à distance et souhaite installer la bibliothèque facilement, tout comme avec npm.
• Ce serait bien de permettre la personnalisation des couleurs via des remplacements. Les boutons doivent changer de couleur selon les saisons, reflétant les couleurs vibrantes de l’été et les brises rafraîchissantes du printemps.

Qu’est-ce qu’un thème et comment ça marche ?

Un thème est un ensemble prédéfini de styles et d’éléments de conception qui créent une apparence visuelle cohérente. Il englobe les schémas de couleurs, la typographie, les mises en page, les graphiques et les animations. Les thèmes rendent les sites Web visuellement attrayants, conviviaux et facilement personnalisables en mettant à jour les règles CSS.

Il existe plusieurs façons de créer un thème, mais l’une des approches les plus courantes consiste à exploiter la puissance des variables CSS pour modifier les couleurs et les styles des composants.

Variables CSS

Les propriétés personnalisées CSS, ou variables CSS, sont un moyen de stocker des valeurs réutilisables dans des feuilles de style. Ils nous permettent de déclarer une variable en utilisant la syntaxe --variable-name: value;. Les variables CSS nous aident à maintenir et modifier facilement le code CSS. Pour utiliser une variable, on la référence avec var(--variable-name) dans les règles CSS, ce qui simplifie les mises à jour et la maintenance.

Illustrons cela avec un exemple. Tout d’abord, nous déclarons les variables dans le :root pseudo-class:

:root {
  --primary-color: #3498db;
  --text-color: #333;
}

Remarque : vous pouvez les regrouper dans n’importe quelle classe de votre choix, mais les classes génériques globales sont préférables. :root est couramment utilisé pour les variables globales et permet des remplacements avec des sélecteurs plus spécifiques.

Ensuite, nous utilisons ces variables dans nos règles CSS :

body {
  color: var(--text-color);
}

a {
  color: var(--primary-color);
}

Nous pouvons mettre à jour le thème en modifiant les valeurs des variables dans le :root selectorpermettant une personnalisation et une maintenabilité faciles du thème.

Maintenant que nous avons une compréhension de base des variables CSS, ajoutons la prise en charge des thèmes à la bibliothèque ngx-banana et utilisons certaines propriétés personnalisées CSS !

En savoir plus sur Variables CSS.

Créer un thème

Cloner le ngx-banane-ui projet de bibliothèque et ouvrez-le dans votre éditeur préféré. Dans le répertoire lib, créez un nouveau répertoire appelé theme et ajoutez un nouveau fichier nommé theme.scss.

Ensuite, déclarez les variables --banana-btn-bg-color et --banana-btn-color dans le :root scope:

:root {
  --banana-btn-bg-color: rgb(55, 114, 222);
  --banana-btn-color: rgb(134, 206, 33);
}

Nous mettrons à jour ces variables à l’aide d’un sélecteur qui correspond à chaque thème saisonnier. Créez des sélecteurs avec l’attribut data-theme pour les thèmes « été » et « printemps » :

banana-button[data-theme="summer"]  {
  --banana-btn-bg-color: rgb(222, 24, 114);
  --banana-btn-color: rgb(143, 218, 43);
}

banana-button[data-theme="spring"] {
  --banana-btn-bg-color: rgb(199, 206, 57);
  --banana-btn-color: rgb(179, 29, 225);
}

Nous voulons que ces variables affectent les propriétés d’arrière-plan et de couleur de la classe de bouton :

.button {
  box-sizing: border-box;
  display: inline-block;
  border: 0;
  border-radius: 10px;
  padding: 15px;
  min-height: 30px;
  min-width: 120px;
  opacity: 0.8;
  background-color: var(--banana-btn-bg-color);
  color: var(--banana-btn-color);
  cursor: pointer;
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
  transition: opacity 0.3s ease;
}

.button:hover {
  opacity: 1;
}

Avant de créer et de publier, nous devons mettre à jour le ng-package.json pour exporter le nouveau fichier de thème.

Qu’est-ce que nous faisons ?

Le composant bouton de notre bibliothèque utilise des variables CSS avec des couleurs prédéfinies, mais lorsque le composant correspond au sélecteur de thème de données, il prend les couleurs à partir de là. Nous avons besoin d’une dernière étape pour commencer à jouer avec notre bibliothèque et à la publier sur npm.

En savoir plus sur Sélecteurs CSS et Attributs des données.

Construire et publier sur npm

Nous sommes maintenant dans la phase finale de la mise en œuvre du thème. Dans cette partie, nous allons construire et publier notre bibliothèque sur npm. Suivez les étapes ci-dessous :

Accédez au répertoire de la bibliothèque et exécutez la commande npm run build ngx-banana-ui.

Si vous le souhaitez, mettez à jour le fichier package.json pour fournir des informations supplémentaires sur la bibliothèque, telles que l’auteur et le référentiel.

La bibliothèque a été créée, l’étape suivante consiste donc à publier la version à partir du répertoire dist. Remplacez votre répertoire actuel par le dist/my-library annuaire:

cd dist/
npm run build ngx-banana-ui

Pour publier la bibliothèque, créez un compte utilisateur sur npm si vous n’en avez pas déjà un. Vous pouvez vous inscrire sur le site du npm. Après avoir créé un compte, connectez-vous à l’aide de la commande suivante :

npm login
Username: danywalls
Password:
Email: (this IS public) youremail@gmail.com
npm notice Please use the one-time password (OTP) from your authenticator application
Enter one-time password: OTPToke
Logged in as danywalls on https://registry.npmjs.org/.

Une fois connecté, vous pouvez publier. Aller à ngx-banana-ui répertoire votre bibliothèque et exécutez la commande npm publish.

En savoir plus sur package de publication.

Toutes nos félicitations! Vous avez maintenant votre bibliothèque prête à être utilisée dans vos projets, et elle est publiée dans le référentiel npm.

Utiliser la bibliothèque Banana

Maintenant que notre bibliothèque est disponible sur le référentiel npm, il sera facile pour nos coéquipiers distants de l’utiliser dans notre application Angular.

Tout d’abord, créons le projet à l’aide de la CLI Angular :

ng new banana-store

Ensuite, accédez au banana-store répertoire et installez la bibliothèque :

cd banana-store
npm i ngx-banana-ui

Une fois la bibliothèque installée, ouvrez le projet et importez la bibliothèque dans le app.module.ts déposer.

Une fois le module importé, vous pouvez désormais utiliser notre composant bouton. Supprimez le balisage HTML par défaut généré par Angular et ajoutez le code suivant à votre fichier modèle app.component.html:

<banana-button label="Buy Now"></banana-button>
<banana-button data-theme="spring" label="Fresh Banana in Spring, Buy Now"></banana-button>
<banana-button data-theme="summer" label="Buy Now It's Summer Time!"></banana-button>

Ensuite, importez les styles dans votre fichier de styles globaux (par exemple, styles.scss) :

@import '../node_modules/ngx-banana-ui/src/lib/theme/theme.scss';

Enregistrez le fichier et rechargez votre application.

Désormais, lorsque vous affichez votre application, vous devriez voir les boutons affichés avec les étiquettes et les thèmes appropriés.

Remplacer le thème par défaut

Si vous souhaitez utiliser vos propres couleurs pour un thème spécifique, par exemple pour rendre le thème « printemps » plus dynamique, vous pouvez remplacer les variables. Allons-y et faisons-le dans le fichier styles.scss.

Exemple:

:root {
  --banana-btn-bg-color: rgb(203, 39, 88);
  --banana-btn-color: rgb(20, 21, 20);
}


banana-button[data-theme="summer"]  {
  --banana-btn-bg-color: rgb(5, 80, 225);
  --banana-btn-color: rgb(218, 43, 69);
}

banana-button[data-theme="spring"] {
  --banana-btn-bg-color: rgb(59, 224, 224);
  --banana-btn-color: rgb(241, 237, 49);
}

Dans le fichier styles.scss, déclarez les variables CSS et mettez à jour le sélecteur pour chaque thème. Ces valeurs de couleur mises à jour remplaceront les couleurs par défaut des thèmes correspondants. N’hésitez pas à ajuster les valeurs RVB pour obtenir le look dynamique que vous désirez pour le thème « printemps ».

Prochaines étapes

Au cours de notre parcours, nous avons appris des concepts précieux tels que l’ajout de thèmes, la publication de notre bibliothèque sur npm, sa consommation dans des applications et sa personnalisation pour répondre à nos besoins spécifiques. Cependant, à mesure que les exigences de notre entreprise augmentent et que nous avons besoin d’un plus grand nombre de composants, la complexité augmente. Nous nous posons des questions importantes :

• Comment pouvons-nous personnaliser efficacement chaque composant pour l’aligner sur nos exigences uniques ?
• Quelle approche devrions-nous adopter pour étendre notre bibliothèque avec des composants supplémentaires ?
• Existe-t-il un moyen de publier différents ensembles de composants sous forme de packages distincts ?

Construire et maintenir une bibliothèque complète de composants n’est pas une mince affaire. Cela nécessite un investissement important de temps et de ressources de la part d’une équipe dédiée pour gérer le développement et la maintenance continue de chaque composant individuel.

Cependant, j’ai des nouvelles passionnantes pour vous. Il existe un moyen de dynamiser notre bibliothèque et de la faire passer au niveau supérieur en exploitant la puissance de Interface utilisateur Kendo pour angulaire.

Vous pouvez trouver l’exemple de code complet pour cet article :

Restez à l’écoute pour le prochain article dans lequel nous explorerons comment Kendo UI peut vous faire gagner beaucoup de temps et d’efforts. 🙂