Dependency on @storybook/api or incompatibility with latest alpha of storybook about addon-designs HOT 15 CLOSED

I'm one of the Storybook maintainers. I focus primarily on documentation and community outreach. Just wanted to follow up on this issue, letting you know that the Storybook API for building addons is currently being updated to factor in the changes introduced by the upcoming 7.0 release. If you're interested in making the required changes to help the community from benefiting from using your addon, we've prepared an abridged guide for the required changes here, and if you have any questions or issues, please reach out to us in the #prerelease channel in our Discord Server.

Hope you have a great day!

Stay safe

from addon-designs.

Oh... that's an uncomfortable breaking change...

I believe there is no way to avoid manually installing @storybook/api:

• Changing to @storybook/manager-api breaks v6.x compatibility
• Moving @storybook/api into regular dependency would very likely cause a version mismatch problem

I'll update README once Storybook v7.0-beta is shipped.

from addon-designs.

Maybe you might escalate that to sb team. It's still an alpha so maybe it wasn't intended an/or can be reconsidered?

from addon-designs.

I failed to reproduce the Could not resolve "@storybook/addons" problem, it could have been fixed or is caused by Storybook's internal dependecy gotchas.

1. mkdir sb-test
2. Create a simple package.json
3. npx -p storybook@next storybook init
4. Remove @storybook/testing-library from package.json, as it pulls v6 deps
5. Remove stories/Page.stories.js, as it uses @storybook/testing-library
6. npm i -D --force storybook-addon-designs@beta (--force or --legacy-peer-deps is required as our package.json does not list SB@7beta in peer deps)
7. Add a design parameter to the auto generated story
8. npm run storybook
9. The addon working as intended

% npm why @storybook/addons
@storybook/[email protected] dev
node_modules/@storybook/addons
  @storybook/addons@"7.0.0-beta.25" from @storybook/[email protected]
  node_modules/@storybook/builder-webpack5
    @storybook/builder-webpack5@"7.0.0-beta.25" from @storybook/[email protected]
    node_modules/@storybook/react-webpack5
      dev @storybook/react-webpack5@"^7.0.0-beta.25" from the root project

% cat package.json 
{
  "name": "sb-test",
  "version": "1.0.0",
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "license": "UNLICENSED",
  "private": true,
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.0-beta.25",
    "@storybook/addon-interactions": "^7.0.0-beta.25",
    "@storybook/addon-links": "^7.0.0-beta.25",
    "@storybook/blocks": "^7.0.0-beta.25",
    "@storybook/react": "^7.0.0-beta.25",
    "@storybook/react-webpack5": "^7.0.0-beta.25",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.0.0-beta.25",
    "storybook-addon-designs": "^7.0.0-beta.2"
  }
}

@jrencz
Would you mind sharing which Storybook packages and package manager you're using?

@jonniebigodes
Thank you for reaching out. I believe this addon is already compatible with Storybook v7 API-wise, thanks to these contributions.

• #160
• #173

from addon-designs.

By the end of the week I will check what I have now (last time I updated it was beta.19) and confirm if that problem still exists. And if it does I'll try bumping to beta.25

from addon-designs.

At the time I wrote #178 (comment) and so far in my setup it looks like that:

• I have [email protected] which requires @storybook/addons
• [email protected] has peerDependency of "@storybook/addons": "^6.4.0 || ^7.0.0"
• back then I resolved the problem by adding @storybook/addons as devDependency of my project

and it worked.

Now I removed explicit dependency on @storybook/addons. Npm moved @storybook/addons to node_modules/msw-storybook-addon/node_modules/@storybook/addons and error came back

Then I removed and added back msw-storybook-addon which fixed the structure of my node_modules - now @storybook/addons is at node_modules/@storybook/addons and it works once again, yet now I have @storybook/[email protected] because msw-storybook-addon wants ^6.0.0.

I suppose it now works purely be accident - because I use msw-storybook-addon and it's that one which allows [email protected] to work without problem.

I hope to have some more time to try beta.25 later - maybe something that comes with it (or with @storybook-addon-essentials which it's probably save to assume vast majority uses) brings back @storybook/addons

from addon-designs.

@jrencz It seems the @storybook/api package has been re-added to the @storybook/manager's dependency list in storybookjs/storybook#20021. Can you try the latest Storybook beta?

from addon-designs.

@pocka Sorry for the delay - I had some rough time on the project before holidays and I didn't have time to upgrade SB until today.

I tried on 7.0.0-beta.15 and the original problem is gone.
But... there's a new one:

✘ [ERROR] Could not resolve "@storybook/addons"

    node_modules/storybook-addon-designs/esm/index.js:1:38:
      1 │ import { addons, makeDecorator } from "@storybook/addons";
        ╵                                       ~~~~~~~~~~~~~~~~~~~

This one does exist on NPM: https://www.npmjs.com/package/@storybook/addons/v/7.0.0-beta.15 yet it's not being isntalled out of the box with [email protected]

There's a warning in readme:

The contents of this package have moved to `@storybook/preview-api` and `@storybook/manager-api`. Please update your import depending on where are are using this API.

This package will no longer be released as part of the 8.0 release of storybook.

Both @storybook/preview-api and @storybook/manager-api come with storybook

from addon-designs.

@pocka thanks for following up with me on this. Appreciate it 🙏 ! Glad that everything is already being already working with the new API, should any issue arise, don't hesitate to reach out to us via our Discord Server or the issue tracker.

Hope you have a great day.

Stay safe

from addon-designs.

As a followup to my previous comment #178 (comment)

I now tried updating storybook from 7.0.0-beta.19 to 7.0.0-beta.25 and in beta.25 there's still nothing in either storybook or @storybook/addon-essentials which would require @storybook-addons. it's still msw-storybook-addon which is the only thing in my case that requires @storybook-addons and I still have @[email protected]

It satisfies peerDependency of storybook-addon-designs, but was it not for the fact that I do have msw-storybook-addon, I'd not have it installed and

✘ [ERROR] Could not resolve "@storybook/addons"

    node_modules/storybook-addon-designs/esm/index.js:1:38:
      1 │ import { addons, makeDecorator } from "@storybook/addons";
        ╵                                       ~~~~~~~~~~~~~~~~~~~

would be back.

To my knowledge storybook-addon-designs should have @storybook/addons as dependency, not peerDependency

from addon-designs.

I was getting the same error

Could not resolve "@storybook/addons"

I resolved it with

npm i -D @storybook/addons

(I spun up a Stackblitz with the storybook-addon-designs dependency. Stackblitz is picky and insisted on adding several additional dependencies. Adding them all locally fixed it. Narrowed it down from there.)

I'm on Storybook (and @storybook/... things) 7.0.0-beta.30 and storybook-addon-designs 7.0.0-beta.2.

@jrencz I wonder if your trouble comes from mixing @storybook/addons 6 with Storybook 7. per the following response, I misunderstood the previous comment

from addon-designs.

@olets Thanks for your input. It might not be clear: I don't have any problem if I have @storybook/[email protected]

I'm pointing out that I have any version purely because I have some other addons, msw addon in my case. In case I didn't use that one then error would appear and I would have done what you suggested: install storybook/addons as dependency of my project (where my project does not import from storybook/addons)

Designs addon does depend on API from package @storybook/addons and I want to point out that that package should be a dependency, not peerDependency

from addon-designs.

that package should be a dependency, not peerDependency

No. While using peerDependencies in this case is semantically incorrect, it's required to avoid version conflict problems (e.g. both @storybook/[email protected] and @storybook/[email protected] exists and singleton or something does not work).

In an ideal world, package managers should pick/resolve the correct versions of Storybook libs even they are listed as direct dependencies. Unfortunately package managers most of the times failed to resolve to a version user installed. This is why it's peerDependencies IIRC. I'm not sure the situation changed or not.

(I spun up a Stackblitz with the storybook-addon-designs dependency. Stackblitz is picky and insisted on adding several additional dependencies. Adding them all locally fixed it. Narrowed it down from there.)

I believe Stackblitz being strict instead of picky. Installing them locally is the reliable solution and a workaround for now.

from addon-designs.

@pocka thanks for the link. I studied that repo and now I know a little more

It's even mentioned explicitly in https://storybook.js.org/docs/react/addons/writing-addons#packaging-and-publishing (and same in docs for upcoming 7.0) but the storybook-addon-outline given as a reference in that section uses @storybook/addons as dependency.

It was set to ^6.0.0 via https://github.com/chromaui/storybook-addon-outline/pull/6/files

My assessment is that the guideline might not yet have been revised for the dependency structure of @storybook/addon-essentials@next, which at beta.30 does not come with @storybook/addons. It stopped at storybookjs/storybook#19952 in alpha.54, where @storybook/[email protected] does come with @storybook/addons as dependency and therefore having it as peerDependency in an addon, even if it's a 3rd part addon like this one does actually make sense.

from addon-designs.

Hi Everyone! We have released a new version of the addon. We also changed the package name for the addon, @storybook/addon-designs. Please follow instructions from the readme to get going with the latest version.

https://github.com/storybookjs/addon-designs/blob/master/README.md

from addon-designs.