diff --git a/.storybook/decorators.ts b/.storybook/decorators.ts new file mode 100644 index 000000000..270cdec3a --- /dev/null +++ b/.storybook/decorators.ts @@ -0,0 +1,20 @@ +import AppFooter from '~/components/AppFooter.vue' +import AppHeader from '~/components/AppHeader.vue' + +/** + * Wraps a page story with the standard site chrome: AppHeader, main content + * area, and AppFooter. Use this for any full-page story so the layout stays + * consistent and changes only need to be made in one place. + */ +export const pageDecorator = () => ({ + components: { AppHeader, AppFooter }, + template: ` +
+ +
+ +
+ +
+ `, +}) diff --git a/app/pages/about.stories.ts b/app/pages/about.stories.ts index b895ba8e7..01ee6cd73 100644 --- a/app/pages/about.stories.ts +++ b/app/pages/about.stories.ts @@ -1,27 +1,13 @@ import About from './about.vue' import type { Meta, StoryObj } from '@storybook-vue/nuxt' -import AppHeader from '~/components/AppHeader.vue' -import AppFooter from '~/components/AppFooter.vue' +import { pageDecorator } from '#storybook/decorators' const meta = { component: About, parameters: { layout: 'fullscreen', }, - decorators: [ - () => ({ - components: { AppHeader, AppFooter }, - template: ` -
- -
- -
- -
- `, - }), - ], + decorators: [pageDecorator], } satisfies Meta export default meta diff --git a/app/pages/accessibility.stories.ts b/app/pages/accessibility.stories.ts index bfd096859..d3b585638 100644 --- a/app/pages/accessibility.stories.ts +++ b/app/pages/accessibility.stories.ts @@ -1,27 +1,13 @@ import Accessibility from './accessibility.vue' import type { Meta, StoryObj } from '@storybook-vue/nuxt' -import AppHeader from '~/components/AppHeader.vue' -import AppFooter from '~/components/AppFooter.vue' +import { pageDecorator } from '#storybook/decorators' const meta = { component: Accessibility, parameters: { layout: 'fullscreen', }, - decorators: [ - () => ({ - components: { AppHeader, AppFooter }, - template: ` -
- -
- -
- -
- `, - }), - ], + decorators: [pageDecorator], } satisfies Meta export default meta diff --git a/app/pages/privacy.stories.ts b/app/pages/privacy.stories.ts new file mode 100644 index 000000000..a39c41da1 --- /dev/null +++ b/app/pages/privacy.stories.ts @@ -0,0 +1,16 @@ +import Privacy from './privacy.vue' +import type { Meta, StoryObj } from '@storybook-vue/nuxt' +import { pageDecorator } from '#storybook/decorators' + +const meta = { + component: Privacy, + parameters: { + layout: 'fullscreen', + }, + decorators: [pageDecorator], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = {} diff --git a/nuxt.config.ts b/nuxt.config.ts index 4ca8c8544..843ea63f7 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -351,6 +351,7 @@ export default defineNuxtConfig({ allowImportingTsExtensions: true, paths: { '#cli/*': ['../cli/src/*'], + '#storybook/*': ['../.storybook/*'], }, }, include: ['../test/unit/app/**/*.ts'], diff --git a/package.json b/package.json index 5c80943cf..f37afe3c7 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,9 @@ "url": "https://roe.dev" }, "type": "module", + "imports": { + "#storybook/*": "./.storybook/*" + }, "scripts": { "build": "nuxt build", "build:test": "NODE_ENV=test vp run build",