Add signature status badge and logo upload functionality (#333)

Author: Starefossen

.storybook/decorators/TRPCDecorator.tsx

@@ -1,30 +1,36 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { httpBatchLink } from '@trpc/client'
+import { httpLink } from '@trpc/client'
 import { api } from '@/lib/trpc/client'
 import type { Decorator } from '@storybook/nextjs-vite'
 
-// Create these outside the decorator to avoid recreating on every render
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-    },
-  },
-})
-
+// Use httpLink (not httpBatchLink) so each tRPC call is a separate HTTP request
+// that MSW can intercept individually
 const trpcClient = api.createClient({
   links: [
-    httpBatchLink({
+    httpLink({
       url: '/api/trpc',
-      // MSW will intercept these requests (relative URL for cross-origin compatibility)
     }),
   ],
 })
 
-export const TRPCDecorator: Decorator = (Story) => {
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        refetchOnWindowFocus: false,
+      },
+    },
+  })
+}
+
+export const TRPCDecorator: Decorator = (Story, context) => {
+  // Fresh QueryClient per story so cached data doesn't leak between stories.
+  // Keyed on story id so switching stories forces a new cache.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const queryClient = useMemo(() => createQueryClient(), [context.id])
+
   return (
     <api.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>

.storybook/preview.tsx

@@ -124,17 +124,21 @@ const preview: Preview = {
                   'SponsorBulkActions',
                   'MobileFilterSheet',
                   'OnboardingLinkButton',
+                  'SendContractButton',
                   'ContractReadinessIndicator',
                   'ImportHistoricSponsorsButton',
                 ],
                 'Dashboard',
                 ['Metrics', 'Action Items', 'Activity Timeline'],
                 'Tiers',
                 [
+                  'SponsorTiersPage',
                   'SponsorTierManagement',
                   'SponsorTierEditor',
                   'SponsorAddModal',
                 ],
+                'Contracts',
+                ['ContractTemplateListPage', 'ContractTemplateEditorPage'],
                 'Contacts',
                 [
                   'SponsorContactTable',
@@ -164,7 +168,7 @@ const preview: Preview = {
               'Components',
               ['SponsorLogo', 'Sponsors', 'SponsorThankYou'],
               'Onboarding',
-              ['SponsorOnboardingForm'],
+              ['SponsorOnboardingForm', 'SponsorOnboardingLogoUpload'],
               'Email',
               ['SponsorTemplatePicker', 'SponsorEmailTemplateEditor'],
               'Form',