{"componentChunkName":"component---src-templates-main-js","path":"/write-beautiful-stories/","result":{"data":{"site":{"siteMetadata":{"title":"Sagar Hani","author":"Sagar Hani"}},"markdownRemark":{"id":"6c5098a9-0574-5540-801b-ed8d059eabde","excerpt":"image Storybook 📒 No matter how big or small the application is, everyone should have their own storybook. Storybook helps in building and maintaining the UI…","html":"<p><img src=\"https://res.cloudinary.com/sagarhani/image/upload/v1581155213/sagarhani.in/write-beautiful-stories-with-storybook.png\" alt=\"image\"></p>\n<h2>Storybook 📒</h2>\n<p>No matter how big or small the application is, everyone should have their own storybook. Storybook helps in building and maintaining the UI components seamlessly.</p>\n<p>Are you using React ? Vue ? Angular ? It supports all of them.</p>\n<p>Storybook acts as a tool where you can build your components in isolation, do your unit/visual testing of components and also showcase your components to the outside world. When you build a reusable component that can be used by others, please integrate them with the storybook. By doing this you can help your teammates to get an idea that such a reusable component exists and how it works.</p>\n<h2>Addons brings more power ⚡️</h2>\n<p>There are addons that you can add to your storybook to get some extra features.</p>\n<p>For example, <a href=\"https://github.com/storybookjs/storybook/tree/master/addons/knobs\">Knobs</a> allow you to play with your component by passing the props dynamically. This gives a live experience of how your components behave for various kinds of input.</p>\n<p><a href=\"https://github.com/storybookjs/storybook/tree/master/addons/docs\">Docs</a> creates a documentation page by pulling information from your stories, components, source code, and story metadata. It doesn’t require any configuration, it builds the docs page automatically. Similarly, there are various <a href=\"https://storybook.js.org/addons/\">addons</a> that improve the developer experience.</p>\n<p>You can find some of the storybook examples here: <a href=\"https://storybook.js.org/docs/examples\">https://storybook.js.org/docs/examples</a></p>\n<blockquote>\n<p>This website is made of many reusable components. I'll share them on the storybook shortly. 😎</p>\n</blockquote>","frontmatter":{"title":"Write Beautiful Stories","date":"January 10, 2020","description":"Storybook","image":"https://res.cloudinary.com/sagarhani/image/upload/v1581155213/sagarhani.in/write-beautiful-stories-with-storybook.png"}}},"pageContext":{"slug":"/write-beautiful-stories/","previous":{"fields":{"slug":"/destructure-anything-that-returns-an-array/"},"frontmatter":{"title":"Destructure anything that returns an array","image":"https://res.cloudinary.com/sagarhani/image/upload/v1570969417/sagarhani.in/destructure-anything-that-returns-an-array.png"}},"next":{"fields":{"slug":"/things-you-can-do-when-you-are-learning-something-new/"},"frontmatter":{"title":"Things You Can Do When You Are Learning Something New","image":"https://res.cloudinary.com/sagarhani/image/upload/v1584259536/are-you-learning-something-new.png"}}}}}