Mock api / Throwaway Edit UI Changes

packages/design/src/Form/index.tsx

@@ -25,7 +25,7 @@ export type ComponentForPattern<T extends Pattern = Pattern<unknown>> = Record<
 
 export type FormElementComponent<T extends Pattern = Pattern<unknown>> =
   React.ComponentType<{
-    prompt: T;
+    pattern: T;
   }>;
 
 const usePrompt = (
@@ -103,12 +103,8 @@ export default function Form({
         <fieldset className="usa-fieldset">
           {prompt.parts
             .map((pattern, index) => {
-              if (pattern.type === 'text') {
-                console.log('skipping', pattern.type);
-                return null;
-              }
               const Component = context.components[pattern.type];
-              return <Component key={index} prompt={pattern} />;
+              return <Component key={index} pattern={pattern} />;
             })
             .filter(a => a)}
           {/* Add submit button or other controls as needed */}

packages/design/src/FormManager/FormEdit/FormElementEdit.tsx

@@ -37,7 +37,7 @@ export const FormElementEdit = ({
             formElement.id,
             formData
           );
-          //onChange(updatedForm);
+          onChange(updatedForm);
         })}
       >
         <input className="usa-button" type="submit" value="Save" />

packages/design/src/FormManager/FormEdit/Preview.tsx

@@ -26,7 +26,6 @@ export const PreviewForm = ({ uiContext, form }: PreviewFormProps) => {
     // don't have to regenerate it every time we render the form.
     components: createPreviewComponents(uiContext.components),
   };
-  console.log('creating session');
   const disposable = createFormSession(form); // nullSession instead?
   return <Form context={previewUiContext} session={disposable}></Form>;
 };
@@ -56,24 +55,29 @@ export const PreviewContext = createContext<PreviewContextValue>(
 );
 
 const createPatternPreviewComponent = (Component: FormElementComponent) => {
-  return function PatternPreviewComponent({ prompt }: { prompt: Pattern }) {
+  const PatternPreviewComponent: FormElementComponent = ({
+    pattern,
+  }: {
+    pattern: Pattern;
+  }) => {
     const { selectedId, setSelectedId } = useContext(PreviewContext);
     return (
       <div
         onClick={() => {
-          setSelectedId(prompt._elementId);
+          setSelectedId(pattern._elementId);
         }}
         className={classNames({
-          'bg-primary-lighter': selectedId === prompt._elementId,
+          'bg-primary-lighter': selectedId === pattern._elementId,
         })}
         //onKeyDown={handleKeyDown}
         role="button"
-        aria-pressed={selectedId === prompt._elementId}
+        aria-pressed={selectedId === pattern._elementId}
         aria-label="Select this pattern"
         tabIndex={0}
       >
-        <Component prompt={prompt} />
+        <Component pattern={pattern} />
       </div>
     );
   };
+  return PatternPreviewComponent;
 };

packages/design/src/FormManager/FormEdit/index.tsx

@@ -1,12 +1,9 @@
 import React, { useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
 
 import { type FormService } from '@atj/form-service';
 import {
   type FormDefinition,
-  type FormElementMap,
   getRootFormElement,
-  updateElements,
   FormElementId,
   getFormElement,
 } from '@atj/forms';
@@ -45,13 +42,13 @@
 const EditForm = ({
   context,
   initialForm,
   onSave,
 }: {
   context: FormEditUIContext;
   initialForm: FormDefinition;
   onSave: (form: FormDefinition) => void;
 }) => {
   const [currentForm, setCurrentForm] = useState(initialForm);
   const [selectedId, setSelectedId] = useState<FormElementId>();
   const rootField = getRootFormElement(currentForm);
   const formElement = getFormElement(currentForm, selectedId || rootField.id);
@@ -78,8 +75,9 @@
               context={context}
               initialForm={currentForm}
               formElement={formElement}
-              onChange={function (form: FormDefinition): void {
-                setCurrentForm(form);
+              onChange={(form: FormDefinition) => {
+                //setCurrentForm(form);
+                console.log('setting form onChange', form);
               }}
             />
           )}

packages/design/src/config/edit/InputElementEdit.tsx

@@ -10,52 +10,58 @@ const InputElementEdit: FormElementEditComponent<InputElement> = ({
 }) => {
   const { register } = useFormContext();
   return (
-    <div className="grid-row grid-gap">
-      <div className="grid-col grid-col-4">
-        <label className="usa-label">
-          Field label
-          <input
-            className="usa-input"
-            {...register(`${element.id}.data.text`)}
-            type="text"
-          ></input>
-        </label>
-      </div>
-      <div className="grid-col grid-col-2">
-        <label className="usa-label">
-          Default field value
-          <input
-            className="usa-input"
-            type="text"
-            {...register(`${element.id}.data.initial`)}
-          ></input>
-        </label>
-      </div>
-      <div className="grid-col grid-col-2">
-        <label className="usa-label">
-          Maximum length
-          <input
-            className="usa-input"
-            type="text"
-            {...register(`${element.id}.data.maxLength`)}
-          ></input>
-        </label>
-      </div>
-      <div className="grid-col grid-col-2">
-        <label className="usa-label">
-          Field type
-          <select className="usa-select" {...register(`${element.id}.type`)}>
-            <option value={'input'}>Input</option>
-          </select>
-        </label>
+    <div>
+      <div className="grid-row grid-gap padding-left-5">
+        <div className="grid-col grid-col-4 flex-fill flex-align-self-end">
+          <label className="usa-label">
+            Input
+            <p className="usa-hint font-ui-3xs">Instructions:</p>
+            <input
+              className="usa-input"
+              {...register(`${element.id}.data.instructions`)}
+              type="text"
+              placeholder={`Short answer: ${element.data.maxLength} chars`}
+            ></input>
+          </label>
+        </div>
+        {/* <div className="grid-col grid-col-2 flex-align-self-end">
+          <label className="usa-label">
+            <p className="usa-hint font-ui-3xs">Max length</p>
+            <input
+              className="usa-input"
+              type="text"
+              {...register(`${element.id}.data.maxLength`)}
+            ></input>
+          </label>
+        </div> */}
+        <div className="grid-col grid-col-4 flex-align-self-end">
+          <label className="usa-label">
+            <p className="usa-hint font-ui-3xs">Input type</p>
+            <select className="usa-select" {...register(`${element.id}.type`)}>
+              <option
+                value={'input'}
+              >{`${element.default} (${element.data.maxLength} chars)`}</option>
+              <option value={'input'}>Long Answer (500 chars)</option>{' '}
+              {/* this is a stub */}
+            </select>
+          </label>
+        </div>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="grid-row grid-gap padding-left-5 flex-justify-end">
+        <div>
+          <label className="usa-label">
+            <p className="usa-hint font-ui-3xs">
+              PDF Field ID: {`${element.data.text}`}
+            </p>
+          </label>
+        </div>
         <div className="usa-checkbox">
           <input
             className="usa-checkbox__input"
             type="checkbox"
             id={`${element.id}.required`}
             {...register(`${element.id}.data.required`)}
+            checked={element.required}
           />
           <label
             className="usa-checkbox__label"

packages/design/src/config/edit/ParagraphElementEdit.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { type FormElementComponent } from '../../Form';
+import { type ParagraphElement } from '@atj/forms/src/config/elements/paragraph';
+
+const ParagraphElementEdit: FormElementComponent<ParagraphElement> = ({
+  element,
+}) => {
+  const { register } = useFormContext();
+  return (
+    <div className="grid-row grid-gap">
+      <div className="grid-col grid-col-10 flex-align-self-end">
+        <label className="usa-label">
+          Text Element
+          <input
+            className="usa-input"
+            {...register(`${element.id}.data.text`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2 flex-align-self-end">
+        <label className="usa-label">
+          <p className="usa-hint font-ui-3xs">Style</p>
+          <select className="usa-select" {...register(`${element.id}.type`)}>
+            <option value={'paragraph'}>Question</option> {/* this is a stub */}
+            <option value={'paragraph'}>Title</option> {/* this is a stub */}
+            <option value={'paragraph'}>Instructions</option>{' '}
+            {/* this is a stub */}
+          </select>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default ParagraphElementEdit;

packages/design/src/config/edit/index.ts

@@ -8,7 +8,7 @@ import {
 
 import InputElementEdit from './InputElementEdit';
 import SequenceElementEdit from './SequenceElementEdit';
-import { type ComponentForPattern } from 'config/view';
+import { ComponentForPattern } from '../../Form';
 
 export type FormEditUIContext = {
   config: FormConfig;

packages/design/src/config/view/Fieldset/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { type Pattern } from '@atj/forms';
+import { type ParagraphElement } from '@atj/forms/src/config/elements/paragraph';
+
+import { type FormElementComponent } from '../../../Form';
+
+const FormSummary: FormElementComponent<Pattern<ParagraphElement>> = ({
+  pattern,
+}) => {
+  return (
+    <>
+      <p>{pattern.data.text}</p>
+    </>
+  );
+};
+export default FormSummary;

packages/design/src/config/view/FormSummary/index.tsx

@@ -4,12 +4,12 @@ import { Pattern, type FormSummaryPattern } from '@atj/forms';
 import { type FormElementComponent } from '../../../Form';
 
 const FormSummary: FormElementComponent<Pattern<FormSummaryPattern>> = ({
-  prompt,
+  pattern,
 }) => {
   return (
     <>
-      <legend className="usa-legend usa-legend--large">{prompt.title}</legend>
-      <p>{prompt.description}</p>
+      <legend className="usa-legend usa-legend--large">{pattern.title}</legend>
+      <p>{pattern.description}</p>
     </>
   );
 };

packages/design/src/config/view/Paragraph/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { type Pattern } from '@atj/forms';
+import { type ParagraphElement } from '@atj/forms/src/config/elements/paragraph';
+
+import { type FormElementComponent } from '../../../Form';
+
+const FormSummary: FormElementComponent<Pattern<ParagraphElement>> = ({
+  pattern,
+}) => {
+  return (
+    <>
+      <p>{pattern.data.text}</p>
+    </>
+  );
+};
+export default FormSummary;

packages/design/src/config/view/SubmissionConfirmation/index.tsx

@@ -5,7 +5,7 @@ import { FormElementComponent } from '../../../Form';
 
 const SubmissionConfirmation: FormElementComponent<
   Pattern<SubmissionConfirmationPattern>
-> = ({ prompt }) => {
+> = ({ pattern }) => {
   return (
     <>
       <legend className="usa-legend usa-legend--large">
@@ -19,7 +19,7 @@ const SubmissionConfirmation: FormElementComponent<
           </tr>
         </thead>
         <tbody>
-          {prompt.table.map((row, index) => {
+          {pattern.table.map((row, index) => {
             return (
               <tr key={index}>
                 <td>{row.label}</td>

packages/design/src/config/view/TextInput/TestInput.stories.tsx

@@ -28,7 +28,7 @@ export const Required = {
   args: {
     prompt: {
       _elementId: '',
-      type: 'text',
+      type: 'input',
       inputId: 'test-prompt',
       value: '',
       label: 'Please enter your first name.',
@@ -41,7 +41,7 @@ export const NotRequired = {
   args: {
     prompt: {
       _elementId: '',
-      type: 'text',
+      type: 'input',
       inputId: 'test-prompt',
       value: '',
       label: 'Please enter your first name.',

packages/design/src/config/view/TextInput/index.tsx

@@ -5,47 +5,45 @@ import { useFormContext } from 'react-hook-form';
 import { Pattern, type TextInputPattern } from '@atj/forms';
 import { type FormElementComponent } from '../../../Form';
 
-export type TextInputProps = { prompt: Pattern<TextInputPattern> };
-
 const TextInput: FormElementComponent<Pattern<TextInputPattern>> = ({
-  prompt,
+  pattern,
 }) => {
   const { register } = useFormContext();
   return (
-    <div className="usa-form-group" key={prompt.inputId}>
+    <div className="usa-form-group" key={pattern.inputId}>
       <div
         className={classNames('usa-form-group', {
-          'usa-form-group--error': prompt.error,
+          'usa-form-group--error': pattern.error,
         })}
       >
         <label
           className={classNames('usa-label', {
-            'usa-label--error': prompt.error,
+            'usa-label--error': pattern.error,
           })}
           htmlFor="input-error"
         >
-          {prompt.label}
+          {pattern.label}
         </label>
-        {prompt.error && (
+        {pattern.error && (
           <span
             className="usa-error-message"
-            id={`input-error-message-${prompt.inputId}`}
+            id={`input-error-message-${pattern.inputId}`}
             role="alert"
           >
-            {prompt.error}
+            {pattern.error}
           </span>
         )}
         <input
           className={classNames('usa-input', {
-            'usa-input--error': prompt.error,
+            'usa-input--error': pattern.error,
           })}
-          id={`input-${prompt.inputId}`}
-          defaultValue={prompt.value}
-          {...register(prompt.inputId, {
-            //required: prompt.required,
+          id={`input-${pattern.inputId}`}
+          defaultValue={pattern.value}
+          {...register(pattern.inputId, {
+            //required: pattern.required,
           })}
           type="text"
-          aria-describedby={`input-message-${prompt.inputId}`}
+          aria-describedby={`input-message-${pattern.inputId}`}
         />
       </div>
     </div>