Deploy to staging

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/risk.md

@@ -0,0 +1,59 @@
+---
+name: Risk
+about: Document project risks
+title: "[RISK]"
+labels: risk
+assignees: ''
+
+---
+
+## Title
+*What is the risk we need to manage?*
+<br />
+
+## Description
+*Describe the potential risk. For instance: Item A cannot be completed until Item B has been purchased but approval has been delayed, or Item A requires resources that have not been identified and the project is currently resource constrained.*
+
+<br />
+
+
+## Category
+
+- [ ] Timeline
+- [ ] Resource
+- [ ] Environment
+- [ ] Customer/Partner
+- [ ] Regulatory or compliance
+- [ ] Financial (cost/revenue)
+- [ ] Regulatory or compliance
+- [ ] Something else? Please suggest a category. 
+
+<br />
+
+## Potential Impact (1 - 10)
+*A quantitative rating of the potential impact on the project if the risk should materialize. Impact in a Risk Register should be scored on a scale of 1 – 10 with 10 being the highest impact.*
+
+<br />
+
+
+## Probability (1 - 10)
+*The likelihood that the risk will occur at some point in the duration of the project. This should be quantitative like Potential Impact not qualitative (high, medium or low). If you use qualitative measures you cannot calculate a Risk Score, which is done by multiplying Probability and Impact and you can easily convert a number to a descriptor e.g. 1-3 = “Low”, 4-6 = “Medium” and 7-10 = “High”.*
+
+<br />
+
+
+## Risk Score (Impact x Probability)
+
+<br />
+
+
+## Likely Outcome
+*The likely consequence or impact of the risk if it materializes.*
+
+<br />
+
+
+## Prevention and Mitigation
+*Action plan to prevent a given risk from occurring, or contingency plans if the risk occurs.*
+
+<br />

.github/ISSUE_TEMPLATE/story.md

@@ -4,7 +4,7 @@ about: Suggest a user story for this product
 title: ''
 labels: story
 assignees: ''
-projects: ['GSA-TTS/17']
+
 ---
 
 ## Overview

.github/ISSUE_TEMPLATE/task.md

@@ -0,0 +1,16 @@
+---
+name: Task
+about: Non-code/non-design tasks
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+#Title
+
+
+#Description/Context
+
+
+#Definition of Done

.github/workflows/_validate.yml

@@ -44,6 +44,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Install playwright
+        run: pnpm dlx [email protected] install --with-deps
+
       # While most of the test suite is self-contained, the tests for the demo
       # servers require a prod build of @atj/server.
       - name: Build

.gitignore

@@ -16,3 +16,4 @@ packages/form-service
 /e2e/playwright-report/
 /e2e/blob-report/
 /e2e/playwright/.cache/
+__screenshots__/

.nvmrc

@@ -1 +1 @@
-v20.16.0
+v20.18.0

README.md

@@ -1,10 +1,10 @@
-# 10x Access to Justice Tooling
+# 10x Forms Platform
 
-Test bed for ATJ platform tooling, completed as part of the [10x Digital Access to Justice Platform](https://trello.com/c/25Jl6NwJ/207-digital-access-to-justice-platform) project.
+Test bed for 10x forms tooling, completed as part of the [10x Forms Platform](https://github.com/orgs/GSA-TTS/projects/38?pane=issue&itemId=58755590&issue=GSA-TTS%7C10x-projects%7C29) project.
 
 ## Overview
 
-The workspace dependencies are depicted in this auto-generated [workspace project dependencies graph](./workspace-dependencies.svg).
+A C4-like architectural diagram is [available here](documents/diagram.md).
 
 Additional documentation:
 
@@ -17,13 +17,13 @@ The platform is made up of the following high-level terms.
 
 ### Key personas
 
-- Content authors: legal experts who craft guided interview experiences via a "no code" interface
-- Self-represented litigants (SREs): end-users who interact with the court via guided interviews created by content authors
+- Form Builders: government program office staff or UX experts who create and publish "guided interview" web experiences for members of the public and fellow government staff via a friendly browser-based app, no coding necessary. For examples of "guided interview" style web experiences, check out [IRS Direct File](https://coforma.io/case-studies/irs-direct-file#results) (filing your taxes), [GetCalFresh](https://codeforamerica.org/news/overcoming-barriers-setting-expectations-for-calfresh-eligibility/) (Applying for food benefits) and [Court Forms Online](https://courtformsonline.org/) (filing court documents).
+- Form Fillers: folks who provide info to the government via guided interviews created by Form Builders
 
 ### Things
 
-- **Blueprint**: produced by a content author, the blueprint defines the structure of an interactive session between a court and an SRL
-- **Conversation**: one instance of a blueprint; the interactive session between a court and an SRL. Other terms for this concept include dialogue or session.
+- **Blueprint**: produced by a form builder, the blueprint defines the structure of an interactive session between a government office and a form filler.
+- **Conversation**: one instance of a blueprint; the interactive session between a government office and a form filler. Other terms for this concept include dialogue or session.
 - **Pattern/template**: the building blocks of a blueprint, patterns implement UX best-practices, defining the content and behavior of the user interface.
 - **Prompt**: produced by a pattern, the prompt defines what is presented to the end user at single point in a conversation.
 - **Component**: user interface component that acts as the building block of prompts.
@@ -42,12 +42,14 @@ This project uses [pnpm workspaces](https://pnpm.io/workspaces). To work with th
 pnpm install
 ```
 
-To run the complete test suite, with coverage metrics generated:
+To install the browsers needed for the Storybook testing with `@vitest/browser`, you need to do a one-time install with `pnpm dlx [email protected] install --with-deps`. This command also needs to be run when Playwright is updated because it requires version parity to find the executables across the local dev environment and CI to get all the tests to pass. To run the complete test suite, with coverage metrics generated:
 
 ```bash
 pnpm test
 ```
 
+To run tests, you will need to have either Podman or Docker Desktop installed to enable PostgreSQL to start in a container before the tests execute. While we support both Docker and Podman, we recommend using Podman as a free alternative. For detailed setup instructions, refer to the [Podman Desktop Integration](./documents/podman-integration.md) guide.
+
 To run tests in watch mode (except the `infra` tests, which use Jest):
 
 ```bash
@@ -59,6 +61,7 @@ To start developing with hot reloading, use:
 ```bash
 pnpm build
 ```
+
 then run:
 
 ```bash

apps/server-doj/.gitignore

@@ -1 +1,2 @@
 dist/
+*.db

apps/server-doj/package.json

@@ -17,7 +17,6 @@
     "@atj/server": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.14.14",
     "@types/supertest": "^6.0.2",
     "supertest": "^7.0.0"
   }

apps/server-doj/src/server.ts

@@ -19,6 +19,7 @@ export const createCustomServer = async (db: DatabaseContext): Promise<any> => {
         '[email protected]',
         '[email protected]',
         '[email protected]',
+        '[email protected]',
         // DOJ test users
         '[email protected]',
         '[email protected]',

apps/server-kansas/.gitignore

@@ -1 +1,2 @@
 dist/
+*.db

apps/server-kansas/package.json

@@ -17,7 +17,6 @@
     "@atj/server": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.14.14",
     "@types/supertest": "^6.0.2",
     "supertest": "^7.0.0"
   }

apps/server-kansas/src/server.ts

@@ -19,6 +19,7 @@ export const createCustomServer = async (db: DatabaseContext): Promise<any> => {
         '[email protected]',
         '[email protected]',
         '[email protected]',
+        '[email protected]',
       ].includes(email.toLowerCase());
     },
   });

apps/spotlight/package.json

@@ -11,15 +11,20 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.6.1",
+    "@atj/common": "workspace:*",
     "@atj/design": "workspace:*",
     "@atj/forms": "workspace:*",
     "astro": "^4.13.2",
+    "qs": "^6.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.0.13"
+    "react-error-boundary": "^4.0.13",
+    "react-router-dom": "^6.26.0",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@astrojs/check": "^0.4.1",
+    "@types/qs": "^6.9.15",
     "@types/react": "^18.3.3"
   }
 }

apps/spotlight/src/context.ts

@@ -2,6 +2,7 @@ import {
   type FormConfig,
   type FormService,
   createFormService,
+  parsePdf,
 } from '@atj/forms';
 import { defaultFormConfig } from '@atj/forms';
 import { BrowserFormRepository } from '@atj/forms/context';
@@ -43,6 +44,7 @@ const createAppFormService = () => {
       repository,
       config: defaultFormConfig,
       isUserLoggedIn: () => true,
+      parsePdf,
     });
   } else {
     return createTestBrowserFormService();

apps/spotlight/src/features/form-page/components/AppFormPage.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import {
+  type Location,
+  HashRouter,
+  Route,
+  Routes,
+  useLocation,
+  useParams,
+} from 'react-router-dom';
+
+import { defaultPatternComponents, Form } from '@atj/design';
+import { defaultFormConfig, getRouteDataFromQueryString } from '@atj/forms';
+
+import { getAppContext } from '../../../context.js';
+import { useFormPageStore } from '../store/index.js';
+
+export const AppFormPage = () => {
+  return (
+    <HashRouter>
+      <Routes>
+        <Route path="/:id" element={<AppFormRoute />} />
+      </Routes>
+    </HashRouter>
+  );
+};
+
+const AppFormRoute = () => {
+  const { actions, formSessionResponse } = useFormPageStore();
+  const { id } = useParams();
+  const location = useLocation();
+  const ctx = getAppContext();
+
+  if (id === undefined) {
+    throw new Error('id is undefined');
+  }
+
+  useEffect(
+    () =>
+      actions.initialize({
+        formId: id,
+        route: getRouteParamsFromLocation(location),
+      }),
+    [location, id]
+  );
+  return (
+    <>
+      {formSessionResponse.status === 'loading' && <div>Loading...</div>}
+      {formSessionResponse.status === 'error' && (
+        <div className="usa-alert usa-alert--error" role="alert">
+          <div className="usa-alert__body">
+            <h4 className="usa-alert__heading">Error loading form</h4>
+            <p className="usa-alert__text">{formSessionResponse.message}</p>
+          </div>
+        </div>
+      )}
+      {formSessionResponse.status === 'loaded' && (
+        <Form
+          context={{
+            config: defaultFormConfig,
+            components: defaultPatternComponents,
+            uswdsRoot: ctx.uswdsRoot,
+          }}
+          session={formSessionResponse.formSession}
+          onSubmit={data => {
+            actions.onSubmitForm({ formId: id, data });
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+const getRouteParamsFromLocation = (location: Location) => {
+  const queryString = location.search.startsWith('?')
+    ? location.search.substring(1)
+    : location.search;
+  return {
+    params: getRouteDataFromQueryString(queryString),
+    url: `${location.pathname}`,
+  };
+};

apps/spotlight/src/features/form-page/index.ts

@@ -0,0 +1 @@
+export { AppFormPage } from './components/AppFormPage.js';