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

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

@@ -1,9 +1,9 @@
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { Box, Text } from "theme-ui";
 
-import Li from "@components/Li";
-import ListItem from "@components/ListItem";
-import * as Widgets from "@lib/models/common/widgets/withGroup";
+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";
@@ -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
@@ -90,12 +93,6 @@ const FieldZone = ({
                   testId: `list-item-${item.key}`,
                 };
 
-                // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-                if (widget.CustomListItem) {
-                  const { CustomListItem } = widget;
-                  return <CustomListItem {...props} />;
-                }
-
                 const HintElement = (
                   <Hint
                     // 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, @typescript-eslint/no-unsafe-assignment
@@ -111,6 +108,15 @@ const FieldZone = ({
                     typeName={widget.CUSTOM_NAME || widget.TYPE_NAME}
                   />
                 );
+
+                // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+                if (widget.CustomListItem) {
+                  const { CustomListItem } = widget;
+                  return (
+                    <CustomListItem {...props} HintElement={HintElement} />
+                  );
+                }
+
                 return <ListItem {...props} HintElement={HintElement} />;
               })
             }

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

@@ -1,5 +1,5 @@
-import { Box, Text, Heading } from "theme-ui";
 import { Button } from "@prismicio/editor-ui";
+import { Box, Heading, Text } from "theme-ui";
 
 const ZoneEmptyState = ({
   onEnterSelectMode,
@@ -13,7 +13,7 @@ const ZoneEmptyState = ({
     <Heading as="h5">Add a new field here</Heading>
     <Box sx={{ my: 2 }}>
       <Text sx={{ color: "textClear" }}>
-        Add a field to your {zoneName} Zone
+        Fields are inputs for content (e.g. text, images, links).
       </Text>
     </Box>
     <Box sx={{ display: "flex", justifyContent: "center", marginTop: 16 }}>

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

@@ -3,17 +3,17 @@ import { array, arrayOf, bool, func, object, shape, string } from "prop-types";
 import { useState } from "react";
 import { BaseStyles } from "theme-ui";
 
-import { ListHeader } from "@src/components/List";
-import { telemetry } from "@src/apiClient";
+import { telemetry } from "@/apiClient";
+import { ListHeader } from "@/components/List";
+import { getContentTypeForTracking } from "@/utils/getContentTypeForTracking";
 
 import SelectFieldTypeModal from "../SelectFieldTypeModal";
-import NewField from "./Card/components/NewField";
 import Card from "./Card";
+import NewField from "./Card/components/NewField";
 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/{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}/forms/fields.ts

@@ -1,6 +1,5 @@
-import { FormTypes } from "./types";
-
 import { createValidationArgs } from ".";
+import { FormTypes } from "./types";
 
 export const CheckBox = (
   label: string,

package/{lib → src/legacy/lib}/forms/index.ts

@@ -1,4 +1,5 @@
 import * as Yup from "yup";
+
 import { FormTypes } from "./types";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1,10 +1,11 @@
-import { StringOrNull } from "@prismicio/types-internal/lib/validators";
-import { withFallback } from "io-ts-types";
-import * as t from "io-ts";
-import { Tabs, TabSM } from "./tab";
 import { CustomType as CustomTypeInternal } from "@prismicio/types-internal/lib/customtypes";
+import { StringOrNull } from "@prismicio/types-internal/lib/validators";
 import { getOrElseW } from "fp-ts/lib/Either";
+import * as t from "io-ts";
+import { withFallback } from "io-ts-types";
+
 import { SlicesSM } from "../Slices";
+import { Tabs, TabSM } from "./tab";
 
 export * from "./tab";
 

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

@@ -1,8 +1,9 @@
 import {
-  SlicesTypes,
   CompositeSlice,
   LegacySlice,
+  SlicesTypes,
 } from "@prismicio/types-internal/lib/customtypes/widgets/slices";
+
 import { ComponentUI } from "../ComponentUI";
 
 export type NonSharedSliceInSliceZone = {

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

@@ -1,7 +1,8 @@
 import { useRouter } from "next/router";
-import { Box, Button, Text } from "theme-ui";
-import { SIMULATOR_WINDOW_ID } from "@lib/consts";
 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();

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

@@ -1,7 +1,7 @@
-import type { PackageManager, APIEndpoints } from "@slicemachine/manager";
+import type { APIEndpoints, PackageManager } from "@slicemachine/manager";
 
-import PrismicData from "./PrismicData";
 import type { Manifest } from "./Manifest";
+import PrismicData from "./PrismicData";
 
 export interface BackendEnvironment {
   cwd: string;

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

@@ -1,8 +1,9 @@
-import * as t from "io-ts";
 import { Group } from "@prismicio/types-internal/lib/customtypes/widgets";
 import { StringOrNull } from "@prismicio/types-internal/lib/validators";
-import { FieldsSM } from "./Fields";
 import { getOrElseW } from "fp-ts/lib/Either";
+import * as t from "io-ts";
+
+import { FieldsSM } from "./Fields";
 
 export const GroupConfig = t.exact(
   t.partial({

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

@@ -1,6 +1,7 @@
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 import * as t from "io-ts";
+
 import { SliceSM } from "./Slice";
-import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 
 export const LibraryMeta = {
   reader: t.exact(

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

@@ -1,5 +1,5 @@
-import type { LibraryMeta, Library, Component } from "./Library";
 import { ComponentUI } from "./ComponentUI";
+import type { Component, Library, LibraryMeta } from "./Library";
 
 const LibraryUIMeta = {
   build(isLocal: boolean, libMeta?: LibraryMeta) {

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

@@ -1,6 +1,6 @@
-import type { CustomTypeSM } from "@lib/models/common/CustomType";
-import type { SliceSM } from "@lib/models/common/Slice";
-import type { Screenshot } from "@lib/models/common/Library";
+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/compareCustomTypeModels.ts

@@ -1,6 +1,7 @@
 import equal from "fast-deep-equal";
-import { ModelStatus } from ".";
+
 import { LocalAndRemoteCustomType } from "../ModelData";
+import { ModelStatus } from ".";
 
 export function compareCustomTypeLocalToRemote(
   model: LocalAndRemoteCustomType,

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

@@ -1,8 +1,9 @@
 import equal from "fast-deep-equal";
+
 import { Screenshot } from "../Library";
+import { LocalAndRemoteSlice } from "../ModelData";
 import { SliceSM } from "../Slice";
 import { ModelStatus } from ".";
-import { LocalAndRemoteSlice } from "../ModelData";
 
 export function compareSliceLocalToRemote(
   model: LocalAndRemoteSlice,

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

@@ -1,20 +1,21 @@
-import { compareCustomTypeLocalToRemote } from "./compareCustomTypeModels";
-import { compareSliceLocalToRemote } from "./compareSliceModels";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { CustomTypeSM } from "@/legacy/lib/models/common/CustomType";
+
 import {
-  type LocalOrRemoteCustomType,
-  type LocalOrRemoteSlice,
-  type LocalOrRemoteModel,
+  hasLocal,
+  hasRemote,
   type LocalAndRemoteCustomType,
   type LocalAndRemoteSlice,
   type LocalOnlyCustomType,
   type LocalOnlySlice,
+  type LocalOrRemoteCustomType,
+  type LocalOrRemoteModel,
+  type LocalOrRemoteSlice,
   type RemoteOnlyCustomType,
   type RemoteOnlySlice,
-  hasLocal,
-  hasRemote,
 } from "../ModelData";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { CustomTypeSM } from "@lib/models/common/CustomType";
+import { compareCustomTypeLocalToRemote } from "./compareCustomTypeModels";
+import { compareSliceLocalToRemote } from "./compareSliceModels";
 
 export enum ModelStatus {
   New = "NEW", // new model that does not exist in the repo

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

@@ -1,11 +1,14 @@
-import * as t from "io-ts";
-
 import {
+  GroupFieldType,
+  NestableWidget,
   SharedSlice,
   Variation,
 } from "@prismicio/types-internal/lib/customtypes";
 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 { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
-import { CustomTypeSM } from "@lib/models/common/CustomType";
+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,6 +1,7 @@
+import { Component, Library } from "@/legacy/lib/models/common/Library";
+import { SliceSM } from "@/legacy/lib/models/common/Slice";
+
 import { LocalOrRemoteSlice } from "../ModelData";
-import { SliceSM } from "@lib/models/common/Slice";
-import { Library, Component } from "@lib/models/common/Library";
 
 export const normalizeFrontendSlices = (
   localLibraries: ReadonlyArray<Library<Component>>,

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

@@ -1,6 +1,10 @@
-import * as yup from "yup";
+import { BooleanField } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
 import { BsToggleOn } from "react-icons/bs";
+import * as yup from "yup";
 
+import { createValidationSchema } from "../../../../forms";
+import { DefaultFields } from "../../../../forms/defaults";
+import { CheckBox, Input } from "../../../../forms/fields";
 /** {
     "type" : "Boolean",
     "config" : {
@@ -10,14 +14,8 @@ import { BsToggleOn } from "react-icons/bs";
       "label" : "bool"
     }
   } */
-
 import { removeProp } from "../../../../utils";
-import { createValidationSchema } from "../../../../forms";
-import { DefaultFields } from "../../../../forms/defaults";
-import { Input, CheckBox } from "../../../../forms/fields";
-
 import { Widget } from "../Widget";
-import { BooleanField } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
 
 const Meta = {
   icon: BsToggleOn,

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

@@ -1,10 +1,9 @@
+import { Color } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
 import { MdColorLens } from "react-icons/md";
-import { createDefaultWidgetValues } from "../../../../utils";
 
+import { createDefaultWidgetValues } from "../../../../utils";
 import { Widget } from "../Widget";
 
-import { Color } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
-
 /** {
   "type" : "Color",
   "config" : {

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

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

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

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

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

@@ -1,10 +1,9 @@
-import * as yup from "yup";
+import { GeoPoint } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
 import { MdPlace } from "react-icons/md";
+import * as yup from "yup";
 
 import { DefaultFields } from "../../../../forms/defaults";
-
 import { Widget } from "../Widget";
-import { GeoPoint } from "@prismicio/types-internal/lib/customtypes/widgets/nestable";
 
 /** : {
   "type" : "GeoPoint",

package/{lib → src/legacy/lib}/models/common/widgets/Group/Form.jsx

@@ -1,10 +1,10 @@
-import { Checkbox, Label, Box } from "theme-ui";
+import { Box, Checkbox, Label } from "theme-ui";
 
-import { Col, Flex as FlexGrid } from "@components/Flex";
-import { DefaultFields } from "@lib/forms/defaults";
-import WidgetFormField from "@lib/builders/common/EditModal/Field";
-import { CheckBox } from "@lib/forms/fields";
-import { createFieldNameFromKey } from "@lib/forms";
+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 { CheckBox } from "@/legacy/lib/forms/fields";
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const FormFields = {