slice-machine-ui 2.11.1-beta.3 → 2.11.1

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

@@ -1,127 +0,0 @@
-import { createContext, ReactNode, useContext } from "react";
-
-import { telemetry } from "@/apiClient";
-import { onboardingSteps } from "@/features/onboarding/SliceMachineOnboardingGuide/content";
-import {
-  type OnboardingStep,
-  type OnboardingStepId,
-  type OnboardingStepStatuses,
-  onboardingStepStatusesSchema,
-} from "@/features/onboarding/SliceMachineOnboardingGuide/types";
-import { usePersistedState } from "@/hooks/usePersistedState";
-
-type OnboardingContext = {
-  steps: OnboardingStep[];
-  completedStepCount: number;
-  toggleStepComplete: (step: OnboardingStep) => void;
-  getStepIndex: (step: OnboardingStepId) => number;
-  isStepComplete: (step: OnboardingStep) => boolean;
-  isComplete: boolean;
-};
-
-export const OnboardingContext = createContext<OnboardingContext | undefined>(
-  undefined,
-);
-
-const getInitialState = (steps: OnboardingStep[]): OnboardingStepStatuses => {
-  // if the old guide was dismissed, all steps start as complete
-  const wasOldGuideDismissed =
-    localStorage.getItem("slice-machine_isInAppGuideOpen") === "false";
-
-  return Object.fromEntries(
-    steps.map((step) => [
-      step.id,
-      step.defaultCompleted ?? wasOldGuideDismissed,
-    ]),
-  ) as OnboardingStepStatuses;
-};
-
-type OnboardingProviderProps = {
-  children: ReactNode;
-  onComplete?: () => void;
-};
-
-export const OnboardingProvider = ({
-  children,
-  onComplete,
-}: OnboardingProviderProps) => {
-  const steps = onboardingSteps;
-  const [stepStatus, setStepStatus] = useStepStatus();
-
-  const toggleStepComplete = (step: OnboardingStep) => {
-    const newCompleteState = !isStepComplete(step);
-    const nextState = { ...stepStatus, [step.id]: newCompleteState };
-    setStepStatus(nextState);
-
-    if (newCompleteState) {
-      void telemetry.track({
-        event: "onboarding:step-completed",
-        stepId: step.id,
-        stepTitle: step.title,
-      });
-    }
-    if (Object.values(nextState).every(Boolean)) {
-      onComplete?.();
-      void telemetry.track({
-        event: "onboarding:completed",
-      });
-    }
-  };
-
-  const getStepIndex = (stepId: OnboardingStepId) => {
-    return steps.findIndex(({ id }) => id === stepId);
-  };
-
-  const isStepComplete = (step: OnboardingStep) => {
-    return Boolean(stepStatus[step.id]) || Boolean(step.defaultCompleted);
-  };
-
-  const completedStepCount = steps.filter((step) =>
-    isStepComplete(step),
-  ).length;
-
-  return (
-    <OnboardingContext.Provider
-      value={{
-        steps,
-        toggleStepComplete,
-        isStepComplete,
-        getStepIndex,
-        completedStepCount,
-        isComplete: completedStepCount === steps.length,
-      }}
-    >
-      {children}
-    </OnboardingContext.Provider>
-  );
-};
-
-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);
-
-  if (context == null) {
-    throw new Error(
-      "useOnboardingContext must be used within an OnboardingProvider",
-    );
-  }
-
-  return context;
-};

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

@@ -1,65 +0,0 @@
-import {
-  Dialog,
-  DialogActionButton,
-  DialogActions,
-  DialogCancelButton,
-  DialogContent,
-  DialogHeader,
-} from "@prismicio/editor-ui";
-import { useState } from "react";
-
-import { useOnboardingContext } from "@/features/onboarding/SliceMachineOnboardingGuide/OnboardingProvider";
-import type { OnboardingStep } from "@/features/onboarding/SliceMachineOnboardingGuide/types";
-
-import { OnboardingStepDialogContent } from "./OnboardingStepDialogContent";
-
-type OnboardingStepDialogProps = {
-  step: OnboardingStep;
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-export const OnboardingStepDialog = ({
-  step,
-  isOpen,
-  onClose,
-}: OnboardingStepDialogProps) => {
-  const { toggleStepComplete, isStepComplete } = useOnboardingContext();
-  const [ctaOkText, setCtaOkText] = useState(getCtaOkText);
-
-  function getCtaOkText() {
-    return isStepComplete(step) ? "Undo step" : "Mark as done";
-  }
-
-  const markAsDone = () => {
-    if (!isOpen) return;
-    toggleStepComplete(step);
-    onClose();
-  };
-
-  const updateCtaOkText = () => {
-    if (!isOpen) return;
-    setCtaOkText(getCtaOkText());
-  };
-
-  return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={onClose}
-      onAnimationEnd={updateCtaOkText}
-      onAnimationStart={updateCtaOkText}
-      size="small"
-    >
-      <DialogHeader title="Onboarding" />
-      <DialogContent>
-        <OnboardingStepDialogContent step={step} />
-        <DialogActions>
-          <DialogCancelButton size="medium">Close</DialogCancelButton>
-          <DialogActionButton size="medium" onClick={markAsDone}>
-            {ctaOkText}
-          </DialogActionButton>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,34 +0,0 @@
-import { Box, ScrollArea, Text, Video } from "@prismicio/editor-ui";
-
-import { useOnboardingContext } from "@/features/onboarding/SliceMachineOnboardingGuide/OnboardingProvider";
-import { OnboardingStep } from "@/features/onboarding/SliceMachineOnboardingGuide/types";
-
-type OnboardingStepDialogContentProps = {
-  step: OnboardingStep;
-};
-
-export function OnboardingStepDialogContent(
-  props: OnboardingStepDialogContentProps,
-) {
-  const { step } = props;
-  const { getStepIndex } = useOnboardingContext();
-
-  const { content: Content, videoUrl, title = step.title } = step;
-
-  return (
-    <ScrollArea>
-      <Box as="article" flexDirection="column" padding={16} gap={16}>
-        <section>
-          <Text sx={{ marginBottom: 4 }} color="purple9" variant="bold">
-            Step {getStepIndex(step.id) + 1}
-          </Text>
-          <Text variant="h3">{title}</Text>
-          {Content && <Content />}
-        </section>
-        {typeof videoUrl == "string" && (
-          <Video src={videoUrl} sizing="contain" autoPlay loop />
-        )}
-      </Box>
-    </ScrollArea>
-  );
-}

package/src/features/onboarding/SliceMachineOnboardingGuide/OnboardingStepDialog/index.ts

@@ -1 +0,0 @@
-export { OnboardingStepDialog } from "./OnboardingStepDialog";

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

@@ -1,25 +0,0 @@
-import { Box, Icon, Text } from "@prismicio/editor-ui";
-
-import { useMarketingContent } from "@/hooks/useMarketingContent";
-
-export function OnboardingTutorial() {
-  const { tutorial } = useMarketingContent();
-
-  const url = tutorial?.url;
-
-  if (url === undefined) return null;
-
-  return (
-    <Box justifyContent="center" padding={{ block: 6 }}>
-      <Text href={url} variant="smallBold" color="grey11">
-        Or watch our full course
-        <Icon
-          name="playCircle"
-          color="grey11"
-          size="small"
-          sx={{ marginLeft: 4 }}
-        />
-      </Text>
-    </Box>
-  );
-}

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

@@ -1,74 +0,0 @@
-import { useConfetti } from "@prismicio/editor-support/Animation";
-import {
-  Card,
-  CardContent,
-  ProgressBar,
-  Text,
-  useMediaQuery,
-} from "@prismicio/editor-ui";
-import { useState } from "react";
-
-import styles from "./OnboardingGuide.module.css";
-import { OnboardingProgressStepper } from "./OnboardingProgressStepper";
-import {
-  OnboardingProvider,
-  useIsOnboardingCompleted,
-  useOnboardingContext,
-} from "./OnboardingProvider";
-import { OnboardingTutorial } from "./OnboardingTutorial/OnboardingTutorial";
-
-export function SliceMachineOnboardingGuide() {
-  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 />
-        <div
-          ref={confetti.confettiCannonRef}
-          className={styles.confettiCannon}
-        />
-      </div>
-    </OnboardingProvider>
-  );
-}
-
-function OnboardingGuideCard() {
-  const { steps, completedStepCount, isComplete } = useOnboardingContext();
-  const isMediumScreen = useMediaQuery({ min: "medium" });
-
-  if (!isMediumScreen) return null;
-
-  return (
-    <div
-      className={isComplete ? styles.invisible : styles.visible}
-      // 1px padding to avoid cliping of animated card while it scales up
-      style={{ padding: 1 }}
-    >
-      <Card variant="animated-light" paddingBlock={16}>
-        <CardContent>
-          <div>
-            <Text variant="bold" color="grey12">
-              {`Build your first Prismic Page in ${steps.length.toString()} simple steps`}
-            </Text>
-            <Text color="grey11">
-              Render a live page with content coming from Prismic in 5 mins
-            </Text>
-          </div>
-          <ProgressBar
-            value={completedStepCount}
-            max={steps.length}
-            displayLabel
-            getValueLabel={(value, max) => `${value}/${max}`}
-          />
-          <OnboardingProgressStepper buttonSize="large" />
-          <OnboardingTutorial />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

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

@@ -1,94 +0,0 @@
-import { Text } from "@prismicio/editor-ui";
-
-import type { OnboardingStep } from "./types";
-
-export const onboardingSteps: OnboardingStep[] = [
-  {
-    id: "createProject",
-    title: "Create your Prismic website",
-    description: "Create and set up your project",
-    defaultCompleted: true,
-  },
-  {
-    id: "createPageType",
-    title: "Create your first Page Type",
-    description: "Build the structure of your page",
-    videoUrl:
-      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1721918320/DEV_TOOLS/ONBOARDING_GUIDE/Create_page_type_xdn13j.mp4",
-    content: () => (
-      <Text>
-        A page type is a base content structure editors will use to create pages
-        in the Page Builder (Prismic's content creation UI). A page type can be
-        reusable (e.g., for multiple blog posts) or single (e.g., for a one-time
-        page like the homepage).
-      </Text>
-    ),
-  },
-  {
-    id: "codePage",
-    title: "Code your Page",
-    description: "Prepare code to fetch content",
-    videoUrl:
-      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1721918320/DEV_TOOLS/ONBOARDING_GUIDE/Step2_code_your_page_jatiur.mp4",
-    content: () => (
-      <Text>Prepare your code to query the content from the Prismic API.</Text>
-    ),
-  },
-  {
-    id: "createSlice",
-    title: "Create your first Slice",
-    description: "Build a reusable section",
-    videoUrl:
-      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1721918322/DEV_TOOLS/ONBOARDING_GUIDE/Step3_add_slice_qzmvxf.mp4",
-    content: () => (
-      <Text>
-        Slices are website sections that can be reused on different pages with
-        different content. Each slice has a code component automatically
-        generated by Slice Machine. Start with a template and look at your code
-        to see how it's structured.
-      </Text>
-    ),
-  },
-  {
-    id: "reviewAndPush",
-    title: "Review & push changes",
-    description: "Enable editors to create content",
-    videoUrl:
-      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1721918320/DEV_TOOLS/ONBOARDING_GUIDE/DevTools_Squad_push_changes_ovvmul.mp4",
-    content: () => (
-      <Text>
-        Your page types and slices currently exist only in your local project.
-        Push them to your repository to make them available for your content
-        editors.
-      </Text>
-    ),
-  },
-  {
-    id: "createContent",
-    title: "Create content for your page",
-    description: "Publish your page to the API",
-    videoUrl:
-      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1721918324/DEV_TOOLS/ONBOARDING_GUIDE/Cre%CC%81er_contenu_e%CC%81tape_4_z9vlzt.mp4",
-    content: () => (
-      <Text>
-        In Prismic, content creation takes place in the Prismic Page Builder UI.
-        Open the Page Builder and start creating your first page.
-      </Text>
-    ),
-  },
-  {
-    id: "renderPage",
-    title: "Preview your page",
-    description: "View your page in the browser",
-    videoUrl:
-      "https://res.cloudinary.com/dmtf1daqp/video/upload/v1721918321/DEV_TOOLS/ONBOARDING_GUIDE/Step_6_Render_Page_tnauh9.mp4",
-    content: () => (
-      <Text>
-        Now that your content is published, you can run your project in your
-        terminal and visit the page on your local server (e.g.,{" "}
-        <Text component="code">localhost:3000/example-page</Text>). Your content
-        should now be visible!
-      </Text>
-    ),
-  },
-];

package/src/features/onboarding/SliceMachineOnboardingGuide/types.ts

@@ -1,26 +0,0 @@
-import { z } from "zod";
-
-export const onboardingStepStatusesSchema = z.object({
-  createProject: z.boolean().optional(),
-  createPageType: z.boolean(),
-  codePage: z.boolean(),
-  createSlice: z.boolean(),
-  reviewAndPush: z.boolean(),
-  createContent: z.boolean(),
-  renderPage: z.boolean(),
-});
-
-export type OnboardingStepStatuses = z.infer<
-  typeof onboardingStepStatusesSchema
->;
-
-export type OnboardingStepId = keyof OnboardingStepStatuses;
-
-export interface OnboardingStep {
-  id: OnboardingStepId;
-  title: string;
-  description: string;
-  content?: () => JSX.Element;
-  videoUrl?: string;
-  defaultCompleted?: boolean;
-}

package/src/features/onboarding/useOnboardingExperiment.ts

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