From 2a912fbc850de83c741fae5904b8dc8b158ea569 Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Sun, 29 Mar 2026 18:13:32 -0500
Subject: [PATCH] docs(ui): add stories for Privacy page

---
 .storybook/decorators.ts           | 20 ++++++++++++++++++++
 app/pages/about.stories.ts         | 18 ++----------------
 app/pages/accessibility.stories.ts | 18 ++----------------
 app/pages/privacy.stories.ts       | 16 ++++++++++++++++
 nuxt.config.ts                     |  1 +
 package.json                       |  3 +++
 6 files changed, 44 insertions(+), 32 deletions(-)
 create mode 100644 .storybook/decorators.ts
 create mode 100644 app/pages/privacy.stories.ts

diff --git a/.storybook/decorators.ts b/.storybook/decorators.ts
new file mode 100644
index 0000000000..270cdec3a5
--- /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: `
+    <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>
+  `,
+})
diff --git a/app/pages/about.stories.ts b/app/pages/about.stories.ts
index b895ba8e70..01ee6cd735 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: `
-        <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
diff --git a/app/pages/accessibility.stories.ts b/app/pages/accessibility.stories.ts
index bfd0968592..d3b5856386 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: `
-        <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
diff --git a/app/pages/privacy.stories.ts b/app/pages/privacy.stories.ts
new file mode 100644
index 0000000000..a39c41da1f
--- /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<typeof Privacy>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4ca8c85444..843ea63f74 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 5c80943cfd..f37afe3c7e 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",