slice-machine-ui 1.23.2-beta.1 → 1.23.2-beta.11

package/out/_next/static/m6psnC5u1xT7Y6osWHKjp/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,f,b,n,u,d,h,l,k,j,p,g,o,r){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[a,j,p,"static/chunks/pages/index-64cfb8b0948ba8ef.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":[s,e,"static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-afd18276fe018b24.js"],"/changes":[s,t,"static/chunks/8eec4907-b712959d9f984b68.js",i,"static/chunks/918-5bb55fb464e34768.js",c,b,"static/css/37153180c3b0dd66.css","static/chunks/pages/changes-2a976f9efeb719aa.js"],"/custom-types":[a,j,p,"static/chunks/pages/custom-types-94b8f8dbf7727412.js"],"/custom-types/[customTypeId]":[s,n,u,d,h,e,f,i,l,g,c,a,k,o,r,"static/chunks/pages/custom-types/[customTypeId]-3f862ad6111a1fc0.js"],"/labs":["static/chunks/pages/labs-ee206005948f8e87.js"],"/page-types/[pageTypeId]":[s,n,u,d,h,e,f,i,l,g,c,a,k,o,r,"static/chunks/pages/page-types/[pageTypeId]-d1ffca11c42f2603.js"],"/slices":[s,t,f,c,b,"static/css/f8eb526e10bc2441.css","static/chunks/pages/slices-e9c70c082ca3e3f9.js"],"/slices/[lib]/[sliceName]/[variation]":[s,t,n,u,d,h,e,f,i,l,c,k,b,"static/css/b22c0750c14cc089.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-b2a9d773ce5d7739.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[t,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-5cc559566b738915.js","static/chunks/376-7e784d6069e01654.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-897ca93c114a1435.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/59b4e022-7a3b5554b806349f.js","static/chunks/25-37d6fa7f064be04b.js","static/chunks/731-501990ebe6a71b32.js","static/chunks/183-4feb6bb3eddbc768.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/543-f8766685f7f451e2.js","static/chunks/50-cfc2514205b86001.js","static/chunks/286-ed90373e9a469944.js","static/chunks/f36c6662-03bb5e9d9aa0b0aa.js","static/chunks/4c744e84-e3161d754618373f.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-2c5b6c0367fcde86.js","static/chunks/696-b12edad30a3617e5.js","static/chunks/318-ce7e74f18f2d5b22.js","static/chunks/727-3a3bc32518778317.js","static/css/be1f49e49a5aa7eb.css","static/chunks/474-5a072e6fac61f703.js","static/chunks/904-9a4c1264727ae89a.js","static/css/72465cc1225f28a2.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/src/features/autoSave/useAutoSave.tsx

@@ -1,177 +0,0 @@
-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 delayedTimeout = setTimeout(() => {
-        setAutoSaveStatusDelayed(autoSaveStatusActual);
-      }, autoSaveStatusDelay);
-
-      return () => {
-        clearTimeout(delayedTimeout);
-      };
-    }
-
-    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/__tests__/createCustomType.test.ts

@@ -1,159 +0,0 @@
-import { describe, expect } from "vitest";
-import { createCustomType } from "@src/features/customTypes/customTypesTable/createCustomType";
-
-describe("createCustomType test suite", () => {
-  it("should create a custom type with repeatable true", () => {
-    expect(createCustomType("id", "lama", true, "custom"))
-      .toMatchInlineSnapshot(`
-          {
-            "format": "custom",
-            "id": "id",
-            "json": {
-              "Main": {
-                "uid": {
-                  "config": {
-                    "label": "UID",
-                  },
-                  "type": "UID",
-                },
-              },
-            },
-            "label": "lama",
-            "repeatable": true,
-            "status": true,
-          }
-        `);
-  });
-
-  it("should create a custom type with repeatable false", () => {
-    const result = createCustomType("id", "lama", false, "custom");
-    expect(result.id).toBe("id");
-    expect(result.label).toBe("lama");
-    expect(result.format).toBe("custom");
-    expect(result.json).toHaveProperty("Main");
-    expect(result).toMatchInlineSnapshot(`
-        {
-          "format": "custom",
-          "id": "id",
-          "json": {
-            "Main": {},
-          },
-          "label": "lama",
-          "repeatable": false,
-          "status": true,
-        }
-      `);
-  });
-
-  it("should create a page type with a slice zone", () => {
-    const result = createCustomType("🥪", "label", true, "page");
-    expect(result.format).toBe("page");
-    expect(result.json).toHaveProperty("Main");
-    expect(result.json.Main).toHaveProperty("slices");
-    expect(result.json).toHaveProperty("SEO & Metadata");
-    expect(result).toMatchInlineSnapshot(`
-        {
-          "format": "page",
-          "id": "🥪",
-          "json": {
-            "Main": {
-              "slices": {
-                "config": {
-                  "choices": {},
-                },
-                "fieldset": "Slice Zone",
-                "type": "Slices",
-              },
-              "uid": {
-                "config": {
-                  "label": "UID",
-                },
-                "type": "UID",
-              },
-            },
-            "SEO & Metadata": {
-              "meta_description": {
-                "config": {
-                  "label": "Meta Description",
-                  "placeholder": "A brief summary of the page",
-                },
-                "type": "Text",
-              },
-              "meta_image": {
-                "config": {
-                  "constraint": {
-                    "height": 1260,
-                    "width": 2400,
-                  },
-                  "label": "Meta Image",
-                  "thumbnails": [],
-                },
-                "type": "Image",
-              },
-              "meta_title": {
-                "config": {
-                  "label": "Meta Title",
-                  "placeholder": "A title of the page used for social media and search engines",
-                },
-                "type": "Text",
-              },
-            },
-          },
-          "label": "label",
-          "repeatable": true,
-          "status": true,
-        }
-      `);
-  });
-});
-
-it("when non repeatable page type is should contain Main with a slice-zone, no uid, and a SEO tab", () => {
-  const result = createCustomType("foo", "bar", false, "page");
-  expect(result).toMatchInlineSnapshot(`
-      {
-        "format": "page",
-        "id": "foo",
-        "json": {
-          "Main": {
-            "slices": {
-              "config": {
-                "choices": {},
-              },
-              "fieldset": "Slice Zone",
-              "type": "Slices",
-            },
-          },
-          "SEO & Metadata": {
-            "meta_description": {
-              "config": {
-                "label": "Meta Description",
-                "placeholder": "A brief summary of the page",
-              },
-              "type": "Text",
-            },
-            "meta_image": {
-              "config": {
-                "constraint": {
-                  "height": 1260,
-                  "width": 2400,
-                },
-                "label": "Meta Image",
-                "thumbnails": [],
-              },
-              "type": "Image",
-            },
-            "meta_title": {
-              "config": {
-                "label": "Meta Title",
-                "placeholder": "A title of the page used for social media and search engines",
-              },
-              "type": "Text",
-            },
-          },
-        },
-        "label": "bar",
-        "repeatable": false,
-        "status": true,
-      }
-    `);
-});

package/src/features/customTypes/customTypesTable/createCustomType.ts

@@ -1,107 +0,0 @@
-import { CustomType } from "@prismicio/types-internal/lib/customtypes";
-import type { CustomTypeFormat } from "@slicemachine/manager";
-
-export function createCustomType(
-  id: string,
-  label: string,
-  repeatable: boolean,
-  format: CustomTypeFormat,
-): CustomType {
-  const mainTab = makeMainTab(repeatable, format);
-
-  return {
-    id,
-    label,
-    format,
-    repeatable,
-    json: mainTab,
-    status: true,
-  };
-}
-
-function makeMainTab(
-  repeatable: boolean,
-  format: CustomTypeFormat,
-): CustomType["json"] {
-  if (repeatable === false && format === "page") {
-    return { ...DEFAULT_MAIN_WITH_SLICE_ZONE, ...DEFAULT_SEO_TAB };
-  }
-
-  if (repeatable === false) {
-    return DEFAULT_MAIN;
-  }
-
-  if (format === "page") {
-    return {
-      ...DEFAULT_MAIN_WITH_UID_AND_SLICE_ZONE,
-      ...DEFAULT_SEO_TAB,
-    };
-  }
-
-  return DEFAULT_MAIN_WITH_UID;
-}
-
-const DEFAULT_MAIN: CustomType["json"] = {
-  Main: {},
-};
-
-const DEFAULT_MAIN_WITH_SLICE_ZONE: CustomType["json"] = {
-  Main: {
-    slices: {
-      config: {
-        choices: {},
-      },
-      fieldset: "Slice Zone",
-      type: "Slices",
-    },
-  },
-};
-
-const DEFAULT_MAIN_WITH_UID: CustomType["json"] = {
-  Main: {
-    uid: {
-      config: {
-        label: "UID",
-      },
-      type: "UID",
-    },
-  },
-};
-
-const DEFAULT_MAIN_WITH_UID_AND_SLICE_ZONE: CustomType["json"] = {
-  Main: {
-    ...DEFAULT_MAIN_WITH_UID.Main,
-    ...DEFAULT_MAIN_WITH_SLICE_ZONE.Main,
-  },
-};
-
-const DEFAULT_SEO_TAB: CustomType["json"] = {
-  "SEO & Metadata": {
-    meta_description: {
-      config: {
-        label: "Meta Description",
-        placeholder: "A brief summary of the page",
-      },
-      type: "Text",
-    },
-    meta_image: {
-      config: {
-        constraint: {
-          height: 1260,
-          width: 2400,
-        },
-        label: "Meta Image",
-        thumbnails: [],
-      },
-      type: "Image",
-    },
-    meta_title: {
-      config: {
-        label: "Meta Title",
-        placeholder:
-          "A title of the page used for social media and search engines",
-      },
-      type: "Text",
-    },
-  },
-};

package/src/features/legacyState/actions/getLegacySliceMachineState.ts

@@ -1,53 +0,0 @@
-import ServerState from "@models/server/ServerState";
-import { Slices } from "@lib/models/common/Slice";
-import { CustomTypes } from "@lib/models/common/CustomType";
-import { managerClient } from "@src/managerClient";
-
-export async function getLegacySliceMachineState() {
-  const rawState = await managerClient.getState();
-
-  // `rawState` from the client contains non-SM-specific models. We need to
-  // transform the data to something SM recognizes.
-  const state: ServerState = {
-    ...rawState,
-    libraries: rawState.libraries.map((library) => {
-      return {
-        ...library,
-        components: library.components.map((component) => {
-          return {
-            ...component,
-            model: Slices.toSM(component.model),
-
-            // Replace screnshot Blobs with URLs.
-            screenshots: Object.fromEntries(
-              Object.entries(component.screenshots).map(
-                ([variationID, screenshot]) => {
-                  return [
-                    variationID,
-                    {
-                      ...screenshot,
-                      url: URL.createObjectURL(screenshot.data),
-                    },
-                  ];
-                },
-              ),
-            ),
-          };
-        }),
-      };
-    }),
-    customTypes: rawState.customTypes.map((customTypeModel) => {
-      return CustomTypes.toSM(customTypeModel);
-    }),
-    remoteCustomTypes: rawState.remoteCustomTypes.map(
-      (remoteCustomTypeModel) => {
-        return CustomTypes.toSM(remoteCustomTypeModel);
-      },
-    ),
-    remoteSlices: rawState.remoteSlices.map((remoteSliceModel) => {
-      return Slices.toSM(remoteSliceModel);
-    }),
-  };
-
-  return state;
-}

package/src/features/legacyState/useLegacySliceMachineState.ts

@@ -1,7 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-
-import { getLegacySliceMachineState } from "./actions/getLegacySliceMachineState";
-
-export function useLegacySliceMachineState() {
-  return useRequest(getLegacySliceMachineState, []);
-}

package/src/hooks/useModelStatus.ts

@@ -1,78 +0,0 @@
-import {
-  computeModelStatus,
-  ModelStatus,
-} from "@lib/models/common/ModelStatus";
-import { getAuthStatus } from "@src/modules/environment";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { useSelector } from "react-redux";
-import { useNetwork } from "./useNetwork";
-import {
-  hasLocal,
-  LocalOrRemoteCustomType,
-  LocalOrRemoteModel,
-  LocalOrRemoteSlice,
-} from "@lib/models/common/ModelData";
-
-// Slices and Custom Types needs to be separated as Ids are not unique amongst each others.
-export interface ModelStatusInformation {
-  modelsStatuses: {
-    slices: { [sliceId: string]: ModelStatus };
-    customTypes: { [ctId: string]: ModelStatus };
-  };
-  authStatus: AuthStatus;
-  isOnline: boolean;
-}
-
-function computeStatuses(
-  models: LocalOrRemoteCustomType[],
-  userHasAccessToModels: boolean,
-): { [sliceId: string]: ModelStatus };
-function computeStatuses(
-  models: LocalOrRemoteSlice[],
-  userHasAccessToModels: boolean,
-): { [sliceId: string]: ModelStatus };
-function computeStatuses(
-  models: LocalOrRemoteModel[],
-  userHasAccessToModels: boolean,
-) {
-  return models.reduce<{ [id: string]: ModelStatus }>(
-    (acc, model) => {
-      const { status } = computeModelStatus(model, userHasAccessToModels);
-
-      return {
-        ...acc,
-        [hasLocal(model) ? model.local.id : model.remote.id]: status,
-      };
-    },
-    {} as { [sliceId: string]: ModelStatus },
-  );
-}
-
-export const useModelStatus = ({
-  slices = [],
-  customTypes = [],
-}: {
-  slices?: LocalOrRemoteSlice[];
-  customTypes?: LocalOrRemoteCustomType[];
-}): ModelStatusInformation => {
-  const isOnline = useNetwork();
-  const { authStatus } = useSelector((store: SliceMachineStoreType) => ({
-    authStatus: getAuthStatus(store),
-  }));
-  const userHasAccessToModels =
-    isOnline &&
-    authStatus != AuthStatus.FORBIDDEN &&
-    authStatus != AuthStatus.UNAUTHORIZED;
-
-  const modelsStatuses = {
-    slices: computeStatuses(slices, userHasAccessToModels),
-    customTypes: computeStatuses(customTypes, userHasAccessToModels),
-  };
-
-  return {
-    modelsStatuses,
-    authStatus,
-    isOnline,
-  };
-};

package/src/hooks/useUnSyncChanges.ts

@@ -1,88 +0,0 @@
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { getFrontendSlices, getLibraries } from "@src/modules/slices";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { useSelector } from "react-redux";
-import { ModelStatusInformation, useModelStatus } from "./useModelStatus";
-import {
-  LocalOrRemoteCustomType,
-  RemoteOnlySlice,
-  getModelId,
-  isRemoteOnly,
-} from "@lib/models/common/ModelData";
-
-export const unSyncStatuses = [
-  ModelStatus.New,
-  ModelStatus.Modified,
-  ModelStatus.Deleted,
-];
-
-export interface UnSyncChanges extends ModelStatusInformation {
-  unSyncedSlices: ComponentUI[];
-  unSyncedCustomTypes: LocalOrRemoteCustomType[];
-}
-
-// ComponentUI are manipulated on all the relevant pages
-// But the data is not available for remote only slices
-// which have been deleted locally
-// Should revisit this with the sync improvements
-const wrapDeletedSlice = (s: RemoteOnlySlice): ComponentUI => ({
-  model: s.remote,
-  screenshots: {},
-  from: "",
-  href: "",
-  pathToSlice: "",
-  fileName: "",
-  extension: "",
-});
-
-export const useUnSyncChanges = (): UnSyncChanges => {
-  const { customTypes, slices, libraries } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      customTypes: selectAllCustomTypes(store),
-      slices: getFrontendSlices(store),
-      libraries: getLibraries(store),
-    }),
-  );
-
-  const { modelsStatuses, authStatus, isOnline } = useModelStatus({
-    slices,
-    customTypes,
-  });
-
-  const localComponents: ComponentUI[] = libraries.flatMap(
-    (lib) => lib.components,
-  );
-
-  const deletedComponents: ComponentUI[] = slices
-    .filter(isRemoteOnly)
-    .map(wrapDeletedSlice);
-
-  const components: ComponentUI[] = localComponents
-    .concat(deletedComponents)
-    .sort((s1, s2) => (s1.model.name > s2.model.name ? 1 : -1));
-
-  const unSyncedSlices = components.filter(
-    (component) =>
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      modelsStatuses.slices[component.model.id] &&
-      unSyncStatuses.includes(modelsStatuses.slices[component.model.id]),
-  );
-  const unSyncedCustomTypes = customTypes.filter(
-    (customType) =>
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      modelsStatuses.customTypes[getModelId(customType)] &&
-      unSyncStatuses.includes(
-        modelsStatuses.customTypes[getModelId(customType)],
-      ),
-  );
-
-  return {
-    unSyncedSlices,
-    unSyncedCustomTypes,
-    modelsStatuses,
-    authStatus,
-    isOnline,
-  };
-};