slice-machine-ui 1.22.2 → 1.22.3-alpha.chore-introduce-css-modules.1

package/src/domain/slice.ts

@@ -2,9 +2,49 @@ import type {
   CompositeSlice,
   LegacySlice,
 } from "@prismicio/types-internal/lib/customtypes/widgets/slices";
+import { NestableWidget } from "@prismicio/types-internal/lib/customtypes";
 
 import type { ComponentUI } from "@lib/models/common/ComponentUI";
-import type { VariationSM } from "@lib/models/common/Slice";
+import type { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
+
+type CopySliceVariationArgs = {
+  copiedVariation: VariationSM;
+  id: string;
+  name: string;
+  slice: ComponentUI;
+};
+
+type DeleteFieldArgs = {
+  slice: ComponentUI;
+  variationId: string;
+  widgetArea: WidgetsArea;
+  fieldId: string;
+};
+
+type UpdateFieldArgs = {
+  slice: ComponentUI;
+  variationId: string;
+  widgetArea: WidgetsArea;
+  previousFieldId: string;
+  newFieldId: string;
+  newField: NestableWidget;
+};
+
+type AddFieldArgs = {
+  slice: ComponentUI;
+  variationId: string;
+  widgetArea: WidgetsArea;
+  newFieldId: string;
+  newField: NestableWidget;
+};
+
+type ReorderFieldArgs = {
+  slice: ComponentUI;
+  variationId: string;
+  widgetArea: WidgetsArea;
+  sourceIndex: number;
+  destinationIndex: number;
+};
 
 export function countMissingScreenshots(slice: ComponentUI): number {
   return slice.model.variations.length - Object.keys(slice.screenshots).length;
@@ -78,3 +118,128 @@ export function getFieldMappingFingerprint(
     ),
   };
 }
+
+export function copySliceVariation(args: CopySliceVariationArgs) {
+  const { slice, id, name, copiedVariation } = args;
+  const newVariation = { ...copiedVariation, id, name };
+
+  return {
+    slice: {
+      ...slice,
+      model: {
+        ...slice.model,
+        variations: slice.model.variations.concat([newVariation]),
+      },
+    },
+    variation: newVariation,
+  };
+}
+
+export function deleteField(args: DeleteFieldArgs): ComponentUI {
+  const { slice, variationId, widgetArea, fieldId } = args;
+
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      variations: slice.model.variations.map((v) => {
+        if (v.id === variationId) {
+          return {
+            ...v,
+            [widgetArea]: v[widgetArea]?.filter((w) => w.key !== fieldId),
+          };
+        }
+        return v;
+      }),
+    },
+  };
+}
+
+export function updateField(args: UpdateFieldArgs): ComponentUI {
+  const {
+    slice,
+    variationId,
+    widgetArea,
+    previousFieldId,
+    newFieldId,
+    newField,
+  } = args;
+
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      variations: slice.model.variations.map((v) => {
+        if (v.id === variationId) {
+          return {
+            ...v,
+            [widgetArea]: v[widgetArea]?.map((w) => {
+              if (w.key === previousFieldId) {
+                return {
+                  key: newFieldId,
+                  value: newField,
+                };
+              }
+              return w;
+            }),
+          };
+        }
+        return v;
+      }),
+    },
+  };
+}
+
+export function addField(args: AddFieldArgs): ComponentUI {
+  const { slice, variationId, widgetArea, newFieldId, newField } = args;
+
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      variations: slice.model.variations.map((v) => {
+        if (v.id === variationId) {
+          return {
+            ...v,
+            [widgetArea]: v[widgetArea]?.concat([
+              {
+                key: newFieldId,
+                value: newField,
+              },
+            ]),
+          };
+        }
+        return v;
+      }),
+    },
+  };
+}
+
+export function reorderField(args: ReorderFieldArgs): ComponentUI {
+  const { slice, variationId, widgetArea, sourceIndex, destinationIndex } =
+    args;
+
+  const fields =
+    slice.model.variations.find((v) => v.id === variationId)?.[widgetArea] ??
+    [];
+
+  const reorderedFields = [...fields];
+  const [removedField] = reorderedFields.splice(sourceIndex, 1);
+  reorderedFields.splice(destinationIndex, 0, removedField);
+
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      variations: slice.model.variations.map((v) => {
+        if (v.id === variationId) {
+          return {
+            ...v,
+            [widgetArea]: reorderedFields,
+          };
+        }
+        return v;
+      }),
+    },
+  };
+}

package/src/features/autoSave/AutoSaveStatusIndicator.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import { Box, Icon, ProgressCircle, Text } from "@prismicio/editor-ui";
+
+import { AutoSaveStatus } from "./useAutoSave";
+
+type AutoSaveStatusIndicatorProps = {
+  status: AutoSaveStatus;
+};
+
+export const AutoSaveStatusIndicator: FC<AutoSaveStatusIndicatorProps> = (
+  props,
+) => {
+  const { status } = props;
+  let autoSaveStatusInfo;
+
+  switch (status) {
+    case "saving":
+      autoSaveStatusInfo = {
+        icon: <ProgressCircle color="grey11" />,
+        text: "Saving...",
+      };
+      break;
+    case "failed":
+      autoSaveStatusInfo = {
+        icon: <Icon name="close" color="tomato11" size="medium" />,
+        text: "Failed to save",
+      };
+      break;
+    case "saved":
+      autoSaveStatusInfo = {
+        icon: <Icon name="check" color="green11" size="medium" />,
+        text: "Auto-saved",
+      };
+      break;
+  }
+
+  return (
+    <Box gap={8} alignItems="center">
+      {autoSaveStatusInfo.icon}
+      <Text color="grey11">{autoSaveStatusInfo.text}</Text>
+    </Box>
+  );
+};

package/src/features/autoSave/useAutoSave.tsx

@@ -0,0 +1,177 @@
+import {
+  useCallback,
+  useState,
+  useEffect,
+  SetStateAction,
+  Dispatch,
+  useMemo,
+} from "react";
+import { uniqueId } from "lodash";
+import { toast } from "react-toastify";
+import { Box, Button, Text } from "@prismicio/editor-ui";
+
+export type AutoSaveStatus = "saving" | "saved" | "failed";
+
+type UseAutoSaveArgs = {
+  autoSaveStatusDelay?: number;
+  errorMessage?: string;
+  retryDelay?: number;
+  retryMessage?: string;
+};
+
+type UseAutoSaveReturnType = {
+  autoSaveStatus: AutoSaveStatus;
+  setNextSave: (nextSave: NextSave) => void;
+};
+
+type AutoSaveStack = {
+  pendingSave: NextSave | undefined;
+  nextSave: NextSave | undefined;
+};
+
+type NextSave = () => Promise<unknown>;
+
+export const useAutoSave = (
+  args: UseAutoSaveArgs = {},
+): UseAutoSaveReturnType => {
+  const {
+    autoSaveStatusDelay = 300,
+    errorMessage = "An error happened while saving",
+    retryDelay = 1000,
+    retryMessage = "Retry",
+  } = args;
+
+  const [autoSaveStack, setAutoSaveStack] = useState<AutoSaveStack>({
+    pendingSave: undefined,
+    nextSave: undefined,
+  });
+  const [autoSaveStatusActual, setAutoSaveStatusActual] =
+    useState<AutoSaveStatus>("saved");
+  const [autoSaveStatusDelayed, setAutoSaveStatusDelayed] =
+    useState<AutoSaveStatus>(autoSaveStatusActual);
+
+  const setNextSave = useCallback((nextSave: NextSave) => {
+    setAutoSaveStack((prevState) => ({
+      ...prevState,
+      nextSave,
+    }));
+  }, []);
+
+  const executeSave = useCallback(
+    async (nextSave?: NextSave) => {
+      if (nextSave) {
+        setAutoSaveStatusActual("saving");
+
+        try {
+          await nextSave();
+
+          setAutoSaveStatusActual("saved");
+        } catch (error) {
+          setAutoSaveStatusActual("failed");
+          console.error(errorMessage, error);
+
+          toastError({
+            errorMessage,
+            retryDelay,
+            retryMessage,
+            setAutoSaveStatusActual,
+            setAutoSaveStack,
+          });
+        }
+      }
+    },
+    [errorMessage, retryDelay, retryMessage],
+  );
+
+  useEffect(() => {
+    if (autoSaveStatusActual === "saved" && autoSaveStack.nextSave) {
+      void executeSave(autoSaveStack.nextSave);
+
+      setAutoSaveStack({
+        pendingSave: autoSaveStack.nextSave,
+        nextSave: undefined,
+      });
+    }
+  }, [autoSaveStatusActual, autoSaveStack, executeSave]);
+
+  useEffect(() => {
+    if (autoSaveStatusActual === "saving") {
+      setAutoSaveStatusDelayed("saving");
+    } else {
+      const debounceTimeout = setTimeout(() => {
+        setAutoSaveStatusDelayed(autoSaveStatusActual);
+      }, autoSaveStatusDelay);
+
+      return () => {
+        clearTimeout(debounceTimeout);
+      };
+    }
+
+    return;
+  }, [autoSaveStatusActual, autoSaveStatusDelay]);
+
+  return useMemo(
+    () => ({
+      autoSaveStatus: autoSaveStatusDelayed,
+      setNextSave,
+    }),
+    [autoSaveStatusDelayed, setNextSave],
+  );
+};
+
+type ToastErrorArgs = {
+  errorMessage: string;
+  retryDelay: number;
+  retryMessage: string;
+  setAutoSaveStatusActual: Dispatch<SetStateAction<AutoSaveStatus>>;
+  setAutoSaveStack: Dispatch<SetStateAction<AutoSaveStack>>;
+};
+
+function toastError(args: ToastErrorArgs) {
+  const {
+    errorMessage,
+    retryDelay,
+    retryMessage,
+    setAutoSaveStatusActual,
+    setAutoSaveStack,
+  } = args;
+  const toastId = uniqueId();
+
+  toast.error(
+    () => (
+      <Box gap={8} alignItems="center">
+        <Text color="grey1" variant="small">
+          {errorMessage}
+        </Text>
+        <Button
+          size="small"
+          color="grey"
+          onClick={() => {
+            toast.dismiss(toastId);
+
+            // Ensure saving is directly propagated before waiting for the retry
+            setAutoSaveStatusActual("saving");
+
+            setTimeout(() => {
+              // By setting the status to saved, the save effect will be triggered
+              // with the latest data to save.
+              setAutoSaveStatusActual("saved");
+              setAutoSaveStack((prevState) => ({
+                nextSave: prevState.nextSave ?? prevState.pendingSave,
+                pendingSave: undefined,
+              }));
+            }, retryDelay);
+          }}
+        >
+          {retryMessage}
+        </Button>
+      </Box>
+    ),
+    {
+      autoClose: false,
+      closeOnClick: false,
+      draggable: false,
+      toastId,
+    },
+  );
+}

package/src/features/customTypes/EditDropdown.tsx

@@ -25,12 +25,14 @@ type EditDropdownProps = {
   isChangesLocal: boolean;
   format: CustomTypeFormat;
   customType: CustomType;
+  setLocalCustomType?: (customType: CustomType) => void;
 };
 
 export const EditDropdown: FC<EditDropdownProps> = ({
   format,
   customType,
   isChangesLocal,
+  setLocalCustomType,
 }) => {
   const router = useRouter();
   const { saveCustomTypeSuccess } = useSliceMachineActions();
@@ -123,6 +125,7 @@ export const EditDropdown: FC<EditDropdownProps> = ({
           customType={customType}
           isChangesLocal={isChangesLocal}
           onClose={() => setIsRenameCustomTypeModalOpen(false)}
+          setLocalCustomType={setLocalCustomType}
         />
       ) : null}
     </>

package/src/features/customTypes/actions/convertCustomToPageType.ts

@@ -3,7 +3,7 @@ import { CustomType } from "@prismicio/types-internal/lib/customtypes";
 
 import { CustomTypeFormat } from "@slicemachine/manager";
 import { convertToPageType } from "@src/domain/customType";
-import { managerClient } from "@src/managerClient";
+import { updateCustomType } from "@src/apiClient";
 
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 
@@ -16,9 +16,7 @@ export async function convertCustomToPageType(
 
   try {
     const newCustomType = convertToPageType(customType);
-    await managerClient.customTypes.updateCustomType({
-      model: newCustomType,
-    });
+    await updateCustomType(newCustomType);
 
     // Update the custom type in the redux store
     saveCustomType(newCustomType);

package/src/features/customTypes/customTypesBuilder/CustomTypeProvider.tsx

@@ -0,0 +1,90 @@
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+import { useStableCallback } from "@prismicio/editor-support/React";
+
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import {
+  AutoSaveStatus,
+  useAutoSave,
+} from "@src/features/autoSave/useAutoSave";
+import { getFormat } from "@src/domain/customType";
+import { updateCustomType } from "@src/apiClient";
+
+import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
+
+type CustomTypeContext = {
+  customType: CustomType;
+  autoSaveStatus: AutoSaveStatus;
+  setCustomType: (customType: CustomType) => void;
+};
+
+type CustomTypeProviderProps = {
+  children: ReactNode | ((value: CustomTypeContext) => ReactNode);
+  initialCustomType: CustomType;
+};
+
+const CustomTypeContextValue = createContext<CustomTypeContext | undefined>(
+  undefined,
+);
+
+export function CustomTypeProvider(props: CustomTypeProviderProps) {
+  const { children, initialCustomType } = props;
+
+  const [customType, setCustomTypeState] = useState(initialCustomType);
+  const format = getFormat(customType);
+  const customTypeMessages = CUSTOM_TYPES_MESSAGES[format];
+  const { autoSaveStatus, setNextSave } = useAutoSave({
+    errorMessage: customTypeMessages.autoSaveFailed,
+  });
+  const { saveCustomTypeSuccess } = useSliceMachineActions();
+  const stableSaveCustomTypeSuccess = useStableCallback(saveCustomTypeSuccess);
+
+  const setCustomType = useCallback(
+    (customType: CustomType) => {
+      setCustomTypeState(customType);
+      setNextSave(async () => {
+        const { errors } = await updateCustomType(customType);
+
+        if (errors.length > 0) {
+          throw errors;
+        }
+
+        // Update available custom types store with new custom type
+        stableSaveCustomTypeSuccess(customType);
+      });
+    },
+    [setNextSave, stableSaveCustomTypeSuccess],
+  );
+
+  const contextValue: CustomTypeContext = useMemo(
+    () => ({
+      autoSaveStatus,
+      customType,
+      setCustomType,
+    }),
+    [autoSaveStatus, customType, setCustomType],
+  );
+
+  return (
+    <CustomTypeContextValue.Provider value={contextValue}>
+      {typeof children === "function" ? children(contextValue) : children}
+    </CustomTypeContextValue.Provider>
+  );
+}
+
+export function useCustomTypeState() {
+  const customTypeState = useContext(CustomTypeContextValue);
+
+  if (!customTypeState) {
+    throw new Error("CustomTypeProvider not found");
+  }
+
+  return customTypeState;
+}