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

package/src/domain/slice.ts

@@ -1,11 +1,13 @@
 import type {
   CompositeSlice,
   LegacySlice,
+  SharedSlice,
 } 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, WidgetsArea } from "@lib/models/common/Slice";
+import { pascalize, snakelize } from "@lib/utils/str";
 
 type CopySliceVariationArgs = {
   copiedVariation: VariationSM;
@@ -46,6 +48,8 @@ type ReorderFieldArgs = {
   destinationIndex: number;
 };
 
+const DEFAULT_VARIATION_ID = "default";
+
 export function countMissingScreenshots(slice: ComponentUI): number {
   return slice.model.variations.length - Object.keys(slice.screenshots).length;
 }
@@ -243,3 +247,37 @@ export function reorderField(args: ReorderFieldArgs): ComponentUI {
     },
   };
 }
+
+export function buildEmptySliceModel(sliceName: string): SharedSlice {
+  return {
+    id: snakelize(sliceName),
+    type: "SharedSlice",
+    name: sliceName,
+    description: sliceName,
+    variations: [
+      {
+        id: DEFAULT_VARIATION_ID,
+        name: pascalize(DEFAULT_VARIATION_ID),
+        // Property not used yet. Fallback to "...".
+        docURL: "...",
+        // "initial" is fine here as default value.
+        version: "initial",
+        description: pascalize(DEFAULT_VARIATION_ID),
+        // Empty string is fine, we don't want to save imageUrl.
+        // We don't want to compare local and remote image with imageUrl.
+        // It will be striped anyway when doing the comparison.
+        imageUrl: "",
+      },
+    ],
+  };
+}
+
+export function rename(slice: ComponentUI, newSliceName: string): ComponentUI {
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      name: newSliceName,
+    },
+  };
+}

package/src/features/autoSave/AutoSaveStatusIndicator.tsx

@@ -1,10 +1,10 @@
 import { FC } from "react";
 import { Box, Icon, ProgressCircle, Text } from "@prismicio/editor-ui";
 
-import { AutoSaveStatus } from "./useAutoSave";
+import { ActionQueueStatus } from "@src/hooks/useActionQueue";
 
 type AutoSaveStatusIndicatorProps = {
-  status: AutoSaveStatus;
+  status: ActionQueueStatus;
 };
 
 export const AutoSaveStatusIndicator: FC<AutoSaveStatusIndicatorProps> = (
@@ -14,7 +14,7 @@ export const AutoSaveStatusIndicator: FC<AutoSaveStatusIndicatorProps> = (
   let autoSaveStatusInfo;
 
   switch (status) {
-    case "saving":
+    case "pending":
       autoSaveStatusInfo = {
         icon: <ProgressCircle color="grey11" />,
         text: "Saving...",
@@ -26,7 +26,7 @@ export const AutoSaveStatusIndicator: FC<AutoSaveStatusIndicatorProps> = (
         text: "Failed to save",
       };
       break;
-    case "saved":
+    case "done":
       autoSaveStatusInfo = {
         icon: <Icon name="check" color="green11" size="medium" />,
         text: "Auto-saved",

package/src/features/customTypes/PageTypeOnboarding.tsx

@@ -1,35 +1,15 @@
-import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { useState } from "react";
 import { Box, Button, Text } from "@prismicio/editor-ui";
 import { cache } from "@prismicio/editor-support/Suspense";
 
 import { CreateCustomTypeModal } from "@components/Forms/CreateCustomTypeModal";
-import { SliceMachineStoreType } from "@src/redux/type";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { isLoading } from "@src/modules/loading";
 import { BlankPageIcon } from "@src/icons/BlankPageIcon";
 import { getIsEmptyProject } from "@src/hooks/useIsEmptyProject";
 
 export function PageTypeOnboarding() {
-  const { openCreateCustomTypeModal } = useSliceMachineActions();
-  const { isCreatingCustomType } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      isCreatingCustomType: isLoading(
-        store,
-        LoadingKeysEnum.CREATE_CUSTOM_TYPE,
-      ),
-    }),
-  );
-  // State to ensure button loader is still visible while redirecting
-  const [isButtonLoading, setIsButtonLoading] = useState(false);
-
-  useEffect(() => {
-    if (isCreatingCustomType) {
-      setIsButtonLoading(true);
-      cache.clear(getIsEmptyProject, []);
-    }
-  }, [isCreatingCustomType]);
+  const [isCreatingCustomType, setIsCreatingCustomType] = useState(false);
+  const [isCreateCustomTypeModalOpen, setIsCreateCustomTypeModalOpen] =
+    useState(false);
 
   return (
     <Box
@@ -53,10 +33,25 @@ export function PageTypeOnboarding() {
           Welcome to Slice Machine. Your journey starts with your first page
           type — the model that you will use to create pages for your website.
         </Text>
-        <Button onClick={openCreateCustomTypeModal} loading={isButtonLoading}>
+        <Button
+          loading={isCreatingCustomType}
+          onClick={() => {
+            setIsCreateCustomTypeModalOpen(true);
+          }}
+        >
           Create a page type
         </Button>
-        <CreateCustomTypeModal format="page" origin="onboarding" />
+        <CreateCustomTypeModal
+          format="page"
+          isCreating={isCreatingCustomType}
+          isOpen={isCreateCustomTypeModalOpen}
+          origin="onboarding"
+          onCreateChange={(isCreating) => {
+            setIsCreatingCustomType(isCreating);
+            cache.clear(getIsEmptyProject, []);
+          }}
+          onOpenChange={setIsCreateCustomTypeModalOpen}
+        />
       </Box>
     </Box>
   );

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

@@ -9,17 +9,20 @@ import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 
 export async function convertCustomToPageType(
   customType: CustomType,
-  saveCustomType: (customType: CustomType) => void,
+  onSuccess: (newCustomType: CustomType) => void,
 ) {
   const customTypesMessages =
     CUSTOM_TYPES_MESSAGES[customType.format as CustomTypeFormat];
 
   try {
     const newCustomType = convertToPageType(customType);
-    await updateCustomType(newCustomType);
+    const { errors } = await updateCustomType(newCustomType);
 
-    // Update the custom type in the redux store
-    saveCustomType(newCustomType);
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess(newCustomType);
 
     toast.success(
       `${customTypesMessages.name({
@@ -28,11 +31,12 @@ export async function convertCustomToPageType(
       })} converted to page type`,
     );
   } catch (e) {
-    toast.error(
-      `Internal Error: ${customTypesMessages.name({
-        start: true,
-        plural: false,
-      })} not converted to page type`,
-    );
+    const errorMessage = `Internal Error: ${customTypesMessages.name({
+      start: true,
+      plural: false,
+    })} not converted to page type`;
+
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
   }
 }

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

@@ -0,0 +1,69 @@
+import { toast } from "react-toastify";
+import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
+import { ToastMessageWithPath } from "@components/ToasterContainer";
+import { CustomTypeFormat } from "@slicemachine/manager";
+import { telemetry, updateCustomType } from "@src/apiClient";
+import { create } from "@src/domain/customType";
+
+import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
+
+type DeleteCustomTypeArgs = {
+  format: CustomTypeFormat;
+  id: string;
+  label: string;
+  origin: CustomTypeOrigin;
+  repeatable: boolean;
+  onSuccess: (newCustomType: CustomType) => Promise<void>;
+};
+
+export type CustomTypeOrigin = "onboarding" | "table";
+
+export async function createCustomType(args: DeleteCustomTypeArgs) {
+  const { id, label, repeatable, format, onSuccess } = args;
+  const customTypesMessages = CUSTOM_TYPES_MESSAGES[format];
+
+  const newCustomType: CustomType = create({
+    id,
+    label,
+    repeatable,
+    format,
+  });
+
+  try {
+    const { errors } = await updateCustomType(newCustomType);
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    void telemetry.track({
+      event: "custom-type:created",
+      id: newCustomType.id,
+      name: label,
+      format: format,
+      type: repeatable ? "repeatable" : "single",
+      origin: "table",
+    });
+
+    await onSuccess(newCustomType);
+
+    toast.success(
+      ToastMessageWithPath({
+        message: `${customTypesMessages.name({
+          start: true,
+          plural: false,
+        })} saved successfully at `,
+        path: `./customtypes/${newCustomType.id}/index.json`,
+      }),
+    );
+  } catch (e) {
+    const errorMessage = `Internal Error: ${customTypesMessages.name({
+      start: true,
+      plural: false,
+    })} not saved`;
+
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}

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

@@ -1,8 +1,10 @@
+import { toast } from "react-toastify";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
 import { managerClient } from "@src/managerClient";
+import { CustomTypeFormat } from "@slicemachine/manager";
+
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
-import { CustomTypeFormat } from "@slicemachine/manager/*";
-import { toast } from "react-toastify";
 
 type DeleteCustomTypeArgs = {
   customType: CustomType;
@@ -17,7 +19,13 @@ export async function deleteCustomType({
     CUSTOM_TYPES_MESSAGES[customType.format as CustomTypeFormat];
 
   try {
-    await managerClient.customTypes.deleteCustomType({ id: customType.id });
+    const { errors } = await managerClient.customTypes.deleteCustomType({
+      id: customType.id,
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
 
     onSuccess();
 
@@ -32,6 +40,8 @@ export async function deleteCustomType({
       start: true,
       plural: false,
     })} could not be deleted`;
+
     console.error(errorMessage, e);
+    toast.error(errorMessage);
   }
 }

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

@@ -1,8 +1,10 @@
+import { toast } from "react-toastify";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
 import { managerClient } from "@src/managerClient";
-import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 import { CustomTypeFormat } from "@slicemachine/manager";
-import { toast } from "react-toastify";
+
+import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 
 type RenameCustomTypeArgs = {
   model: CustomType;
@@ -23,10 +25,14 @@ export async function renameCustomType({
       label: newLabel,
     };
 
-    await managerClient.customTypes.renameCustomType({
+    const { errors } = await managerClient.customTypes.renameCustomType({
       model: renamedCustomType,
     });
 
+    if (errors.length > 0) {
+      throw errors;
+    }
+
     onSuccess(renamedCustomType);
 
     toast.success(
@@ -40,8 +46,8 @@ export async function renameCustomType({
       start: true,
       plural: false,
     })} could not be renamed`;
-    console.error(errorMessage, e);
 
+    console.error(errorMessage, e);
     toast.error(errorMessage);
   }
 }

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

@@ -10,18 +10,16 @@ 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 { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 import { getFormat } from "@src/domain/customType";
 import { updateCustomType } from "@src/apiClient";
+import { ActionQueueStatus, useActionQueue } from "@src/hooks/useActionQueue";
 
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 
 type CustomTypeContext = {
   customType: CustomType;
-  autoSaveStatus: AutoSaveStatus;
+  actionQueueStatus: ActionQueueStatus;
   setCustomType: (customType: CustomType) => void;
 };
 
@@ -40,16 +38,17 @@ export function CustomTypeProvider(props: CustomTypeProviderProps) {
   const [customType, setCustomTypeState] = useState(initialCustomType);
   const format = getFormat(customType);
   const customTypeMessages = CUSTOM_TYPES_MESSAGES[format];
-  const { autoSaveStatus, setNextSave } = useAutoSave({
+  const { actionQueueStatus, setNextAction } = useActionQueue({
     errorMessage: customTypeMessages.autoSaveFailed,
   });
   const { saveCustomTypeSuccess } = useSliceMachineActions();
   const stableSaveCustomTypeSuccess = useStableCallback(saveCustomTypeSuccess);
+  const { syncChanges } = useAutoSync();
 
   const setCustomType = useCallback(
     (customType: CustomType) => {
       setCustomTypeState(customType);
-      setNextSave(async () => {
+      setNextAction(async () => {
         const { errors } = await updateCustomType(customType);
 
         if (errors.length > 0) {
@@ -58,18 +57,20 @@ export function CustomTypeProvider(props: CustomTypeProviderProps) {
 
         // Update available custom types store with new custom type
         stableSaveCustomTypeSuccess(customType);
+
+        syncChanges();
       });
     },
-    [setNextSave, stableSaveCustomTypeSuccess],
+    [setNextAction, stableSaveCustomTypeSuccess, syncChanges],
   );
 
   const contextValue: CustomTypeContext = useMemo(
     () => ({
-      autoSaveStatus,
+      actionQueueStatus,
       customType,
       setCustomType,
     }),
-    [autoSaveStatus, customType, setCustomType],
+    [actionQueueStatus, customType, setCustomType],
   );
 
   return (

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

@@ -39,7 +39,9 @@ export const CustomTypesBuilderPage: FC = () => {
   );
 
   useEffect(() => {
-    // TODO(DT-1801): When creating a custom type, don't redirect to the builder page until the custom type is created
+    // This is a fallback in case the user try to directly access a custom type
+    // that don't exist
+    // TODO(DT-1801): implement a 404 page.
     if (!selectedCustomType || !hasLocal(selectedCustomType)) {
       void router.replace("/");
     }
@@ -76,7 +78,7 @@ const CustomTypesBuilderPageWithProvider: React.FC<
       <CustomTypeProvider
         initialCustomType={CustomTypes.fromSM(customTypeFromStore)}
       >
-        {({ autoSaveStatus, customType, setCustomType }) => {
+        {({ actionQueueStatus, customType, setCustomType }) => {
           const format = getFormat(customType);
           const config = CUSTOM_TYPES_CONFIG[customTypeFromStore.format];
           const messages = CUSTOM_TYPES_MESSAGES[customTypeFromStore.format];
@@ -90,7 +92,7 @@ const CustomTypesBuilderPageWithProvider: React.FC<
                   page={customType.label ?? customType.id}
                 />
                 <AppLayoutActions>
-                  <AutoSaveStatusIndicator status={autoSaveStatus} />
+                  <AutoSaveStatusIndicator status={actionQueueStatus} />
                   {customType.format === "page" ? (
                     <PageSnippetDialog model={customType} />
                   ) : undefined}

package/src/features/customTypes/customTypesTable/CustomTypesTable.tsx

@@ -11,16 +11,9 @@ import {
 } from "@src/components/Table";
 import { ReusableIcon } from "@src/icons/ReusableIcon";
 import { UniqueIcon } from "@src/icons/UniqueIcon";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { type CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { type CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
-import {
-  useCustomTypes,
-  useCustomTypesAutoRevalidation,
-} from "./useCustomTypes";
-
 import {
   BlankSlate,
   BlankSlateImage,
@@ -29,18 +22,25 @@ import {
   BlankSlateActions,
   BlankSlateContent,
 } from "@src/components/BlankSlate";
+
+import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
 import { EditDropdown } from "../EditDropdown";
+import {
+  useCustomTypes,
+  useCustomTypesAutoRevalidation,
+} from "./useCustomTypes";
 
 type CustomTypesTableProps = {
   format: CustomTypeFormat;
   isCreatingCustomType: boolean;
+  openCreateCustomTypeModal: () => void;
 };
 
 export const CustomTypesTable: FC<CustomTypesTableProps> = ({
   format,
   isCreatingCustomType,
+  openCreateCustomTypeModal,
 }) => {
-  const { openCreateCustomTypeModal } = useSliceMachineActions();
   const router = useRouter();
   const { customTypes, updateCustomTypes } = useCustomTypes(format);
   const sortedCustomTypes = customTypes.sort(

package/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx

@@ -1,4 +1,4 @@
-import { type FC, Suspense } from "react";
+import { type FC, Suspense, useState } from "react";
 import {
   Button,
   ErrorBoundary,
@@ -7,7 +7,6 @@ import {
   DefaultErrorMessage,
 } from "@prismicio/editor-ui";
 import Head from "next/head";
-import { useSelector } from "react-redux";
 
 import {
   AppLayout,
@@ -16,13 +15,10 @@ import {
   AppLayoutContent,
   AppLayoutHeader,
 } from "@components/AppLayout";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { isLoading } from "@src/modules/loading";
-import { type SliceMachineStoreType } from "@src/redux/type";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
 import { CreateCustomTypeModal } from "@components/Forms/CreateCustomTypeModal";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import type { CustomTypeFormat } from "@slicemachine/manager";
+
 import { CustomTypesTable } from "./CustomTypesTable";
 
 type CustomTypesTablePageProps = {
@@ -33,15 +29,9 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
   format,
 }) => {
   const customTypesMessages = CUSTOM_TYPES_MESSAGES[format];
-  const { openCreateCustomTypeModal } = useSliceMachineActions();
-  const { isCreatingCustomType } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      isCreatingCustomType: isLoading(
-        store,
-        LoadingKeysEnum.CREATE_CUSTOM_TYPE,
-      ),
-    }),
-  );
+  const [isCreatingCustomType, setIsCreatingCustomType] = useState(false);
+  const [isCreateCustomTypeModalOpen, setIsCreateCustomTypeModalOpen] =
+    useState(false);
 
   return (
     <>
@@ -101,7 +91,9 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
                 <Button
                   data-cy="create-ct"
                   loading={isCreatingCustomType}
-                  onClick={openCreateCustomTypeModal}
+                  onClick={() => {
+                    setIsCreateCustomTypeModalOpen(true);
+                  }}
                   startIcon="add"
                 >
                   Create
@@ -113,8 +105,17 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
                 <CustomTypesTable
                   format={format}
                   isCreatingCustomType={isCreatingCustomType}
+                  openCreateCustomTypeModal={() => {
+                    setIsCreateCustomTypeModalOpen(true);
+                  }}
+                />
+                <CreateCustomTypeModal
+                  format={format}
+                  isCreating={isCreatingCustomType}
+                  isOpen={isCreateCustomTypeModalOpen}
+                  onCreateChange={setIsCreatingCustomType}
+                  onOpenChange={setIsCreateCustomTypeModalOpen}
                 />
-                <CreateCustomTypeModal format={format} />
               </Box>
             </AppLayoutContent>
           </AppLayout>

package/src/features/environments/actions/setEnvironment.ts

@@ -1,8 +1,8 @@
 import { revalidateData } from "@prismicio/editor-support/Suspense";
-import { Environment } from "@slicemachine/manager/client";
 
-import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
+import { Environment } from "@slicemachine/manager/client";
 import { managerClient } from "@src/managerClient";
+import { getState } from "@src/apiClient";
 
 import { getActiveEnvironment } from "./getActiveEnvironment";
 
@@ -13,6 +13,6 @@ export async function setEnvironment(
     environment: environment.domain,
   });
 
-  revalidateData(getActiveEnvironment, []);
-  revalidateData(getLegacySliceMachineState, []);
+  void revalidateData(getActiveEnvironment, []);
+  void revalidateData(getState, []);
 }

package/src/features/settings/SettingsPage.tsx

@@ -0,0 +1,47 @@
+import { Box } from "@prismicio/editor-ui";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { type FC, useEffect } from "react";
+
+import {
+  AppLayout,
+  AppLayoutBreadcrumb,
+  AppLayoutContent,
+  AppLayoutHeader,
+} from "@components/AppLayout";
+import { ConnectGitRepository } from "@src/features/settings/git/ConnectGitRepository";
+import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
+
+export const SettingsPage: FC = () => {
+  const gitIntegrationExperiment = useGitIntegrationExperiment();
+  const router = useRouter();
+
+  // TODO(DT-1801): implement a 404 page.
+  useEffect(() => {
+    if (!gitIntegrationExperiment.eligible) {
+      void router.replace("/");
+    }
+  }, [gitIntegrationExperiment.eligible, router]);
+
+  if (!gitIntegrationExperiment.eligible) {
+    return null;
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Settings - Slice Machine</title>
+      </Head>
+      <AppLayout>
+        <AppLayoutHeader>
+          <AppLayoutBreadcrumb folder="Settings" />
+        </AppLayoutHeader>
+        <AppLayoutContent>
+          <Box flexDirection="column" maxWidth={600}>
+            <ConnectGitRepository />
+          </Box>
+        </AppLayoutContent>
+      </AppLayout>
+    </>
+  );
+};