Initial demo flow improvements (#39)

* Fix Form -> FormDefinition name mismatch

* Add ActionBar component and wire to prompts.

* Move FormManager/prompts into Form/PromptSegment.

* Simplify "create new form" workflow by initiating it via a PDF upload/extract operation.

* Cleaned up routing and navigation; added menu component.

* Add test and story modules for PDFFileSelect.

* Add available form list, so we have a separate entrypoint to the public/SRL version of forms.

* Wrap UI components with appropriate formService for client/service/test environments. This commit also fixes bugs that were identified through testing the UI with the complete workflow of pdf ingest, form save, form submit, download pdf.

* Add uswds import back into design package

* Add a debug tool to help clear local storage when it is incompatible with the current version.

apps/cli/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "module": "CommonJS",
     "outDir": "./dist",
     "emitDeclarationOnly": true
   },

apps/spotlight/astro.config.mjs

@@ -7,6 +7,7 @@ const githubRepository = await getGithubRepository(process.env);
 
 // https://astro.build/config
 export default defineConfig({
+  trailingSlash: 'always',
   base: addTrailingSlash(process.env.BASEURL || ''),
   integrations: [
     react({

apps/spotlight/package.json

@@ -19,7 +19,8 @@
     "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-error-boundary": "^4.0.12"
   },
   "devDependencies": {
     "@astrojs/check": "^0.3.1",

apps/spotlight/src/components/AppAvailableFormList.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { AvailableFormList } from '@atj/design';
+import { getAppContext } from '../context';
+import { getFormUrl } from '../routes';
+import DebugTools from './DebugTools';
+
+export default () => {
+  const ctx = getAppContext();
+  return (
+    <ErrorBoundary
+      fallback={
+        <div>
+          There was an unexpected error rendering the form list.
+          <DebugTools />
+        </div>
+      }
+    >
+      <AvailableFormList
+        formService={ctx.formService}
+        urlForForm={getFormUrl}
+      />
+    </ErrorBoundary>
+  );
+};

apps/spotlight/src/components/AppFormManager.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { FormManager } from '@atj/design';
+import { getAppContext } from '../context';
+
+export default function () {
+  const ctx = getAppContext();
+  return <FormManager formService={ctx.formService} baseUrl={ctx.baseUrl} />;
+}

apps/spotlight/src/components/AppFormRouter.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { FormRouter } from '@atj/design';
+import { getAppContext } from '../context';
+
+export default function AppFormRouter() {
+  const ctx = getAppContext();
+  return <FormRouter formService={ctx.formService} />;
+}

apps/spotlight/src/components/DebugTools.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function DebugTools() {
+  return (
+    <section>
+      <button
+        className="usa-button"
+        onClick={() => {
+          console.log('clearing');
+          window.localStorage.clear();
+          window.location.reload();
+        }}
+      >
+        Delete all demo data (clear browser local storage)
+      </button>
+    </section>
+  );
+}

apps/spotlight/src/components/Header.astro

@@ -1,5 +1,57 @@
 ---
-import closeSvg from '@atj/design/static/uswds/images/usa-icons/close.svg';
+import closeSvg from '@atj/design/static/uswds/img/usa-icons/close.svg';
+
+import * as routes from '../routes';
+
+const getNavLinkClasses = (url: string) => {
+  if (url === Astro.url.pathname) {
+    return 'usa-nav-link usa-current';
+  } else {
+    return 'usa-nav-link';
+  }
+};
 ---
 
 <header class="usa-header usa-header--basic usa-header--megamenu"></header>
+<div class="usa-overlay"></div>
+<header class="usa-header usa-header--basic">
+  <div class="usa-nav-container">
+    <div class="usa-navbar">
+      <div class="usa-logo">
+        <em class="usa-logo__text">
+          <a href={routes.getHomeUrl()} title="10x Access to Justice">
+            10x Access to Justice
+          </a>
+        </em>
+      </div>
+      <button type="button" class="usa-menu-btn">Menu</button>
+    </div>
+    <nav aria-label="Primary navigation" class="usa-nav">
+      <button type="button" class="usa-nav__close">
+        <img src={closeSvg.src} role="img" alt="Close" />
+      </button>
+      <ul class="usa-nav__primary usa-accordion">
+        <li class="usa-nav__primary-item">
+          <a
+            href={routes.getHomeUrl()}
+            class={getNavLinkClasses(routes.getHomeUrl())}><span>Home</span></a
+          >
+        </li>
+        <li class="usa-nav__primary-item">
+          <a
+            href={routes.getManageUrl()}
+            class={getNavLinkClasses(routes.getManageUrl())}
+            ><span>Manage forms</span></a
+          >
+        </li>
+        <li class="usa-nav__primary-item">
+          <a
+            href={routes.getStorybookUrl()}
+            class={getNavLinkClasses(routes.getStorybookUrl())}
+            ><span>Storybook</span></a
+          >
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>

apps/spotlight/src/context.ts

@@ -1,15 +1,21 @@
+import {
+  type FormService,
+  createBrowserFormService,
+  createTestFormService,
+} from '@atj/form-service';
 import { type GithubRepository } from './lib/github';
 
 export type AppContext = {
   baseUrl: `${string}/`;
   github: GithubRepository;
+  formService: FormService;
 };
 
 let _context: AppContext | null = null;
 
 export const getAppContext = (): AppContext => {
   if (_context === null) {
-    _context = createAppContext((import.meta as any).env);
+    _context = createAppContext(import.meta.env);
   }
   return _context;
 };
@@ -18,5 +24,14 @@ const createAppContext = (env: any) => {
   return {
     github: env.GITHUB,
     baseUrl: env.BASE_URL,
+    formService: createAppFormService(),
   };
 };
+
+const createAppFormService = () => {
+  if (globalThis.window) {
+    return createBrowserFormService();
+  } else {
+    return createTestFormService();
+  }
+};

apps/spotlight/src/layouts/Layout.astro

@@ -2,8 +2,9 @@
 import '../styles.css';
 
 import UsaBanner from '../components/UsaBanner.astro';
-import { getAppContext } from '../context';
 import Footer from '../components/Footer.astro';
+import Header from '../components/Header.astro';
+import { getAppContext } from '../context';
 
 interface Props {
   title: string;
@@ -49,6 +50,7 @@ const context = getAppContext();
   </head>
   <body>
     <UsaBanner />
+    <Header />
     <slot />
     <Footer github={context.github} />
   </body>

apps/spotlight/src/pages/forms/index.astro

@@ -1,8 +1,8 @@
 ---
-import { FormManager } from '@atj/design';
+import AppFormRouter from '../../components/AppFormRouter';
 import ContentLayout from '../../layouts/ContentLayout.astro';
 ---
 
 <ContentLayout title="10x Access to Justice Spotlight">
-  <FormManager client:only />
+  <AppFormRouter client:only />
 </ContentLayout>

apps/spotlight/src/pages/index.astro

@@ -1,30 +1,11 @@
 ---
-import { DocumentAssembler } from '@atj/design/src/experiments/document-assembler';
 import ContentLayout from '../layouts/ContentLayout.astro';
+import AppAvailableFormList from '../components/AppAvailableFormList';
+import DebugTools from '../components/DebugTools';
 ---
 
 <ContentLayout title="10x Access to Justice Spotlight">
   <h1>10x Access to Justice Spotlight</h1>
-  <ul>
-    <li>
-      <a href={`${import.meta.env.BASE_URL}design/index.html`}
-        >View frontend workshop</a
-      >
-    </li>
-    <li>
-      <a href={`${import.meta.env.BASE_URL}forms`}>Manage my forms</a>
-    </li>
-    <li>
-      <a href={`${import.meta.env.BASE_URL}form-sample`}>Sample form</a>
-    </li>
-    <li>
-      <a href={`${import.meta.env.BASE_URL}ud105-evicition-form`}
-        >UD 105 - Unlawful Detainment Eviction Form</a
-      >
-    </li>
-    <li>
-      <a href={`${import.meta.env.BASE_URL}forms/import-pdf`}>Import PDF</a>
-    </li>
-  </ul>
-  <DocumentAssembler client:load />
+  <AppAvailableFormList client:only />
+  <DebugTools client:only />
 </ContentLayout>

apps/spotlight/src/pages/manage/index.astro

@@ -0,0 +1,8 @@
+---
+import AppFormManager from '../../components/AppFormManager';
+import ContentLayout from '../../layouts/ContentLayout.astro';
+---
+
+<ContentLayout title="10x Access to Justice Spotlight">
+  <AppFormManager client:only />
+</ContentLayout>

apps/spotlight/src/routes.ts

@@ -0,0 +1,21 @@
+import { getAppContext } from './context';
+
+export const getFormUrl = (formId: string) => {
+  const context = getAppContext();
+  return `${context.baseUrl}forms/#${formId}`;
+};
+
+export const getManageUrl = () => {
+  const context = getAppContext();
+  return `${context.baseUrl}manage/`;
+};
+
+export const getHomeUrl = () => {
+  const context = getAppContext();
+  return context.baseUrl;
+};
+
+export const getStorybookUrl = () => {
+  const context = getAppContext();
+  return `${context.baseUrl}design/index.html`;
+};

apps/spotlight/tsconfig.json

@@ -3,6 +3,7 @@
   // https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/base.json
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "module": "ESNext",
     "noEmit": true,
     "jsx": "react",
     "resolveJsonModule": true

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "build": "turbo run build",
     "clean": "turbo run clean",
-    "dev": "turbo run dev",
+    "dev": "turbo run dev --concurrency 12",
     "format": "prettier --write \"packages/**/*.{js,jsx,ts,tsx}\"",
     "lint": "turbo run lint",
     "pages": "rm -rf node_modules && npm i -g pnpm turbo && pnpm i && pnpm build && ln -sf ./apps/spotlight/dist _site",

packages/design/src/AvailableFormList/AvailableFormList.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AvailableFormList from '.';
+import { createTestFormService } from '@atj/form-service';
+import { createForm } from '@atj/forms';
+
+export default {
+  title: 'AvailableFormList',
+  component: AvailableFormList,
+  args: {
+    formService: createTestFormService({
+      'form-1': createForm({
+        title: 'Form 1',
+        description: 'Use this form to...',
+      }),
+      'form-2': createForm({
+        title: 'Form 2',
+        description: 'Use this form to...',
+      }),
+    }),
+    urlForForm: () => `#`,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AvailableFormList>;
+
+export const AvailableFormListDemo = {} satisfies StoryObj<
+  typeof AvailableFormList
+>;