Intro to Storybook
  • Empezando
  • Componente Simples
  • Componente Compuesto
  • Datos
  • Pantallas
  • Desplegar
  • Testing
  • Complementos
  • Conclusión
  • Contribuir
Framework:
ReactReact NativeVueAngularSvelteEmber

Complementos

Aprende a integrar y usar complementos usando un ejemplo popular
Esta traducción de la comunidad aún no se ha actualizado a la última versión de Storybook. Ayúdanos a actualizarlo aplicando los cambios en la guía en español para esta traducción. Pull requests son bienvenidos.

Storybook cuenta con un sistema robusto de complementos con el que puede mejorar la experiencia del desarrollador para todos en tu equipo. Si ha seguido este tutorial linealmente, hasta ahora hemos hecho referencia a varios complementos, y ya habrá implementado uno en el Testing.

¿Busca una lista de posibles complementos?
😍 Puede ver la lista de complementos de la comunidad con respaldo oficial y con un fuerte respaldo aquí .

Podríamos escribir para siempre sobre la configuración y el uso de complementos para todos sus casos de uso particulares. Por ahora, trabajemos para integrar uno de los complementos más populares dentro del ecosistema de Storybook: knobs.

Configurando Knobs

Knobs es un recurso increíble para que los diseñadores y desarrolladores experimenten y jueguen con componentes en un entorno controlado sin necesidad de codificar! Básicamente, proporciona campos definidos dinámicamente con los que un usuario manipula los props que se pasan a los componentes de sus historias. Esto es lo que vamos a implementar ...

Instalación

Primero, tendremos que agregarlo como una dependencia de desarrollo

npm install -D @storybook/addon-knobs

Registra Knobs en tu archivo .storybook/main.js.

// .storybook/main.js

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-knobs'],
};
📝 ¡El orden de registro de complementos es importante!
El orden en que enumere estos complementos determinará el orden en que aparecerán como pestañas en su panel de complementos (para aquellos que aparecen allí).

¡Eso es! Es hora de usarlo en una historia.

Uso

Usemos el tipo de knob de objeto en el componente Task.

Primero, importe el decorador withKnobs y el tipo de knob object a Task.stories.js:

// src/components/Task.stories.js

import { action } from '@storybook/addon-actions';
import { withKnobs, object } from '@storybook/addon-knobs';

A continuación, dentro de la exportación default del archivoTask.stories, agregue withKnobs como elemento de decorators:

// src/components/Task.stories.js

export default {
  title: 'Task',
  decorators: [withKnobs],
  // same as before
};

Por último, integre el tipo de knob object dentro de la historia "predeterminada":

// src/components/Task.stories.js

export const Default = () => ({
  Component: Task,
  props: {
    task: object('task', { ...taskData }),
  },
  on: {
    ...actionsData,
  },
});

// same as before

Ahora debería aparecer una nueva pestaña "Knobs" al lado de la pestaña "Action Logger" en el panel inferior.

Como se documenta aquí, el tipo object del knob acepta una etiqueta y un objeto predeterminado como parámetros. La etiqueta es constante y se muestra a la izquierda de un campo de texto en el panel de complementos. El objeto que ha pasado se representará como un blob JSON editable. ¡Siempre que envíe un JSON válido, su componente se ajustará en función de los datos que se pasan al objeto!

Complementos evolucionan el alcance de tus Storybooks

Su instancia de Storybook no solo sirve como un maravilloso CDD environment, sino que ahora estamos proporcionando una fuente interactiva de documentación. Los props son geniales, pero un diseñador o alguien completamente nuevo en el código de un componente podrá descubrir su comportamiento muy rápidamente a través de Storybook con el complemento de knobs implementado.

Usando Knobs para encontrar casos de borde

Además, con un fácil acceso para editar los datos pasados ​​a un componente, los QA Engineers o los UI Engineers ahora pueden llevar un componente al límite. Como ejemplo, ¿qué le sucede a Task si nuestro elemento de la lista tiene un string GIGANTESCO?

¡Oh no! ¡El contenido de la extrema derecha está cortado! 😥

¡Gracias a poder probar rápidamente diferentes entradas a un componente, podemos encontrar y solucionar estos problemas con relativa facilidad! Arreglemos el problema de desbordamiento agregando un estilo a Task.svelte:

<!-- src/components/Task.svelte -->

<!-- This is the input for our task title. In practice we would probably update the styles for this element
  but for this tutorial, let's fix the problem with an inline style:-->
<input
  type="text"
  readonly
  value={task.title}
  placeholder="Input title"
  style="text-overflow: ellipsis;"
/>

Mucho mejor. 👍

Agregar una nueva historia para evitar regresiones

Por supuesto, siempre podemos reproducir este problema ingresando la misma entrada en los mandos, pero es mejor escribir una historia fija para esta entrada. Esto aumentará sus pruebas de regresión y describirá claramente los límites de los componentes para el resto de su equipo.

Agreguemos una historia para el caso de texto largo en Task.stories.js:

// src/components/Task.stories.js

// above code stays the same

const longTitle = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;

export const LongTitle = () => ({
  Component: Task,
  props: {
    task: {
      ...taskData,
      title: longTitle,
    },
  },
});

Ahora que hemos agregado la historia, podemos reproducir este caso extremo con facilidad siempre que queramos trabajar en él:

Aqui esta en la Storybook.

Si estamos utilizando pruebas de regresión visual, también se nos informará si alguna vez rompemos nuestra solución de elipsis. ¡Esos casos extremos oscuros siempre pueden ser olvidados!

Fusionar cambios

¡No olvides fusionar tus cambios con git!

Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Conclusión
Pon todo tu conocimiento y aprende más técnicas de Storybook
✍️ 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