Storybook 7 support

[cosmicdreams]

In looking through the dependencies of this addon, it is still depending on Storybook 6.4.

Do we need to create an epic for gathering up all the tasks needed to support Storybook 7?

warning " > @lullabot/storybook-drupal-addon@1.0.27" has unmet peer dependency "@storybook/addons@^6.4.0".
warning " > @lullabot/storybook-drupal-addon@1.0.27" has unmet peer dependency "@storybook/api@^6.4.0".
warning " > @lullabot/storybook-drupal-addon@1.0.27" has unmet peer dependency "@storybook/components@^6.4.0".
warning " > @lullabot/storybook-drupal-addon@1.0.27" has unmet peer dependency "@storybook/core-events@^6.4.0".
warning " > @lullabot/storybook-drupal-addon@1.0.27" has unmet peer dependency "@storybook/theming@^6.4.0".

[cosmicdreams]

Either we need this or changes in the documentation to walk developers through installing storybook with the specific version of 6.4.

[cosmicdreams]

This addon with it's integration to https://www.drupal.org/project/cl_server is broken if you follow the directions exactly.

[e0ipso]

Ugh! I imagine this is frustrating. Thanks for filing the issue.

Transition between major versions always leads to unstable documentation. Were you able to find a path forward? If so, documentation could be a great way to contribute back to the project.

[pixelwhip]

I was going to try to get this running locally so I could help update the docs but it seems even with Storybook 6.4.2 installed globally, sb init still installs all the 7.x dependencies.

This seems to be a recent issue. See https://github.com/storybookjs/storybook/issues/22214

[e0ipso]

https://github.com/Lullabot/storybook-drupal-addon/pull/30 is an attempt to fix this. However, there are some issues upstream that will prevent this from working :100:

In the mean time, I can share my package.json to make it work with SB6.

{
  "name": "html",
  "packageManager": "yarn@3.5.0",
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@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/builder-webpack5": "^6.5.16",
    "@storybook/cli": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/server": "^6.5.16",
    "babel-loader": "^8.3.0"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

[cosmicdreams]

I tried this package.json today and still ran into trouble. After using the instructions found docs/stoybook.md , with the only alteration of using this package.json and building with in using ddev yarn

I ran into the following error:

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

/var/www/html/.storybook/main.js:13
export default config;
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1119:15)
    at Module._compile (node:internal/modules/cjs/loader:1155:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1245:10)
    at Module.load (node:internal/modules/cjs/loader:1069:32)
    at Function.Module._load (node:internal/modules/cjs/loader:904:12)
    at Module.require (node:internal/modules/cjs/loader:1093:19)
    at require (node:internal/modules/cjs/helpers:108:18)
    at interopRequireDefault (/var/www/html/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
    at serverRequire (/var/www/html/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
error Command failed with exit code 1.

Here are my main.js and preview.js files

main.js

/** @type { import('@storybook/server-webpack5').StorybookConfig } */
const config = {
  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(json)"],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@lullabot/storybook-drupal-addon'],
  framework: {
    name: "@storybook/server-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

Note the slight difference in framework

preview.js

/** @type { import('@storybook/server').Preview } */
const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    server: {
      // Replace this with your Drupal site URL, or an environment variable.
      url: 'https://drupal-storybook.ddev.site/',
    },
    globals: {
      drupalTheme: 'olivero',
      supportedDrupalThemes: {
        olivero: {title: 'Olivero'},
        claro: {title: 'Claro'},
        gin: {title: 'Claro'},
        umami: {title: 'Umami'},
      },
    }
  },
};

export default preview;

[cosmicdreams]

In case this issue is caused by my environment here's that info too:

Environment Info:

  System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (5) arm64 unknown
  Binaries:
    Node: 16.19.1 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.3 - /usr/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.5.16 => 6.5.16 
    @storybook/addon-docs: ^6.5.16 => 6.5.16 
    @storybook/addon-essentials: ^6.5.16 => 6.5.16 
    @storybook/addon-links: ^6.5.16 => 6.5.16 
    @storybook/builder-webpack5: ^6.5.16 => 6.5.16 
    @storybook/cli: ^6.5.16 => 6.5.16 
    @storybook/manager-webpack5: ^6.5.16 => 6.5.16 
    @storybook/server: ^6.5.16 => 6.5.16 

[arnalyse]

Hey there, I've traveled a similar path as @cosmicdreams it seems 😅 : Biting my teeth on Storybook 7, coming here, reading the helpful tips, trying again, and finally putting v7 aside and giving Storybook 6 a try.

Storybook 6 failed for me because the 7.x versions of the storybook addons got installed, even though I've been requesting yarn global add sb@^6.5.16. Mateus package.json finally helped me out though.

The one thing that I tripped over after that was the change in the format of main.js and preview.js, and that would be my suggestions you should have a look at @cosmicdreams, as my config based on v6 handles the exports differently.

Here's my config for reference:

main.js

module.exports = {
  "stories": [
    "../docroot/modules/**/*.stories.mdx",
    "../docroot/modules/**/*.stories.@(json|yml)",
    "../docroot/themes/**/*.stories.mdx",
    "../docroot/themes/**/*.stories.@(json|yml)",
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    '@lullabot/storybook-drupal-addon',
  ],
  "framework": "@storybook/server",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}

preview.js

export const parameters = {
  server: {
    // Replace this with your Drupal site URL, or an environment variable.
    url: 'http://localhost:8080',
  },
  globals: {
    drupalTheme: 'MYTHEME',
    supportedDrupalThemes: {
      theodor: {title: 'MYTHEME'},
      claro: {title: 'Claro'},
    },
  }
};

[fogpuddle]

I had a similar problem to what was mentioned in the comments, but after reverting back to SB 6 and following what said in the comments, especially the shared package.json, main.js, and preview.js files, I'm getting closer. I'm now seeing a "Failed to Fetch" error. Any ideas on how to fix this? I'm using the CL: Components Examples Module in Drupal 10 to try to get Storybook and Drupal connected on my local

I'm reading it has to do with CORS headers. Where would I make the changes to try to get it to work on my local with address similar to http://localhost:8888/site_demo. I have my URL in my @storybook/.preview set to http://localhost:8888/site_demo

[e0ipso]

@fogpuddle have you seen the instructions in https://git.drupalcode.org/project/cl_server/-/blob/2.x/docs/storybook.md? That should help you overcome the CORS issue.

[cosmicdreams]

Additional question that I consider putting in it's own ticket, but it's related to Storybook 7.

In 7 they've made a lot of changes to how stories are constructed. What are our next steps to being able to use their advancements in:

• Component Story Format 3
• MDX2
• Autodocs

[cosmicdreams]

Now that code level support is in we can continue the pursuit of utilizing Storybook 7 to it's fullest possible. We can either close this issue and start a new one for that or keep this one open.

[e0ipso]

Agreed.