From b26b7ff9df3685b0fd9d228e28d14e7a4d7f2746 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Mon, 12 Aug 2024 01:27:07 +0200 Subject: [PATCH 1/4] feat: export types also from `@nuxtjs/storybook` --- package.json | 2 +- packages/nuxt-module/src/module.ts | 2 ++ .../storybook-addon/.storybook/tsconfig.json | 29 ------------------- packages/storybook-addon/src/index.ts | 1 - packages/storybook-addon/src/types.d.ts | 10 ------- packages/storybook-addon/tsconfig.json | 4 +-- 6 files changed, 5 insertions(+), 43 deletions(-) delete mode 100644 packages/storybook-addon/.storybook/tsconfig.json diff --git a/package.json b/package.json index 71091d18..fa8f5fc2 100755 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "example:showcase:build": "pnpm run --filter=./examples/showcase/** build", "example:showcase:storybook:build": "pnpm run --filter=./examples/showcase/** build-storybook", "example:showcase:storybook:publish": "chromatic --exit-zero-on-changes --build-script-name example:showcase:storybook:build --project-token=chpt_a53adf402cb628c", - "build": "pnpm run --recursive --filter=./packages/* --parallel build", + "build": "pnpm run --recursive --filter=./packages/* build", "package": "cd ./packages/storybook-addon && pnpm pack && cd ../nuxt-module && pnpm pack", "lint": "pnpm lint:eslint && pnpm lint:prettier", "lint:eslint": "eslint --max-warnings=0 --report-unused-disable-directives .", diff --git a/packages/nuxt-module/src/module.ts b/packages/nuxt-module/src/module.ts index 10ae4e92..a6040660 100644 --- a/packages/nuxt-module/src/module.ts +++ b/packages/nuxt-module/src/module.ts @@ -4,6 +4,8 @@ import { logger } from './logger' import { setupStorybook } from './storybook' +export type * from '@storybook-vue/nuxt' + export interface ModuleOptions { /** * The route where the Storybook application will be available in development mode. diff --git a/packages/storybook-addon/.storybook/tsconfig.json b/packages/storybook-addon/.storybook/tsconfig.json deleted file mode 100644 index a39c57a2..00000000 --- a/packages/storybook-addon/.storybook/tsconfig.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "compileOnSave": false, - "compilerOptions": { - "incremental": false, - "noImplicitAny": true, - "forceConsistentCasingInFileNames": true, - "jsx": "react", - "moduleResolution": "Node", - "target": "ES2020", - "module": "CommonJS", - "skipLibCheck": false, - "allowSyntheticDefaultImports": true, - "esModuleInterop": true, - "isolatedModules": true, - "strictBindCallApply": true, - "lib": ["dom", "dom.iterable", "esnext"], - "noUnusedLocals": true, - - "strict": true - }, - "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"], - "ts-node": { - "transpileOnly": true, - "files": true, - "compilerOptions": { - "types": ["node"] - } - } -} diff --git a/packages/storybook-addon/src/index.ts b/packages/storybook-addon/src/index.ts index 54105004..b1d04a2c 100644 --- a/packages/storybook-addon/src/index.ts +++ b/packages/storybook-addon/src/index.ts @@ -1,3 +1,2 @@ -// Path: src/types.d.ts'; export * from '@storybook/vue3' export * from './types.d' diff --git a/packages/storybook-addon/src/types.d.ts b/packages/storybook-addon/src/types.d.ts index 2387e90e..9a610abf 100644 --- a/packages/storybook-addon/src/types.d.ts +++ b/packages/storybook-addon/src/types.d.ts @@ -1,12 +1,4 @@ import type { StorybookConfig as StorybookConfigBase } from '@storybook/types' -import type { - Preview, - StoryFn, - StoryObj, - VueRenderer, - Meta, - DecoratorFunction, -} from '@storybook/vue3' import type { FrameworkOptions as FrameworkOptionsVue } from '@storybook/vue3-vite' import type { StorybookConfigVite } from '@storybook/builder-vite' @@ -40,5 +32,3 @@ export type StorybookConfig = Omit< > & StorybookConfigVite & StorybookConfigFramework - -export { Meta, StoryFn, StoryObj, Preview, VueRenderer, DecoratorFunction } diff --git a/packages/storybook-addon/tsconfig.json b/packages/storybook-addon/tsconfig.json index 14567226..00fc9ddc 100644 --- a/packages/storybook-addon/tsconfig.json +++ b/packages/storybook-addon/tsconfig.json @@ -1,11 +1,11 @@ { - "extends": "./.storybook/tsconfig.json", "compilerOptions": { "rootDir": "./src", "target": "ESNext", "module": "ESNext", "types": ["vite/client"], - "skipLibCheck": true, + "skipLibCheck": false, + "moduleResolution": "Bundler", "resolveJsonModule": true, "strict": true, "paths": { From 42a01c0b32b1fb6830b6ed45b592b20a63784aab Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Tue, 13 Aug 2024 14:17:11 +0200 Subject: [PATCH 2/4] update module builder --- packages/nuxt-module/package.json | 2 +- pnpm-lock.yaml | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/nuxt-module/package.json b/packages/nuxt-module/package.json index 543a7d2a..85e38e95 100644 --- a/packages/nuxt-module/package.json +++ b/packages/nuxt-module/package.json @@ -57,7 +57,7 @@ "ufo": "^1.5.3" }, "devDependencies": { - "@nuxt/module-builder": "0.8.1", + "@nuxt/module-builder": "0.8.3", "vite": "5.4.0", "unbuild": "2.0.0" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 09bca5b3..d9542f6f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -236,8 +236,8 @@ importers: version: 1.5.4 devDependencies: '@nuxt/module-builder': - specifier: 0.8.1 - version: 0.8.1(@nuxt/kit@3.12.4(magicast@0.3.4)(rollup@3.29.4))(nuxi@3.12.0)(sass@1.77.7)(typescript@5.5.4)(vue-tsc@2.0.29(typescript@5.5.4)) + specifier: 0.8.3 + version: 0.8.3(@nuxt/kit@3.12.4(magicast@0.3.4)(rollup@3.29.4))(nuxi@3.12.0)(sass@1.77.7)(typescript@5.5.4)(vue-tsc@2.0.29(typescript@5.5.4)) unbuild: specifier: 2.0.0 version: 2.0.0(sass@1.77.7)(typescript@5.5.4)(vue-tsc@2.0.29(typescript@5.5.4)) @@ -1868,11 +1868,11 @@ packages: resolution: {integrity: sha512-aNRD1ylzijY0oYolldNcZJXVyxdGzNTl+Xd0UYyFQCu9f4wqUZqQ9l+b7arCEzchr96pMK0xdpvLcS3xo1wDcw==} engines: {node: ^14.18.0 || >=16.10.0} - '@nuxt/module-builder@0.8.1': - resolution: {integrity: sha512-pWIRF2x6zx63WEh3z7zM37CTfwhsWz21QnFWOeLacqDIBF1G92cRxF5BiS8mn7qfybFop8HRyZGzGDQeCsI20A==} + '@nuxt/module-builder@0.8.3': + resolution: {integrity: sha512-m9W3P6f6TFnHmVFKRo/2gELWDi3r0k8i93Z1fY5z410GZmttGVPv8KgRgOgC79agRi/OtpbyG3BPRaWdbDZa5w==} hasBin: true peerDependencies: - '@nuxt/kit': ^3.12.2 + '@nuxt/kit': ^3.12.4 nuxi: ^3.12.0 '@nuxt/schema@3.12.4': @@ -10386,7 +10386,7 @@ snapshots: - rollup - supports-color - '@nuxt/module-builder@0.8.1(@nuxt/kit@3.12.4(magicast@0.3.4)(rollup@3.29.4))(nuxi@3.12.0)(sass@1.77.7)(typescript@5.5.4)(vue-tsc@2.0.29(typescript@5.5.4))': + '@nuxt/module-builder@0.8.3(@nuxt/kit@3.12.4(magicast@0.3.4)(rollup@3.29.4))(nuxi@3.12.0)(sass@1.77.7)(typescript@5.5.4)(vue-tsc@2.0.29(typescript@5.5.4))': dependencies: '@nuxt/kit': 3.12.4(magicast@0.3.4)(rollup@3.29.4) citty: 0.1.6 From 9e4bf725a01e8de3453492a856d02806e06d1889 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Tue, 13 Aug 2024 19:58:46 +0200 Subject: [PATCH 3/4] add docs --- .vscode/settings.json | 2 +- .../content/1.getting-started/3.typescript.md | 46 +++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 docs/content/1.getting-started/3.typescript.md diff --git a/.vscode/settings.json b/.vscode/settings.json index 345516fe..6835316f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "cSpell.words": ["composables", "dedupe", "nuxt", "ofetch", "Pinia"] + "cSpell.words": ["composables", "dedupe", "nuxt", "nuxtjs", "ofetch", "Pinia"] } diff --git a/docs/content/1.getting-started/3.typescript.md b/docs/content/1.getting-started/3.typescript.md new file mode 100644 index 00000000..e43f311d --- /dev/null +++ b/docs/content/1.getting-started/3.typescript.md @@ -0,0 +1,46 @@ +--- +title: 'TypeScript' +description: 'Guide on how to use TypeScript with the Nuxt module' +--- + +To use the Nuxt module with TypeScript, ensure that imports typically from `@storybook/*` are now replaced by imports from `@nuxtjs/storybook` (or `@storybook-vue/nuxt` if the Nuxt module is not used). This is needed since the Storybook packages are dependencies of the Nuxt module, and are not directly installed in the project. + +The following example demonstrates how to use types when configuring Storybook and for writing stories. + +::code-group + +```typescript [.storybook/main.ts] +import { StorybookConfig } from '@nuxtjs/storybook' // not from '@storybook/core-common' + +export default { + stories: ['../components/**/*.stories.ts'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + framework: '@storybook/vue3', +} as StorybookConfig +``` + +```typescript [components/Button.stories.ts] +import { Meta, Story } from '@nuxtjs/storybook' // not from '@storybook/vue' +import Button from './Button.vue' + +export default { + title: 'Example/Button', + component: Button, +} as Meta + +const Template: Story = (args) => ({ + components: { Button }, + setup() { + return { args } + }, + template: '