Updated demoing-storybook generators

[au5ton]

Premise

There are issues relating to using the Storybook generators that make fresh Storybook projects created with npm init @open-wc not work. Specifically, the following error is output:

Error message: ERR_REQUIRE_ESM

PS C:\Users\Austin\Downloads\au5ton-test> npm run storybook

> [email protected] storybook
> tsc && npm run analyze -- --exclude dist && concurrently -k -r "tsc --watch --preserveWatchOutput" "wds -c .storybook/server.mjs"


> [email protected] analyze
> cem analyze --litelement --exclude dist

[6:51:25 PM] @custom-elements-manifest/analyzer: Created new manifest.
[6:51:25 PM] Starting compilation in watch mode...

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Austin\Downloads\au5ton-test\.storybook\main.js from C:\Users\Austin\Downloads\au5ton-test\node_modules\@web\dev-server-storybook\dist\shared\config\readStorybookConfig.js not supported.
main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\Austin\Downloads\au5ton-test\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at readStorybookConfig (C:\Users\Austin\Downloads\au5ton-test\node_modules\@web\dev-server-storybook\dist\shared\config\readStorybookConfig.js:61:26)
    at storybookPlugin (C:\Users\Austin\Downloads\au5ton-test\node_modules\@web\dev-server-storybook\dist\serve\storybookPlugin.js:16:75)
    at file:///C:/Users/Austin/Downloads/au5ton-test/.storybook/server.mjs:7:13
    at async Promise.all (index 0)
    at async importConfig (C:\Users\Austin\Downloads\au5ton-test\node_modules\@web\config-loader\src\importConfig.js:28:20)
    at async Object.readFileConfig (C:\Users\Austin\Downloads\au5ton-test\node_modules\@web\dev-server\dist\config\readFileConfig.js:13:16)
    at async Object.startDevServer (C:\Users\Austin\Downloads\au5ton-test\node_modules\@web\dev-server\dist\startDevServer.js:21:15) {
  code: 'ERR_REQUIRE_ESM'
}

This seems to be something that was fixed upstream already, but not yet implemented here: https://github.com/modernweb-dev/web/releases/tag/%40web%2Fdev-server-storybook%400.6.0

Related issues:

• Storybook does not work on new open-wc workspace open-wc#2659
• Storybook Does Not Work Out of the Box #87
• [app] Storybook Does Not Work Out of the Box #89

What I did

1. For the generators demoing-storybook and demoing-storybook-ts:
   1. Updated devDependency @web/dev-server-storybook from ^0.5.4 to ^0.7.1
   2. Renamed .storybook/main.js to .storybook/main.cjs

[valentinpalkovic]

Can this PR be merged? @thepassle. The initial Storybook experience is otherwise broken.

[Westbrook]

Overridden by the move to Storybook Builders in #104