Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@locofy/storybook-addon
Advanced tools
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.
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.
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.
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:
Here’s how to connect your Storybook with Locofy and bring your components into the Locofy plugin.
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.
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
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
,
}; `
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:
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
Click on the Locofy addon to export your selected components to the Locofy Plugin.
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.
The Locofy Storybook addon currently supports React components. Support for components from other frameworks is coming soon.
Please ensure that your Storybook is structured in the following way:
These are the current limitations for the addon:
object
file
FAQs
Export Storybook components to Locofy
The npm package @locofy/storybook-addon receives a total of 168 weekly downloads. As such, @locofy/storybook-addon popularity was classified as not popular.
We found that @locofy/storybook-addon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.