Comment créer une bibliothèque de composants dans Next avec Storybook / Blogs / Perficient

Créer une bibliothèque de composants dans Next.js avec Storybook implique de créer des composants d’interface utilisateur réutilisables dans Next.js et d’utiliser Storybook pour les visualiser et les documenter. Voici un guide étape par étape sur la façon de configurer une bibliothèque de composants dans Next.js et de l’intégrer à Storybook :

1) Configurer un projet Next.js

Si vous n’avez pas encore de projet Next.js, vous pouvez en créer un :

npx create-next-app@latest my-component-library

cd my-component-library

Cela créera un projet Next.js de base avec les paramètres par défaut.

2) Installer le livre d’histoires

Installez Storybook et ses dépendances sur votre projet Next.js :

npx sb init

Cela installera et configurera automatiquement Storybook pour vous, y compris les dépendances requises. Une fois l’installation terminée, vous verrez un dossier de livre d’histoires créé dans votre projet.

3) Configurer Storybook pour React

Storybook est préconfiguré pour React, aucune configuration supplémentaire ne devrait donc être requise au-delà de l’installation initiale. Vous souhaiterez peut-être installer des dépendances supplémentaires pour gérer les actifs tels que les images ou CSS.

Installer les dépendances :

npm install --save @storybook/react

4) Créer des composants

Vous pouvez maintenant commencer à créer des composants d’interface utilisateur réutilisables. Dans le projet, vous pouvez créer un dossier de composants pour stocker tous vos composants.

Par exemple:

Créez un simple composant de bouton Button.js dans le dossier des composants :

// components/Button.js
export default function Button({ children, onClick }) {
    return (
      <button onClick={onClick} className="btn">
        {children}
      </button>
    );
}

5) Créer des histoires de livre de contes pour les composants

Maintenant, vous devez créer un fichier Storybook pour chaque composant. Les livres d’histoires utilisent des histoires pour montrer le fonctionnement de chaque composant.

Dans le dossier storybook, créez un fichier pour l’histoire du composant Button.

Par exemple:

// stories/Button.stories.js
import Button from '../components/Button';
export default {
  title: 'Button',
  component: Button,
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
  children: 'Click Me',
  onClick: () => alert('Button clicked!'),
};

Cela indiquera à Storybook comment restituer le composant Button avec différents états.

6) Démarrer le livre d’histoires

Après avoir créé votre composant et vos histoires, vous pouvez démarrer Storybook :

npm run storybook

Cela exécutera Storybook en mode développement et vous pourrez l’ouvrir dans votre navigateur à l’adresse http://localhost:6006.

7) Personnaliser la configuration du livre d’histoires (facultatif)

Storybook a une configuration par défaut, mais vous pouvez la personnaliser davantage dans le dossier Storybook. Par exemple, vous pouvez modifier le thème Storybook, ajouter des modules complémentaires (tels que des contrôles ou des boutons d’accessibilité) ou configurer Webpack pour une utilisation avancée.

Exemple : ajout de @storybook/addon-knobs

Pour rendre vos histoires interactives, vous pouvez installer l’addon Knobs :

npm install @storybook/addon-knobs --save-dev

Ensuite, ajoutez-le à votre fichier .storybook/main.js :

8) Partagez votre bibliothèque de composants

Une fois votre bibliothèque de composants prête, vous pouvez la partager de plusieurs manières :

• Package en tant que package NPM: Vous pouvez empaqueter la bibliothèque et la publier sur npm afin que d’autres développeurs puissent l’installer et l’utiliser.
• Utilisez-le dans d’autres projets: Vous pouvez importer la bibliothèque de composants depuis votre Next.js ou d’autres projets React à l’aide d’importations relatives ou la publier dans un registre privé.

9) Configurer éventuellement le déploiement de Storybook

Pour partager l’aperçu de Storybook, vous pouvez le déployer à l’aide de services tels que Vercel, Netlify ou [GitHub Pages].

Par exemple, pour déployer Storybook sur Vercel, vous pouvez suivre ces étapes :

1. Validez vos modifications sur GitHub.
2. Connectez votre référentiel à Vercel.
3. Vercel détectera automatiquement le projet et vous pourrez configurer la commande build comme :

npm run build && npm run export

Storybook sera déployé sur une URL en direct.

Résumé des étapes :

1. Configurer Next.js projet.
2. Installer le livre d’histoires avec npx sb init.
3. Créer des composants réutilisables comme un bouton, etc.
4. Créer des histoires de livre de contes pour visualiser les composants.
5. Exécuter un livre d’histoires avec npm run storybook.
6. Déployer Storybook (facultatif) à partager avec les autres.

En suivant ces étapes, vous disposerez d’une bibliothèque de composants intégrée à Storybook, vous aidant à visualiser et à maintenir efficacement les composants de l’interface utilisateur.