Setting up Storybook
Setup Storybook to view and test our code.
What is Storybook?#
Storybook is a tool for viewing and interacting with UI (user interface) components. There are plugins for a wide array of frameworks including React, Angular, Vue, and many more. Storybook gives us a sandbox to test our React code. It also gives us a nice website we could publish to our users to allow them to demo our library! We'll be utilizing Storybook to check that
useScroller is working correctly without needing to deploy our library.
Setting up Storybook#
Get started setting up Storybook by using their initialization installer
npx sb init at the root of Scroller.
npx is a tool which comes with npm for running scripts found in
node_module/.bin or remotely. If a script isn't found locally,
npx will download the required scripts from npm and run it.
sb is a Storybook initialization script.
sb will scan our project for the correct frontend framework to use, in our case React, and add Storybook to Scroller's
stories/ directory is automatically created in the
stories/ directory, delete all the files contained within. These are all autogenerated files created by
sb init which we'll be replacing.