Storybook: Ein Tool zur Entwicklung von UI Komponenten

Storybook ist eine Open Source Software-Bibliothek zur Entwicklung und Weiterentwicklung von UI-Komponenten. In Bezug auf eine Pattern Library / Component Library dient es dazu einzelne Code-Komponenten zu fokussieren.

Designern und Entwicklern bietet ein Storybook den Rahmen, um Komponenten weiter zu entwicklen. Dies umfasst kleine Experimente auf Codeebene, Darstellung der Änderungen aber ebenso Integration von (automatisierten) Unit- oder Regressionstests. Damit ist das Storybook auch der Ort für Qualitätssicherung und Qualitätsprüfung von UI-Komponenten.  

Hier könnt Ihr unser kickstartDS Storybook live betrachten

Wesentliche Aspekte, die wir in Storybook abbilden

Um die verschiedenen beschriebenen Eigenschaften von Komponenten möglichst direkt erfahrbar zu machen und für einen möglichst großen Kreis an Personen zu dokumentieren kommt Storybook zum Einsatz. Ein Storybook dient dabei als Referenz-Dokumentation und Workbench für Komponenten, codiert und dokumentiert Best Practices, und macht deren verschiedenen Aspekte direkt erfahrbar:

• Code-Samples: direkt kopierbare Komponenten-Snippets für React und HTML. Zum Beispiel zum Kopieren von Best Practice-Beispielen aus der Dokumentation, oder um individuell erstellte Komponenten (anhand der vorgenommenen Einstellungen in den Storybook Controls) direkt auch so zu integrieren
• Storybook Docs: automatisch generierte Dokumentation aller Optionen einer Komponente, inkl. inhaltlicher Beschreibungen (z.B: “box.headline.level: Select the headline level to use, or p alternatively “ in einem Visual, für die Headline in der optionalen Text-Box).
  Zusätzliche Darstellung häufig verwendeter Kombinationen von Optionen, also Varianten der Komponenten (zum Beispiel das Intro-Visual als Variante des Visual, welches immer die volle Bildschirmhöhe einnimmt und per Default ein Video verwendet)
• Storybook Controls: bilden die Komponenten-API auf interaktive Weise ab. Alle Optionen einer Komponente können Live im Browser angepasst und erfahren werden, die Änderungen in der Darstellung oder dem Verhalten der Komponente werden unmittelbar sichtbar. Die verwendeten Browser-Controls werden dabei intelligent aus dem JSON Schema einer Komponente abgeleitet (also zum Beispiel ein Dropdown für Varianten, oder aber ein Schalter für Sichtbarkeit). Die auf diese Weise getroffene Konfiguration einer Komponente ist für den direkten Einsatz in React oder HTML kopierbar
• Storybook Actions: Alle von Komponenten ausgelösten oder ausgewerteten Events werden im Actions-Addon detailliert protokolliert. Zusätzlich werden zentrale Events (wie Breakpoint-Wechsel, Änderung der Sichtbarkeit des Elements, etc) angezeigt, auf die die Komponente potentiell reagieren könnte
• A11y-Addon: Accessibility ist über das eingesetzte Addon direkt im Storybook testbar. Probleme werden konkret und detailliert beschrieben, und sind mit konkreten Verbesserungs-Hinweisen und Referenzen auf den dahinterliegenden Standard versehen. Verschiedene Features zur Simulation von Sichteinschränkungen sind zusätzlich als Filter einstellbar
• Design Tokens: werden mit Hilfe von Komponenten die speziell für die Darstellung entsprechender Werte optimiert wurden (Farb-Swatches, visualisierte Abstände und Animationen, etc.) in eigenen Storybook-Seiten explizit dokumentiert
• Komponenten Tokens: nutzen ein eigens für diesen Zweck entwickeltes Addon (https://storybook.js.org/addons/@kickstartds/storybook-addon-component-tokens/) welches die Tokens einer Komponente (vergleichbar zu den Controls für Optionen) direkt im Storybook strukturiert dokumentiert und anpassbar macht.
  Änderungen an Tokens werden in der Browser-Session gespeichert, eine experimentelle Änderung eines Buttons ist damit zum Beispiel also automatisch auch in allen anderen Komponenten erleb- und testbar (“sieht der neue Button im Visual auch gut aus?”)
• JSON Schema: werden zusätzlich zu den Controls auch über ein eigens dazu entwickeltes Storybook-Addon (https://storybook.js.org/addons/@kickstartds/storybook-addon-jsonschema) als Referenzdokumentation aufbereitet

Zu guter Letzt bietet sich Storybook damit insbesondere an, um das Prototyping neuer Komponenten, oder auch komplexerer Layouts, auf kostengünstige Weise zu ermöglichen. Durch den Plug’n’Play-Charakter mit entsprechend entwickelten Komponenten, und die Möglichkeit eine spätere Backend-Integration im ersten Schritt komplett ausklammern zu können, werden auf diesem Weg Ideen schnell und unkompliziert testbar. 

Insgesamt wird so gewährleistet, dass ein maximaler Kreis von Stakeholdern Berücksichtigung findet: Entwickler, Designer oder Produktverantwortliche

Storybook ist Open Source Software und passt perfekt zur Denk- und Arbeitsweise des Atomic Design und dem iterativen Aufbau und der Pflege einer Component Library. 

Bei der Entwicklung von Dokumentation, die über den Rahmen der Referenz-Dokumentation in Storybook hinaus geht, stehen wir gerne beratend zur Verfügung. Wir empfehlen als Orientierung hier das Denkmodell von Divio: https://documentation.divio.com/, die konkrete Ausgestaltung ist aber für jedes Projekt hoch individuell.