Merge pull request #792 from olaayoade27-coder/main

#696 Visual regression for dashboard

Author: aji70

frontend/package.json

@@ -7,7 +7,11 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic",
+    "test": "vitest run"
   },
   "dependencies": {
     "@stellar/stellar-sdk": "^14.5.0",
@@ -19,28 +23,38 @@
     "recharts": "^3.7.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "3.2.6",
     "@playwright/test": "^1.58.2",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "8.6.12",
     "@tailwindcss/postcss": "^4",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^20",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.4.1",
     "ajv": "^6.12.6",
     "axe-core": "^4.8.2",
+    "chromatic": "11.28.1",
+    "esbuild": "^0.25.3",
     "eslint": "^9",
     "eslint-config-next": "16.2.4",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "jsdom": "^29.0.1",
+    "storybook": "8.6.12",
     "tailwindcss": "^4",
     "typescript": "5.9.3",
+    "vite": "^6.3.5",
     "vitest": "^3.2.4"
   },
   "overrides": {
     "ajv": "^6.12.6",
     "minimatch": ">=10.2.5",
     "flatted": ">=3.4.2",
-    "picomatch": ">=4.0.4",
-    "vite": ">=7.3.2"
+    "picomatch": ">=4.0.4"
   }
 }

frontend/src/components/dashboard/DashboardHome.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { DashboardHome } from './DashboardHome';
+import type { DashboardData } from '@/lib/dashboard';
+
+const meta: Meta<typeof DashboardHome> = {
+  title: 'Dashboard/DashboardHome',
+  component: DashboardHome,
+  parameters: {
+    // Prevent real network calls in Storybook/Chromatic
+    mockData: [],
+    chromatic: { viewports: [320, 768, 1024, 1440] },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof DashboardHome>;
+
+const mockData: DashboardData = {
+  metrics: {
+    totalSubscribers: 1247,
+    totalSubscribersChangePercent: 12.4,
+    mrr: 3840,
+    mrrChangePercent: 8.2,
+    activeSubscriptions: 892,
+    activeSubscriptionsChangePercent: -2.1,
+  },
+  recentActivity: [
+    { id: '1', type: 'subscription', title: 'New subscriber', description: '@alex_fan subscribed to Premium', timestamp: new Date('2026-04-23T14:00:00Z').toISOString(), metadata: '+$9.99' },
+    { id: '2', type: 'renewal', title: 'Renewal', description: '@jordan_art renewed Monthly', timestamp: new Date('2026-04-23T13:00:00Z').toISOString(), metadata: '$4.99' },
+    { id: '3', type: 'content', title: 'Content published', description: 'New post: "Behind the scenes"', timestamp: new Date('2026-04-23T12:00:00Z').toISOString() },
+    { id: '4', type: 'cancellation', title: 'Subscription cancelled', description: '@sam_user cancelled Premium', timestamp: new Date('2026-04-23T11:00:00Z').toISOString() },
+    { id: '5', type: 'payout', title: 'Payout sent', description: 'Weekly payout completed', timestamp: new Date('2026-04-23T10:00:00Z').toISOString(), metadata: '$420.00' },
+  ],
+};
+
+export const Loaded: Story = {
+  args: { 
+    onCreatePlan: fn(), 
+    onUploadContent: fn(),
+    fetchDashboardData: () => Promise.resolve(mockData),
+  },
+};
+
+export const Loading: Story = {
+  args: { 
+    onCreatePlan: fn(), 
+    onUploadContent: fn(),
+    fetchDashboardData: () => new Promise(() => {}),
+  },
+};
+
+export const ErrorState: Story = {
+  args: { 
+    onCreatePlan: fn(), 
+    onUploadContent: fn(),
+    fetchDashboardData: () => Promise.reject(new Error('Network error')),
+  },
+};

frontend/src/components/dashboard/DashboardHome.tsx

@@ -28,9 +28,10 @@ const UploadIcon = () => (
 export interface DashboardHomeProps {
   onCreatePlan?: () => void;
   onUploadContent?: () => void;
+  fetchDashboardData?: () => Promise<DashboardData>;
 }
 
-export function DashboardHome({ onCreatePlan, onUploadContent }: DashboardHomeProps) {
+export function DashboardHome({ onCreatePlan, onUploadContent, fetchDashboardData: fetchFn = fetchDashboardData }: DashboardHomeProps) {
   const [state, setState] = useState<'loading' | 'success' | 'error'>('loading');
   const [data, setData] = useState<DashboardData | null>(null);
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -39,14 +40,14 @@ export function DashboardHome({ onCreatePlan, onUploadContent }: DashboardHomePr
     setState('loading');
     setErrorMessage('');
     try {
-      const result = await fetchDashboardData();
+      const result = await fetchFn();
       setData(result);
       setState('success');
     } catch (e) {
       setState('error');
       setErrorMessage(e instanceof Error ? e.message : 'Failed to load dashboard');
     }
-  }, []);
+  }, [fetchFn]);
 
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect