Replace additional references to "element" with "pattern"

GSA-TTS · Mar 27, 2024 · 3b96a92 · 3b96a92
1 parent 6840fb1
commit 3b96a92
Show file tree

Hide file tree

Showing 33 changed files with 422 additions and 413 deletions.
diff --git a/packages/design/src/FormManager/FormEdit/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/DraggableList.tsx
@@ -23,7 +23,7 @@ import {
   PatternId,
 } from '@atj/forms';
 
-import { SequenceElement } from '@atj/forms/src/patterns/sequence';
+import { SequencePattern } from '@atj/forms/src/patterns/sequence';
 
 const SortableItem = ({
   id,
@@ -59,19 +59,19 @@ const SortableItem = ({
 };
 
 type DraggableListProps = React.PropsWithChildren<{
-  element: Pattern<SequenceElement>;
+  pattern: Pattern<SequencePattern>;
   form: Blueprint;
-  setSelectedElement: (element: Pattern) => void;
+  setSelectedPattern: (pattern: Pattern) => void;
 }>;
 export const DraggableList: React.FC<DraggableListProps> = ({
-  element,
+  pattern,
   form,
-  setSelectedElement,
+  setSelectedPattern,
   children,
 }) => {
-  const [elements, setElements] = useState<Pattern[]>(
-    element.data.elements.map((elementId: PatternId) => {
-      return getPattern(form, elementId);
+  const [patterns, setPatterns] = useState<Pattern[]>(
+    pattern.data.patterns.map((patternId: PatternId) => {
+      return getPattern(form, patternId);
     })
   );
   const sensors = useSensors(
@@ -90,31 +90,31 @@ export const DraggableList: React.FC<DraggableListProps> = ({
           return;
         }
         if (active.id !== over.id) {
-          const oldIndex = elements.findIndex(element => {
-            return element.id === active.id;
+          const oldIndex = patterns.findIndex(pattern => {
+            return pattern.id === active.id;
           });
-          const newIndex = elements.findIndex(element => {
-            return element.id === over.id;
+          const newIndex = patterns.findIndex(pattern => {
+            return pattern.id === over.id;
           });
-          const newOrder = arrayMove(elements, oldIndex, newIndex);
-          setElements(newOrder);
-          setSelectedElement({
-            id: element.id,
-            type: element.type,
+          const newOrder = arrayMove(patterns, oldIndex, newIndex);
+          setPatterns(newOrder);
+          setSelectedPattern({
+            id: pattern.id,
+            type: pattern.type,
             data: {
-              elements: newOrder.map(element => element.id),
+              patterns: newOrder.map(pattern => pattern.id),
             },
             initial: {
-              elements: [],
+              patterns: [],
             },
-          } satisfies SequenceElement);
+          } satisfies SequencePattern);
         }
       }}
     >
-      <SortableContext items={elements} strategy={verticalListSortingStrategy}>
+      <SortableContext items={patterns} strategy={verticalListSortingStrategy}>
         <ul className="editFormWrapper">
           {arrayChildren.map((child, index) => (
-            <SortableItem key={index} id={elements[index].id}>
+            <SortableItem key={index} id={patterns[index].id}>
               {child}
             </SortableItem>
           ))}

diff --git a/packages/design/src/FormManager/FormEdit/PatternEdit.tsx b/packages/design/src/FormManager/FormEdit/PatternEdit.tsx
@@ -7,39 +7,39 @@ import { useFormEditStore } from './store';
 export const PatternEdit = () => {
   const context = useFormEditStore(state => state.context);
   const form = useFormEditStore(state => state.form);
-  const selectedElement = useFormEditStore(state => state.selectedElement);
-  const { setSelectedElement, updateSelectedPattern } = useFormEditStore(
+  const selectedPattern = useFormEditStore(state => state.selectedPattern);
+  const { setSelectedPattern, updateSelectedPattern } = useFormEditStore(
     state => ({
-      setSelectedElement: state.setSelectedElement,
+      setSelectedPattern: state.setSelectedPattern,
       updateSelectedPattern: state.updateSelectedPattern,
     })
   );
 
   const methods = useForm<PatternMap>({
-    defaultValues: selectedElement
+    defaultValues: selectedPattern
       ? {
-          [selectedElement.id]: selectedElement,
+          [selectedPattern.id]: selectedPattern,
         }
       : {},
   });
   const settingsContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (selectedElement === undefined) {
+    if (selectedPattern === undefined) {
       return;
     }
     methods.reset();
-    methods.setValue(selectedElement.id, selectedElement);
-  }, [selectedElement]);
+    methods.setValue(selectedPattern.id, selectedPattern);
+  }, [selectedPattern]);
 
   // Updates the scroll position of the edit form when it's visible
   useEffect(() => {
     let frameId: number;
     const updatePosition = () => {
       if (window.innerWidth > 879) {
-        if (selectedElement) {
+        if (selectedPattern) {
           const element = document.querySelector(
-            `[data-id="${selectedElement.id}"]`
+            `[data-id="${selectedPattern.id}"]`
           );
           if (element && settingsContainerRef.current) {
             const rect = element.getBoundingClientRect();
@@ -53,13 +53,13 @@ export const PatternEdit = () => {
     return () => {
       cancelAnimationFrame(frameId);
     };
-  }, [selectedElement]);
+  }, [selectedPattern]);
 
-  if (!selectedElement) {
+  if (!selectedPattern) {
     return;
   }
 
-  const SelectedEditComponent = context.editComponents[selectedElement.type];
+  const SelectedEditComponent = context.editComponents[selectedPattern.type];
   return (
     <FormProvider {...methods}>
       <div
@@ -72,16 +72,16 @@ export const PatternEdit = () => {
             updateSelectedPattern(formData);
           })}
         >
-          <h3>Editing &quot;{selectedElement.data.label}&quot;...</h3>
+          <h3>Editing &quot;{selectedPattern.data.label}&quot;...</h3>
           <SelectedEditComponent
             context={context}
             form={form}
-            element={selectedElement}
+            pattern={selectedPattern}
           />
           <p>
             <input className="usa-button" type="submit" value="Save" />
             <input
-              onClick={() => setSelectedElement(undefined)}
+              onClick={() => setSelectedPattern(undefined)}
               className="usa-button close-button"
               type="submit"
               value="Cancel"

diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { createFormSession } from '@atj/forms';
+import { type PatternProps, createFormSession } from '@atj/forms';
 
 import Form, {
   type ComponentForPattern,
@@ -70,14 +70,14 @@ const createSequencePatternPreviewComponent = (
   const PatternPreviewSequenceComponent: PatternComponent = ({
     pattern,
   }) => {
-    const { form, setSelectedElement } = usePreviewContext();
-    const element = getPattern(form, pattern._elementId);
+    const { form, setSelectedPattern } = usePreviewContext();
+    const element = getPattern(form, pattern._patternId);
     const Component = previewComponents[pattern.type];
     return (
       <DraggableList
         form={form}
         element={element}
-        setSelectedElement={setSelectedElement}
+        setSelectedPattern={setSelectedPattern}
       >
         <Component pattern={pattern} />
       </DraggableList>
@@ -94,18 +94,18 @@ const createPatternPreviewComponent = (
   const PatternPreviewComponent: PatternComponent = ({
     pattern,
   }: {
-    pattern: Pattern;
+    pattern: PatternProps;
   }) => {
-    const selectedElement = useFormEditStore(state => state.selectedElement);
+    const selectedPattern = useFormEditStore(state => state.selectedPattern);
     const handleEditClick = useFormEditStore(state => state.handleEditClick);
 
-    const isSelected = selectedElement?.id === pattern._elementId;
+    const isSelected = selectedPattern?.id === pattern._patternId;
     const divClassNames = isSelected
       ? 'form-group-row field-selected'
       : 'form-group-row';
 
     return (
-      <div className={divClassNames} data-id={pattern._elementId}>
+      <div className={divClassNames} data-id={pattern._patternId}>
         <Component pattern={pattern} />
         <span className="edit-button-icon">
           <button

diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -35,7 +35,7 @@ export default function FormEdit({
 }
 
 const EditForm = ({ saveForm }: { saveForm: (form: Blueprint) => void }) => {
-  const { form, selectedElement } = useFormEditStore();
+  const { form, selectedPattern } = useFormEditStore();
   useEffect(() => {
     saveForm(form);
   }, [form]);
@@ -46,7 +46,7 @@ const EditForm = ({ saveForm }: { saveForm: (form: Blueprint) => void }) => {
         <div className="grid-col-8">
           <PreviewForm />
         </div>
-        <div className={`grid-col-4 ${selectedElement ? 'show' : 'hide'}`}>
+        <div className={`grid-col-4 ${selectedPattern ? 'show' : 'hide'}`}>
           <PatternEdit />
         </div>
       </div>

diff --git a/packages/design/src/FormManager/FormEdit/store.tsx b/packages/design/src/FormManager/FormEdit/store.tsx
@@ -31,10 +31,10 @@ export const FormEditProvider = (props: {
 type FormEditState = {
   context: FormEditUIContext;
   form: Blueprint;
-  selectedElement?: Pattern;
+  selectedPattern?: Pattern;
 
   handleEditClick: (pattern: PatternProps) => void;
-  setSelectedElement: (element?: Pattern) => void;
+  setSelectedPattern: (element?: Pattern) => void;
   updateSelectedPattern: (formData: PatternMap) => void;
 };
 
@@ -50,28 +50,28 @@ const createFormEditStore = ({
     form,
     handleEditClick: (pattern: PatternProps) => {
       const state = get();
-      if (state.selectedElement?.id === pattern._elementId) {
-        set({ selectedElement: undefined });
+      if (state.selectedPattern?.id === pattern._patternId) {
+        set({ selectedPattern: undefined });
       } else {
-        const elementToSet = getPattern(state.form, pattern._elementId);
-        set({ selectedElement: elementToSet });
+        const elementToSet = getPattern(state.form, pattern._patternId);
+        set({ selectedPattern: elementToSet });
       }
     },
-    setSelectedElement: selectedElement => set({ selectedElement }),
+    setSelectedPattern: selectedPattern => set({ selectedPattern }),
     updateSelectedPattern: (formData: PatternMap) => {
       const state = get();
-      if (state.selectedElement === undefined) {
+      if (state.selectedPattern === undefined) {
         console.warn('No selected element');
         return;
       }
       const builder = new FormBuilder(state.form);
       const success = builder.updatePattern(
         state.context.config,
-        state.selectedElement,
+        state.selectedPattern,
         formData
       );
       if (success) {
-        set({ form: builder.form, selectedElement: undefined });
+        set({ form: builder.form, selectedPattern: undefined });
       }
     },
   }));
diff --git a/packages/design/src/FormManager/FormEdit/types.ts b/packages/design/src/FormManager/FormEdit/types.ts
@@ -12,7 +12,7 @@ export type FormEditUIContext = {
 export type PatternEditComponent<T extends Pattern> = React.ComponentType<{
   context: FormEditUIContext;
   form: Blueprint;
-  element: T;
+  pattern: T;
 }>;
 
 export type EditComponentForPattern<T extends Pattern = Pattern> = Record<

diff --git a/packages/design/src/FormManager/FormList/PDFFileSelect/file-input.test.ts b/packages/design/src/FormManager/FormList/PDFFileSelect/file-input.test.ts
@@ -21,7 +21,7 @@ describe('onFileInputChangeGetFile', () => {
         target: {
           files: [new File([], 'file-name.xml')] as unknown as FileList,
         },
-      } as ChangeEvent<HTMLInputElement>);
+      } as ChangeEvent<HTMLInputPattern>);
     });
   });
 });
diff --git a/packages/design/src/FormManager/FormList/PDFFileSelect/file-input.ts b/packages/design/src/FormManager/FormList/PDFFileSelect/file-input.ts
@@ -13,7 +13,7 @@ const readFileAsync = (file: File) => {
 
 export const onFileInputChangeGetFile =
   (setFile: ({ name, data }: { name: string; data: Uint8Array }) => void) =>
-  (event: ChangeEvent<HTMLInputElement>) => {
+  (event: ChangeEvent<HTMLInputPattern>) => {
     if (event.target.files && event.target.files.length > 0) {
       const inputFile = event.target.files[0];
       readFileAsync(inputFile).then(data => {

diff --git a/packages/design/src/config/edit/FormSummaryEdit.tsx b/packages/design/src/config/edit/FormSummaryEdit.tsx
@@ -4,7 +4,7 @@ import { useFormContext } from 'react-hook-form';
 import { type FormSummary } from '@atj/forms/src/patterns/form-summary';
 import { PatternEditComponent } from '../../FormManager/FormEdit/types';
 
-const FormSummaryEdit: PatternEditComponent<FormSummary> = ({ element }) => {
+const FormSummaryEdit: PatternEditComponent<FormSummary> = ({ pattern }) => {
   const { register } = useFormContext();
   return (
     <div className="grid-row grid-gap">
@@ -13,7 +13,7 @@ const FormSummaryEdit: PatternEditComponent<FormSummary> = ({ element }) => {
           Title
           <input
             className="usa-input"
-            {...register(`${element.id}.data.title`)}
+            {...register(`${pattern.id}.data.title`)}
             type="text"
           ></input>
         </label>
@@ -23,7 +23,7 @@ const FormSummaryEdit: PatternEditComponent<FormSummary> = ({ element }) => {
           Description
           <textarea
             className="usa-textarea"
-            {...register(`${element.id}.data.description`)}
+            {...register(`${pattern.id}.data.description`)}
           ></textarea>
         </label>
       </div>