Bring your Storybook components to Locofy

With Storybook integration, you can now bring your own components from Storybook into the Locofy Plugin. Simply drag and drop the components into your design file, then get a live preview and export code for it.

What is Storybook?

Storybook is a tool that allows development teams to document and manage their UI system. After writing code for your component (eg. a button), Storybook lets you easily display that component in different states and configurations. (eg. warning, pressed, disabled, etc)

Each configuration is called a “Story” and you can further toggle different properties to see different variations of the component.

This helps developers and designers to easily manage and visualise all the components and variations, without needing to run any code.

Using your Storybook components in Locofy

Now with Storybook integration, the components and variations that you’ve set up in your Storybook can be used from the Locofy plugin drag & drop widget.

1. Ensure that you’ve connected your Storybook with Locofy. To learn how to set up the integration, view the “Setting up” section.
2. Once you’re connected, you’ll see the pink Storybook icon in the top left corner of the Drag & Drop Pre-built Component widget. Click on the Storybook icon.

Running your exported code

The generated code is written to run using your own code components, hence after exporting, you will need to ensure that your components are imported as dependencies to run the code. Here are the steps to do so:

1. Unzip the downloaded file
2. Copy the exported code and assets into your existing repository
3. Ensure that required packages are imported. Locofy adds todos to remind you to import your code components that are being used.
4. You can now run your project.

Setting up: Bring your Storybook components to Locofy

Here’s how to connect your Storybook with Locofy and bring your components into the Locofy plugin.

1. In the Drag & Drop widget, select the “+ Add Storybook” icon

2. You will be shown a personal Access Token and steps to install the Locofy Addon for your storybook. Ensure that you have copied the token for later use.

3. Now, get the Locofy Storybook Addon by installing the package in your repository

   npm install --save-dev @locofy/storybook-addon

   OR

    yarn add -D @locofy/storybook-addon

4. Once the package has been installed, you will need to register the addon in .storybook/main.js

   module.exports = {
      stories: [],
      addons: [
      // Other Storybook addons
         '@locofy/storybook-addon', //👈 The addon registered here
      ,
   }; `

5. Finally, you’ll need to add an environment variable called STORYBOOK_LOCOFY_TOKEN to store the access token you had copied earlier in Step 2. If your repository does not have an existing .env file, you can create a new one in the root of your project:

6. You’ve successfully installed the Locofy addon. Upon running Storybook, you should see the Locofy icon added as a new item in the Addons bar

7. Click on the Locofy addon to export your selected components to the Locofy Plugin.

8. You’re done! You can now drag and drop these components from the Locofy Plugin onto your design and export code that uses your own code components.

Requirements and Limitations

Supported Frameworks

The Locofy Storybook addon currently supports React components. Support for components from other frameworks is coming soon.

Structuring your Storybook code

Please ensure that your Storybook is structured in the following way:

• Component names must be unique.
• Each story should contain a single example of the component. Avoid including documentations as well as multiple examples in a single story.
• The customisable props and their argTypes must be exposed to Storybook. View the Storybook documentation on writing args here.

Limitations

These are the current limitations for the addon:

• Exported component should not contain any children components.
• The following argTypes controls are currently not supported:
  • object
  • file