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é.
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:
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
.
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>
);
};