chore: upgrade storybook to v7

.storybook/main.ts

@@ -0,0 +1,92 @@
+import { buildNuxt, loadNuxt, tryUseNuxt } from '@nuxt/kit'
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  // Need to specify stories as workaround for https://github.com/storybookjs/storybook/issues/20761
+  stories: ['../components/*.stories.@(vue|ts)'],
+  core: {
+    disableTelemetry: true,
+  },
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  addons: ['storybook-vue-addon'],
+  async viteFinal(config) {
+    const nuxtViteConfig = (await startNuxtAndGetViteConfig()).viteConfig
+    // Need to remove the vue plugin as it conflicts with the one configured by nuxt
+    // it would be better to provide nuxt's config as the initial config to storybook,
+    // but this is not yet possible https://github.com/storybookjs/storybook/issues/20817
+    // Also need to remove storybook-vue-addon since it will be inserted by the storybook-vue-addon plugin
+    // TODO: Would be better if we would check there that the plugin is not already added
+    config.plugins = config.plugins.filter((plugin) => {
+      if (
+        plugin !== null &&
+        typeof plugin === 'object' &&
+        'name' in plugin &&
+        (plugin.name === 'vite:vue' || plugin.name === 'storybook-vue-addon')
+      ) {
+        return false
+      }
+      return true
+    })
+    return mergeConfig(
+      {
+        resolve: nuxtViteConfig.resolve,
+        optimizeDeps: nuxtViteConfig.optimizeDeps,
+        plugins: nuxtViteConfig.plugins,
+        define: nuxtViteConfig.define,
+      },
+      config
+    )
+  },
+}
+
+// https://github.com/nuxt/nuxt/issues/14534
+// From: https://github.com/danielroe/nuxt-vitest/blob/main/packages/nuxt-vitest/src/config.ts
+async function startNuxtAndGetViteConfig(rootDir = process.cwd()) {
+  let nuxt = tryUseNuxt()
+  let nuxtAlreadyRunnnig = true
+  if (!nuxt) {
+    nuxtAlreadyRunnnig = false
+    nuxt = await loadNuxt({
+      cwd: rootDir,
+      dev: false,
+      overrides: {
+        ssr: false,
+        app: {
+          rootId: 'nuxt-test',
+        },
+      },
+    })
+  }
+
+  const promise = new Promise<{ nuxt; viteConfig }>((resolve, reject) => {
+    nuxt.hook('vite:extendConfig', (viteConfig, { isClient }) => {
+      if (isClient) {
+        resolve({ nuxt, viteConfig })
+        if (!nuxtAlreadyRunnnig) {
+          throw new Error('_stop_')
+        }
+      }
+    })
+
+    // TODO: Need better handling if Nuxt is already running
+    // we don't really want to build nuxt again,
+    // or at least shutdown the second build after vite:extendConfig is called
+    buildNuxt(nuxt).catch((err) => {
+      if (!err.toString().includes('_stop_')) {
+        reject(err)
+      }
+    })
+  }).finally(() => {
+    if (!nuxtAlreadyRunnnig) {
+      nuxt.close()
+    }
+  })
+
+  return promise
+}
+
+export default config

.yarn/patches/eslint-scope-npm-7.1.1-23935eb377.patch

@@ -0,0 +1,46 @@
+diff --git a/package.json b/package.json
+index 737ba3874b19590bd4d8626f9faf0e237422406f..0b12dbb6555f3f9a5850fad8de25007538ed97e9 100644
+--- a/package.json
++++ b/package.json
+@@ -9,6 +9,41 @@
+       "import": "./lib/index.js",
+       "require": "./dist/eslint-scope.cjs"
+     },
++    "./lib/definition": {
++      "import": "./lib/definition.js",
++      "require": "./dist/eslint-scope.cjs",
++      "_comment": "needed due issues with @typescript-eslint, should be fixed in their next major release"
++    },
++    "./lib/pattern-visitor": {
++      "import": "./lib/pattern-visitor.js",
++      "require": "./dist/eslint-scope.cjs",
++      "_comment": "needed due issues with @typescript-eslint, should be fixed in their next major release"
++    },
++    "./lib/reference": {
++      "import": "./lib/reference.js",
++      "require": "./dist/eslint-scope.cjs",
++      "_comment": "needed due issues with @typescript-eslint, should be fixed in their next major release"
++    },
++    "./lib/referencer": {
++      "import": "./lib/referencer.js",
++      "require": "./dist/eslint-scope.cjs",
++      "_comment": "needed due issues with @typescript-eslint, should be fixed in their next major release"
++    },
++    "./lib/scope-manager": {
++      "import": "./lib/scope-manager.js",
++      "require": "./dist/eslint-scope.cjs",
++      "_comment": "needed due issues with @typescript-eslint, should be fixed in their next major release"
++    },
++    "./lib/scope": {
++      "import": "./lib/scope.js",
++      "require": "./dist/eslint-scope.cjs",
++      "_comment": "needed due issues with @typescript-eslint, should be fixed in their next major release"
++    },
++    "./lib/variable": {
++      "import": "./lib/variable.js",
++      "require": "./dist/eslint-scope.cjs",
++      "_comment": "needed due issues with @typescript-eslint, should be fixed in their next major release"
++    },
+     "./package.json": "./package.json"
+   },
+   "version": "7.1.1",

components/JabRefLogo.stories.vue

@@ -7,7 +7,7 @@ import JabRefLogo from './JabrefLogo.vue'
     title="JabRef Logo"
     :component="JabRefLogo"
   >
-    <Story title="Default">
+    <Story title="Standard">
       <JabRefLogo />
     </Story>
   </Stories>

components/n-button.stories.vue

@@ -6,7 +6,7 @@ import { NButton } from 'naive-ui'
     title="n-button"
     :component="NButton"
   >
-    <Story title="Default">
+    <Story title="Standard">
       <n-button>Button</n-button>
     </Story>
     <Story title="Error">

modules/storybook.ts

@@ -1,57 +1,26 @@
 import { Nuxt } from '@nuxt/schema'
-import type { StorybookConfig } from '@storybook/core-common'
-import { loadAllPresets } from '@storybook/core-common'
-import { defineNuxtModule, logger } from 'nuxt/kit'
-// @ts-expect-error: internal
-import { storybookDevServer } from '@storybook/core-server/dist/esm/dev-server'
-// @ts-expect-error: internal
-import { getManagerBuilder } from '@storybook/core-server/dist/esm/utils/get-manager-builder'
-// @ts-expect-error: internal
-import { getPreviewBuilder } from '@storybook/core-server/dist/esm/utils/get-preview-builder'
-// @ts-expect-error: internal
-import vueStorybook from '@storybook/vue3/dist/cjs/server/options'
+import { buildDevStandalone } from '@storybook/core-server'
+import { PackageJson } from '@storybook/types'
 import chalk from 'chalk'
 import { LogLevel } from 'consola'
+import { defineNuxtModule, logger } from 'nuxt/kit'
 import { withoutTrailingSlash } from 'ufo'
 
 const path = '/_storybook/'
-
-// This function is mostly taken from @storybook/core-server/build-dev
 async function startStorybookServer(nuxt: Nuxt, nuxtUrl: string) {
-  /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument */
+  // Load package.json
+  const packageJson = (await import(
+    nuxt.options.rootDir + '/package.json'
+  )) as PackageJson
+
   const options = {
-    ...vueStorybook,
     configDir: nuxt.options.rootDir + '/.storybook',
-    managerCache: false,
-    configType: 'DEVELOPMENT',
+    port: 3001,
     ignorePreview: true,
     previewUrl: withoutTrailingSlash(nuxtUrl) + path + 'external-iframe',
-    port: 3001,
-  }
-
-  const previewBuilder = await getPreviewBuilder(options.configDir)
-  const managerBuilder = await getManagerBuilder(options.configDir)
-  const presets = loadAllPresets({
-    corePresets: [
-      '@storybook/core-server/dist/cjs/presets/common-preset',
-      // require.resolve('./presets/common-preset'),
-      ...managerBuilder.corePresets,
-      ...previewBuilder.corePresets,
-      // require.resolve('./presets/babel-cache-preset'),
-    ],
-    overridePresets: previewBuilder.overridePresets,
-    ...options,
-  })
-
-  const features = await presets.apply<StorybookConfig['features']>('features')
-  // global.FEATURES = features
-  const fullOptions = {
-    presets,
-    features,
-    ...options,
+    packageJson,
   }
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return await storybookDevServer(fullOptions)
+  return await buildDevStandalone(options)
 }
 
 // TODO: Finish storybook as module
@@ -109,7 +78,7 @@ configure(() => {
       },
     })
     */
-    nuxt.hook('listen', async (_, listener) => {
+    nuxt.hook('listen', async (_, listener: { url: string }) => {
       // const fullPath = `${withoutTrailingSlash(listener.url)}${path}`
       // logger.info(`Storybook: ${chalk.underline.yellow(fullPath)}`)
       if (nuxt.options.dev) {

nuxt.config.ts

@@ -156,6 +156,10 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    // Workaround for https://github.com/browserify/node-util/pull/62
+    define: {
+      'process.env': {},
+    },
     server: {
       // Configure vite for HMR with Gitpod
       // Taken from https://github.com/vitejs/vite/issues/1653#issuecomment-1079322770

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxi dev",
+    "dev": "nuxi dev",
     "build": "nuxi build --fail-on-error",
     "build:azure": "cross-env INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN=test NITRO_PRESET=azure yarn build",
     "start": "nuxi preview",
@@ -23,8 +23,8 @@
     "prisma:studio": "prisma studio",
     "prisma:generate": "prisma generate",
     "prisma:generate:watch": "prisma generate --watch",
-    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 --preview-url=http://localhost:3000/_storybook/external-iframe --no-manager-cache",
-    "storybook:build": "build-storybook",
+    "storybook": "storybook dev -p 6006 --preview-url=http://localhost:3000/_storybook/external-iframe --no-manager-cache",
+    "storybook:build": "storybook build",
     "storybook:publish": "chromatic --exit-zero-on-changes --build-script-name storybook:build",
     "graphql:generate": "graphql-codegen-esm",
     "graphql:generate:watch": "graphql-codegen-esm --watch",
@@ -100,8 +100,9 @@
     "@nuxtjs/eslint-config": "^12.0.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@nuxtjs/tailwindcss": "6.6.0",
-    "@storybook/builder-vite": "^0.4.2",
-    "@storybook/vue3": "^6.5.15",
+    "@storybook/core-server": "^7.0.0-rc.4",
+    "@storybook/vue3": "^7.0.0-rc.4",
+    "@storybook/vue3-vite": "7.0.0-rc.4",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
@@ -144,7 +145,8 @@
     "prettier-plugin-organize-imports": "^3.2.1",
     "prisma": "^4.11.0",
     "redis-mock": "^0.56.3",
-    "storybook-vue-addon": "^0.1.1",
+    "storybook": "7.0.0-rc.4",
+    "storybook-vue-addon": "^0.2.1",
     "supertest": "^6.3.3",
     "supertest-graphql": "^1.1.4",
     "ufo": "^1.1.1",
@@ -163,7 +165,9 @@
     "tslib": "^2.4.0",
     "@nuxt/content": "patch:@nuxt/content@npm%3A2.4.3#./.yarn/patches/@nuxt-content-npm-2.4.3-36a92b2a56.patch",
     "uuid@^8.3.0": "^9.0.0",
-    "uuid@^8.3.2": "^9.0.0"
+    "uuid@^8.3.2": "^9.0.0",
+    "eslint-scope@^7.1.1": "patch:eslint-scope@npm%3A7.1.1#./.yarn/patches/eslint-scope-npm-7.1.1-23935eb377.patch",
+    "eslint-scope@^5.1.1": "patch:eslint-scope@npm%3A7.1.1#./.yarn/patches/eslint-scope-npm-7.1.1-23935eb377.patch"
   },
   "resolutionsComments": {
     "@types/react": "Otherwise these types interfere with the types from vite: https://github.com/johnsoncodehk/volar/discussions/592#discussioncomment-1580518",

pages/_storybook/external-iframe.vue

@@ -1,7 +1,8 @@
 <template>
+  <!-- Based on https://github.com/storybookjs/storybook/blob/next/code/lib/builder-vite/input/iframe.html -->
   <div>
-    <div id="root"></div>
-    <div id="docs-root"></div>
+    <div id="storybook-root"></div>
+    <div id="storybook-docs"></div>
     <div class="sb-errordisplay sb-wrapper">
       <div
         id="error-message"
@@ -14,10 +15,11 @@
 <script lang="ts">
 // Based on https://github.com/storybookjs/storybook/tree/next/examples/standalone-preview
 // The idea is that we use nuxt to render the stories
-import { RenderContext, start } from '@storybook/core-client'
-import { VueFramework } from '@storybook/vue3'
+import { start } from '@storybook/core-client'
+import type { RenderContext } from '@storybook/types'
+import { VueRenderer } from '@storybook/vue3'
 // @ts-expect-error: This is not officially exported to use ugly workaround
-import { decorateStory } from '@storybook/vue3/dist/esm/client/preview/decorateStory'
+import { applyDecorators } from '@storybook/vue3/preview'
 import { mount } from 'mount-vue-component'
 import * as JabRefLogoStories from '~/components/JabRefLogo.stories.vue'
 import * as NButtonStories from '~/components/n-button.stories.vue'
@@ -32,8 +34,8 @@ import * as TTableStories from '~/components/t-table.stories'
 import * as TTagStories from '~/components/t-tag.stories'
 import * as TTextareaStories from '~/components/t-textarea.stories'
 
-export function renderToDOM(
-  { title, name, storyFn, showMain, showError }: RenderContext<VueFramework>,
+export function renderToCanvas(
+  { title, name, storyFn, showMain, showError }: RenderContext<VueRenderer>,
   domElement: HTMLElement
 ): void {
   const element = storyFn()
@@ -55,12 +57,13 @@ export function renderToDOM(
 }
 // @ts-expect-error: storybook typing is inconsistent
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const api = start(renderToDOM, { decorateStory })
+const api = start(renderToCanvas, { applyDecorators })
 const framework = 'vue3'
 definePageMeta({ layout: false, alias: '/iframe.html' })
 
 export default defineComponent({
   setup: () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     api.configure(
       framework,
       () => [
@@ -77,7 +80,8 @@ export default defineComponent({
         TTagStories,
         TTextareaStories,
       ],
-      undefined
+      undefined,
+      false
     )
   },
 })