fix: shared styles lost when new card is added

packages/visual-editor/src/components/directory/DirectoryWrapper.tsx

@@ -135,16 +135,16 @@ export const DirectoryGrid: ComponentConfig<{
       return data;
     }
 
-    // Update CardSlots data but preserve styles and slot configurations
+    // Update CardSlots data but preserve the existing styles and slot configurations
     const updatedCards = Array(requiredLength)
       .fill(null)
       .map((_, i) =>
         defaultDirectoryCardSlotData(
           `DirectoryCard-${crypto.randomUUID()}`,
           i,
           sortedDirectoryChildren[i],
-          data.props.slots?.CardSlot[i]?.props.styles,
-          data.props.slots?.CardSlot[i]?.props.slots
+          data.props.slots?.CardSlot?.[0]?.props.styles,
+          data.props.slots?.CardSlot?.[0]?.props.slots
         )
       );
 

packages/visual-editor/src/components/pageSections/EventSection/EventCard.tsx

@@ -52,130 +52,146 @@ const defaultEvent = {
   },
 } satisfies EventStruct;
 
-export const defaultEventCardSlotData = (id?: string, index?: number) => ({
-  type: "EventCard",
-  props: {
-    ...(id && { id }),
-    ...(index !== undefined && { index }),
-    styles: {
-      backgroundColor: backgroundColors.background1.value,
-      truncateDescription: true,
-    } satisfies EventCardProps["styles"],
-    slots: {
-      ImageSlot: [
-        {
-          type: "ImageSlot",
-          props: {
-            ...(id && { id: `${id}-image` }),
-            data: {
-              image: {
-                field: "",
-                constantValue: {
-                  ...getRandomPlaceholderImageObject({
+export const defaultEventCardSlotData = (
+  id?: string,
+  index?: number,
+  backgroundColor?: BackgroundStyle,
+  truncateDescription?: boolean,
+  sharedSlotStyles?: Record<string, any>
+) => {
+  const cardData = {
+    type: "EventCard",
+    props: {
+      ...(id && { id }),
+      ...(index !== undefined && { index }),
+      styles: {
+        backgroundColor: backgroundColor ?? backgroundColors.background1.value,
+        truncateDescription: truncateDescription ?? true,
+      } satisfies EventCardProps["styles"],
+      slots: {
+        ImageSlot: [
+          {
+            type: "ImageSlot",
+            props: {
+              ...(id && { id: `${id}-image` }),
+              data: {
+                image: {
+                  field: "",
+                  constantValue: {
+                    ...getRandomPlaceholderImageObject({
+                      width: 640,
+                      height: 360,
+                    }),
                     width: 640,
                     height: 360,
-                  }),
-                  width: 640,
-                  height: 360,
+                  },
+                  constantValueEnabled: true,
                 },
-                constantValueEnabled: true,
               },
-            },
-            styles: {
-              aspectRatio: 1.78,
-              width: 640,
-            },
-            hideWidthProp: true,
-          } satisfies ImageWrapperProps,
-        },
-      ],
-      TitleSlot: [
-        {
-          type: "HeadingTextSlot",
-          props: {
-            ...(id && { id: `${id}-title` }),
-            data: {
-              text: {
-                field: "",
-                constantValue: defaultEvent.title,
-                constantValueEnabled: true,
+              styles: {
+                aspectRatio: 1.78,
+                width: 640,
               },
-            },
-            styles: {
-              level: 3,
-              align: "left",
-            },
-          } satisfies HeadingTextProps,
-        },
-      ],
-      DateTimeSlot: [
-        {
-          type: "Timestamp",
-          props: {
-            ...(id && { id: `${id}-timestamp` }),
-            data: {
-              date: {
-                field: "",
-                constantValue: defaultEvent.dateTime,
-                constantValueEnabled: true,
+              hideWidthProp: true,
+            } satisfies ImageWrapperProps,
+          },
+        ],
+        TitleSlot: [
+          {
+            type: "HeadingTextSlot",
+            props: {
+              ...(id && { id: `${id}-title` }),
+              data: {
+                text: {
+                  field: "",
+                  constantValue: defaultEvent.title,
+                  constantValueEnabled: true,
+                },
               },
-              endDate: {
-                field: "",
-                constantValue: "",
-                constantValueEnabled: true,
+              styles: {
+                level: 3,
+                align: "left",
               },
-            },
-            styles: {
-              includeTime: true,
-              includeRange: false,
-            },
-          } satisfies TimestampProps,
-        },
-      ],
-      DescriptionSlot: [
-        {
-          type: "BodyTextSlot",
-          props: {
-            ...(id && { id: `${id}-description` }),
-            data: {
-              text: {
-                field: "",
-                constantValue: defaultEvent.description,
-                constantValueEnabled: true,
+            } satisfies HeadingTextProps,
+          },
+        ],
+        DateTimeSlot: [
+          {
+            type: "Timestamp",
+            props: {
+              ...(id && { id: `${id}-timestamp` }),
+              data: {
+                date: {
+                  field: "",
+                  constantValue: defaultEvent.dateTime,
+                  constantValueEnabled: true,
+                },
+                endDate: {
+                  field: "",
+                  constantValue: "",
+                  constantValueEnabled: true,
+                },
               },
-            },
-            styles: {
-              variant: "base",
-            },
-            parentStyles: {
-              className: "md:line-clamp-2",
-            },
-          } satisfies BodyTextProps,
-        },
-      ],
-      CTASlot: [
-        {
-          type: "CTASlot",
-          props: {
-            ...(id && { id: `${id}-cta` }),
-            data: {
-              entityField: {
-                field: "",
-                constantValue: defaultEvent.cta,
-                constantValueEnabled: true,
+              styles: {
+                includeTime: true,
+                includeRange: false,
               },
-            },
-            styles: {
-              variant: "primary",
-              presetImage: "app-store",
-            },
-            eventName: index !== undefined ? `cta${index}` : undefined,
-          } satisfies CTAWrapperProps,
-        },
-      ],
+            } satisfies TimestampProps,
+          },
+        ],
+        DescriptionSlot: [
+          {
+            type: "BodyTextSlot",
+            props: {
+              ...(id && { id: `${id}-description` }),
+              data: {
+                text: {
+                  field: "",
+                  constantValue: defaultEvent.description,
+                  constantValueEnabled: true,
+                },
+              },
+              styles: {
+                variant: "base",
+              },
+              parentStyles: {
+                className: "md:line-clamp-2",
+              },
+            } satisfies BodyTextProps,
+          },
+        ],
+        CTASlot: [
+          {
+            type: "CTASlot",
+            props: {
+              ...(id && { id: `${id}-cta` }),
+              data: {
+                entityField: {
+                  field: "",
+                  constantValue: defaultEvent.cta,
+                  constantValueEnabled: true,
+                },
+              },
+              styles: {
+                variant: "primary",
+                presetImage: "app-store",
+              },
+              eventName: index !== undefined ? `cta${index}` : undefined,
+            } satisfies CTAWrapperProps,
+          },
+        ],
+      },
     },
-  },
-});
+  };
+
+  Object.entries(cardData.props.slots).forEach(([slotKey, slotArray]) => {
+    if (sharedSlotStyles?.[slotKey]) {
+      slotArray[0].props.styles = sharedSlotStyles[slotKey];
+    }
+  });
+
+  return cardData;
+};
 
 export type EventCardProps = {
   /** Styling for all the cards. */

packages/visual-editor/src/components/pageSections/EventSection/EventCardsWrapper.tsx

@@ -18,6 +18,7 @@ import {
   CardWrapperType,
 } from "../../../utils/cardSlots/cardWrapperHelpers.ts";
 import { defaultEventCardSlotData, EventCardProps } from "./EventCard.tsx";
+import { gatherSlotStyles } from "../../../hooks/useGetCardSlots.tsx";
 
 export type EventCardsWrapperProps = CardWrapperType<EventSectionType>;
 
@@ -55,6 +56,18 @@ export const EventCardsWrapper: ComponentConfig<{
   },
   resolveData: (data, params) => {
     const streamDocument = params.metadata.streamDocument;
+    const sharedCardProps =
+      data.props.slots.CardSlot.length === 0
+        ? undefined
+        : {
+            backgroundColor:
+              data.props.slots.CardSlot[0].props.styles.backgroundColor,
+            truncateDescription:
+              data.props.slots.CardSlot[0].props.truncateDescription,
+            slotStyles: gatherSlotStyles(
+              data.props.slots.CardSlot[0].props.slots
+            ),
+          };
 
     if (!data.props.data.constantValueEnabled && data.props.data.field) {
       // ENTITY VALUES
@@ -82,7 +95,13 @@ export const EventCardsWrapper: ComponentConfig<{
           ? Array(requiredLength - currentLength)
               .fill(null)
               .map(() =>
-                defaultEventCardSlotData(`EventCard-${crypto.randomUUID()}`)
+                defaultEventCardSlotData(
+                  `EventCard-${crypto.randomUUID()}`,
+                  undefined,
+                  sharedCardProps?.backgroundColor,
+                  sharedCardProps?.truncateDescription,
+                  sharedCardProps?.slotStyles
+                )
               )
           : [];
       const updatedCardSlot = [
@@ -136,7 +155,13 @@ export const EventCardsWrapper: ComponentConfig<{
         inUseIds.add(newId);
 
         if (!newCard) {
-          return defaultEventCardSlotData(newId, i);
+          return defaultEventCardSlotData(
+            newId,
+            i,
+            sharedCardProps?.backgroundColor,
+            sharedCardProps?.truncateDescription,
+            sharedCardProps?.slotStyles
+          );
         }
 
         newCard = setDeep(newCard, "props.id", newId); // update the id

packages/visual-editor/src/components/pageSections/InsightSection/InsightCard.tsx

@@ -47,13 +47,18 @@ const defaultInsight = {
   },
 } satisfies InsightStruct;
 
-export const defaultInsightCardSlotData = (id?: string, index?: number) => {
-  return {
+export const defaultInsightCardSlotData = (
+  id?: string,
+  index?: number,
+  backgroundColor?: BackgroundStyle,
+  sharedSlotStyles?: Record<string, any>
+) => {
+  const cardData = {
     type: "InsightCard",
     props: {
       ...(id && { id }),
       styles: {
-        backgroundColor: backgroundColors.background1.value,
+        backgroundColor: backgroundColor ?? backgroundColors.background1.value,
       } satisfies InsightCardProps["styles"],
       conditionalRender: {
         hasCategory: true,
@@ -192,6 +197,14 @@ export const defaultInsightCardSlotData = (id?: string, index?: number) => {
       },
     } satisfies InsightCardProps,
   };
+
+  Object.entries(cardData.props.slots).forEach(([slotKey, slotArray]) => {
+    if (sharedSlotStyles?.[slotKey]) {
+      slotArray[0].props.styles = sharedSlotStyles[slotKey];
+    }
+  });
+
+  return cardData;
 };
 
 export type InsightCardProps = {