Create an Addon
  • Présentation
  • Avant de commencer
  • Enregistrer l'addon
  • Suivre l'état
  • Décorateurs
  • Preset
  • Ajouter au catalogue
  • Conclusion
Framework:
React

Enregistrer l'addon

Créer l'UI de l'addon et l'enregistrer dans Storybook

Commençons par le fichier src/Tool.js. C'est dans ce fichier que se trouvera tout le code de l'UI pour l'outil Outline. Notez l'import de @storybook/components. Il s'agit de la bibliothèque de composants de Storybook, créée avec React et Emotion. Elle sert à construire, eh bien, Storybook lui-même (démo). Nous pouvons également l'utiliser pour créer notre addon.

Dans notre cas, nous utiliserons les composants Icons et IconButton pour créer le bouton de notre outil de contour. Modifiez votre code afin d'utiliser l'icône outline et donnez au bouton un nom approprié.

src/Tool.js
import React, { useCallback } from 'react';
import { useGlobals } from '@storybook/api';
import { Icons, IconButton } from '@storybook/components';
import { TOOL_ID } from './constants';

export const Tool = () => {
  const [{ myAddon }, updateGlobals] = useGlobals();

  const toggleMyTool = useCallback(
    () =>
      updateGlobals({
        myAddon: !myAddon,
      }),
    [myAddon]
  );

  return (
    <IconButton
      key={TOOL_ID}
      active={myAddon}
      title="Appliquer des contours à la prévisualisation"
      onClick={toggleMyTool}
    >
      <Icons icon="outline" />
    </IconButton>
  );
};

Passons maintenant au manager. C'est ici que nous enregistrons l'addon dans Storybook en utilisant une constante ADDON_ID unique. Nous enregistrons également l'outil à l'aide d'un identifiant unique défini par la constante TOOL_ID. Je recommande quelque chose comme storybook/mon-addon. L'Addon Kit inclut également des exemples pour ajouter un onglet et un panneau. L'addon Outline ne mettant à disposition qu'un outil, nous pouvons supprimer le reste.

src/preset/manager.js
import { addons, types } from '@storybook/addons';

import { ADDON_ID, TOOL_ID } from '../constants';
import { Tool } from '../Tool';

// Enregistrement de l'addon
addons.register(ADDON_ID, () => {
  // Enregistrement de l'outil
  addons.add(TOOL_ID, {
    type: types.TOOL,
    title: 'Mon addon',
    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
    render: Tool,
  });
});

Notez la présence d'une propriété match. Elle vous permet de contrôler dans quel mode de visualisation l'addon sera actif. Dans notre cas, l'addon sera disponible dans le mode story et le mode docs.

À ce stade, vous devriez voir l'outil de contour apparaître dans la barre d'outils 🎉

Activer l'outil de contour

Keep your code in sync with this chapter. View 5db9bc9 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Suivre l'état
Gérer l'état de l'addon entre le Manager et la Prévisualisation
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify