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

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

@@ -0,0 +1,273 @@
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  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 { telemetry } from "@/apiClient";
+import { List } from "@/components/List";
+import {
+  addField,
+  deleteField,
+  deleteRepeatableZone,
+  reorderField,
+  updateField,
+} 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/>
+  section title.
+`;
+const dataTipText2 = `The repeatable zone is for a group<br/>
+  of fields that you want to be able to repeat an<br/>
+  indeterminate number of times, like FAQs`;
+
+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,
+      widgetArea,
+      fieldId: key,
+    });
+
+    setSlice(newSlice);
+  };
+
+  const _onSave =
+    (widgetArea: WidgetsArea) =>
+    ({
+      apiId: previousKey,
+      newKey,
+      value,
+    }: {
+      apiId: string;
+      newKey: string;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      value: any;
+    }) => {
+      const newSlice = updateField({
+        slice,
+        variationId: variation.id,
+        widgetArea,
+        previousFieldId: previousKey,
+        newFieldId: newKey,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        newField: value,
+      });
+
+      setSlice(newSlice);
+    };
+
+  const _onSaveNewField =
+    (widgetArea: WidgetsArea) =>
+    ({
+      id,
+      label,
+      widgetTypeName,
+    }: {
+      id: string;
+      label: string;
+      widgetTypeName: keyof typeof Widgets;
+    }) => {
+      const widget = sliceBuilderWidgetsArray.find(
+        (sliceBuilderWidget) =>
+          sliceBuilderWidget.CUSTOM_NAME === widgetTypeName ||
+          sliceBuilderWidget.TYPE_NAME === widgetTypeName,
+      );
+      if (!widget) {
+        throw new Error(`Unsupported Field Type: ${widgetTypeName}`);
+      }
+
+      const newField = widget.create(label) as SlicePrimaryFieldSM;
+
+      try {
+        widget.schema.validateSync(newField, { stripUnknown: false });
+      } catch (error) {
+        throw new Error(`Model is invalid for widget "${newField.type}".`);
+      }
+
+      const newSlice = addField({
+        slice,
+        variationId: variation.id,
+        widgetArea,
+        newFieldId: id,
+        newField:
+          newField.type === GroupFieldType ? Groups.fromSM(newField) : newField,
+      });
+
+      setSlice(newSlice);
+
+      void telemetry.track({
+        event: "field:added",
+        id,
+        name: label,
+        type: newField.type,
+        isInAGroup: false,
+        contentType: getContentTypeForTracking(window.location.pathname),
+      });
+    };
+
+  const _onDragEnd = (widgetArea: WidgetsArea) => (result: DropResult) => {
+    if (ensureDnDDestination(result)) return;
+
+    const { source, destination } = result;
+    if (!destination) {
+      return;
+    }
+
+    const newSlice = reorderField({
+      slice,
+      variationId: variation.id,
+      widgetArea,
+      sourceIndex: source.index,
+      destinationIndex: destination.index,
+    });
+
+    // When removing redux and replacing it by a simple useState, react-beautiful-dnd (that is deprecated library) was making the fields flickering on reorder.
+    // The problem seems to come from the react non-synchronous way to handle our state update that didn't work well with the library.
+    // It's a hack and since it's used on an old pure JavaScript code with a deprecated library it will be removed when updating the UI of the fields.
+    flushSync(() => setSlice(newSlice));
+  };
+
+  const onDeleteRepeatableZone = () => {
+    const newSlice = deleteRepeatableZone({ slice, variationId: variation.id });
+
+    setSlice(newSlice);
+    setIsDeleteRepeatableZoneDialogOpen(false);
+  };
+
+  return (
+    <List>
+      <Zone
+        zoneType="slice"
+        tabId={undefined}
+        title="Fields"
+        dataTip={dataTipText}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        fields={variation.primary}
+        EditModal={EditModal}
+        widgetsArray={
+          groupsInSlicesExperiment.eligible
+            ? sliceBuilderWidgetsArray
+            : groupBuilderWidgetsArray
+        }
+        onDeleteItem={_onDeleteItem(WidgetsArea.Primary)}
+        onSave={_onSave(WidgetsArea.Primary)}
+        onSaveNewField={_onSaveNewField(WidgetsArea.Primary)}
+        onDragEnd={_onDragEnd(WidgetsArea.Primary)}
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        poolOfFieldsToCheck={variation.primary || []}
+        renderHintBase={({ item }) =>
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+          `slice.primary${transformKeyAccessor(item.key)}`
+        }
+        renderFieldAccessor={(key) =>
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          `slice.primary${transformKeyAccessor(key)}`
+        }
+        testId="static-zone-content"
+        isRepeatableCustomType={undefined}
+      />
+      {!groupsInSlicesExperiment.eligible || hasItems ? (
+        <Zone
+          zoneType="slice"
+          tabId={undefined}
+          isRepeatable
+          title="Repeatable Zone"
+          dataTip={dataTipText2}
+          widgetsArray={groupBuilderWidgetsArray}
+          // 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>
+              To reimplement repeatable fields later, use a group field instead
+              of the repeatable zone.
+            </div>
+          </Box>
+          <DialogActions
+            ok={{
+              text: "Delete",
+              color: "tomato",
+              onClick: () => onDeleteRepeatableZone(),
+            }}
+            cancel={{ text: "Cancel" }}
+          />
+        </DialogContent>
+      </Dialog>
+    </List>
+  );
+};
+
+export default FieldZones;

package/{lib → src/legacy/lib}/builders/SliceBuilder/Sidebar/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/{lib → src/legacy/lib}/builders/SliceBuilder/Sidebar/index.tsx

@@ -1,20 +1,20 @@
-import { Box, Button, Gradient } from "@prismicio/editor-ui";
+import { Box, Button, Gradient, theme } 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 { updateSlice } from "@src/apiClient";
-import { copySliceVariation } from "@src/domain/slice";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+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 }
@@ -73,32 +73,40 @@ export const Sidebar: FC = () => {
             variationId={v.id}
           />
         ))}
-        <Box
-          backgroundColor="grey2"
-          bottom={0}
-          flexDirection="column"
-          padding={{ bottom: 40, inline: 24 }}
-          position="sticky"
-          // As `PageLayoutContent` has a `16px` bottom padding, we need to
-          // apply an equal negative margin to the `Box` if we want it to sit
-          // flush with the bottom of the page.
-          // @ts-expect-error TODO(PBD-1080): write the new `ScrollAreaEndGradient` component instead of using a `Box`.
-          style={{ marginBottom: "-16px" }}
+        {/*
+         * 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",
+          }}
         >
-          <Gradient sx={{ left: 0, position: "absolute", right: 0 }} />
-          <Button
-            onClick={() => {
-              setDialog({ type: "ADD_VARIATION" });
-            }}
-            startIcon="add"
-            // Set `position` to `relative` to position `Button` on top of
-            // `Gradient`.
-            sx={{ position: "relative" }}
-            color="grey"
+          <Box
+            backgroundColor="grey2"
+            flexDirection="column"
+            padding={{ bottom: 40, inline: 24 }}
           >
-            Add a new variation
-          </Button>
-        </Box>
+            <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])}

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 → src/legacy/lib}/builders/SliceBuilder/index.tsx

@@ -1,10 +1,10 @@
 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 { 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,10 +12,11 @@ import {
   AppLayoutBreadcrumb,
   AppLayoutContent,
   AppLayoutHeader,
-} from "@components/AppLayout";
-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 { Sidebar } from "./Sidebar";
 
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
@@ -24,7 +25,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 → 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;

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

@@ -1,12 +1,11 @@
+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 { Box, Button, Flex, Text, useThemeUI } from "theme-ui";
 
-import { NestableWidget, UID } from "@prismicio/types-internal/lib/customtypes";
+import Code from "@/legacy/components/CodeBlock";
 
 const buttonIconStyle: React.CSSProperties = {
   position: "relative",

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

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

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

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