Learn Storybook teaches you Storybook by building a UI from scratch. We walk through core concepts from building and testing to deployment. This tutorial is intended to get you up to speed on Storybook best practices in a fast and approachable way.
Contributions to Learn Storybook are encouraged! If it’s something small like grammar or punctuation, open up a pull request. If it’s a bigger change, add an issue for discussion.
You'll find the chapters in the /content directory.
We need help translating Learn Storybook to new languages. Find out more » Traditional Chinese translation is converted from Simplified Chinese using OpenCC. Please help us correct any idiomatic errors.
If you want to add a new chapter, create an identically named file in content/react/en and in content/react/es. If you are unable to write in one of the required languages, simply add
---
title: "[Title-cased Filename]"
tocTitle: "[Headline on page]"
description: "[A general description of what you're learning about on this page.]"
---
Coming Soon
to that localized file, and a translator will assist in finishing out the PR when possible. Once the content is created, add the file name to the toc array in gatsby-config.js
You'll build Taskbox UI as part of the tutorial. Find the finished code below with commits synced to the chapters.
📕 GitHub repo: chromaui/learnstorybook-code
The text, code, and production were contributed by Chroma. The tutorial was inspired by Chroma’s popular GraphQL + React tutorial series
Install packages and run with yarn develop.