Fix TypeScript build errors in copilot/continue-typescript-migration branch

package.json

@@ -74,7 +74,7 @@
   },
   "engines": {
     "node": ">=20.0.0",
-    "npm": ">=10.0.0"
+    "npm": ">=11.6.2"
   },
   "browserslist": {
     "production": [

src/components/BugReportForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import bugReportService from '../services/bugReportService';
+import bugReportService, { IssueTemplate, TemplateField } from '../services/bugReportService';
 import githubService from '../services/githubService';
 import ScreenshotEditor from './ScreenshotEditor';
 import repositoryConfig from '../config/repositoryConfig';
@@ -9,12 +9,6 @@ interface BugReportFormProps {
   contextData?: Record<string, any>;
 }
 
-interface TemplateType {
-  name: string;
-  type: string;
-  fields: FieldDefinition[];
-}
-
 interface FieldDefinition {
   name: string;
   label: string;
@@ -29,8 +23,8 @@ interface FormDataType {
 }
 
 const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {} }) => {
-  const [templates, setTemplates] = useState<TemplateType[]>([]);
-  const [selectedTemplate, setSelectedTemplate] = useState<TemplateType | null>(null);
+  const [templates, setTemplates] = useState<IssueTemplate[]>([]);
+  const [selectedTemplate, setSelectedTemplate] = useState<IssueTemplate | null>(null);
   const [formData, setFormData] = useState<FormDataType>({});
   const [includeConsole, setIncludeConsole] = useState<boolean>(false);
   const [includeScreenshot, setIncludeScreenshot] = useState<boolean>(false);
@@ -86,14 +80,14 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
     }
   };
 
-  const handleTemplateChange = (template) => {
-    setSelectedTemplate(template);
+  const handleTemplateChange = (template: IssueTemplate | undefined) => {
+    setSelectedTemplate(template || null);
     setFormData({}); // Reset form data when template changes
-    setIncludeConsole(template.type === 'bug'); // Auto-enable console for bug reports
-    setIncludeScreenshot(template.type === 'bug'); // Auto-enable screenshot for bug reports
+    setIncludeConsole(template?.type === 'bug'); // Auto-enable console for bug reports
+    setIncludeScreenshot(template?.type === 'bug'); // Auto-enable screenshot for bug reports
   };
 
-  const handleFormChange = (fieldId, value) => {
+  const handleFormChange = (fieldId: string, value: any) => {
     setFormData(prev => ({
       ...prev,
       [fieldId]: value
@@ -118,7 +112,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
       }
     } catch (err) {
       console.error('Failed to take screenshot:', err);
-      setError('Failed to capture screenshot: ' + err.message);
+      setError('Failed to capture screenshot: ' + (err instanceof Error ? err.message : String(err)));
     } finally {
       setTakingScreenshot(false);
     }
@@ -128,7 +122,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
     setShowScreenshotEditor(true);
   };
 
-  const handleScreenshotEditorSave = (editedBlob) => {
+  const handleScreenshotEditorSave = (editedBlob: Blob) => {
     // Update the screenshot with the edited version
     setScreenshotBlob(editedBlob);
 
@@ -165,7 +159,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
     };
   }, [screenshotPreview]);
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!selectedTemplate) {
@@ -184,7 +178,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
       const currentScreenshot = includeScreenshot ? screenshotBlob : null;
 
       // Check if user is authenticated and can submit via API
-      if (githubService.isAuthenticated) {
+      if (githubService.isAuth()) {
         const result = await bugReportService.submitIssue(
           repositoryConfig.getOwner(),
           repositoryConfig.getName(),
@@ -243,7 +237,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
       }
     } catch (err) {
       console.error('Failed to submit bug report:', err);
-      setError(err.message);
+      setError(err instanceof Error ? err.message : String(err));
     } finally {
       setSubmitting(false);
     }
@@ -266,7 +260,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
     );
   };
 
-  const renderFormField = (field) => {
+  const renderFormField = (field: TemplateField) => {
     const { id, type, attributes = {}, validations = {} } = field;
     const { label, description, placeholder, options } = attributes;
     const { required } = validations;
@@ -276,7 +270,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
         <div key={id || Math.random()} className="form-field markdown-field">
           <div 
             className="markdown-content"
-            dangerouslySetInnerHTML={{ __html: attributes.value }}
+            dangerouslySetInnerHTML={{ __html: attributes.value || '' }}
           />
         </div>
       );
@@ -342,8 +336,8 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
             >
               <option value="">Select an option...</option>
               {options?.map((option, index) => (
-                <option key={index} value={option.value || option}>
-                  {option.label || option}
+                <option key={index} value={typeof option === 'string' ? option : option.value}>
+                  {typeof option === 'string' ? option : option.label}
                 </option>
               ))}
             </select>
@@ -359,24 +353,27 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
                 {required && <span className="required">*</span>}
               </legend>
               {description && <p className="field-description">{description}</p>}
-              {options?.map((option, index) => (
-                <label key={index} className="checkbox-label">
-                  <input
-                    type="checkbox"
-                    className="checkbox-input"
-                    checked={formData[fieldId]?.includes(option.value || option) || false}
-                    onChange={(e) => {
-                      const value = option.value || option;
-                      const currentValues = formData[fieldId] || [];
-                      const newValues = e.target.checked
-                        ? [...currentValues, value]
-                        : currentValues.filter(v => v !== value);
-                      handleFormChange(fieldId, newValues);
-                    }}
-                  />
-                  {option.label || option}
-                </label>
-              ))}
+              {options?.map((option, index) => {
+                const optionValue = typeof option === 'string' ? option : option.value;
+                const optionLabel = typeof option === 'string' ? option : option.label;
+                return (
+                  <label key={index} className="checkbox-label">
+                    <input
+                      type="checkbox"
+                      className="checkbox-input"
+                      checked={formData[fieldId]?.includes(optionValue) || false}
+                      onChange={(e) => {
+                        const currentValues = formData[fieldId] || [];
+                        const newValues = e.target.checked
+                          ? [...currentValues, optionValue]
+                          : currentValues.filter((v: any) => v !== optionValue);
+                        handleFormChange(fieldId, newValues);
+                      }}
+                    />
+                    {optionLabel}
+                  </label>
+                );
+              })}
             </fieldset>
           </div>
         );
@@ -592,7 +589,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
               ) : (
                 <div className="screenshot-preview">
                   <img 
-                    src={screenshotPreview} 
+                    src={screenshotPreview || undefined} 
                     alt="Screenshot preview" 
                     className="screenshot-image"
                   />
@@ -649,7 +646,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
                 <ul>
                   <li><strong>Current Page:</strong> {contextData.pageId || 'Unknown'}</li>
                   <li><strong>URL:</strong> {window.location.href}</li>
-                  <li><strong>Authentication:</strong> {githubService.isAuthenticated ? 'Authenticated' : 'Demo Mode'}</li>
+                  <li><strong>Authentication:</strong> {githubService.isAuth() ? 'Authenticated' : 'Demo Mode'}</li>
                 </ul>
               </div>
 
@@ -691,7 +688,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
         </div>
 
         {/* Template Fields */}
-        {selectedTemplate && (
+        {selectedTemplate && Array.isArray(selectedTemplate.body) && (
           <div className="template-fields">
             {selectedTemplate.body.map(field => renderFormField(field))}
           </div>
@@ -705,7 +702,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
             disabled={submitting || !selectedTemplate}
           >
             {submitting ? 'Opening...' : 
-             githubService.isAuthenticated ? 'Submit Issue' : 'Open in GitHub'}
+             githubService.isAuth() ? 'Submit Issue' : 'Open in GitHub'}
           </button>
 
           <button
@@ -730,7 +727,7 @@ const BugReportForm: React.FC<BugReportFormProps> = ({ onClose, contextData = {}
 
         {/* Authentication Status */}
         <div className="auth-status">
-          {githubService.isAuthenticated ? (
+          {githubService.isAuth() ? (
             <p className="auth-info authenticated">
               ✅ Authenticated - Issues will be submitted directly to GitHub
             </p>

src/components/CollaborationModal.tsx

@@ -13,7 +13,7 @@ const CollaborationModal: React.FC<CollaborationModalProps> = ({ onClose }) => {
 
   // Handle Escape key
   useEffect(() => {
-    const handleEscape = (e) => {
+    const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         onClose();
       }
@@ -143,11 +143,11 @@ const CollaborationModal: React.FC<CollaborationModalProps> = ({ onClose }) => {
     setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
   };
 
-  const goToSlide = (index) => {
+  const goToSlide = (index: number) => {
     setCurrentSlide(index);
   };
 
-  const handleOverlayClick = (e) => {
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       onClose();
     }

src/components/ComponentEditor.tsx

@@ -97,12 +97,12 @@ const HealthInterventionsEditor: React.FC = () => {
       <div className="editor-content">
         <WHODigitalLibrary 
           onReferencesChange={handleReferencesChange}
-          selectedReferences={selectedReferences}
         />
       </div>
 
       <ContextualHelpMascot 
         pageId="health-interventions-editor"
+        helpContent={null}
         contextData={{ 
           profile: profile || { login: user || 'unknown' }, 
           repository: repository || { name: repo || 'unknown' }, 
@@ -174,12 +174,12 @@ const ComponentEditorContent: React.FC = () => {
           <div className="editor-content">
             <WHODigitalLibrary 
               onReferencesChange={handleReferencesChange}
-              selectedReferences={selectedReferences}
             />
           </div>
 
           <ContextualHelpMascot 
             pageId="component-editor"
+            helpContent={null}
             contextData={{ component: currentComponent }}
           />
         </div>
@@ -190,6 +190,12 @@ const ComponentEditorContent: React.FC = () => {
     }
   }
 
+  // Safety check for currentComponent
+  if (!currentComponent) {
+    navigate('/');
+    return <div>Redirecting...</div>;
+  }
+
   return (
     <div className="component-editor">
       <div className="editor-content">

src/components/CoreDataDictionaryViewer.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { PageLayout, usePage } from './framework';
-import { useDakComponent } from '../services/ComponentObjectProvider.tsx';
+import { useDakComponent } from '../services/ComponentObjectProvider';
 import './CoreDataDictionaryViewer.css';
 
 /**
@@ -22,7 +22,8 @@ const CoreDataDictionaryViewer = () => {
 
 const CoreDataDictionaryViewerContent = () => {
   const navigate = useNavigate();
-  const { profile, repository, branch } = usePage();
+  const pageContext = usePage() as any;
+  const { profile, repository, branch } = pageContext;
 
   // Component Object for core data elements
   const dataElementsComponent = useDakComponent('dataElements');
@@ -41,7 +42,7 @@ const CoreDataDictionaryViewerContent = () => {
 
   // Handle Escape key for modal
   useEffect(() => {
-    const handleEscape = (e) => {
+    const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && showModal) {
         closeModal();
       }
@@ -53,7 +54,7 @@ const CoreDataDictionaryViewerContent = () => {
   }, [showModal]);
 
   // Generate base URL for IG Publisher artifacts
-  const getBaseUrl = useCallback((branchName) => {
+  const getBaseUrl = useCallback((branchName: string) => {
     const owner = user || repository?.owner?.login || repository?.full_name?.split('/')[0];
     const repoName = repo || repository?.name;
 
@@ -99,7 +100,7 @@ const CoreDataDictionaryViewerContent = () => {
       setDataElements(elements || []);
     } catch (err) {
       console.error('Error loading data elements:', err);
-      setError(err.message || 'Failed to load core data elements');
+      setError(err instanceof Error ? err.message : 'Failed to load core data elements');
     } finally {
       setLoading(false);
     }
@@ -136,7 +137,7 @@ const CoreDataDictionaryViewerContent = () => {
   };
 
   // Modal handlers
-  const openModal = (element) => {
+  const openModal = (element: any) => {
     setSelectedElement(element);
     setShowModal(true);
   };

src/components/DAKStatusBox.tsx

@@ -202,9 +202,8 @@ const DAKStatusBox: React.FC<DAKStatusBoxProps> = ({ repository, selectedBranch,
               <div className="status-section">
                 <h4>🔄 Recent Commits</h4>
                 <CommitsSlider 
-                  commits={repositoryStats.recentCommits}
                   repository={repository}
-                  branch={branch}
+                  selectedBranch={branch}
                 />
               </div>