slice-machine-ui 1.26.1-beta.2 → 1.26.1-beta.21

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 = {
@@ -48,6 +53,11 @@ type ReorderFieldArgs = {
   destinationIndex: number;
 };
 
+type DeleteRepeatableZoneArgs = {
+  slice: ComponentUI;
+  variationId: string;
+};
+
 const DEFAULT_VARIATION_ID = "default";
 
 export function countMissingScreenshots(slice: ComponentUI): number {
@@ -202,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;
       }),
     },
   };
@@ -281,3 +302,23 @@ export function rename(slice: ComponentUI, newSliceName: string): ComponentUI {
     },
   };
 }
+
+export function deleteRepeatableZone(args: DeleteRepeatableZoneArgs) {
+  const { slice, variationId } = args;
+
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      variations: slice.model.variations.map((v) => {
+        if (v.id === variationId) {
+          const newVariation = { ...v };
+          delete newVariation.items;
+
+          return newVariation;
+        }
+        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;
 

package/src/features/customTypes/EditDropdown.tsx

@@ -1,4 +1,3 @@
-import { type FC, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -7,20 +6,18 @@ import {
   Icon,
   IconButton,
 } from "@prismicio/editor-ui";
+import { type CustomType } from "@prismicio/types-internal/lib/customtypes";
+import { CustomTypeFormat } from "@slicemachine/manager";
 import { useRouter } from "next/router";
+import { type FC, useState } from "react";
 
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-
-import { type CustomType } from "@prismicio/types-internal/lib/customtypes";
+import { DeleteCustomTypeModal } from "@/legacy/components/DeleteCTModal";
+import { RenameCustomTypeModal } from "@/legacy/components/Forms/RenameCustomTypeModal";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 import { convertCustomToPageType } from "./actions/convertCustomToPageType";
-
 import { CUSTOM_TYPES_CONFIG } from "./customTypesConfig";
 
-import { RenameCustomTypeModal } from "@components/Forms/RenameCustomTypeModal";
-import { DeleteCustomTypeModal } from "@components/DeleteCTModal";
-import { CustomTypeFormat } from "@slicemachine/manager";
-
 type EditDropdownProps = {
   isChangesLocal: boolean;
   format: CustomTypeFormat;

package/src/features/customTypes/PageTypeOnboarding.tsx

@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { Box, Button, Text } from "@prismicio/editor-ui";
 import { cache } from "@prismicio/editor-support/Suspense";
+import { Box, Button, Text } from "@prismicio/editor-ui";
+import { useState } from "react";
 
-import { CreateCustomTypeModal } from "@components/Forms/CreateCustomTypeModal";
-import { BlankPageIcon } from "@src/icons/BlankPageIcon";
-import { getIsEmptyProject } from "@src/hooks/useIsEmptyProject";
+import { getIsEmptyProject } from "@/hooks/useIsEmptyProject";
+import { BlankPageIcon } from "@/icons/BlankPageIcon";
+import { CreateCustomTypeModal } from "@/legacy/components/Forms/CreateCustomTypeModal";
 
 export function PageTypeOnboarding() {
   const [isCreatingCustomType, setIsCreatingCustomType] = useState(false);

package/src/features/customTypes/__tests__/CustomTypeBuilderPage.test.tsx

@@ -1,22 +1,21 @@
 // @vitest-environment jsdom
-import { describe, vi, test, TestContext } from "vitest";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-
-import mockRouter from "next-router-mock";
-
 import {
-  CustomTypeFormat,
   createSliceMachineManager,
+  CustomTypeFormat,
 } from "@slicemachine/manager";
 import { createSliceMachineManagerMSWHandler } from "@slicemachine/manager/test";
-import { CustomTypes } from "@lib/models/common/CustomType";
-import { render, screen, within } from "test/__testutils__";
-import { createTestPlugin } from "test/__testutils__/createTestPlugin";
-import { createTestProject } from "test/__testutils__/createTestProject";
-import { CustomTypesBuilderPage } from "../customTypesBuilder/CustomTypesBuilderPage";
-import pkg from "../../../../package.json";
-
+import mockRouter from "next-router-mock";
 import { createDynamicRouteParser } from "next-router-mock/dynamic-routes";
+import { describe, test, TestContext, vi } from "vitest";
+
+import { render, screen, within } from "@/../test/__testutils__";
+import { createTestPlugin } from "@/../test/__testutils__/createTestPlugin";
+import { createTestProject } from "@/../test/__testutils__/createTestProject";
+import { CustomTypes } from "@/legacy/lib/models/common/CustomType";
+
+import pkg from "../../../../package.json";
+import { CustomTypesBuilderPage } from "../customTypesBuilder/CustomTypesBuilderPage";
 
 mockRouter.useParser(
   createDynamicRouteParser([
@@ -89,10 +88,9 @@ describe.each(formats)(
       // Submit the form
       await user.click(screen.getByRole("button", { name: "Rename" }));
 
-      const folder =
-        customType.format === "page" ? "Page types" : "Custom types";
+      const breadcrumb = screen.getByLabelText("Breadcrumb");
       expect(
-        screen.getByTestId(`breadcrumb-${folder}-${renamedCustomType}`),
+        await within(breadcrumb).findByText(renamedCustomType),
       ).toBeVisible();
     });
   },
@@ -178,10 +176,10 @@ async function renderCustomTypesBuilderPage({
   const renderResults = render(<CustomTypesBuilderPage />, customTypeMockStore);
 
   const folder = customType.format === "page" ? "Page types" : "Custom types";
-  const breadcrumb = await screen.findByTestId(
-    `breadcrumb-${folder}-${customType.label as string}`,
+  const breadcrumb = await screen.findByLabelText("Breadcrumb");
+  expect(breadcrumb).toHaveTextContent(
+    `${folder}/${customType.label as string}`,
   );
-  expect(breadcrumb).toBeVisible();
 
   return renderResults;
 }

package/src/features/customTypes/__tests__/CustomTypesTablePage.test.tsx

@@ -1,21 +1,22 @@
 // @vitest-environment jsdom
-import { describe, vi, test, TestContext } from "vitest";
-import mockRouter from "next-router-mock";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-
 import {
-  CustomTypeFormat,
   createSliceMachineManager,
+  CustomTypeFormat,
 } from "@slicemachine/manager";
 import { createSliceMachineManagerMSWHandler } from "@slicemachine/manager/test";
 import { CustomTypeReadHookData } from "@slicemachine/plugin-kit";
-import { CustomTypes } from "@lib/models/common/CustomType";
-import { render, screen, waitFor, within } from "test/__testutils__";
-import { createTestPlugin } from "test/__testutils__/createTestPlugin";
-import { createTestProject } from "test/__testutils__/createTestProject";
-import { CustomTypesTablePage } from "../customTypesTable/CustomTypesTablePage";
-import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
+import mockRouter from "next-router-mock";
+import { describe, test, TestContext, vi } from "vitest";
+
+import { render, screen, waitFor, within } from "@/../test/__testutils__";
+import { createTestPlugin } from "@/../test/__testutils__/createTestPlugin";
+import { createTestProject } from "@/../test/__testutils__/createTestProject";
+import { CustomTypes } from "@/legacy/lib/models/common/CustomType";
+
 import pkg from "../../../../package.json";
+import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
+import { CustomTypesTablePage } from "../customTypesTable/CustomTypesTablePage";
 
 const formats = [
   {