Merge branch 'main' into jn/checkbox-radio-button-components

GSA-TTS · Apr 29, 2024 · 90d6c0c · 90d6c0c
2 parents 8b06af8 + 6f1d27b
commit 90d6c0c
Show file tree

Hide file tree

Showing 60 changed files with 2,311 additions and 1,326 deletions.
diff --git a/apps/doj-demo/src/components/AppFormManager.tsx b/apps/doj-demo/src/components/AppFormManager.tsx
@@ -13,13 +13,13 @@ export default function () {
   return (
     <FormManager
       context={{
-        config: ctx.formConfig,
+        baseUrl: ctx.baseUrl,
         components: defaultPatternComponents,
+        config: ctx.formConfig,
         editComponents: defaultPatternEditComponents,
+        formService: ctx.formService,
         uswdsRoot: ctx.uswdsRoot,
       }}
-      formService={ctx.formService}
-      baseUrl={ctx.baseUrl}
     />
   );
 }
diff --git a/apps/doj-demo/src/layouts/Layout.astro b/apps/doj-demo/src/layouts/Layout.astro
@@ -2,7 +2,6 @@
 import '../styles.css';
 
 import UsaBanner from '../components/UsaBanner.astro';
-import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
 import { getAppContext } from '../context';
 import * as routes from '../routes';
@@ -11,7 +10,6 @@ interface Props {
   title: string;
 }
 const { title } = Astro.props;
-const context = getAppContext();
 ---
 
 <html lang="en">

diff --git a/apps/spotlight/src/components/AppFormManager.tsx b/apps/spotlight/src/components/AppFormManager.tsx
@@ -13,13 +13,13 @@ export default function () {
   return (
     <FormManager
       context={{
-        config: ctx.formConfig,
+        baseUrl: ctx.baseUrl,
         components: defaultPatternComponents,
+        config: ctx.formConfig,
         editComponents: defaultPatternEditComponents,
+        formService: ctx.formService,
         uswdsRoot: ctx.uswdsRoot,
       }}
-      formService={ctx.formService}
-      baseUrl={ctx.baseUrl}
     />
   );
 }
diff --git a/packages/design/package.json b/packages/design/package.json
@@ -25,18 +25,18 @@
   ],
   "devDependencies": {
     "@playwright/test": "^1.43.1",
-    "@storybook/addon-a11y": "^8.0.8",
-    "@storybook/addon-coverage": "^1.0.1",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/preview-api": "^8.0.8",
-    "@storybook/react": "^8.0.8",
-    "@storybook/react-vite": "^8.0.8",
-    "@storybook/test": "^8.0.8",
-    "@storybook/test-runner": "^0.17.0",
-    "@storybook/types": "^8.0.8",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-coverage": "^1.0.0",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/preview-api": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-vite": "^7.6.10",
+    "@storybook/test": "^7.6.10",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/types": "^7.6.10",
     "@testing-library/react": "^15.0.2",
     "@types/deep-equal": "^1.0.4",
     "@types/prop-types": "^15.7.12",
@@ -52,9 +52,7 @@
     "gulp": "^5.0.0",
     "http-server": "^14.1.1",
     "install": "^0.13.0",
-    "npm": "^10.5.2",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^5.2.9",
     "vite-plugin-dts": "^3.8.3",
@@ -70,9 +68,10 @@
     "@uswds/uswds": "^3.8.0",
     "classnames": "^2.5.1",
     "deep-equal": "^2.2.3",
+    "react": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-router-dom": "^6.22.3",
-    "storybook": "^8.0.8",
+    "storybook": "^7.6.10",
     "zustand": "^4.5.2",
     "zustand-utils": "^1.3.2"
   }

diff --git a/packages/design/src/AvailableFormList/AvailableFormList.test.tsx b/packages/design/src/AvailableFormList/AvailableFormList.test.tsx
@@ -4,4 +4,4 @@
 import { describeStories } from '../test-helper';
 import meta, * as stories from './AvailableFormList.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/packages/design/src/Form/ActionBar/ActionBar.test.ts b/packages/design/src/Form/ActionBar/ActionBar.test.ts
@@ -4,4 +4,4 @@
 import { describeStories } from '../../test-helper';
 import meta, * as stories from './ActionBar.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/packages/design/src/Form/Form.test.tsx b/packages/design/src/Form/Form.test.tsx
@@ -4,4 +4,4 @@
 import { describeStories } from '../test-helper';
 import meta, * as stories from './Form.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/packages/design/src/Form/components/Fieldset/Fieldset.test.tsx b/packages/design/src/Form/components/Fieldset/Fieldset.test.tsx
@@ -4,4 +4,4 @@
 import { describeStories } from '../../../test-helper';
 import meta, * as stories from './Fieldset.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/packages/design/src/Form/components/FormSummary/FormSummary.test.ts b/packages/design/src/Form/components/FormSummary/FormSummary.test.ts
@@ -4,4 +4,4 @@
 import { describeStories } from '../../../test-helper';
 import meta, * as stories from './FormSummary.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/packages/design/src/Form/components/TextInput/TestInput.test.ts b/packages/design/src/Form/components/TextInput/TestInput.test.ts
@@ -4,4 +4,4 @@
 import { describeStories } from '../../../test-helper';
 import meta, * as stories from './TestInput.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/packages/design/src/FormManager/FormDelete/FormDelete.test.ts b/packages/design/src/FormManager/FormDelete/FormDelete.test.ts
@@ -4,4 +4,4 @@
 import { describeStories } from '../../test-helper';
 import meta, * as stories from './FormDelete.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/...mentImporter/DocumentImporter.stories.tsx → ...mentImporter/DocumentImporter.stories.tsx b/...mentImporter/DocumentImporter.stories.tsx → ...mentImporter/DocumentImporter.stories.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import DocumentImporter from '.';
-import { createTestForm } from '../../test-form';
+import { createTestForm } from '../../../test-form';
 
 export default {
   title: 'FormManager/DocumentImporter',
@@ -20,6 +20,6 @@ export default {
     form: createTestForm(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof DocumentImporter>;
+} as Meta<typeof DocumentImporter>;
 
 export const TestForm = {} satisfies StoryObj<typeof DocumentImporter>;
diff --git a/...DocumentImporter/DocumentImporter.test.ts → ...DocumentImporter/DocumentImporter.test.ts b/...DocumentImporter/DocumentImporter.test.ts → ...DocumentImporter/DocumentImporter.test.ts
@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import { describeStories } from '../../test-helper';
+import { describeStories } from '../../../test-helper';
 import meta, * as stories from './DocumentImporter.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/...rc/FormManager/DocumentImporter/index.tsx → ...DocumentImport/DocumentImporter/index.tsx b/...rc/FormManager/DocumentImporter/index.tsx → ...DocumentImport/DocumentImporter/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useReducer } from 'react';
+import React, { useReducer } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import {
@@ -11,8 +11,8 @@ import {
 } from '@atj/forms';
 import { type FormService } from '@atj/form-service';
 
-import Form, { FormUIContext } from '../../Form';
-import { onFileInputChangeGetFile } from '../FormList/CreateNew/file-input';
+import Form, { FormUIContext } from '../../../Form';
+import { onFileInputChangeGetFile } from '../../FormList/CreateNew/file-input';
 
 const DocumentImporter = ({
   baseUrl,
@@ -29,46 +29,6 @@ const DocumentImporter = ({
 }) => {
   const { state, actions } = useDocumentImporter(formService, form, baseUrl);
 
-  const Step: React.FC<
-    PropsWithChildren<{ title: string; step: number; current: number }>
-  > = ({ children, title, step, current }) => {
-    if (current === step) {
-      return (
-        <li className="usa-step-indicator__segment usa-step-indicator__segment--current">
-          <span className="usa-step-indicator__segment-label">
-            {title}
-            {children}
-          </span>
-        </li>
-      );
-    } else if (current < step) {
-      return (
-        <li className="usa-step-indicator__segment">
-          <span className="usa-step-indicator__segment-label">
-            {title}
-            {children}
-            <span className="usa-sr-only">not completed</span>
-          </span>
-        </li>
-      );
-    } else {
-      return (
-        <li className="usa-step-indicator__segment usa-step-indicator__segment--complete">
-          <button
-            className="usa-button--unstyled"
-            onClick={() => actions.gotoPage(step)}
-          >
-            <span className="usa-step-indicator__segment-label">
-              {title}
-              {children}
-              <span className="usa-sr-only">completed</span>
-            </span>
-          </button>
-        </li>
-      );
-    }
-  };
-
   const CreateNew = () => {
     return (
       <div className="usa-form-group">
@@ -168,13 +128,6 @@ const DocumentImporter = ({
   return (
     <div>
       <h1>Import a PDF</h1>
-      <div className="usa-step-indicator" aria-label="progress">
-        <ol className="usa-step-indicator__segments">
-          <Step title="Select a PDF" step={1} current={state.page} />
-          <Step title="Review document fields" step={2} current={state.page} />
-          <Step title="Preview form" step={3} current={state.page} />
-        </ol>
-      </div>
       {state.page === 1 && <CreateNew />}
       {state.page === 2 && <BuildFormPage />}
       {state.page === 3 && <PreviewFormPage />}
@@ -292,7 +245,7 @@ const useDocumentImporter = (
       },
       stepThreeSaveForm(formId: string) {
         formService.saveForm(formId, state.previewForm);
-        navigate(`/${formId}/edit`);
+        navigate(`/${formId}/create`);
       },
       gotoPage(step: number) {
         dispatch({ type: 'GOTO_PAGE', page: step });

diff --git a/...esign/src/FormManager/import-document.tsx → .../FormManager/FormDocumentImport/index.tsx b/...esign/src/FormManager/import-document.tsx → .../FormManager/FormDocumentImport/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { type FormService } from '@atj/form-service';
 
-import { type FormUIContext } from '../Form';
+import { type FormUIContext } from '../../Form';
 import DocumentImporter from './DocumentImporter';
 
 export const FormDocumentImport = ({

diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { useFormEditStore } from './store';
+import { useFormManagerStore } from '../store';
 
 export const AddPatternDropdown = () => {
-  const store = useFormEditStore(state => ({
+  const store = useFormManagerStore(state => ({
     availablePatterns: state.availablePatterns,
     addPattern: state.addPattern,
   }));

diff --git a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx
@@ -1,29 +1,30 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 
-import { createTestFormService } from '@atj/form-service';
+import { FormManagerProvider } from '../store';
 
 import FormEdit from '.';
-import { createTestForm, createTestFormEditContext } from '../../test-form';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { createTestForm, createTestFormManagerContext } from '../../test-form';
 
 export default {
   title: 'FormManager/FormEdit',
   component: FormEdit,
   decorators: [
     (Story, args) => (
       <MemoryRouter initialEntries={['/']}>
-        <Story {...args} />
+        <FormManagerProvider
+          context={createTestFormManagerContext()}
+          form={createTestForm()}
+        >
+          <Story {...args} />
+        </FormManagerProvider>
       </MemoryRouter>
     ),
   ],
   args: {
-    context: createTestFormEditContext(),
     formId: 'test-form',
-    formService: createTestFormService({
-      'test-form': createTestForm(),
-    }),
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof FormEdit>;

diff --git a/packages/design/src/FormManager/FormEdit/FormEdit.test.ts b/packages/design/src/FormManager/FormEdit/FormEdit.test.ts
@@ -4,4 +4,4 @@
 import { describeStories } from '../../test-helper';
 import meta, * as stories from './FormEdit.stories';
 
-describeStories(meta.title, stories);
+describeStories(meta, stories);
diff --git a/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx b/packages/design/src/FormManager/FormEdit/PreviewPattern.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { PatternComponent } from '../../Form';
-import { useFormEditStore } from './store';
+import { useFormManagerStore } from '../store';
 
 export const PreviewPattern: PatternComponent = function PreviewPattern(props) {
-  const { context, setFocus } = useFormEditStore(state => ({
+  const { context, setFocus } = useFormManagerStore(state => ({
     context: state.context,
     setFocus: state.setFocus,
     updatePatternById: state.updatePatternById,

diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
 
-import { PatternId, type FieldsetProps } from '@atj/forms';
-import { FieldsetPattern } from '@atj/forms/src/patterns/fieldset';
+import { type PatternId, type FieldsetProps } from '@atj/forms';
 
 import Fieldset from '../../../Form/components/Fieldset';
-import { useIsPatternSelected, usePattern } from '../store';
+import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
 import { PatternEditForm } from './common/PatternEditForm';
 
 const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
-  const isSelected = useIsPatternSelected(props.previewProps._patternId);
+  const isSelected = useFormManagerStore(
+    state => state.focusedPattern?.id === props.previewProps._patternId
+  );
   return (
     <>
       {isSelected ? (
@@ -29,7 +30,9 @@ const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
 };
 
 const FieldsetPreview = (props: FieldsetProps) => {
-  const pattern = usePattern<FieldsetPattern>(props._patternId);
+  const pattern = useFormManagerStore(
+    state => state.form.patterns[props._patternId]
+  );
   return (
     <>
       {pattern.data.patterns.length === 0 && <em>[Empty fieldset]</em>}
@@ -39,7 +42,7 @@ const FieldsetPreview = (props: FieldsetProps) => {
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
-  const pattern = usePattern(patternId);
+  const pattern = useFormManagerStore(state => state.form.patterns[patternId]);
   //const { register } = usePatternEditFormContext();
   return (
     <div>

diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { type FormSummaryProps, type PatternId } from '@atj/forms';
 
 import FormSummary from '../../../Form/components/FormSummary';
-import { useIsPatternSelected } from '../store';
+import { useFormManagerStore } from '../../store';
 import { PatternEditComponent } from '../types';
 
 import {
@@ -12,7 +12,9 @@ import {
 } from './common/PatternEditForm';
 
 const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = props => {
-  const isSelected = useIsPatternSelected(props.previewProps._patternId);
+  const isSelected = useFormManagerStore(
+    state => state.focusedPattern?.id === props.previewProps._patternId
+  );
   return (
     <>
       {isSelected ? (