@adriansteffan/reactive 0.0.9

package/dist/tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './dist/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    fontFamily: {
+      sans: ['Atkinson Hyperlegible', 'sans-serif'],
+      atkinson: ['Atkinson Hyperlegible', 'sans-serif'],
+    },
+    extend: {
+      keyframes: {
+        slideDown: {
+          '0%': {
+            transform: 'translateY(-10px)',
+            opacity: '0',
+          },
+          '100%': {
+            transform: 'translateY(0)',
+            opacity: '1',
+          },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+      },
+      animation: {
+        slideDown: 'slideDown 0.8s ease-out forwards',
+        fadeIn: 'fadeIn 0.5s ease-out forwards',
+      },
+    },
+  },
+  plugins: [],
+};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@adriansteffan/reactive",
+  "version": "0.0.9",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test": "vitest --silent=false",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "bin": {
+    "create-reactive-experiment": "bin/setup.js",
+    "@adriansteffan/reactive": "bin/setup.js"
+  },
+  "main": "./dist/reactive.umd.js",
+  "module": "./dist/reactive.es.js",
+  "types": "./dist/mod.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/reactive.es.js",
+      "require": "./dist/reactive.umd.js",
+      "types": "./dist/mod.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./tailwind.config.js": "./dist/tailwind.config.js"
+  },
+  "author": "Adrian Steffan",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/adriansteffan/reactive/issues"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.61.3",
+    "@tanstack/react-query-devtools": "^5.61.3",
+    "@zip.js/zip.js": "^2.7.53",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.1.0",
+    "react-toastify": "^10.0.6",
+    "survey-react-ui": "^1.12.9",
+    "uuid": "^11.0.3"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.3"
+  },
+  "devDependencies": {
+    "@eslint/config-array": "^0.19.0",
+    "@eslint/object-schema": "^2.1.4",
+    "@types/howler": "^2.2.11",
+    "@types/node": "^22.9.2",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "concurrently": "^9.1.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "glob": "^10.3.10",
+    "lru-cache": "^10.0.1",
+    "postcss": "^8.4.38",
+    "prettier": "3.2.5",
+    "rimraf": "^5.0.5",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-static-copy": "^2.1.0",
+    "vitest": "^2.1.5"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/components/experiment.tsx

@@ -0,0 +1,156 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ExperimentConfig, now } from '../utils/common';
+import { useEffect, useRef, useState } from 'react';
+import { ComponentType } from 'react';
+
+// Default components
+import Upload from './upload';
+import Text from './text';
+import Quest from './quest';
+import MasterMindleWrapper from './mastermindlewrapper';
+import MicrophoneCheck from './microphonecheck';
+
+// Default Custom Questions
+import VoicerecorderQuestionComponent from './voicerecorder';
+
+type ComponentsMap = {
+  [key: string]: ComponentType<any>;
+};
+
+// Default components map
+const defaultComponents: ComponentsMap = {
+  Text,
+  Quest,
+  Upload,
+  MicrophoneCheck,
+  MasterMindleWrapper,
+};
+
+const defaultCustomQuestions = {
+  voicerecorder: VoicerecorderQuestionComponent,
+};
+
+interface ExperimentTrial {
+  name: string;
+  type: string;
+  props?: Record<string, any>;
+}
+
+interface TrialData {
+  index: number;
+  type: string;
+  name: string;
+  data: object | undefined;
+  start: number;
+  end: number;
+  duration: number;
+}
+
+// Function to transform experiment definition into components
+const transformExperiment = (
+  experimentDef: ExperimentTrial[],
+  index: number,
+  next: (data: any) => void,
+  data: any,
+  componentsMap: ComponentsMap,
+  customQuestions: ComponentsMap,
+) => {
+  if (index >= experimentDef.length) {
+    return <></>;
+  }
+
+  const def = experimentDef[index];
+
+  const Component = componentsMap[def.type];
+
+  if (!Component) {
+    throw new Error(`No component found for type: ${def.type}`);
+  }
+
+  return (
+    <Component
+      next={next}
+      key={index}
+      data={data}
+      {...(def.type === 'Quest' ? { customQuestions: customQuestions } : {})}
+      {...def.props}
+    />
+  );
+};
+
+export default function Experiment({
+  timeline,
+  config = {
+    showProgressBar: true,
+  },
+  components = {},
+  questions = {},
+}: {
+  timeline: ExperimentTrial[];
+  config?: ExperimentConfig;
+  components?: ComponentsMap;
+  questions?: ComponentsMap;
+}) {
+  const [trialCounter, setTrialCounter] = useState(0);
+  const [data, setData] = useState<TrialData[]>([]);
+  const trialStartTimeRef = useRef(now());
+
+  const componentsMap = { ...defaultComponents, ...components };
+  const customQuestions: ComponentsMap = { ...defaultCustomQuestions, ...questions };
+
+  const progress = trialCounter / (timeline.length - 1);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [trialCounter]);
+
+  function next(newData?: object): void {
+    const currentTime = now();
+    const currentTrial = timeline[trialCounter];
+
+    if (currentTrial && data) {
+      const trialData: TrialData = {
+        index: trialCounter,
+        type: currentTrial.type,
+        name: currentTrial.name,
+        data: newData,
+        start: trialStartTimeRef.current,
+        end: currentTime,
+        duration: currentTime - trialStartTimeRef.current,
+      };
+      setData([...data, trialData]);
+    }
+
+    trialStartTimeRef.current = currentTime;
+    setTrialCounter(trialCounter + 1);
+  }
+
+  return (
+    <div className='px-4 w-screen'>
+      <div
+        className={` ${
+          config.showProgressBar ? '' : 'hidden '
+        } mt-4 sm:mt-12 max-w-2xl mx-auto flex-1 h-6 bg-gray-200 rounded-full overflow-hidden`}
+      >
+        <div
+          className={`h-full bg-gray-200 rounded-full duration-300 ${
+            progress > 0 ? ' border-black border-2' : ''
+          }`}
+          style={{
+            width: `${progress * 100}%`,
+            backgroundImage: `repeating-linear-gradient(
+          -45deg,
+          #E5E7EB,
+          #E5E7EB 10px,
+          #D1D5DB 10px,
+          #D1D5DB 20px
+        )`,
+            transition: 'width 300ms',
+          }}
+        />
+      </div>
+      {transformExperiment(timeline, trialCounter, next, data, componentsMap, customQuestions)}
+    </div>
+  );
+}

package/src/components/experimentprovider.tsx

@@ -0,0 +1,28 @@
+import 'react-toastify/dist/ReactToastify.min.css';
+import { ToastContainer } from 'react-toastify';
+
+const queryClient = new QueryClient();
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+export default function ExperimentProvider({children}: {children: ReactNode}){
+  return(<QueryClientProvider client={queryClient}>
+    {children}
+    <ToastContainer
+      position='top-center'
+      autoClose={3000}
+      hideProgressBar
+      newestOnTop={false}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable={false}
+      pauseOnHover
+      theme='light'
+      toastClassName={() => 
+        'relative flex p-4 min-h-10 rounded-none justify-between overflow-hidden cursor-pointer border-2 border-black shadow-[2px_2px_0px_rgba(0,0,0,1)] bg-white'
+      }
+      bodyClassName="text-black font-sans"
+    />
+  </QueryClientProvider>)
+}