{"id":1118,"date":"2022-08-10T06:19:53","date_gmt":"2022-08-10T06:19:53","guid":{"rendered":"https:\/\/lucyestela.com\/dev\/?p=1118"},"modified":"2022-08-10T06:22:06","modified_gmt":"2022-08-10T06:22:06","slug":"storybook-quickstart","status":"publish","type":"post","link":"https:\/\/lucyestela.com\/dev\/react\/storybook-quickstart\/","title":{"rendered":"Storybook .stories Quickstart"},"content":{"rendered":"<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\n<p>Code for starting a story quickly<\/p>\n<pre class=\"\"><span>import<\/span><span> { <\/span><span>ComponentMeta<\/span><span>, <\/span><span>ComponentStory<\/span><span> } <\/span><span>from<\/span><span>'@storybook\/react'<\/span>\r\n\r\n<span>export<\/span><span class=\"\">default<\/span><span> {<\/span>\r\n\r\n<span>title<\/span><span>:<\/span><span class=\"\">'Components\/COMPONENT-NAME'<\/span><span>,<\/span>\r\n\r\n<span>component<\/span><span>:<\/span><span><span class=\"\">COMPONENT-NAME<\/span><\/span><span>,<\/span>\r\n\r\n<span>} <\/span><span>as<\/span><span>ComponentMeta<\/span><span>&lt;<\/span><span>typeof<\/span><span><span class=\"\">COMPONENT-NAME<\/span><\/span><span>&gt;<\/span>\r\n\r\n<span>const<\/span><span>Template<\/span><span>: <\/span><span>ComponentStory<\/span><span>&lt;<\/span><span class=\"\">typeof<\/span><span><span class=\"\">COMPONENT-NAME<\/span><\/span><span>&gt; = (<\/span><span>args<\/span><span>) <\/span><span>=&gt;<\/span><span>&lt;<span class=\"\">COMPONENT-NAME<\/span><\/span><span>{<\/span><span>...<\/span><span>args<\/span><span>}<\/span><span>\/&gt;<\/span>\r\n\r\n<span>export<\/span><span>const<\/span><span>Default<\/span><span> = <\/span><span>Template<\/span><span>.<\/span><span>bind<\/span><span>({})<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Code for starting a story quickly import { ComponentMeta, ComponentStory } from&#8217;@storybook\/react&#8217; exportdefault { title:&#8217;Components\/COMPONENT-NAME&#8217;, component:COMPONENT-NAME, } asComponentMeta&lt;typeofCOMPONENT-NAME&gt; constTemplate: ComponentStory&lt;typeofCOMPONENT-NAME&gt; = (args) =&gt;&lt;COMPONENT-NAME{&#8230;args}\/&gt; exportconstDefault = Template.bind({})<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[128,129],"tags":[],"class_list":["post-1118","post","type-post","status-publish","format-standard","hentry","category-react","category-storybook"],"_links":{"self":[{"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/posts\/1118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/comments?post=1118"}],"version-history":[{"count":4,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/posts\/1118\/revisions"}],"predecessor-version":[{"id":1122,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/posts\/1118\/revisions\/1122"}],"wp:attachment":[{"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/media?parent=1118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/categories?post=1118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/tags?post=1118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}