Copy patterns and fieldsets

apps/spotlight/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "build": "turbo run build --filter=!infra-cdktf",
     "clean": "turbo run clean",
-    "dev": "turbo run dev --concurrency 14",
+    "dev": "turbo run dev --concurrency 18",
     "format": "prettier --write \"packages/*/src/**/*.{js,jsx,ts,tsx,scss}\"",
     "lint": "turbo run lint",
     "pages": "rm -rf node_modules && npm i -g pnpm turbo && pnpm i && pnpm build && ln -sf ./apps/spotlight/dist _site",

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

@@ -37,7 +37,7 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
         ></PatternEditForm>
       ) : (
         <div
-          className={`${styles.titleArea} display-flex flex-justify flex-align-center position-relative margin-bottom-205`}
+          className={`${styles.titleArea} z-0 display-flex flex-justify flex-align-center position-relative margin-bottom-205`}
           onClick={handleParentClick}
           tabIndex={0} // Make the div focusable
         >

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

@@ -45,6 +45,7 @@ export const DraggableList: React.FC<DraggableListProps> = ({
 
   return (
     <div
+      className="position-relative z-100"
       onFocus={event => {
         // Stop onFocus events from bubbling up to parent elements.
         event.stopPropagation();
@@ -120,7 +121,7 @@ const SortableItemOverlay = ({
 
   return (
     <div
-      className={`${styles.draggableListWrapper} draggable-list-item-wrapper bg-white margin-bottom-3`}
+      className={`${styles.draggableListItemWrapper} draggable-list-item-wrapper bg-white margin-bottom-3`}
       style={{
         boxShadow: '0 16px 24px rgba(0, 0, 0, 0.4)',
         cursor: 'grabbing',
@@ -181,7 +182,7 @@ const SortableItem = ({
   return (
     <li
       className={classNames(
-        styles.draggableListWrapper,
+        styles.draggableListItemWrapper,
         'draggable-list-item-wrapper',
         'bg-white',
         'cursor-pointer',

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

@@ -10,9 +10,36 @@ type PatternEditActionsProps = PropsWithChildren<{
 export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
   children;
   const context = useFormManagerStore(state => state.context);
+  const focusPatternId = useFormManagerStore(state => state.focus?.pattern.id);
   const { deleteSelectedPattern } = useFormManagerStore(state => ({
     deleteSelectedPattern: state.deleteSelectedPattern,
   }));
+  const { copyPattern } = useFormManagerStore(state => ({
+    copyPattern: state.copyPattern,
+  }));
+  const pages = useFormManagerStore(state =>
+    Object.values(state.session.form.patterns).filter(p => p.type === 'page')
+  );
+  const fieldsets = useFormManagerStore(state =>
+    Object.values(state.session.form.patterns).filter(
+      p => p.type === 'fieldset'
+    )
+  );
+  const currentPageIndex = pages.findIndex(page =>
+    page.data.patterns.includes(focusPatternId || '')
+  );
+  const currentFieldsetIndex = fieldsets.findIndex(fieldset =>
+    fieldset.data.patterns.includes(focusPatternId)
+  );
+  const sourcePagePatternId = pages[currentPageIndex]?.id;
+  const sourceFieldsetPatternId = fieldsets[currentFieldsetIndex]?.id;
+  const handleCopyPattern = () => {
+    if (sourcePagePatternId && focusPatternId) {
+      copyPattern(sourcePagePatternId, focusPatternId);
+    } else if (sourceFieldsetPatternId && focusPatternId) {
+      copyPattern(sourceFieldsetPatternId, focusPatternId);
+    }
+  };
 
   return (
     <>
@@ -31,7 +58,7 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
             className="usa-button--outline usa-button--unstyled"
             onClick={event => {
               event.preventDefault();
-              alert('Unimplemented');
+              handleCopyPattern();
             }}
           >
             <svg

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

@@ -38,6 +38,7 @@ export const PatternEditForm = ({
   return (
     <FormProvider {...methods}>
       <form
+        className="position-relative z-0"
         onBlur={methods.handleSubmit(formData => {
           updateActivePattern(formData);
         })}

packages/design/src/FormManager/FormEdit/formEditStyles.module.css

@@ -47,34 +47,39 @@
 
 /* Draggable List */
 
-.draggableListWrapper legend {
+.draggableListItemWrapper legend {
   padding-left: 1.5rem;
 }
 
-.draggableListWrapper .radioFormPattern legend {
+.draggableListItemWrapper .radioFormPattern legend {
   padding-left: 0;
 }
 
-.draggableListWrapper button {
+.draggableListItemWrapper button {
   cursor: pointer;
 }
 
-.draggableListWrapper:focus-within,
-.draggableListWrapper button:not([disabled]):focus {
+.draggableListItemWrapper:focus-within,
+.draggableListItemWrapper button:not([disabled]):focus {
   outline: 0.25rem solid #783cb9;
 }
 
-.draggableListWrapper [tabindex]:focus,
-.draggableListWrapper:has(input:focus),
-.draggableListWrapper:has(button:focus),
-.draggableListWrapper:has(textarea:focus) {
+.draggableListItemWrapper [tabindex]:focus,
+.draggableListItemWrapper:has(input:focus),
+.draggableListItemWrapper:has(button:focus),
+.draggableListItemWrapper:has(textarea:focus) {
   outline: none;
 }
 
-.draggableListWrapper .dropdownMenu {
+.draggableListItemWrapper .dropdownMenu {
   margin-top: 5px;
 }
 
+.draggableListItemWrapper p {
+  margin: 0;
+  padding: 1em 0;
+}
+
 /* Configure and Publish Pages */
 .progressPage {
   min-height: 60vh;

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

@@ -27,6 +27,7 @@ export type FormEditSlice = {
   addPattern: (patternType: string) => void;
   addPatternToFieldset: (patternType: string, targetPattern: PatternId) => void;
   clearFocus: () => void;
+  copyPattern: (parentPatternId: PatternId, patternId: PatternId) => void;
   deletePattern: (id: PatternId) => void;
   deleteSelectedPattern: () => void;
   setFocus: (patternId: PatternId) => boolean;
@@ -75,6 +76,22 @@ export const createFormEditSlice =
       });
       state.addNotification('success', 'Element added successfully.');
     },
+
+    copyPattern: (parentPatternId, patternId) => {
+      const state = get();
+      const builder = new BlueprintBuilder(
+        state.context.config,
+        state.session.form
+      );
+
+      const copyPattern = builder.copyPattern(parentPatternId, patternId);
+      set({
+        session: mergeSession(state.session, { form: builder.form }),
+        focus: { pattern: copyPattern },
+      });
+      state.addNotification('success', 'Element copied successfully.');
+    },
+
     addPatternToFieldset: (patternType, targetPattern) => {
       const state = get();
       const builder = new BlueprintBuilder(