Merge branch 'main' into use-setup-vp-instead

Author: ghostdevv

.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: `
+    <div class="min-h-screen flex flex-col bg-bg text-fg">
+      <AppHeader />
+      <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
+        <story />
+      </div>
+      <AppFooter />
+    </div>
+  `,
+})

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: `
-        <div class="min-h-screen flex flex-col bg-bg text-fg">
-          <AppHeader :show-logo="true" />
-          <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
-            <story />
-          </div>
-          <AppFooter />
-        </div>
-      `,
-    }),
-  ],
+  decorators: [pageDecorator],
 } satisfies Meta<typeof About>
 
 export default meta

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: `
-        <div class="min-h-screen flex flex-col bg-bg text-fg">
-          <AppHeader :show-logo="true" />
-          <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
-            <story />
-          </div>
-          <AppFooter />
-        </div>
-      `,
-    }),
-  ],
+  decorators: [pageDecorator],
 } satisfies Meta<typeof Accessibility>
 
 export default meta