{"id":9614,"date":"2022-10-16T12:58:16","date_gmt":"2022-10-16T12:58:16","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=9614"},"modified":"2022-10-18T07:58:45","modified_gmt":"2022-10-18T07:58:45","slug":"getting-started-storybook-latest-update","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/getting-started-storybook-latest-update\/","title":{"rendered":"Getting Started Storybook (Latest update)"},"content":{"rendered":"<p>A while back I posted <a href=\"https:\/\/putridparrot.com\/blog\/getting-started-with-storybook\/\" rel=\"noopener\" target=\"_blank\">Getting started with Storybook<\/a>. However, like with most things JavaScript, things have changed, and those instructions are now out of date and also, now, much simpler.<\/p>\n<p>I have an existing React web app. so how do I add storybook ?<\/p>\n<p><em>Note: Do not add storybook from NPM via yarn\/npm, instead use the following instructions.<\/em><\/p>\n<p>From you web app&#8217;s root folder run the following from the root of an existing project<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nnpx storybook init\r\n<\/pre>\n<p>This will try to detect the framework being use. In the case of React this worked a treat. It will then add a <em>stories<\/em> folder to your src folder with a bunch of examples. It adds the .storybook folder with the information to tell storybook what files to look for and, ofcourse, add all the package.json dependencies etc.<\/p>\n<p>Now all you need do is run<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nyarn storybook\r\n<\/pre>\n<p>So simple.<\/p>\n<p>Here&#8217;s a very simple example of a .stories.tsx. I have a <em>Header<\/em> component which simpler writes a string out for a given date. <\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport React from 'react';\r\nimport { ComponentStory, ComponentMeta } from '@storybook\/react';\r\n\r\nimport { Header } from '..\/controls\/Header';\r\n\r\nexport default {\r\n  title: 'Header',\r\n  component: Header,\r\n  parameters: {\r\n    layout: 'fullscreen',\r\n  },\r\n} as ComponentMeta&lt;typeof Header&gt;;\r\n\r\nconst Template: ComponentStory&lt;typeof Header&gt; = (args) =&gt; &lt;Header {...args} \/&gt;;\r\n\r\nexport const Display = Template.bind({});\r\nDisplay.args = {\r\n   endDateTime: new Date(Date.parse(&quot;2022-12-31T23:59:00.000Z&quot;))\r\n};\r\n<\/pre>\n<p>The <em>Display<\/em> export is shown as a view on a component within storybook and we also get the <em>endDateTime<\/em> editor for trying different inputs out.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A while back I posted Getting started with Storybook. However, like with most things JavaScript, things have changed, and those instructions are now out of date and also, now, much simpler. I have an existing React web app. so how do I add storybook ? Note: Do not add storybook from NPM via yarn\/npm, instead [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243,251],"tags":[],"class_list":["post-9614","post","type-post","status-publish","format-standard","hentry","category-react","category-storybook"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=9614"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9614\/revisions"}],"predecessor-version":[{"id":9618,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9614\/revisions\/9618"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=9614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=9614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=9614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}