Introduction

This ReadMe file provides instructions on how to host your components on Storybook and sync them to the Locofy plugin.

Prerequisites

Before starting, make sure you have the following:

• Storybook installed
• Locofy Addon installed
• Locofy token

Steps

1. Host your components on Storybook

   • Make sure you have Storybook installed.

2. Get the Locofy Addon

   • Install the Locofy Addon to Storybook using npm or yarn.

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

   yarn add -D @locofy/storybook-addon

3. Register the addon in .storybook/main.js

   • Add the Locofy addon to the addons array in .storybook/main.js.

   module.exports = {
     addons: ['@locofy/storybook-addon'],
   };

4. Paste token

   • Create a .env file and paste the Locofy token as a variable.

   STORYBOOK_LOCOFY_TOKEN="your_locofy_token_here"

5. Build Storybook

   • Build Storybook using npm or yarn.

   npm run build-storybook

   yarn build-storybook

6. Sync to Locofy

   • Sync your Storybook components to Locofy using npx or yarn.

   npx locofy sync

   yarn locofy sync

7. Serve Storybook locally

   • Serve Storybook locally using npx or yarn.

   npx serve storybook-static

   yarn serve storybook-static

8. Click on the Locofy Addon

   • Open Storybook in your browser and click on the Locofy Addon.
   • Use the addon to sync your selected components to the Locofy plugin.

9. Complete the steps

   • Once you have completed all the steps, your components should be hosted on Storybook and synced to the Locofy plugin.

Conclusion

Congratulations! You have successfully hosted your components on Storybook and synced them to the Locofy plugin.