{"id":28336,"date":"2022-03-23T22:58:25","date_gmt":"2022-03-23T22:58:25","guid":{"rendered":"http:\/\/Making-Better-Components-With-Storybook"},"modified":"2022-03-23T22:58:25","modified_gmt":"2022-03-23T22:58:25","slug":"making-better-components-with-storybook","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/making-better-components-with-storybook\/","title":{"rendered":"Making Better Components With Storybook"},"content":{"rendered":"

When you\u2019re working on large projects, it can help to have reusable components to handle the same functionality across different views. This saves time on writing code, makes it easier to maintain apps with many views, and can even lead to components that are usable in different projects.<\/p>\n

There are a few different ways to do this and we\u2019ll be taking a look at component-driven development and one of the tools you can use to help with that.<\/p>\n

Quick background on component-driven development<\/h2>\n

Component-driven development is when you create independent components. So your components aren\u2019t tied to any particular data, APIs, or other functionality. They can stand alone on their own and you work with them however you need at the time.<\/p>\n

Some common components you\u2019ll see created like this include dropdowns, buttons, and containers. Building your components independently of each other can help you model your system better because you can drop in the pieces you need.<\/p>\n

You\u2019ll even be able to write better tests for your apps because you can test components with more simple mock data. It also makes it clearer to find issues since you can test everything in isolation.<\/p>\n

Where Storybook comes in<\/h2>\n

This is where a tool like Storybook<\/a> comes in. It lets you develop your components in isolation from the rest of the app. That means you can test components without connecting to a server or running all of the functionality in the app.<\/p>\n

Storybook starts up its own process to let you interact with components and demonstrate how components should work. Something else it helps with is the documentation for your apps.<\/p>\n

You\u2019ll be able to add descriptions for props that are passed to components, explain how the component changes under different conditions, and check for accessibility issues.<\/p>\n

Generating a Redwood app<\/h2>\n

Now that you know a bit about component-driven development and Storybook, let\u2019s see how it actually works. We\u2019ll do this with a new Redwood app since it comes with Storybook integration by default.<\/p>\n

You can make a new app by running the following command:<\/p>\n

yarn create redwood-app storybook-component\n<\/code><\/span><\/pre>\n
This will make a new Redwood project with several files and directories generated for us. While our focus will be in the web<\/code> directory, it\u2019s good to note that the api<\/code> directory is where your database connection and GraphQL server will live.<\/p>\n
A new page<\/h3>\n
The front-end is where we\u2019ll be focused, so let\u2019s start by adding a new page to the app. Run the following command:<\/p>\n
yarn rw g page display \/\n<\/code><\/span><\/pre>\n
This creates a new page called DisplayPage<\/code> in the web > src > pages<\/code> directory. We\u2019ll use this page to display a video to the user, kind of like if they went to a page on YouTube.<\/p>\n
Before we add the video component, let\u2019s take a look at what we have in Storybook just from our Redwood commands. So we\u2019ll start up Storybook with:<\/p>\n
yarn rw storybook\n<\/code><\/span><\/pre>\n
This should start up Storybook and you should see something like this in the browser.<\/p>\n
\"display<\/p>\n
If you look in web > src > pages > DisplayPage<\/code>, you\u2019ll see the DisplayPage.stories.js<\/code> file. This is the type of file Storybook will be looking for to render individual components. The Storybook page will render the DisplayPage<\/code> component exactly like it\u2019s written. Here\u2019s what the story page should look like.<\/p>\n
import<\/span> DisplayPage from<\/span> '.\/DisplayPage'<\/span>\n\nexport<\/span> const<\/span> generated = ()<\/span> =><\/span> {\n  return<\/span> <DisplayPage<\/span> \/><\/span><\/span>\n}\n\nexport<\/span> default<\/span> { title<\/span>: 'Pages\/DisplayPage'<\/span> }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
A couple of things to note for the stories.js<\/code> file.<\/p>\n