slice-machine-ui 1.23.2-beta.8 → 1.24.0

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

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,f,n,u,d,h,l,k,j,p,g,o,r){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[a,j,p,"static/chunks/pages/index-cf93d16e9c63b6db.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,f,"static/css/37153180c3b0dd66.css","static/chunks/pages/changes-92c84f6cac0285fd.js"],"/custom-types":[a,j,p,"static/chunks/pages/custom-types-3c8e721ec6802127.js"],"/custom-types/[customTypeId]":[s,n,u,d,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/custom-types/[customTypeId]-97ab3b90b85d645d.js"],"/labs":["static/chunks/pages/labs-ee206005948f8e87.js"],"/page-types/[pageTypeId]":[s,n,u,d,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/page-types/[pageTypeId]-84a22c5e480d3fa9.js"],"/slices":[s,t,b,c,f,"static/css/f8eb526e10bc2441.css","static/chunks/pages/slices-b0b58192a87df822.js"],"/slices/[lib]/[sliceName]/[variation]":[s,t,n,u,d,h,e,b,i,l,c,k,f,"static/css/b22c0750c14cc089.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-608d206d10a719e3.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-52c3e1f9d14160b8.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-01f422cea8066349.js","static/chunks/799-d95a93e965557aeb.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-387e3f23d717c53d.js","static/chunks/727-358d7fae68a880b3.js","static/css/be1f49e49a5aa7eb.css","static/chunks/474-5a072e6fac61f703.js","static/chunks/904-1ff7519adece2b55.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/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,
-  };
-};

package/test/components/LoginModal.test.tsx

@@ -1,67 +0,0 @@
-// @vitest-environment jsdom
-
-import { describe, test, expect, vi } from "vitest";
-import React from "react";
-import { render } from "@testing-library/react";
-import LoginModal from "@components/LoginModal";
-import { FrontEndEnvironment } from "@lib/models/common/Environment";
-import { useSelector } from "react-redux";
-
-const mockDispatch = vi.fn();
-vi.mock("react-beautiful-dnd", () => {
-  return {};
-});
-vi.mock("react-redux", () => ({
-  useSelector: vi.fn(),
-  useDispatch: () => mockDispatch,
-}));
-
-const useSelectorMock = vi.mocked(useSelector);
-
-const App = () => <LoginModal />;
-
-describe("LoginModal", () => {
-  window.open = vi.fn();
-
-  const div = document.createElement("div");
-  div.id = "__next";
-  document.body.appendChild(div);
-
-  test("when given a prismic url in env it should open to prismic.io/dashboard", () => {
-    useSelectorMock.mockImplementation(() => ({
-      env: {
-        manifest: {
-          apiEndpoint: "https://foo.prismic.io/api/v2",
-        },
-      } as FrontEndEnvironment,
-      isOpen: true,
-      isLoginLoading: true,
-    }));
-    const result = render(<App />);
-
-    expect(result.getByText("Click here").closest("a")).toHaveAttribute(
-      "href",
-      // Since we're not using the `start-slicemachine` server proxy, port defaults to Next/React Testing Library's default port
-      "https://prismic.io/dashboard/cli/login?source=slice-machine&port=3000&path=/api/auth",
-    );
-  });
-
-  test("when given wroom.io url it should open to wroom.io/dashboard", () => {
-    useSelectorMock.mockImplementation(() => ({
-      env: {
-        manifest: {
-          apiEndpoint: "https://foo.wroom.io/api/v2",
-        },
-      } as FrontEndEnvironment,
-      isOpen: true,
-      isLoginLoading: true,
-    }));
-    const result = render(<App />);
-
-    expect(result.getByText("Click here").closest("a")).toHaveAttribute(
-      "href",
-      // Since we're not using the `start-slicemachine` server proxy, port defaults to Next/React Testing Library's default port
-      "https://wroom.io/dashboard/cli/login?source=slice-machine&port=3000&path=/api/auth",
-    );
-  });
-});

package/test/src/hooks/useModelStatus.test.ts

@@ -1,115 +0,0 @@
-import { describe, test, beforeEach, expect, vi } from "vitest";
-import { useModelStatus } from "../../../src/hooks/useModelStatus";
-import * as networkHook from "../../../src/hooks/useNetwork";
-import { AuthStatus } from "@src/modules/userContext/types";
-
-import { Slices } from "@lib/models/common/Slice";
-import SliceMock from "../../__fixtures__/sliceModel";
-
-import { CustomTypes } from "@lib/models/common/CustomType";
-import { customTypeMock } from "../../__fixtures__/customType";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
-
-const mockSelector = vi.fn();
-vi.mock("react-redux", async () => {
-  const actual: typeof import("react-redux") =
-    await vi.importActual("react-redux");
-
-  return {
-    ...actual,
-    useSelector: () => mockSelector(),
-  };
-});
-
-const BaseSliceMock = {
-  ...SliceMock,
-  variations: SliceMock.variations.map((variation) => {
-    // @ts-expect-error we know imageUrl is optional
-    delete variation["imageUrl"];
-    return variation;
-  }),
-};
-const sliceModel = Slices.toSM(BaseSliceMock);
-const customTypeModel = CustomTypes.toSM(customTypeMock);
-
-describe("[useModelStatus hook]", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("it should return the model status correctly", () => {
-    vi.spyOn(networkHook, "useNetwork").mockImplementation(() => true); // isOnline
-    mockSelector.mockReturnValue({ authStatus: AuthStatus.AUTHORIZED });
-
-    const result = useModelStatus({
-      slices: [{ local: sliceModel, remote: sliceModel, localScreenshots: {} }],
-      customTypes: [{ local: customTypeModel }],
-    });
-
-    expect(result).toEqual({
-      modelsStatuses: {
-        slices: { [sliceModel.id]: ModelStatus.Synced },
-        customTypes: { [customTypeModel.id]: ModelStatus.New },
-      },
-      authStatus: AuthStatus.AUTHORIZED,
-      isOnline: true,
-    });
-  });
-
-  test("it should return Unknown status is the user doesn't have internet", () => {
-    vi.spyOn(networkHook, "useNetwork").mockImplementation(() => false); // isOnline
-    mockSelector.mockReturnValue({ authStatus: AuthStatus.AUTHORIZED });
-
-    const result = useModelStatus({
-      slices: [{ local: sliceModel, remote: sliceModel, localScreenshots: {} }],
-      customTypes: [{ local: customTypeModel }],
-    });
-
-    expect(result).toEqual({
-      modelsStatuses: {
-        slices: { [sliceModel.id]: ModelStatus.Unknown },
-        customTypes: { [customTypeModel.id]: ModelStatus.Unknown },
-      },
-      authStatus: AuthStatus.AUTHORIZED,
-      isOnline: false,
-    });
-  });
-
-  test("it should return Unknown status is the user is not connected to Prismic", () => {
-    vi.spyOn(networkHook, "useNetwork").mockImplementation(() => true); // isOnline
-    mockSelector.mockReturnValue({ authStatus: AuthStatus.UNAUTHORIZED });
-
-    const result = useModelStatus({
-      slices: [{ local: sliceModel, remote: sliceModel, localScreenshots: {} }],
-      customTypes: [{ local: customTypeModel }],
-    });
-
-    expect(result).toEqual({
-      modelsStatuses: {
-        slices: { [sliceModel.id]: ModelStatus.Unknown },
-        customTypes: { [customTypeModel.id]: ModelStatus.Unknown },
-      },
-      authStatus: AuthStatus.UNAUTHORIZED,
-      isOnline: true,
-    });
-  });
-
-  test("it should return Unknown status is the user doesn't have access to the repository", () => {
-    vi.spyOn(networkHook, "useNetwork").mockImplementation(() => true); // isOnline
-    mockSelector.mockReturnValue({ authStatus: AuthStatus.FORBIDDEN });
-
-    const result = useModelStatus({
-      slices: [{ local: sliceModel, remote: sliceModel, localScreenshots: {} }],
-      customTypes: [{ local: customTypeModel }],
-    });
-
-    expect(result).toEqual({
-      modelsStatuses: {
-        slices: { [sliceModel.id]: ModelStatus.Unknown },
-        customTypes: { [customTypeModel.id]: ModelStatus.Unknown },
-      },
-      authStatus: AuthStatus.FORBIDDEN,
-      isOnline: true,
-    });
-  });
-});