diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 85c78f2be..de2b72c4e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -121,14 +121,11 @@ jobs: TEST_URL: http://localhost:3000 - name: Build Storybook - run: | - pnpm nuxi generate - pnpm storybook:build - cp .output/public/_storybook/external-iframe/index.html storybook-static/iframe.html - mkdir -p storybook-static/_storybook/external-iframe - cp -r .output/public/_nuxt storybook-static + if: always() + run: pnpm storybook:build - name: Publish and test Storybook + if: always() uses: chromaui/action@64a9c0ca3bfb724389b0d536e544f56b7b5ff5b3 # v11 with: projectToken: 'b3787adf2fa5' diff --git a/.storybook/main.ts b/.storybook/main.ts index fec0f75cf..d090fd58d 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,90 +1,16 @@ -import type { StorybookConfig } from '@storybook/vue3-vite' -import { mergeConfig } from 'vite' +import type { StorybookConfig } from '@nuxtjs/storybook' const config: StorybookConfig = { // Need to specify stories as workaround for https://github.com/storybookjs/storybook/issues/20761 stories: ['../components/*.stories.@(vue|ts)'], core: { + // @ts-expect-error - need to update storybook types disableTelemetry: true, }, + addons: ['storybook-vue-addon', '@chromatic-com/storybook'], framework: { - name: '@storybook/vue3-vite', + name: '@storybook-vue/nuxt', options: {}, }, - addons: ['storybook-vue-addon'], - async viteFinal(config) { - const nuxtViteConfig = (await startNuxtAndGetViteConfig()).viteConfig - // 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 === '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()) { - // Use dynamic import as a workaround for https://github.com/storybookjs/storybook/issues/23972 - const { buildNuxt, loadNuxt, tryUseNuxt } = await import('@nuxt/kit') - 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 diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 000000000..8483d9577 --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,3 @@ +export default { + tags: ['autodocs'], +} diff --git a/chromatic.config.json b/chromatic.config.json new file mode 100644 index 000000000..5384a7539 --- /dev/null +++ b/chromatic.config.json @@ -0,0 +1,4 @@ +{ + "projectId": "Project:61142988527d34003b1e783d", + "zip": true +} diff --git a/components/JabRefLogo.stories.vue b/components/JabRefLogo.stories.vue index 076b44dbf..eaa4062f3 100644 --- a/components/JabRefLogo.stories.vue +++ b/components/JabRefLogo.stories.vue @@ -3,7 +3,6 @@ import JabRefLogo from './JabrefLogo.vue'