slice-machine-ui 1.22.3-beta.1 → 1.22.3-beta.3

package/components/DeleteVariationModal/index.tsx

@@ -7,21 +7,19 @@ import {
   Text,
 } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
-import type { Dispatch, FC, PropsWithChildren, SetStateAction } from "react";
+import { useState, type FC, type PropsWithChildren } from "react";
 
-import type { SliceBuilderState } from "@builders/SliceBuilder";
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM } from "@lib/models/common/Slice";
 import { deleteVariation } from "@src/features/slices/sliceBuilder/actions/deleteVariation";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
 
 type DeleteVariationModalProps = {
   isOpen: boolean;
   onClose: () => void;
   slice: ComponentUI;
   variation: VariationSM | undefined;
-  sliceBuilderState: SliceBuilderState;
-  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
 };
 
 export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
@@ -29,11 +27,12 @@ export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
   onClose,
   slice,
   variation,
-  sliceBuilderState,
-  setSliceBuilderState,
 }) => {
   const router = useRouter();
-  const { updateAndSaveSlice } = useSliceMachineActions();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { saveSliceSuccess } = useSliceMachineActions();
+  const { setSlice } = useSliceState();
+
   return (
     <Dialog
       open={isOpen}
@@ -56,19 +55,21 @@ export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
               onClick: () => {
                 if (!variation) return;
                 void (async () => {
+                  setIsDeleting(true);
                   try {
-                    await deleteVariation({
+                    const newSlice = await deleteVariation({
                       component: slice,
                       router,
-                      setSliceBuilderState,
-                      updateAndSaveSlice,
+                      saveSliceSuccess,
                       variation,
                     });
+                    setSlice(newSlice);
                   } catch {}
+                  setIsDeleting(false);
                   onClose();
                 })();
               },
-              loading: sliceBuilderState.loading,
+              loading: isDeleting,
             }}
             cancel={{ text: "Cancel" }}
             size="medium"

package/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -15,10 +15,7 @@ import { InputBox } from "../components/InputBox";
 
 type CreateSliceModalProps = {
   onClose: () => void;
-  onSuccess: (
-    newSlice: SharedSlice,
-    libraryName: string,
-  ) => Promise<void> | void;
+  onSuccess: (newSlice: SharedSlice, libraryName: string) => void;
   localLibraries: readonly LibraryUI[];
   remoteSlices: ReadonlyArray<SliceSM>;
 };
@@ -49,7 +46,7 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         // Update Redux store
         createSliceSuccess(serverState.libraries);
 
-        await onSuccess(newSlice, libraryName);
+        onSuccess(newSlice, libraryName);
       },
     });
   };

package/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx

@@ -6,8 +6,8 @@ import { InputBox } from "../components/InputBox";
 import { useSelector } from "react-redux";
 import { SliceMachineStoreType } from "@src/redux/type";
 import { FormikErrors } from "formik";
-import { selectAllCustomTypeLabels } from "@src/modules/availableCustomTypes";
 
+import { selectAllCustomTypeLabels } from "@src/modules/availableCustomTypes";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
@@ -19,6 +19,7 @@ interface RenameCustomTypeModalProps {
   customType: CustomType;
   format: CustomTypeFormat;
   onClose: () => void;
+  setLocalCustomType?: (customType: CustomType) => void;
 }
 
 export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
@@ -26,18 +27,21 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
   customType,
   format,
   onClose,
+  setLocalCustomType,
 }) => {
   const customTypeName = customType?.label ?? "";
   const customTypeId = customType?.id ?? "";
-  const { renameAvailableCustomTypeSuccess, renameSelectedCustomType } =
-    useSliceMachineActions();
+  const { renameAvailableCustomTypeSuccess } = useSliceMachineActions();
 
   const [isRenaming, setIsRenaming] = useState(false);
 
   const handleOnSubmit = async (values: { customTypeName: string }) => {
     setIsRenaming(true);
-    if (isChangesLocal) {
-      renameSelectedCustomType(values.customTypeName);
+    if (isChangesLocal && setLocalCustomType) {
+      setLocalCustomType({
+        ...customType,
+        label: values.customTypeName,
+      });
     } else {
       await renameCustomType({
         model: customType,

package/components/Forms/RenameVariationModal/RenameVariationModal.tsx

@@ -8,23 +8,21 @@ import {
   Text,
 } from "@prismicio/editor-ui";
 import { Formik } from "formik";
-import type { Dispatch, FC, SetStateAction } from "react";
+import { useState, type FC } from "react";
 
-import type { SliceBuilderState } from "@builders/SliceBuilder";
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
 import type { VariationSM } from "@lib/models/common/Slice";
 import { renameVariation } from "@src/features/slices/sliceBuilder/actions/renameVariation";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 
 import * as styles from "./RenameVariationModal.css";
+import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
 
 type RenameVariationModalProps = {
   isOpen: boolean;
   onClose: () => void;
   slice: ComponentUI;
   variation: VariationSM | undefined;
-  sliceBuilderState: SliceBuilderState;
-  setSliceBuilderState: Dispatch<SetStateAction<SliceBuilderState>>;
 };
 
 export const RenameVariationModal: FC<RenameVariationModalProps> = ({
@@ -32,10 +30,11 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
   onClose,
   slice,
   variation,
-  sliceBuilderState,
-  setSliceBuilderState,
 }) => {
-  const { updateAndSaveSlice } = useSliceMachineActions();
+  const [isRenaming, setRenaming] = useState(false);
+  const { setSlice } = useSliceState();
+  const { saveSliceSuccess } = useSliceMachineActions();
+
   return (
     <>
       <Dialog
@@ -56,15 +55,17 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
             }}
             onSubmit={async (values) => {
               if (!variation) return;
+              setRenaming(true);
               try {
-                await renameVariation({
+                const newSlice = await renameVariation({
                   component: slice,
-                  setSliceBuilderState,
-                  updateAndSaveSlice,
+                  saveSliceSuccess,
                   variation,
                   variationName: values.variationName.trim(),
                 });
+                setSlice(newSlice);
               } catch {}
+              setRenaming(false);
               onClose();
             }}
           >
@@ -102,7 +103,7 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
                   ok={{
                     text: "Rename",
                     onClick: () => void formik.submitForm(),
-                    loading: sliceBuilderState.loading,
+                    loading: isRenaming,
                     disabled: !formik.isValid,
                   }}
                   cancel={{ text: "Cancel" }}

package/components/ItemHeader/index.tsx

@@ -22,6 +22,7 @@ const ItemHeader: React.FC<{
     />
     <Text
       as="p"
+      data-cy="item-header-text"
       sx={{
         py: 0,
         px: 1,

package/components/ListItem/index.tsx

@@ -34,6 +34,7 @@ interface ListItemProps<F extends TabField, S extends AnyObjectSchema> {
   CustomEditElements?: JSX.Element[];
   widget: Widget<F, S>;
   draggableId: string;
+  dataCy: string;
   isRepeatableCustomType?: boolean;
   children: React.ReactNode;
 }
@@ -50,6 +51,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
   CustomEditElements,
   widget,
   draggableId,
+  dataCy,
   isRepeatableCustomType,
   children,
 }: ListItemProps<F, S>): JSX.Element {
@@ -66,6 +68,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
         {(provided) => (
           <Fragment>
             <Li
+              data-cy={dataCy}
               ref={provided.innerRef}
               {...provided.draggableProps}
               Component={Box}
@@ -117,7 +120,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
                         <SliceMachineIconButton
                           size={22}
                           Icon={AiOutlineEdit}
-                          label="Edit slice field"
+                          label="Edit field"
                           sx={{ cursor: "pointer", color: theme.colors?.icons }}
                           onClick={() =>
                             enterEditMode(
@@ -134,7 +137,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
                           <Menu>
                             <MenuButton
                               className="sliceMenuButton"
-                              data-cy="slice-menu-button"
+                              data-cy="field-menu-button"
                               style={{
                                 padding: "0",
                                 cursor: "pointer",

package/components/ScreenshotChangesModal/VariationDropZone.tsx

@@ -14,11 +14,13 @@ import { isLoading } from "@src/modules/loading";
 import { LoadingKeysEnum } from "@src/modules/loading/types";
 import { ScreenshotPreview } from "@components/ScreenshotPreview";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { uploadSliceScreenshot } from "@src/features/slices/actions/uploadSliceScreenshot";
 
 interface DropZoneProps {
   imageTypes?: string[];
   variationID: string;
   slice: ComponentUI;
+  onUploadSuccess?: (newSlice: ComponentUI) => void;
 }
 
 const DragActiveView = () => {
@@ -79,6 +81,7 @@ const DropZone: React.FC<DropZoneProps> = ({
   variationID,
   slice,
   imageTypes = acceptedImagesTypes,
+  onUploadSuccess,
 }) => {
   const maybeScreenshot = slice.screenshots[variationID];
 
@@ -90,7 +93,7 @@ const DropZone: React.FC<DropZoneProps> = ({
     slice,
   ]);
 
-  const { generateSliceCustomScreenshot } = useSliceMachineActions();
+  const { saveSliceCustomScreenshotSuccess } = useSliceMachineActions();
 
   const { isLoadingScreenshot } = useSelector(
     (state: SliceMachineStoreType) => ({
@@ -102,25 +105,44 @@ const DropZone: React.FC<DropZoneProps> = ({
   );
 
   const { FileInputRenderer, fileInputProps } = useCustomScreenshot({
-    onHandleFile: (file: File, isDragActive: boolean) => {
-      generateSliceCustomScreenshot(
-        variationID,
+    onHandleFile: async (file: File, isDragActive: boolean) => {
+      const newSlice = await uploadSliceScreenshot({
         slice,
         file,
-        isDragActive ? "dragAndDrop" : "upload",
-      );
+        method: isDragActive ? "dragAndDrop" : "upload",
+        variationId: variationID,
+      });
       setIsHover(false);
+
+      const screenshot = newSlice?.screenshots[variationID];
+      if (screenshot) {
+        // Sync with redux store
+        saveSliceCustomScreenshotSuccess(variationID, screenshot, newSlice);
+        onUploadSuccess && onUploadSuccess(newSlice);
+      }
     },
   });
 
-  const handleFile = (file: File) => {
+  const handleFile = async (file: File) => {
     if (file.size > 128000000) {
       return openToaster(
         "File is too big. Max file size: 128Mb.",
         ToasterType.ERROR,
       );
     }
-    generateSliceCustomScreenshot(variationID, slice, file, "dragAndDrop");
+    const newSlice = await uploadSliceScreenshot({
+      slice,
+      file,
+      method: "dragAndDrop",
+      variationId: variationID,
+    });
+
+    const screenshot = newSlice?.screenshots[variationID];
+    if (screenshot) {
+      // Sync with redux store
+      saveSliceCustomScreenshotSuccess(variationID, screenshot, newSlice);
+      onUploadSuccess && onUploadSuccess(newSlice);
+    }
   };
 
   const supportsClipboardRead = typeof navigator.clipboard.read === "function";
@@ -149,7 +171,7 @@ const DropZone: React.FC<DropZoneProps> = ({
     const maybeFile = event.dataTransfer.files?.[0];
     if (maybeFile !== undefined) {
       if (imageTypes.some((t) => `image/${t}` === maybeFile.type)) {
-        return handleFile(maybeFile);
+        return void handleFile(maybeFile);
       }
       return openToaster(
         `Only files of type ${imageTypes.join(", ")} are accepted.`,

package/components/ScreenshotChangesModal/index.tsx

@@ -171,9 +171,11 @@ const variationSetter = (
 const ScreenshotChangesModal = ({
   slices,
   defaultVariationSelector,
+  onUploadSuccess,
 }: {
   slices: ComponentUI[];
   defaultVariationSelector?: SliceVariationSelector;
+  onUploadSuccess?: (newSlice: ComponentUI) => void;
 }) => {
   const { closeModals } = useSliceMachineActions();
 
@@ -275,6 +277,7 @@ const ScreenshotChangesModal = ({
                 <VariationDropZone
                   variationID={variationSelector.variationID}
                   slice={slice}
+                  onUploadSuccess={onUploadSuccess}
                 />
               ) : null;
             })()}

package/components/ScreenshotChangesModal/useCustomScreenshot.tsx

@@ -6,11 +6,11 @@ import { acceptedImagesTypes } from "@lib/consts";
 type HandleFileProp = {
   inputFile: React.RefObject<HTMLInputElement>;
   children?: React.ReactNode;
-  handleFile: (file: File | undefined, isDragActive: boolean) => void;
+  handleFile: (file: File | undefined, isDragActive: boolean) => Promise<void>;
   isDragActive: boolean;
 };
 type CustomScreenshotProps = {
-  onHandleFile: (file: File, isDragActive: boolean) => void;
+  onHandleFile: (file: File, isDragActive: boolean) => Promise<void>;
 };
 
 const FileInputRenderer: React.FC<HandleFileProp> = ({
@@ -43,7 +43,7 @@ const FileInputRenderer: React.FC<HandleFileProp> = ({
       style={{ display: "none" }}
       accept={acceptedImagesTypes.map((type) => `image/${type}`).join(",")}
       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        handleFile(e.target.files?.[0], isDragActive);
+        void handleFile(e.target.files?.[0], isDragActive);
       }}
     />
   </>
@@ -63,9 +63,9 @@ export default function useCustomScreenshot({
   onHandleFile,
 }: CustomScreenshotProps): CustomScreenshotPayload {
   const inputFile = useRef<HTMLInputElement>(null);
-  const handleFile = (file: File | undefined, isDragActive: boolean) => {
+  const handleFile = async (file: File | undefined, isDragActive: boolean) => {
     if (file) {
-      onHandleFile(file, isDragActive);
+      await onHandleFile(file, isDragActive);
       if (inputFile?.current) {
         inputFile.current.value = "";
       }

package/components/Simulator/index.tsx

@@ -1,4 +1,5 @@
 import {
+  FC,
   Suspense,
   useCallback,
   useEffect,
@@ -34,7 +35,6 @@ import useThrottle from "@src/hooks/useThrottle";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 
 import IframeRenderer from "./components/IframeRenderer";
-import { ComponentWithSliceProps } from "@src/layouts/WithSlice";
 import {
   selectIframeStatus,
   selectIsWaitingForIFrameCheck,
@@ -44,7 +44,8 @@ import {
 import FullPage from "./components/FullPage";
 import FailedConnect from "./components/FailedConnect";
 import SetupModal from "./components/SetupModal";
-import { Slices } from "@lib/models/common/Slice";
+import { Slices, VariationSM } from "@lib/models/common/Slice";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
 
 export enum UiState {
   LOADING_SETUP = "LOADING_SETUP",
@@ -54,7 +55,12 @@ export enum UiState {
   SUCCESS = "SUCCESS",
 }
 
-const Simulator: ComponentWithSliceProps = ({ slice, variation }) => {
+type SimulatorProps = {
+  slice: ComponentUI;
+  variation: VariationSM;
+};
+
+const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
   const { checkSimulatorSetup, connectToSimulatorIframe, saveSliceMock } =
     useSliceMachineActions();
   const {

package/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx

@@ -18,7 +18,7 @@ import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
 interface UpdateSliceModalProps {
   formId: string;
   close: () => void;
-  onSuccess: (slices: SharedSlice[]) => Promise<void>;
+  onSuccess: (slices: SharedSlice[]) => void;
   availableSlicesTemplates: SliceTemplate[];
   localLibraries: readonly LibraryUI[];
 }
@@ -69,7 +69,7 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
                 ) as Promise<SharedSlice>[],
             );
 
-            await onSuccess(slices);
+            onSuccess(slices);
           },
         });
       }}

package/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx

@@ -9,7 +9,7 @@ import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 interface UpdateSliceModalProps {
   formId: string;
   close: () => void;
-  onSubmit: (slices: SharedSlice[]) => Promise<void>;
+  onSubmit: (slices: SharedSlice[]) => void;
   availableSlices: ReadonlyArray<ComponentUI>;
 }
 
@@ -37,7 +37,7 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
               availableSlices.find((s) => s.model.id === sliceKey)?.model,
           )
           .filter((slice) => slice !== undefined) as SharedSlice[];
-        void onSubmit(slices);
+        onSubmit(slices);
       }}
       initialValues={{
         sliceKeys: [],

package/lib/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -31,9 +31,9 @@ import {
 } from "@src/modules/slices";
 import type { SliceMachineStoreType } from "@src/redux/type";
 import { useSlicesTemplates } from "@src/features/slicesTemplates/useSlicesTemplates";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { addSlicesToSliceZone } from "@src/features/slices/actions/addSlicesToSliceZone";
 import { ToastMessageWithPath } from "@components/ToasterContainer";
+import { useCustomTypeState } from "@src/features/customTypes/customTypesBuilder/CustomTypeProvider";
 
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
 import UpdateSliceZoneModal from "./UpdateSliceZoneModal";
@@ -121,8 +121,8 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       slices: getFrontendSlices(store),
     }),
   );
-  const { initCustomTypeStore, saveCustomTypeSuccess } =
-    useSliceMachineActions();
+  const { setCustomType } = useCustomTypeState();
+
   const localLibraries: readonly LibraryUI[] = libraries.filter(
     (library) => library.isLocal,
   );
@@ -197,14 +197,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
     setIsSlicesTemplatesModalOpen(false);
   };
 
-  const onAddSlicesToSliceZone = (newCustomType: CustomTypeSM) => {
-    // Reset selected custom type store to update slice zone and saving status
-    initCustomTypeStore(newCustomType, newCustomType);
-
-    // Update available custom type store with new custom type
-    saveCustomTypeSuccess(CustomTypes.fromSM(newCustomType));
-  };
-
   return (
     <>
       {query.newPageType === undefined ? (
@@ -299,13 +291,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
         <UpdateSliceZoneModal
           formId={`tab-slicezone-form-${tabId}`}
           availableSlices={availableSlicesToAdd}
-          onSubmit={async (slices: SharedSlice[]) => {
-            const newCustomType = await addSlicesToSliceZone({
+          onSubmit={(slices: SharedSlice[]) => {
+            const newCustomType = addSlicesToSliceZone({
               customType,
               tabId,
               slices,
             });
-            onAddSlicesToSliceZone(newCustomType);
+            setCustomType(CustomTypes.fromSM(newCustomType));
             closeUpdateSliceZoneModal();
             redirectToEditMode();
             toast.success("Slice(s) added to slice zone");
@@ -318,13 +310,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           formId={`tab-slicezone-form-${tabId}`}
           availableSlicesTemplates={availableSlicesTemplates}
           localLibraries={localLibraries}
-          onSuccess={async (slices: SharedSlice[]) => {
-            const newCustomType = await addSlicesToSliceZone({
+          onSuccess={(slices: SharedSlice[]) => {
+            const newCustomType = addSlicesToSliceZone({
               customType,
               tabId,
               slices,
             });
-            onAddSlicesToSliceZone(newCustomType);
+            setCustomType(CustomTypes.fromSM(newCustomType));
             closeSlicesTemplatesModal();
             redirectToEditMode();
             toast.success(
@@ -350,13 +342,13 @@ const SliceZone: React.FC<SliceZoneProps> = ({
       )}
       {localLibraries?.length !== 0 && isCreateSliceModalOpen && (
         <CreateSliceModal
-          onSuccess={async (newSlice: SharedSlice) => {
-            const newCustomType = await addSlicesToSliceZone({
+          onSuccess={(newSlice: SharedSlice) => {
+            const newCustomType = addSlicesToSliceZone({
               customType,
               tabId,
               slices: [newSlice],
             });
-            onAddSlicesToSliceZone(newCustomType);
+            setCustomType(CustomTypes.fromSM(newCustomType));
             closeCreateSliceModal();
             redirectToEditMode();
             toast.success(

package/lib/builders/CustomTypeBuilder/TabModal/update.tsx

@@ -10,11 +10,13 @@ const UpdateCustomTypeForm = ({
   onSubmit,
   close,
   tabIds,
+  initialTabKey,
 }: {
   isOpen: boolean;
   onSubmit: (values: { id: string }) => void;
   close: () => void;
   tabIds: ReadonlyArray<string>;
+  initialTabKey: string;
 }) => {
   return (
     <ModalFormCard
@@ -29,7 +31,7 @@ const UpdateCustomTypeForm = ({
         close();
       }}
       initialValues={{
-        id: "",
+        id: initialTabKey,
       }}
       validate={({ id }) => {
         if (!id) {