@adriansteffan/reactive 0.0.30 → 0.0.32

package/dist/{web-D4yetCSC.js → web-D0E0X8r4.js}

@@ -1,4 +1,4 @@
-import { W as e } from "./mod-BY9yD0Pz.js";
+import { W as e } from "./mod-OYK5S6rI.js";
 class s extends e {
   async enable() {
     console.log("Immersive mode is only available on Android");

package/dist/{web-Crj4uOnK.js → web-GcUUyn5k.js}

@@ -1,4 +1,4 @@
-import { W as P, b as x, E } from "./mod-BY9yD0Pz.js";
+import { W as P, b as x, E } from "./mod-OYK5S6rI.js";
 function m(w) {
   const e = w.split("/").filter((t) => t !== "."), r = [];
   return e.forEach((t) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adriansteffan/reactive",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -23,7 +23,6 @@
       "types": "./dist/mod.d.ts"
     },
     "./style.css": "./dist/style.css",
-    "./preset.css": "./dist/preset.css",
     "./array": {
       "import": "./dist/reactive.es.js",
       "require": "./dist/reactive.umd.js",

package/src/components/experimentrunner.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import '../index.css';
 import { ExperimentConfig, Store, Param, now } from '../utils/common';
 import { useCallback, useEffect, useMemo, useRef, useState, ComponentType } from 'react';
 import {

package/src/components/upload.tsx

@@ -88,22 +88,39 @@ function convertArrayOfObjectsToCSV(data: DataObject[]): string {
   return [headerRow, ...dataRows].join('\n');
 }
 
+// TODO: for better cohesion move this into the components on registration
+const defaultFlatteningFunctions = {
+  'CanvasBlock': (item: TrialData) => {
+    const responseData = item.responseData;
+    if (Array.isArray(responseData)) {
+      return responseData.map((i) => ({
+        block: item.name,
+        ...i,
+      }));
+    }
+    return [];
+  }
+}
+
+const transform = ({responseData, ...obj}: any) => ({ ...obj, ...Object.entries(responseData || {}).reduce((acc, [k, v]) => ({...acc, [`data_${k}`]: v}), {}) });
+
 function combineTrialsToCsv(
   data: any[],
   filename: string,
   names: string[],
+  flatteningFunctions: Record<string, (item: any) => any[]>,
   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 [];
+      const matchingItems = data.filter((d) => d.name === name);
+      
+      return matchingItems.flatMap((item) => {
+        const flattener = item.type && flatteningFunctions[item.type];
+        
+        return flattener ? flattener(item) : transform(item);
+      });
     })
     .map((x) => (fun ? fun(x) : x));
 
@@ -256,7 +273,7 @@ export default function Upload({
   sessionID,
   generateFiles,
   sessionCSVBuilder,
-  trialCSVBuilders,
+  trialCSVBuilder,
   uploadRaw = true,
   autoUpload = false,
   androidFolderName,
@@ -264,7 +281,7 @@ export default function Upload({
   sessionID?: string | null;
   generateFiles: (sessionID: string, data: TrialData[], store?: Store) => FileUpload[];
   sessionCSVBuilder: CSVBuilder;
-  trialCSVBuilders: CSVBuilder[];
+  trialCSVBuilder: {flatteners: Record<string, ((item: TrialData) => Record<string, any>[])>, builders: CSVBuilder[]};
   uploadRaw: boolean;
   autoUpload: boolean;
   androidFolderName?: string;
@@ -396,13 +413,14 @@ export default function Upload({
       });
     }
 
-    if (trialCSVBuilders) {
-      for (const builder of trialCSVBuilders) {
+    if (trialCSVBuilder) {
+      for (const builder of trialCSVBuilder.builders) {
         files.push(
           combineTrialsToCsv(
             data,
             `${sessionIDUpload}${builder.filename}.csv`,
             builder.trials ?? [],
+            {...defaultFlatteningFunctions, ...trialCSVBuilder.flatteners},
             builder.fun,
           ),
         );

package/template/src/index.css

@@ -1,3 +1,3 @@
-@import '@adriansteffan/reactive/preset.css';
+@import '@adriansteffan/reactive/style.css';
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';

package/vite.config.ts

@@ -2,9 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
 import tailwindcssPostcss from '@tailwindcss/postcss';
-import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -14,15 +12,6 @@ export default defineConfig(() => {
     plugins: [
       react(),
       dts({ include: ['src'] , rollupTypes: true}),
-      viteStaticCopy({
-        targets: [
-          {
-            src: 'src/index.css',
-            dest: '.',
-            rename: 'preset.css',
-          },
-        ],
-      }),
     ],
     css: {
       postcss: {

package/dist/preset.css

@@ -1,134 +0,0 @@
-@import 'tailwindcss';
-
-@source '../dist/**/*.{js,ts,jsx,tsx}';
-
-@theme {
-  --font-*: initial;
-  --font-sans: Atkinson Hyperlegible, sans-serif;
-  --font-atkinson: Atkinson Hyperlegible, sans-serif;
-
-  --animate-slide-down: slideDown 0.8s ease-out forwards;
-  --animate-fade-in: fadeIn 0.5s ease-out forwards;
-
-  @keyframes slideDown {
-    0% {
-      transform: translateY(-10px);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-}
-
-
-@keyframes slideDown {
-  0% {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-:root {
-  --font-atkinson: 'Atkinson Hyperlegible', system-ui, sans-serif;
-}
-
-* {
-  -webkit-touch-callout: none;
-}
-
-@font-face {
-  font-family: 'Atkinson Hyperlegible';
-  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Atkinson Hyperlegible';
-  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Atkinson Hyperlegible';
-  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-Italic.ttf') format('truetype');
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Atkinson Hyperlegible';
-  src: url('/Atkinson_Hyperlegible/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype');
-  font-weight: 700;
-  font-style: italic;
-}
-
-/* customization for the surveyjs elements - a bit hacky and broken*/
-.sd-root-modern {
-  background-color: white !important;
-  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
-  background-size: 16px 16px;
-  position: relative; /* Make sure position is set for proper rendering */
-  font-family: 'Atkinson Hyperlegible', sans-serif; /* Added this line */
-}
-
-.sd-root-modern * {
-  font-family: 'Atkinson Hyperlegible', sans-serif;
-}
-
-/* for the rating group panel, maybe we can move that into the component at some point*/
-.sd-row,
-.sd-clearfix {
-  padding-bottom: 20px !important;
-}
-
-/* fix pet peeve in surveyjs */
-@media (max-width: 639px) {
-  .sd-imagepicker__item--inline {
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 10px;
-  }
-}