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

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

@@ -1,28 +1,36 @@
-import { FC } from "react";
-import { flushSync } from "react-dom";
-import { DropResult } from "react-beautiful-dnd";
+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,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+} from "@prismicio/editor-ui";
 import {
   FieldType,
   NestableWidget,
 } from "@prismicio/types-internal/lib/customtypes";
-
-import { ensureDnDDestination } from "@lib/utils";
-import { transformKeyAccessor } from "@utils/str";
-import * as Widgets from "@lib/models/common/widgets";
-import sliceBuilderWidgetsArray from "@lib/models/common/widgets/sliceBuilderArray";
+import { telemetry } from "@src/apiClient";
 import { List } from "@src/components/List";
-import { WidgetsArea } from "@lib/models/common/Slice";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
 import {
   addField,
   deleteField,
+  deleteRepeatableZone,
   reorderField,
   updateField,
 } from "@src/domain/slice";
-import Zone from "@lib/builders/common/Zone";
-import EditModal from "@lib/builders/common/EditModal";
-import { AnyWidget } from "@lib/models/common/widgets/Widget";
-import { telemetry } from "@src/apiClient";
+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";
 
 const dataTipText = ` The non-repeatable zone
   is for fields<br/> that should appear once, like a<br/>
@@ -34,8 +42,28 @@ const dataTipText2 = `The repeatable zone is for a group<br/>
 
 const FieldZones: FC = () => {
   const { slice, setSlice, variation } = useSliceState();
+  const [
+    isDeleteRepeatableZoneDialogOpen,
+    setIsDeleteRepeatableZoneDialogOpen,
+  ] = useState(false);
+  const groupsInSlicesExperiment = useGroupsInSlicesExperiment();
+
+  // We won't show the Repeatable Zone if no items are configured.
+  const hasItems = Boolean(
+    variation.items && Object.keys(variation.items).length > 0,
+  );
 
   const _onDeleteItem = (widgetArea: WidgetsArea) => (key: string) => {
+    if (
+      groupsInSlicesExperiment.eligible &&
+      widgetArea === WidgetsArea.Items &&
+      variation.items &&
+      Object.keys(variation.items).length <= 1
+    ) {
+      setIsDeleteRepeatableZoneDialogOpen(true);
+      return;
+    }
+
     const newSlice = deleteField({
       slice,
       variationId: variation.id,
@@ -154,13 +182,20 @@ const FieldZones: FC = () => {
     flushSync(() => setSlice(newSlice));
   };
 
+  const onDeleteRepeatableZone = () => {
+    const newSlice = deleteRepeatableZone({ slice, variationId: variation.id });
+
+    setSlice(newSlice);
+    setIsDeleteRepeatableZoneDialogOpen(false);
+  };
+
   return (
     <List>
       <Zone
         zoneType="slice"
         zoneTypeFormat={undefined}
         tabId={undefined}
-        title="Non-Repeatable Zone"
+        title="Fields"
         dataTip={dataTipText}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         fields={variation.primary}
@@ -183,32 +218,61 @@ const FieldZones: FC = () => {
         testId="static-zone-content"
         isRepeatableCustomType={undefined}
       />
-      <Zone
-        zoneType="slice"
-        zoneTypeFormat={undefined}
-        tabId={undefined}
-        isRepeatable
-        title="Repeatable Zone"
-        dataTip={dataTipText2}
-        widgetsArray={sliceBuilderWidgetsArray}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        fields={variation.items}
-        EditModal={EditModal}
-        onDeleteItem={_onDeleteItem(WidgetsArea.Items)}
-        onSave={_onSave(WidgetsArea.Items)}
-        onSaveNewField={_onSaveNewField(WidgetsArea.Items)}
-        onDragEnd={_onDragEnd(WidgetsArea.Items)}
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        poolOfFieldsToCheck={variation.items || []}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-        renderHintBase={({ item }) => `item${transformKeyAccessor(item.key)}`}
-        renderFieldAccessor={(key) =>
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          `slice.items[i]${transformKeyAccessor(key)}`
-        }
-        testId="slice-repeatable-zone"
-        isRepeatableCustomType={undefined}
-      />
+      {!groupsInSlicesExperiment.eligible || hasItems ? (
+        <Zone
+          zoneType="slice"
+          zoneTypeFormat={undefined}
+          tabId={undefined}
+          isRepeatable
+          title="Repeatable Zone"
+          dataTip={dataTipText2}
+          widgetsArray={sliceBuilderWidgetsArray}
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          fields={variation.items}
+          EditModal={EditModal}
+          onDeleteItem={_onDeleteItem(WidgetsArea.Items)}
+          onSave={_onSave(WidgetsArea.Items)}
+          onSaveNewField={_onSaveNewField(WidgetsArea.Items)}
+          onDragEnd={_onDragEnd(WidgetsArea.Items)}
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          poolOfFieldsToCheck={variation.items || []}
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+          renderHintBase={({ item }) => `item${transformKeyAccessor(item.key)}`}
+          renderFieldAccessor={(key) =>
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            `slice.items[i]${transformKeyAccessor(key)}`
+          }
+          testId="slice-repeatable-zone"
+          isRepeatableCustomType={undefined}
+        />
+      ) : null}
+      <Dialog
+        size="small"
+        open={isDeleteRepeatableZoneDialogOpen}
+        onOpenChange={(open) => setIsDeleteRepeatableZoneDialogOpen(open)}
+      >
+        <DialogHeader icon="delete" title="Delete field" />
+        <DialogContent>
+          <Box padding={24} gap={12} flexDirection="column">
+            <strong>
+              This action will permanently remove the Repeatable Zone from the{" "}
+              {slice.model.name} slice.
+            </strong>
+            <div>
+              If you need repeatable fields again, use a repeatable group field
+              in place of the repeatable zone.
+            </div>
+          </Box>
+          <DialogActions
+            ok={{
+              text: "Delete",
+              color: "tomato",
+              onClick: () => onDeleteRepeatableZone(),
+            }}
+            cancel={{ text: "Cancel" }}
+          />
+        </DialogContent>
+      </Dialog>
     </List>
   );
 };

package/lib/builders/SliceBuilder/Sidebar/AddVariationModal.tsx

@@ -1,13 +1,12 @@
-import React, { useEffect, useState } from "react";
-import Select from "react-select";
-import { Formik, Form, Field } from "formik";
-import { Button, Box } from "@prismicio/editor-ui";
-import { Text, Label, Input } from "theme-ui";
-import { camelCase } from "lodash";
-
-import SliceMachineModal from "@components/SliceMachineModal";
 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";
+import React, { useEffect, useState } from "react";
+import Select from "react-select";
+import { Input, Label, Text } from "theme-ui";
 
 const Error = ({ msg }: { msg?: string }) => (
   <Text as="span" sx={{ fontSize: 12, color: "error", mt: "5px", ml: 2 }}>

package/lib/builders/SliceBuilder/Sidebar/index.tsx

@@ -1,20 +1,19 @@
-import { Box, Button, Gradient } from "@prismicio/editor-ui";
-import { useRouter } from "next/router";
-import { type FC, useState } from "react";
-import { toast } from "react-toastify";
-
 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 { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
-import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
-import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
+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";
 
 type DialogState =
   | { type: "ADD_VARIATION"; variation?: undefined; loading?: boolean }

package/lib/builders/SliceBuilder/SimulatorButton/index.tsx

@@ -1,17 +1,6 @@
-import { Button, tokens } from "@prismicio/editor-ui";
-import React, { PropsWithChildren, useEffect, useRef } from "react";
-
 import { SIMULATOR_WINDOW_ID, VIDEO_SIMULATOR_TOOLTIP } from "@lib/consts";
-import { useRouter } from "next/router";
-import ReactTooltip from "react-tooltip";
-
-import { PlayCircleIcon } from "@src/icons/PlayCircleIcon";
-import { userHasSeenSimulatorToolTip } from "@src/modules/userContext";
-import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { Button, tokens } from "@prismicio/editor-ui";
 import { telemetry } from "@src/apiClient";
-
 import {
   HoverCard,
   HoverCardCloseButton,
@@ -19,6 +8,14 @@ import {
   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";
 
 const SimulatorOnboardingTooltip: React.FC<
   PropsWithChildren<{

package/lib/builders/SliceBuilder/index.tsx

@@ -1,9 +1,3 @@
-import { Box } from "@prismicio/editor-ui";
-import { type FC } from "react";
-
-import FieldZones from "./FieldZones";
-import { Sidebar } from "./Sidebar";
-
 import SimulatorButton from "@builders/SliceBuilder/SimulatorButton";
 import {
   AppLayout,
@@ -13,9 +7,15 @@ import {
   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 { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
+import { type FC } from "react";
+
+import FieldZones from "./FieldZones";
+import { Sidebar } from "./Sidebar";
 
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
@@ -24,7 +24,10 @@ export const SliceBuilder: FC = () => {
     <AppLayout>
       <AppLayoutHeader>
         <AppLayoutBackButton url="/slices" />
-        <AppLayoutBreadcrumb folder="Slices" page={slice.model.name} />
+        <AppLayoutBreadcrumb>
+          <BreadcrumbItem>Slices</BreadcrumbItem>
+          <BreadcrumbItem active>{slice.model.name}</BreadcrumbItem>
+        </AppLayoutBreadcrumb>
         <AppLayoutActions>
           <AutoSaveStatusIndicator status={actionQueueStatus} />
           <SimulatorButton disabled={actionQueueStatus !== "done"} />

package/lib/builders/common/EditModal/Field.jsx

@@ -1,16 +1,13 @@
-import { Fragment } from "react";
-
 import { useField } from "formik";
+import { Fragment } from "react";
+import { Box } from "theme-ui";
 
 import {
   FormFieldCheckbox,
   FormFieldInput,
 } from "../../../../components/FormFields";
-
 import { FormTypes } from "../../../forms/types";
 
-import { Box } from "theme-ui";
-
 const WidgetFormField = ({ fieldName, formField, fields, initialValues }) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   const [field, meta, helpers] = useField(fieldName);

package/lib/builders/common/EditModal/Form.jsx

@@ -1,5 +1,5 @@
+import { Form, Formik } from "formik";
 import { memo } from "react";
-import { Formik, Form } from "formik";
 import { Box } from "theme-ui";
 
 const WidgetForm = ({

package/lib/builders/common/EditModal/index.jsx

@@ -1,24 +1,18 @@
-import Modal from "react-modal";
-import SliceMachineModal from "@components/SliceMachineModal";
-
-import { Box, Close, Flex, Button, useThemeUI } from "theme-ui";
-
-import * as yup from "yup";
-import * as Widgets from "@lib/models/common/widgets/withGroup";
-
-import { createInitialValues, createFieldNameFromKey } from "@lib/forms";
-
 import Card from "@components/Card/WithTabs";
+import { Col, Flex as FlexGrid } from "@components/Flex";
 import ItemHeader from "@components/ItemHeader";
-import { Flex as FlexGrid, Col } from "@components/Flex";
-
-import WidgetForm from "./Form";
-import WidgetFormField from "./Field";
-
-import { findWidgetByConfigOrType } from "../../utils";
+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 { DeprecatedMockConfigMessage } from "@lib/models/common/DeprecatedMockConfigMessage";
+import { findWidgetByConfigOrType } from "../../utils";
+import WidgetFormField from "./Field";
+import WidgetForm from "./Form";
 
 if (process.env.NODE_ENV !== "test") {
   Modal.setAppElement("#__next");

package/lib/builders/common/SelectFieldTypeModal/index.jsx

@@ -1,11 +1,9 @@
-import Modal from "react-modal";
+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 "@components/Card";
-import { Flex as FlexGrid, Col } from "@components/Flex";
-
 import FieldTypeCard from "./FieldTypeCard";
 
 if (process.env.NODE_ENV !== "test") {

package/lib/builders/common/Zone/Card/components/ErrorTooltip.tsx

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

package/lib/builders/common/Zone/Card/components/Hints/CodeBlock.tsx

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

package/lib/builders/common/Zone/Card/components/Hints/index.tsx

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

package/lib/builders/common/Zone/Card/components/NewField.tsx

@@ -1,22 +1,21 @@
-import { Ref, SetStateAction, useEffect, useRef, useState } from "react";
-import { Formik, Form, Field } from "formik";
-import { Input, Flex, Text, useThemeUI } from "theme-ui";
-import * as CSS from "csstype";
-import { AnyObjectSchema } from "yup";
-import { Button } from "@prismicio/editor-ui";
-
-import { validateId } from "@lib/forms/defaults";
+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 { AnyWidget } from "@lib/models/common/widgets/Widget";
+import { Button } from "@prismicio/editor-ui";
+import * as CSS from "csstype";
+import { Field, Form, Formik } from "formik";
+import { Ref, SetStateAction, useEffect, useRef, useState } from "react";
+import { Flex, Input, Text, useThemeUI } from "theme-ui";
+import { AnyObjectSchema } from "yup";
 
 import { ErrorTooltip } from "./ErrorTooltip";
-import { InputType } from "@lib/forms/fields";
-import {
-  getInputFieldStyles,
-  InputFieldStyles,
-} from "@components/FormFields/Input";
 
 interface NewField {
   widgetTypeName: string;

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

@@ -1,9 +1,8 @@
-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 { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { Box, Text } from "theme-ui";
 
 import { findWidgetByConfigOrType } from "../../../utils";
 import Hint from "./components/Hints";

package/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/builders/common/Zone/index.jsx

@@ -1,14 +1,13 @@
 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 { ListHeader } from "@src/components/List";
-import { telemetry } from "@src/apiClient";
-
 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 = ({

package/lib/forms/defaults.ts

@@ -1,5 +1,5 @@
-import { Input, InputType } from "./fields";
 import { API_ID_REGEX } from "../consts";
+import { Input, InputType } from "./fields";
 
 export const validateId = ({
   value,

package/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/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/models/common/ComponentUI.ts

@@ -1,5 +1,5 @@
-import { VariationSM } from "./Slice";
 import { Component, Screenshot } from "./Library";
+import { VariationSM } from "./Slice";
 
 export const createScreenshotUI = (screenshot: Screenshot): ScreenshotUI => ({
   hash: screenshot.hash,

package/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/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/models/common/CustomType/tab.ts

@@ -1,14 +1,14 @@
-import * as t from "io-ts";
 import {
-  NestableWidget,
   DynamicSection,
-  DynamicWidget,
   DynamicSlices,
+  DynamicWidget,
   Group,
+  NestableWidget,
   UID,
 } from "@prismicio/types-internal/lib/customtypes";
-import { Groups, GroupSM } from "../Group";
+import * as t from "io-ts";
 
+import { Groups, GroupSM } from "../Group";
 import { SlicesSM, SliceZone } from "../Slices";
 
 export const TabFields = t.array(

package/lib/models/common/DeprecatedMockConfigMessage.tsx

@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { Box, Button, Text } from "theme-ui";
 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";
 
 export const DeprecatedMockConfigMessage = () => {
   const router = useRouter();

package/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/models/common/Fields.ts

@@ -1,5 +1,5 @@
-import * as t from "io-ts";
 import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
+import * as t from "io-ts";
 
 export const FieldsSM = t.array(
   t.type({ key: t.string, value: NestableWidget }),

package/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({