@examplary/cli 1.0.0

package/.turbo/turbo-release.log

@@ -0,0 +1,69 @@
+[4:07:09 PM] [semantic-release] › ℹ  Running semantic-release version 24.2.7
+[4:07:10 PM] [semantic-release] › ✔  Loaded plugin "verifyConditions" from "@semantic-release/npm"
+[4:07:10 PM] [semantic-release] › ✔  Loaded plugin "verifyConditions" from "@semantic-release/github"
+[4:07:10 PM] [semantic-release] › ✔  Loaded plugin "prepare" from "@semantic-release/npm"
+[4:07:10 PM] [semantic-release] › ✔  Loaded plugin "publish" from "@semantic-release/npm"
+[4:07:10 PM] [semantic-release] › ✔  Loaded plugin "publish" from "@semantic-release/github"
+[4:07:10 PM] [semantic-release] › ✔  Loaded plugin "addChannel" from "@semantic-release/npm"
+[4:07:10 PM] [semantic-release] › ✔  Loaded plugin "addChannel" from "@semantic-release/github"
+[4:07:14 PM] [semantic-release] › ✔  Run automated release from branch main on repository https://github.com/examplary-ai/examplary
+[4:07:14 PM] [semantic-release] › ✔  Allowed to push to the Git repository
+[4:07:14 PM] [semantic-release] › ℹ  Start step "verifyConditions" of plugin "@semantic-release/npm"
+[4:07:14 PM] [semantic-release] [@semantic-release/npm] › ℹ  Verify authentication for registry https://registry.npmjs.org/
+[4:07:14 PM] [semantic-release] [@semantic-release/npm] › ℹ  Reading npm config from /home/runner/work/examplary/examplary/.npmrc
+[4:07:14 PM] [semantic-release] [@semantic-release/npm] › ℹ  Wrote NPM_TOKEN to /tmp/87543065a99722d5233a87b2f2b107ba/.npmrc
+tschoffelen
+[4:07:15 PM] [semantic-release] › ✔  Completed step "verifyConditions" of plugin "@semantic-release/npm"
+[4:07:15 PM] [semantic-release] › ℹ  Start step "verifyConditions" of plugin "@semantic-release/github"
+[4:07:15 PM] [semantic-release] [@semantic-release/github] › ℹ  Verify GitHub authentication (https://api.github.com)
+[4:07:15 PM] [semantic-release] › ✔  Completed step "verifyConditions" of plugin "@semantic-release/github"
+[4:07:15 PM] [semantic-release] › ℹ  No git tag version found on branch main
+[4:07:15 PM] [semantic-release] › ℹ  No previous release found, retrieving all commits
+[4:07:15 PM] [semantic-release] › ℹ  Found 948 commits since last release
+[4:07:15 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:15 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Start step "analyzeCommits" of plugin "@semantic-release/commit-analyzer"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Found 4 commits for package @examplary/cli since last release
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Analyzing commit: feat: rename to @examplary/cli
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  The release type for the commit is minor
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Analyzing commit: feat: rename to @examplary/cli
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  The release type for the commit is minor
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Analyzing commit: feat: rename to @examplary/cli
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  The release type for the commit is minor
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Analyzing commit: feat: rename bundler to cli
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  The release type for the commit is minor
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Analysis of 4 commits complete: minor release
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Completed step "analyzeCommits" of plugin "@semantic-release/commit-analyzer"
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Plugin "@semantic-release/release-notes-generator" does not provide step "analyzeCommits"
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Plugin "@semantic-release/npm" does not provide step "analyzeCommits"
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Plugin "@semantic-release/github" does not provide step "analyzeCommits"
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  No more plugins
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  No more plugins
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  No more plugins
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  No more plugins
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  No more plugins
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  No more plugins
+[4:07:19 PM] [semantic-release] › ✔  Completed step "analyzeCommits" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  There is no previous release, the next release version is 1.0.0
+[4:07:19 PM] [semantic-release] › ℹ  Start step "generateNotes" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Plugin "@semantic-release/commit-analyzer" does not provide step "generateNotes"
+[4:07:19 PM] [semantic-release] › ✔  Completed step "generateNotes" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] › ℹ  Start step "generateNotes" of plugin "[Function: semantic-release-monorepo]"
+[4:07:19 PM] [semantic-release] [[Function: semantic-release-monorepo]] › ℹ  Start step "generateNotes" of plugin "@semantic-release/release-notes-generator"

package/README.md

@@ -0,0 +1,26 @@
+# Examplary CLI
+
+This package provides a command-line tool to develop and upload custom question types for
+the Examplary platform.
+
+Read more in the [📘 Developer Documentation](https://developers.examplary.ai/question-types).
+
+## Usage
+
+You can locally develop your custom question types using the Examplary CLI, by
+running the following command in your project directory:
+
+```bash
+npx @examplary/cli preview
+```
+
+To upload your custom question type, run the following command in a directory
+that contains a `question-type.json` file:
+
+```bash
+npx @examplary/cli upload
+```
+
+You'll be required to pass a `--key` argument with your API key, which you can
+obtain from your Examplary account settings. You can also set the `EXAMPLARY_API_KEY`
+environment variable to avoid passing the key every time.

package/bin/index.js

@@ -0,0 +1,37 @@
+#! /usr/bin/env node
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+import { previewCommand } from "../src/commands/preview.js";
+import { uploadCommand } from "../src/commands/upload.js";
+
+yargs()
+  .usage("examplary <cmd> [args]")
+
+  .command(
+    "upload",
+    "Bundle and upload a question type definition",
+    (yargs) => {
+      yargs
+        .option("key", {
+          type: "string",
+          description:
+            "API key for authentication (uses EXAMPLARY_API_KEY env var if not provided)",
+          default: process.env.EXAMPLARY_API_KEY || "",
+        })
+        .option("host", {
+          type: "string",
+          description: "API host to upload to",
+          default: "https://api.examplary.ai",
+        });
+    },
+    uploadCommand,
+  )
+
+  .command("preview", "Run local development server", previewCommand)
+
+  .help()
+  .recommendCommands()
+  .demandCommand()
+
+  .parse(hideBin(process.argv));

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@examplary/cli",
+  "description": "A bundler for Examplary question types.",
+  "packageManager": "yarn@4.8.1",
+  "version": "1.0.0",
+  "type": "module",
+  "bin": "./bin/index.js",
+  "scripts": {
+    "release": "semantic-release -e semantic-release-monorepo"
+  },
+  "installConfig": {
+    "hoistingLimits": "dependencies"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@examplary/schemas": "*",
+    "@examplary/ui": "*",
+    "@hono/node-server": "^1.19.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
+    "@vitejs/plugin-react": "^4.7.0",
+    "esbuild": "^0.25.8",
+    "hono": "^4.8.9",
+    "i18next": "^25.3.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "lucide-react": "^0.535.0",
+    "open": "^10.2.0",
+    "postcss": "^8.5.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-error-boundary": "^6.0.0",
+    "react-i18next": "^15.6.1",
+    "swr": "^2.3.4",
+    "tailwindcss": "^4.1.11",
+    "use-local-storage": "^3.0.0",
+    "vite": "^7.0.6",
+    "ws": "^8.18.3",
+    "yargs": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.1.0",
+    "typescript": "^5.8.3"
+  },
+  "homepage": "https://developers.examplary.ai/",
+  "author": {
+    "name": "Examplary AI",
+    "email": "hi@examplary.ai"
+  }
+}

package/src/commands/preview.js

@@ -0,0 +1,210 @@
+#! /usr/bin/env node
+import { watch } from "fs";
+import { stat, readFile } from "fs/promises";
+import { createServer as createHttpServer } from "http";
+import { join, resolve } from "path";
+import { cwd, exit } from "process";
+
+import { serve } from "@hono/node-server";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { Hono } from "hono";
+import open from "open";
+import { createServer } from "vite";
+import { WebSocketServer } from "ws";
+
+import { setApiHost, setApiKey } from "../lib/api.js";
+import { buildComponent } from "../lib/bundle.js";
+import { adaptExpressMiddleware } from "../lib/middleware.js";
+import { buildStyles } from "../lib/styles.js";
+
+export const previewCommand = async (argv) => {
+  setApiHost(argv.host);
+  setApiKey(argv.key);
+
+  // Let's check a question-type.json file exists
+  const dir = cwd();
+  const metaFilePath = join(dir, "question-type.json");
+  try {
+    await stat(metaFilePath);
+  } catch (e) {
+    console.error(`🚫 Error reading question-type.json: ${e.message}`);
+    exit(1);
+  }
+
+  // Let's start a Vite server to preview the question type
+  const root = resolve(import.meta.dirname, "..", "preview-ui");
+  const app = new Hono();
+  const vite = await createServer({
+    server: { middlewareMode: true },
+    mode: "development",
+    appType: "custom",
+    root,
+    plugins: [react(), tailwindcss()],
+  });
+
+  app.get("/api/bundle", async (c) => {
+    const path = c.req.query("path");
+    const sourcemap = c.req.query("sourcemap") === "1";
+    const componentName = c.req.query("componentName");
+
+    try {
+      const componentOutput = await buildComponent(path);
+
+      if (sourcemap) {
+        return c.body(componentOutput.sourcemap, 200, {
+          "Content-Type": "application/json",
+        });
+      } else {
+        const sizeInKb = componentOutput.length / 1000;
+        if (sizeInKb > 100) {
+          console.warn(
+            `⚠️ Component ${componentName} is larger than 100 kB! Consider optimizing it.`,
+          );
+        }
+
+        let output = componentOutput.js;
+        if (componentOutput.sourcemap) {
+          output += `\n//# sourceMappingURL=/api/bundle?componentName=${componentName}&path=${encodeURIComponent(path || "")}&sourcemap=1`;
+        }
+
+        return c.body(output, 200, {
+          "Content-Type": "application/javascript",
+        });
+      }
+    } catch (error) {
+      console.error(
+        `🚫 Error bundling component ${componentName} from ${path}: ${error.message}`,
+      );
+      return c.text(
+        `Error bundling component ${componentName}: ${error.message}`,
+        500,
+      );
+    }
+  });
+  app.get("/api/icon", async (c) => {
+    const path = c.req.query("path") || "";
+    const icon = await readFile(resolve(dir, path), "utf-8");
+
+    return c.body(icon, 200, {
+      "Content-Type": "image/svg+xml",
+    });
+  });
+
+  app.get("/api/stylesheet", async (c) => {
+    const componentName = c.req.query("componentName");
+
+    try {
+      const componentOutput = await buildStyles();
+      return c.body(componentOutput || "", 200, {
+        "Content-Type": "text/css",
+      });
+    } catch (error) {
+      console.error(
+        `🚫 Error building CSS for component ${componentName}: ${error.message}`,
+      );
+      return c.text(
+        `Error building CSS for component ${componentName}: ${error.message}`,
+        500,
+      );
+    }
+  });
+
+  let wsPort; // WebSocket port will be set when server starts
+
+  app.get("/", async (c) => {
+    let questionType;
+    try {
+      questionType = JSON.parse(await readFile(metaFilePath, "utf-8"));
+      questionType.components = questionType.components
+        ? Object.entries(questionType.components).reduce(
+            (acc, [componentName, componentPath]) => ({
+              ...acc,
+              [componentName]: `/api/bundle?componentName=${componentName}&path=${encodeURIComponent(componentPath)}`,
+            }),
+            {},
+          )
+        : questionType.components;
+    } catch (e) {
+      return c.text(`Error reading question-type.json: ${e.message}`, 500);
+    }
+
+    let template = await readFile(resolve(root, "index.html"), "utf-8");
+    template = await vite.transformIndexHtml("/", template);
+
+    // Inject hot reload script
+    const hotReloadScript = `
+      <script>
+        (function() {
+          const wsPort = ${wsPort || "null"};
+          if (wsPort) {
+            const ws = new WebSocket('ws://localhost:' + wsPort);
+            ws.onmessage = function(event) {
+              const data = JSON.parse(event.data);
+              if (data.type === 'reload') {
+                console.log('🔄 Reloading page due to file change...');
+                window.location.reload();
+              }
+            };
+            ws.onopen = function() {
+              console.log('🔗 Hot reload connected');
+            };
+            ws.onclose = function() {
+              console.log('🔌 Hot reload disconnected');
+            };
+            ws.onerror = function(error) {
+              console.log('❌ Hot reload error:', error);
+            };
+          }
+        })();
+      </script>
+    `;
+
+    template =
+      "<script>window._questionType = " +
+      JSON.stringify(questionType) +
+      `;</script>${template}${hotReloadScript}`;
+    return c.html(template);
+  });
+
+  app.use("*", adaptExpressMiddleware(vite.middlewares));
+
+  // Set up file watcher
+  const watchDir = cwd();
+  console.log(`📁 Watching ${watchDir} for changes...`);
+
+  let wss; // Will be initialized after server starts
+
+  const watcher = watch(watchDir, { recursive: true }, (filename) => {
+    if (filename && !filename.startsWith(".")) {
+      // Broadcast reload message to all connected clients
+      if (wss) {
+        wss.clients.forEach((client) => {
+          if (client.readyState === 1) {
+            // WebSocket.OPEN
+            client.send(JSON.stringify({ type: "reload" }));
+          }
+        });
+      }
+    }
+  });
+
+  // Clean up watcher on process exit
+  process.on("SIGINT", () => {
+    watcher.close();
+    process.exit(0);
+  });
+
+  serve({ fetch: app.fetch }, (address) => {
+    const port = address.port;
+    wsPort = port + 1234;
+
+    const wsServer = createHttpServer();
+    wss = new WebSocketServer({ server: wsServer });
+    wsServer.listen(wsPort);
+
+    const url = `http://localhost:${port}`;
+    console.log(`🚀 Preview server running at ${url}`);
+    open(url);
+  });
+};

package/src/commands/upload.js

@@ -0,0 +1,178 @@
+#! /usr/bin/env node
+import { readFile } from "fs/promises";
+import { join, resolve } from "path";
+import { cwd, exit } from "process";
+
+import { setApiHost, setApiKey, uploadFile } from "../lib/api.js";
+import { buildComponent } from "../lib/bundle.js";
+import { buildStyles } from "../lib/styles.js";
+
+export const uploadCommand = async (argv) => {
+  setApiHost(argv.host);
+  setApiKey(argv.key);
+
+  // Try to read the question-type.json files in the current directory
+  const dir = cwd();
+  const metaFilePath = join(dir, "question-type.json");
+  let metaFileContents;
+  let definition = {};
+  try {
+    metaFileContents = await readFile(metaFilePath, "utf-8");
+  } catch (e) {
+    console.error(`🚫 Error reading question-type.json: ${e.message}`);
+    exit(1);
+  }
+
+  // Read JSON
+  try {
+    const json = JSON.parse(metaFileContents);
+    definition = json;
+    if (definition.$schema) delete definition.$schema;
+  } catch (error) {
+    console.error(`🚫 Invalid JSON file: ${error.message}`);
+    exit(1);
+  }
+  console.log(`Uploading question type: ${definition.id}...`);
+  if (!definition.id) {
+    console.error(`🚫 Missing required field: id`);
+    exit(1);
+  }
+  if (!definition.name) {
+    console.error(`🚫 Missing required field: name`);
+    exit(1);
+  }
+
+  // Bundle and upload components
+  const components = {};
+  const validComponentTypes = [
+    "settings-area",
+    "assessment",
+    "print",
+    "results",
+  ];
+  for (const [componentType, componentPath] of Object.entries(
+    definition.components || {},
+  )) {
+    // Validation
+    if (!validComponentTypes.includes(componentType)) {
+      console.error(`🚫 Invalid component type specified: ${componentType}`);
+      exit(1);
+    }
+    const realPath = resolve(dir, componentPath);
+    if (!realPath) {
+      console.error(`🚫 Missing required file: ${componentPath}`);
+      exit(1);
+    }
+
+    // Bundle component
+    let componentOutput = {};
+    try {
+      componentOutput = await buildComponent(realPath);
+      const sizeInKb = componentOutput.js.length / 1000;
+      const sizeHint = `(${sizeInKb.toFixed(2)} kB)`;
+      console.log(
+        `• Bundled component ${componentType} from ${componentPath} ${sizeHint}`,
+      );
+
+      if (sizeInKb > 100) {
+        console.warn(
+          `  ⚠️ Component ${componentType} is larger than 100 kB! Consider optimizing it.`,
+        );
+        if (process.env.GITHUB_ACTIONS) {
+          console.log(
+            `::warning file=${realPath},title=Large component size::Component ${
+              componentType
+            } is larger than 100 kB ${sizeHint}! Consider optimizing it.`,
+          );
+        }
+      }
+    } catch (error) {
+      console.error(
+        `🚫 Error bundling component ${componentType} from ${componentPath}: ${error.message}`,
+      );
+      exit(1);
+    }
+
+    // Upload source map first if it exists
+    let sourceMapStatement = "";
+    if (componentOutput.sourcemap) {
+      const url = await uploadFile(
+        `component-${componentType}.js.map`,
+        componentOutput.sourcemap,
+        "application/json",
+      );
+
+      sourceMapStatement = `\n//# sourceMappingURL=${url}`;
+    }
+
+    // Upload component
+    components[componentType] = await uploadFile(
+      `component-${componentType}.js`,
+      componentOutput.js + sourceMapStatement,
+      "application/javascript",
+    );
+
+    console.log(`• Uploaded component ${componentType}`);
+  }
+  definition.components = components;
+
+  // Upload styles if present
+  if (Object.keys(definition.components).length) {
+    const styles = await buildStyles();
+    if (styles) {
+      definition.stylesheet = await uploadFile(
+        "styles.css",
+        styles,
+        "text/css",
+      );
+      const sizeInKb = styles.length / 1000;
+      const sizeHint = `(${sizeInKb.toFixed(2)} kB)`;
+      console.log(`• Uploaded styles ${sizeHint}`);
+    }
+  }
+
+  // Upload icon if specified
+  if (definition.icon) {
+    const iconPath = resolve(dir, definition.icon);
+    let iconContents;
+    try {
+      iconContents = await readFile(iconPath, "utf-8");
+    } catch (error) {
+      console.error(`🚫 Error reading icon file: ${error.message}`);
+      exit(1);
+    }
+    if (!iconContents) {
+      console.error(`🚫 Icon file is empty: ${iconPath}`);
+      exit(1);
+    }
+    definition.icon = await uploadFile(
+      "icon.svg",
+      iconContents,
+      "image/svg+xml",
+    );
+    console.log(`• Uploaded icon`);
+  }
+
+  // Upload the main question type definition
+  const res = await fetch(`${argv.host}/question-types`, {
+    headers: {
+      Authorization: argv.key,
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(definition),
+  });
+
+  if (!res.ok) {
+    console.error(`🚫 Uploading question type failed`);
+    try {
+      const errorResponse = await res.json();
+      console.log(errorResponse);
+    } catch (e) {
+      console.log(e);
+    }
+    exit(1);
+  }
+
+  console.log(`• Finished uploading definition\n`);
+};

package/src/lib/api.js

@@ -0,0 +1,53 @@
+import { basename } from "path";
+import { exit } from "process";
+
+// These get overwritten by the CLI options
+export let API_HOST = "https://api.examplary.ai";
+export let API_KEY = process.env.EXAMPLARY_API_KEY || "";
+
+export const setApiKey = (key) => {
+  if (!key) return;
+  API_KEY = key;
+};
+export const setApiHost = (host) => {
+  if (!host) return;
+  API_HOST = host;
+};
+
+export const uploadFile = async (fileName, fileContents, contentType) => {
+  const params = new URLSearchParams();
+  params.append("filename", basename(fileName));
+  params.append("contentType", contentType);
+  params.append("type", "question-type");
+
+  // Request the upload URL
+  const res = await fetch(`${API_HOST}/media/upload?${params.toString()}`, {
+    headers: {
+      Authorization: API_KEY,
+    },
+  });
+
+  if (!res.ok) {
+    const errorText = await res.text();
+    console.error(`🚫 Upload failed: ${errorText}`);
+    exit(1);
+  }
+
+  // Actually upload the file
+  const { uploadUrl, publicUrl } = await res.json();
+  const uploadRes = await fetch(uploadUrl, {
+    method: "PUT",
+    headers: {
+      "Content-Type": contentType,
+    },
+    body: fileContents,
+  });
+
+  if (!uploadRes.ok) {
+    const errorText = await uploadRes.text();
+    console.error(`🚫 Upload failed: ${errorText}`);
+    exit(1);
+  }
+
+  return publicUrl;
+};

package/src/lib/bundle.js

@@ -0,0 +1,35 @@
+import { build } from "esbuild";
+
+export const buildComponent = async (file) => {
+  const res = await build({
+    entryPoints: [file],
+    bundle: true,
+    write: false,
+    minify: true,
+    sourcemap: "inline",
+    platform: "browser",
+    format: "cjs",
+    external: [
+      "@examplary/ui",
+      "react",
+      "react-dom",
+      "react/jsx-runtime",
+      "react-dom/client",
+    ],
+  });
+
+  let js = res.outputFiles[0].text;
+  let sourcemap = "";
+
+  const sourceMapStatement =
+    "\n//# sourceMappingURL=data:application/json;base64,";
+  if (js.includes(sourceMapStatement)) {
+    sourcemap = Buffer.from(
+      js.split(sourceMapStatement)[1].trim(),
+      "base64",
+    ).toString("utf-8");
+    js = js.split(sourceMapStatement)[0].trim();
+  }
+
+  return { js, sourcemap };
+};

package/src/lib/middleware.js

@@ -0,0 +1,16 @@
+import { createMiddleware } from "hono/factory";
+
+export const adaptExpressMiddleware = (middleware) =>
+  createMiddleware(async (c, next) => {
+    const req = c.env.incoming;
+    const res = c.env.outgoing;
+
+    await new Promise((resolve, reject) => {
+      middleware(req, res, (err) => {
+        if (err) reject(err);
+        else resolve(c.res);
+      });
+    });
+
+    await next();
+  });

package/src/lib/styles.js

@@ -0,0 +1,32 @@
+import { createRequire } from "module";
+import path from "path";
+
+import tailwindcss from "@tailwindcss/postcss";
+import postcss from "postcss";
+
+const require = createRequire(import.meta.url);
+const tailwindDir = path.dirname(require.resolve("tailwindcss/package.json"));
+
+export const buildStyles = async () => {
+  const absolutePath = path.resolve(tailwindDir);
+
+  const inputCSS = `
+    @import "${absolutePath}/theme.css" layer(theme);
+    @import "${absolutePath}/utilities.css" layer(utilities);
+  `;
+
+  const result = await postcss([
+    tailwindcss({
+      optimize: { minify: true },
+    }),
+  ]).process(inputCSS, { from: "module-css.css" });
+
+  const utilitiesStyles = result.css.split("@layer utilities")[1].trim();
+  if (utilitiesStyles.length < 5) {
+    return null;
+  }
+
+  const css = result.css.replace(/@layer /g, "@layer modules_");
+
+  return css;
+};

package/src/preview-ui/App.tsx

@@ -0,0 +1,164 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { QuestionType } from "@examplary/schemas";
+import {
+  formatQuestionType,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@examplary/ui";
+import useLocalStorage from "use-local-storage";
+
+import { JsonEditor } from "./components/json-editor";
+import { PreviewAssessment } from "./components/preview-assessment";
+import { PreviewPrint } from "./components/preview-print";
+import { PreviewResults } from "./components/preview-results";
+import { PreviewSettingsArea } from "./components/preview-settings-area";
+
+function App() {
+  const { i18n } = useTranslation();
+
+  const rawQuestionType = globalThis._questionType as unknown as QuestionType;
+  const questionType = formatQuestionType(rawQuestionType, i18n);
+
+  const [componentName, setComponentName] = useLocalStorage(
+    `component-name-${questionType.id}`,
+    Object.keys(questionType.components || {})[0] || "assessment",
+  );
+
+  const availableComponents = Object.keys(questionType.components || {});
+
+  const [answer, setAnswer] = useState(undefined);
+
+  const defaultSettings = (questionType.settings || []).reduce(
+    (acc, setting) => {
+      if ("default" in setting) {
+        acc[setting.id] = setting.default;
+      }
+      return acc;
+    },
+    {},
+  );
+
+  const [question, setQuestion] = useLocalStorage(
+    `payload-question-${questionType.id}`,
+    {
+      id: "q_qQjXQasmUfpWRV5KO5mzkxoy",
+      title: "Napoleon's role in the French Revolution",
+      type: questionType.id,
+      description:
+        "When Napoleon Bonaparte rose to power, he was seen as a hero of the French Revolution. However, his actions and policies during his rule have been debated by historians. What was Napoleon's role in the French Revolution?",
+      settings: {
+        ...defaultSettings,
+        scoringCriteria: [
+          "The answer must correctly identify Napoleon's role in the French Revolution and provide relevant historical context.",
+        ],
+        options: [
+          {
+            correct: true,
+            value:
+              "To establish a centralized legal system and promote the principles of the Revolution.",
+          },
+          {
+            correct: false,
+            value:
+              "To overthrow the revolutionary government and establish a dictatorship.",
+          },
+          {
+            correct: false,
+            value:
+              "To maintain the status quo and prevent further revolutionary changes.",
+          },
+          {
+            correct: false,
+            value: "To support the monarchy and restore the old regime.",
+          },
+        ],
+      },
+    },
+  );
+
+  return (
+    <div className="min-h-screen flex">
+      <aside className="bg-nav w-[360px] text-black border-r-2 border-border p-6 overflow-auto">
+        <h1 className="text-xl font-semibold">{questionType.name}</h1>
+        <h2 className="text-sm opacity-50">Question type preview</h2>
+
+        <h3 className="text-sm font-medium mb-1.5 mt-8">Preview options</h3>
+        <div className="grid grid-cols-3 items-center gap-3 border-2 rounded-md bg-white p-4">
+          <p className="text-gray-800 text-sm">Component</p>
+          <Select value={componentName} onValueChange={setComponentName}>
+            <SelectTrigger className="text-sm col-span-2">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {availableComponents.map((component) => (
+                <SelectItem key={component} value={component}>
+                  {component}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-gray-800 text-sm">Locale</p>
+          <Select
+            value={i18n.language}
+            onValueChange={(value) => i18n.changeLanguage(value)}
+          >
+            <SelectTrigger className="text-sm col-span-2">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="en">en</SelectItem>
+              <SelectItem value="nl">nl</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <h3 className="text-sm font-medium mb-1.5 mt-8">Question</h3>
+        <div className="border-2 rounded-md bg-white overflow-hidden">
+          <JsonEditor value={question} setValue={setQuestion} />
+        </div>
+
+        <h3 className="text-sm font-medium mb-1.5 mt-8">Answer</h3>
+        <div className="border-2 rounded-md bg-white overflow-hidden">
+          <JsonEditor value={answer} setValue={setAnswer} />
+        </div>
+      </aside>
+
+      <div className="flex-1 flex items-center justify-center">
+        <div className="max-w-3xl mx-auto py-10" key={i18n.language}>
+          {componentName === "assessment" && (
+            <PreviewAssessment
+              questionType={questionType}
+              question={question}
+              answer={answer}
+              saveAnswer={setAnswer}
+            />
+          )}
+          {componentName === "results" && (
+            <PreviewResults
+              questionType={questionType}
+              question={question}
+              answer={answer}
+            />
+          )}
+          {componentName === "settings-area" && (
+            <PreviewSettingsArea
+              questionType={questionType}
+              question={question}
+              setQuestion={setQuestion}
+            />
+          )}
+          {componentName === "print" && (
+            <PreviewPrint questionType={questionType} question={question} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/src/preview-ui/components/json-editor.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+
+import { Editor } from "@monaco-editor/react";
+
+export const JsonEditor = ({ value, setValue }) => {
+  const [stringValue, setStringValue] = useState(() =>
+    JSON.stringify(value, null, 2),
+  );
+  useEffect(() => {
+    setStringValue(JSON.stringify(value, null, 2));
+  }, [value]);
+
+  return (
+    <Editor
+      height={160}
+      defaultLanguage="json"
+      value={stringValue}
+      onChange={(newStringValue) => {
+        setStringValue(newStringValue || "");
+        try {
+          const parsedValue = JSON.parse(newStringValue || "");
+          setValue(parsedValue);
+        } catch (error) {
+          console.error("Invalid JSON:", error);
+        }
+      }}
+      options={{
+        minimap: { enabled: false },
+        stickyScroll: { enabled: false },
+        tabSize: 3,
+        fontSize: 11,
+        lineNumbers: "off",
+        scrollBeyondLastLine: false,
+        padding: {
+          top: 8,
+          bottom: 8,
+        },
+      }}
+    />
+  );
+};

package/src/preview-ui/components/preview-assessment.tsx

@@ -0,0 +1,41 @@
+import { RichTextDisplay } from "@examplary/ui";
+
+import { QuestionComponent } from "./question-component";
+
+export const PreviewAssessment = ({
+  questionType,
+  question,
+  answer,
+  saveAnswer,
+}) => {
+  return (
+    <div className="relative flex flex-col min-h-[calc(100vh-17.5rem)]">
+      <div className="rounded-base shadow-light border-2 border-border bg-main text-black hidden md:block right-0 top-5 bottom-5 left-5 absolute" />
+      <div className="rounded-base shadow-light border-2 border-border bg-main text-black flex-1 bg-white py-7 px-10 md:mr-5 relative z-10">
+        <div className="flex justify-between gap-2 mb-3">
+          <div className="size-6 bg-bright border-2 text-sm font-bold rounded-full flex items-center justify-center shrink-0">
+            1
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-lg mb-1">
+              <RichTextDisplay as="span">{question.title}</RichTextDisplay>
+            </h3>
+            <RichTextDisplay as="p" className="text-zinc-900 mb-6">
+              {question.description}
+            </RichTextDisplay>
+
+            <QuestionComponent
+              type={questionType}
+              componentName="assessment"
+              props={{
+                question,
+                answer,
+                saveAnswer,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/preview-ui/components/preview-print.tsx

@@ -0,0 +1,37 @@
+import { RichTextDisplay } from "@examplary/ui";
+
+import { QuestionComponent } from "./question-component";
+
+export const PreviewPrint = ({ questionType, question }) => {
+  return (
+    <div className="relative">
+      <div className="border-2 border-border border-t-0 border-b-0 bg-main text-black flex-1 bg-white">
+        <div className="flex justify-between gap-2 mb-3 py-16 px-12">
+          <div className="size-6 border-2 text-sm font-bold rounded-full flex items-center justify-center shrink-0">
+            1
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-lg mb-1">
+              <RichTextDisplay as="span">{question.title}</RichTextDisplay>
+            </h3>
+            <RichTextDisplay as="p" className="text-zinc-900 mb-6">
+              {question.description}
+            </RichTextDisplay>
+
+            <QuestionComponent
+              type={questionType}
+              componentName="print"
+              props={{
+                question,
+                answerBoxes: true,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute inset-0 bottom-auto h-10 bg-gradient-to-b from-bg to-transparent z-10" />
+      <div className="absolute inset-0 top-auto h-10 bg-gradient-to-b to-bg from-transparent z-10" />
+    </div>
+  );
+};

package/src/preview-ui/components/preview-results.tsx

@@ -0,0 +1,35 @@
+import { RichTextDisplay } from "@examplary/ui";
+
+import { QuestionComponent } from "./question-component";
+
+export const PreviewResults = ({ questionType, question, answer }) => {
+  return (
+    <div className="rounded-base border-2 border-border bg-main text-black flex-1 bg-white py-7 px-10 md:mr-5 relative z-10">
+      <div className="flex justify-between gap-2 mb-3">
+        <div className="size-6 bg-bright border-2 text-sm font-bold rounded-full flex items-center justify-center shrink-0">
+          1
+        </div>
+        <div className="flex-1">
+          <h3 className="font-semibold text-lg mb-2.5">
+            <RichTextDisplay as="span">{question.title}</RichTextDisplay>
+          </h3>
+
+          {answer ? (
+            <QuestionComponent
+              type={questionType}
+              componentName="results"
+              props={{
+                question,
+                answer,
+              }}
+            />
+          ) : (
+            <span className="text-zinc-500 bg-zinc-100 rounded p-1 px-2 font-medium text-sm">
+              Empty answer
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/preview-ui/components/preview-settings-area.tsx

@@ -0,0 +1,91 @@
+import { cn, MinimalRichTextField } from "@examplary/ui";
+import { FileQuestionIcon } from "lucide-react";
+
+import { QuestionComponent } from "./question-component";
+
+export const PreviewSettingsArea = ({
+  questionType,
+  question,
+  setQuestion,
+}) => {
+  return (
+    <div
+      data-type="question"
+      data-question-id={question.id}
+      className={cn(
+        "rounded-base shadow-light border-2 border-border bg-main text-black",
+        "mb-3 relative bg-white transition-[border,shadow,opacity]",
+        "shadow-light",
+      )}
+    >
+      <div className="p-4 flex gap-3">
+        <div
+          className={cn(
+            "size-6 rounded-full border-2 items-center justify-center flex transition",
+            questionType?.iconBackgroundColor ? "" : "bg-bright",
+          )}
+          style={{
+            backgroundColor: questionType?.iconBackgroundColor || undefined,
+          }}
+        >
+          {questionType?.icon ? (
+            <img
+              src={`/api/icon?path=${questionType.icon}&questionType=${questionType.id}`}
+              alt={questionType.name}
+              className="size-3.5 object-contain"
+            />
+          ) : (
+            <FileQuestionIcon className="size-3.5" strokeWidth={2.6} />
+          )}
+        </div>
+        <div className="flex flex-1">
+          <div className="flex-1 flex flex-col">
+            <MinimalRichTextField
+              singleLine
+              readOnly
+              className={cn(
+                "w-full font-medium",
+                "cursor-not-allowed pointer-events-none",
+              )}
+              value={question.title}
+              onChange={(value) => question.update("title", value)}
+              placeholder={questionType?.titlePlaceholder}
+            />
+            <MinimalRichTextField
+              data-type="description"
+              className={cn(
+                "w-full text-sm mt-1",
+                "cursor-not-allowed pointer-events-none",
+              )}
+              value={question.description}
+              readOnly
+              showFormattingMenu
+              placeholder={questionType?.descriptionPlaceholder}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="border-t-2 pt-5">
+        <div className="pb-5 px-6">
+          <QuestionComponent
+            type={questionType}
+            componentName="settings-area"
+            props={{
+              question,
+              settings: question.settings,
+              setSetting: (settingId, value) => {
+                setQuestion({
+                  ...question,
+                  settings: {
+                    ...question.settings,
+                    [settingId]: value,
+                  },
+                });
+              },
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/preview-ui/components/question-component.tsx

@@ -0,0 +1,70 @@
+import { ComponentType } from "react";
+import { ErrorBoundary, FallbackProps } from "react-error-boundary";
+import { useTranslation } from "react-i18next";
+
+import { fetchComponent, FormattedQuestionType } from "@examplary/ui";
+import { Loader2Icon } from "lucide-react";
+import useSWR from "swr";
+
+type QuestionComponentProps = {
+  type: FormattedQuestionType;
+  componentName: "assessment" | "print" | "results" | "settings-area";
+  props: Record<string, any>;
+};
+
+export const QuestionComponentContent = ({
+  type,
+  componentName,
+  props,
+}: QuestionComponentProps) => {
+  const componentUrl = type?.components?.[componentName];
+
+  const { t, i18n } = useTranslation(type?.translationNs);
+  const { data: Component, error } = useSWR<ComponentType<any>>(
+    componentUrl,
+    fetchComponent,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
+  );
+
+  if (!componentUrl) {
+    return null;
+  }
+
+  if (error) {
+    return <FallbackComponent error={error} />;
+  }
+
+  if (!Component) {
+    return <Loader2Icon className="animate-spin size-5" />;
+  }
+
+  const finalProps = {
+    t,
+    i18n,
+    ...props,
+  };
+
+  return <Component {...finalProps} />;
+};
+
+const FallbackComponent = ({ error }: Partial<FallbackProps>) => {
+  return (
+    <div className="rounded-md bg-gray-100 p-5">
+      <p className="text-red-500 text-sm font-semibold">
+        Failed loading question component
+      </p>
+      <pre className="text-sm font-mono">{error?.message}</pre>
+    </div>
+  );
+};
+
+export const QuestionComponent = (props: QuestionComponentProps) => {
+  return (
+    <ErrorBoundary FallbackComponent={FallbackComponent}>
+      <QuestionComponentContent {...props} />
+    </ErrorBoundary>
+  );
+};

package/src/preview-ui/index.css

@@ -0,0 +1,11 @@
+@layer modules_theme, theme, modules_base, base, modules_components, components, modules_utilities, utilities;
+
+@import "tailwindcss";
+@import "@examplary/ui/src/global.css";
+
+@layer base {
+  :root {
+    --radius: 0.5rem;
+    --font-sans: "DM Sans", "Inter", "sans-serif";
+  }
+}

package/src/preview-ui/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Examplary - Question type preview</title>
+  </head>
+  <body class="bg-app-bg font-sans">
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+    <link href="/api/stylesheet" rel="stylesheet" />
+  </body>
+</html>

package/src/preview-ui/lib/i18n.ts

@@ -0,0 +1,15 @@
+import { initReactI18next } from "react-i18next";
+
+import I18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+export const i18n = I18n.use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    interpolation: {
+      escapeValue: false,
+    },
+    supportedLngs: ["en", "nl"],
+    fallbackLng: "en",
+  });

package/src/preview-ui/main.tsx

@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client";
+
+import App from "./App.tsx";
+import "./lib/i18n.ts";
+
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(<App />);