slice-machine-ui 1.26.1-beta.8 → 2.0.0

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/__tests__/slice.test.ts

@@ -1,8 +1,8 @@
-import { it, describe, expect } from "vitest";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { describe, expect, it } from "vitest";
 
-import { Slices } from "@lib/models/common/Slice";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { Slices } from "@/legacy/lib/models/common/Slice";
 
 import { deleteRepeatableZone } from "../slice";
 

package/src/domain/customType.ts

@@ -1,16 +1,14 @@
+import { removeKey } from "@prismicio/editor-support/Object";
 import {
   CustomType,
   DynamicSection,
   DynamicSlices,
   DynamicSlicesConfig,
   Group,
-  GroupFieldType,
   NestableWidget,
   SlicesFieldType,
   UID,
 } from "@prismicio/types-internal/lib/customtypes";
-import { removeKey } from "@prismicio/editor-support/Object";
-
 import { CustomTypeFormat } from "@slicemachine/manager";
 
 type DeleteSliceZoneSliceArgs = {
@@ -47,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;
@@ -98,12 +64,6 @@ type ReorderFieldsArgs<T> = {
   destinationIndex: number;
 };
 
-type GetGroupFieldArgs = {
-  customType: CustomType;
-  sectionId: string;
-  groupFieldId: string;
-};
-
 type CreateArgs = {
   format: CustomTypeFormat;
   id: string;
@@ -465,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;
 
@@ -634,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,18 @@
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes";
 import type {
   CompositeSlice,
   LegacySlice,
   SharedSlice,
+  SlicePrimaryWidget,
 } from "@prismicio/types-internal/lib/customtypes/widgets/slices";
-import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
 
-import type { ComponentUI } from "@lib/models/common/ComponentUI";
-import type { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
-import { pascalize, snakelize } from "@lib/utils/str";
+import type { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+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";
 
 type CopySliceVariationArgs = {
   copiedVariation: VariationSM;
@@ -29,7 +34,7 @@ type UpdateFieldArgs = {
   widgetArea: WidgetsArea;
   previousFieldId: string;
   newFieldId: string;
-  newField: NestableWidget;
+  newField: SlicePrimaryWidget;
 };
 
 type AddFieldArgs = {
@@ -37,7 +42,7 @@ type AddFieldArgs = {
   variationId: string;
   widgetArea: WidgetsArea;
   newFieldId: string;
-  newField: NestableWidget;
+  newField: SlicePrimaryWidget;
 };
 
 type ReorderFieldArgs = {
@@ -207,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/features/autoSave/AutoSaveStatusIndicator.tsx

@@ -1,7 +1,7 @@
-import { FC } from "react";
 import { Box, Icon, ProgressCircle, Text } from "@prismicio/editor-ui";
+import { FC } from "react";
 
-import { ActionQueueStatus } from "@src/hooks/useActionQueue";
+import { ActionQueueStatus } from "@/hooks/useActionQueue";
 
 type AutoSaveStatusIndicatorProps = {
   status: ActionQueueStatus;

package/src/features/changelog/useSliceMachineLatestNonBreakingVersion.ts

@@ -1,6 +1,6 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
 
-import { managerClient } from "@src/managerClient";
+import { managerClient } from "@/managerClient";
 
 async function getSliceMachineLatestNonBreakingVersion() {
   const latestNonBreakingVersion =

package/src/features/changelog/useSliceMachineReleaseNotes.ts

@@ -1,6 +1,6 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
 
-import { managerClient } from "@src/managerClient";
+import { managerClient } from "@/managerClient";
 
 async function getSliceMachineReleaseNotes(version: string) {
   const latestNonBreakingVersion =

package/src/features/changelog/useSliceMachineVersions.ts

@@ -1,7 +1,7 @@
 import { useRequest } from "@prismicio/editor-support/Suspense";
-
 import type { Version } from "@slicemachine/manager";
-import { managerClient } from "@src/managerClient";
+
+import { managerClient } from "@/managerClient";
 
 async function getSliceMachineVersions(): Promise<Version[]> {
   const sliceMachineVersions =

package/src/features/changes/BlankSlates/NoChangesBlankSlate.tsx

@@ -1,23 +1,20 @@
+import { Button, Image, tokens } from "@prismicio/editor-ui";
 import router from "next/router";
+import { FiExternalLink } from "react-icons/fi";
+import { useSelector } from "react-redux";
 
 import {
   BlankSlate,
-  BlankSlateImage,
-  BlankSlateTitle,
-  BlankSlateDescription,
   BlankSlateActions,
   BlankSlateContent,
-} from "@src/components/BlankSlate";
-
-import { Button, Image, tokens } from "@prismicio/editor-ui";
-
-import { FiExternalLink } from "react-icons/fi";
-import { TextLink } from "@src/components/TextLink";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { getRepoName } from "@src/modules/environment";
-
-import { createDocumentsListEndpointFromRepoName } from "@lib/utils/repo";
+  BlankSlateDescription,
+  BlankSlateImage,
+  BlankSlateTitle,
+} from "@/components/BlankSlate";
+import { TextLink } from "@/components/TextLink";
+import { createDocumentsListEndpointFromRepoName } from "@/legacy/lib/utils/repo";
+import { getRepoName } from "@/modules/environment";
+import { SliceMachineStoreType } from "@/redux/type";
 
 export const NoChangesBlankSlate = () => {
   const { repoName } = useSelector((state: SliceMachineStoreType) => ({

package/src/features/changes/PushChangesButton.tsx

@@ -3,15 +3,15 @@ import {
   type ComponentPropsWithoutRef,
   type ElementRef,
   type FC,
+  forwardRef,
   type ReactNode,
   Suspense,
-  forwardRef,
 } from "react";
 
-import { gitProviderToConfig } from "@src/features/settings/git/GitProvider";
-import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
-import { useLinkedGitRepos } from "@src/features/settings/git/useLinkedGitRepos";
-import { ErrorBoundary } from "@src/ErrorBoundary";
+import { ErrorBoundary } from "@/ErrorBoundary";
+import { gitProviderToConfig } from "@/features/settings/git/GitProvider";
+import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
+import { useLinkedGitRepos } from "@/features/settings/git/useLinkedGitRepos";
 
 type PushChangesButtonProps = Required<BarePushChangesButtonProps>;
 

package/src/features/changes/StatusBadge.tsx

@@ -1,8 +1,8 @@
 import { Badge, Tooltip } from "@prismicio/editor-ui";
 import type { ComponentPropsWithoutRef, FC } from "react";
 
-import { ModelStatus } from "@lib/models/common/ModelStatus";
-import { AuthStatus } from "@src/modules/userContext/types";
+import { ModelStatus } from "@/legacy/lib/models/common/ModelStatus";
+import { AuthStatus } from "@/modules/userContext/types";
 
 export type StatusBadgeProps = GetStatusBadgeContentArgs;