@adriansteffan/reactive 0.0.9

package/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true, node: true, commonjs: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+    "printWidth": 100,
+    "jsxSingleQuote": true,
+    "singleQuote": true
+}

package/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:21-bookworm-slim
+
+RUN apt-get update
+RUN apt-get upgrade -y
+RUN apt-get install -y git curl software-properties-common apache2
+WORKDIR /srv/frontend
+
+# this assumes build context one directory up
+COPY ./frontend .
+COPY .env .env
+
+RUN npm install
+RUN a2enmod rewrite
+RUN sed -i 's%/var/www/html%/srv/frontend/dist%g' /etc/apache2/sites-available/000-default.conf && sed -i 's%ServerTokens OS%ServerTokens Prod%g' /etc/apache2/conf-available/security.conf && sed -i 's%ServerSignature On%ServerSignature Off%g' /etc/apache2/conf-available/security.conf && sed -i 's%<Directory /var/www/>%<Directory /srv/frontend/dist/>%g' /etc/apache2/apache2.conf && sed -i 's|AllowOverride None|AllowOverride All\nOptions -MultiViews\nRewriteEngine On\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteRule ^ index.html [QSA,L]|g' /etc/apache2/apache2.conf
+RUN npm run build
+RUN rm .env
+
+EXPOSE 80
+
+CMD ["apachectl","-D","FOREGROUND"]

package/README.md

@@ -0,0 +1,68 @@
+# ReactivePsych
+
+A framework for quickly building interactive online experiments using Typescript, React, and TailwindCSS. Comes with a template project that has all batteries included (build tools, docker deployment setup, node server for upload etc.)
+The project is very early stage, so many of the abstractions are still very leaky and the documentation is largely unfinished.
+
+
+## Prerequisites
+
+You will need a current version of [node.js](https://nodejs.org/en/download/) installed on your system.
+
+## Using the package
+
+### Create a template project
+
+```
+npx @adriansteffan/reactive
+```
+
+Then follow the instructions shown there and in the created `README.md`
+
+
+### Usage
+
+For now, refer to the `App.tsx` in the template project to find out how to define an experiment, and add custom trials and questions!
+
+Premade components available so far:
+
+* Text: A simple display of Text and a Button
+* MicCheck: used to test the voice recording feature and choose a preferred microphone to use
+* Quest: SurveyJS questionnaires
+    * ... all questiontypes supported by SurveyJS can be used
+    * voicerecorder: a custom question type that allows participants to record voice
+* MasterMindleWrapper: (weird name atm, needs splitting up) Participants play a game similar to Mastermind with varying difficulties
+* Upload: Uploads the collected data on a button press by the participant 
+
+
+
+## Development
+
+
+Run this to in the root of the repo to build the project locally (also needs to be run after every change):
+
+```
+npm run build
+```
+
+Then create a global link (only needs to run once during setup);
+```
+npm link
+```
+
+Then set up a local testing project:
+
+```
+npx @adriansteffan/reactive
+npm uninstall @adriansteffan/reactive && npm link @adriansteffan/reactive
+```
+
+
+Manually publishing to npm (until we figure out a better ci/cd process):
+```
+npm publish
+```
+
+
+## Authors
+
+* **Adrian Steffan** - [adriansteffan](https://github.com/adriansteffan)

package/bin/setup.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+import { mkdirSync, readdirSync, copyFileSync, existsSync, writeFileSync, readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import readline from 'readline';
+import { createRequire } from 'module';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const version = createRequire(import.meta.url)(join(__dirname, '../package.json')).version;
+console.log(version)
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+
+const question = (query) => new Promise((resolve) => rl.question(query, resolve));
+
+
+function copyDir(src, dest, ignoreFiles = []) {
+  mkdirSync(dest, { recursive: true });
+
+  const entries = readdirSync(src, { withFileTypes: true });
+
+  for (let entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    
+    // Check if the current file path matches any in the ignore list
+    const shouldIgnore = ignoreFiles.some(ignorePath => 
+      join(src, entry.name) === join(src, ignorePath)
+    );
+
+    if (entry.isDirectory()) {
+      // only ignore at top level
+      copyDir(srcPath, destPath);
+    } else if (shouldIgnore) {
+      continue;
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+async function main() {
+  try {
+    
+    const projectName = await question('Please enter your project name: ');
+
+    if (!projectName.trim()) {
+      console.error('Project name cannot be empty');
+      process.exit(1);
+    }
+
+    const projectPath = join(process.cwd(), projectName);
+    mkdirSync(projectPath, { recursive: true });
+
+    const templatePath = join(__dirname, '../template');
+
+    if (!existsSync(templatePath)) {
+      console.error('Template directory not found');
+      process.exit(1);
+    }
+
+    copyDir(templatePath, projectPath, ['package.json']);
+
+    const templatePackageJsonPath = join(templatePath, 'package.json');
+    if (!existsSync(templatePackageJsonPath)) {
+      console.error('Template package.json not found');
+      process.exit(1);
+    }
+
+    let packageJsonContent = readFileSync(templatePackageJsonPath, 'utf8');
+    packageJsonContent = packageJsonContent.replace(/PROJECT_NAME/g, projectName).replace(/RP_VERSION/g, version);
+
+    writeFileSync(join(projectPath, 'package.json'), packageJsonContent);
+
+    console.log(`
+Project ${projectName} created successfully!
+
+To get started:
+    cd ${projectName}
+    npm i && npm i --prefix backend
+    npm run dev:all
+    `);
+
+  } catch (error) {
+    console.error('Error creating project:', error);
+    console.error('Error details:', error.message);
+    process.exit(1);
+  } finally {
+    rl.close();
+  }
+}
+
+main();

package/dist/mod.d.ts

@@ -0,0 +1,102 @@
+import { ComponentType } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+export declare interface BaseComponentProps {
+    next: (data: object) => void;
+    data?: object;
+    metaData?: object;
+}
+
+declare type ComponentsMap = {
+    [key: string]: ComponentType<any>;
+};
+
+declare type ComponentsMap_2 = {
+    [key: string]: ComponentType<any>;
+};
+
+export declare function Experiment({ timeline, config, components, questions, }: {
+    timeline: ExperimentTrial[];
+    config?: ExperimentConfig;
+    components?: ComponentsMap_2;
+    questions?: ComponentsMap_2;
+}): JSX_2.Element;
+
+export declare interface ExperimentConfig {
+    showProgressBar: boolean;
+}
+
+export declare function ExperimentProvider({ children }: {
+    children: ReactNode;
+}): JSX_2.Element;
+
+declare interface ExperimentTrial {
+    name: string;
+    type: string;
+    props?: Record<string, any>;
+}
+
+export declare interface FileUpload {
+    filename: string;
+    content: string;
+    encoding: 'base64' | 'utf8';
+}
+
+export declare function getParam<T extends ParamType>(name: string, defaultValue: ParamValue<T> | undefined, type?: T): ParamValue<T> | undefined;
+
+export declare function MasterMindleWrapper({ next, blockIndex, feedback, timeLimit, maxGuesses, }: {
+    next: (data: object) => void;
+    blockIndex: number;
+    feedback: 1 | 2 | 3 | 4 | 5;
+    timeLimit: number;
+    maxGuesses: number;
+}): JSX_2.Element;
+
+export declare const MicCheck: ({ next }: {
+    next: (data: object) => void;
+}) => JSX_2.Element;
+
+export declare function now(): number;
+
+declare type ParamType = 'string' | 'number' | 'boolean' | 'array' | 'json';
+
+declare type ParamValue<T extends ParamType> = T extends 'number' ? number | undefined : T extends 'boolean' ? boolean | undefined : T extends 'array' | 'json' ? any | undefined : string | undefined;
+
+export declare function Quest({ next, surveyJson, customQuestions }: {
+    next: (data: object) => void;
+    surveyJson: object;
+    customQuestions?: ComponentsMap;
+}): JSX_2.Element;
+
+export declare function shuffle(array: any[]): any[];
+
+export declare interface StudyEvent {
+    index: number;
+    type: string;
+    name: string;
+    data: any;
+    start: number;
+    end: number;
+    duration: number;
+}
+
+declare function Text_2({ content, buttonText, className, next, animate, }: {
+    content: React.ReactNode;
+    buttonText?: string;
+    onButtonClick?: () => void;
+    className?: string;
+    next: (newData: object) => void;
+    animate?: boolean;
+}): JSX_2.Element;
+export { Text_2 as Text }
+
+export declare function Upload({ data, next, sessionID, generateFiles, uploadRaw, }: {
+    data: StudyEvent[];
+    next: () => void;
+    sessionID?: string | null;
+    generateFiles: (sessionID: string, data: StudyEvent[]) => FileUpload[];
+    uploadRaw: boolean;
+}): JSX_2.Element;
+
+export { }