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

package/src/legacy/lib/builders/SliceBuilder/FieldZones/index.tsx

@@ -5,10 +5,7 @@ import {
   DialogContent,
   DialogHeader,
 } from "@prismicio/editor-ui";
-import {
-  FieldType,
-  NestableWidget,
-} from "@prismicio/types-internal/lib/customtypes";
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes";
 import { FC, useState } from "react";
 import { DropResult } from "react-beautiful-dnd";
 import { flushSync } from "react-dom";
@@ -26,12 +23,17 @@ import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvid
 import { useGroupsInSlicesExperiment } from "@/features/slices/sliceBuilder/useGroupsInSlicesExperiment";
 import EditModal from "@/legacy/lib/builders/common/EditModal";
 import Zone from "@/legacy/lib/builders/common/Zone";
-import { WidgetsArea } from "@/legacy/lib/models/common/Slice";
+import { Groups } from "@/legacy/lib/models/common/Group";
+import {
+  SlicePrimaryFieldSM,
+  WidgetsArea,
+} from "@/legacy/lib/models/common/Slice";
 import * as Widgets from "@/legacy/lib/models/common/widgets";
+import groupBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/groupBuilderArray";
 import sliceBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/sliceBuilderArray";
-import { AnyWidget } from "@/legacy/lib/models/common/widgets/Widget";
 import { ensureDnDDestination } from "@/legacy/lib/utils";
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
+import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 const dataTipText = ` The non-repeatable zone
   is for fields<br/> that should appear once, like a<br/>
@@ -109,34 +111,21 @@ const FieldZones: FC = () => {
     }: {
       id: string;
       label: string;
-      widgetTypeName: FieldType;
+      widgetTypeName: keyof typeof Widgets;
     }) => {
-      // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const widget = Widgets[widgetTypeName];
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+      const widget = sliceBuilderWidgetsArray.find(
+        (sliceBuilderWidget) =>
+          sliceBuilderWidget.CUSTOM_NAME === widgetTypeName ||
+          sliceBuilderWidget.TYPE_NAME === widgetTypeName,
+      );
       if (!widget) {
-        console.log(
-          `Could not find widget with type name "${widgetTypeName}". Please contact us!`,
-        );
+        throw new Error(`Unsupported Field Type: ${widgetTypeName}`);
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-      const newField = widget.create(label) as NestableWidget;
-
-      if (
-        newField.type === "Range" ||
-        newField.type === "IntegrationFields" ||
-        newField.type === "Separator"
-      ) {
-        throw new Error(`Unsupported Field Type: ${newField.type}`);
-      }
+      const newField = widget.create(label) as SlicePrimaryFieldSM;
 
       try {
-        const CurrentWidget: AnyWidget = Widgets[newField.type];
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-        CurrentWidget.schema.validateSync(newField, { stripUnknown: false });
+        widget.schema.validateSync(newField, { stripUnknown: false });
       } catch (error) {
         throw new Error(`Model is invalid for widget "${newField.type}".`);
       }
@@ -146,7 +135,8 @@ const FieldZones: FC = () => {
         variationId: variation.id,
         widgetArea,
         newFieldId: id,
-        newField,
+        newField:
+          newField.type === GroupFieldType ? Groups.fromSM(newField) : newField,
       });
 
       setSlice(newSlice);
@@ -155,9 +145,9 @@ const FieldZones: FC = () => {
         event: "field:added",
         id,
         name: label,
-        type: widgetTypeName,
+        type: newField.type,
         isInAGroup: false,
-        contentType: "slice",
+        contentType: getContentTypeForTracking(window.location.pathname),
       });
     };
 
@@ -194,14 +184,17 @@ const FieldZones: FC = () => {
     <List>
       <Zone
         zoneType="slice"
-        zoneTypeFormat={undefined}
         tabId={undefined}
         title="Fields"
         dataTip={dataTipText}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         fields={variation.primary}
         EditModal={EditModal}
-        widgetsArray={sliceBuilderWidgetsArray}
+        widgetsArray={
+          groupsInSlicesExperiment.eligible
+            ? sliceBuilderWidgetsArray
+            : groupBuilderWidgetsArray
+        }
         onDeleteItem={_onDeleteItem(WidgetsArea.Primary)}
         onSave={_onSave(WidgetsArea.Primary)}
         onSaveNewField={_onSaveNewField(WidgetsArea.Primary)}
@@ -222,12 +215,11 @@ const FieldZones: FC = () => {
       {!groupsInSlicesExperiment.eligible || hasItems ? (
         <Zone
           zoneType="slice"
-          zoneTypeFormat={undefined}
           tabId={undefined}
           isRepeatable
           title="Repeatable Zone"
           dataTip={dataTipText2}
-          widgetsArray={sliceBuilderWidgetsArray}
+          widgetsArray={groupBuilderWidgetsArray}
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           fields={variation.items}
           EditModal={EditModal}

package/src/legacy/lib/builders/common/Zone/Card/index.jsx

@@ -17,6 +17,7 @@ const FieldZone = ({
   onDragEnd,
   renderFieldAccessor,
   onDeleteItem,
+  onSave,
   showHints,
   newField,
   renderHintBase,
@@ -82,6 +83,8 @@ const FieldZone = ({
                   parentSnapshot: snapshot,
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                   deleteItem: onDeleteItem,
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                  saveItem: onSave,
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
                   draggableId: `list-item-${item.key}`,
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

package/src/legacy/lib/builders/common/Zone/index.jsx

@@ -5,6 +5,7 @@ import { BaseStyles } from "theme-ui";
 
 import { telemetry } from "@/apiClient";
 import { ListHeader } from "@/components/List";
+import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 import SelectFieldTypeModal from "../SelectFieldTypeModal";
 import Card from "./Card";
@@ -13,7 +14,6 @@ import EmptyState from "./components/EmptyState";
 
 const Zone = ({
   zoneType /* type of the zone: customType or slice */,
-  zoneTypeFormat /* format of the zone: custom or page (or undefined if not a custom type) */,
   tabId,
   title /* text info to display in Card Header */,
   fields /* widgets registered in the zone */,
@@ -62,12 +62,7 @@ const Zone = ({
       name: model.config.label,
       type: model.type,
       isInAGroup: false,
-      contentType:
-        zoneType === "customType"
-          ? zoneTypeFormat === "page"
-            ? "page type"
-            : "custom type"
-          : "slice",
+      contentType: getContentTypeForTracking(window.location.pathname),
     });
   };
   const enterSelectMode = () => {
@@ -159,6 +154,8 @@ const Zone = ({
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               onDeleteItem={onDeleteItem}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              onSave={onSave}
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               testId={testId}
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               isRepeatableCustomType={isRepeatableCustomType}

package/src/legacy/lib/models/common/Slice.ts

@@ -1,4 +1,6 @@
 import {
+  GroupFieldType,
+  NestableWidget,
   SharedSlice,
   Variation,
 } from "@prismicio/types-internal/lib/customtypes";
@@ -6,6 +8,7 @@ import { getOrElseW } from "fp-ts/lib/Either";
 import * as t from "io-ts";
 
 import { FieldsSM } from "./Fields";
+import { Groups, GroupSM } from "./Group";
 
 const IMAGE_PLACEHOLDER_URL =
   "https://images.prismic.io/slice-machine/621a5ec4-0387-4bc5-9860-2dd46cbc07cd_default_ss.png?auto=compress,format";
@@ -15,6 +18,14 @@ export enum WidgetsArea {
   Items = "items",
 }
 
+export const SlicePrimaryFieldSM = t.union([GroupSM, NestableWidget]);
+export type SlicePrimaryFieldSM = t.TypeOf<typeof SlicePrimaryFieldSM>;
+
+export const SlicePrimaryFieldsSM = t.array(
+  t.type({ key: t.string, value: SlicePrimaryFieldSM }),
+);
+export type SlicePrimaryFieldsSM = t.TypeOf<typeof SlicePrimaryFieldsSM>;
+
 export const VariationSM = t.intersection([
   t.type({
     id: t.string,
@@ -25,7 +36,7 @@ export const VariationSM = t.intersection([
   }),
   t.partial({
     imageUrl: t.string,
-    primary: FieldsSM,
+    primary: SlicePrimaryFieldsSM,
     items: FieldsSM,
     display: t.string,
   }),
@@ -55,7 +66,10 @@ export const Variations = {
       Variation.decode({
         ...variation,
         primary: variation.primary?.reduce(
-          (acc, { key, value }) => ({ ...acc, [key]: value }),
+          (acc, { key, value }) => ({
+            ...acc,
+            [key]: value.type === GroupFieldType ? Groups.fromSM(value) : value,
+          }),
           {},
         ),
         items: variation.items?.reduce(
@@ -80,7 +94,7 @@ export const Variations = {
         primary: Object.entries(variation.primary || {}).map(
           ([key, value]) => ({
             key,
-            value,
+            value: value.type === GroupFieldType ? Groups.toSM(value) : value,
           }),
         ),
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

package/src/legacy/lib/models/common/widgets/Group/ListItem/index.jsx

@@ -5,26 +5,23 @@ import { Box, Button } from "theme-ui";
 
 import { telemetry } from "@/apiClient";
 import {
-  addGroupField,
-  deleteGroupField,
-  reorderGroupField,
-  updateGroupField,
-} from "@/domain/customType";
-import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+  addFieldToGroup,
+  deleteFieldFromGroup,
+  reorderFieldInGroup,
+  updateFieldInGroup,
+} from "@/domain/group";
 import ListItem from "@/legacy/components/ListItem";
 import EditModal from "@/legacy/lib/builders/common/EditModal";
 import SelectFieldTypeModal from "@/legacy/lib/builders/common/SelectFieldTypeModal";
 import Hint from "@/legacy/lib/builders/common/Zone/Card/components/Hints";
 import NewField from "@/legacy/lib/builders/common/Zone/Card/components/NewField";
 import { findWidgetByConfigOrType } from "@/legacy/lib/builders/utils";
-import { TabFieldsModel } from "@/legacy/lib/models/common/CustomType";
+import { Groups } from "@/legacy/lib/models/common/Group";
 import * as Widgets from "@/legacy/lib/models/common/widgets";
-import sliceBuilderArray from "@/legacy/lib/models/common/widgets/sliceBuilderArray";
-import {
-  ensureDnDDestination,
-  ensureWidgetTypeExistence,
-} from "@/legacy/lib/utils";
+import groupBuilderWidgetsArray from "@/legacy/lib/models/common/widgets/groupBuilderArray";
+import { ensureDnDDestination } from "@/legacy/lib/utils";
 import { transformKeyAccessor } from "@/legacy/lib/utils/str";
+import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 /* eslint-disable */
 const CustomListItem = ({
@@ -36,14 +33,12 @@ const CustomListItem = ({
   isRepeatable,
   item: groupItem,
   draggableId,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  renderFieldAccessor,
+  saveItem,
   ...rest
 }) => {
   const [selectMode, setSelectMode] = useState(false);
   const [newFieldData, setNewFieldData] = useState(null);
   const [editModalData, setEditModalData] = useState({ isOpen: false });
-  const { customType, setCustomType } = useCustomTypeState();
 
   const onSelectFieldType = (widgetTypeName) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -60,54 +55,47 @@ const CustomListItem = ({
   };
 
   const onSaveNewField = ({ id, label, widgetTypeName }) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
     const widget = Widgets[widgetTypeName];
+    const newField = widget.create(label);
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
-    const newWidget = widget.create(label);
-
-    const newField = TabFieldsModel.fromSM(newWidget);
-    const newCustomType = addGroupField({
-      customType,
-      sectionId: tabId,
-      groupFieldId: groupItem.key,
-      newField,
-      newFieldId: id,
+    const newGroupValue = addFieldToGroup({
+      group: Groups.fromSM(groupItem.value),
+      fieldId: id,
+      field: newField,
     });
 
-    setCustomType(newCustomType);
+    saveItem({
+      apiId: groupItem.key,
+      newKey: groupItem.key,
+      value: Groups.toSM(newGroupValue),
+    });
 
     void telemetry.track({
       event: "field:added",
       id,
       name: label,
-      type: widgetTypeName,
+      type: newField.type,
       isInAGroup: true,
-      contentType: customType.format === "page" ? "page type" : "custom type",
+      contentType: getContentTypeForTracking(window.location.pathname),
     });
   };
 
   const onSaveField = ({ apiId: previousKey, newKey, value }) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument
-    if (ensureWidgetTypeExistence(Widgets, value.type)) {
-      return;
-    }
-
-    const newField = TabFieldsModel.fromSM(value);
-    const newCustomType = updateGroupField({
-      customType,
-      sectionId: tabId,
-      groupFieldId: groupItem.key,
+    const newGroupValue = updateFieldInGroup({
+      group: Groups.fromSM(groupItem.value),
       previousFieldId: previousKey,
       newFieldId: newKey,
-      newField,
+      field: value,
     });
 
-    setCustomType(newCustomType);
+    saveItem({
+      apiId: groupItem.key,
+      newKey: groupItem.key,
+      value: Groups.toSM(newGroupValue),
+    });
   };
 
   const onDragEnd = (result) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     if (ensureDnDDestination(result)) {
       return;
     }
@@ -120,10 +108,8 @@ const CustomListItem = ({
     const { index: sourceIndex } = source;
     const { index: destinationIndex } = destination;
 
-    const newCustomType = reorderGroupField({
-      customType,
-      sectionId: tabId,
-      groupFieldId: groupItem.key,
+    const newGroupValue = reorderFieldInGroup({
+      group: Groups.fromSM(groupItem.value),
       sourceIndex,
       destinationIndex,
     });
@@ -131,18 +117,26 @@ const CustomListItem = ({
     // When removing redux and replacing it by a simple useState, react-beautiful-dnd (that is deprecated library) was making the fields flickering on reorder.
     // The problem seems to come from the react non-synchronous way to handle our state update that didn't work well with the library.
     // It's a hack and since it's used on an old pure JavaScript code with a deprecated library it will be removed when updating the UI of the fields.
-    flushSync(() => setCustomType(newCustomType));
+    flushSync(() => {
+      saveItem({
+        apiId: groupItem.key,
+        newKey: groupItem.key,
+        value: Groups.toSM(newGroupValue),
+      });
+    });
   };
 
   const onDeleteItem = (key) => {
-    const newCustomType = deleteGroupField({
-      customType,
-      sectionId: tabId,
-      groupFieldId: groupItem.key,
+    const newGroupValue = deleteFieldFromGroup({
+      group: Groups.fromSM(groupItem.value),
       fieldId: key,
     });
 
-    setCustomType(newCustomType);
+    saveItem({
+      apiId: groupItem.key,
+      newKey: groupItem.key,
+      value: Groups.toSM(newGroupValue),
+    });
   };
 
   /** @param {[string, import("@prismicio/types-internal/lib/customtypes").NestableWidget]} field */
@@ -157,9 +151,10 @@ const CustomListItem = ({
       name: model.config.label,
       type: model.type,
       isInAGroup: true,
-      contentType: customType.format === "page" ? "page type" : "custom type",
+      contentType: getContentTypeForTracking(window.location.pathname),
     });
   };
+
   return (
     <Fragment>
       <ListItem
@@ -170,7 +165,6 @@ const CustomListItem = ({
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
         draggableId={draggableId}
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unused-vars, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
-        renderFieldAccessor={(key) => `data.${groupItem.key}.[...]`}
         {...rest}
         CustomEditElements={[
           <Button
@@ -220,8 +214,7 @@ const CustomListItem = ({
                           enterEditMode,
                           deleteItem: onDeleteItem,
                           renderFieldAccessor: (key) =>
-                            // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
-                            `data.${groupItem.key}.${key}`,
+                            `item${transformKeyAccessor(item.key)}`,
                           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
                           draggableId: `group-${groupItem.key}-${item.key}-${index}`,
                           testId: `list-item-group-${groupItem.key}-${item.key}`,
@@ -237,9 +230,7 @@ const CustomListItem = ({
                             isRepeatable={isRepeatable}
                             renderHintBase={({ item }) =>
                               // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-member-access
-                              `data.${groupItem.key}${transformKeyAccessor(
-                                item.key,
-                              )}`
+                              `item${transformKeyAccessor(item.key)}`
                             }
                             Widgets={Widgets}
                             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -277,7 +268,7 @@ const CustomListItem = ({
         data={{ isOpen: selectMode }}
         close={() => setSelectMode(false)}
         onSelect={onSelectFieldType}
-        widgetsArray={sliceBuilderArray}
+        widgetsArray={groupBuilderWidgetsArray}
       />
       <EditModal
         data={editModalData}

package/src/legacy/lib/models/common/widgets/groupBuilderArray.ts

@@ -0,0 +1,18 @@
+import * as Widgets from ".";
+
+export default [
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
+];

package/src/legacy/lib/models/common/widgets/sliceBuilderArray.ts

@@ -1,31 +1,19 @@
-import { BooleanWidget } from "./Boolean";
-import { ColorWidget } from "./Color";
-import { ContentRelationshipWidget } from "./ContentRelationship";
-import { DateWidget } from "./Date";
-import { EmbedWidget } from "./Embed";
-import { GeoPointWidget } from "./GeoPoint";
-import { ImageWidget } from "./Image";
-import { LinkWidget } from "./Link";
-import { LinkToMediaWidget } from "./LinkToMedia";
-import { NumberWidget } from "./Number";
-import { SelectWidget } from "./Select";
-import { StructuredTextWidget } from "./StructuredText";
-import { TextWidget } from "./Text";
-import { TimestampWidget } from "./Timestamp";
+import * as Widgets from "./withGroup";
 
 export default [
-  StructuredTextWidget,
-  ImageWidget,
-  LinkWidget,
-  LinkToMediaWidget,
-  ContentRelationshipWidget,
-  SelectWidget,
-  BooleanWidget,
-  DateWidget,
-  TimestampWidget,
-  EmbedWidget,
-  NumberWidget,
-  GeoPointWidget,
-  ColorWidget,
-  TextWidget,
+  Widgets.Group,
+  Widgets.StructuredText,
+  Widgets.Image,
+  Widgets.Link,
+  Widgets.LinkToMedia,
+  Widgets.ContentRelationship,
+  Widgets.Select,
+  Widgets.Boolean,
+  Widgets.Date,
+  Widgets.Timestamp,
+  Widgets.Embed,
+  Widgets.Number,
+  Widgets.GeoPoint,
+  Widgets.Color,
+  Widgets.Text,
 ];

package/src/legacy/lib/models/common/widgets/withGroup.ts

@@ -1,19 +1,2 @@
-export { Color } from ".";
-export { ContentRelationship } from ".";
-export { Date } from ".";
-export { Embed } from ".";
-export { GeoPoint } from ".";
-export { Image } from ".";
-export { Link } from ".";
-export { LinkToMedia } from ".";
-export { Number } from ".";
-export { Select } from ".";
-export { StructuredText } from ".";
-export { Text } from ".";
-export { Timestamp } from ".";
-export { UID } from ".";
-export { Boolean } from "./";
+export * from ".";
 export { GroupWidget as Group } from "./Group";
-
-export const SharedSlice = null;
-export const SliceZone = null;

package/src/utils/getContentTypeForTracking.ts

@@ -0,0 +1,21 @@
+/**
+ * Determines the content type of a given URL's pathname. This method is
+ * designed for the `field:*` tracking event, but may be used elsewhere.
+ *
+ * @param pathname - A URL's pathname.
+ *
+ * @throws {Error} Thrown when not on a slice, custom type, or page type page.
+ */
+export function getContentTypeForTracking(
+  pathname: string,
+): "page type" | "custom type" | "slice" {
+  if (pathname.startsWith("/slices/")) {
+    return "slice";
+  } else if (pathname.startsWith("/custom-types/")) {
+    return "custom type";
+  } else if (pathname.startsWith("/page-types/")) {
+    return "page type";
+  }
+
+  throw new Error(`Did not detect a content type from: ${pathname}`);
+}