♻️ refactor(frontend): split HealthDashboard into smart wrapper + dumb View for state-based stories (#33)

SRP split: HealthDashboardView (presentational, props-based) + HealthDashboard (smart wrapper, useFetch). Enables 4 Storybook stories per state + unit testability per branch. Existing testids preserved, Playwright tests still pass.

Co-authored-by: Gabriel Radureau <arcodange@gmail.com>
Co-committed-by: Gabriel Radureau <arcodange@gmail.com>

frontend/components/HealthDashboard.stories.ts

@@ -5,6 +5,16 @@ const meta: Meta<typeof HealthDashboard> = {
   title: 'Components/HealthDashboard',
   component: HealthDashboard,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Smart wrapper that calls /api/healthz internally and delegates rendering to HealthDashboardView. ' +
+          'For state-by-state previews (Healthy, Loading, Error), see ' +
+          '[HealthDashboardView stories](?path=/docs/components-healthdashboardview--docs).',
+      },
+    },
+  },
 }
 export default meta
 
@@ -14,20 +24,3 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {},
 }
-
-// Documents the loading/error visuals so reviewers see them in Storybook
-// without needing a backend down. The component currently doesn't accept overrides
-// because it uses useFetch internally - this story is a placeholder for a future
-// refactor that exposes data/pending/error as props for testability.
-export const DocumentationStub: Story = {
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the same as Default. The HealthDashboard fetches /api/healthz internally, so loading/error states only appear when the backend is down or slow. ' +
-          'Future improvement: accept healthData/pending/error as props for easy state-based stories. Until then, see frontend/docs/e2e/ for screenshots of both healthy and error states.',
-      },
-    },
-  },
-}

frontend/components/HealthDashboard.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
-interface HealthInfo {
+import HealthDashboardView, { type HealthInfo } from './HealthDashboardView.vue'
-  status: string
+
-  version: string
+// Wrapper: handles data fetching, delegates rendering to HealthDashboardView.
-  uptime_seconds: number
+// Separation of concerns (SRP):
-  timestamp: string
+//   - HealthDashboard (this) = data layer (useFetch lifecycle)
-}
+//   - HealthDashboardView    = presentation layer (testable in Storybook + e2e)
 const { data, pending, error } = await useFetch<HealthInfo>('/api/healthz')
 </script>
+
 <template>
-  <section data-testid="health-dashboard">
+  <HealthDashboardView :data="data" :pending="pending" :error="error" />
-    <h2>Server Health</h2>
-    <p v-if="pending">Loading...</p>
-    <p v-else-if="error">Error loading health: {{ error.message }}</p>
-    <ul v-else-if="data" data-testid="health-info">
-      <li><strong>Status:</strong> <span data-testid="health-status">{{ data.status }}</span></li>
-      <li><strong>Version:</strong> {{ data.version }}</li>
-      <li><strong>Uptime:</strong> {{ data.uptime_seconds }} seconds</li>
-      <li><strong>Last check:</strong> {{ data.timestamp }}</li>
-    </ul>
-  </section>
 </template>

frontend/components/HealthDashboardView.stories.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HealthDashboardView from './HealthDashboardView.vue'
+
+interface ViewArgs {
+  data: {
+    status: string
+    version: string
+    uptime_seconds: number
+    timestamp: string
+  } | null
+  pending: boolean
+  error: { message: string } | null
+}
+
+const meta = {
+  title: 'Components/HealthDashboardView',
+  component: HealthDashboardView,
+  tags: ['autodocs'],
+  argTypes: {
+    pending: { control: 'boolean' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Pure presentational component for the health dashboard. ' +
+          'Accepts `data`, `pending`, `error` as props so all 3 states can be ' +
+          'previewed in Storybook and asserted in unit tests. The data fetching ' +
+          'wrapper is `HealthDashboard.vue`.',
+      },
+    },
+  },
+} satisfies Meta<ViewArgs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Healthy: Story = {
+  args: {
+    data: {
+      status: 'healthy',
+      version: '1.4.0',
+      uptime_seconds: 3600,
+      timestamp: '2026-05-03T17:30:00.000Z',
+    },
+    pending: false,
+    error: null,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    data: null,
+    pending: true,
+    error: null,
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    data: null,
+    pending: false,
+    error: { message: '[GET] "/api/healthz": 502 Bad Gateway (simulated)' },
+  },
+}
+
+export const HealthyHighUptime: Story = {
+  args: {
+    data: {
+      status: 'healthy',
+      version: '1.5.0-rc1',
+      uptime_seconds: 86400 * 7,
+      timestamp: new Date().toISOString(),
+    },
+    pending: false,
+    error: null,
+  },
+}

frontend/components/HealthDashboardView.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+export interface HealthInfo {
+  status: string
+  version: string
+  uptime_seconds: number
+  timestamp: string
+}
+
+defineProps<{
+  data: HealthInfo | null | undefined
+  pending: boolean
+  error: { message: string } | null | undefined
+}>()
+</script>
+
+<template>
+  <section data-testid="health-dashboard">
+    <h2>Server Health</h2>
+    <p v-if="pending" data-testid="health-loading">Loading...</p>
+    <p v-else-if="error" data-testid="health-error">
+      Error loading health: {{ error.message }}
+    </p>
+    <ul v-else-if="data" data-testid="health-info">
+      <li><strong>Status:</strong> <span data-testid="health-status">{{ data.status }}</span></li>
+      <li><strong>Version:</strong> {{ data.version }}</li>
+      <li><strong>Uptime:</strong> {{ data.uptime_seconds }} seconds</li>
+      <li><strong>Last check:</strong> {{ data.timestamp }}</li>
+    </ul>
+  </section>
+</template>

frontend/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const component: DefineComponent<any, any, any>
+  export default component
+}