Initial form building workflow (#17)

* Put field details in a grid

* Reorganize React components

* Split form fields into separate module.

* Move capitalization into a function that we can pipeline with other similar transformations.

* To make it or more clear what customizations are required for different document formats and/or alternate PDF implementations, split PDF-specific into separate directory in the documents package.

* Comment out broken test in to-be-deleted interviews package.

* Test simple in-browser PDF preview.

* Initial work for form list/edit/add functionality.

* Basic client-side form storage

* Add a really simple client-side router for managing form/interview state in concert with localstorage. This is a temporary thing, to avoid spinning up a database and webserver ATM.

* Update form context constructor to take a form instead of question list.

* Add temporary function to append sample questions to a form, just to test the display of form fields. Will add in edit UI next, to remove the need for this.

* Wire in "prompt" and "prompt parts"; use react-hook form in React components.

* Link document importer from edit form page.

* Wire PDF field extraction to "import PDF" function.

* Add documents prop to Form type, to store mapping of form field ID to document ID.

* Rename "form-service" app to "rest-api" in lieu of a "form-service" package.

* Wire document downloads up to form submission. This involved some clean-up of the structure of the document importer and other refactoring. Additionally, there are inconsistencies on the imported fields that is preventing the PDFs from being properly filled, so that will be be follow-up work.

* addDocumentAndData function added

* Move addDocumentAndData to documents package.

* Rename "addDocument" to "addOutput", and "addDocumentAndData" to "addDocument"

* Fix issue with form field mapping in addDocument - this was the bug preventing PDF filling from working as expected. TODO: use unique form field IDs for imported fields.

* Add factories for test and browser form services, and create basic initial form service test of the submitForm use case.

* Wire browser form service up to all the existing CRUD operations.

* Move all service functions into "operations" directory; update service calls to return Result objects in all scenarios.

* Fix document parsing tests.

apps/form-service/package.json → apps/rest-api/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@atj/form-service",
+  "name": "@atj/form-rest-api",
   "private": true,
   "description": "backend service for handling submitted forms",
   "main": "src/index.ts",
@@ -10,7 +10,7 @@
     "dev": "tsup src/* --watch"
   },
   "dependencies": {
-    "@atj/interviews": "workspace:*"
+    "@atj/form-service": "workspace:*"
   },
   "devDependencies": {
     "@types/aws-lambda": "^8.10.109",

apps/spotlight/astro.config.mjs

@@ -7,7 +7,7 @@ const githubRepository = await getGithubRepository(process.env);
 
 // https://astro.build/config
 export default defineConfig({
-  base: process.env.BASEURL || '/',
+  base: addTrailingSlash(process.env.BASEURL || ''),
   integrations: [
     react({
       include: ['src/components/react/**'],
@@ -19,3 +19,11 @@ export default defineConfig({
     },
   },
 });
+
+function addTrailingSlash(path) {
+  var lastChar = path.substr(-1);
+  if (lastChar === '/') {
+    return path;
+  }
+  return path + '/';
+}

apps/spotlight/package.json

@@ -12,13 +12,16 @@
   "dependencies": {
     "@astrojs/react": "^3.0.3",
     "@atj/design": "workspace:*",
-    "@atj/docassemble": "workspace:*",
     "@atj/documents": "workspace:*",
+    "@atj/form-service": "workspace:*",
+    "@atj/forms": "workspace:*",
     "@atj/interviews": "workspace:*",
     "astro": "^3.5.4",
     "cheerio": "1.0.0-rc.12",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.49.3",
+    "react-router-dom": "^6.21.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.3.1",

apps/spotlight/public/sample-documents

@@ -0,0 +1 @@
+../../../packages/documents/samples

apps/spotlight/src/components/react/experiments/document-assembler.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { generateDummyPDF } from '@atj/documents';
+
+export const downloadPdfBytes = (bytes: Uint8Array) => {
+  const base64 = btoa(String.fromCharCode(...bytes));
+  var element = document.createElement('a');
+  element.setAttribute(
+    'href',
+    'data:application/pdf;base64,' + encodeURIComponent(base64)
+  );
+  element.setAttribute('download', 'sample-document.pdf');
+  element.style.display = 'none';
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+};
+
+const generatePDF = async () => {
+  const timestamp = new Date().toISOString();
+  const pdfBytes = await generateDummyPDF({ timestamp });
+  downloadPdfBytes(pdfBytes);
+};
+
+const previewPDF = async setPreviewPdfUrl => {
+  const timestamp = new Date().toISOString();
+  const pdfBytes = await generateDummyPDF({ timestamp });
+  const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
+  setPreviewPdfUrl(URL.createObjectURL(pdfBlob));
+};
+
+export const DocumentAssembler = () => {
+  const [previewPdfUrl, setPreviewPdfUrl] = useState<URL>();
+  return (
+    <div>
+      <button className="usa-button" onClick={generatePDF}>
+        Generate PDF
+      </button>
+      <button
+        className="usa-button"
+        onClick={() => previewPDF(setPreviewPdfUrl)}
+      >
+        Preview PDF
+      </button>
+      <div>
+        {previewPdfUrl ? (
+          <embed src={previewPdfUrl.toString()} width={500} height={600} />
+        ) : null}
+      </div>
+    </div>
+  );
+};

apps/spotlight/src/components/react/interview-form.tsx → apps/spotlight/src/components/react/experiments/interview-form.tsx

@@ -5,8 +5,8 @@ import {
   createInterviewContext,
   nextContext,
 } from '@atj/interviews';
-import { Field } from '@atj/interviews/src/prompt';
-import { BooleanFact, TextFact } from '@atj/interviews/src/fact';
+import { Field } from '@atj/interviews';
+import { BooleanFact, TextFact } from '@atj/interviews';
 
 const form = {
   action: 'https://yaawr84uu7.execute-api.us-east-2.amazonaws.com',