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

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

@@ -3,17 +3,18 @@ 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 EmptyState from "./components/EmptyState";
+import NewField from "./Card/components/NewField";
+import { ZoneEmptyState } from "./components/ZoneEmptyState";
 
 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) */,
+  zoneTypeFormat /* format of the zone: page or custom */,
   tabId,
   title /* text info to display in Card Header */,
   fields /* widgets registered in the zone */,
@@ -30,6 +31,8 @@ const Zone = ({
   renderFieldAccessor /* render field accessor (eg. slice.primary.title) */,
   testId,
   isRepeatableCustomType,
+  emptyStateHeading,
+  emptyStateActionTestId,
 }) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const widgetsArrayWithCondUid = (() => {
@@ -62,12 +65,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 = () => {
@@ -115,7 +113,7 @@ const Zone = ({
                 color="grey"
                 disabled={newFieldData !== null}
               >
-                Add a new field
+                Add a field
               </Button>
             </>
           ) : undefined
@@ -126,13 +124,15 @@ const Zone = ({
       {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/strict-boolean-expressions
         fields.length === 0 && !newFieldData ? (
-          <BaseStyles>
-            <EmptyState
-              onEnterSelectMode={() => enterSelectMode()}
-              // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-              zoneName={isRepeatable ? "Repeatable" : "Static"}
-            />
-          </BaseStyles>
+          <ZoneEmptyState
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            zoneType={getResolvedZoneType(zoneType, zoneTypeFormat)}
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            heading={emptyStateHeading}
+            onActionClick={() => enterSelectMode()}
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            actionTestId={emptyStateActionTestId}
+          />
         ) : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/strict-boolean-expressions
         fields.length > 0 || newFieldData ? (
           <BaseStyles>
@@ -159,6 +159,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}
@@ -227,4 +229,20 @@ Zone.propTypes = {
   ),
 };
 
+/**
+ * Determines the resolved type of a given zone type.
+ *
+ * @param {"customType" | "slice"} zoneType - The type of the zone.
+ * @param {"page" | "custom"} [format] - The format of the zone type (if applicable).
+ *
+ * @returns {"custom type" | "page type" | "slice"}
+ */
+function getResolvedZoneType(zoneType, format) {
+  if (zoneType === "customType") {
+    return format === "page" ? "page type" : "custom type";
+  }
+
+  return zoneType;
+}
+
 export default Zone;

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 = {