Create an Addon
  • Introducción
  • Configuración
  • Registrar complemento
  • Seguimiento de Estado
  • Decoradores
  • Preajuste
  • Agregar al catálogo
  • Conclusión
Framework:
React

Seguimiento de Estado

Administra el estado del complemento en el Administrador y en la Vista Previa

React tiene hooks incorporados, como useState, para administrar el estado. Por lo general, esto sería suficiente. Sin embargo, en este caso las cosas son un poco más complicadas. Dediquemos un momento a hablar sobre la arquitectura de Storybook.

Conceptos básicos de la arquitectura de Storybook

manager preview

A primera vista, Storybook presenta una interfaz de usuario unificada. Sin embargo, detrás de escena se divide en dos segmentos que se comunican entre sí a través de un canal de comunicación:

  • Administrador: el UI donde se procesan la búsqueda, la navegación, las barras de herramientas y los complementos de Storybook.
  • Vista Previa: un iframe donde se renderizan las historias.

Necesitamos rastrear el estado de alternancia y al mismo tiempo también compartir ese estado tanto en el Administrador como en la Vista previa. Por lo tanto, en lugar de useState, usaremos useGlobals de @storybook/api.

Seguimiento del estado global

Los Globals representan el contexto "global" (o sea, que no son específicos de la historia) en Storybook. Son una forma práctica de compartir información entre diferentes historias, complementos y decoradores. El hook useGlobals permite acceder a este contexto global dentro de la herramienta que se está creando.

Echa un vistazo en @storybook/addons para más APIs relacionados con addons

El kit Addon preconfigura Tool (herramienta) para utilizar globals. Cambiemos el nombre del global para reflejar con mayor precisión lo que hace. La función toggleOutline permite al usuario activar y desactivar el complemento Outline. 👉🏽🔘

The tool track toggle state

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

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

  return (
    <IconButton
      key={TOOL_ID}
+      active={outlineActive}
      title="Apply outlines to the preview"
+      onClick={toggleOutline}
    >
      <Icons icon="outline" />
    </IconButton>
  );
};
Keep your code in sync with this chapter. View ffd9ccb on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Decoradores
Interactuando con las historias
✍️ 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