docs(ui): add stories for Privacy page

Author: cylewaitforit

.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

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 = {}

nuxt.config.ts

@@ -351,6 +351,7 @@ export default defineNuxtConfig({
         allowImportingTsExtensions: true,
         paths: {
           '#cli/*': ['../cli/src/*'],
+          '#storybook/*': ['../.storybook/*'],
         },
       },
       include: ['../test/unit/app/**/*.ts'],

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",