Improve edit component structure

packages/design/src/config/view/Address/index.tsx → packages/design/src/Form/components/Address/index.tsx

@@ -1,9 +1,10 @@
+import classNames from 'classnames';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { type PatternComponent } from '../../../Form';
 import { AddressComponentProps } from '@atj/forms/src/patterns/address';
-import classNames from 'classnames';
+
+import { type PatternComponent } from '../..';
 
 const Address: PatternComponent<AddressComponentProps> = props => {
   const { register } = useFormContext();

packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Fieldset from '.';
+
+export default {
+  title: 'patterns/Fieldset',
+  component: Fieldset,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Fieldset>;
+
+export const FieldsetSection1 = {
+  args: {
+    legend: 'Section 1',
+    type: 'fieldset',
+    _patternId: 'test-id',
+  },
+} satisfies StoryObj<typeof Fieldset>;
+
+export const FieldsetSection2 = {
+  args: {
+    legend: 'Section 2',
+    type: 'fieldset',
+    _patternId: 'test-id',
+  },
+} satisfies StoryObj<typeof Fieldset>;

packages/design/src/Form/components/Fieldset/Fieldset.test.tsx

@@ -0,0 +1,7 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describeStories } from '../../../test-helper';
+import meta, * as stories from './Fieldset.stories';
+
+describeStories(meta.title, stories);

packages/design/src/config/view/index.tsx → packages/design/src/Form/components/index.tsx

@@ -1,11 +1,12 @@
+import { type ComponentForPattern } from '..';
+
 import Address from './Address';
 import Fieldset from './Fieldset';
 import FormSummary from './FormSummary';
 import Paragraph from './Paragraph';
 import Sequence from './Sequence';
 import SubmissionConfirmation from './SubmissionConfirmation';
 import TextInput from './TextInput';
-import { type ComponentForPattern } from '../../Form';
 
 export const defaultPatternComponents: ComponentForPattern = {
   address: Address,

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

@@ -96,13 +96,6 @@ const editFieldLabel = async (
   await userEvent.clear(input);
   await userEvent.type(input, updatedLabel);
 
-  // Save the field to the form
-  await userEvent.click(
-    canvas.getByRole('button', {
-      name: 'Exit editing mode for this pattern',
-    })
-  );
-
   waitFor(
     async () => {
       const newLabel = await canvas.getByLabelText(updatedLabel);

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

@@ -24,21 +24,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
           })}
         >
           <button
-            aria-label="Exit editing mode for this pattern"
-            title="Exit editing mode for this pattern"
-            className="usa-button--outline usa-button--unstyled"
-          >
-            <svg
-              className="usa-icon usa-icon--size-3 margin-1"
-              style={{ verticalAlign: 'middle' }}
-              aria-hidden="true"
-              focusable="false"
-              role="img"
-            >
-              <use xlinkHref={`${context.uswdsRoot}img/sprite.svg#close`}></use>
-            </svg>
-          </button>
-          <button
+            type="button"
             aria-label="Delete this pattern"
             title="Delete this pattern"
             className="usa-button--outline usa-button--unstyled"
@@ -60,6 +46,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
             </svg>
           </button>
           <button
+            type="button"
             aria-label="Create a copy of this pattern"
             title="Create a copy of this pattern"
             className="usa-button--outline usa-button--unstyled"

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+
+import { type PatternId, type PatternMap } from '@atj/forms';
+
+import { useFormEditStore, usePattern } from './store';
+
+type PatternEditFormProps = {
+  patternId: PatternId;
+  editComponent: React.ReactNode;
+};
+
+export const PatternEditForm = ({
+  patternId,
+  editComponent,
+}: PatternEditFormProps) => {
+  const { updatePatternById } = useFormEditStore(state => ({
+    updatePatternById: state.updatePatternById,
+  }));
+  const pattern = usePattern(patternId);
+  const methods = useForm<PatternMap>({
+    defaultValues: {
+      [patternId]: pattern,
+    },
+  });
+  return (
+    <FormProvider {...methods}>
+      <form
+        onBlur={methods.handleSubmit(formData => {
+          updatePatternById(pattern.id, formData);
+        })}
+      >
+        <div className="border-1 radius-md border-primary-light padding-1">
+          {editComponent}
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export const usePatternEditFormContext = () => {
+  return useFormContext<PatternMap>();
+};

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

@@ -2,32 +2,31 @@ import React from 'react';
 
 import { PatternComponent } from '../../Form';
 import { useFormEditStore } from './store';
-import { PatternEdit } from './PatternEdit';
 
 export const PreviewPattern: PatternComponent = function PreviewPattern(props) {
-  const context = useFormEditStore(state => state.context);
-  const focusedPattern = useFormEditStore(state => state.focusedPattern);
-  const setFocus = useFormEditStore(state => state.setFocus);
-
-  const isSelected = focusedPattern?.id === props._patternId;
-  const divClassNames = isSelected
-    ? 'form-group-row field-selected'
-    : 'form-group-row';
-  const Component = context.components[props.type];
+  const { context, setFocus } = useFormEditStore(state => ({
+    context: state.context,
+    setFocus: state.setFocus,
+    updatePatternById: state.updatePatternById,
+  }));
   const EditComponent = context.editComponents[props.type];
 
-  const selected = focusedPattern?.id === props._patternId;
   return (
     <div
-      className={divClassNames}
-      data-id={props._patternId}
-      onFocus={() => {
+      onClick={event => {
+        if (EditComponent) {
+          event.stopPropagation();
+          setFocus(props._patternId);
+        }
+      }}
+      onFocus={event => {
         if (EditComponent) {
+          event.stopPropagation();
           setFocus(props._patternId);
         }
       }}
     >
-      {selected ? <PatternEdit /> : <Component {...props} />}
+      <EditComponent context={context} previewProps={props} />
     </div>
   );
 };

packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { PatternId, type FieldsetProps } from '@atj/forms';
+import { FieldsetPattern } from '@atj/forms/src/patterns/fieldset';
+
+import Fieldset from '../../../Form/components/Fieldset';
+
+import { PatternEditActions } from '../PatternEditActions';
+import { PatternEditForm } from '../PatternEditForm';
+import { useIsPatternSelected, usePattern } from '../store';
+import { PatternEditComponent } from '../types';
+
+const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
+  const isSelected = useIsPatternSelected(props.previewProps._patternId);
+  return (
+    <>
+      {isSelected ? (
+        <PatternEditForm
+          patternId={props.previewProps._patternId}
+          editComponent={
+            <EditComponent patternId={props.previewProps._patternId} />
+          }
+        ></PatternEditForm>
+      ) : (
+        <FieldsetPreview {...props.previewProps} />
+      )}
+    </>
+  );
+};
+
+const FieldsetPreview = (props: FieldsetProps) => {
+  const pattern = usePattern<FieldsetPattern>(props._patternId);
+  return (
+    <>
+      {pattern.data.patterns.length === 0 && <em>[Empty fieldset]</em>}
+      <Fieldset {...(props as FieldsetProps)} />
+    </>
+  );
+};
+
+const EditComponent = ({ patternId }: { patternId: PatternId }) => {
+  const pattern = usePattern(patternId);
+  //const { register } = usePatternEditFormContext();
+  return (
+    <div>
+      Fieldset settings go here. {JSON.stringify(pattern)}
+      <Fieldset type="fieldset" _patternId={patternId} />
+      <PatternEditActions />
+    </div>
+  );
+};
+
+export default FieldsetEdit;

packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { type FormSummaryProps, type PatternId } from '@atj/forms';
+
+import FormSummary from '../../../Form/components/FormSummary';
+import { PatternEditForm, usePatternEditFormContext } from '../PatternEditForm';
+import { useIsPatternSelected } from '../store';
+import { PatternEditComponent } from '../types';
+
+const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = props => {
+  const isSelected = useIsPatternSelected(props.previewProps._patternId);
+  return (
+    <>
+      {isSelected ? (
+        <PatternEditForm
+          patternId={props.previewProps._patternId}
+          editComponent={
+            <EditComponent patternId={props.previewProps._patternId} />
+          }
+        ></PatternEditForm>
+      ) : (
+        <FormSummary {...props.previewProps} />
+      )}
+    </>
+  );
+};
+
+const EditComponent = ({ patternId }: { patternId: PatternId }) => {
+  const { register } = usePatternEditFormContext();
+  return (
+    <div className="grid-row grid-gap">
+      <div className="grid-col grid-col-4">
+        <label className="usa-label">
+          Title
+          <input
+            className="usa-input"
+            {...register(`${patternId}.data.title`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col grid-col-2">
+        <label className="usa-label">
+          Description
+          <textarea
+            className="usa-textarea"
+            {...register(`${patternId}.data.description`)}
+          ></textarea>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default FormSummaryEdit;