How to Set Up Storybook to View and Test Code

[00:00 - 00:09] Storybook is a tool for viewing and interacting with user interface components. There are plug-ins for a wide array of frameworks including React, Angular, View, and many more.

[00:10 - 00:18] Storybook gives us a sandbox to test our React code. It also gives us a nice website we can publish to our users to allow them to demo our library.

[00:19 - 00:31] Get started by setting up Storybook by using their initialization installer. MPX is a tool which comes with MPM for running scripts found in node modules/ bin.

[00:32 - 00:47] If the script is in found locally, MPX will download the required scripts from the MPM package manager. SB will scan our project for the correct front-end framework to use in our case , React, and add Storybook to Scroller's dev dependencies.

[00:48 - 01:16] A Story's directory is automatically created and source/stories delete all the files contained within. These are auto-generated files that we'll be replacing soon.

[01:17 - 01:36] The initialization script also updated our package to that JSON to include a Storybook command, which will launch the Storybook sandbox. Create a new file inside source/stories called usescroller.stories.js.

[01:37 - 01:47] Files suffix with .stories tell Storybook which files to look for when generating its files. A Story is a place to visually share and test front-end code.

[01:48 - 01:58] We can have a group of Stories for a single component show different implementations of a component, or one Story per component. First, we'll import the dependencies needed to write a Story for usescroller.

[01:59 - 02:12] We'll be needing React and usescroller itself. Next, we'll export a view or Story for interacting with the usescroller hook.

[02:13 - 02:25] Storybook uses a CSF or component story format to define its stories. At a high level, this means that any component exported as a name export are the stories itself.

[02:26 - 02:37] Metadata about these stories get exported as a default export. We'll give our Story a title by saying Export Default and give it an object.

[02:38 - 02:49] Here, we'll define a title which we'll call usescroller. This is a title that groups all our Stories together in this file.

[02:50 - 03:05] Next, we'll export a testing component or Story called usescroller example. We'll set up the hook usescroller and we'll give some arbitrary values.

[03:06 - 03:16] So our Y will be 200 and we'll say is smooth to be true. Finally, we'll return a view for our Story.

[03:17 - 03:25] In here, we'll create a div that is super-talled so we can display the scrolling. We'll use 3000 pixels.

[03:26 - 03:39] And then a button which on clicked calls our scroller callback. Within the scroller directory, run Yarn Storybook.

[03:40 - 03:53] This will run the Storybook sandbox so we can view the story we just created. Now, when we click our button, we can see our hook working in scrolling.

[03:54 - 04:01] >> Okay.