storybookjs / addon-designs Goto Github PK
View Code? Open in Web Editor NEWA Storybook addon that embeds Figma, websites, or images in the addon panel.
Home Page: https://storybookjs.github.io/addon-designs
License: MIT License
A Storybook addon that embeds Figma, websites, or images in the addon panel.
Home Page: https://storybookjs.github.io/addon-designs
License: MIT License
Is there a way to notify Storybook that there were changes to the Figma design for a component since it was last visited?
Using the following versions:
"storybook-addon-designs": "6.0.0-alpha.3",
"@storybook/addon-essentials": "6.2.0-rc.9",
"@storybook/react": "6.2.0-rc.9"
The very first load of a private Figma component does not render it and instead shows as if there's no Figma attached in the design tab. Instead I have to tap out of the first loaded component, tap on a different component, and then tap back into the first loaded component again to see the design tab.
Repro is:
const Template: Story<unknown> = args => <PrimaryButton {...args} />;
export const Primary = Template.bind({});
Primary.args = {
text: 'Button',
type: 'primary',
onPress: () => null,
disabled: false,
isInProgress: false,
compact: false
};
Primary.parameters = {
design: {
type: 'experimental-figspec',
url: 'https://www.figma.com/file/acdefg123/abcdefg123?node-id=abcdefg123',
accessToken: 'secret-token'
}
};
Hi! I see that you recently added private figma support. I am really excited about this feature. I was trying to set it up today in my project only to realize that it hasn't been released yet. Since this is monorepo, I am unable to yarn install the latest using git reference. I was wondering if you have a timeline in mind when you will release it. Thank you!
Hi,
storybook-addon-designs
is breaking my tests, using jest:
FAIL src/tests/storyshots.test.js
● Test suite failed to run
./node_modules/storybook-addon-designs/lib/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import addons, { makeDecorator } from '@storybook/addons';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import React from 'react';
2 | import { action } from '@storybook/addon-actions';
> 3 | import { withDesign } from 'storybook-addon-designs';
I've tried both versions 5.2.0
and 5.3.0-alpha.1
.
If I remove the module and comment out the withDesign
related lines, all my tests complete without errors.
I have tried various suggestions in jestjs/jest#9395 , to no avail.
Is your feature request related to a problem? Please describe.
I can't figure out how to add styling to the wrapper where Figma designs are showing. I've tried using:
design: {
type: "figma",
url: "https://www.figma.com/file/Na54d42QCGJdoSwONDMOwz/Navigasjon?node-id=782%3A647",
style: { backgroundColor: "white" }, // color: white
},
},
But it dosn't seem to work.
Would also like this to work with figspec.
Describe the solution you'd like
I would like to specify the styles like in the example above. I saw that it was possible with doc blocks, but I couldn't figure out how to combine doc blocks and a story page.
Describe alternatives you've considered
I tried using Doc Blocks, but couldn't figure it out because of missing documentation.
Design types
figma
experimental-figspec
link
image
iframe
???
Storybook: 5.3.8
storybook-addon-designs: 5.1.1
Exception occurs when you click on Design panel if story has no design config (user sees white screen).
Uncaught TypeError: Cannot use 'in' operator to search for 'length' in undefined
Group of stories decorated "withDesign", but story some stories has no design config.
storiesOf('Controls', module)
.addDecorator(withKnobs({ escapeHTML: false }))
.addDecorator(withThemes(THEMES))
.addDecorator(withDesign)
.add('Checklists', data => {
return {
..
I suggest to hide "Design" button if there is no design config in story or handle this exception to avoid braking the whole storybook.
I would love to setup one design for all stories via decorator in config.js
.
This is working for me:
import { addDecorator, addParameters } from "@storybook/react";
// design
addDecorator(withDesign);
addParameters({
design: {
type: 'figma',
url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
}
});
Can I send PR with updated README about this?
Is there a way to implement this addon in MDX format?
Here's an example with @storybook/addon-knobs
:
<Story name="knobs" parameters={{ decorators: [withKnobs] }}>
<Avatar
loading={boolean('Loading')}
size={select('Size', ['tiny', 'small', 'medium', 'large'])}
username="Some user"
src="https://i.pravatar.cc/300"
/>
</Story>
Resources:
edit: add resources
If you export multiple stories in a story file containing multiple designs (type iframe
) the iframes won't be loaded properly:
It always seems to be one story behind.
Don't know how to provide a code example so i post one which can be used instantly in any setup containing
import { ReactNode, FC } from 'react';
import { Story, Meta } from '@storybook/react';
import { withDesign, config } from 'storybook-addon-designs';
const SomeComponent: FC = () => {
return <>SOME COMPONENT CONTENT</>;
};
export default {
title: 'some title',
component: SomeComponent,
decorators: [withDesign],
} as Meta;
interface DummyProps {
description?: ReactNode;
}
const Dummy: Story<DummyProps> = ({ description }) => <div>{description}</div>;
export const Story1 = Dummy.bind({});
Story1.args = {
description: 'TODO',
};
Story1.parameters = {
design: config([
{
name: 'Tables?',
type: 'iframe',
url: 'http://shouldiusetablesforlayout.com/',
},
{
name: 'Smallest',
type: 'iframe',
url: 'http://www.guimp.com/',
},
]),
};
export const Story2 = Dummy.bind({});
Story2.args = {
description: 'TODO',
};
Story2.parameters = {
design: config([
{
name: 'Plaiceholder',
type: 'iframe',
url: 'https://plaiceholder.co/',
},
{
name: 'AudioMass',
type: 'iframe',
url: 'https://audiomass.co/',
},
]),
};
Affected design types
figma
experimental-figspec
link
image
iframe
Describe the bug
main.js
module.exports = {
stories: [
'...'
],
addons: [
'storybook-addon-designs',
'@storybook/addon-links',
'@storybook/addon-essentials',
],
};
To Reproduce
./node-modules/.bin/start-storybook -p 6006
Expected behavior
Error-free render
Environment
Chrome
Versions
Paste the result of npm list storybook-addon-designs
or yarn list --pattern storybook-addon-designs
below.
❯ yarn list --pattern @storybook/ui
├─ @storybook/[email protected]
│ └─ @storybook/[email protected]
├─ @storybook/[email protected]
└─ [email protected]
└─ @storybook/[email protected]
Bug
Description: When embedding Figma designs, story without allowFullscreen
affects story with allowFullscreen: true
.
Versions: 5.4.2
Reproduction:
a. Go to story with allowFullscreen: false
first
allowFullscreen
: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-examples--embed-fileallowFullsreen: true
: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-examples--allow-fullscreen. There is no option to the view Figma design in fullscreen, which there should be.b. Go to story with allowFullscreen: true
first
allowFullscreen: true
: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-examples--allow-fullscreen.allowFullscreen
: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-examples--embed-file. There is an option to the view Figma design in fullscreen, which there shouldn't be.I am getting the following error when I try to configure figma with storybook- react.
ERROR in ./node_modules/storybook-addon-designs/node_modules/react-pdf/dist/pdf.worker.entry.js (./node_modules/storybook-addon-designs/node_modules/worker-loader/dist/cjs.js!./node_modules/storybook-addon-designs/node_modules/react-pdf/dist/pdf.worker.entry.js)
Module build failed (from ./node_modules/storybook-addon-designs/node_modules/worker-loader/dist/cjs.js):
TypeError: The 'compilation' argument must be an instance of Compilation
Can someone please help?
Imported in code:
https://github.com/pocka/storybook-addon-designs/blob/release/v6.0/packages/storybook-addon-designs/src/register/components/Figspec.tsx#L14
but on present in dev dependencies:
https://github.com/pocka/storybook-addon-designs/blob/release/v6.0/packages/storybook-addon-designs/package.json#L22
Is this intentional?
Broke my build until I added a dependencies myself to the root.
We have a single artboard with lots of symbols/components on it. When I select the component and copy the link into storybook as the url with type figma
it shows me the entire artboard.
Is there a way to only display the selected component or I have to move it into its own artboard to do that?
Hi there,
I've used vue create
to setup a new Vue project, and have installed Storybook - all working correctly.
I have then installed storybook-addon-designs
and followed the readme on adding to my story, but it gives me the following error in my console: h is not defined
.
Here's my files:
stories/2-PageTitle.stories.js
:
import { withDesign } from 'storybook-addon-designs'
import {Button} from '../src/components/Button'
export default {
title: 'My stories',
component: Button,
decorators: [withDesign]
}
export const myStory = () => <Button>Hello, World!</Button>
myStory.story = {
name: 'My awesome story',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
}
}
}
babel.config.js
:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
.storybook/main.js
:
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['storybook-addon-designs']
};
src/components/Button.vue
:
<button>
{{ label }}
</button>
<script>
export default {
name: 'Button',
props: {
label: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
background: red;
}
</style>
Can anyone see what I'm doing wrong here?
Seems like this is caused due to some internal use of react-pdf
on storybook-addon-designs
Tried it with Yarn 2 & Storybook 5.2.8
& 6.0.0-alpha.33
If I had to guess I would blame this line: https://github.com/pocka/storybook-addon-designs/blob/9ed436e3e222e3fddbf016d2f0a9135efafb1ebe/packages/storybook-addon-designs/src/register/components/Pdf.tsx#L13
Stacktrace bellow
ERROR in ~/.yarn/$$virtual/react-pdf-virtual-80afc2509e/0/cache/react-pdf-npm-4.1.0-5b5a86f6e3-2.zip/node_modules/react-pdf/dist/entry.webpack.js
Module not found: Error: @storybook/core tried to access worker-loader, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: worker-loader (via "worker-loader")
Required by: @storybook/core@virtual:02badcd84a8115c2d5f73b510f9f022dfca8ce2433db4223310d52c2dc4bbb61fdcf9d2d91c67a3cdaf5123d38a8be4e94605e12dab88fa9de236a0aea6d72ee#npm:6.0.0-alpha.33 (via ~/.yarn/$$virtual/@storybook-core-virtual-a55db608df/0/cache/@storybook-core-npm-6.0.0-alpha.33-85dfb5f3b0-2.zip/node_modules/@storybook/core/)
@ ~/.yarn/$$virtual/react-pdf-virtual-80afc2509e/0/cache/react-pdf-npm-4.1.0-5b5a86f6e3-2.zip/node_modules/react-pdf/dist/entry.webpack.js 41:45-91
@ ~/.yarn/$$virtual/storybook-addon-designs-virtual-8693906dc4/0/cache/storybook-addon-designs-npm-5.1.1-c1c64c5fd0-2.zip/node_modules/storybook-addon-designs/lib/register/components/Pdf.js
@ ~/.yarn/$$virtual/storybook-addon-designs-virtual-8693906dc4/0/cache/storybook-addon-designs-npm-5.1.1-c1c64c5fd0-2.zip/node_modules/storybook-addon-designs/lib/register/components/Wrapper.js
@ ~/.yarn/$$virtual/storybook-addon-designs-virtual-8693906dc4/0/cache/storybook-addon-designs-npm-5.1.1-c1c64c5fd0-2.zip/node_modules/storybook-addon-designs/lib/register/index.js
@ ~/.yarn/$$virtual/storybook-addon-designs-virtual-8693906dc4/0/cache/storybook-addon-designs-npm-5.1.1-c1c64c5fd0-2.zip/node_modules/storybook-addon-designs/register.js
@ ./.storybook/addons.js
@ multi ~/.yarn/$$virtual/@storybook-core-virtual-a55db608df/0/cache/@storybook-core-npm-6.0.0-alpha.33-85dfb5f3b0-2.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ~/.yarn/$$virtual/@storybook-core-virtual-a55db608df/0/cache/@storybook-core-npm-6.0.0-alpha.33-85dfb5f3b0-2.zip/node_modules/@storybook/core/dist/client/manager/index.js ./.storybook/addons.js
I'm having trouble getting this plugin to work in the new "component-story-format" (CSF).
For example:
simple.story = {
name: 'default',
decorators: [
storyFn => <div style={{ border: '5px solid red' }}>{storyFn()}</div>
]
};
Is it possible to declare the decorator in this way?
More info: https://storybook.js.org/docs/formats/component-story-format/#story-exports
Currently, we only have the statement "we have Doc Blocks~" and Docs page for internal usage. There should be at-least-usable usage guide for our Doc Blocks.
Great package. Wondering if there are plans to support React Native (or Web) similar to how actions, knobs and notes addons support it.
Hi there, apologies for the second issue/question!
I've added the withDesign
and have added the design
parameter as per the docs but the addon doesn't appear in my Storybook UI:
stories/1-Button.stories.js
:
import { withDesign } from "storybook-addon-designs";
import Button from "../src/components/Button";
export default {
title: "My Stories",
decorators: [withDesign],
};
export const myStory = () => ({
components: { Button },
template: "<Button label='hello'/>",
});
myStory.story = {
name: "My awesome story",
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
},
},
};
src/components/Button.vue
:
<template>
<button>{{ label }}</button>
</template>
<script>
export default {
name: "Button",
props: {
label: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
background: red;
}
</style>
.storybook/main.js
:
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['storybook-addon-designs']
};
Any ideas what I'm doing wrong here?
The code can be seen here if that helps
Edit: If I look in the console I can see that the story is wrapped in the Figma component, so not sure why it doesn't display?
Some Storybook addons like addon-notes
can be registered as a panel (appear below the story, current behaviour of this addon) or as a tab (appear alongside 'Canvas', 'Docs' etc.). Can this addon also support registration as a tab?
References:
try to integrate it in a angular project and can't see the design tab at all, does this add-on support angular?
Hello! First of all thank you for this addon, it's awesome!
Some websites can't be embeded as iframe (Cloud Confluence, notion.so) because of:
content-security-policy: frame-ancestors 'self'
And you can't change headers to fix it. There is option to proxy, but it's too challenging (mostly because of Auth).
There is an idea to add link type, that would open design link in a new tab.
It would be good if the addon provides Doc Blocks (easy-to-use React components for Addon Docs). That enables users to embed design specs in their Docs and to build Storybook with Docs mode only.
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { Figma } from 'storybook-addon-designs/blocks'
import { Button } from './Button';
<Meta title="MDX/Button" component={Button} />
# Checkbox
A basic button for everything.
<Preview>
<Story name="basic-button">
<Button>Button</Button>
</Story>
</Preview>
<Figma url="https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample" />
Also, if possible, tabbed-preview would useful.
import { PreviewWithDesign } from 'storybook-addon-designs/blocks'
<PreviewWithDesign
design={{
type: 'figma',
url: 'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
}}
>
<Story name="basic-button">
<Button>Button</Button>
</Story>
</PreviewWithDesign>
// or ...
import { Tabs, Tab } from 'storybook-addon-designs/blocks' // these are re-exports with small modification of ones in @storybook/components
<Tabs>
<Tab title="Preview">
<Preview>
<Story name="basic-button">
<Button>Button</Button>
</Story>
</Preview>
</Tab>
<Tab title="Design spec">
<Figma url="https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample" />
</Tab>
</Tabs>
Storybook for Angular
Version of storybook-addon-designs
: 5.1.0
Setup:
figma
Steps to reproduce within storybook
At the time of writing, the master
branch is pointing at v5.3.0-alpha. I guess many JS devs read GitHub's README instead of one at npm. So, these users tried to install the latest
tag then set it up with a Preset-way (not storybook-addon-designs/register
), which is added in v5.3.0-alpha.
Storybook repo uses the next
branch for pre-preases, so we should follow this strategy for easy understanding.
Hello team!
First of all: Great work, thank you!
Would you be interested in supporting Adobe XD. A workaround with type: 'iframe'
isn't possible because if I'm doing the following
design: {
type: 'iframe',
url: 'https//my-url.com/uuid/',
},
the iFrame container states: "xd.adobe.com refused the connection"
Cheers
Daniel
Perhaps you have a PDF and Figma attached to a story. It would be cool to allow multiple Design tabs for each type.
When I install your addon, I get the following error in the console: "SyntaxError: invalid regexp group"
Same thing happens with our own demo: http://bestof.morganatwork.com/storybook-addon-xd-designs/
Hi,
I'm sure I'm doing something wrong, but I cannot figure out how to solve it. This is my situation (after adding addon to main.js file):
`
$ npm run storybook
[email protected] storybook C:\Users\ion.gonzalez\source\repos\E2E\E2ePor\Components
start-storybook -p 9009 -s public
info @storybook/react v6.1.11
info
info => Loading static files from C:\Users\ion.gonzalez\source\repos\E2E\E2ePor\Components\public and serving at /.
info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/presets/introduction/
ERR! [object Object]
info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/presets/introduction/
ERR! [object Object]
info => Loading custom babel config
info => Loading custom babel config
info => Loading 4 other files in "./.storybook"
info => Adding stories defined in ".storybook\main.js"
info => Loading Webpack configuration from node_modules\react-scripts
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup
`
https://storybook.js.org/docs/presets/introduction/ doesn't work anymore
and adding /register results me on
Failed to load preset: {"name":"@storybook-addon-designs/register"} on level 1
So, can anyone give me some light here? (much appreciated)
Error: Cannot find module '@storybook-addon-designs/register'
main.js
module.exports = {
stories: ['../src/**/*.stories.@(js|mdx)'],
addons: [
{ name: '@storybook/preset-typescript' },
{ name: "@storybook/preset-create-react-app", options: { tsDocgenLoaderOptions: {} }},
{ name: '@storybook/addon-links' },
{ name: '@storybook/addon-docs', options: { configureJSX: true }},
{ name: '@storybook/addon-knobs' },
{ name: '@storybook/addon-viewport' },
{ name: '@storybook-addon-designs' }
],
};
Inside of preview.js add:
export const parameters = {
design: { accessToken: 'your token' }
};
The Figma file will load if the parameter is applied globally, but once clicking elsewhere in storybook it will cause refreshes / flashes and whitescreens.
Currently this project targets ES2015 which doesn't run in IE11, I have to support IE11 and being able to run Storybook inside that would be really helpful! Is this something you'd be open to doing? It's a simple change to tsconfig.json to:
"target": "ES5"
but I realise it adds more testing burden on to the project. What do you think?
Hi,
First thank you for this plugin
i want to know if there is some possibility to add integration for private figma ?
Thank ya
As seen in:
I'm asking because when using the latest alpha of storybook-addon-designs
, 6.0.0-alpha.2
, I had to separately install @figspec/react
or my project wouldn't compile.
PS: thank you for this awesome addon! ❤️
When using the "Multiple designs for single story" to load 2 Figma URLs, the 2nd tab loads with the zoom level so small as to appear blank.
The first tab renders the Figma asset at a reasonable size (fits design within the given frame), but the 2nd tab (perhaps because its not displayed and Figma does some type of size calculation when it loads to attempt to size correctly), when the user selects the 2nd tab it gives the user the impression its blank, and only when you click the zoom "+" icon multiple times does the design start to appear and increase in size.
Receiving an "Unable to resolve path to module", when attempting to:
import { Figma, IFrame } from 'storybook-addon-designs/blocks'
From a quick glance, blocks is missing from package.json
Temporarily changing the import to 'storybook-addon-designs/esm/blocks'
works locally but fails when exporting static build
I was wondering if this add-on supports the HTML module? I tried using it in my current project without any luck. I will let you know if I find a solution/work-around.
Is there any way that Zeplin designs could be embedded? 🤔
When I try to open the "Design" panel, it goes into an infinite loop trying to load the Figma file.
The following appears in the console:
This is my setup:
"@storybook/html": "^6.2.1",
"storybook-addon-designs": "^6.0.0-alpha.3"
.storybook/preview.js
import { withDesign } from 'storybook-addon-designs';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: { expanded: true },
decorators: [withDesign],
design: { accessToken: '<private-access-token>' },
};
MyComponent.stories.js
// ...
export const MyComponent = Template.bind({});
MyComponent.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/file/...',
},
};
Hey @pocka does this addon work with 6.0 yet?
I am using type: "iframe"
to load image assets. Reason: type: "image"
disables scrolling which doesn't make sense in my case. When using type: "iframe"
a loading label is placed behind the iframe itself. If the content of the iframe doesn't fit the full width or height you can see the loading label which can be confusing.
An alternative could be to add an option to type: "image"
to enable scrolling and disable offset :)
Is your feature request related to a problem? Please describe.
Would be nice to be able to support multiple figma design urls in a single story, since Figma lets you link to specific nodes in the design.
Example usecase; be able to link to separate desktop and mobile design for one story
Describe the solution you'd like
Support multiple figma design urls per story
Describe alternatives you've considered
I could split the story into desktop and mobile, but since you can define viewports, this seems like overkill.
Design types
figma
experimental-figspec
link
image
iframe
Additional context
Add any other context or screenshots about the feature request here.
Do you support typescript definitions?
Is your feature request related to a problem? Please describe.
Some stories contain design assets and some do not and the only way to know is to select the Design addon tab and see if it is empty or not. It would be more efficient to see the number of design assets linked as a count in the tab name.
Describe the solution you'd like
Let consumers customise the tab name.
Describe alternatives you've considered
By default, show the count of design assets i.e. show (1) when the tab contains 1 design asset and (0) when it contains none.
Design types
figma
experimental-figspec
link
image
iframe
Additional context
Add any other context or screenshots about the feature request here.
Current:
Desired:
When I click on the Figma embed examples, nothing loads
https://pocka.github.io/storybook-addon-designs/?path=/story/examples-figma--embed-file
How to use this plugin with Angular framework? I could not find any example. Most examples are on React
Is this plugin only for react ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.