{"id":30839,"date":"2021-07-09T06:13:40","date_gmt":"2021-07-09T13:13:40","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=30839"},"modified":"2024-09-09T19:34:08","modified_gmt":"2024-09-10T02:34:08","slug":"import-components-to-storybook","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/","title":{"rendered":"How to Import Your Components into Storybook and Use Them in UXPin"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin-1024x512.png\" alt=\"How to Import Your Components to Storybook and Use Them in UXPin\" class=\"wp-image-30840\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We\u2019ve recently released our Merge-powered <a href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noreferrer noopener\">integration with Storybook<\/a> that allows you to bring Storybook components to UXPin editor and design with them, keeping all the interactions available in Storybook. It helps break down the design and development silos and finally, let product teams use the single source of truth.&nbsp;<\/p>\n\n\n\n<p>It\u2019s the second integration (we also <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">connect with Git libraries<\/a>) supported by Merge technology that aims for keeping the parity between design and development, letting designers use the same components as devs do.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/KxiJYDYV46orAD3Nh69buLVLmct84_gawH1WNpvn0EHtQpxCi0d3Oq1fKJPSVP1z97esAnpThdahUPiVrkgsc2chQ7ZgaNM27sJ4wlXkveJOx9XbymD6FNG8FJjPwFqMKCATvf13\" alt=\"\"\/><\/figure>\n\n\n\n<p>The UXPin-Storybook integration is the first like this on the market, so being a developer and seeing how much it can simplify things, I\u2019ve decided to explore the topic from a developer-first perspective. Read on to learn more about the first step of using Storybook \u2013 importing UI code components. I\u2019ve prepared a brief summary of what I experienced when making a project using create-react-app, installing the Storybook package and integrating it into my UXPin account powered by Merge tech for prototyping.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-storybook\">What is Storybook<\/h2>\n\n\n\n<p>That\u2019s cool&#8230; but like me at the beginning of this journey, you might not have heard of Storybook. Let&#8217;s see what it is and what it solves.<\/p>\n\n\n\n<p>So for a TD; LR; If you\u2019ve built projects that include component libraries using Frameworks such as React, Vue or Angular and don\u2019t have a way to view or test each component with any possible state or combination of props quickly, then you can use Storybook to do this.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/HqL7XI9CY5rS_BMQ2Fj-9QTjC2qCkFq_Ti53Ec5iYtJfx-pQO16Qb0angzU7YiABpNnx-r4Ovvm8kDHOcyLczUpVjd3ml63SD1HyifFqzXMS_7-sx3zOx8k6PljW0j4V1U-rDBqg\" alt=\"\"\/><\/figure>\n\n\n\n<p>It allows you to build interactive component libraries alongside its own documentation internal to the project directory but outside of the main app in an isolated environment. Meaning, it makes your component build process and documentation more efficient and easier to use without changing your original code.<\/p>\n\n\n\n<p>Want a little bit more and a real-life example, sure, here you go. You have a website that\u2019s made up of components, which have several properties and several states. For example, a Form may have states for:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>User input<\/li>\n\n\n\n<li>Validation errors and messages<\/li>\n\n\n\n<li>Promotions to be added<\/li>\n<\/ol>\n\n\n\n<p>To test these states you\u2019d have to props manually and load local versions of the app, it&#8217;s just so tedious and I would very rarely test each state when making a change. But, with Storybook, you can test each prop live in a local isolated environment. It makes things so much quicker and easier.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/UHzbuKpGpjOf-B93SZ-Hfi2sR1wfliE9tA43pf_MoNjE2lVLBJVViwRC-zN6UQVKytfoEQxNZUiAlaRQYBwX1FL_mvwf3_I7LxjLjFo5L1sJ4EaGQBxnw3pKkrUwln7Efw5wl2mA\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-storybook-use-cases\">Storybook use cases<\/h2>\n\n\n\n<p>Storybook&#8217;s main purpose was to allow frontend developers who are working on projects utilizing Javascript frameworks to create and style component libraries. However, like most things, there are additional uses:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Project Managers &#8211; Improved QA time efficiency without having to load an app to view component changes. Instead just view them on Storybook.<\/li>\n\n\n\n<li>Dev ops &amp; Backend developers &#8211; No longer do they need to keep the local environment always up-to-date so that other users can see component changes.<\/li>\n\n\n\n<li>Designers &#8211; Quickly verify the design of UI components and their states are true to your designs.<\/li>\n\n\n\n<li>UXPin Merge users &#8211; Import your public or private Storybook Library as live React components, where you can make functionally prototypes with no need for programming knowledge.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-importing-storybook\">Importing Storybook<\/h2>\n\n\n\n<p>You have to install Storybook in your project. It\u2019s a package, so for my Storybook test I used npx create-react-app to create a React project then installed Storybook using yarn sb init. I chose React because it\u2019s what I\u2019m most comfortable with and the docs seem quite extensive, but in addition, there is support for Angular, Vue, Web Components, Ember and more.<\/p>\n\n\n\n<p>Storybook is now immediately usable after installation, and after it\u2019s complete, simply run yarn storybook to start the local Storybook server, which will open your browser at <em>http:\/\/localhost:6006<\/em><em> <\/em>&nbsp;displaying your local Storybook component library with some pre-installed examples.<\/p>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-my-component\">My Component<\/h2>\n\n\n\n<p>Even though Storybook isn\u2019t plug-and-play as there is a little work to integrate your components, it\u2019s still quite easy and fast. I was a bit confused about the syntax issues but their <a href=\"https:\/\/storybook.js.org\/docs\/react\/get-started\/introduction\">documentation<\/a> is great and it didn\u2019t take me long to fix them. Integrating your components is not all or nothing, meaning you can add each component one at a time, which makes the integration easy to troubleshoot.<\/p>\n\n\n\n<p>This is the first component I wanted to integrate \u2013 a simple Button which takes several props.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/_HvhksFx_o8kZudTLFf7GpWIKnVB_3Jcx31eBArrs6aLoege6BXaRXZuuLke9cAUhq3wsaNtM8smo2T5Zn3C6Cii1868hdVWPle-P4Dkw0OP_pYsOkh8vkn6HGC2Nd-SsYdYSv2G\" alt=\"\"\/><\/figure>\n\n\n\n<p>The next step is to integrate it into Storybook by writing a stories file.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport * as React from &#039;react&#039;\nimport PropTypes from &#039;prop-types&#039;;\nimport ButtonStyles from &#039;.\/ButtonStyles&#039;;\n \nconst MyButton = (props) =&gt; (\n &amp;lt;ButtonStyles onClick={props.clicked} {...props}&gt;\n   {props.children}\n &amp;lt;\/ButtonStyles&gt;\n);\n \nMyButton.propTypes = {\n disabled: PropTypes.bool,\n children: PropTypes.string,\n onClick: PropTypes.func,\n type: PropTypes.oneOf(&#x5B;&#039;primary&#039;, &#039;secondary&#039;, &#039;success&#039;, &#039;error&#039;, &#039;warning&#039;]),\n size: PropTypes.oneOf(&#x5B;&#039;xs&#039;, &#039;s&#039;, &#039;m&#039;, &#039;l&#039;, &#039;xl&#039;, &#039;xxl&#039;, &#039;xxxl&#039;]),\n}\n \nexport default MyButton;\n\n<\/pre><\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-adding-a-stories-file\">Adding a stories file<\/h2>\n\n\n\n<p>First, what is a Storybook story? A story is a possible rendered state that a component can support. You can have multiple stories each to describe a different state, for example, a Button component with stories for a warning, error or submit theme. For more information, look <a href=\"https:\/\/storybook.js.org\/docs\/react\/get-started\/whats-a-story\">here<\/a>.<\/p>\n\n\n\n<p>I need to add a stories file for the Button with several <a href=\"https:\/\/storybook.js.org\/docs\/react\/writing-stories\/args\">args<\/a>. A stories file contains a \u2018story\u2019 describing one or multiple states that your component will be rendered in Storybook by adding <a href=\"https:\/\/storybook.js.org\/docs\/react\/writing-stories\/args\">args<\/a>. Each arg is what properties to give to a component when it renders. I can define several args in the same stories file, therefore, I can show all the different variations of each component. For my Button I\u2019ve shown several args, I would need to add more to cover all variants but this is just for example. You don\u2019t have to define the args in the stories file if you\u2019ve defined props in your component file.;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\nimport MyButton from &#039;..\/MyButton&#039;;\n \nexport default {\n component: MyButton,\n title: &#039;MyButton&#039;,\n};\n \nconst Template = (args) =&gt; &amp;lt;MyButton {...args} \/&gt;;\n \nexport const Primary = Template.bind({});\nPrimary.args = { children: &#039;primary&#039;, type: &#039;primary&#039; };\n \nexport const Warning = Template.bind({});\nWarning.args = { children: &#039;Warning&#039;, type: &#039;warning&#039; };\n \nexport const XXL = Template.bind({});\nXXL.args = { children: &#039;XXL Primary&#039;, size: &#039;xxl&#039; };\n \nexport const Stretched = Template.bind({});\nStretched.args = { children: &#039;Stretched Primary&#039;, stretched: &#039;true&#039; };\n \nexport const Disabled = Template.bind({});\nDisabled.args = { children: &#039;Disabled Primary&#039;, disabled: &#039;true&#039; };\n\n<\/pre><\/div>\n\n\n<p>So put simply, to integrate a component into Storybook requires:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A src\/components\/[COMPONENT].stories.js which include your component stories in the <a href=\"https:\/\/storybook.js.org\/docs\/react\/api\/csf\" target=\"_blank\" rel=\"noreferrer noopener\">needed format<\/a>.<\/li>\n\n\n\n<li>Restart the server if you\u2019ve added a component by running yarn storybook<\/li>\n<\/ol>\n\n\n\n<p>This is what I meant when saying Storybook is outside of the main app in an isolated environment and doesn\u2019t interfere with your existing code. All added functionality uses the story files, the original code doesn\u2019t change. Additionally, no Storybook-specific libraries are required when creating a stories file.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-automated-documentation-generation\">Automated documentation generation<\/h2>\n\n\n\n<p>Another great feature of Storybook is its ability to create your basic <a href=\"https:\/\/storybook.js.org\/docs\/react\/writing-docs\/docs-page\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a> automatically based on your source code. This helps tremendously with sticking to a single source of truth and is a huge time saver.<\/p>\n\n\n\n<p>Here are the docs for MyButton component:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"344\" src=\"https:\/\/lh4.googleusercontent.com\/OjoUciWbqllhnjJn282YazQfnrAzFRYH-jEnagZTEw-KhgGPkI4_26JUrltesScIU-D2xVJfOCVcY6Zm4YNRgjpCHTiNBVqtCu7N5aXztQOCqsz1gr5RYAocG97OwP_pXWQMU8nV\"><\/p>\n\n\n\n<p>It also lists all Args you have in your source code, so you see all the different variants of your components. You can even just copy and paste the code for each!<img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"320\" src=\"https:\/\/lh6.googleusercontent.com\/5KFOYIFGCuW1uS0_y5Z_hPbqvpLXbJuCW8sySTshzY78qGRWZpggabck_Jg_1ROAQ_ux3bs3g4MsNXZ6S8yZIUhWG4vHlf9vdNef-ax13a-KwL8QgUovSeeiQLwIawENeLFpPGiY\"><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-publishing-storybook-and-integrating-with-uxpin\">Publishing Storybook and integrating with UXPin<\/h2>\n\n\n\n<p class=\"has-text-align-left\">My experience of importing the components into Storybook hasn&#8217;t been too time-consuming \u2013 it actually was pretty simple as there is lots of documentation to help. The reason I felt inclined to learn more about this is because UXPin, using our Merge technology has added integrating your local or private Storybook as a library in the app, so I wanted to try it and also document my experience with this too.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"351\" src=\"https:\/\/lh3.googleusercontent.com\/qGLE9bZY-YvRvJwptRiuRP9Fiuif97_RkX9Z7457zHdu1rg9Uzfrf1qNbBHOH2pYZzjzwe42cyN0LqVZ8ldoRdQRR_-F3XxAtkKYMDR9rEvOWlYykIWVgG-Tjk3QRXC2EhOG49xx\"><\/p>\n\n\n\n<p>So, following the<a href=\"https:\/\/www.uxpin.com\/docs\/merge\/storybook-integration\/#how-to-update-storybook-components-in-ux-pin\" target=\"_blank\" rel=\"noreferrer noopener\"> UXPin Storybook integration documentation<\/a> I got my components integrated into the UXPin editor in a minute. I could then (if I had more components) start to build prototypes using my integrated Storybook component library, in a live code environment, with all component interactions and functionality ready to play with.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"385\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/screen-3.png\" alt=\"screen 3\" class=\"wp-image-30842\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/screen-3.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/screen-3-584x300.png 584w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-summary\">Summary<\/h2>\n\n\n\n<p>Importing components into Storybook is easy and comes with a lot of benefits. On top of that, it can work as a single source of truth for product teams, reducing handoff to a minimum, getting rid of all the design-dev inconsistencies in projects. If you want to try it out, go ahead \u2013 our integration is on trial!&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-buttons\">\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\/storybook-integration\" target=\"_blank\" rel=\"noopener\">Try out Storybook integration<\/a><\/center><\/div>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve recently released our Merge-powered integration with Storybook that allows you to bring Storybook components to UXPin editor and design with them, keeping all the interactions available in Storybook. It helps break down the design and development silos and finally, let product teams use the single source of truth.&nbsp; It\u2019s the second integration (we also<\/p>\n","protected":false},"author":194,"featured_media":30840,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,441,11],"tags":[],"class_list":["post-30839","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-front-end","category-tutorials"],"yoast_title":"","yoast_metadesc":"Designing with Storybook components is easy! But how to bring them to Storybook at first? Read our walk-through!","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Import Your Components into Storybook and Use Them in UXPin | UXPin<\/title>\n<meta name=\"description\" content=\"Designing with Storybook components is easy! But how to bring them to Storybook at first? Read our walk-through!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Import Your Components into Storybook and Use Them in UXPin\" \/>\n<meta property=\"og:description\" content=\"Designing with Storybook components is easy! But how to bring them to Storybook at first? Read our walk-through!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-09T13:13:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T02:34:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Robert Kirkman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Robert Kirkman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/\"},\"author\":{\"name\":\"Robert Kirkman\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/605d1159a6709badd1c68dc18c81d431\"},\"headline\":\"How to Import Your Components into Storybook and Use Them in UXPin\",\"datePublished\":\"2021-07-09T13:13:40+00:00\",\"dateModified\":\"2024-09-10T02:34:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/\"},\"wordCount\":1280,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png\",\"articleSection\":[\"Blog\",\"Front-End\",\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/\",\"name\":\"How to Import Your Components into Storybook and Use Them in UXPin | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png\",\"datePublished\":\"2021-07-09T13:13:40+00:00\",\"dateModified\":\"2024-09-10T02:34:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/605d1159a6709badd1c68dc18c81d431\"},\"description\":\"Designing with Storybook components is easy! But how to bring them to Storybook at first? Read our walk-through!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png\",\"width\":1200,\"height\":600,\"caption\":\"How to Import Your Components to Storybook and Use Them in UXPin\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/import-components-to-storybook\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Import Your Components into Storybook and Use Them in UXPin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/605d1159a6709badd1c68dc18c81d431\",\"name\":\"Robert Kirkman\",\"description\":\"Just a British man working in Tokyo as a software engineer and technical content writer for UXPin.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/robert-kirkmanuxpin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Import Your Components into Storybook and Use Them in UXPin | UXPin","description":"Designing with Storybook components is easy! But how to bring them to Storybook at first? Read our walk-through!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/","og_locale":"en_US","og_type":"article","og_title":"How to Import Your Components into Storybook and Use Them in UXPin","og_description":"Designing with Storybook components is easy! But how to bring them to Storybook at first? Read our walk-through!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/","og_site_name":"Studio by UXPin","article_published_time":"2021-07-09T13:13:40+00:00","article_modified_time":"2024-09-10T02:34:08+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png","type":"image\/png"}],"author":"Robert Kirkman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Robert Kirkman","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/"},"author":{"name":"Robert Kirkman","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/605d1159a6709badd1c68dc18c81d431"},"headline":"How to Import Your Components into Storybook and Use Them in UXPin","datePublished":"2021-07-09T13:13:40+00:00","dateModified":"2024-09-10T02:34:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/"},"wordCount":1280,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png","articleSection":["Blog","Front-End","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/","name":"How to Import Your Components into Storybook and Use Them in UXPin | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png","datePublished":"2021-07-09T13:13:40+00:00","dateModified":"2024-09-10T02:34:08+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/605d1159a6709badd1c68dc18c81d431"},"description":"Designing with Storybook components is easy! But how to bring them to Storybook at first? Read our walk-through!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/07\/How-to-Import-Your-Components-to-Storybook-and-Use-Them-in-UXPin.png","width":1200,"height":600,"caption":"How to Import Your Components to Storybook and Use Them in UXPin"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/import-components-to-storybook\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Import Your Components into Storybook and Use Them in UXPin"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/605d1159a6709badd1c68dc18c81d431","name":"Robert Kirkman","description":"Just a British man working in Tokyo as a software engineer and technical content writer for UXPin.","url":"https:\/\/www.uxpin.com\/studio\/author\/robert-kirkmanuxpin-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/30839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/194"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=30839"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/30839\/revisions"}],"predecessor-version":[{"id":54461,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/30839\/revisions\/54461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/30840"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=30839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=30839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=30839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}