Addons

Storybook dispose d'un système robuste d'addons avec lequel vous pouvez améliorer l'expérience des développeurs pour tout le monde dans votre équipe. Consultez-les tous ici

Si vous avez suivi ce tutoriel de manière linéaire, nous avons référencé plusieurs addons jusqu'à présent, et vous en aurez déjà implémenté un dans le chapitre Test.

Il existe des addons pour chaque cas d'utilisation possible. Il faudrait une éternité pour les décrire tous. Intégrons l'un des addons les plus populaires : Controls.

C'est quoi Controls?

Controls permet aux designers et aux développeurs d'explorer facilement le comportement du composant en jouant avec ses arguments. Aucun code n'est nécessaire. Controls crée un panneau additionnel à côté de vos stories, afin que vous puissiez modifier leurs arguments en temps réel.

Les nouvelles installations de Storybook comprennent Controls prêt à l'emploi. Aucune configuration supplémentaire n'est nécessaire.

Les addons déverrouillent les nouveaux flux de travail de Storybook

Storybook est un merveilleux environnement de développement axé sur les composants. L'addon Controls fait évoluer Storybook en un outil de documentation interactif.

Utiliser Controls pour trouver les cas limites

Grâce aux ingénieurs en AQ de Controls, les ingénieurs UI ou tout autre intervenant peuvent pousser le composant à sa limite! Considérons l'exemple suivant, qu'arriverait-il à notre Task si nous ajoutions une chaîne MASSIVE ?

Ce n'est pas juste ! Il semble que le texte déborde les limites de la composante Task.

Controls nous a permis de vérifier rapidement les différentes entrées d'un composant. Dans ce cas, une longue chaîne. Cela réduit le travail nécessaire pour découvrir les problèmes d'UI.

Maintenant, réglons le problème du débordement en ajoutant un style à Task.js:

<input
  type="text"
  value={title}
  readOnly={true}
  placeholder="Input title"
  style={{ textOverflow: 'ellipsis' }}
/>

Problème résolu! Le texte est maintenant tronqué lorsqu'il atteint la limite de la zone de Task à l'aide d'une belle ellipse.

Ajouter un nouveau story pour éviter les régressions

À l'avenir, nous pourrons reproduire ce problème manuellement en entrant la même chaîne de caractères via Controls. Mais il est plus facile d'écrire un story qui met en valeur ce cas limite. Cela élargit la couverture de notre test de régression et définit clairement les limites du ou des composants pour le reste de l'équipe.

Ajoutez un nouveau story pour le cas du texte long dans Task.stories.js:

const longTitleString = `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 = Template.bind({});
LongTitle.args = {
  task: {
    ...Default.args.task,
    title: longTitleString,
  },
};

Nous pouvons maintenant reproduire et travailler sur ce cas limite avec facilité.

Si nous faisons un test visuel, nous serons également informés si la solution elliptique se brise. Les cas limites obscurs sont susceptibles d'être oubliés sans la couverture de test!

Fusionner les changements

N'oubliez pas de fusionner vos changements avec git!