From f2ce9fda71544d4e6ff1e5b3551548a5545b75bf Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Tue, 24 Jan 2023 12:00:50 +0800 Subject: [PATCH 01/27] chore: upgrade storybook to v7 Fixes #1672 --- .storybook/main.cjs | 11 +- modules/storybook.ts | 49 +- nuxt.config.ts | 4 + package.json | 12 +- pages/_storybook/external-iframe.vue | 11 +- yarn.lock | 6963 +++++++------------------- 6 files changed, 1838 insertions(+), 5212 deletions(-) diff --git a/.storybook/main.cjs b/.storybook/main.cjs index b4c650a04..d6c963306 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -1,8 +1,9 @@ module.exports = { core: { - // Disable telemetry collection - disableTelemetry: true, - // Use vite as builder - builder: '@storybook/builder-vite', + disableTelemetry: true }, -} + framework: { + name: "@storybook/vue3-vite", + options: {} + } +}; \ No newline at end of file diff --git a/modules/storybook.ts b/modules/storybook.ts index 29ea9de8a..d2b6f6e0d 100644 --- a/modules/storybook.ts +++ b/modules/storybook.ts @@ -1,15 +1,16 @@ import { defineNuxtModule, logger } from '@nuxt/kit' import { Nuxt } from '@nuxt/schema' -import type { StorybookConfig } from '@storybook/core-common' -import { loadAllPresets } from '@storybook/core-common' +import { + loadAllPresets, + resolveAddonName, + StorybookConfig, +} from '@storybook/core-common' // @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 * as managerBuilder from '@storybook/builder-manager' +import * as previewBuilder from '@storybook/builder-vite' +import { storybookDevServer } from '@storybook/core-server' +// import * as vueRenderer from '@storybook/vue3' +// import vueStorybook from '@storybook/vue3/dist/cjs/server/options' import chalk from 'chalk' import { LogLevel } from 'consola' import { withoutTrailingSlash } from 'ufo' @@ -20,24 +21,31 @@ const path = '/_storybook/' 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 */ const options = { - ...vueStorybook, + // ...vueStorybook, configDir: nuxt.options.rootDir + '/.storybook', managerCache: false, configType: 'DEVELOPMENT', ignorePreview: true, previewUrl: withoutTrailingSlash(nuxtUrl) + path + 'external-iframe', port: 3001, + stories: ['**/*.stories.*'], + packageJson: { + name: 'nuxt-storybook', + }, + features: { + storyStoreV7: false, + }, } - const previewBuilder = await getPreviewBuilder(options.configDir) - const managerBuilder = await getManagerBuilder(options.configDir) - const presets = loadAllPresets({ + const presets = await loadAllPresets({ corePresets: [ - '@storybook/core-server/dist/cjs/presets/common-preset', - // require.resolve('./presets/common-preset'), + '@storybook/core-server/dist/presets/common-preset', ...managerBuilder.corePresets, - ...previewBuilder.corePresets, - // require.resolve('./presets/babel-cache-preset'), + ...(previewBuilder.corePresets || []), + resolveAddonName(options.configDir, '@storybook/vue3', options), + // ...corePresets, + '@storybook/vue3-vite/preset', + // require.resolve('@storybook/core-server/dist/presets/babel-cache-preset'), ], overridePresets: previewBuilder.overridePresets, ...options, @@ -46,9 +54,12 @@ async function startStorybookServer(nuxt: Nuxt, nuxtUrl: string) { const features = await presets.apply('features') // global.FEATURES = features const fullOptions = { - presets, - features, ...options, + presets, + features: { + ...features, + storyStoreV7: false, + }, } // eslint-disable-next-line @typescript-eslint/no-unsafe-return return await storybookDevServer(fullOptions) diff --git a/nuxt.config.ts b/nuxt.config.ts index 38e11e0d4..41207bbc3 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -153,6 +153,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 diff --git a/package.json b/package.json index 40fa7ca7c..249466f24 100644 --- a/package.json +++ b/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", @@ -101,8 +101,9 @@ "@nuxtjs/eslint-config": "^12.0.0", "@nuxtjs/eslint-config-typescript": "^12.0.0", "@nuxtjs/tailwindcss": "6.2.0", - "@storybook/builder-vite": "^0.2.6", - "@storybook/vue3": "^6.5.15", + "@storybook/core-server": "^7.0.0-beta.31", + "@storybook/vue3": "^7.0.0-beta.31", + "@storybook/vue3-vite": "7.0.0-beta.31", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/line-clamp": "^0.4.2", "@tailwindcss/typography": "^0.5.8", @@ -145,6 +146,7 @@ "prettier-plugin-organize-imports": "^3.2.1", "prisma": "^4.8.1", "redis-mock": "^0.56.3", + "storybook": "7.0.0-beta.31", "supertest": "^6.3.3", "supertest-graphql": "^1.1.4", "ufo": "^1.0.1", diff --git a/pages/_storybook/external-iframe.vue b/pages/_storybook/external-iframe.vue index 1bdd31f5d..52af991ba 100644 --- a/pages/_storybook/external-iframe.vue +++ b/pages/_storybook/external-iframe.vue @@ -1,7 +1,7 @@