Suivre l'état

React intègre des hooks tels que useState pour gérer l'état. C'est souvent suffisant. Cependant, dans notre cas, les choses sont un peu plus compliquées. Prenons un moment pour évoquer la façon dont Storybook est architecturé.

Les bases de l'architecture de Storybook

Vu de l'extérieur, Storybook présente une interface utilisateur dans son ensemble. Cette interface est en fait composée de deux segments qui communiquent grâce à un canal de communication:

• Un Manager: l'interface utilisateur où sont rendues la recherche, la navigation, les barres d'outils et les addons de Storybook.
• La Prévisualisation: une iframe où sont rendues les stories.

Nous devons suivre l'état actif/inactif et nous devons également partager cet état entre le Manager et la Prévisualisation. Par conséquent, plutôt que d'utiliser le hook useState, nous allons utiliser useGlobals mis à disposition par @storybook/api.

Suivre l'état global

Les globales représentent le contexte “global” (comprenez ici indépendant des stories) de Storybook. C'est une façon pratique de partager des informations entre différentes stories, différents addons et décorateurs. Le hook useGlobals vous permet d'accéder à ce contexte depuis l'addon que vous êtes en train de créer.

L'Addon Kit pré-configure Tool pour utiliser les globales. Renommons la globale pour retranscrire avec plus de précision ce qu'elle fait. La fonction toggleOutline permet à l'utilisateur d'activer ou de désactiver l'addon Outline 👉🏽🔘

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 [{ outlineActive }, updateGlobals] = useGlobals();

+  const toggleOutline = useCallback(
    () =>
      updateGlobals({
+        outlineActive: !outlineActive,
      }),
+    [outlineActive]
  );

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