Add --all mode to serve-instrument package

packages/serve-instrument/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opendatacapture/serve-instrument",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "license": "Apache-2.0",
   "bin": {
     "serve-instrument": "./dist/cli.js"

packages/serve-instrument/src/cli.ts

@@ -6,14 +6,21 @@ import { Command, InvalidArgumentError } from 'commander';
 import { name, version } from '../package.json';
 import { Server } from './server';
 
-function parseTarget(target: string): string {
+function parseTarget(target: string, all: boolean): string {
   const resolved = path.resolve(target);
   if (!fs.existsSync(resolved)) {
     throw new InvalidArgumentError('Directory does not exist');
   }
   if (!fs.lstatSync(resolved).isDirectory()) {
     throw new InvalidArgumentError('Not a directory');
   }
+  if (all) {
+    const hasFormsDir = fs.existsSync(path.join(resolved, 'forms'));
+    const hasInteractiveDir = fs.existsSync(path.join(resolved, 'interactive'));
+    if (!hasFormsDir && !hasInteractiveDir) {
+      throw new InvalidArgumentError('In --all mode, directory must contain a forms/ and/or interactive/ subdirectory');
+    }
+  }
   return resolved;
 }
 
@@ -31,12 +38,19 @@ program
   .name(name)
   .version(version)
   .allowExcessArguments(false)
-  .argument('<target>', 'the directory containing the instrument', parseTarget)
+  .argument('<target>', 'the directory containing the instrument')
+  .option('-a, --all', 'serve all instruments from forms/ and interactive/ subdirectories')
   .option('-p --port <number>', 'the port to run the dev server on', parsePort, 3000)
   .option('-v, --verbose', 'enable verbose logging (includes request logs and build timing)')
   .action(async (target: string) => {
-    const { port, verbose } = program.opts<{ port: number; verbose: boolean }>();
-    const server = await Server.create({ port, target, verbose: verbose ?? false });
+    const { all, port, verbose } = program.opts<{ all: boolean; port: number; verbose: boolean }>();
+    const resolved = parseTarget(target, all);
+    const server = await Server.create({
+      mode: all ? 'all' : 'single',
+      port,
+      target: resolved,
+      verbose: verbose ?? false
+    });
     await server.start();
   });
 

packages/serve-instrument/src/root.tsx

@@ -1,21 +1,129 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { i18n } from '@douglasneuroinformatics/libui/i18n';
 import { ScalarInstrumentRenderer } from '@opendatacapture/react-core';
 import { decodeBase64ToUnicode } from '@opendatacapture/runtime-internal';
 
 i18n.init({ translations: {} });
 
-export type RootProps = {
-  encodedBundle: string;
+const LanguageSwitcher: React.FC = () => {
+  const [lang, setLang] = useState<'en' | 'fr'>(i18n.resolvedLanguage as 'en' | 'fr');
+  useEffect(() => {
+    const handler = (l: 'en' | 'fr') => setLang(l);
+    i18n.addEventListener('languageChange', handler);
+    return () => {
+      i18n.removeEventListener('languageChange', handler);
+    };
+  }, []);
+  return (
+    <div className="flex gap-2">
+      {(['en', 'fr'] as const).map((l) => (
+        <button
+          className={`text-sm uppercase ${lang === l ? 'font-bold underline' : 'text-gray-500 hover:text-gray-900'}`}
+          key={l}
+          onClick={() => i18n.changeLanguage(l)}
+        >
+          {l}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+type InstrumentEntry = {
+  name: string;
+  type: 'forms' | 'interactive';
 };
 
-export const Root: React.FC<RootProps> = ({ encodedBundle }) => {
+export type RootProps =
+  | { encodedBundle: string; page: 'single' }
+  | { encodedBundle: string; instrumentName: string; instrumentType: string; page: 'instrument' }
+  | { instruments: InstrumentEntry[]; page: 'index' };
+
+const IndexPage: React.FC<{ instruments: InstrumentEntry[] }> = ({ instruments }) => {
+  const forms = instruments.filter((i) => i.type === 'forms');
+  const interactive = instruments.filter((i) => i.type === 'interactive');
+
   return (
-    <div className="container h-screen py-16">
+    <div className="container mx-auto max-w-3xl px-4 py-16">
+      <div className="mb-8 flex items-center justify-between">
+        <h1 className="text-3xl font-bold">Instruments</h1>
+        <LanguageSwitcher />
+      </div>
+      {forms.length > 0 && (
+        <section className="mb-8">
+          <h2 className="mb-4 text-xl font-semibold">Forms</h2>
+          <ul className="space-y-2">
+            {forms.map((inst) => (
+              <li key={inst.name}>
+                <a
+                  className="text-blue-600 underline hover:text-blue-800"
+                  href={`/forms/${encodeURIComponent(inst.name)}`}
+                >
+                  {inst.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+      {interactive.length > 0 && (
+        <section className="mb-8">
+          <h2 className="mb-4 text-xl font-semibold">Interactive</h2>
+          <ul className="space-y-2">
+            {interactive.map((inst) => (
+              <li key={inst.name}>
+                <a
+                  className="text-blue-600 underline hover:text-blue-800"
+                  href={`/interactive/${encodeURIComponent(inst.name)}`}
+                >
+                  {inst.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+};
+
+export const Root: React.FC<RootProps> = (props) => {
+  if (props.page === 'single') {
+    return (
+      <div className="container h-screen py-16">
+        <ScalarInstrumentRenderer
+          key={props.encodedBundle}
+          target={{ bundle: decodeBase64ToUnicode(props.encodedBundle), id: null! }}
+          onSubmit={({ data }) => {
+            // eslint-disable-next-line no-alert
+            alert(JSON.stringify({ _message: 'The following data will be submitted', data }, null, 2));
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (props.page === 'index') {
+    return <IndexPage instruments={props.instruments} />;
+  }
+
+  return (
+    <div className="container h-screen py-8">
+      <div className="mb-4 flex items-start justify-between">
+        <div>
+          <a className="text-sm text-blue-600 underline hover:text-blue-800" href="/">
+            &larr; Back to list
+          </a>
+          <h1 className="mt-2 text-lg font-semibold">
+            {props.instrumentType}/{props.instrumentName}
+          </h1>
+        </div>
+        <LanguageSwitcher />
+      </div>
       <ScalarInstrumentRenderer
-        key={encodedBundle}
-        target={{ bundle: decodeBase64ToUnicode(encodedBundle), id: null! }}
+        key={props.encodedBundle}
+        target={{ bundle: decodeBase64ToUnicode(props.encodedBundle), id: null! }}
         onSubmit={({ data }) => {
           // eslint-disable-next-line no-alert
           alert(JSON.stringify({ _message: 'The following data will be submitted', data }, null, 2));
@@ -24,3 +132,5 @@ export const Root: React.FC<RootProps> = ({ encodedBundle }) => {
     </div>
   );
 };
+
+export type { InstrumentEntry };