fix(examples): resolve type errors and gate examples typecheck in CI (#111)

Co-authored-by: Mackenzie Fernandez <mackenzie.fernandez@workday.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 3 people

.justfile

@@ -13,6 +13,7 @@ check:
     npx prettier --check .
     npx tsc --noEmit
     npx eslint src/ cli/src/
+    cd examples && just setup && npx tsc --noEmit -p tsconfig.json
 
 # Build package to dist/
 build:

examples/.justfile

@@ -4,6 +4,8 @@
 setup:
     cd hello && npm install
     cd directory && npm install
+    cd charitable-donations && npm install
+    cd create-work-event && npm install
 
 # Format example source files
 tidy:

examples/charitable-donations/pages/CharityDetail.tsx

@@ -165,7 +165,7 @@ export default function CharityDetailPage() {
   return (
     <Flex flexDirection="column" gap="m" padding="m" maxWidth="800px" margin="0 auto">
       <Flex justifyContent="space-between" alignItems="center" flexWrap="wrap" gap="s">
-        <SecondaryButton onClick={() => navigate(home, {})}>← Back to charities</SecondaryButton>
+        <SecondaryButton onClick={() => navigate(home)}>← Back to charities</SecondaryButton>
         {!editing && <SecondaryButton onClick={startEditing}>Edit charity</SecondaryButton>}
       </Flex>
 

examples/create-work-event/pages/BrowseEvents.tsx

@@ -177,7 +177,7 @@ export default function BrowseEventsPage() {
       <div style={pageStyle}>
         <div style={containerStyle}>
           <div style={errorStyle}>Error loading events: {error.message}</div>
-          <button style={buttonStyle} onClick={() => navigate(home, {})}>
+          <button style={buttonStyle} onClick={() => navigate(home)}>
             ← Back to Home
           </button>
         </div>
@@ -207,7 +207,7 @@ export default function BrowseEventsPage() {
                 Clear Filter
               </button>
             )}
-            <button type="button" style={buttonStyle} onClick={() => navigate(home, {})}>
+            <button type="button" style={buttonStyle} onClick={() => navigate(home)}>
               ← Home
             </button>
           </div>
@@ -220,7 +220,7 @@ export default function BrowseEventsPage() {
         ) : events.length === 0 ? (
           <div style={emptyStyle}>
             <p style={{ fontSize: '18px', marginBottom: '16px' }}>No events available</p>
-            <button style={buttonStyle} onClick={() => navigate(home, {})}>
+            <button style={buttonStyle} onClick={() => navigate(home)}>
               Back to Home
             </button>
           </div>

examples/create-work-event/pages/CreateEvent.tsx

@@ -313,11 +313,7 @@ export default function CreateEventPage() {
           </div>
 
           <div style={buttonGroupStyle}>
-            <button
-              type="button"
-              style={buttonStyle('secondary')}
-              onClick={() => navigate(home, {})}
-            >
+            <button type="button" style={buttonStyle('secondary')} onClick={() => navigate(home)}>
               Cancel
             </button>
             <button type="submit" style={buttonStyle('primary')} disabled={isSubmitting}>

examples/create-work-event/pages/EventDetail.tsx

@@ -152,7 +152,7 @@ export default function EventDetailPage() {
         <div style={containerStyle}>
           <div style={headerStyle}>
             <h1>Event Details</h1>
-            <button style={buttonStyle('secondary')} onClick={() => navigate(home, {})}>
+            <button style={buttonStyle('secondary')} onClick={() => navigate(home)}>
               ← Home
             </button>
           </div>

examples/create-work-event/pages/Home.tsx

@@ -113,19 +113,19 @@ export default function HomePage() {
   const goMyEvents = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    navigate(myEvents, {});
+    navigate(myEvents);
   };
 
   const goCreateEvent = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    navigate(createEvent, {});
+    navigate(createEvent);
   };
 
   const goManageEvents = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    navigate(manageEvents, {});
+    navigate(manageEvents);
   };
 
   return (

examples/create-work-event/pages/ManageEvents.tsx

@@ -95,7 +95,7 @@ export default function ManageEventsPage() {
       inactive: { bg: '#f3e5f5', color: '#7b1fa2' },
       draft: { bg: '#fff3e0', color: '#f57c00' },
     };
-    const theme = colors[status] || colors.inactive;
+    const theme = colors[status] ?? { bg: '#f3e5f5', color: '#7b1fa2' };
     return {
       display: 'inline-block',
       padding: '4px 12px',
@@ -127,7 +127,7 @@ export default function ManageEventsPage() {
         <div style={containerStyle}>
           <div style={headerStyle}>
             <h1 style={titleStyle}>All Events</h1>
-            <button style={buttonStyle('secondary')} onClick={() => navigate(home, {})}>
+            <button style={buttonStyle('secondary')} onClick={() => navigate(home)}>
               ← Home
             </button>
           </div>
@@ -151,7 +151,7 @@ export default function ManageEventsPage() {
                 : `${myEvents.length} event${myEvents.length !== 1 ? 's' : ''}`}
             </p>
           </div>
-          <button style={buttonStyle('secondary')} onClick={() => navigate(home, {})}>
+          <button style={buttonStyle('secondary')} onClick={() => navigate(home)}>
             ← Home
           </button>
         </div>

examples/create-work-event/pages/MyEvents.tsx

@@ -83,7 +83,7 @@ export default function MyEventsPage() {
       today: { bg: '#fff3e0', color: '#f57c00' },
       past: { bg: '#f3e5f5', color: '#7b1fa2' },
     };
-    const theme = colors[status] || colors.upcoming;
+    const theme = colors[status] ?? { bg: '#e3f2fd', color: '#1976d2' };
     return {
       padding: '6px 12px',
       background: theme.bg,
@@ -126,7 +126,7 @@ export default function MyEventsPage() {
         <div style={containerStyle}>
           <div style={headerStyle}>
             <h1 style={titleStyle}>Registered Events</h1>
-            <button style={buttonStyle('secondary')} onClick={() => navigate(home, {})}>
+            <button style={buttonStyle('secondary')} onClick={() => navigate(home)}>
               ← Home
             </button>
           </div>
@@ -152,7 +152,7 @@ export default function MyEventsPage() {
                 : `${registeredEvents.length} event${registeredEvents.length !== 1 ? 's' : ''} with registrations`}
             </p>
           </div>
-          <button style={buttonStyle('secondary')} onClick={() => navigate(home, {})}>
+          <button style={buttonStyle('secondary')} onClick={() => navigate(home)}>
             ← Home
           </button>
         </div>
@@ -166,7 +166,7 @@ export default function MyEventsPage() {
             <p style={{ fontSize: '18px', marginBottom: '16px' }}>
               No events currently have registrations
             </p>
-            <button style={buttonStyle('primary')} onClick={() => navigate(home, {})}>
+            <button style={buttonStyle('primary')} onClick={() => navigate(home)}>
               Browse Events
             </button>
           </div>

src/data/useQuery.ts

@@ -8,15 +8,17 @@ export interface QueryOptions {
 }
 
 export interface QueryResult<T> {
-  data: T[] | T | null;
+  data: T | null;
   loading: boolean;
   error: Error | null;
   refetch: () => void;
 }
 
-export function useQuery<T>(model: string, options?: QueryOptions): QueryResult<T> {
+export function useQuery<T>(model: string, options: QueryOptions & { id: string }): QueryResult<T>;
+export function useQuery<T>(model: string, options?: QueryOptions): QueryResult<T[]>;
+export function useQuery<T>(model: string, options?: QueryOptions): QueryResult<T | T[]> {
   const { resolver, invalidationKey } = useDataContext();
-  const [data, setData] = useState<T[] | T | null>(null);
+  const [data, setData] = useState<T | T[] | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);