Copy patterns and fieldsets

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/PreviewSequencePattern/DraggableList.tsx

@@ -120,7 +120,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 +181,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

@@ -28,9 +28,37 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
       p => p.type === 'fieldset' && p.data.patterns.includes(focusPatternId)
     );
   }, [focusPatternId, patterns]);
-
   const isFieldset = focusPatternType === 'fieldset';
   const isPagePattern = focusPatternType === 'page';
+  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 handleCopyPattern = () => {
+    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;
+
+    if (focusPatternId) {
+      if (sourcePagePatternId) {
+        copyPattern(sourcePagePatternId, focusPatternId);
+      } else {
+        copyPattern(sourceFieldsetPatternId, focusPatternId);
+      }
+    }
+  };
 
   return (
     <div
@@ -59,7 +87,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/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;
@@ -154,6 +159,10 @@
   max-width: 15.625rem;
 }
 
+.moveToPageWrapper p {
+  padding-top: 0.5rem;
+}
+
 .movePatternButton {
   color: #005ea2;
 }

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;
   movePattern: (
@@ -102,6 +103,22 @@ export const createFormEditSlice =
       });
       state.addNotification('success', 'Element moved 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(