Light

dreipol / storybook-figma-addon Goto Github PK

View Code? Open in Web Editor NEW

12.0 6.0 5.0 461 KB

Storybook figma addon for private projects

License: MIT License

JavaScript 0.34% TypeScript 99.66%

storybook-figma-addon's Introduction

Description

Figma storybook addon to embed private and public figma projects. This addon was designed and tested only in a react environment.

Installation

npm i @dreipol/storybook-figma-addon storybook-addon-designs -D

Usage

import '@dreipol/storybook-figma-addon/register';

Set your figma project id and API token

import { addDecorator } from '@storybook/react';
import { withFigma } from '@dreipol/storybook-figma-addon';

addDecorator(withFigma({
    apiToken: process.env.FIGMA_API_TOKEN,
    projectID: process.env.FIGMA_PROJECT_ID,
}));

Use it in your component stories

stories.add(
    'Default',
    () => <ComponentExample/>,
    {
        // one or more figma image ids concatenated via commas
      figma: { 
         ids: '14%3A160,45%3A1939',
         names: ['Buttons', 'Buttons Hover']
      },
    },
);

storybook-figma-addon's People

Contributors

Stargazers

Watchers

Forkers

hgenru mg-nielsen spezzino dave-inc gianlucaguarini

storybook-figma-addon's Issues

Build failing

Getting an error (shown below)

Seems like the current version of this package: https://github.com/pocka/storybook-addon-designs

Has moved everything from /lib to /esm

Updating panel.js with an amended path seems to allow the build to complete.

WARN force closed preview build

ModuleNotFoundError: Module not found: Error: Can't resolve 'storybook-addon-designs/lib/register/components/Image' in '/Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/lib'
    at /Users/borgca/Repo/fox/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:925:10
    at /Users/borgca/Repo/fox/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /Users/borgca/Repo/fox/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /Users/borgca/Repo/fox/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /Users/borgca/Repo/fox/node_modules/neo-async/async.js:2830:7
    at /Users/borgca/Repo/fox/node_modules/neo-async/async.js:6877:13
    at /Users/borgca/Repo/fox/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /Users/borgca/Repo/fox/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /Users/borgca/Repo/fox/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/borgca/Repo/fox/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /Users/borgca/Repo/fox/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /Users/borgca/Repo/fox/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/borgca/Repo/fox/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /Users/borgca/Repo/fox/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/borgca/Repo/fox/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /Users/borgca/Repo/fox/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
resolve 'storybook-addon-designs/lib/register/components/Image' in '/Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/lib'
  Parsed request is a module
  using description file: /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/lib/node_modules doesn't exist or is not a directory
      /Users/borgca/Repo/fox/node_modules/@dreipol/node_modules doesn't exist or is not a directory
      /Users/borgca/Repo/fox/node_modules/node_modules doesn't exist or is not a directory
      /Users/borgca/Repo/node_modules doesn't exist or is not a directory
      /Users/borgca/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/node_modules
        using description file: /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in /Users/borgca/Repo/fox/node_modules
        using description file: /Users/borgca/Repo/fox/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/borgca/Repo/fox/node_modules/storybook-addon-designs/package.json (relative path: ./lib/register/components/Image)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/package.json (relative path: ./node_modules/storybook-addon-designs/lib/register/components/Image)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/storybook-addon-designs/lib/register/components/Image doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/node_modules/storybook-addon-designs/lib/register/components/Image doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/storybook-addon-designs/lib/register/components/Image.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/node_modules/storybook-addon-designs/lib/register/components/Image.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/storybook-addon-designs/lib/register/components/Image.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/node_modules/storybook-addon-designs/lib/register/components/Image.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/storybook-addon-designs/lib/register/components/Image.jsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/node_modules/storybook-addon-designs/lib/register/components/Image.jsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/borgca/Repo/fox/node_modules/storybook-addon-designs/lib/register/components/Image.json doesn't exist
            as directory
              /Users/borgca/Repo/fox/node_modules/storybook-addon-designs/lib/register/components/Image doesn't exist
              /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/node_modules/storybook-addon-designs/lib/register/components/Image.json doesn't exist
            as directory
              /Users/borgca/Repo/fox/node_modules/@dreipol/storybook-figma-addon/node_modules/storybook-addon-designs/lib/register/components/Image doesn't exist

WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

error Command failed with exit code 1.

v1.0.0 package doesn't have /lib folder

There's no /lib folder in your package anymore, so the import in register.js is failing

ModuleNotFoundError: Module not found: Error: Can't resolve './lib/register' in '/***/node_modules/@dreipol/storybook-figma-addon'

Does storybook-figma-addon include Component Story Format (CSF)?

Does storybook-figma-addon allow Component Story Format (CSF)?
If so, could someone please provide a small code snippet? Thanks in advance.

Possible Improvements

There is just a list of suggestion that I have while using your library..

Suggestion

In the decorator, it requires to add the project-id and the api token. From looking at the code, it looks like project-id is really the file-key. Update project-id to be called 'file-key'
Update readme to show people how to debug issue if it does not work. Ex. I had to go to https://www.figma.com/developers/api#get-images-endpoint to validate if my file-key and my node-id was correct.
Update what the fields are suppose to represent for the figma configuration
Pass the project-id/file-key in the figma configuration vs. the decorator register call. This allows users to add a global decorator with the API token and access different files within the figma.
It's strange that the string ids are ',' separated but the names are not. Why not just make it an array as well to be consistent.

Thanks,
Derek

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.