Merge remote-tracking branch 'origin/main' into repeatable-link

packages/adapter-next/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-next",
-	"version": "0.3.55",
+	"version": "0.3.56",
 	"description": "Slice Machine adapter for Next.js.",
 	"keywords": [
 		"typescript",

packages/adapter-nuxt/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-nuxt",
-	"version": "0.3.55",
+	"version": "0.3.56",
 	"description": "Slice Machine adapter for Nuxt 3.",
 	"keywords": [
 		"typescript",

packages/adapter-nuxt2/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-nuxt2",
-	"version": "0.3.55",
+	"version": "0.3.56",
 	"description": "Slice Machine adapter for Nuxt 2.",
 	"keywords": [
 		"typescript",

packages/adapter-sveltekit/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-sveltekit",
-	"version": "0.3.55",
+	"version": "0.3.56",
 	"description": "Slice Machine adapter for SvelteKit.",
 	"keywords": [
 		"typescript",

packages/init/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/init",
-	"version": "2.10.12",
+	"version": "2.10.13",
 	"description": "Init Prismic Slice Machine in your project",
 	"keywords": [
 		"typescript",

packages/manager/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/manager",
-	"version": "0.22.1",
+	"version": "0.22.2",
 	"description": "Manage all aspects of a Slice Machine project.",
 	"repository": {
 		"type": "git",

packages/plugin-kit/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/plugin-kit",
-	"version": "0.4.55",
+	"version": "0.4.56",
 	"description": "A set of helpers to develop and run Slice Machine plugins",
 	"keywords": [
 		"typescript",

packages/slice-machine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slice-machine-ui",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "license": "MIT",
   "description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.",
   "repository": {
@@ -43,9 +43,9 @@
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
     "@prismicio/client": "7.11.0",
-    "@prismicio/editor-fields": "0.4.54",
-    "@prismicio/editor-support": "0.4.54",
-    "@prismicio/editor-ui": "0.4.54",
+    "@prismicio/editor-fields": "0.4.57",
+    "@prismicio/editor-support": "0.4.57",
+    "@prismicio/editor-ui": "0.4.57",
     "@prismicio/mock": "0.3.3",
     "@prismicio/mocks": "2.4.0",
     "@prismicio/simulator": "0.1.4",

packages/slice-machine/src/domain/__tests__/customType.test.ts

@@ -582,6 +582,73 @@ describe("CustomTypeModel test suite", () => {
     );
   });
 
+  it("reorderField should exclude UID field from reordering on repeatable page type", () => {
+    expect(
+      JSON.stringify(
+        CustomTypeModel.reorderField({
+          customType: {
+            ...mockCustomType,
+            format: "page",
+            json: {
+              mainSection: {
+                uid: {
+                  config: {
+                    label: "MainSectionField",
+                  },
+                  type: "UID",
+                },
+                booleanField: {
+                  config: {
+                    label: "BooleanField",
+                  },
+                  type: "Boolean",
+                },
+                textField: {
+                  config: {
+                    label: "TextField",
+                  },
+                  type: "Text",
+                },
+              },
+              anotherSection,
+            },
+          },
+          sectionId: "mainSection",
+          sourceIndex: 0,
+          destinationIndex: 1,
+        }),
+      ),
+    ).toEqual(
+      JSON.stringify({
+        ...mockCustomType,
+        format: "page",
+        json: {
+          mainSection: {
+            uid: {
+              config: {
+                label: "MainSectionField",
+              },
+              type: "UID",
+            },
+            textField: {
+              config: {
+                label: "TextField",
+              },
+              type: "Text",
+            },
+            booleanField: {
+              config: {
+                label: "BooleanField",
+              },
+              type: "Boolean",
+            },
+          },
+          anotherSection,
+        },
+      }),
+    );
+  });
+
   it("addUIDField should return the given custom type with the uid field (with default placeholder) added to the first section", () => {
     expect(
       CustomTypeModel.addUIDField("UID label", {

packages/slice-machine/src/domain/customType.ts

@@ -430,8 +430,21 @@ export function reorderField(args: ReorderFieldArgs): CustomType {
     ),
   );
 
+  // On repeatable pages UID field shouldn't be reordered
+  const isRepeatablePage =
+    customType.format === "page" && customType.repeatable;
+
+  // Remove UID field from the fields to be reordered
+  const sectionFieldsWithoutUid = Object.fromEntries(
+    Object.entries(sectionFields).filter(([_, value]) => value.type !== "UID"),
+  );
+
+  const fieldsToReorder = isRepeatablePage
+    ? sectionFieldsWithoutUid
+    : sectionFields;
+
   const updatedSection = reorderFields({
-    fields: sectionFields,
+    fields: fieldsToReorder,
     sourceIndex,
     destinationIndex,
   });
@@ -442,10 +455,20 @@ export function reorderField(args: ReorderFieldArgs): CustomType {
     updatedSection[sliceZoneKey] = sliceZoneField;
   }
 
+  // Put the UID field back at the beginning of the reordered fields
+  const updatedSectionEntries = Object.entries(updatedSection);
+  const uidFieldEntry = Object.entries(sectionFields).find(
+    ([_, field]) => field.type === "UID",
+  );
+  if (uidFieldEntry) {
+    updatedSectionEntries.unshift(uidFieldEntry);
+  }
+  const updatedSectionWithUid = Object.fromEntries(updatedSectionEntries);
+
   const newCustomType = updateSection({
     customType,
     sectionId,
-    updatedSection,
+    updatedSection: isRepeatablePage ? updatedSectionWithUid : updatedSection,
   });
 
   return newCustomType;
@@ -537,6 +560,7 @@ export function reorderFields<T>(args: ReorderFieldsArgs<T>) {
   const fieldEntries = Object.entries(fields);
   const [removedEntry] = fieldEntries.splice(sourceIndex, 1);
   fieldEntries.splice(destinationIndex, 0, removedEntry);
+
   const reorderedFields = Object.fromEntries(fieldEntries);
 
   return reorderedFields;

packages/slice-machine/src/features/onboarding/SliceMachineOnboardingGuide/OnboardingProvider.tsx

@@ -46,12 +46,7 @@ export const OnboardingProvider = ({
   onComplete,
 }: OnboardingProviderProps) => {
   const steps = onboardingSteps;
-
-  const [stepStatus, setStepStatus] = usePersistedState(
-    "onboardingSteps",
-    getInitialState(steps),
-    { schema: onboardingStepStatusesSchema },
-  );
+  const [stepStatus, setStepStatus] = useStepStatus();
 
   const toggleStepComplete = (step: OnboardingStep) => {
     const newCompleteState = !isStepComplete(step);
@@ -101,6 +96,24 @@ export const OnboardingProvider = ({
   );
 };
 
+function useStepStatus() {
+  return usePersistedState(
+    "onboardingSteps",
+    getInitialState(onboardingSteps),
+    { schema: onboardingStepStatusesSchema },
+  );
+}
+
+export function useIsOnboardingCompleted() {
+  const [stepStatus] = useStepStatus();
+
+  const completedStepCount = onboardingSteps.filter(
+    (step) => Boolean(stepStatus[step.id]) || Boolean(step.defaultCompleted),
+  ).length;
+
+  return completedStepCount === onboardingSteps.length;
+}
+
 export const useOnboardingContext = () => {
   const context = useContext(OnboardingContext);
 

packages/slice-machine/src/features/onboarding/SliceMachineOnboardingGuide/SliceMachineOnboardingGuide.tsx

@@ -6,23 +6,28 @@ import {
   Text,
   useMediaQuery,
 } from "@prismicio/editor-ui";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import styles from "./OnboardingGuide.module.css";
 import { OnboardingProgressStepper } from "./OnboardingProgressStepper";
-import { OnboardingProvider, useOnboardingContext } from "./OnboardingProvider";
+import {
+  OnboardingProvider,
+  useIsOnboardingCompleted,
+  useOnboardingContext,
+} from "./OnboardingProvider";
 import { OnboardingTutorial } from "./OnboardingTutorial/OnboardingTutorial";
 
 export function SliceMachineOnboardingGuide() {
-  const [isVisible, setVisible] = useState(true);
+  const isComplete = useIsOnboardingCompleted();
+  const [isVisible, setVisible] = useState(!isComplete);
   const confetti = useConfetti({ onAnimationEnd: () => setVisible(false) });
 
   if (!isVisible) return null;
 
   return (
     <OnboardingProvider onComplete={confetti.throwConfetti}>
       <div ref={confetti.confettiContainerRef} className={styles.container}>
-        <OnboardingGuideCard setVisible={setVisible} />
+        <OnboardingGuideCard />
         <div
           ref={confetti.confettiCannonRef}
           className={styles.confettiCannon}
@@ -32,25 +37,11 @@ export function SliceMachineOnboardingGuide() {
   );
 }
 
-type OnboardingGuideCardProps = {
-  setVisible: (isVisible: boolean) => void;
-};
-
-function OnboardingGuideCard(props: OnboardingGuideCardProps) {
-  const { setVisible } = props;
+function OnboardingGuideCard() {
   const { steps, completedStepCount, isComplete } = useOnboardingContext();
-  const isVisible = useMediaQuery({ min: "medium" });
+  const isMediumScreen = useMediaQuery({ min: "medium" });
 
-  const isMountedRef = useRef(false);
-  useEffect(() => {
-    // quick fix to prevent having the onboarding invisible but interactive when complete
-    if (!isMountedRef.current) {
-      isMountedRef.current = true;
-      setVisible(false);
-    }
-  }, [isVisible, setVisible]);
-
-  if (!isVisible) return null;
+  if (!isMediumScreen) return null;
 
   return (
     <div

packages/slice-machine/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -78,8 +78,10 @@ type OnSaveFieldProps = {
 const TabZone: FC<TabZoneProps> = ({ tabId }) => {
   const { customType, setCustomType } = useCustomTypeState();
   const customTypeSM = CustomTypes.toSM(customType);
+
   const sliceZone = customTypeSM.tabs.find((tab) => tab.key === tabId)
     ?.sliceZone;
+
   const allFields: TabFields =
     customTypeSM.tabs.find((tab) => tab.key === tabId)?.value ?? [];
   // the uid field is moved to the top of the editor on repeatable pages

packages/start-slicemachine/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "start-slicemachine",
-	"version": "0.12.35",
+	"version": "0.12.36",
 	"description": "Start Slice Machine from within a project.",
 	"repository": {
 		"type": "git",