@nyuccl/smile 0.2.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-2024 NYU Computation and Cognition Lab, Todd M. Gureckis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+<p align="center">
+<a href="https://smile.gureckislab.org/" target="_blank">
+<img src="https://smile.gureckislab.org/images/smile.svg" alt="smile" height="150" />
+</a>
+
+<p align="center">
+<i>A happy approach to online behavioral research.</i>
+</p>
+
+<p align="center">
+<a href="https://github.com/nyuccl/smile-nuxt/releases" alt="GitHub release"><img src="https://img.shields.io/github/v/release/nyuccl/smile-nuxt"></a>
+<a href="https://github.com/nyuccl/smile-nuxt/actions" alt="Build Status"><img src="https://github.com/nyuccl/smile-nuxt/actions/workflows/deploy.yml/badge.svg"></a>
+<a href="https://github.com/nyuccl/smile-nuxt/actions" alt="Doc Build Status"><img src="https://github.com/nyuccl/smile-nuxt/actions/workflows/docs-deploy.yml/badge.svg"></a>
+</p>
+
+<br />
+
+The Smile project is a new way to develop rich and interactive online experiments. Smile prioritizes modularity and reusability. Unlike tools that cater to non-programmers, Smile is designed to help reasonably competent programmers accomplish more in less time.
+
+Online docs: [https://smile.gureckislab.org](https://smile.gureckislab.org)
+
+### Highlighted features:
+
+- 🌈 Fast and fun front-end interface development with [Vue.js](https://vuejs.org),
+  [Tailwind CSS](https://tailwindcss.com/), and
+  [Shadcn/vue](https://www.shadcn-vue.com/). Create complex games, animations, and
+  surveys with ease.
+- 👩‍💻 Custom [developer mode tools](https://smile.gureckislab.org/coding/developing.html) provide a novel interface for specifying and debugging interactive
+  experiments. Quickly jump between phases and trials in your experiments,
+  [autofill forms and generate mock data for testing](https://smile.gureckislab.org/coding/autofill.html),
+  [hot-reload](https://smile.gureckislab.org/coding/developing.html#hot-module-replacement) your code without restarting the entire experiment, and more!
+- 🧩 Built-in support for
+  [common experiment elements](https://smile.gureckislab.org/coding/views.html#built-in-views) like consent forms,
+  instructions, and surveys. Just add your custom experiment logic and start
+  collecting data.
+- 🤖 Code writing is greatly accelerated using AI tools, as LLMs are
+  trained on extensive codebases covering Vue, Tailwind, and other popular web
+  standards used by the project.
+- 👫 Supports multiple [recruitment services](https://smile.gureckislab.org/recruit/recruitment.html)
+  including Prolific, MTurk, CloudResearch, and more.
+- 📝 [Data provenance features](https://smile.gureckislab.org/analysis.html#data-provenance) include an audit trail
+  of which version of the code was used to create each data file.
+- 🐍 Easy-to-use [Python library](https://smile.gureckislab.org/analysis.html#python-analysis-library-smiledata) for data analysis with Polars DataFrames, built-in plotting, and support for Jupyter and Marimo notebooks.
+- 😎 Great-looking and detailed docs, if we do say so ourselves!
+
+## License
+
+MIT License © 2022 [Todd Gureckis](https://todd.gureckislab.org)
+
+_Initial development was supported by National Science Foundation Grant [BCS-2121102](https://www.nsf.gov/awardsearch/showAward?AWD_ID=2121102&HistoricalAwards=false) to T. M. Gureckis._

package/dist/module.d.mts

@@ -0,0 +1,8 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@gureckislab/smile",
+  "configKey": "smile",
+  "version": "0.2.0-beta.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,102 @@
+import { defineNuxtModule, createResolver, addServerScanDir, addServerImportsDir, addPlugin, addRouteMiddleware, addLayout, extendPages, addComponentsDir, addImports } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
+import tailwindcss from '@tailwindcss/vite';
+import Icons from 'unplugin-icons/vite';
+import Components from 'unplugin-vue-components/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@gureckislab/smile",
+    configKey: "smile"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+    _nuxt.options.ssr = false;
+    _nuxt.options.build.transpile.push(runtimeDir);
+    addServerScanDir(resolver.resolve("./runtime/server"));
+    addServerImportsDir(resolver.resolve("./runtime/server/utils"));
+    _nuxt.options.runtimeConfig = _nuxt.options.runtimeConfig || {};
+    _nuxt.options.runtimeConfig.smile = {
+      devPassword: process.env.SMILE_DEV_PASSWORD || "",
+      tursoUrl: process.env.TURSO_DATABASE_URL || "",
+      tursoAuthToken: process.env.TURSO_AUTH_TOKEN || ""
+    };
+    _nuxt.options.runtimeConfig.public = _nuxt.options.runtimeConfig.public || {};
+    _nuxt.options.runtimeConfig.public.smile = {
+      codeName: process.env.VITE_CODE_NAME || "",
+      projectRef: process.env.VITE_PROJECT_REF || ""
+    };
+    _nuxt.options.alias["#smile-dev"] = resolver.resolve("./runtime/components/dev");
+    _nuxt.options.vite.plugins = _nuxt.options.vite.plugins || [];
+    _nuxt.options.vite.plugins.push(tailwindcss());
+    _nuxt.options.vite.plugins.push(Components({
+      resolvers: [IconsResolver()]
+    }));
+    _nuxt.options.vite.plugins.push(Icons({
+      compiler: "vue3"
+    }));
+    _nuxt.options.css.push(resolver.resolve("./runtime/css/main.css"));
+    addPlugin(resolver.resolve("./runtime/plugins/store-sync.client"));
+    addPlugin(resolver.resolve("./runtime/plugins/seed.client"));
+    addPlugin(resolver.resolve("./runtime/plugins/dev-sync.client"));
+    addPlugin(resolver.resolve("./runtime/plugins/timeline.client"));
+    addRouteMiddleware({
+      name: "smile-timeline",
+      path: resolver.resolve("./runtime/middleware/timeline.global"),
+      global: true
+    });
+    addLayout({ src: resolver.resolve("./runtime/layouts/experiment.vue"), filename: "experiment.vue" });
+    addLayout({ src: resolver.resolve("./runtime/layouts/development.vue"), filename: "development.vue" });
+    addLayout({ src: resolver.resolve("./runtime/layouts/presentation.vue"), filename: "presentation.vue" });
+    extendPages((pages) => {
+      pages.push({
+        name: "slug",
+        path: "/:slug(.*)*",
+        file: resolver.resolve("./runtime/pages/[...slug].vue")
+      });
+      pages.push({
+        name: "dev-slug",
+        path: "/dev/:slug(.*)*",
+        file: resolver.resolve("./runtime/pages/dev/[...slug].vue")
+      });
+      pages.push({
+        name: "presentation-slug",
+        path: "/presentation/:slug(.*)*",
+        file: resolver.resolve("./runtime/pages/presentation/[...slug].vue")
+      });
+      pages.push({
+        name: "dev-login",
+        path: "/dev-login",
+        file: resolver.resolve("./runtime/pages/dev-login.vue")
+      });
+      pages.push({
+        name: "info",
+        path: "/info",
+        file: resolver.resolve("./runtime/pages/info.vue")
+      });
+    });
+    addComponentsDir({ path: resolver.resolve("./runtime/components/ui"), pathPrefix: false, global: true, extensions: ["vue"] });
+    addComponentsDir({ path: resolver.resolve("./runtime/components/forms"), pathPrefix: false, global: true, extensions: ["vue"] });
+    addComponentsDir({ path: resolver.resolve("./runtime/components/layouts"), pathPrefix: false, global: true, extensions: ["vue"] });
+    addComponentsDir({ path: resolver.resolve("./runtime/components/builtins"), pathPrefix: false, global: true, extensions: ["vue"] });
+    addImports([
+      { name: "default", as: "useAPI", from: resolver.resolve("./runtime/composables/useAPI") },
+      { name: "default", as: "useViewAPI", from: resolver.resolve("./runtime/composables/useViewAPI") },
+      { name: "default", as: "useTimeline", from: resolver.resolve("./runtime/composables/useTimeline") },
+      { name: "default", as: "useStepper", from: resolver.resolve("./runtime/composables/useStepper") },
+      { name: "useSmileColorMode", from: resolver.resolve("./runtime/composables/useColorMode") },
+      { name: "getColorMode", from: resolver.resolve("./runtime/composables/useColorMode") },
+      { name: "setColorMode", from: resolver.resolve("./runtime/composables/useColorMode") },
+      { name: "default", as: "Timeline", from: resolver.resolve("./runtime/core/timeline/Timeline") },
+      { name: "cn", from: resolver.resolve("./runtime/lib/utils") },
+      { name: "default", as: "useSmileStore", from: resolver.resolve("./runtime/stores/smilestore") },
+      { name: "default", as: "useLog", from: resolver.resolve("./runtime/stores/log") }
+    ]);
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/builtins/AdvertisementView.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/AdvertisementView.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted, ref, onBeforeUnmount } from "vue";
+import { animate } from "motion";
+const api = useViewAPI();
+let timer;
+let clicked = false;
+const button = ref(null);
+function wiggle() {
+  if (!clicked && button.value) {
+    animate(button.value.$el, { rotate: [0, 60, -60, 60, -60, 0] }, { duration: 0.75 }).finished.then(() => {
+      timer = setTimeout(wiggle, 15e3);
+    });
+  }
+}
+onMounted(() => {
+  timer = setTimeout(wiggle, 3e3);
+});
+function finish() {
+  clicked = true;
+  api.preloadAllImages();
+  api.preloadAllVideos();
+  api.goNextView();
+}
+onBeforeUnmount(() => {
+  clearTimeout(timer);
+});
+</script>
+
+<template>
+  <ConstrainedTaskWindow
+    variant="ghost"
+    :responsive-u-i="api.config.responsiveUI"
+    :width="api.config.windowsizerRequest.width"
+    :height="api.config.windowsizerRequest.height"
+  >
+    <img
+      ref="logo"
+      src="/brain.svg"
+      width="220"
+      class="dark-aware-img"
+    >
+
+    <h1
+      ref="title"
+      class="text-3xl font-bold mb-4"
+    >
+      Please help us understand the mind!
+    </h1>
+
+    <p>Take part in a short experiment where you play some games.</p>
+    <br>
+
+    <Button
+      id="begintask"
+      ref="button"
+      size="lg"
+      @click="finish()"
+    >
+      I'm ready!
+    </Button>
+  </ConstrainedTaskWindow>
+</template>

package/dist/runtime/components/builtins/AdvertisementView.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/DebriefView.d.vue.ts

@@ -0,0 +1,22 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props definition
+ */
+export type Props = {
+    /**
+     * - The debrief text component to display
+     */
+    debriefText: object;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    debriefText: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    debriefText: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/DebriefView.vue

@@ -0,0 +1,43 @@
+<script setup>
+const api = useViewAPI();
+const _props = defineProps({
+  debriefText: {
+    type: Object,
+    required: true
+  }
+});
+function finish() {
+  api.goNextView();
+}
+</script>
+
+<template>
+  <!-- Main debrief container with responsive task window layout -->
+  <ConstrainedTaskWindow
+    variant="ghost"
+    :responsive-u-i="api.config.responsiveUI"
+    :width="api.config.windowsizerRequest.width"
+    :height="api.config.windowsizerRequest.height"
+    class="p-8"
+  >
+    <!-- Content container with centered layout -->
+    <div class="w-[80%] h-[80%]">
+      <!-- Dynamic debrief text component -->
+      <component :is="debriefText" />
+
+      <!-- Visual separator between content and navigation -->
+      <hr class="border-border my-6">
+
+      <!-- Navigation section with next button -->
+      <div class="flex justify-end mt-4">
+        <Button
+          variant="default"
+          @click="finish()"
+        >
+          next
+          <i-fa6-solid-arrow-right />
+        </Button>
+      </div>
+    </div>
+  </ConstrainedTaskWindow>
+</template>

package/dist/runtime/components/builtins/DebriefView.vue.d.ts

@@ -0,0 +1,22 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props definition
+ */
+export type Props = {
+    /**
+     * - The debrief text component to display
+     */
+    debriefText: object;
+};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    debriefText: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    debriefText: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/builtins/DemographicSurveyView.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;