Chromatic storybook deployment fails

[igarashitm]

Please describe the task that needs to be done

Found 2 problems around storybook:

Chromatic

It says it succeeds to publish storybook, but fails to verify
https://github.com/igarashitm/kaoto-ui/actions/runs/5536189762/jobs/10103512962

Publish complete in 12 seconds
    → View your Storybook at https://61040cd029d0ce003b570dad-umavylxlry.chromatic.com/
Verifying your Storybook
    → This may take a few minutes
    → [*                   ]
    → [ *                  ]
    → [  *                 ]
    → [   *                ]
    → [    *               ]
    → [     *              ]
    → [      *             ]
    → [       *            ]
    → [        *           ]
✖ Failed to extract stories from your Storybook
This is usually a problem with your published Storybook, not with Chromatic.

Build and open your Storybook locally and check the browser console for errors.
Visit your published Storybook at https://61040cd029d0ce003b570dad-umavylxlry.chromatic.com
The following error was encountered while running your Storybook:

Error: page.evaluate: ReferenceError: KAOTO_API is not defined
    at ./src/api/index.ts (https://61040cd029d0ce003b570dad-umavylxlry.capture.chromatic.com/2313.4b9e059e.iframe.bundle.js:1:2236)
    at __webpack_require__ (https://61040cd029d0ce003b570dad-umavylxlry.capture.chromatic.com/runtime~main.c9704254.iframe.bundle.js:1:381)
    at ./src/services/stepsService.ts (https://61040cd029d0ce003b570dad-umavylxlry.capture.chromatic.com/2313.4b9e059e.iframe.bundle.js:1:9675)
    at __webpack_require__ (https://61040cd029d0ce003b570dad-umavylxlry.capture.chromatic.com/runtime~main.c9704254.iframe.bundle.js:1:381)
    at ./src/services/visualizationService.ts (https://61040cd029d0ce003b570dad-umavylxlry.capture.chromatic.com/2313.4b9e059e.iframe.bundle.js:1:27088)
    at __webpack_require__ (https://61040cd029d0ce003b570dad-umavylxlry.capture.chromatic.com/runtime~main.c9704254.iframe.bundle.js:1:381)
    at ./src/store/index.ts (https://61040cd029d0ce003b570dad-umavylxlry.capture.chromatic.com/2313.4b9e059e.iframe.bundle.js:1:430[52](https://github.com/igarashitm/kaoto-ui/actions/runs/5536189762/jobs/10103512962#step:4:53))
    at __webpack_require__ (https://61040cd029d0ce003b570dad-umavylxlry.capture.chromatic.com/runtime~main.c97042[54](https://github.com/igarashitm/kaoto-ui/actions/runs/5536189762/jobs/10103512962#step:4:55).iframe.bundle.js:1:381)
    at ./src/hooks/index.ts (https://61040cd029d0ce003b[57](https://github.com/igarashitm/kaoto-ui/actions/runs/5536189762/jobs/10103512962#step:4:58)0dad-umavylxlry.capture.chromatic.com/components-Catalog-stories.234a9d8a.iframe.bundle.js:1:20816)
    at __webpack_require__ (https://[61](https://github.com/igarashitm/kaoto-ui/actions/runs/5536189762/jobs/10103512962#step:4:62)040cd029d0ce003b5[70](https://github.com/igarashitm/kaoto-ui/actions/runs/5536189762/jobs/10103512962#step:4:71)dad-umavylxlry.capture.chromatic.com/runtime~main.c9704254.iframe.bundle.js:1:381)
    → Failed to publish build
Error: non-zero exit code

No idea why Chromatic CLI complains about KAOTO_API...

yarn build:storybook

While yarn storybook works fine, if I run yarn build:storybook and open storybook-static/index.html with the browser, it's white screen with lots of console error about CORS

Access to script at 'file:///home/tomo/workspace/Kaoto/kaoto-ui/storybook-static/sb-manager/runtime.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
runtime.js:1     Failed to load resource: net::ERR_FAILED
index.html:55 Access to script at 'file:///home/tomo/workspace/Kaoto/kaoto-ui/storybook-static/sb-addons/essentials-controls-0/manager-bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
manager-bundle.js:1     Failed to load resource: net::ERR_FAILED
index.html:55 Access to script at 'file:///home/tomo/workspace/Kaoto/kaoto-ui/storybook-static/sb-addons/essentials-actions-1/manager-bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
manager-bundle.js:1     Failed to load resource: net::ERR_FAILED

UPDATE:
OK storybook-static is not supposed to be opened through file:///, now the problem is only about the Chromatic failure
storybookjs/storybook#21978

[igarashitm]

This shows same errors I can see in Chromatic deployment that fails to verify
yarn build:storybook; npx http-server ./storybook-static

[igarashitm]

hmm I thought this should work, but it doesn't...

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 1ec250fd..eb6e71d7 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -68,9 +67,10 @@ module.exports = {
     updatedConfig.plugins.push(
       new webpack.DefinePlugin({
         KAOTO_VERSION: JSON.stringify(version),
+        KAOTO_API: JSON.stringify('/api'),
       }),
     );
 
     return updatedConfig;