@prismicio/editor-fields 0.4.49-alpha.feat-onboarding-guide.11 → 0.4.49

package/dist/EditorConfig.d.ts

@@ -6,7 +6,7 @@ export type EditorConfig = {
     unsplashApiBaseUrl: URL;
     authStrategy: AuthStrategy;
 } & OptionalConfigs;
-type OptionalConfigs = SearchDocuments & MediaLibrary & UIDField & Analytics & ErrorTracking & IntegrationFields & LayoutConfig & RepositoryConfig & UserService;
+type OptionalConfigs = SearchDocuments & MediaLibrary & UIDField & Analytics & ErrorTracking & IntegrationFields & LayoutConfig & UserService;
 type UserService = {
     userServiceBaseUrl?: URL;
 };
@@ -53,12 +53,6 @@ interface LayoutConfig {
      */
     scrollOffsetTop?: number;
 }
-type RepositoryConfig = {
-    repositoryBaseUrl?: never;
-} | {
-    repository: string;
-    repositoryBaseUrl: URL;
-};
 interface OnAnalyticsEvent {
     (event: "Media Library Search", args: {
         assetType: MediaAssetType;

package/dist/core/OnboardingGuide/OnboardingGuide.d.ts

@@ -1,22 +1,22 @@
 /// <reference types="react" />
-import { type ConfettiConfig } from "dom-confetti";
-import type { OnboardingState, OnboardingStepId, OnboardingTracking } from "../service";
+import type { OnboardingCardVariant, OnboardingTrackingFn } from "./types";
 interface OnboardingGuideProps {
-    onboardingState: OnboardingState;
-    tracking: OnboardingTracking;
-    onToggleStep: (stepId: OnboardingStepId) => Promise<OnboardingStepId[]>;
-    onToggleGuide: () => Promise<void>;
+    /**
+     * Whether the whole guide (including 'Get started' button) should be visible
+     *
+     * Example usage: we hide it on small screens in SM
+     * @default true
+     */
+    isOnboardingVisible?: boolean;
+    /**
+     * A/B test onboarding card visibility experiment variant
+     * @default "default"
+     */
+    variant?: OnboardingCardVariant;
+    /** Link to the video tutorials */
+    tutorialLink?: string;
+    /** Function to track onboarding events */
+    trackingFn: OnboardingTrackingFn;
 }
 export declare function OnboardingGuide(props: OnboardingGuideProps): JSX.Element;
-export declare function useConfetti(confettiConfig: ConfettiConfig): {
-    throwConfetti: () => void;
-    confettiCannonRef: import("react").RefObject<HTMLDivElement>;
-    confettiContainerRef: import("react").RefObject<HTMLDivElement>;
-};
-export declare function useFadeOut(closeGuide: () => void, startDelay: number, endDelay: number): {
-    isFadedOut: boolean;
-    isFading: boolean;
-    fadeOut: () => void;
-    resetFadeOut: () => void;
-};
 export {};

package/dist/core/OnboardingGuide/components/OnboardingCard.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="react" />
-import type { OnboardingStep, OnboardingStepId, OnboardingTracking } from "../../service";
+import type { OnboardingCardVariant } from "../types";
 interface OnboardingCardProps {
-    steps: OnboardingStep[];
-    completedSteps: OnboardingStepId[];
+    variant: OnboardingCardVariant;
     tutorialLink?: string;
-    tracking: OnboardingTracking;
-    onToggleStep: (step: OnboardingStep) => Promise<void>;
     onClose?: () => void;
 }
 export declare function OnboardingCard(props: OnboardingCardProps): JSX.Element;

package/dist/core/OnboardingGuide/components/OnboardingProgressStepper.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-import type { OnboardingStep, OnboardingStepId, OnboardingTracking } from "../../service";
+import type { OnboardingCardVariant } from "../types";
 interface OnboardingProgressStepperProps {
-    steps: OnboardingStep[];
-    completedSteps: OnboardingStepId[];
-    completedStepsCount: number;
-    onToggleStep: (step: OnboardingStep) => Promise<void>;
-    tracking: OnboardingTracking;
+    variant: OnboardingCardVariant;
 }
 export declare function OnboardingProgressStepper(props: OnboardingProgressStepperProps): JSX.Element | null;
 export {};

package/dist/core/OnboardingGuide/components/OnboardingProvider.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import { type OnboardingCardVariant, type OnboardingStep, type OnboardingStepId, type OnboardingTrackingFn } from "../types";
+interface OnboardingContext {
+    steps: OnboardingStep[];
+    completedStepCount: number;
+    toggleStepComplete: (step: OnboardingStep) => void;
+    getStepIndex: (step: OnboardingStepId) => number;
+    isStepComplete: (step: OnboardingStep) => boolean;
+    trackingFn: OnboardingTrackingFn;
+}
+declare const OnboardingContext: import("react").Context<OnboardingContext | undefined>;
+interface OnboardingProviderProps {
+    children: ReactNode;
+    variant: OnboardingCardVariant;
+    onComplete?: () => void;
+    trackingFn: OnboardingTrackingFn;
+}
+export declare function OnboardingProvider(props: OnboardingProviderProps): JSX.Element;
+export declare const useOnboardingContext: () => OnboardingContext;
+export {};

package/dist/core/OnboardingGuide/components/OnboardingStepDialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { OnboardingStep } from "../../service";
+import type { OnboardingStep } from "../types";
 interface OnboardingStepDialogProps {
     isOpen: boolean;
     step: OnboardingStep;

package/dist/core/OnboardingGuide/components/OnboardingTutorial.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import type { OnboardingCardVariant } from "../types";
 interface OnboardingTutorialProps {
     href: string;
+    variant?: OnboardingCardVariant;
 }
 export declare function OnboardingTutorial(props: OnboardingTutorialProps): JSX.Element;
 export {};

package/dist/core/OnboardingGuide/content.d.ts

@@ -1,6 +1,3 @@
-import type { OnboardingFramework, OnboardingStep } from "../service/onboarding";
-export declare function getOnboardingContent(framework?: OnboardingFramework, starter?: string): {
-    steps: OnboardingStep[];
-    defaultCompletedStepIds: ("createPrismicProject" | "chooseLocale" | "createProject" | "setupSliceMachine" | "createPageType" | "codePage" | "createSlice" | "reviewAndPush" | "createContent" | "renderPage")[];
-    tutorialLink: string;
-};
+import type { OnboardingStep } from "./types";
+export declare const onboardingSteps: OnboardingStep[];
+export declare const onboardingExperimentSteps: OnboardingStep[];

package/dist/core/OnboardingGuide/types.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { z } from "zod";
+export declare const onboardingStepStatusesSchema: z.ZodObject<{
+    createProject: z.ZodLiteral<true>;
+    createPageType: z.ZodBoolean;
+    codePage: z.ZodBoolean;
+    createSlice: z.ZodBoolean;
+    reviewAndPush: z.ZodBoolean;
+    createContent: z.ZodBoolean;
+    renderPage: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    createProject: true;
+    createPageType: boolean;
+    codePage: boolean;
+    createSlice: boolean;
+    reviewAndPush: boolean;
+    createContent: boolean;
+    renderPage: boolean;
+}, {
+    createProject: true;
+    createPageType: boolean;
+    codePage: boolean;
+    createSlice: boolean;
+    reviewAndPush: boolean;
+    createContent: boolean;
+    renderPage: 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;
+}
+export type OnboardingCardVariant = "default" | "light" | "dark";
+export type OnboardingTrackingFn = (args: Record<string, string>) => void;

package/dist/core/service/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./customType";
 export * from "./document";
-export * from "./onboarding";
 export * from "./repository";
 export * from "./user";

package/dist/core/service/repository.d.ts

@@ -99,7 +99,6 @@ declare const repositorySchema: z.ZodEffects<z.ZodObject<{
         lastname?: string | undefined;
         uploadedAvatar?: string | undefined;
     }[];
-    framework: "next" | "nuxt" | "sveltekit" | "other";
     languages: {
         id: string;
         name: string;
@@ -108,6 +107,7 @@ declare const repositorySchema: z.ZodEffects<z.ZodObject<{
     quotas: {
         slicemachineEnabled: boolean;
     };
+    framework: "next" | "nuxt" | "sveltekit" | "other";
     storageVersion: {
         major: number;
         minor: number;