Socket
Socket
Sign inDemoInstall

@locofy/storybook-addon

Package Overview
Dependencies
41
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @locofy/storybook-addon

Export Storybook components to Locofy


Version published
Weekly downloads
496
increased by52.62%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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.

Export Storybook Components to Locofy

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.

Screenshot showing storybook interface

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.
    Screenshot showing Locofy plugin interface
  3. You’ll be able to view the components and variations that are synced from Storybook.
    Screenshot showing Storybook components inside the Locofy plugin interface
  4. Simply select a variation and drag it onto your Figma design.
    Screenshot showing Storybook components inside the Locofy plugin interface
  5. Once you drop the component on your design, you’ll see the properties screen where you can view a live interactive preview of the component. You can also adjust properties according to your Storybook setup.
    Screenshot showing Storybook components inside the Locofy plugin interface
  6. Click Done. You’ve succesfully used your Storybook component in your design!
  7. Now, you can now view a live responsive preview your design with your live working components and interact with them by clicking “Preview”.
  8. Once you’re happy with your live preview, you can sync your code to Locofy builder to view and export code.

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.
    Screenshot
  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

  1. 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.

  2. 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
    

  3. 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
       ,
    }; `
    

  4. 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:


Screenshot

  1. 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
    Screenshot

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

  3. 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

Keywords

FAQs

Last updated on 18 Apr 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc