slice-machine-ui 1.22.2-alpha.xru-auto-save-slice-builder.2 → 1.22.2-alpha.xru-auto-save-type-builder.7

package/components/DeleteVariationModal/index.tsx

@@ -7,19 +7,21 @@ import {
   Text,
 } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
-import { useState, type FC, type PropsWithChildren } from "react";
+import type { Dispatch, FC, PropsWithChildren, SetStateAction } 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> = ({
@@ -27,12 +29,11 @@ export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
   onClose,
   slice,
   variation,
+  sliceBuilderState,
+  setSliceBuilderState,
 }) => {
   const router = useRouter();
-  const [isDeleting, setIsDeleting] = useState(false);
-  const { saveSliceSuccess } = useSliceMachineActions();
-  const { setSlice } = useSliceState();
-
+  const { updateAndSaveSlice } = useSliceMachineActions();
   return (
     <Dialog
       open={isOpen}
@@ -55,21 +56,19 @@ export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
               onClick: () => {
                 if (!variation) return;
                 void (async () => {
-                  setIsDeleting(true);
                   try {
-                    const newSlice = await deleteVariation({
+                    await deleteVariation({
                       component: slice,
                       router,
-                      saveSliceSuccess,
+                      setSliceBuilderState,
+                      updateAndSaveSlice,
                       variation,
                     });
-                    setSlice(newSlice);
                   } catch {}
-                  setIsDeleting(false);
                   onClose();
                 })();
               },
-              loading: isDeleting,
+              loading: sliceBuilderState.loading,
             }}
             cancel={{ text: "Cancel" }}
             size="medium"

package/components/Forms/RenameVariationModal/RenameVariationModal.tsx

@@ -8,21 +8,23 @@ import {
   Text,
 } from "@prismicio/editor-ui";
 import { Formik } from "formik";
-import { useState, type FC } from "react";
+import type { Dispatch, FC, SetStateAction } 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> = ({
@@ -30,11 +32,10 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
   onClose,
   slice,
   variation,
+  sliceBuilderState,
+  setSliceBuilderState,
 }) => {
-  const [isRenaming, setRenaming] = useState(false);
-  const { setSlice } = useSliceState();
-  const { saveSliceSuccess } = useSliceMachineActions();
-
+  const { updateAndSaveSlice } = useSliceMachineActions();
   return (
     <>
       <Dialog
@@ -55,17 +56,15 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
             }}
             onSubmit={async (values) => {
               if (!variation) return;
-              setRenaming(true);
               try {
-                const newSlice = await renameVariation({
+                await renameVariation({
                   component: slice,
-                  saveSliceSuccess,
+                  setSliceBuilderState,
+                  updateAndSaveSlice,
                   variation,
                   variationName: values.variationName.trim(),
                 });
-                setSlice(newSlice);
               } catch {}
-              setRenaming(false);
               onClose();
             }}
           >
@@ -103,7 +102,7 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
                   ok={{
                     text: "Rename",
                     onClick: () => void formik.submitForm(),
-                    loading: isRenaming,
+                    loading: sliceBuilderState.loading,
                     disabled: !formik.isValid,
                   }}
                   cancel={{ text: "Cancel" }}

package/components/ScreenshotChangesModal/VariationDropZone.tsx

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

package/components/ScreenshotChangesModal/index.tsx

@@ -171,11 +171,9 @@ const variationSetter = (
 const ScreenshotChangesModal = ({
   slices,
   defaultVariationSelector,
-  onUploadSuccess,
 }: {
   slices: ComponentUI[];
   defaultVariationSelector?: SliceVariationSelector;
-  onUploadSuccess?: (newSlice: ComponentUI) => void;
 }) => {
   const { closeModals } = useSliceMachineActions();
 
@@ -277,7 +275,6 @@ 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) => Promise<void>;
+  handleFile: (file: File | undefined, isDragActive: boolean) => void;
   isDragActive: boolean;
 };
 type CustomScreenshotProps = {
-  onHandleFile: (file: File, isDragActive: boolean) => Promise<void>;
+  onHandleFile: (file: File, isDragActive: boolean) => 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>) => {
-        void handleFile(e.target.files?.[0], isDragActive);
+        handleFile(e.target.files?.[0], isDragActive);
       }}
     />
   </>
@@ -63,9 +63,9 @@ export default function useCustomScreenshot({
   onHandleFile,
 }: CustomScreenshotProps): CustomScreenshotPayload {
   const inputFile = useRef<HTMLInputElement>(null);
-  const handleFile = async (file: File | undefined, isDragActive: boolean) => {
+  const handleFile = (file: File | undefined, isDragActive: boolean) => {
     if (file) {
-      await onHandleFile(file, isDragActive);
+      onHandleFile(file, isDragActive);
       if (inputFile?.current) {
         inputFile.current.value = "";
       }

package/components/Simulator/index.tsx

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

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

@@ -1,24 +1,18 @@
-import { FC } from "react";
-import { flushSync } from "react-dom";
-import { DropResult } from "react-beautiful-dnd";
-import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
-
 import { ensureDnDDestination } from "@lib/utils";
 import { transformKeyAccessor } from "@utils/str";
+
+import Zone from "../../common/Zone";
+import EditModal from "../../common/EditModal";
+
 import * as Widgets from "@lib/models/common/widgets";
 import sliceBuilderWidgetsArray from "@lib/models/common/widgets/sliceBuilderArray";
+
+import { DropResult } from "react-beautiful-dnd";
 import { List } from "@src/components/List";
-import { WidgetsArea } from "@lib/models/common/Slice";
-import { useSliceState } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
-import {
-  addField,
-  deleteField,
-  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 useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
+
+import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
 
 const dataTipText = ` The non-repeatable zone
   is for fields<br/> that should appear once, like a<br/>
@@ -28,18 +22,24 @@ 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();
+type FieldZonesProps = {
+  variation: VariationSM;
+};
 
+const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
+  variation,
+}) => {
+  const {
+    addSliceWidget,
+    replaceSliceWidget,
+    reorderSliceWidget,
+    removeSliceWidget,
+    updateSliceWidgetMock,
+    deleteSliceWidgetMock,
+  } = useSliceMachineActions();
   const _onDeleteItem = (widgetArea: WidgetsArea) => (key: string) => {
-    const newSlice = deleteField({
-      slice,
-      variationId: variation.id,
-      widgetArea,
-      fieldId: key,
-    });
-
-    setSlice(newSlice);
+    deleteSliceWidgetMock(variation.id, widgetArea, key);
+    removeSliceWidget(variation.id, widgetArea, key);
   };
 
   const _onSave =
@@ -48,23 +48,30 @@ const FieldZones: FC = () => {
       apiId: previousKey,
       newKey,
       value,
+      mockValue,
     }: {
       apiId: string;
       newKey: string;
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       value: any;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      mockValue: 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);
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+      if (mockValue) {
+        updateSliceWidgetMock(
+          variation.id,
+          widgetArea,
+          previousKey,
+          newKey,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          mockValue,
+        );
+      } else {
+        deleteSliceWidgetMock(variation.id, widgetArea, newKey);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      replaceSliceWidget(variation.id, widgetArea, previousKey, newKey, value);
     };
 
   const _onSaveNewField =
@@ -89,56 +96,24 @@ const FieldZones: FC = () => {
         );
       }
 
-      // 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}`);
-      }
-
-      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 });
-      } catch (error) {
-        throw new Error(`Model is invalid for widget "${newField.type}".`);
-      }
-
-      const newSlice = addField({
-        slice,
-        variationId: variation.id,
+      addSliceWidget(
+        variation.id,
         widgetArea,
-        newFieldId: id,
-        newField,
-      });
-
-      setSlice(newSlice);
+        id,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        widget.create(label) as NestableWidget,
+      );
     };
 
   const _onDragEnd = (widgetArea: WidgetsArea) => (result: DropResult) => {
     if (ensureDnDDestination(result)) return;
 
-    const { source, destination } = result;
-    if (!destination) {
-      return;
-    }
-
-    const newSlice = reorderField({
-      slice,
-      variationId: variation.id,
+    reorderSliceWidget(
+      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));
+      result.source.index,
+      result.destination?.index ?? undefined,
+    );
   };
 
   return (

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

@@ -1,13 +1,13 @@
+import { Variation } from "@models/common/Variation";
+import { VariationSM } from "@lib/models/common/Slice";
 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 { VariationSM } from "@lib/models/common/Slice";
+import Select from "react-select";
+
+import { Text, Box, Button, Label, Input, Flex } from "theme-ui";
 
 const Error = ({ msg }: { msg?: string }) => (
   <Text as="span" sx={{ fontSize: 12, color: "error", mt: "5px", ml: 2 }}>
@@ -17,14 +17,9 @@ const Error = ({ msg }: { msg?: string }) => (
 );
 const AddVariationModal: React.FunctionComponent<{
   isOpen: boolean;
-  loading?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onClose: () => any;
-  onSubmit: (
-    id: string,
-    name: string,
-    copiedVariation: VariationSM,
-  ) => Promise<void>;
+  onSubmit: (id: string, name: string, copiedVariation: VariationSM) => void;
   initialVariation: VariationSM;
   variations: ReadonlyArray<VariationSM>;
 }> = ({ isOpen, onClose, onSubmit, initialVariation, variations }) => {
@@ -36,7 +31,6 @@ const AddVariationModal: React.FunctionComponent<{
     value: initialVariation.id,
     label: initialVariation.name,
   });
-  const [isAddingVariation, setIsAddingVariation] = useState(false);
 
   function validateForm({
     id,
@@ -76,7 +70,7 @@ const AddVariationModal: React.FunctionComponent<{
   }
 
   function generateId(str: string) {
-    const slug = camelCase(str);
+    const slug = Variation.generateId(str);
     setGeneratedId(slug);
   }
 
@@ -116,9 +110,7 @@ const AddVariationModal: React.FunctionComponent<{
     else {
       const copiedVariation = variations.find((v) => v.id === origin.value);
       if (copiedVariation) {
-        setIsAddingVariation(true);
-        await onSubmit(generatedId, name, copiedVariation);
-        setIsAddingVariation(false);
+        onSubmit(generatedId, name, copiedVariation);
         handleClose();
       }
     }
@@ -156,16 +148,16 @@ const AddVariationModal: React.FunctionComponent<{
               sx={{ textAlign: "left" }}
               HeaderContent={<Text as="h2">Add new Variation</Text>}
               FooterContent={
-                <Box gap={16} alignItems="center">
-                  <Button onClick={handleClose} color="grey">
+                <Flex sx={{ justifyContent: "flex-end" }}>
+                  <Button onClick={handleClose} mr={2} variant="secondary">
                     Cancel
                   </Button>
-                  <Button loading={isAddingVariation}>Submit</Button>
-                </Box>
+                  <Button type="submit">Submit</Button>
+                </Flex>
               }
               close={handleClose}
             >
-              <Box flexDirection="column" padding={{ block: 16 }}>
+              <Box sx={{ pb: 4, mt: 4 }}>
                 <Label htmlFor="name" sx={{ mb: 1 }}>
                   Variation name*
                   {errors.name ? <Error msg={errors.name} /> : ""}
@@ -187,7 +179,7 @@ const AddVariationModal: React.FunctionComponent<{
                   in Prismic
                 </Text>
               </Box>
-              <Box flexDirection="column" padding={{ bottom: 16 }}>
+              <Box sx={{ pb: 4 }}>
                 <Label htmlFor="id" sx={{ mb: 1 }}>
                   Variation ID*{errors.id ? <Error msg={errors.id} /> : ""}
                 </Label>
@@ -209,7 +201,7 @@ const AddVariationModal: React.FunctionComponent<{
                 </Text>
               </Box>
 
-              <Box flexDirection="column" padding={{ bottom: 8 }}>
+              <Box sx={{ pb: 4 }}>
                 <Label htmlFor="origin" sx={{ mb: 1 }}>
                   Duplicate from
                 </Label>