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

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

@@ -1,10 +1,3 @@
-import { FC, useState } from "react";
-import { flushSync } from "react-dom";
-import { DropResult } from "react-beautiful-dnd";
-import {
-  FieldType,
-  NestableWidget,
-} from "@prismicio/types-internal/lib/customtypes";
 import {
   Box,
   Dialog,
@@ -12,26 +5,34 @@ import {
   DialogContent,
   DialogHeader,
 } from "@prismicio/editor-ui";
+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 { 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 { List } from "@src/components/List";
-import { WidgetsArea } from "@lib/models/common/Slice";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
+import { telemetry } from "@/apiClient";
+import { List } from "@/components/List";
 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 { useGroupsInSlicesExperiment } from "@src/features/slices/sliceBuilder/useGroupsInSlicesExperiment";
+} from "@/domain/slice";
+import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
+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/>
@@ -47,7 +48,6 @@ const FieldZones: FC = () => {
     isDeleteRepeatableZoneDialogOpen,
     setIsDeleteRepeatableZoneDialogOpen,
   ] = useState(false);
-  const groupsInSlicesExperiment = useGroupsInSlicesExperiment();
 
   // We won't show the Repeatable Zone if no items are configured.
   const hasItems = Boolean(
@@ -56,7 +56,6 @@ const FieldZones: FC = () => {
 
   const _onDeleteItem = (widgetArea: WidgetsArea) => (key: string) => {
     if (
-      groupsInSlicesExperiment.eligible &&
       widgetArea === WidgetsArea.Items &&
       variation.items &&
       Object.keys(variation.items).length <= 1
@@ -109,34 +108,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 +132,8 @@ const FieldZones: FC = () => {
         variationId: variation.id,
         widgetArea,
         newFieldId: id,
-        newField,
+        newField:
+          newField.type === GroupFieldType ? Groups.fromSM(newField) : newField,
       });
 
       setSlice(newSlice);
@@ -155,9 +142,9 @@ const FieldZones: FC = () => {
         event: "field:added",
         id,
         name: label,
-        type: widgetTypeName,
+        type: newField.type,
         isInAGroup: false,
-        contentType: "slice",
+        contentType: getContentTypeForTracking(window.location.pathname),
       });
     };
 
@@ -218,8 +205,10 @@ const FieldZones: FC = () => {
         }
         testId="static-zone-content"
         isRepeatableCustomType={undefined}
+        emptyStateHeading={undefined}
+        emptyStateActionTestId="add-Static-field"
       />
-      {!groupsInSlicesExperiment.eligible || hasItems ? (
+      {hasItems ? (
         <Zone
           zoneType="slice"
           zoneTypeFormat={undefined}
@@ -227,7 +216,7 @@ const FieldZones: FC = () => {
           isRepeatable
           title="Repeatable Zone"
           dataTip={dataTipText2}
-          widgetsArray={sliceBuilderWidgetsArray}
+          widgetsArray={groupBuilderWidgetsArray}
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           fields={variation.items}
           EditModal={EditModal}
@@ -245,6 +234,8 @@ const FieldZones: FC = () => {
           }
           testId="slice-repeatable-zone"
           isRepeatableCustomType={undefined}
+          emptyStateHeading="No fields"
+          emptyStateActionTestId="add-Repeatable-field"
         />
       ) : null}
       <Dialog
@@ -256,12 +247,12 @@ const FieldZones: FC = () => {
         <DialogContent>
           <Box padding={24} gap={12} flexDirection="column">
             <strong>
-              This action will permanently remove the Repeatable Zone from the{" "}
+              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.
+              To reimplement repeatable fields later, use a group field instead
+              of the repeatable zone.
             </div>
           </Box>
           <DialogActions

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

@@ -1,24 +1,25 @@
 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 React, { PropsWithChildren, useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import { SliceMachineStoreType } from "@src/redux/type";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { telemetry } from "@src/apiClient";
+import ReactTooltip from "react-tooltip";
 
+import { telemetry } from "@/apiClient";
 import {
   HoverCard,
   HoverCardCloseButton,
   HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
-} from "@src/components/HoverCard";
+} 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/builders/SliceBuilder/Sidebar → src/legacy/lib/builders/SliceBuilder/VariationsList}/AddVariationModal.tsx

@@ -1,13 +1,13 @@
+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 { Formik, Form, Field } from "formik";
-import { Button, Box } from "@prismicio/editor-ui";
-import { Text, Label, Input } from "theme-ui";
-import { camelCase } from "lodash";
+import { Input, Label, Text } from "theme-ui";
 
-import SliceMachineModal from "@components/SliceMachineModal";
-import Card from "@components/Card/Default";
-import { VariationSM } from "@lib/models/common/Slice";
+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 }}>

package/src/legacy/lib/builders/SliceBuilder/VariationsList/VariationsList.module.css

@@ -0,0 +1,10 @@
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hideScrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hideScrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

package/src/legacy/lib/builders/SliceBuilder/VariationsList/VariationsList.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "hideScrollbar": string;
+};
+export = styles;
+

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

@@ -0,0 +1,253 @@
+import { Box, Button, Gradient, Text, theme } from "@prismicio/editor-ui";
+import { useRouter } from "next/router";
+import { type Dispatch, type FC, type SetStateAction, useState } from "react";
+import { toast } from "react-toastify";
+
+import { updateSlice } from "@/apiClient";
+import { Divider } from "@/components/Divider";
+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 {
+  type Payload,
+  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/VariationsList/AddVariationModal";
+import type { VariationSM } from "@/legacy/lib/models/common/Slice";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+import styles from "./VariationsList.module.css";
+
+type DialogState =
+  | { type: "ADD_VARIATION"; variation?: undefined; loading?: boolean }
+  | { type: "RENAME_VARIATION"; variation: VariationSM; loading?: boolean }
+  | { type: "DELETE_VARIATION"; variation: VariationSM; loading?: boolean }
+  | undefined;
+
+type VariationsListProps = {
+  horizontalScroll: boolean;
+};
+
+export const VariationsList: FC<VariationsListProps> = (props) => {
+  const { horizontalScroll = false } = props;
+  const { slice, variation, setSlice } = useSliceState();
+  const [dialog, setDialog] = useState<DialogState>();
+  const screenshotChangesModal = useScreenshotChangesModal();
+  const { sliceFilterFn, defaultVariationSelector, onUploadSuccess } =
+    screenshotChangesModal.modalPayload;
+  const router = useRouter();
+  const { saveSliceSuccess } = useSliceMachineActions();
+
+  const variationCount = slice.model.variations.length;
+
+  return (
+    <>
+      <Box flexDirection="column" gap={16}>
+        {horizontalScroll ? (
+          <>
+            <Divider variant="edgeFaded" color="grey6" />
+            <Box justifyContent="space-between">
+              <Text color="grey11">
+                {variationCount} variation{variationCount !== 1 && "s"}
+              </Text>
+              <Button
+                onClick={() => {
+                  setDialog({ type: "ADD_VARIATION" });
+                }}
+                startIcon="add"
+                color="grey"
+              />
+            </Box>
+            <div
+              className={styles.hideScrollbar}
+              style={{
+                height: "240px",
+                position: "relative",
+                marginRight: "-32px",
+                overflowX: "scroll",
+                scrollSnapType: "x mandatory",
+              }}
+            >
+              <div
+                style={{
+                  position: "absolute",
+                  paddingRight: "32px",
+                }}
+              >
+                <Box flexDirection="row" gap={16}>
+                  <SharedSliceCards
+                    screenshotChangesModal={screenshotChangesModal}
+                    setDialog={setDialog}
+                    width={320}
+                  />
+                </Box>
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            <SharedSliceCards
+              screenshotChangesModal={screenshotChangesModal}
+              setDialog={setDialog}
+            />
+            {/*
+             * As `PageLayoutContent` has a `16px` bottom padding, we need to apply
+             * an equal negative margin to the `div` if we want it to sit flush with
+             * the bottom of the page.
+             * TODO(PBD-1080): write the new `ScrollAreaEndGradient` component
+             * instead of using a `div`.
+             */}
+            <div
+              style={{
+                bottom: theme.space[0],
+                marginBottom: `-${theme.space[16]}`,
+                position: "sticky",
+              }}
+            >
+              <Box
+                backgroundColor="grey2"
+                flexDirection="column"
+                padding={{ bottom: 40, inline: 24 }}
+              >
+                <Gradient sx={{ left: 0, position: "absolute", right: 0 }} />
+                <Button
+                  color="grey"
+                  onClick={() => {
+                    setDialog({ type: "ADD_VARIATION" });
+                  }}
+                  startIcon="add"
+                  // Set `position` to `relative` to position `Button` on top of
+                  // `Gradient`.
+                  sx={{ position: "relative" }}
+                >
+                  Add a new variation
+                </Button>
+              </Box>
+            </div>
+          </>
+        )}
+      </Box>
+      <ScreenshotChangesModal
+        slices={sliceFilterFn([slice])}
+        defaultVariationSelector={defaultVariationSelector}
+        onUploadSuccess={onUploadSuccess}
+      />
+      <RenameVariationModal
+        isOpen={dialog?.type === "RENAME_VARIATION"}
+        onClose={() => {
+          setDialog(undefined);
+        }}
+        slice={slice}
+        variation={dialog?.variation}
+      />
+      <DeleteVariationModal
+        isOpen={dialog?.type === "DELETE_VARIATION"}
+        onClose={() => {
+          setDialog(undefined);
+        }}
+        slice={slice}
+        variation={dialog?.variation}
+      />
+      <AddVariationModal
+        initialVariation={variation}
+        isOpen={dialog?.type === "ADD_VARIATION"}
+        onClose={() => {
+          setDialog(undefined);
+        }}
+        onSubmit={async (id, name, copiedVariation) => {
+          try {
+            const { slice: newSlice, variation: newVariation } =
+              copySliceVariation({ slice, id, name, copiedVariation });
+
+            await updateSlice(newSlice);
+            saveSliceSuccess(newSlice);
+            setSlice(newSlice);
+
+            const url = SLICES_CONFIG.getBuilderPagePathname({
+              libraryName: newSlice.href,
+              sliceName: newSlice.model.name,
+              variationId: newVariation.id,
+            });
+
+            void router.replace(url);
+          } catch (error) {
+            const message = `Could not add variation \`${name}\``;
+            console.error(message, error);
+
+            toast.error(message);
+          }
+        }}
+        variations={slice.model.variations}
+      />
+    </>
+  );
+};
+
+type SharedSliceCardsProps = {
+  screenshotChangesModal: Payload;
+  setDialog: Dispatch<SetStateAction<DialogState>>;
+  width?: 320;
+};
+
+export const SharedSliceCards = (props: SharedSliceCardsProps) => {
+  const { screenshotChangesModal, setDialog, width } = props;
+  const { slice, variation, setSlice } = useSliceState();
+
+  const defaultCardStyle = { scrollSnapAlign: "start" };
+
+  return (
+    <>
+      {slice.model.variations.map((v) => (
+        <div
+          style={
+            width !== undefined
+              ? { ...defaultCardStyle, width }
+              : defaultCardStyle
+          }
+        >
+          <SharedSliceCard
+            action={{
+              type: "menu",
+              onRename: () => {
+                setDialog({
+                  type: "RENAME_VARIATION",
+                  variation: v,
+                });
+              },
+              onRemove: () => {
+                setDialog({
+                  type: "DELETE_VARIATION",
+                  variation: v,
+                });
+              },
+              removeDisabled: slice.model.variations.length <= 1,
+            }}
+            key={v.id}
+            mode="navigation"
+            onUpdateScreenshot={() => {
+              screenshotChangesModal.onOpenModal({
+                sliceFilterFn: (s) => s,
+                defaultVariationSelector: {
+                  sliceID: slice.model.id,
+                  variationID: v.id,
+                },
+                onUploadSuccess: (newSlice) => {
+                  setSlice(newSlice);
+                },
+              });
+            }}
+            replace
+            selected={v.id === variation.id}
+            slice={slice}
+            variant="outlined"
+            variationId={v.id}
+          />
+        </div>
+      ))}
+    </>
+  );
+};

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

@@ -1,10 +1,10 @@
-import { Box } from "@prismicio/editor-ui";
+import { Box, useMediaQuery } from "@prismicio/editor-ui";
 import { type FC } from "react";
 
-import FieldZones from "./FieldZones";
-import { Sidebar } from "./Sidebar";
-
-import SimulatorButton from "@builders/SliceBuilder/SimulatorButton";
+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,
@@ -12,14 +12,19 @@ import {
   AppLayoutBreadcrumb,
   AppLayoutContent,
   AppLayoutHeader,
-} from "@components/AppLayout";
-import { BreadcrumbItem } from "@src/components/Breadcrumb";
-import { FloatingBackButton } from "@src/features/slices/sliceBuilder/FloatingBackButton";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
-import { AutoSaveStatusIndicator } from "@src/features/autoSave/AutoSaveStatusIndicator";
+} from "@/legacy/components/AppLayout";
+import SimulatorButton from "@/legacy/lib/builders/SliceBuilder/SimulatorButton";
+
+import FieldZones from "./FieldZones";
+import { VariationsList } from "./VariationsList";
 
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
+  const horizontalScroll = useMediaQuery({ max: "medium" });
+
+  const contentDisplayProps = horizontalScroll
+    ? { gridTemplateRows: "304px 1fr" }
+    : { gridTemplateColumns: "320px 1fr" };
 
   return (
     <AppLayout>
@@ -36,12 +41,12 @@ export const SliceBuilder: FC = () => {
       </AppLayoutHeader>
       <AppLayoutContent>
         <Box
-          alignItems="flex-start"
           display="grid"
+          alignItems="flex-start"
           gap={16}
-          gridTemplateColumns="320px 1fr"
+          {...contentDisplayProps}
         >
-          <Sidebar />
+          <VariationsList horizontalScroll={horizontalScroll} />
           <FieldZones />
         </Box>
         <FloatingBackButton />

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

@@ -1,16 +1,14 @@
-import { Fragment } from "react";
-
 import { useField } from "formik";
+import { Fragment } from "react";
+import { Box } from "theme-ui";
 
 import {
   FormFieldCheckbox,
   FormFieldInput,
-} from "../../../../components/FormFields";
+} from "@/legacy/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 → src/legacy/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 → src/legacy/lib}/builders/common/EditModal/index.jsx

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

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

@@ -1,10 +1,9 @@
 import Modal from "react-modal";
-import SliceMachineModal from "@components/SliceMachineModal";
-
 import { Close, Flex, Heading } from "theme-ui";
 
-import Card from "@components/Card";
-import { Flex as FlexGrid, Col } from "@components/Flex";
+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";
 

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

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