We'll use the Addon Kit to bootstrap our project. It gives you everything you need to build a Storybook addon:
- 📝 Live-editing in development mode
- ⚛️ React/JSX support for the UI
- 📦 Transpiling and bundling with Babel
- 🏷 Plugin metadata
- 🚢 Release management with Auto
To start, click the Use this template button on the Addon Kit repository. This will generate a new repository for you with all the Addon Kit code.
Next, clone your repository and install dependencies.
This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.
Finally, start the development mode. This starts up Storybook and runs babel in watch mode.
The addon code lives in the
src directory. The included boilerplate code demonstrates the three UI paradigms and other concepts such as managing state and interacting with a story. We'll explore this in more detail in the next few sections.