Feedback for /sharing/design-integrations docs page

[storybook-bot]

👍	👎
1	1

[storybook-bot]

/docs/7.5/react/sharing/design-integrations

👎	v7.5	react	ts

Does this work for Storybook7?

You began the docs with the installing npm install --save-dev @storybook/addon-designs
and registering it in the main.ts. However, you followed with this:

// MyComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';

import { withDesign } from 'storybook-addon-designs';

import { MyComponent } from './MyComponent';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta = {
component: MyComponent,
decorators: [withDesign],
};

export default meta;
type Story = StoryObj;

export const Example: Story = {
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/Sample-File',
},
},
};

I don't believe this works. I tried to npm install the older storybook-addon-designs but they don't have a TS version in the repo... I was hoping to integrate this and test it out. @storybook/addon-designs doesn't seem complete.

https://storybook.js.org/addons/storybook-addon-designs

Following these directions doesn't do anything with CRA / WebPack ^5 and typescript with Storybook ^7

[dapinitial]

Hi, I am not sure what the culprit is, but I hoisted the design addon and ran npm run storybook --no-cache and it showed up finally.

It would be cool is we could map the css properties across Figma and Storybook, that way if someone changes something in Figma it updates Storybook as well. I almost seems like Figma is another thing solving something when someone could just learn CSS? Idk. Would be nice to see those things communicating somehow.

[jonniebigodes]

@dapinitial and everyone involved in this discussion. Thanks for reaching out to us. We appreciate it 🙏 I did a bit of testing, and I was able to find the culprit. The snippet on how to link the designs to stories is wrong. It was using an old syntax that was removed as part of the migration process for 7.0, as you can see here. You don't need to import it and add it as Storybook decorator, nor "jump through hoops" (pardon the bad pun) to get it to work.

I will push a pull request to address it and get it patched back and released as soon as possible.

Also, @dapinitial, if you could open up an issue with your idea so that the maintainers can take a look at it and see how/if possible to integrate into the addon? If and when it materializes we can adjust the documentation accordingly.

Have a fantastic rest of the weekend.

Stay safe

[storybook-bot]

/docs/7.6/sharing/design-integrations

👍	v7.6	react	ts