In-progress

GSA-TTS · Apr 11, 2024 · 51eb8ab · 51eb8ab
1 parent d9c52cf
commit 51eb8ab
Show file tree

Hide file tree

Showing 19 changed files with 104 additions and 99 deletions.
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
@@ -464,19 +464,19 @@ iframe:focus {
       .grid-col-8 {
         width: 100%;
       }
-  
+
       .usa-button{
         margin-left: 0;
       }
-  
+
       .grid-col-4 {
         position: static;
       }
 
       .form-group-row {
         padding: 0 0 1rem;
       }
-  
+
       .settingsContainer {
         position: fixed;
         top: 10%;

diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
@@ -9,7 +9,7 @@ import {
   type FormSession,
   type PatternProps,
   type Prompt,
-  type PromptPart,
+  type PromptComponent,
 } from '@atj/forms';
 
 import ActionBar from './ActionBar';
@@ -232,12 +232,12 @@ export default function Form({
               )}
 
               <fieldset className="usa-fieldset">
-                {prompt.parts.map((part, index) => {
+                {prompt.components.map((component, index) => {
                   return (
                     <PromptComponent
                       key={index}
                       context={context}
-                      promptPart={part}
+                      component={component}
                     />
                   );
                 })}
@@ -253,17 +253,23 @@ export default function Form({
 
 const PromptComponent = ({
   context,
-  promptPart,
+  component,
 }: {
   context: FormUIContext;
-  promptPart: PromptPart;
+  component: PromptComponent;
 }) => {
-  const Component = context.components[promptPart.pattern.type];
+  const Component = context.components[component.props.type];
+  console.log('rendering', component);
   return (
-    <Component {...promptPart.pattern}>
-      {promptPart.children?.map((child, index) => {
+    <Component {...component.props}>
+      {component.children?.map((child, index) => {
+        console.log('rendering', index, child.props.type);
         return (
-          <PromptComponent key={index} context={context} promptPart={child} />
+          <PromptComponent
+            key={index}
+            context={context}
+            component={component}
+          />
         );
       })}
     </Component>

diff --git a/packages/design/src/FormManager/FormEdit/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/DraggableList.tsx
@@ -80,6 +80,7 @@ export const DraggableList: React.FC<DraggableListProps> = ({
   );
 
   const arrayChildren = Children.toArray(children);
+
   return (
     <DndContext
       sensors={sensors}
@@ -109,13 +110,13 @@ export const DraggableList: React.FC<DraggableListProps> = ({
       }}
     >
       <SortableContext items={patterns} strategy={verticalListSortingStrategy}>
-        <ul className="editFormWrapper">
-          {arrayChildren.map((child, index) => (
+        {arrayChildren.map((child, index) => {
+          return (
             <SortableItem key={index} id={patterns[index].id}>
               {child}
             </SortableItem>
-          ))}
-        </ul>
+          );
+        })}
       </SortableContext>
     </DndContext>
   );

diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 
-import { createFormSession } from '@atj/forms';
+import { createFormSession, getPattern } from '@atj/forms';
 
 import Form, {
   type ComponentForPattern,
   type PatternComponent,
   type FormUIContext,
 } from '../../Form';
 import { useFormEditStore } from './store';
+import DraggableList from './DraggableList';
 
 export const PreviewForm = () => {
   const uiContext = useFormEditStore(state => state.context);
@@ -34,58 +35,28 @@ export const PreviewForm = () => {
   );
 };
 
-const createPreviewComponents = (
-  components: ComponentForPattern,
-  uswdsRoot: string
-): ComponentForPattern => {
-  const previewComponents: ComponentForPattern = {};
-  // TODO: Create a configurable way to to define preview components.
-  for (const [patternType, Component] of Object.entries(components)) {
-    if (patternType === 'sequence' || patternType === 'fieldset') {
-      previewComponents[patternType] = Component;
-      /*
-      previewComponents[patternType] = createSequencePatternPreviewComponent(
-        Component,
-        previewComponents
-      );
-      */
-    } else if (patternType === 'form-summary') {
-      previewComponents[patternType] = Component;
-    } else {
-      //previewComponents[patternType] = Component;
-      previewComponents[patternType] = createPatternPreviewComponent(
-        Component,
-        uswdsRoot
-      );
-    }
-  }
-  return previewComponents;
-};
-
-/*
 const createSequencePatternPreviewComponent = (
   Component: PatternComponent,
   previewComponents: ComponentForPattern
 ) => {
-  const PatternPreviewSequenceComponent: PatternComponent = ({
-    pattern,
-  }) => {
-    const { form, setSelectedPattern } = usePreviewContext();
-    const element = getPattern(form, props._patternId);
-    const Component = previewComponents[props.type];
+  const PatternPreviewSequenceComponent: PatternComponent = props => {
+    const form = useFormEditStore(state => state.form);
+    const setSelectedPattern = useFormEditStore(
+      state => state.setSelectedPattern
+    );
+    const pattern = getPattern(form, props._patternId);
     return (
       <DraggableList
         form={form}
-        element={element}
+        pattern={pattern}
         setSelectedPattern={setSelectedPattern}
       >
-        <Component {...pattern} />
+        <Component _patternId={pattern.id} {...pattern}></Component>
       </DraggableList>
     );
   };
   return PatternPreviewSequenceComponent;
 };
-*/
 
 const createPatternPreviewComponent = (
   Component: PatternComponent,
@@ -134,3 +105,32 @@ const createPatternPreviewComponent = (
   };
   return PatternPreviewComponent;
 };
+
+const createPreviewComponents = (
+  components: ComponentForPattern,
+  uswdsRoot: string
+): ComponentForPattern => {
+  const previewComponents: ComponentForPattern = {};
+  // TODO: Create a configurable way to to define preview components.
+  for (const [patternType, Component] of Object.entries(components)) {
+    previewComponents[patternType] = Component;
+    if (patternType === 'sequence') {
+      previewComponents[patternType] = createSequencePatternPreviewComponent(
+        Component,
+        previewComponents
+      );
+    }
+    /*
+    } else if (patternType === 'form-summary') {
+      previewComponents[patternType] = Component;
+    } else {
+      //previewComponents[patternType] = Component;
+      previewComponents[patternType] = createPatternPreviewComponent(
+        Component,
+        uswdsRoot
+      );
+    }
+    */
+  }
+  return previewComponents;
+};
diff --git a/packages/design/src/FormManager/FormEdit/store.tsx b/packages/design/src/FormManager/FormEdit/store.tsx
@@ -8,7 +8,7 @@ import {
   type PatternId,
   type PatternMap,
   getPattern,
-  FormBuilder,
+  BlueprintBuilder,
 } from '@atj/forms';
 import { type FormEditUIContext } from './types';
 
@@ -61,7 +61,7 @@ const createFormEditStore = ({
     ),
     addPattern: (patternType: string) => {
       const state = get();
-      const builder = new FormBuilder(state.form);
+      const builder = new BlueprintBuilder(state.form);
       const newPattern = builder.addPattern(state.context.config, patternType);
       set({ form: builder.form, selectedPattern: newPattern });
     },
@@ -81,7 +81,7 @@ const createFormEditStore = ({
         console.warn('No selected element');
         return;
       }
-      const builder = new FormBuilder(state.form);
+      const builder = new BlueprintBuilder(state.form);
       const success = builder.updatePattern(
         state.context.config,
         state.selectedPattern,

diff --git a/packages/design/src/FormManager/FormList/CreateNew/hooks.ts b/packages/design/src/FormManager/FormList/CreateNew/hooks.ts
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import { FormBuilder } from '@atj/forms';
+import { BlueprintBuilder } from '@atj/forms';
 import { type FormService } from '@atj/form-service';
 
 export const useDocumentImporter = (
@@ -14,7 +14,7 @@ export const useDocumentImporter = (
       stepOneSelectPdfByUrl: async (url: string) => {
         const data = await fetchUint8Array(`${baseUrl}${url}`);
 
-        const builder = new FormBuilder();
+        const builder = new BlueprintBuilder();
         builder.setFormSummary({
           title: url,
           description: '',
@@ -33,7 +33,7 @@ export const useDocumentImporter = (
         name: string;
         data: Uint8Array;
       }) => {
-        const builder = new FormBuilder();
+        const builder = new BlueprintBuilder();
         builder.setFormSummary({
           title: fileDetails.name,
           description: '',
@@ -45,7 +45,7 @@ export const useDocumentImporter = (
         }
       },
       createNewForm: async () => {
-        const builder = new FormBuilder();
+        const builder = new BlueprintBuilder();
         builder.setFormSummary({
           title: `My form - ${new Date().toISOString()}`,
           description: '',

diff --git a/packages/design/src/config/edit/SequencePatternEdit.tsx b/packages/design/src/config/edit/SequencePatternEdit.tsx
@@ -82,7 +82,6 @@ const SequencePatternEdit: PatternEditComponent<SequencePattern> = ({
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
-
   return (
     <fieldset>
       <DndContext

diff --git a/packages/design/src/config/edit/index.ts b/packages/design/src/config/edit/index.ts
@@ -1,14 +1,14 @@
 import FormSummaryEdit from './FormSummaryEdit';
 import InputPatternEdit from './InputPatternEdit';
 import ParagraphPatternEdit from './ParagraphPatternEdit';
-import SequencePatternEdit from './SequencePatternEdit';
 import SubmissionConfirmationEdit from './SubmissionConfirmationEdit';
 import { type EditComponentForPattern } from '../../FormManager/FormEdit/types';
 
 export const defaultPatternEditComponents: EditComponentForPattern = {
   paragraph: ParagraphPatternEdit,
   input: InputPatternEdit,
   'form-summary': FormSummaryEdit,
-  sequence: SequencePatternEdit,
+  //fieldset: SequencePatternEdit,
+  //sequence: SequencePatternEdit,
   'submission-confirmation': SubmissionConfirmationEdit,
 };
diff --git a/packages/design/src/config/view/Fieldset/index.tsx b/packages/design/src/config/view/Fieldset/index.tsx
@@ -4,12 +4,12 @@ import { type FieldsetProps } from '@atj/forms';
 
 import { type PatternComponent } from '../../../Form';
 
-const FormSummary: PatternComponent<FieldsetProps> = props => {
+const Fieldset: PatternComponent<FieldsetProps> = props => {
   return (
     <fieldset className="usa-fieldset margin-top-4">
       <legend className="usa-legend">{props.legend}</legend>
       {props.children}
     </fieldset>
   );
 };
-export default FormSummary;
+export default Fieldset;
diff --git a/packages/forms/src/builder/builder.test.ts b/packages/forms/src/builder/builder.test.ts
@@ -1,22 +1,22 @@
 import { describe, expect, it } from 'vitest';
 
-import { FormBuilder } from '.';
+import { BlueprintBuilder } from '.';
 import { createForm } from '..';
 import { defaultFormConfig } from '../patterns';
 import { type InputPattern } from '../patterns/input';
 import { type SequencePattern } from '../patterns/sequence';
 
 describe('form builder', () => {
   it('addPattern adds initial pattern of given type', () => {
-    const builder = new FormBuilder();
+    const builder = new BlueprintBuilder();
     expect(Object.keys(builder.form.patterns).length).toEqual(1);
     builder.addPattern(defaultFormConfig, 'input');
     expect(Object.keys(builder.form.patterns).length).toEqual(2);
   });
 
   it('addPattern preserves existing structure', () => {
     const initial = createTestBlueprint();
-    const newBuilder = new FormBuilder(initial);
+    const newBuilder = new BlueprintBuilder(initial);
     const newPattern = newBuilder.addPattern(defaultFormConfig, 'input');
     expect(newBuilder.form.patterns[newPattern.id]).toEqual(newPattern);
     expect(