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

package/{lib → src/legacy/lib}/builders/SliceBuilder/FieldZones/index.tsx

@@ -1,10 +1,3 @@
-import EditModal from "@lib/builders/common/EditModal";
-import Zone from "@lib/builders/common/Zone";
-import { WidgetsArea } from "@lib/models/common/Slice";
-import * as Widgets from "@lib/models/common/widgets";
-import sliceBuilderWidgetsArray from "@lib/models/common/widgets/sliceBuilderArray";
-import { AnyWidget } from "@lib/models/common/widgets/Widget";
-import { ensureDnDDestination } from "@lib/utils";
 import {
   Box,
   Dialog,
@@ -12,25 +5,35 @@ import {
   DialogContent,
   DialogHeader,
 } from "@prismicio/editor-ui";
-import {
-  FieldType,
-  NestableWidget,
-} from "@prismicio/types-internal/lib/customtypes";
-import { telemetry } from "@src/apiClient";
-import { List } from "@src/components/List";
+import { GroupFieldType } from "@prismicio/types-internal/lib/customtypes";
+import { FC, useState } from "react";
+import { DropResult } from "react-beautiful-dnd";
+import { flushSync } from "react-dom";
+
+import { telemetry } from "@/apiClient";
+import { List } from "@/components/List";
 import {
   addField,
   deleteField,
   deleteRepeatableZone,
   reorderField,
   updateField,
-} from "@src/domain/slice";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
-import { useGroupsInSlicesExperiment } from "@src/features/slices/sliceBuilder/useGroupsInSlicesExperiment";
-import { transformKeyAccessor } from "@utils/str";
-import { FC, useState } from "react";
-import { DropResult } from "react-beautiful-dnd";
-import { flushSync } from "react-dom";
+} from "@/domain/slice";
+import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
+import { useGroupsInSlicesExperiment } from "@/features/slices/sliceBuilder/useGroupsInSlicesExperiment";
+import EditModal from "@/legacy/lib/builders/common/EditModal";
+import Zone from "@/legacy/lib/builders/common/Zone";
+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 { 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/>
@@ -108,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}".`);
       }
@@ -145,7 +135,8 @@ const FieldZones: FC = () => {
         variationId: variation.id,
         widgetArea,
         newFieldId: id,
-        newField,
+        newField:
+          newField.type === GroupFieldType ? Groups.fromSM(newField) : newField,
       });
 
       setSlice(newSlice);
@@ -154,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),
       });
     };
 
@@ -193,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)}
@@ -221,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/{lib → src/legacy/lib}/builders/SliceBuilder/Sidebar/AddVariationModal.tsx

@@ -1,6 +1,3 @@
-import Card from "@components/Card/Default";
-import SliceMachineModal from "@components/SliceMachineModal";
-import { VariationSM } from "@lib/models/common/Slice";
 import { Box, Button } from "@prismicio/editor-ui";
 import { Field, Form, Formik } from "formik";
 import { camelCase } from "lodash";
@@ -8,6 +5,10 @@ import React, { useEffect, useState } from "react";
 import Select from "react-select";
 import { Input, Label, Text } from "theme-ui";
 
+import Card from "@/legacy/components/Card/Default";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+import { VariationSM } from "@/legacy/lib/models/common/Slice";
+
 const Error = ({ msg }: { msg?: string }) => (
   <Text as="span" sx={{ fontSize: 12, color: "error", mt: "5px", ml: 2 }}>
     {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions, @typescript-eslint/prefer-nullish-coalescing */}

package/{lib → src/legacy/lib}/builders/SliceBuilder/Sidebar/index.tsx

@@ -1,20 +1,21 @@
-import AddVariationModal from "@builders/SliceBuilder/Sidebar/AddVariationModal";
-import { DeleteVariationModal } from "@components/DeleteVariationModal";
-import { RenameVariationModal } from "@components/Forms/RenameVariationModal";
-import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
-import type { VariationSM } from "@lib/models/common/Slice";
 import { Box, Button, Gradient } from "@prismicio/editor-ui";
-import { updateSlice } from "@src/apiClient";
-import { copySliceVariation } from "@src/domain/slice";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
-import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
-import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
-import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { useRouter } from "next/router";
 import { type FC, useState } from "react";
 import { toast } from "react-toastify";
 
+import { updateSlice } from "@/apiClient";
+import { copySliceVariation } from "@/domain/slice";
+import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
+import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
+import { SLICES_CONFIG } from "@/features/slices/slicesConfig";
+import { useScreenshotChangesModal } from "@/hooks/useScreenshotChangesModal";
+import { DeleteVariationModal } from "@/legacy/components/DeleteVariationModal";
+import { RenameVariationModal } from "@/legacy/components/Forms/RenameVariationModal";
+import ScreenshotChangesModal from "@/legacy/components/ScreenshotChangesModal";
+import AddVariationModal from "@/legacy/lib/builders/SliceBuilder/Sidebar/AddVariationModal";
+import type { VariationSM } from "@/legacy/lib/models/common/Slice";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
 type DialogState =
   | { type: "ADD_VARIATION"; variation?: undefined; loading?: boolean }
   | { type: "RENAME_VARIATION"; variation: VariationSM; loading?: boolean }

package/{lib → src/legacy/lib}/builders/SliceBuilder/SimulatorButton/index.tsx

@@ -1,21 +1,25 @@
-import { SIMULATOR_WINDOW_ID, VIDEO_SIMULATOR_TOOLTIP } from "@lib/consts";
 import { Button, tokens } from "@prismicio/editor-ui";
-import { telemetry } from "@src/apiClient";
+import { useRouter } from "next/router";
+import React, { PropsWithChildren, useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import ReactTooltip from "react-tooltip";
+
+import { telemetry } from "@/apiClient";
 import {
   HoverCard,
   HoverCardCloseButton,
   HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
-} from "@src/components/HoverCard";
-import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
-import { userHasSeenSimulatorToolTip } from "@src/modules/userContext";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { useRouter } from "next/router";
-import React, { PropsWithChildren, useEffect, useRef } from "react";
-import { useSelector } from "react-redux";
-import ReactTooltip from "react-tooltip";
+} from "@/components/HoverCard";
+import { PlayCircleIcon } from "@/icons/PlayCircleIcon";
+import {
+  SIMULATOR_WINDOW_ID,
+  VIDEO_SIMULATOR_TOOLTIP,
+} from "@/legacy/lib/consts";
+import { userHasSeenSimulatorToolTip } from "@/modules/userContext";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+import { SliceMachineStoreType } from "@/redux/type";
 
 const SimulatorOnboardingTooltip: React.FC<
   PropsWithChildren<{

package/{lib → src/legacy/lib}/builders/SliceBuilder/index.tsx

@@ -1,4 +1,10 @@
-import SimulatorButton from "@builders/SliceBuilder/SimulatorButton";
+import { Box } from "@prismicio/editor-ui";
+import { type FC } from "react";
+
+import { BreadcrumbItem } from "@/components/Breadcrumb";
+import { AutoSaveStatusIndicator } from "@/features/autoSave/AutoSaveStatusIndicator";
+import { FloatingBackButton } from "@/features/slices/sliceBuilder/FloatingBackButton";
+import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
 import {
   AppLayout,
   AppLayoutActions,
@@ -6,13 +12,8 @@ import {
   AppLayoutBreadcrumb,
   AppLayoutContent,
   AppLayoutHeader,
-} from "@components/AppLayout";
-import { Box } from "@prismicio/editor-ui";
-import { BreadcrumbItem } from "@src/components/Breadcrumb";
-import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
-import { FloatingBackButton } from "@src/features/slices/sliceBuilder/FloatingBackButton";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
-import { type FC } from "react";
+} from "@/legacy/components/AppLayout";
+import SimulatorButton from "@/legacy/lib/builders/SliceBuilder/SimulatorButton";
 
 import FieldZones from "./FieldZones";
 import { Sidebar } from "./Sidebar";

package/{lib → src/legacy/lib}/builders/common/EditModal/Field.jsx

@@ -5,7 +5,8 @@ import { Box } from "theme-ui";
 import {
   FormFieldCheckbox,
   FormFieldInput,
-} from "../../../../components/FormFields";
+} from "@/legacy/components/FormFields";
+
 import { FormTypes } from "../../../forms/types";
 
 const WidgetFormField = ({ fieldName, formField, fields, initialValues }) => {

package/{lib → src/legacy/lib}/builders/common/EditModal/index.jsx

@@ -1,15 +1,19 @@
-import Card from "@components/Card/WithTabs";
-import { Col, Flex as FlexGrid } from "@components/Flex";
-import ItemHeader from "@components/ItemHeader";
-import SliceMachineModal from "@components/SliceMachineModal";
-import { createFieldNameFromKey, createInitialValues } from "@lib/forms";
-import { DeprecatedMockConfigMessage } from "@lib/models/common/DeprecatedMockConfigMessage";
-import * as Widgets from "@lib/models/common/widgets/withGroup";
-import { removeProp } from "@lib/utils";
 import Modal from "react-modal";
 import { Box, Button, Close, Flex, useThemeUI } from "theme-ui";
 import * as yup from "yup";
 
+import Card from "@/legacy/components/Card/WithTabs";
+import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
+import ItemHeader from "@/legacy/components/ItemHeader";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+import {
+  createFieldNameFromKey,
+  createInitialValues,
+} from "@/legacy/lib/forms";
+import { DeprecatedMockConfigMessage } from "@/legacy/lib/models/common/DeprecatedMockConfigMessage";
+import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
+import { removeProp } from "@/legacy/lib/utils";
+
 import { findWidgetByConfigOrType } from "../../utils";
 import WidgetFormField from "./Field";
 import WidgetForm from "./Form";

package/{lib → src/legacy/lib}/builders/common/SelectFieldTypeModal/index.jsx

@@ -1,9 +1,10 @@
-import Card from "@components/Card";
-import { Col, Flex as FlexGrid } from "@components/Flex";
-import SliceMachineModal from "@components/SliceMachineModal";
 import Modal from "react-modal";
 import { Close, Flex, Heading } from "theme-ui";
 
+import Card from "@/legacy/components/Card";
+import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
+import SliceMachineModal from "@/legacy/components/SliceMachineModal";
+
 import FieldTypeCard from "./FieldTypeCard";
 
 if (process.env.NODE_ENV !== "test") {

package/{lib → src/legacy/lib}/builders/common/Zone/Card/components/ErrorTooltip.tsx

@@ -1,7 +1,8 @@
-import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
 import { FaRegQuestionCircle } from "react-icons/fa";
 import ReactTooltip from "react-tooltip";
 
+import { ReactTooltipPortal } from "@/legacy/components/ReactTooltipPortal";
+
 interface ErrorTooltip {
   error?: string;
 }

package/{lib → src/legacy/lib}/builders/common/Zone/Card/components/Hints/CodeBlock.tsx

@@ -1,4 +1,3 @@
-import Code from "@components/CodeBlock";
 import { NestableWidget, UID } from "@prismicio/types-internal/lib/customtypes";
 import React, { useState } from "react";
 import { BiCopy } from "react-icons/bi";
@@ -6,6 +5,8 @@ import { BsCode } from "react-icons/bs";
 import { MdCheck } from "react-icons/md";
 import { Box, Button, Flex, Text, useThemeUI } from "theme-ui";
 
+import Code from "@/legacy/components/CodeBlock";
+
 const buttonIconStyle: React.CSSProperties = {
   position: "relative",
   top: "3px",

package/{lib → src/legacy/lib}/builders/common/Zone/Card/components/Hints/index.tsx

@@ -1,7 +1,8 @@
-import { managerClient } from "@src/managerClient";
 import React from "react";
 import useSWR from "swr";
 
+import { managerClient } from "@/managerClient";
+
 import CodeBlock, { Item, RenderHintBaseFN } from "./CodeBlock";
 
 interface HintProps {

package/{lib → src/legacy/lib}/builders/common/Zone/Card/components/NewField.tsx

@@ -1,13 +1,3 @@
-import {
-  getInputFieldStyles,
-  InputFieldStyles,
-} from "@components/FormFields/Input";
-import { createInitialValues, createValidationSchema } from "@lib/forms";
-import { validateId } from "@lib/forms/defaults";
-import { InputType } from "@lib/forms/fields";
-import { AnyWidget } from "@lib/models/common/widgets/Widget";
-import * as Widgets from "@lib/models/common/widgets/withGroup";
-import { slugify } from "@lib/utils/str";
 import { Button } from "@prismicio/editor-ui";
 import * as CSS from "csstype";
 import { Field, Form, Formik } from "formik";
@@ -15,6 +5,20 @@ import { Ref, SetStateAction, useEffect, useRef, useState } from "react";
 import { Flex, Input, Text, useThemeUI } from "theme-ui";
 import { AnyObjectSchema } from "yup";
 
+import {
+  getInputFieldStyles,
+  InputFieldStyles,
+} from "@/legacy/components/FormFields/Input";
+import {
+  createInitialValues,
+  createValidationSchema,
+} from "@/legacy/lib/forms";
+import { validateId } from "@/legacy/lib/forms/defaults";
+import { InputType } from "@/legacy/lib/forms/fields";
+import { AnyWidget } from "@/legacy/lib/models/common/widgets/Widget";
+import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
+import { slugify } from "@/legacy/lib/utils/str";
+
 import { ErrorTooltip } from "./ErrorTooltip";
 
 interface NewField {

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

@@ -1,9 +1,10 @@
-import Li from "@components/Li";
-import ListItem from "@components/ListItem";
-import * as Widgets from "@lib/models/common/widgets/withGroup";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { Box, Text } from "theme-ui";
 
+import Li from "@/legacy/components/Li";
+import ListItem from "@/legacy/components/ListItem";
+import * as Widgets from "@/legacy/lib/models/common/widgets/withGroup";
+
 import { findWidgetByConfigOrType } from "../../../utils";
 import Hint from "./components/Hints";
 
@@ -16,6 +17,7 @@ const FieldZone = ({
   onDragEnd,
   renderFieldAccessor,
   onDeleteItem,
+  onSave,
   showHints,
   newField,
   renderHintBase,
@@ -81,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/{lib → src/legacy/lib}/builders/common/Zone/index.jsx

@@ -1,10 +1,12 @@
 import { Button, Switch, Text } from "@prismicio/editor-ui";
-import { telemetry } from "@src/apiClient";
-import { ListHeader } from "@src/components/List";
 import { array, arrayOf, bool, func, object, shape, string } from "prop-types";
 import { useState } from "react";
 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";
 import NewField from "./Card/components/NewField";
@@ -12,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 */,
@@ -61,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 = () => {
@@ -158,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/{lib → src/legacy/lib}/builders/utils/index.ts

@@ -1,4 +1,4 @@
-import { TabField } from "@lib/models/common/CustomType";
+import { TabField } from "@/legacy/lib/models/common/CustomType";
 
 interface Widgets {
   [x: string]: TabField;

package/{lib → src/legacy/lib}/models/common/DeprecatedMockConfigMessage.tsx

@@ -1,8 +1,9 @@
-import { SIMULATOR_WINDOW_ID } from "@lib/consts";
 import { useRouter } from "next/router";
 import { MdErrorOutline } from "react-icons/md";
 import { Box, Button, Text } from "theme-ui";
 
+import { SIMULATOR_WINDOW_ID } from "@/legacy/lib/consts";
+
 export const DeprecatedMockConfigMessage = () => {
   const router = useRouter();
   return (

package/{lib → src/legacy/lib}/models/common/ModelData.ts

@@ -1,6 +1,6 @@
-import type { CustomTypeSM } from "@lib/models/common/CustomType";
-import type { Screenshot } from "@lib/models/common/Library";
-import type { SliceSM } from "@lib/models/common/Slice";
+import type { CustomTypeSM } from "@/legacy/lib/models/common/CustomType";
+import type { Screenshot } from "@/legacy/lib/models/common/Library";
+import type { SliceSM } from "@/legacy/lib/models/common/Slice";
 
 // Generics
 

package/{lib → src/legacy/lib}/models/common/ModelStatus/index.ts

@@ -1,5 +1,5 @@
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { CustomTypeSM } from "@lib/models/common/CustomType";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { CustomTypeSM } from "@/legacy/lib/models/common/CustomType";
 
 import {
   hasLocal,

package/{lib → 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/{lib → src/legacy/lib}/models/common/normalizers/customType.ts

@@ -1,5 +1,5 @@
-import { CustomTypeSM } from "@lib/models/common/CustomType";
-import { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
+import { CustomTypeSM } from "@/legacy/lib/models/common/CustomType";
+import { LocalOrRemoteCustomType } from "@/legacy/lib/models/common/ModelData";
 
 export const normalizeFrontendCustomType = (
   localCustomType: CustomTypeSM,

package/{lib → src/legacy/lib}/models/common/normalizers/slices.ts

@@ -1,5 +1,5 @@
-import { Component, Library } from "@lib/models/common/Library";
-import { SliceSM } from "@lib/models/common/Slice";
+import { Component, Library } from "@/legacy/lib/models/common/Library";
+import { SliceSM } from "@/legacy/lib/models/common/Slice";
 
 import { LocalOrRemoteSlice } from "../ModelData";
 

package/{lib → src/legacy/lib}/models/common/widgets/ContentRelationship/Form.tsx

@@ -1,14 +1,15 @@
-import { Col, Flex as FlexGrid } from "@components/Flex";
-import WidgetFormField from "@lib/builders/common/EditModal/Field";
-import { createFieldNameFromKey } from "@lib/forms";
-import { DefaultFields } from "@lib/forms/defaults";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
 import { FormikProps } from "formik";
 import { useSelector } from "react-redux";
 import Select from "react-select";
 import { Box, Label } from "theme-ui";
 import * as yup from "yup";
 
+import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
+import WidgetFormField from "@/legacy/lib/builders/common/EditModal/Field";
+import { createFieldNameFromKey } from "@/legacy/lib/forms";
+import { DefaultFields } from "@/legacy/lib/forms/defaults";
+import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
+
 import { hasLocal } from "../../ModelData";
 
 const FormFields = {

package/{lib → src/legacy/lib}/models/common/widgets/ContentRelationship/index.ts

@@ -1,10 +1,11 @@
-import { hasLocal } from "@lib/models/common/ModelData";
 import { Link } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
 import { MdSettingsEthernet } from "react-icons/md";
 import { useSelector } from "react-redux";
 import * as yup from "yup";
 
+import { hasLocal } from "@/legacy/lib/models/common/ModelData";
+import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
+
 import { linkConfigSchema } from "../Link";
 import { Widget } from "../Widget";
 import Form, { FormFields } from "./Form";