feat: add dashboard JSON export

chore: format ShareSheet.tsx with Prettier to fix lint errors

Author: ionfwsrijan

app/(root)/[username]/page.tsx

@@ -81,7 +81,10 @@ export default async function DashboardPage({ params }: { params: Promise<{ user
       <div className="grid grid-cols-1 lg:grid-cols-[300px_1fr_320px] gap-6 lg:gap-8">
         {/* Left Sidebar */}
         <aside className="flex flex-col gap-6">
-          <ProfileCard user={data.profile} />
+          <ProfileCard
+            user={data.profile}
+            exportData={{ stats: data.stats, languages: data.languages }}
+          />
           {/* We omit real achievements data generation for now and just show a placeholder based on streaks */}
           <Achievements
             achievements={[

components/dashboard/ProfileCard.tsx

@@ -3,10 +3,15 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { MapPin, Calendar, GitBranch, Users, UserPlus, Star, Share2 } from 'lucide-react';
-import { UserProfile } from '@/types/dashboard';
+import type { DashboardExportData, UserProfile } from '@/types/dashboard';
 import ShareSheet from './ShareSheet';
 
-export default function ProfileCard({ user }: { user: UserProfile }) {
+interface ProfileCardProps {
+  user: UserProfile;
+  exportData: DashboardExportData;
+}
+
+export default function ProfileCard({ user, exportData }: ProfileCardProps) {
   const [shareOpen, setShareOpen] = useState(false);
 
   return (
@@ -99,7 +104,12 @@ export default function ProfileCard({ user }: { user: UserProfile }) {
         </div>
       </motion.div>
 
-      <ShareSheet username={user.username} isOpen={shareOpen} onClose={() => setShareOpen(false)} />
+      <ShareSheet
+        username={user.username}
+        isOpen={shareOpen}
+        onClose={() => setShareOpen(false)}
+        exportData={exportData}
+      />
     </>
   );
 }

components/dashboard/ShareSheet.test.tsx

@@ -36,6 +36,17 @@ describe('ShareSheet', () => {
     username: 'octocat',
     isOpen: true,
     onClose: vi.fn(),
+    exportData: {
+      stats: {
+        currentStreak: 7,
+        peakStreak: 14,
+        totalContributions: 365,
+      },
+      languages: [
+        { name: 'TypeScript', percentage: 72, color: '#3178c6' },
+        { name: 'JavaScript', percentage: 28, color: '#f1e05a' },
+      ],
+    },
   };
 
   beforeEach(() => {
@@ -50,6 +61,15 @@ describe('ShareSheet', () => {
 
     // Mock window.open
     vi.spyOn(window, 'open').mockImplementation(() => null);
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn().mockReturnValue('blob:mock-download'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
   });
 
   afterEach(() => {
@@ -67,6 +87,7 @@ describe('ShareSheet', () => {
     expect(screen.getByText('@octocat')).toBeDefined();
     expect(screen.getByText('Copy Link')).toBeDefined();
     expect(screen.getByText('Share on X')).toBeDefined();
+    expect(screen.getByText('Download JSON')).toBeDefined();
   });
 
   it('calls onClose when close button is clicked', () => {
@@ -141,4 +162,29 @@ describe('ShareSheet', () => {
 
     document.body.removeChild(mockRoot);
   });
+
+  it('downloads dashboard data as formatted JSON', async () => {
+    render(<ShareSheet {...defaultProps} />);
+
+    const jsonButton = screen.getByText('Download JSON').closest('button');
+    fireEvent.click(jsonButton!);
+
+    const blob = vi.mocked(URL.createObjectURL).mock.calls[0][0] as Blob;
+    const json = JSON.parse(await blob.text());
+
+    expect(json).toMatchObject({
+      username: 'octocat',
+      currentStreak: 7,
+      longestStreak: 14,
+      totalContributions: 365,
+      topLanguages: defaultProps.exportData.languages,
+    });
+    expect(json.profileUrl).toContain('/octocat');
+    expect(HTMLAnchorElement.prototype.click).toHaveBeenCalled();
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:mock-download');
+
+    await waitFor(() => {
+      expect(screen.getByText('JSON Downloaded!')).toBeDefined();
+    });
+  });
 });

components/dashboard/ShareSheet.tsx

@@ -2,8 +2,9 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Link2, Download, Share2, Check, Loader2, Smartphone } from 'lucide-react';
+import { Check, Download, FileJson, Link2, Loader2, Share2, Smartphone, X } from 'lucide-react';
 import { toPng } from 'html-to-image';
+import type { DashboardExportData } from '@/types/dashboard';
 
 // Inline branded icons (Twitter/X brand, LinkedIn brand)
 const XBrandIcon = ({ size = 18 }: { size?: number }) => (
@@ -22,6 +23,7 @@ interface ShareSheetProps {
   username: string;
   isOpen: boolean;
   onClose: () => void;
+  exportData: DashboardExportData;
 }
 
 type OptionState = 'idle' | 'loading' | 'success' | 'error';
@@ -31,7 +33,7 @@ const PROFILE_URL = (username: string) =>
     ? `${window.location.origin}/${username}`
     : `https://commitpulse.vercel.app/${username}`;
 
-export default function ShareSheet({ username, isOpen, onClose }: ShareSheetProps) {
+export default function ShareSheet({ username, isOpen, onClose, exportData }: ShareSheetProps) {
   const [states, setStates] = useState<Record<string, OptionState>>({});
   const overlayRef = useRef<HTMLDivElement>(null);
 
@@ -116,6 +118,33 @@ export default function ShareSheet({ username, isOpen, onClose }: ShareSheetProp
     }
   };
 
+  const handleDownloadJSON = () => {
+    setOptionState('json', 'loading');
+    try {
+      const payload = {
+        username,
+        profileUrl: PROFILE_URL(username),
+        exportedAt: new Date().toISOString(),
+        currentStreak: exportData.stats.currentStreak,
+        longestStreak: exportData.stats.peakStreak,
+        totalContributions: exportData.stats.totalContributions,
+        topLanguages: exportData.languages,
+      };
+      const blob = new Blob([JSON.stringify(payload, null, 2)], {
+        type: 'application/json',
+      });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.download = `commitpulse-${username}.json`;
+      link.href = url;
+      link.click();
+      URL.revokeObjectURL(url);
+      setOptionState('json', 'success');
+    } catch {
+      setOptionState('json', 'error');
+    }
+  };
+
   const handleNativeShare = async () => {
     if (!('share' in navigator)) {
       // Graceful fallback: just copy the link
@@ -180,6 +209,15 @@ export default function ShareSheet({ username, isOpen, onClose }: ShareSheetProp
       glow: 'transparent',
       action: handleDownloadPNG,
     },
+    {
+      key: 'json',
+      icon: FileJson,
+      label: 'Download JSON',
+      description: 'Export raw streak and language data',
+      gradient: 'bg-zinc-800',
+      glow: 'transparent',
+      action: handleDownloadJSON,
+    },
     {
       key: 'native',
       icon: typeof window !== 'undefined' && 'share' in navigator ? Smartphone : Share2,
@@ -275,7 +313,9 @@ export default function ShareSheet({ username, isOpen, onClose }: ShareSheetProp
                                 ? 'Link Copied!'
                                 : opt.key === 'png'
                                   ? 'Downloaded!'
-                                  : opt.label
+                                  : opt.key === 'json'
+                                    ? 'JSON Downloaded!'
+                                    : opt.label
                               : state === 'error'
                                 ? 'Failed — try again'
                                 : opt.label}

types/dashboard.ts

@@ -51,3 +51,8 @@ export interface CommitClockData {
   hour: number; // 0 - 23
   commits: number;
 }
+
+export interface DashboardExportData {
+  stats: UserStats;
+  languages: LanguageData[];
+}