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>
);
};