@adriansteffan/reactive 0.0.24 → 0.0.27

package/src/components/text.tsx

@@ -1,19 +1,64 @@
+import React, { useEffect, useRef } from 'react';
+import { BaseComponentProps, now } from '../mod';
+
 function Text({
   content,
   buttonText = 'Click me',
   className = '',
   next,
   animate = false,
+  allowedKeys = false,
 }: {
   content: React.ReactNode;
   buttonText?: string;
   onButtonClick?: () => void;
   className?: string;
-  next: (newData: object) => void;
   animate?: boolean;
-}) {
+  allowedKeys?: string[] | boolean;
+} & BaseComponentProps) {
+  const startTimeRef = useRef<number>(0);
+
+  useEffect(() => {
+    startTimeRef.current = now();
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+      const keypressTime = now();
+
+      const isKeyAllowed =
+        allowedKeys === true || (Array.isArray(allowedKeys) && allowedKeys.includes(event.key));
+
+      if (isKeyAllowed) {
+        const reactionTime = keypressTime - startTimeRef.current;
+
+        next({
+          key: event.key,
+          time: keypressTime,
+          reactionTime: reactionTime,
+        });
+      }
+    };
+
+    if (allowedKeys) {
+      window.addEventListener('keydown', handleKeyPress);
+    }
+
+    return () => {
+      if (allowedKeys) {
+        window.removeEventListener('keydown', handleKeyPress);
+      }
+    };
+  }, [next, allowedKeys]);
+
   const handleClick = () => {
-    next({});
+    const clickTime = now();
+
+    const reactionTime = clickTime - startTimeRef.current;
+
+    next({
+      key: 'button',
+      time: clickTime,
+      reactionTime: reactionTime,
+    });
   };
 
   return (

package/src/components/upload.tsx

@@ -2,7 +2,16 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 import { post } from '../utils/request';
-import { BaseComponentProps, FileUpload, getParam, getPlatform, Platform, Store, TrialData } from '../utils/common';
+import {
+  BaseComponentProps,
+  FileUpload,
+  getParam,
+  getPlatform,
+  Platform,
+  registerComponentParams,
+  Store,
+  TrialData,
+} from '../utils/common';
 import { BlobWriter, TextReader, ZipWriter } from '@zip.js/zip.js';
 
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
@@ -17,6 +26,93 @@ interface UploadResponse {
   message?: string;
 }
 
+// TODO: deduplicate values with upload function below
+registerComponentParams('Upload', [
+  {
+    name: 'upload',
+    defaultValue: true,
+    type: 'boolean',
+    description: 'Upload the data at the end of the experiment?',
+  },
+  {
+    name: 'download',
+    defaultValue: false,
+    type: 'boolean',
+    description: 'Locally download the data at the end of the experiment?',
+  },
+]);
+
+type DataObject = {
+  [key: string]: string | number | boolean | null | undefined;
+};
+
+function escapeCsvValue(value: any): string {
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  const stringValue = String(value);
+
+  if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {
+    const escapedValue = stringValue.replace(/"/g, '""');
+    return `"${escapedValue}"`;
+  }
+
+  return stringValue;
+}
+
+function convertArrayOfObjectsToCSV(data: DataObject[]): string {
+  if (!data || data.length === 0) {
+    return '';
+  }
+
+  const headerSet = new Set<string>();
+  data.forEach((obj) => {
+    Object.keys(obj).forEach((key) => {
+      headerSet.add(key);
+    });
+  });
+  const headers = Array.from(headerSet);
+
+  const headerRow = headers.map((header) => escapeCsvValue(header)).join(',');
+
+  const dataRows = data.map((obj) => {
+    return headers
+      .map((header) => {
+        const value = obj[header];
+        return escapeCsvValue(value);
+      })
+      .join(',');
+  });
+
+  return [headerRow, ...dataRows].join('\n');
+}
+
+function combineTrialsToCsv(
+  data: any[],
+  filename: string,
+  names: string[],
+  fun?: (obj: any) => any,
+) {
+  const processedData = names
+    .flatMap((name) => {
+      const responseData = data.find((d) => d.name === name)?.responseData;
+      if (Array.isArray(responseData)) {
+        return responseData.map((i) => ({
+          block: name,
+          ...i,
+        }));
+      }
+      return [];
+    })
+    .map((x) => (fun ? fun(x) : x));
+
+  return {
+    filename,
+    encoding: 'utf8' as const,
+    content: convertArrayOfObjectsToCSV(processedData),
+  };
+}
 
 interface FileBackend {
   directoryExists(path: string): Promise<boolean>;
@@ -26,7 +122,7 @@ interface FileBackend {
 
 const createElectronFileBackend = (): FileBackend => {
   const electronAPI = (window as any).electronAPI;
-  
+
   return {
     directoryExists: async (path: string): Promise<boolean> => {
       const result = await electronAPI.directoryExists(path);
@@ -37,91 +133,86 @@ const createElectronFileBackend = (): FileBackend => {
     },
     saveFile: async (filename: string, content: string, directory: string): Promise<void> => {
       await electronAPI.saveFile(filename, content, directory);
-    }
+    },
   };
 };
 
-
 const createCapacitorFileBackend = (parentFolder?: string): FileBackend => {
- 
   const getPath = (path: string): string => {
     if (!parentFolder) {
       return path;
     }
     return path ? `${parentFolder}/${path}` : parentFolder;
   };
-  
+
   return {
     directoryExists: async (path: string): Promise<boolean> => {
       try {
-  
         if (parentFolder) {
           try {
             await Filesystem.readdir({
               path: parentFolder,
-              directory: Directory.Documents
+              directory: Directory.Documents,
             });
           } catch {
             // Parent folder doesn't exist, so subpath doesn't exist either
             return false;
           }
         }
-        
+
         const fullPath = getPath(path);
         const result = await Filesystem.readdir({
           path: fullPath,
-          directory: Directory.Documents
+          directory: Directory.Documents,
         });
-        return result.files.length >= 0; 
+        return result.files.length >= 0;
       } catch {
         return false;
       }
     },
-    
+
     createDirectory: async (path: string): Promise<void> => {
       try {
-       
         if (parentFolder) {
           try {
             await Filesystem.mkdir({
               path: parentFolder,
               directory: Directory.Documents,
-              recursive: false
+              recursive: false,
             });
           } catch (e) {
             // Parent directory might already exist, that's fine
           }
         }
-        
+
         const fullPath = getPath(path);
         await Filesystem.mkdir({
           path: fullPath,
           directory: Directory.Documents,
-          recursive: true
+          recursive: true,
         });
       } catch (e) {
         console.error('Error creating directory:', e);
         throw e;
       }
     },
-    
+
     saveFile: async (filename: string, content: string, directory: string): Promise<void> => {
-      
       const fullDirectory = getPath(directory);
-      
+
       await Filesystem.writeFile({
         path: `${fullDirectory}/${filename}`,
         data: content,
         directory: Directory.Documents,
         encoding: 'utf8' as Encoding,
       });
-    }
+    },
   };
 };
 
-const getFileBackend = (parentDir?: string): { backend: FileBackend | null, type: Platform } => {
+const getFileBackend = (parentDir?: string): { backend: FileBackend | null; type: Platform } => {
   const platform = getPlatform();
-  
+
   switch (platform) {
     case 'desktop':
       return { backend: createElectronFileBackend(), type: platform };
@@ -135,35 +226,45 @@ const getFileBackend = (parentDir?: string): { backend: FileBackend | null, type
 // Function to generate a unique directory name
 const getUniqueDirectoryName = async (
   backend: FileBackend,
-  baseSessionId: string
+  baseSessionId: string,
 ): Promise<string> => {
   let uniqueSessionID = baseSessionId;
-  
+
   if (await backend.directoryExists(uniqueSessionID)) {
     let counter = 1;
     uniqueSessionID = `${baseSessionId}_${counter}`;
-    
+
     while (await backend.directoryExists(uniqueSessionID)) {
       counter++;
       uniqueSessionID = `${baseSessionId}_${counter}`;
     }
   }
-  
+
   return uniqueSessionID;
 };
 
+type CSVBuilder = {
+  filename?: string;
+  trials?: string[];
+  fun?: (row: Record<string, any>) => Record<string, any>;
+};
+
 export default function Upload({
   data,
   next,
   store,
   sessionID,
   generateFiles,
+  sessionCSVBuilder,
+  trialCSVBuilders,
   uploadRaw = true,
   autoUpload = false,
   androidFolderName,
 }: BaseComponentProps & {
   sessionID?: string | null;
   generateFiles: (sessionID: string, data: TrialData[], store?: Store) => FileUpload[];
+  sessionCSVBuilder: CSVBuilder;
+  trialCSVBuilders: CSVBuilder[];
   uploadRaw: boolean;
   autoUpload: boolean;
   androidFolderName?: string;
@@ -212,19 +313,18 @@ export default function Upload({
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   }, []);
-  
-  
+
   const handleUpload = useCallback(async () => {
     setUploadState('uploading');
-  
+
     if (uploadInitiatedRef.current) {
       return;
     }
-  
+
     uploadInitiatedRef.current = true;
-  
+
     const sessionIDUpload = sessionID ?? uuidv4();
-  
+
     const files: FileUpload[] = generateFiles ? generateFiles(sessionIDUpload, data, store) : [];
     if (uploadRaw) {
       files.push({
@@ -233,41 +333,112 @@ export default function Upload({
         encoding: 'utf8',
       });
     }
-  
+
+    if (sessionCSVBuilder) {
+      type ParamDetails = {
+        value?: any;
+        defaultValue: any;
+      };
+      let paramsDict: Record<string, any> = {};
+      const paramsSource: Record<string, ParamDetails | any> | undefined =
+        data?.[0]?.responseData?.params;
+      if (paramsSource && typeof paramsSource === 'object' && paramsSource !== null) {
+        paramsDict = Object.entries(paramsSource).reduce(
+          (
+            accumulator: Record<string, any>,
+            [paramName, paramDetails]: [string, ParamDetails | any],
+          ) => {
+            if (
+              paramDetails &&
+              typeof paramDetails === 'object' &&
+              'defaultValue' in paramDetails
+            ) {
+              const chosenValue = paramDetails.value ?? paramDetails.defaultValue;
+              accumulator[paramName] = chosenValue;
+            }
+            return accumulator;
+          },
+          {} as Record<string, any>,
+        );
+      }
+
+      let content = {
+        sessionID: sessionIDUpload,
+        userAgent: data[0].responseData.userAgent,
+        ...paramsDict,
+      };
+
+      if (
+        sessionCSVBuilder.trials &&
+        Array.isArray(sessionCSVBuilder.trials) &&
+        sessionCSVBuilder.trials.length > 0
+      ) {
+        for (const trialName of sessionCSVBuilder.trials) {
+          const matchingDataElement = data.find((element) => element.name === trialName);
+
+          if (matchingDataElement?.responseData) {
+            if (
+              typeof matchingDataElement.responseData === 'object' &&
+              matchingDataElement.responseData !== null
+            ) {
+              content = { ...content, ...matchingDataElement.responseData };
+            }
+          }
+        }
+      }
+
+      files.push({
+        content: convertArrayOfObjectsToCSV([
+          sessionCSVBuilder.fun ? sessionCSVBuilder.fun(content) : content,
+        ]),
+        filename: `${sessionIDUpload}${sessionCSVBuilder.filename}.csv`,
+        encoding: 'utf8' as const,
+      });
+    }
+
+    if (trialCSVBuilders) {
+      for (const builder of trialCSVBuilders) {
+        files.push(
+          combineTrialsToCsv(
+            data,
+            `${sessionIDUpload}${builder.filename}.csv`,
+            builder.trials ?? [],
+            builder.fun,
+          ),
+        );
+      }
+    }
+
     try {
       const payload: UploadPayload = {
         sessionId: sessionIDUpload,
-        files,
+        files: files.map((file) => ({ ...file, encoding: file.encoding ?? 'utf8' })),
       };
-  
+
       if (shouldDownload) {
         await downloadFiles(files);
       }
-  
+
       if (!shouldUpload) {
         next({});
         return;
       }
-  
+
       // Get the current platform and appropriate file backend
       const { backend, type } = getFileBackend(androidFolderName);
-      
+
       if (type === 'web') {
-        // Web API case
         uploadData.mutate(payload);
       } else if (backend) {
         try {
-          // Get a unique directory name
           const uniqueSessionID = await getUniqueDirectoryName(backend, sessionIDUpload);
-          
-          // Create the directory
+
           await backend.createDirectory(uniqueSessionID);
-          
-          // Save all files
+
           for (const file of files) {
             await backend.saveFile(file.filename, file.content, uniqueSessionID);
           }
-          
+
           setUploadState('success');
           next({});
         } catch (error) {
@@ -313,7 +484,7 @@ export default function Upload({
           </p>
           <button
             onClick={handleUpload}
-            className='mt-8 bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
+            className='mt-8 cursor-pointer bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
           >
             Submit Data
           </button>
@@ -335,7 +506,7 @@ export default function Upload({
           </div>
           <button
             onClick={handleUpload}
-            className='px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors'
+            className='px-4 py-2 cursor-pointer bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors'
           >
             Try Again
           </button>

package/src/mod.tsx

@@ -1,16 +1,8 @@
 import './index.css';
-import Text from './components/text';
-import PlainInput from './components/plaininput';
-import ProlificEnding from './components/prolificending';
-import MicCheck from './components/microphonecheck';
-import Quest from './components/quest';
-import Upload from './components/upload';
-import EnterFullscreen from './components/enterfullscreen';
-import ExitFullscreen from './components/exitfullscreen';
-import ExperimentProvider from './components/experimentprovider';
-import Experiment from './components/experiment';
 import { BaseComponentProps, ExperimentConfig } from './utils/common';
 
-export { Text, ProlificEnding, MicCheck, Quest, Upload, EnterFullscreen, ExitFullscreen, Experiment, ExperimentProvider, PlainInput};
 export type { BaseComponentProps, ExperimentConfig };
+
+export * from './utils/array';
 export * from './utils/common';
+export * from './components';

package/src/types/array.d.ts

@@ -0,0 +1,6 @@
+declare global {
+  interface Array<T> {
+    sample(n?: number): Array<T>;
+    shuffle(): Array<T>;
+  }
+}

package/src/utils/array.ts

@@ -0,0 +1,79 @@
+declare global {
+  interface Array<T> {
+    /**
+     * Returns random elements from the array
+     * @param n Number of random elements to return (defaults to 1)
+     * @returns Array of randomly selected elements
+     */
+    sample(n?: number): Array<T>;
+
+    /**
+     * Shuffles array elements using Fisher-Yates algorithm
+     * @returns A new shuffled array
+     */
+    shuffle(): Array<T>;
+  }
+}
+
+/**
+ * Returns random elements from an array
+ * @param array The source array
+ * @param n Number of random elements to return (defaults to 1)
+ * @returns Array of randomly selected elements
+ */
+export function sample<T>(array: T[], n: number = 1): T[] {
+  const result: T[] = [];
+
+  if (array.length === 0) {
+    return result;
+  }
+
+  for (let i = 0; i < n; i++) {
+    const randomIndex = Math.floor(Math.random() * array.length);
+    result.push(array[randomIndex]);
+  }
+
+  return result;
+}
+
+/**
+ * Shuffles array elements using Fisher-Yates algorithm
+ * @param array The source array
+ * @returns A new shuffled array
+ */
+export function shuffle<T>(array: T[]): T[] {
+  const result = [...array]; 
+  for (let i = result.length - 1; i >= 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [result[i], result[j]] = [result[j], result[i]];
+  }
+  return result;
+}
+
+/**
+ * Registers array methods on the Array prototype.
+ * Call this function once to make array methods available globally.
+ * 
+ * Example:
+ * ```
+ * import { registerArrayExtensions } from '@adriansteffan/reactive/array';
+ * registerArrayExtensions();
+ * 
+ * // Now you can use the methods
+ * const myArray = [1, 2, 3, 4, 5];
+ * myArray.shuffle();
+ * ```
+ */
+export function registerArrayExtensions(): void {
+  if (typeof Array.prototype.sample !== 'function') {
+    Array.prototype.sample = function <T>(this: T[], n?: number): T[] {
+      return sample(this, n);
+    };
+  }
+
+  if (typeof Array.prototype.shuffle !== 'function') {
+    Array.prototype.shuffle = function <T>(this: T[]): T[] {
+      return shuffle(this); 
+    };
+  }
+}