feat: add addNotification function for interactive instruments

Author: joshunrau

packages/react-core/src/components/InteractiveContent/InteractiveContent.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Button, Separator } from '@douglasneuroinformatics/libui/components';
-import { useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
+import { useNotificationsStore, useTheme, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { Theme } from '@douglasneuroinformatics/libui/hooks';
-import type { Language } from '@opendatacapture/runtime-core';
+import type { Language, RuntimeNotification } from '@opendatacapture/runtime-core';
 import { $Json } from '@opendatacapture/schemas/core';
 import type { Json } from '@opendatacapture/schemas/core';
 import { FullscreenIcon, ZoomInIcon, ZoomOutIcon } from 'lucide-react';
@@ -20,6 +20,7 @@ export const InteractiveContent = React.memo<InteractiveContentProps>(function I
   bundle,
   onSubmit
 }) {
+  const addNotification = useNotificationsStore((store) => store.addNotification);
   const { changeLanguage, resolvedLanguage } = useTranslation();
   const [_, updateTheme] = useTheme();
   const [scale, setScale] = useState(100);
@@ -80,6 +81,12 @@ export const InteractiveContent = React.memo<InteractiveContentProps>(function I
     return () => document.removeEventListener('done', handleDoneEvent, false);
   }, [handleDoneEvent]);
 
+  useEffect(() => {
+    const handler = (event: CustomEvent<RuntimeNotification>) => addNotification(event.detail);
+    document.addEventListener('addNotification', handler, false);
+    return () => document.removeEventListener('addNotification', handler, false);
+  }, []);
+
   const dimensions = `${(100 / scale) * 100}%`;
 
   return (

packages/react-core/src/types.ts

@@ -2,12 +2,13 @@
 
 import type { Theme } from '@douglasneuroinformatics/libui/hooks';
 import type { Language } from '@douglasneuroinformatics/libui/i18n';
-import type { AnyUnilingualInstrument, Json } from '@opendatacapture/runtime-core';
+import type { AnyUnilingualInstrument, Json, RuntimeNotification } from '@opendatacapture/runtime-core';
 import type { Subject } from '@opendatacapture/schemas/subject';
 import type { Promisable } from 'type-fest';
 
 declare global {
   interface GlobalEventHandlersEventMap {
+    addNotification: CustomEvent<RuntimeNotification>;
     changeLanguage: CustomEvent<Language>;
     changeTheme: CustomEvent<Theme>;
     done: CustomEvent<Json>;

packages/runtime-core/src/index.ts

@@ -1,5 +1,6 @@
 export * from './define.js';
 export * from './i18n.js';
+export * from './notifications.js';
 export type * from './types/core.js';
 export type * from './types/instrument.base.js';
 export type * from './types/instrument.core.js';

packages/runtime-core/src/notifications.ts

@@ -0,0 +1,11 @@
+export type RuntimeNotification = {
+  message?: string;
+  title?: string;
+  type: 'error' | 'info' | 'success' | 'warning';
+  variant?: 'critical' | 'standard';
+};
+
+/** Display a notification in ODC for the user during an interactive instrument. Please note this will not work with forms. */
+export function addNotification(notification: RuntimeNotification) {
+  window.parent.document.dispatchEvent(new CustomEvent('addNotification', { detail: notification }));
+}