feat: upgrade to Storybook 7

[e0ipso]

BREAKING CHANGE: This requires an update to Storybook 7.

📦 Published PR as canary version: 1.0.28--canary.30.1f73a32.0

✨ Test out this PR locally via:

npm install @lullabot/storybook-drupal-addon@1.0.28--canary.30.1f73a32.0
# or 
yarn add @lullabot/storybook-drupal-addon@1.0.28--canary.30.1f73a32.0

[arnalyse]

Hi @e0ipso, I've tried this canary version with Storybook 7.0.8 in a fresh install of Drupal 9.5.8.

I've enabled all CL modules, including the cl_components_examples to have some test content.

The warnings of issue #29 do not occur, which is great.

But storybook tells me it's unable to find a matching story indexer. Have you seen this error before? Google has failed me regarding this error, that's why I'm asking here. 🙏

WARN - ./docroot/modules/contrib/cl_components/cl_components_examples/templates/components/my-banner/my-banner.stories.yml: No matching story indexer found for /Users/arne/Temp/naked-drupal/docroot/modules/contrib/cl_components/cl_components_examples/templates/components/my-banner/my-banner.stories.yml
WARN - ./docroot/modules/contrib/cl_components/cl_components_examples/templates/components/my-button/my-button.stories.yml: No matching story indexer found for /Users/arne/Temp/naked-drupal/docroot/modules/contrib/cl_components/cl_components_examples/templates/components/my-button/my-button.stories.yml
WARN - ./docroot/modules/contrib/cl_components/cl_components_examples/templates/components/my-card/my-card.stories.yml: No matching story indexer found for /Users/arne/Temp/naked-drupal/docroot/modules/contrib/cl_components/cl_components_examples/templates/components/my-card/my-card.stories.yml
WARN - ./docroot/modules/contrib/cl_components/cl_components_examples/templates/components/my-cta/my-cta.stories.yml: No matching story indexer found for /Users/arne/Temp/naked-drupal/docroot/modules/contrib/cl_components/cl_components_examples/templates/components/my-cta/my-cta.stories.yml

[e0ipso]

I did encounter those errors. I was able to get passed them, only to be stuck later on Storybook not finding any stories. I remember searching for the error and that StackOverflow helped me out. Sorry for not being more specific.

Once all works out, I will write a step-by-step tutorial.

[e0ipso]

In the mean time, I recommend using Storybook 6. That does work.

[arnalyse]

Hi Mateu, thanks for helping me out. I did find one workaround for my error. In main.js this feature flag has to be set:

  features: {
    storyStoreV7: false, // 👈 Opt out of on-demand story loading
  },

This solves the missing indexers, but lands me at the error you describe: Storybook not finding any stories.

I'll have a look and will otherwise fall back on Storybook 6.

In case I come up with a solution, I will let you know here in the comments.

[theodorosploumis]

I am also using this version and it works fine!
I was not able to use the addon with Storybook 6.

But now I get an error for any *.stories.yml file:

Error: No matching story indexer found for /themes/custom/mytheme/components/01-atoms/h1/h1.stories.yml

[theodorosploumis]

Update.
This composer.json works for Storybook 6.x, sdc core 10.1.0, cl_server 2.0@beta:

{
  "name": "NAME",
  "version": "1.0.0",
  "description": "Drupal + sdc + Storybook",
  "main": "index.js",
  "scripts": {
    "storybook": "start-storybook",
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@lullabot/storybook-drupal-addon": "^1.0.27",
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-docs": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/addons": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/cli": "6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/server": "^6.5.16",
    "@storybook/theming": "^6.5.16",
    "babel-loader": "^8.3.0",
    "storybook": "^6.5.16"
  }
}

[cosmicdreams]

The key issue appears to be that without alteration Storybook 7's @storybook/server dependency doesn't understand how to parse our yaml files.

Work was done recently to add a JSON parser to @storybook/server
storybookjs/storybook#20627

Do we need to file a bug with storybook asking for them implement a Yaml parser as well?

[cosmicdreams]

That issue has been resolved. I've tested getting storybook 7 running with the package.json we've been sharing here and the added instructions that were shared in the linked issue.

I can get the yml stories to be indexed with a one caveat: It appears stories need unique ids / Names now.

Were we previously use the same id for buttons? Primary button and "Button" conflict on id because they are both named Button in the .stories.yml file. Same thing happens with banners. Buttons also have a conflict because the sdc_examples_replacement module (that isn't enabled) has a Button story that conflicts the enabled button.

[e0ipso]

I think this is ready to merge. I created 1.x to keep supporting Storybook 6 versions, and for archival reasons.

This should create 2.0.