{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-uxpin-merge","document":[{"data":{"title":{"text":"What is UXPin Merge?"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"using-react.js-components","document":[{"data":{"title":{"text":"Using React.js Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"creating-a-library","document":[{"data":{"title":{"text":"Creating a Library"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ai-assisted-merge-integration","document":[{"data":{"title":{"text":"AI-Assisted Merge Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"start-with-a-boilerplate-repo","document":[{"data":{"title":{"text":"Start with a Boilerplate Repo"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"integrating-your-own-components","document":[{"data":{"title":{"text":"Integrating Your Own Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"config-file","document":[{"data":{"title":{"text":"Config File"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"webpack-configuration","document":[{"data":{"title":{"text":"Webpack Configuration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"wrapper-component","document":[{"data":{"title":{"text":"Wrapper Component"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"adjusting-components","document":[{"data":{"title":{"text":"Adjusting Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"configuring-the-properties-panel","document":[{"data":{"title":{"text":"Configuring the Properties Panel"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"authoring-and-managing-jsx-presets","document":[{"data":{"title":{"text":"Authoring and Managing JSX Presets"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"cli-tool","document":[{"data":{"title":{"text":"CLI Tool"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ci-servers","document":[{"data":{"title":{"text":"Connecting code to UXPin (CI & push)"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"version-control","document":[{"data":{"title":{"text":"Version Control"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"patterns","document":[{"data":{"title":{"text":"Patterns"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"tailwind-css-integration","document":[{"data":{"title":{"text":"Tailwind CSS Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-design-system-documentation","document":[{"data":{"title":{"text":"Merge Design System Documentation"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-component-manager","document":[{"data":{"title":{"text":"Merge Component Manager"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"storybook-integration","document":[{"data":{"title":{"text":"Storybook integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-faq","document":[{"data":{"title":{"text":"Frequently Asked Questions"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Storybook integration"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/ff59121a-f09e-4202-9fd1-24dd3fe03f7d_UXPin_Storybook_integration_1920x1080.mp4"},"video_description":{"text":"UXPin Merge Storybook integration"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>Design faster with Storybook components. Connect your own or a public Storybook to UXPin account, and feel the power of Merge technology – design with code, within minutes. </p><p>Use the integration to bring fully interactive UI code-based components from Storybook and use them to design in UXPin. Now, you can build prototypes that are consistent with all the design and development standards, by using the same components as your devs do. You don’t even need to know how to code and it doesn’t matter which framework you use – we support all Storybook frameworks (<a  href=\"https://github.com/storybookjs/storybook#projects\">as listed here</a>).</p><p></p><p>Storybook integration is an alternative to our other Merge technology integration – Git repository. They both allow you to design with pre-built code components, the main difference is how you add components to UXPin. </p>"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip mini size","tip_title":"Note","tip":{"html":"<p>This documentation won’t show you how to create a Storybook library, but how to integrate an already existing library with UXPin. For a little more information, <a  href=\"https://storybook.js.org/\">Storybook</a> is a development environment for UI components. It allows you to browse components as a library, add interactions, view them in different states, and test in a safe environment.  For more details on Storybook, see this <a  href=\"https://storybook.js.org/tutorials/intro-to-storybook/\">official Storybook guide</a>.</p>"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Before you start"},"content":{"html":"<p>First, you need two things:</p><ol><li>Access to Merge technology in UXPin. Don’t have it yet? Request it <a  href=\"https://www.uxpin.com/merge/storybook-integration\">here</a>. </li><li>Storybook URL. If you’re using an open or a public Storybook, you can proceed with the integration. <br />In case your Storybook is a private one, please contact us at <a  href=\"mailto:sales@uxpin.com\">sales@uxpin.com</a> for more information.</li></ol>"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip","tip_title":"Note","tip":{"html":"<p>In case you use <a  href=\"https://vitejs.dev/\">Vite</a> and Storybook for the integration, you will need to configure a few more steps before integrating with UXPin. As Vite assumes assets are located on the root directory, the following config should be added: In your Storybook &#39;main.* file&#39;, add config.base = &#39; &#39; in your &#39;viteFinal&#39;. More information about this option can be found at <a  href=\"https://vitejs.dev/config/#base\">https://vitejs.dev/config/#base</a>. </p>"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"How to Integrate? "},"content":{"html":"<p><strong>Public:</strong></p><p>1. Open a new or existing prototype from the UXPin Dashboard</p>"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/26d7757c-5060-4a45-92dd-fbe6c9fe7475_Docs_Storybook_01.mp4"},"video_description":{"text":""}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>2. Select ‘Design System Libraries’ menu tab to the bottom left  then click ‘+ New Library’</p>"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/244a1dae-df1b-442a-b6d7-b783d7001bf4_Docs_Storybook_02-update.mp4"},"video_description":{"text":""}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>3. Select ‘Import Components from Storybook’</p>"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/23a9feb0-34df-4c9f-8115-a7546fc774c4_Docs_Storybook_03-update.mp4"},"video_description":{"text":""}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p><strong>Private:</strong></p><p>1. Follow same steps as Public integration, but just select “Private” and copy a token</p>"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/9047a926-c7a2-42a4-b3b8-76bc7878d70f_Docs_Storybook_04-PrivateLibrary.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>2. Install <a target=\"_blank\" rel=\"noopener\" href=\"https://www.npmjs.com/package/@uxpin/storybook-deployer\">@uxpin/storybook-deployer</a> to your design system:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"yarn add -D @uxpin/storybook-deployer\nnpm install @uxpin/storybook-deployer --save-dev"}]},"language":null}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>3. Deploy your Storybook in UXPin:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"npx uxpin-storybook-deployer -t TOKEN -s path/to/your/storybook"}]},"language":null}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip mini size","tip_title":"Note","tip":{"html":"<p>With Private Storybook integration, your Storybook is protected with a UXPin login session. This also means you will not be able to see Storybook components on preview without logging into the account having a permission to the library.</p>"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>You’re good to go! Just start dragging and dropping the components!</p>"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"How to change component properties?"},"content":{"html":"<p>With Storybook’s mechanism – <a  href=\"https://storybook.js.org/docs/react/writing-stories/args\">Args</a>, you can dynamically change properties, slots, styles, inputs, etc., in the UXPin editor. So, there’s no need to alter a component in Storybook – you can do that right away while designing in UXPin.  </p>"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/fcaf90a7-8c36-464c-9af8-93012aac8df2_Docs_Storybook_04.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>Just make sure:</p><ol><li>You have 6+ version of Storybook</li><li>Your Story is written just like Storybook defines it <a  href=\"https://storybook.js.org/docs/react/writing-stories/introduction#using-args\">here</a></li></ol>"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip mini size","tip_title":"Note","tip":{"html":"<p>There’s a similar feature called “knobs” that we don’t support as Storybook has already announced that <a  href=\"https://github.com/storybookjs/storybook/blob/master/addons/controls/README.md#how-will-this-replace-addon-knobs\">it will be deprecated in future versions</a>. </p>"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"How to Update Storybook Components in UXPin? "},"content":{"html":"<p>As you integrate Storybook with UXPin, all the components will be <strong>automatically</strong> updated whenever you make changes to a component in your Storybook. Also, the updated component will look and work exactly like in your Storybook, so don’t worry about your components being a bit off after the sync. </p>"}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"storybook-integration","meta_description":"UXPin's merge Docs, storybook integration for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Storybook integration | Merge","page_title":"Storybook integration | Merge"}}