1052 upgrade storybook library dependencies

[paboden]

#1052
Initial PR to start checking the Storybook 7 upgrade.
Known issues:

• console errors for null child passed items. Doesn't seem to effect output.
• console warnings on storybook 8 deprecated items
• slow lightbox gallery loading
• global accent setting on template pages seem to break or crash sometimes.

[paboden]

@Jura @theadamparker - Is there anything that needs to be done for cloudflare or chromatic to establish the dev environment for the updates? I can't see the logs, and the errors I do see are just general failings.
It was a pretty difficult update on my local, so I'm not surprised that its having issues. I just can't see whats going on with it.

[Jura]

@paboden , this is the error from Cloudflare build:

03:45:45.669 | error An unexpected error occurred: "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz: Request failed \"500 Internal Server Error\"".

Full log is here:
design-system.672f46b1-063d-4866-903b-ee9258137120.log

Chromatic build is failing on npm run build-storybook script as it cannot resolve some references, full log is here: https://github.com/undp/design-system/actions/runs/5066018207/jobs/9095280102?pr=1208

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	4cf9dc3
Status:	⚡️  Build in progress...

View logs

[paboden]

@theadamparker @Jura - This is ready for review.

The biggest thing you will notice is how the Canvas and Docs tabs are gone, and the elements are divided into the Doc and 'Element' in the left sidebar. That is from a fundamental structure change from Storybook 6 to 7. Storybook has no plans to change that according to some of the issue queues.

In Chrome (and chrome based browsers) the favicon falls back to the default storybook icon. This is a bug in storybook and should be fixable in future updates. It displays the proper blue favicon in Firefox, Safari, and other non Chrome based browsers.

[Jura]

@paboden , please merge most current develop branch head and resolve conflicts - there was an update in package version and some stories have been updated in course of other tickets.

I'm also getting an error trying to start Storybook locally from this branch. After dependencies install and build running yarn storybook throws following error:

PS D:\dev\projects\design-system> yarn storybook
yarn run v1.22.19
$ storybook dev -p 6007
@storybook/cli v7.0.18

info Found existing addon "@storybook/addon-docs", skipping.
info Found existing addon "@storybook/addon-actions", skipping.
info Found existing addon "@storybook/addon-docs", skipping.
info Found existing addon "@storybook/addon-actions", skipping.
info => Serving static files from ./.\stories\assets at /
info => Starting manager..
WARN You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
<i> [webpack-dev-middleware] wait until bundle finished: /__webpack_hmr
99% end closing watch compilationWARN Force closed preview build
ModuleBuildError: Module build failed: UnhandledSchemeError: Reading from "D:devprojectsdesign-system
eact" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "d:" URIs.
    at D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:625:32
    at Hook.eval [as callAsync] (eval at create (D:\dev\projects\design-system\node_modules\tapable\lib\HookCodeFactory.js:28:14), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\dev\projects\design-system\node_modules\tapable\lib\Hook.js:15:15)
    at Object.processResource (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:621:42)
    at processResource (D:\dev\projects\design-system\node_modules\loader-runner\lib\LoaderRunner.js:200:13)
    at iteratePitchingLoaders (D:\dev\projects\design-system\node_modules\loader-runner\lib\LoaderRunner.js:160:12)
    at runLoaders (D:\dev\projects\design-system\node_modules\loader-runner\lib\LoaderRunner.js:359:3)
    at NormalModule._doBuild (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:613:5)
    at NormalModule.build (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:731:17)
    at D:\dev\projects\design-system\node_modules\webpack\lib\Compilation.js:955:17
    at NormalModule.needBuild (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:973:14)
    at Compilation._buildModule (D:\dev\projects\design-system\node_modules\webpack\lib\Compilation.js:937:13)
    at D:\dev\projects\design-system\node_modules\webpack\lib\util\AsyncQueue.js:266:14
    at Hook.eval [as callAsync] (eval at create (D:\dev\projects\design-system\node_modules\tapable\lib\HookCodeFactory.js:28:14), <anonymous>:6:1)
    at AsyncQueue._startProcessing (D:\dev\projects\design-system\node_modules\webpack\lib\util\AsyncQueue.js:256:28)
    at AsyncQueue._ensureProcessing (D:\dev\projects\design-system\node_modules\webpack\lib\util\AsyncQueue.js:242:17)
    at processImmediate (node:internal/timers:466:21)
    at processResult (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:569:23)
    at D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:647:9
    at D:\dev\projects\design-system\node_modules\loader-runner\lib\LoaderRunner.js:361:14
    at D:\dev\projects\design-system\node_modules\loader-runner\lib\LoaderRunner.js:202:16
    at D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:625:22
    at Hook.eval [as callAsync] (eval at create (D:\dev\projects\design-system\node_modules\tapable\lib\HookCodeFactory.js:28:14), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\dev\projects\design-system\node_modules\tapable\lib\Hook.js:15:15)
    at Object.processResource (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:621:42)
    at processResource (D:\dev\projects\design-system\node_modules\loader-runner\lib\LoaderRunner.js:200:13)
    at iteratePitchingLoaders (D:\dev\projects\design-system\node_modules\loader-runner\lib\LoaderRunner.js:160:12)
    at runLoaders (D:\dev\projects\design-system\node_modules\loader-runner\lib\LoaderRunner.js:359:3)
    at NormalModule._doBuild (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:613:5)
    at NormalModule.build (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:731:17)
    at D:\dev\projects\design-system\node_modules\webpack\lib\Compilation.js:955:17
    at NormalModule.needBuild (D:\dev\projects\design-system\node_modules\webpack\lib\NormalModule.js:973:14)
    at Compilation._buildModule (D:\dev\projects\design-system\node_modules\webpack\lib\Compilation.js:937:13)
    at D:\dev\projects\design-system\node_modules\webpack\lib\util\AsyncQueue.js:266:14
    at Hook.eval [as callAsync] (eval at create (D:\dev\projects\design-system\node_modules\tapable\lib\HookCodeFactory.js:28:14), <anonymous>:6:1)
    at AsyncQueue._startProcessing (D:\dev\projects\design-system\node_modules\webpack\lib\util\AsyncQueue.js:256:28)
    at AsyncQueue._ensureProcessing (D:\dev\projects\design-system\node_modules\webpack\lib\util\AsyncQueue.js:242:17)
    at processImmediate (node:internal/timers:466:21)

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

info Found existing addon "@storybook/addon-docs", skipping.
info Found existing addon "@storybook/addon-actions", skipping.
error Command failed with exit code 1.

As you can see it might be pertinent to the platform (I'm on windows), but the goal here is to create universal build which will work across all platforms as it does in previous version. If you don't have windows workstation for tests I can work with you on that somehow.

And FYI - yarn build works just fine

[paboden]

@theadamparker @Jura
This is ready again to review. After merging the last task I was able to get things a little bit cleaner in the lock files. Hopefully you shouldn't have any more issues with your local. I've ran my local with both yarn and npm, and I know the cloudflare dev environments run yarn. The cloudflare chromatic tests were giving me trouble before my last fixes, but now they run successful and the site actually runs and loads much faster for me.

[Jura]

@paboden, unfortunately Dev set up on Windows is still broken due to the @storybook/mdx1-csf plugin issue, it's been reported in the plugin repo two months ago: storybookjs/mdx1-csf#24. I can attest that I'm experiencing exactly the same, both with yarn and npm with clean repo copies.
I understand that the issue is not with your code specifically, but the plugin choice was yours and we need to find a workaround as final setup can only be considered completed when it is working. Can you research ways how to handle that without involving respective buggy plugin?

[paboden]

@Jura I'm bringing in another team member with access to a windows machine to help see if we can get around this issue/plugin.

[Jura]

@paboden , any progress here?

[paboden]

Hi @Jura, It looks like @arlina-espinoza was able to figure out a solution to the windows issue. Can you retest the current state of this PR and see if it builds on your machine? Once we confirm its working for you, I will resolve the existing merge conflict, and then we will test again to double check no other updates break this fix.

[Jura]

Hi @paboden , looking good! Probably patch won't be necessary after this PR is merged: storybookjs/mdx1-csf#27, but we can deal with it ourselves since we know what the problem is. Please continues with conflict resolution so we can finalize the merge.

[paboden]

Hi @Jura I have all the merge conflicts figured out. This is ready for one last double check to make sure everything runs on windows. After that it's ready to go into 'develop'.

[Jura]

Both Yarn and NPM workflows are working fine now, merging