slice-machine-ui 2.9.2-beta.2 → 2.9.2-beta.4

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

@@ -7,6 +7,7 @@ import { ContentTabs } from "@/components/ContentTabs";
 import { ErrorBoundary } from "@/ErrorBoundary";
 import { MarkdownRenderer } from "@/features/documentation/MarkdownRenderer";
 import { useDocumentation } from "@/features/documentation/useDocumentation";
+import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { useAdapterName } from "@/hooks/useAdapterName";
 
 import styles from "./PageSnippetDialog.module.css";
@@ -19,12 +20,14 @@ const PageSnippetContent: FC<PageSnippetContentProps> = ({ model }) => {
     kind: "PageSnippet",
     data: { model },
   });
+  const { completeStep } = useOnboarding();
 
   if (documentation.length === 0) {
     return null;
   }
 
   const trackOpenSnippet = () => {
+    void completeStep("codePage");
     void telemetry.track({
       event: "page-type:open-snippet",
       framework: adapter,

package/src/features/onboarding/SliceMachineOnboardingGuide/SliceMachineOnboardingGuide.tsx

@@ -6,7 +6,7 @@ import {
   Text,
   useMediaQuery,
 } from "@prismicio/editor-ui";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import styles from "./OnboardingGuide.module.css";
 import { OnboardingProgressStepper } from "./OnboardingProgressStepper";
@@ -22,7 +22,7 @@ export function SliceMachineOnboardingGuide() {
   return (
     <OnboardingProvider onComplete={confetti.throwConfetti}>
       <div ref={confetti.confettiContainerRef} className={styles.container}>
-        <OnboardingGuideCard />
+        <OnboardingGuideCard setVisible={setVisible} />
         <div
           ref={confetti.confettiCannonRef}
           className={styles.confettiCannon}
@@ -32,10 +32,24 @@ export function SliceMachineOnboardingGuide() {
   );
 }
 
-function OnboardingGuideCard() {
+type OnboardingGuideCardProps = {
+  setVisible: (isVisible: boolean) => void;
+};
+
+function OnboardingGuideCard(props: OnboardingGuideCardProps) {
+  const { setVisible } = props;
   const { steps, completedStepCount, isComplete } = useOnboardingContext();
   const isVisible = 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;
 
   return (

package/src/features/onboarding/useOnboarding.ts

@@ -1,8 +1,9 @@
-import { OnboardingState } from "@prismicio/editor-fields";
+import { OnboardingState, OnboardingStepId } from "@prismicio/editor-fields";
 import { useRefGetter } from "@prismicio/editor-support/React";
 import { updateData, useRequest } from "@prismicio/editor-support/Suspense";
 import { toast } from "react-toastify";
 
+import { useSharedOnboardingExperiment } from "@/features/onboarding/useSharedOnboardingExperiment";
 import { managerClient } from "@/managerClient";
 
 const { fetchOnboarding, toggleOnboarding, toggleOnboardingStep } =
@@ -10,39 +11,49 @@ const { fetchOnboarding, toggleOnboarding, toggleOnboardingStep } =
 
 async function getOnboarding() {
   try {
-    return fetchOnboarding();
+    return await fetchOnboarding();
   } catch (error) {
     console.error("Failed to fetch onboarding", error);
     return undefined;
   }
 }
 
+const noop = () => Promise.resolve(undefined);
+
 export function useOnboarding() {
-  const onboarding = useRequest(getOnboarding, []);
+  const isSharedExperimentEligible = useSharedOnboardingExperiment().eligible;
+  const onboarding = useRequest(
+    isSharedExperimentEligible ? getOnboarding : noop,
+    [],
+  );
   const getOnboardingState = useRefGetter(onboarding);
 
   function updateCache(newOnboardingState: OnboardingState) {
     updateData(getOnboarding, [], newOnboardingState);
   }
 
-  async function toggleStep(stepId: string) {
+  async function toggleStep(stepId: OnboardingStepId) {
+    if (!isSharedExperimentEligible) return [];
+
     const onboardingState = getOnboardingState();
     if (!onboardingState) return [];
 
     try {
-      const { completedSteps } = await toggleOnboardingStep(stepId);
+      const { completedSteps } = await toggleOnboardingStep(String(stepId));
       updateCache({ ...onboardingState, completedSteps });
 
       return completedSteps;
     } catch (error) {
       toast.error("Failed to complete/undo step");
-      console.error("Error toggling onboarding step", error);
+      console.error("Failed to toggle onboarding step", error);
 
       return onboardingState.completedSteps;
     }
   }
 
   async function toggleGuide() {
+    if (!isSharedExperimentEligible) return;
+
     const onboardingState = getOnboardingState();
     if (!onboardingState) return;
 
@@ -54,9 +65,26 @@ export function useOnboarding() {
     } catch (error) {
       updateCache({ ...onboardingState, isDismissed: wasDismissed }); // rollback
       toast.error("Failed to hide/show onboarding");
-      console.error("Error toggling onboarding", error);
+      console.error("Failed to toggle onboarding", error);
+    }
+  }
+
+  async function completeStep(stepId: OnboardingStepId) {
+    if (!isSharedExperimentEligible) return;
+
+    const onboardingState = getOnboardingState();
+    if (!onboardingState) return;
+
+    try {
+      // TODO: Refactor when the API has complete action (DT-2389)
+      if (!onboardingState.completedSteps.includes(String(stepId))) {
+        await toggleStep(stepId);
+      }
+    } catch (error) {
+      toast.error("Failed to complete onboarding step");
+      console.error("Failed to complete onboarding step", error);
     }
   }
 
-  return { onboarding, toggleStep, toggleGuide };
+  return { onboarding, toggleStep, completeStep, toggleGuide };
 }

package/src/features/onboarding/useSharedOnboardingExperiment.ts

@@ -1,6 +1,6 @@
 import { useExperimentVariant } from "@/hooks/useExperimentVariant";
 
 export const useSharedOnboardingExperiment = () => {
-  const variant = useExperimentVariant("slicemachine-shared-onboarding");
+  const variant = useExperimentVariant("shared-onboarding");
   return { eligible: variant?.value === "with-shared-onboarding" };
 };

package/src/legacy/components/AuthInstructions/index.jsx

@@ -1,6 +1,6 @@
 import { Flex, Heading, Text } from "theme-ui";
 
-import Card from "../Card";
+import { Card, useCardRadius } from "../Card";
 
 const AuthInstructions = () => (
   <Card
@@ -8,23 +8,7 @@ const AuthInstructions = () => (
     bg="gray"
     bodySx={{ p: 3 }}
     sx={{ maxWidth: "480px", m: 3 }}
-    Header={({ radius }) => (
-      <Flex
-        sx={{
-          p: 3,
-          pl: 4,
-          bg: "headSection",
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-        }}
-      >
-        <Heading as="h3">Log in to Prismic</Heading>
-      </Flex>
-    )}
+    Header={<CardHeader />}
   >
     <Text as="p">
       In order to access your builder, you will need to be connected to Prismic.
@@ -46,4 +30,24 @@ const AuthInstructions = () => (
   </Card>
 );
 
+function CardHeader() {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        p: 3,
+        pl: 4,
+        bg: "headSection",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+      }}
+    >
+      <Heading as="h3">Log in to Prismic</Heading>
+    </Flex>
+  );
+}
 export default AuthInstructions;

package/src/legacy/components/Card/Default.jsx

@@ -1,6 +1,6 @@
 import { Box, Close, Flex } from "theme-ui";
 
-import Card from "./";
+import { Card, useCardRadius } from "./";
 
 const DefaultCard = ({
   children,
@@ -8,35 +8,21 @@ const DefaultCard = ({
   HeaderContent,
   close,
   sx = {},
-  headerSx = {},
 }) => (
   <Card
     borderFooter
     footerSx={{ p: 0 }}
     bodySx={{ pt: 2, pb: 4, px: 4 }}
     sx={{ border: "none", ...sx }}
-    Header={({ radius }) => (
-      <Flex
-        sx={{
-          p: 3,
-          pl: 4,
-          bg: "headSection",
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-          ...headerSx,
-        }}
-      >
+    Header={
+      <CardHeader>
         {HeaderContent}
         {
           // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions, @typescript-eslint/no-unsafe-assignment
           close ? <Close onClick={close} type="button" /> : null
         }
-      </Flex>
-    )}
+      </CardHeader>
+    }
     Footer={
       // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       FooterContent ? (
@@ -51,4 +37,24 @@ const DefaultCard = ({
   </Card>
 );
 
+function CardHeader({ children }) {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        p: 3,
+        pl: 4,
+        bg: "headSection",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+      }}
+    >
+      {children}
+    </Flex>
+  );
+}
 export default DefaultCard;

package/src/legacy/components/Card/WithTabs/index.jsx

@@ -2,7 +2,7 @@ import { Children, memo, useState } from "react";
 import { TabPanel, Tabs } from "react-tabs";
 import { Box } from "theme-ui";
 
-import Card from "../";
+import { Card } from "../";
 import { CustomTab as Tab, CustomTabList as TabList } from "./components";
 
 const WithTabs = ({

package/src/legacy/components/Card/index.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { createContext, useContext } from "react";
 import { Card as ThemeCard, ThemeUIStyleObject } from "theme-ui";
 
 import { CardBox, CardBoxProps } from "./CardBox";
 
+const CardRadiusContext = createContext<string>("6px");
+
+export const useCardRadius = () => useContext(CardRadiusContext);
 interface CardProps extends Omit<CardBoxProps, "withRadius"> {
-  Header?: React.FC<{ radius: string }> | JSX.Element | null;
-  SubHeader?: React.FC<{ radius: string }> | null;
+  Header?: JSX.Element | null;
+  SubHeader?: JSX.Element | null;
   Body?: React.FC | null;
   Footer?: React.FC | JSX.Element | null;
   borderFooter?: boolean;
@@ -13,7 +16,7 @@ interface CardProps extends Omit<CardBoxProps, "withRadius"> {
   footerSx?: ThemeUIStyleObject;
 }
 
-const Card: React.FC<CardProps> = ({
+export const Card: React.FC<CardProps> = ({
   Header = null,
   SubHeader = null,
   Body = null,
@@ -28,47 +31,41 @@ const Card: React.FC<CardProps> = ({
   children,
   ...rest
 }) => (
-  <ThemeCard
-    sx={{
-      border: (t) => `1px solid ${String(t.colors?.borders)}`,
-      borderRadius: radius,
-      ...sx,
-    }}
-    {...rest}
-  >
-    {Header ? (
-      typeof Header === "object" ? (
-        Header
-      ) : (
-        <Header radius={radius} />
-      )
-    ) : null}
-    {SubHeader ? <SubHeader radius={radius} /> : null}
-    <CardBox bg={bg} background={background} sx={bodySx} withRadius={!Footer}>
-      {Body ? <Body /> : null}
-      {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */}
-      {children ? children : null}
-    </CardBox>
-    {Footer ? (
-      <CardBox
-        bg={bg}
-        background={background}
-        sx={{
-          ...(borderFooter
-            ? {
-                borderTop: ({ colors }) =>
-                  `1px solid ${String(colors?.borders)}`,
-              }
-            : null),
-          ...footerSx,
-        }}
-        radius={radius}
-        withRadius
-      >
-        {typeof Footer === "object" ? Footer : <Footer />}
+  <CardRadiusContext.Provider value={radius}>
+    <ThemeCard
+      sx={{
+        border: (t) => `1px solid ${String(t.colors?.borders)}`,
+        borderRadius: radius,
+        ...sx,
+      }}
+      {...rest}
+    >
+      {Header ? Header : null}
+      {SubHeader ? SubHeader : null}
+      <CardBox bg={bg} background={background} sx={bodySx} withRadius={!Footer}>
+        {Body ? <Body /> : null}
+        {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */}
+        {children ? children : null}
       </CardBox>
-    ) : null}
-  </ThemeCard>
+      {Footer ? (
+        <CardBox
+          bg={bg}
+          background={background}
+          sx={{
+            ...(borderFooter
+              ? {
+                  borderTop: ({ colors }) =>
+                    `1px solid ${String(colors?.borders)}`,
+                }
+              : null),
+            ...footerSx,
+          }}
+          radius={radius}
+          withRadius
+        >
+          {typeof Footer === "object" ? Footer : <Footer />}
+        </CardBox>
+      ) : null}
+    </ThemeCard>
+  </CardRadiusContext.Provider>
 );
-
-export default Card;

package/src/legacy/components/ConfigErrors/index.jsx

@@ -1,30 +1,10 @@
 import { Box, Flex, Heading, Text } from "theme-ui";
 
-import Card from "@/legacy/components/Card";
+import { Card, useCardRadius } from "@/legacy/components/Card";
 import Li from "@/legacy/components/Li";
 
 const ConfigErrors = ({ errors }) => (
-  <Card
-    bg="background"
-    bodySx={{ p: 3 }}
-    Header={({ radius }) => (
-      <Flex
-        sx={{
-          p: 3,
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-        }}
-      >
-        <Heading as="h3">
-          Your slicemachine.config.json file contains errors
-        </Heading>
-      </Flex>
-    )}
-  >
+  <Card bg="background" bodySx={{ p: 3 }} Header={<CardHeader />}>
     {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       Object.entries(errors).map(([key, value]) => (
@@ -65,4 +45,25 @@ const ConfigErrors = ({ errors }) => (
   </Card>
 );
 
+function CardHeader() {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        p: 3,
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+      }}
+    >
+      <Heading as="h3">
+        Your slicemachine.config.json file contains errors
+      </Heading>
+    </Flex>
+  );
+}
+
 export default ConfigErrors;

package/src/legacy/components/DeleteCTModal/index.tsx

@@ -7,7 +7,7 @@ import { Close, Flex, Heading, Text, useThemeUI } from "theme-ui";
 import { deleteCustomType } from "@/features/customTypes/actions/deleteCustomType";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { Button } from "@/legacy/components/Button";
-import Card from "@/legacy/components/Card";
+import { Card } from "@/legacy/components/Card";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
@@ -64,7 +64,7 @@ export const DeleteCustomTypeModal: React.FunctionComponent<
         }}
         sx={{ border: "none", overflow: "hidden" }}
         borderFooter
-        Header={() => (
+        Header={
           <Flex
             sx={{
               position: "sticky",
@@ -88,7 +88,7 @@ export const DeleteCustomTypeModal: React.FunctionComponent<
             </Flex>
             <Close type="button" onClick={() => onClose()} />
           </Flex>
-        )}
+        }
         Footer={() => (
           <Flex
             sx={{

package/src/legacy/components/DeleteSliceModal/index.tsx

@@ -5,7 +5,7 @@ import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui";
 import { deleteSlice } from "@/features/slices/actions/deleteSlice";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { Button } from "@/legacy/components/Button";
-import Card from "@/legacy/components/Card";
+import { Card } from "@/legacy/components/Card";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
@@ -68,7 +68,7 @@ export const DeleteSliceModal: React.FunctionComponent<
         }}
         sx={{ border: "none" }}
         borderFooter
-        Header={() => (
+        Header={
           <Flex
             sx={{
               position: "sticky",
@@ -92,7 +92,7 @@ export const DeleteSliceModal: React.FunctionComponent<
             </Flex>
             <Close type="button" onClick={onClose} />
           </Flex>
-        )}
+        }
         Footer={() => (
           <Flex
             sx={{

package/src/legacy/components/Forms/CreateCustomTypeModal/CreateCustomTypeModal.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/features/customTypes/actions/createCustomType";
 import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
+import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import ModalFormCard from "@/legacy/components/ModalFormCard";
 import { API_ID_REGEX } from "@/legacy/lib/consts";
@@ -50,6 +51,7 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
   onOpenChange,
 }) => {
   const { createCustomTypeSuccess } = useSliceMachineActions();
+  const { completeStep } = useOnboarding();
 
   const { customTypeIds, customTypeLabels } = useSelector(
     (store: SliceMachineStoreType) => ({
@@ -84,6 +86,8 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
         });
 
         syncChanges();
+
+        if (format === "page") void completeStep("createPageType");
       },
     });
 

package/src/legacy/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -4,6 +4,7 @@ import Select from "react-select";
 import { Box, Label } from "theme-ui";
 
 import { getState } from "@/apiClient";
+import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { createSlice } from "@/features/slices/actions/createSlice";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import ModalFormCard from "@/legacy/components/ModalFormCard";
@@ -32,6 +33,7 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
   const { createSliceSuccess } = useSliceMachineActions();
   const [isCreatingSlice, setIsCreatingSlice] = useState(false);
   const { syncChanges } = useAutoSync();
+  const { completeStep } = useOnboarding();
 
   const onSubmit = async (values: FormValues) => {
     const sliceName = values.sliceName;
@@ -49,6 +51,7 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         createSliceSuccess(serverState.libraries);
         onSuccess(newSlice, libraryName);
         syncChanges();
+        void completeStep("createSlice");
       },
     });
   };

package/src/legacy/components/ModalFormCard/index.tsx

@@ -17,7 +17,7 @@ import { Button as ThemeButton, Close, Flex, Heading } from "theme-ui";
 import { Button } from "@/legacy/components/Button";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 
-import Card from "../Card";
+import { Card, useCardRadius } from "../Card";
 
 type ModalCardProps<T extends FormikValues> = {
   children: (props: {
@@ -120,27 +120,12 @@ function ModalCard<Values extends FormikValues>({
                 bodySx={{ px: 4, py: 4 }}
                 sx={{ border: "none" }}
                 {...cardProps}
-                Header={({ radius }: { radius: string | number }) => (
-                  <Flex
-                    sx={{
-                      position: "sticky",
-                      top: 0,
-                      zIndex: 1,
-                      p: "16px",
-                      pl: 4,
-                      bg: "headSection",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      borderTopLeftRadius: radius,
-                      borderTopRightRadius: radius,
-                      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                      borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-                    }}
-                  >
+                Header={
+                  <CardHeader>
                     <Heading sx={{ fontSize: "20px" }}>{title}</Heading>
                     <Close type="button" onClick={close} />
-                  </Flex>
-                )}
+                  </CardHeader>
+                }
                 Footer={
                   !omitFooter ? (
                     <Flex
@@ -200,4 +185,28 @@ function ModalCard<Values extends FormikValues>({
   );
 }
 
+function CardHeader({ children }: { children: ReactNode }) {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        position: "sticky",
+        top: 0,
+        zIndex: 1,
+        p: "16px",
+        pl: 4,
+        bg: "headSection",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+      }}
+    >
+      {children}
+    </Flex>
+  );
+}
+
 export default ModalCard;