slice-machine-ui 1.26.1-beta.12 → 1.26.1-beta.14

package/src/domain/__tests__/group.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  addFieldToGroup,
+  deleteFieldFromGroup,
+  reorderFieldInGroup,
+  updateFieldInGroup,
+} from "../group";
+
+describe("addFieldToGroup", () => {
+  it("adds a field to a group field", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group();
+    const res = addFieldToGroup({ group, field, fieldId: "field" });
+
+    expect(res.config?.fields?.field).toStrictEqual(field);
+  });
+
+  it("does not mutate the provided group field", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group();
+    const res = addFieldToGroup({ group, field, fieldId: "field" });
+
+    expect(res).not.toBe(group);
+  });
+});
+
+describe("updateFieldInGroup", () => {
+  it("updates an existing field in a group", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+
+    expect(group.config?.fields?.field).toStrictEqual(field);
+
+    const newField = structuredClone(field);
+    newField.config ??= {};
+    newField.config.placeholder_true = "Placeholder";
+
+    const res = updateFieldInGroup({
+      group,
+      field: newField,
+      previousFieldId: "field",
+      newFieldId: "field",
+    });
+
+    expect(res.config?.fields?.field).toStrictEqual(newField);
+  });
+
+  it("can rename an existing field in a group", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+
+    expect(group.config?.fields).toStrictEqual({ field });
+
+    const res = updateFieldInGroup({
+      group,
+      field,
+      previousFieldId: "field",
+      newFieldId: "newField",
+    });
+
+    expect(res.config?.fields).toStrictEqual({ newField: field });
+  });
+
+  it("does not make any changes if the field does not exist", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+
+    expect(group.config?.fields).toStrictEqual({ field });
+
+    const res = updateFieldInGroup({
+      group,
+      field: ctx.createMock.model.boolean(),
+      previousFieldId: "non-existent",
+      newFieldId: "non-existent",
+    });
+
+    expect(res).toStrictEqual(group);
+  });
+
+  it("does not mutate the provided group field", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+    const res = updateFieldInGroup({
+      group,
+      field,
+      previousFieldId: "field",
+      newFieldId: "field",
+    });
+
+    expect(res).not.toBe(group);
+  });
+});
+
+describe("reorderFieldInGroup", () => {
+  it("reorders a field in a group", (ctx) => {
+    const field1 = ctx.createMock.model.boolean();
+    const field2 = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field1, field2 } });
+
+    expect(Object.keys(group.config?.fields ?? {})).toStrictEqual([
+      "field1",
+      "field2",
+    ]);
+
+    const res = reorderFieldInGroup({
+      group,
+      sourceIndex: 1,
+      destinationIndex: 0,
+    });
+
+    expect(Object.keys(res.config?.fields ?? {})).toStrictEqual([
+      "field2",
+      "field1",
+    ]);
+  });
+
+  it("does not mutate the provided group field", (ctx) => {
+    const field1 = ctx.createMock.model.boolean();
+    const field2 = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field1, field2 } });
+    const res = reorderFieldInGroup({
+      group,
+      sourceIndex: 1,
+      destinationIndex: 0,
+    });
+
+    expect(res).not.toBe(group);
+  });
+});
+
+describe("deleteFieldFromGroup", () => {
+  it("deletes a field from a group", (ctx) => {
+    const field1 = ctx.createMock.model.boolean();
+    const field2 = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field1, field2 } });
+
+    const res = deleteFieldFromGroup({ group, fieldId: "field2" });
+
+    expect(res.config?.fields).toStrictEqual({ field1 });
+  });
+
+  it("does not make any changes if the field does not exist", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+
+    const res = deleteFieldFromGroup({ group, fieldId: "non-existent" });
+
+    expect(res).toStrictEqual(group);
+  });
+
+  it("does not mutate the provided group field", (ctx) => {
+    const field1 = ctx.createMock.model.boolean();
+    const field2 = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field1, field2 } });
+
+    const res = deleteFieldFromGroup({ group, fieldId: "field2" });
+
+    expect(res).not.toBe(group);
+  });
+});

package/src/domain/customType.ts

@@ -5,7 +5,6 @@ import {
   DynamicSlices,
   DynamicSlicesConfig,
   Group,
-  GroupFieldType,
   NestableWidget,
   SlicesFieldType,
   UID,
@@ -46,38 +45,6 @@ type ReorderFieldArgs = {
   destinationIndex: number;
 };
 
-type AddGroupField = {
-  customType: CustomType;
-  sectionId: string;
-  groupFieldId: string;
-  newField: NestableWidget;
-  newFieldId: string;
-};
-
-type DeleteGroupField = {
-  customType: CustomType;
-  sectionId: string;
-  groupFieldId: string;
-  fieldId: string;
-};
-
-type UpdateGroupFieldArgs = {
-  customType: CustomType;
-  sectionId: string;
-  groupFieldId: string;
-  previousFieldId: string;
-  newFieldId: string;
-  newField: NestableWidget;
-};
-
-type ReorderGroupFieldArgs = {
-  customType: CustomType;
-  sectionId: string;
-  groupFieldId: string;
-  sourceIndex: number;
-  destinationIndex: number;
-};
-
 type UpdateSectionArgs = {
   customType: CustomType;
   sectionId: string;
@@ -97,12 +64,6 @@ type ReorderFieldsArgs<T> = {
   destinationIndex: number;
 };
 
-type GetGroupFieldArgs = {
-  customType: CustomType;
-  sectionId: string;
-  groupFieldId: string;
-};
-
 type CreateArgs = {
   format: CustomTypeFormat;
   id: string;
@@ -464,134 +425,6 @@ export function reorderField(args: ReorderFieldArgs): CustomType {
   return newCustomType;
 }
 
-export function addGroupField(args: AddGroupField): CustomType {
-  const { customType, sectionId, groupFieldId, newField, newFieldId } = args;
-  const groupField = getGroupField({
-    customType,
-    sectionId,
-    groupFieldId,
-  });
-  const groupFields = groupField?.config?.fields;
-
-  if (!groupField) {
-    return customType;
-  }
-
-  const newGroupField = updateGroupFields(groupField, {
-    ...groupFields,
-    // Add the new field to the group fields
-    [newFieldId]: newField,
-  });
-  const newCustomType = updateSection({
-    customType,
-    sectionId,
-    updatedSection: {
-      ...customType.json[sectionId],
-      [groupFieldId]: newGroupField,
-    },
-  });
-
-  return newCustomType;
-}
-
-export function deleteGroupField(args: DeleteGroupField): CustomType {
-  const { customType, sectionId, groupFieldId, fieldId } = args;
-  const groupField = getGroupField({
-    customType,
-    sectionId,
-    groupFieldId,
-  });
-  const groupFields = groupField?.config?.fields;
-
-  if (!groupField || !groupFields) {
-    return customType;
-  }
-
-  const updatedFields = removeKey(groupFields, fieldId);
-  const newGroupField = updateGroupFields(groupField, updatedFields);
-  const newCustomType = updateSection({
-    customType,
-    sectionId,
-    updatedSection: {
-      ...customType.json[sectionId],
-      [groupFieldId]: newGroupField,
-    },
-  });
-
-  return newCustomType;
-}
-
-export function updateGroupField(args: UpdateGroupFieldArgs): CustomType {
-  const {
-    customType,
-    sectionId,
-    groupFieldId,
-    previousFieldId,
-    newFieldId,
-    newField,
-  } = args;
-  const groupField = getGroupField({
-    customType,
-    sectionId,
-    groupFieldId,
-  });
-  const groupFields = groupField?.config?.fields;
-
-  if (!groupField || !groupFields) {
-    return customType;
-  }
-
-  const updatedGroupFields = updateFields({
-    fields: groupFields,
-    previousFieldId,
-    newFieldId,
-    newField,
-  });
-  const newGroupField = updateGroupFields(groupField, updatedGroupFields);
-  const newCustomType = updateSection({
-    customType,
-    sectionId,
-    updatedSection: {
-      ...customType.json[sectionId],
-      [groupFieldId]: newGroupField,
-    },
-  });
-
-  return newCustomType;
-}
-
-export function reorderGroupField(args: ReorderGroupFieldArgs): CustomType {
-  const { customType, sectionId, groupFieldId, sourceIndex, destinationIndex } =
-    args;
-  const groupField = getGroupField({
-    customType,
-    sectionId,
-    groupFieldId,
-  });
-  const groupFields = groupField?.config?.fields;
-
-  if (!groupField || !groupFields) {
-    return customType;
-  }
-
-  const updatedGroupFields = reorderFields({
-    fields: groupFields,
-    sourceIndex,
-    destinationIndex,
-  });
-  const newGroupField = updateGroupFields(groupField, updatedGroupFields);
-  const newCustomType = updateSection({
-    customType,
-    sectionId,
-    updatedSection: {
-      ...customType.json[sectionId],
-      [groupFieldId]: newGroupField,
-    },
-  });
-
-  return newCustomType;
-}
-
 export function updateSection(args: UpdateSectionArgs): CustomType {
   const { customType, sectionId, updatedSection } = args;
 
@@ -633,30 +466,6 @@ export function reorderFields<T>(args: ReorderFieldsArgs<T>) {
   return reorderedFields;
 }
 
-export function getGroupField(args: GetGroupFieldArgs): Group | undefined {
-  const { customType, sectionId, groupFieldId } = args;
-  const field = customType.json[sectionId][groupFieldId];
-
-  if (field.type === GroupFieldType) {
-    return field;
-  }
-
-  return undefined;
-}
-
-export function updateGroupFields(
-  field: Group,
-  updatedGroupFields: Record<string, NestableWidget>,
-): Group {
-  return {
-    ...field,
-    config: {
-      ...field.config,
-      fields: updatedGroupFields,
-    },
-  };
-}
-
 export function create(args: CreateArgs) {
   const { id, label, repeatable, format } = args;
   const mainTab = makeMainTab(repeatable, format);

package/src/domain/group.ts

@@ -0,0 +1,89 @@
+import {
+  Group,
+  NestableWidget,
+} from "@prismicio/types-internal/lib/customtypes";
+
+/**
+ * Adds a field to a group field.
+ *
+ * @returns A copy of `args.group` with the appended field.
+ */
+export function addFieldToGroup(args: {
+  group: Group;
+  fieldId: string;
+  field: NestableWidget;
+}): Group {
+  const newGroup = structuredClone(args.group);
+  newGroup.config ??= {};
+  newGroup.config.fields ??= {};
+  newGroup.config.fields[args.fieldId] = args.field;
+
+  return newGroup;
+}
+
+/**
+ * Updates a field in a group field.
+ *
+ * @returns A copy of `args.group` with the updated field.
+ */
+export function updateFieldInGroup(args: {
+  group: Group;
+  previousFieldId: string;
+  newFieldId: string;
+  field: NestableWidget;
+}): Group {
+  const newGroup = structuredClone(args.group);
+  if (!newGroup.config?.fields || !args.group.config?.fields) {
+    return newGroup;
+  }
+
+  newGroup.config.fields = {};
+  for (const fieldId in args.group.config.fields) {
+    if (fieldId === args.previousFieldId) {
+      newGroup.config.fields[args.newFieldId] = args.field;
+    } else {
+      newGroup.config.fields[fieldId] = args.group.config.fields[fieldId];
+    }
+  }
+
+  return newGroup;
+}
+
+/**
+ * Moves a field in a group field to a new position.
+ *
+ * @returns A copy of `args.group` with reordered fields.
+ */
+export function reorderFieldInGroup(args: {
+  group: Group;
+  sourceIndex: number;
+  destinationIndex: number;
+}): Group {
+  const newGroup = structuredClone(args.group);
+  if (!newGroup.config?.fields) {
+    return newGroup;
+  }
+
+  const entries = Object.entries(newGroup.config.fields);
+  const [removedEntry] = entries.splice(args.sourceIndex, 1);
+  entries.splice(args.destinationIndex, 0, removedEntry);
+
+  newGroup.config.fields = Object.fromEntries(entries);
+
+  return newGroup;
+}
+
+/**
+ * Deletes a field from a group field.
+ *
+ * @returns A copy of `args.group` without the field.
+ */
+export function deleteFieldFromGroup(args: {
+  group: Group;
+  fieldId: string;
+}): Group {
+  const newGroup = structuredClone(args.group);
+  delete newGroup.config?.fields?.[args.fieldId];
+
+  return newGroup;
+}

package/src/domain/slice.ts

@@ -1,13 +1,15 @@
-import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes";
 import type {
   CompositeSlice,
   LegacySlice,
   SharedSlice,
+  SlicePrimaryWidget,
 } from "@prismicio/types-internal/lib/customtypes/widgets/slices";
 
 import type { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
-import type {
-  VariationSM,
+import { Groups } from "@/legacy/lib/models/common/Group";
+import {
+  type VariationSM,
   WidgetsArea,
 } from "@/legacy/lib/models/common/Slice";
 import { pascalize, snakelize } from "@/legacy/lib/utils/str";
@@ -32,7 +34,7 @@ type UpdateFieldArgs = {
   widgetArea: WidgetsArea;
   previousFieldId: string;
   newFieldId: string;
-  newField: NestableWidget;
+  newField: SlicePrimaryWidget;
 };
 
 type AddFieldArgs = {
@@ -40,7 +42,7 @@ type AddFieldArgs = {
   variationId: string;
   widgetArea: WidgetsArea;
   newFieldId: string;
-  newField: NestableWidget;
+  newField: SlicePrimaryWidget;
 };
 
 type ReorderFieldArgs = {
@@ -210,18 +212,29 @@ export function addField(args: AddFieldArgs): ComponentUI {
     model: {
       ...slice.model,
       variations: slice.model.variations.map((v) => {
-        if (v.id === variationId) {
+        if (v.id !== variationId) {
+          return v;
+        }
+
+        if (newField.type === GroupFieldType) {
+          if (widgetArea === WidgetsArea.Items) {
+            return v;
+          } else {
+            return {
+              ...v,
+              [widgetArea]: v[widgetArea]?.concat([
+                { key: newFieldId, value: Groups.toSM(newField) },
+              ]),
+            };
+          }
+        } else {
           return {
             ...v,
             [widgetArea]: v[widgetArea]?.concat([
-              {
-                key: newFieldId,
-                value: newField,
-              },
+              { key: newFieldId, value: newField },
             ]),
           };
         }
-        return v;
       }),
     },
   };

package/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -1,6 +1,5 @@
 import { Box, ProgressCircle } from "@prismicio/editor-ui";
 import {
-  FieldType,
   Group,
   NestableWidget,
   UID,
@@ -38,6 +37,7 @@ import {
   ensureWidgetTypeExistence,
 } from "@/legacy/lib/utils";
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
+import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 import * as Widgets from "../../../../lib/models/common/widgets/withGroup";
 import EditModal from "../../common/EditModal";
@@ -83,9 +83,8 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
   }: {
     id: string;
     label: string;
-    widgetTypeName: FieldType;
+    widgetTypeName: keyof typeof Widgets;
   }) => {
-    // @ts-expect-error We have to create a widget map or a service instead of using export name
     if (ensureWidgetTypeExistence(Widgets, widgetTypeName)) {
       return;
     }
@@ -126,9 +125,9 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
       event: "field:added",
       id,
       name: label,
-      type: widgetTypeName,
+      type: newField.type,
       isInAGroup: false,
-      contentType: customType.format === "page" ? "page type" : "custom type",
+      contentType: getContentTypeForTracking(window.location.pathname),
     });
   };
 
@@ -164,7 +163,6 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
     newKey: string;
     value: TabField;
   }) => {
-    // @ts-expect-error We have to create a widget map or a service instead of using export name
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
     if (ensureWidgetTypeExistence(Widgets, value.type)) {
       return;
@@ -217,7 +215,6 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
           {query.newPageType === undefined ? (
             <Zone
               zoneType="customType"
-              zoneTypeFormat={customType.format}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               tabId={tabId}
               title="Static Zone"