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

package/src/domain/__tests__/customType.test.ts

@@ -393,32 +393,39 @@ describe("CustomTypeModel test suite", () => {
 
   it("addField should return the given custom type with the field added to the section", () => {
     expect(
-      CustomTypeModel.addField({
-        customType: mockCustomType,
-        sectionId: "mainSection",
-        newFieldId: "newField",
-        newField: {
-          config: {
-            label: "NewField",
-          },
-          type: "UID",
-        },
-      }),
-    ).toEqual({
-      ...mockCustomType,
-      json: {
-        ...mockCustomType.json,
-        mainSection: {
-          ...mainSection,
+      JSON.stringify(
+        CustomTypeModel.addField({
+          customType: mockCustomType,
+          sectionId: "mainSection",
+          newFieldId: "newField",
           newField: {
             config: {
               label: "NewField",
             },
             type: "UID",
           },
+        }),
+      ),
+    ).toEqual(
+      JSON.stringify({
+        ...mockCustomType,
+        json: {
+          ...mockCustomType.json,
+          mainSection: {
+            uid: mainSection.uid,
+            booleanField: mainSection.booleanField,
+            groupField: mainSection.groupField,
+            newField: {
+              config: {
+                label: "NewField",
+              },
+              type: "UID",
+            },
+            slices: mainSection.slices,
+          },
         },
-      },
-    });
+      }),
+    );
   });
 
   it("deleteField should return the given custom type without the field", () => {
@@ -782,4 +789,183 @@ describe("CustomTypeModel test suite", () => {
       },
     });
   });
+
+  it("should create a custom type with repeatable true", () => {
+    expect(
+      CustomTypeModel.create({
+        id: "id",
+        label: "lama",
+        repeatable: true,
+        format: "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 = CustomTypeModel.create({
+      id: "id",
+      label: "lama",
+      repeatable: false,
+      format: "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 = CustomTypeModel.create({
+      id: "🥪",
+      label: "label",
+      repeatable: true,
+      format: "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 = CustomTypeModel.create({
+    id: "foo",
+    label: "bar",
+    repeatable: false,
+    format: "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/domain/customType.ts

@@ -104,8 +104,15 @@ type GetGroupFieldArgs = {
   groupFieldId: string;
 };
 
-export function getFormat(custom: CustomType): CustomTypeFormat {
-  return custom.format ?? "custom";
+type CreateArgs = {
+  format: CustomTypeFormat;
+  id: string;
+  label: string;
+  repeatable: boolean;
+};
+
+export function getFormat(customType: CustomType): CustomTypeFormat {
+  return customType.format ?? "custom";
 }
 
 export function getSectionEntries(
@@ -363,15 +370,32 @@ export function renameSection(
 
 export function addField(args: AddFieldArgs): CustomType {
   const { customType, sectionId, newField, newFieldId } = args;
+  const sectionJson = customType.json[sectionId];
+  const maybeSliceZoneEntry = getSectionSliceZoneEntry(customType, sectionId);
+
+  // Separate the fields into slices and non-slices
+  const sectionFields = Object.fromEntries(
+    Object.entries(sectionJson).filter(
+      ([_, value]) => value.type !== SlicesFieldType,
+    ),
+  );
+
+  const updatedSection = {
+    ...sectionFields,
+    // Add the new field to the section
+    [newFieldId]: newField,
+  };
+
+  // Merge the SlicesFieldType field back into the section, if it exists
+  if (maybeSliceZoneEntry !== undefined) {
+    const [sliceZoneKey, sliceZoneField] = maybeSliceZoneEntry;
+    updatedSection[sliceZoneKey] = sliceZoneField;
+  }
 
   const newCustomType = updateSection({
     customType,
     sectionId,
-    updatedSection: {
-      ...customType.json[sectionId],
-      // Add the new field to the section
-      [newFieldId]: newField,
-    },
+    updatedSection,
   });
 
   return newCustomType;
@@ -633,3 +657,104 @@ export function updateGroupFields(
     },
   };
 }
+
+export function create(args: CreateArgs) {
+  const { id, label, repeatable, format } = args;
+  const mainTab = makeMainTab(repeatable, format);
+
+  return {
+    format,
+    id,
+    json: mainTab,
+    label,
+    repeatable,
+    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/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/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);
   }
 }