Initial address pattern

packages/design/src/Form/index.tsx

@@ -25,10 +25,11 @@ export type ComponentForPattern<
 > = Record<string, PatternComponent<T>>;
 
 export type PatternComponent<T extends PatternProps = PatternProps<unknown>> =
-  React.ComponentType<{
-    pattern: T;
-    children?: React.ReactNode;
-  }>;
+  React.ComponentType<
+    T & {
+      children?: React.ReactNode;
+    }
+  >;
 
 const usePrompt = (
   initialPrompt: Prompt,
@@ -259,7 +260,7 @@ const PromptComponent = ({
 }) => {
   const Component = context.components[promptPart.pattern.type];
   return (
-    <Component pattern={promptPart.pattern}>
+    <Component {...promptPart.pattern}>
       {promptPart.children?.map((child, index) => {
         return (
           <PromptComponent key={index} context={context} promptPart={child} />

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

@@ -12,7 +12,7 @@ import {
 import { type FormService } from '@atj/form-service';
 
 import Form, { FormUIContext } from '../../Form';
-import { onFileInputChangeGetFile } from '../FormList/PDFFileSelect/file-input';
+import { onFileInputChangeGetFile } from '../FormList/CreateNew/file-input';
 
 const DocumentImporter = ({
   baseUrl,
@@ -69,7 +69,7 @@ const DocumentImporter = ({
     }
   };
 
-  const PDFFileSelect = () => {
+  const CreateNew = () => {
     return (
       <div className="usa-form-group">
         <label
@@ -175,7 +175,7 @@ const DocumentImporter = ({
           <Step title="Preview form" step={3} current={state.page} />
         </ol>
       </div>
-      {state.page === 1 && <PDFFileSelect />}
+      {state.page === 1 && <CreateNew />}
       {state.page === 2 && <BuildFormPage />}
       {state.page === 3 && <PreviewFormPage />}
     </div>

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

@@ -10,11 +10,15 @@ export const AddPattern = () => {
   return (
     <fieldset>
       <label className="usa-label">
-        Add a pattern:
+        Add a pattern
         <select
           className="usa-select"
-          onChange={event => store.addPattern(event.target.value)}
+          onChange={event => {
+            store.addPattern(event.target.value);
+            event.target.selectedIndex = 0;
+          }}
         >
+          <option></option>
           {store.availablePatterns.map((pattern, index) => (
             <option key={index} value={pattern.patternType}>
               {pattern.displayName}

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

@@ -104,9 +104,6 @@ export const DraggableList: React.FC<DraggableListProps> = ({
             data: {
               patterns: newOrder.map(pattern => pattern.id),
             },
-            initial: {
-              patterns: [],
-            },
           } satisfies SequencePattern);
         }
       }}

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

@@ -66,28 +66,30 @@ export const PatternEdit = () => {
         ref={settingsContainerRef}
         className="settingsContainer position-sticky"
       >
-        <form
-          className="editForm"
-          onSubmit={methods.handleSubmit(formData => {
-            updateSelectedPattern(formData);
-          })}
-        >
-          <h3>Editing &quot;{selectedPattern.data.label}&quot;...</h3>
-          <SelectedEditComponent
-            context={context}
-            form={form}
-            pattern={selectedPattern}
-          />
-          <p>
-            <input className="usa-button" type="submit" value="Save" />
-            <input
-              onClick={() => setSelectedPattern(undefined)}
-              className="usa-button close-button"
-              type="submit"
-              value="Cancel"
+        {SelectedEditComponent ? (
+          <form
+            className="editForm"
+            onSubmit={methods.handleSubmit(formData => {
+              updateSelectedPattern(formData);
+            })}
+          >
+            <h3>Editing &quot;{selectedPattern.data.label}&quot;...</h3>
+            <SelectedEditComponent
+              context={context}
+              form={form}
+              pattern={selectedPattern}
             />
-          </p>
-        </form>
+            <p>
+              <input className="usa-button" type="submit" value="Save" />
+              <input
+                onClick={() => setSelectedPattern(undefined)}
+                className="usa-button close-button"
+                type="submit"
+                value="Cancel"
+              />
+            </p>
+          </form>
+        ) : null}
       </div>
     </FormProvider>
   );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { type PatternProps, createFormSession } from '@atj/forms';
+import { createFormSession } from '@atj/forms';
 
 import Form, {
   type ComponentForPattern,
@@ -71,15 +71,15 @@ const createSequencePatternPreviewComponent = (
     pattern,
   }) => {
     const { form, setSelectedPattern } = usePreviewContext();
-    const element = getPattern(form, pattern._patternId);
-    const Component = previewComponents[pattern.type];
+    const element = getPattern(form, props._patternId);
+    const Component = previewComponents[props.type];
     return (
       <DraggableList
         form={form}
         element={element}
         setSelectedPattern={setSelectedPattern}
       >
-        <Component pattern={pattern} />
+        <Component {...pattern} />
       </DraggableList>
     );
   };
@@ -91,29 +91,25 @@ const createPatternPreviewComponent = (
   Component: PatternComponent,
   uswdsRoot: string
 ) => {
-  const PatternPreviewComponent: PatternComponent = ({
-    pattern,
-  }: {
-    pattern: PatternProps;
-  }) => {
+  const PatternPreviewComponent: PatternComponent = props => {
     const selectedPattern = useFormEditStore(state => state.selectedPattern);
     const handleEditClick = useFormEditStore(state => state.handleEditClick);
 
-    const isSelected = selectedPattern?.id === pattern._patternId;
+    const isSelected = selectedPattern?.id === props._patternId;
     const divClassNames = isSelected
       ? 'form-group-row field-selected'
       : 'form-group-row';
 
     return (
-      <div className={divClassNames} data-id={pattern._patternId}>
-        <Component pattern={pattern} />
+      <div className={divClassNames} data-id={props._patternId}>
+        <Component {...props} />
         <span className="edit-button-icon">
           <button
             className="usa-button usa-button--secondary usa-button--unstyled"
-            onClick={() => handleEditClick(pattern)}
+            onClick={() => handleEditClick(props._patternId)}
             onKeyDown={e => {
               if (e.key === 'Enter') {
-                handleEditClick(pattern);
+                handleEditClick(props._patternId);
               }
             }}
             tabIndex={0}

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

@@ -4,11 +4,11 @@ import { createContext } from 'zustand-utils';
 
 import {
   type Blueprint,
+  type Pattern,
+  type PatternId,
   type PatternMap,
-  type PatternProps,
   getPattern,
   FormBuilder,
-  Pattern,
 } from '@atj/forms';
 import { type FormEditUIContext } from './types';
 
@@ -38,7 +38,7 @@ type FormEditState = {
   }[];
 
   addPattern: (patternType: string) => void;
-  handleEditClick: (pattern: PatternProps) => void;
+  handleEditClick: (patternId: PatternId) => void;
   setSelectedPattern: (element?: Pattern) => void;
   updateSelectedPattern: (formData: PatternMap) => void;
 };
@@ -65,12 +65,12 @@ const createFormEditStore = ({
       const newPattern = builder.addPattern(state.context.config, patternType);
       set({ form: builder.form, selectedPattern: newPattern });
     },
-    handleEditClick: (pattern: PatternProps) => {
+    handleEditClick: (patternId: PatternId) => {
       const state = get();
-      if (state.selectedPattern?.id === pattern._patternId) {
+      if (state.selectedPattern?.id === patternId) {
         set({ selectedPattern: undefined });
       } else {
-        const elementToSet = getPattern(state.form, pattern._patternId);
+        const elementToSet = getPattern(state.form, patternId);
         set({ selectedPattern: elementToSet });
       }
     },

packages/design/src/FormManager/FormList/PDFFileSelect/PDFFileSelect.stories.tsx → packages/design/src/FormManager/FormList/CreateNew/PDFFileSelect.stories.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import PDFFileSelect from '.';
+import CreateNew from '.';
 
 export default {
-  title: 'FormManager/FormList/PDFFileSelect',
-  component: PDFFileSelect,
+  title: 'FormManager/FormList/CreateNew',
+  component: CreateNew,
   decorators: [
     (Story, args) => (
       <MemoryRouter initialEntries={['/']}>
@@ -18,6 +18,6 @@ export default {
     baseUrl: '/',
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PDFFileSelect>;
+} satisfies Meta<typeof CreateNew>;
 
-export const PDFFileSelectTest = {} satisfies StoryObj<typeof PDFFileSelect>;
+export const CreateNewTest = {} satisfies StoryObj<typeof CreateNew>;

packages/design/src/FormManager/FormList/PDFFileSelect/PDFFileSelect.test.tsx → packages/design/src/FormManager/FormList/CreateNew/PDFFileSelect.test.tsx

@@ -2,6 +2,6 @@
  * @vitest-environment jsdom
  */
 import { describeStories } from '../../../test-helper';
-import meta, * as stories from './PDFFileSelect.stories';
+import meta, * as stories from './CreateNew.stories';
 
 describeStories(meta.title, stories);

packages/design/src/FormManager/FormList/PDFFileSelect/hooks.ts → packages/design/src/FormManager/FormList/CreateNew/hooks.ts

@@ -44,6 +44,17 @@ export const useDocumentImporter = (
           navigate(`/${result.data}/edit`);
         }
       },
+      createNewForm: async () => {
+        const builder = new FormBuilder();
+        builder.setFormSummary({
+          title: `My form - ${new Date().toISOString()}`,
+          description: '',
+        });
+        const result = await formService.addForm(builder.form);
+        if (result.success) {
+          navigate(`/${result.data}/edit`);
+        }
+      },
     },
   };
 };

packages/design/src/FormManager/FormList/PDFFileSelect/index.tsx → packages/design/src/FormManager/FormList/CreateNew/index.tsx

@@ -6,7 +6,7 @@ import { FormService } from '@atj/form-service';
 import { onFileInputChangeGetFile } from './file-input';
 import { useDocumentImporter } from './hooks';
 
-export default function PDFFileSelect({
+export default function CreateNew({
   formService,
   baseUrl,
 }: {
@@ -16,6 +16,12 @@ export default function PDFFileSelect({
   const { actions } = useDocumentImporter(formService, baseUrl);
   return (
     <div className="usa-form-group">
+      <button
+        className="usa-button usa-button--secondary"
+        onClick={() => actions.createNewForm()}
+      >
+        Create empty form
+      </button>
       <label
         className="usa-label"
         id="file-input-specific-hint"

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { FormService } from '@atj/form-service';
-import PDFFileSelect from './PDFFileSelect';
+import CreateNew from './CreateNew';
 
 export default function FormList({
   baseUrl,
@@ -22,27 +22,38 @@ export default function FormList({
       <table className="usa-table usa-table--stacked">
         <thead>
           <tr>
-          <th className="column1" scope="col">Form title</th>
-          <th className="column2" scope="col">Description</th>
-          <th className="column3" scope="col">Actions</th>
+            <th className="column1" scope="col">
+              Form title
+            </th>
+            <th className="column2" scope="col">
+              Description
+            </th>
+            <th className="column3" scope="col">
+              Actions
+            </th>
           </tr>
         </thead>
         <tbody>
           {result.data.map((form, index) => (
             <tr key={index}>
-              <th data-label="Form title" scope="row">{form.title}</th>
+              <th data-label="Form title" scope="row">
+                {form.title}
+              </th>
               <td data-label="Description">{form.description}</td>
               <td data-label="Actions" className="actionColumn">
                 {/* <span><Link to={`/${form.id}`}>Preview</Link></span> */}
-                <span><Link to={`/${form.id}/edit`}>Edit</Link></span>
-                <span><Link to={`/${form.id}/delete`}>Delete</Link></span>
+                <span>
+                  <Link to={`/${form.id}/edit`}>Edit</Link>
+                </span>
+                <span>
+                  <Link to={`/${form.id}/delete`}>Delete</Link>
+                </span>
               </td>
             </tr>
           ))}
         </tbody>
       </table>
-
-      <PDFFileSelect baseUrl={baseUrl} formService={formService} />
+      <CreateNew baseUrl={baseUrl} formService={formService} />
     </>
   );
 }

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

@@ -21,14 +21,14 @@ const InputPatternEdit: PatternEditComponent<InputPattern> = ({ pattern }) => {
         ></input>
       </div>
       <div className="grid-col grid-col-2">
-        <label className="usa-label" htmlFor={`${pattern.id}.data.initial`}>
+        <label className="usa-label" htmlFor={`${pattern.id}.data.default`}>
           Default field value
         </label>
         <input
           className="usa-input"
-          id={`${pattern.id}.data.initial`}
+          id={`${pattern.id}.data.default`}
           type="text"
-          {...register(`${pattern.id}.data.initial`)}
+          {...register(`${pattern.id}.data.default`)}
         ></input>
       </div>
       <div className="grid-col grid-col-2">