Re-add commits for upgrade to storybook 10.x

.github/workflows/pull-request-workflow.yml

@@ -47,15 +47,13 @@ jobs:
     needs: lint-and-test
     secrets:
       SMOKE_TESTS_CHROMATIC_PROJECT_TOKEN: ${{ secrets.SMOKE_TESTS_CHROMATIC_PROJECT_TOKEN }}
-
-  smoke-test-node-18:
-    uses: ./.github/workflows/smoke-test-node18.yml
+  smoke-test-node-20:
+    uses: ./.github/workflows/smoke-test-node20.yml
     needs: lint-and-test
     secrets:
       SMOKE_TESTS_CHROMATIC_PROJECT_TOKEN: ${{ secrets.SMOKE_TESTS_CHROMATIC_PROJECT_TOKEN }}
-
-  smoke-test-node-20:
-    uses: ./.github/workflows/smoke-test-node20.yml
+  smoke-test-node-22:
+    uses: ./.github/workflows/smoke-test-node22.yml
     needs: lint-and-test
     secrets:
       SMOKE_TESTS_CHROMATIC_PROJECT_TOKEN: ${{ secrets.SMOKE_TESTS_CHROMATIC_PROJECT_TOKEN }}

.github/workflows/smoke-test-node18.yml → .github/workflows/smoke-test-node22.yml

@@ -1,4 +1,4 @@
-name: Smoke test via Node 18
+name: Smoke test via Node 22
 
 on:
   workflow_call:
@@ -18,7 +18,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 22
       - run: yarn
       - run: yarn build
       - uses: ./

.storybook-test/main.ts

@@ -0,0 +1,18 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../test-stories/*.stories.*'],
+  addons: [
+    '@storybook/addon-docs'
+  ],
+  framework: { 
+    name: '@storybook/react-vite', 
+    options: {}
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  staticDirs: ['../static'],
+};
+
+export default config;

.storybook/main.ts

@@ -1,28 +1,43 @@
-import { StorybookConfig } from '@storybook/react-webpack5';
+import { StorybookConfig } from '@storybook/html-vite';
+import { fileURLToPath } from 'node:url';
 
 const config: StorybookConfig = {
-  stories: process.env.SMOKE_TEST
-    ? ['../test-stories/*.stories.*']
-    : ['../node-src/**/*.@(mdx|stories.*)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-webpack5-compiler-swc'],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
+  stories: ['../node-src/**/*.@(mdx|stories.*)'],
+  addons: [
+    '@storybook/addon-docs'
+  ],
+  framework: { 
+    name: '@storybook/html-vite', 
+    options: {}
   },
-  webpackFinal: async (config) => {
+  viteFinal: async (config) => {
     config.resolve = {
       ...config.resolve,
-      fallback: {
-        ...config?.resolve?.fallback,
-        os: require.resolve('os-browserify/browser'),
+      alias: {
+        ...config.resolve?.alias,
+        os: fileURLToPath(import.meta.resolve('os-browserify/browser')),
       },
     };
-
     return config;
   },
-  docs: {},
+  previewHead: (head) => {
+    return head + `
+    <link href="./css/global.css" rel="stylesheet" />
+
+    <script>
+      window.process = {
+        env: {
+          CI: '1',
+          NODE_ENV: 'production',
+          STORYBOOK_INVOKED_BY: 'chromatic',
+          TERM: 'xterm-256color',
+        },
+        platform: '${process.platform}',
+      };
+    </script>
+    `;
+  },
   typescript: {
-    reactDocgen: 'react-docgen-typescript',
   },
   staticDirs: ['../static'],
 };

.storybook/preview.ts

@@ -0,0 +1,51 @@
+/* eslint-env browser */
+import type { Preview } from '@storybook/html-vite';
+
+import ansiHTML from 'ansi-html';
+import chalk from 'chalk';
+
+ansiHTML.setColors({
+  reset: ['c0c4cd', '16242c'],
+  black: '16252b',
+  red: 'ec5e66',
+  green: '99c793',
+  yellow: 'fac862',
+  blue: '6699cb',
+  magenta: 'c593c4',
+  cyan: '5fb3b2',
+});
+
+// @ts-expect-error chalk is not fully typed
+chalk.enabled = true;
+
+chalk.level = 3;
+
+const decorators = [
+  (storyFn, { kind }) => {
+    const value = storyFn();
+    console.log({value, kind});
+    if (kind.startsWith('CLI/')) {
+      document.body.style.backgroundColor = '#16242c';
+      return `<pre class="code-style"><code>${ansiHTML(value)}</code></pre>`;
+    }
+    if (kind.startsWith('HTML/')) {
+      document.body.style.backgroundColor = '#F6F9FC';
+      return `<div class="html-style">${value}</div>`;
+    }
+    document.body.style.backgroundColor = 'paleturquoise';
+    return value;
+  },
+];
+
+ const tags = ['autodocs', 'autodocs'];
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators,
+  tags,
+};
+
+export default preview;
+

.vscode/settings.json

@@ -4,5 +4,6 @@
     "hichroma",
     "opensource",
     "rebased"
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

bin-src/init.test.ts

@@ -11,7 +11,6 @@ import {
 
 vi.mock('jsonfile', async (importOriginal) => {
   return {
-    // @ts-expect-error TS does not think actual is an object, but it's fine.
     ...(await importOriginal()),
     writeFile: vi.fn(() => Promise.resolve()),
   };