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

package/dist/Selection.d.ts

@@ -9,7 +9,7 @@ export interface Selection {
      */
     update: (requestedFrom: SelectionArea, newId: string) => void;
 }
-export type SelectionArea = "sliceTable" | "sliceFieldSet";
+export type SelectionArea = "all" | "sliceTable" | "sliceFieldSet";
 export declare function getSelectionDOMId(area: SelectionArea, id?: string): string | undefined;
 export declare const SelectionContext: import("react").Context<Selection>;
 interface UseSelectionArgs {

package/dist/core/MediaLibrary/hooks/tagData.d.ts

@@ -9,7 +9,7 @@ export declare function useTagSearch(): {
         uploader_id?: string | undefined;
     }[];
 };
-export declare const minTagNameLength = 3;
+export declare const minTagNameLength = 1;
 export declare const maxTagNameLength = 20;
 export declare const tagNameSchema: z.ZodString;
 export declare const tagSchema: z.ZodObject<{

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

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import type { OnboardingCardVariant, OnboardingFramework, OnboardingState, OnboardingStepId, OnboardingTrackFn } from "./types";
+interface OnboardingGuideProps {
+    /**
+     * 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;
+    /**
+     * The framework the user is using
+     *
+     * Used to display a link to the appropriate tutorial
+     * @default "other"
+     */
+    framework?: OnboardingFramework;
+    /**
+     * Function to track onboarding events
+     *
+     *  - onboarding:step-completed,
+     *  - onboarding:step-opened,
+     *  - onboarding:guide-completed
+     * */
+    track: OnboardingTrackFn;
+    /**
+     * Fetches the current onboarding state
+     *
+     * @returns {OnboardingState}
+     */
+    fetchState: () => Promise<OnboardingState>;
+    /**
+     * Updates the onboarding steps progress state
+     *
+     * @param {OnboardingStepId[]} stepId
+     */
+    toggleStep: (stepId: OnboardingStepId) => Promise<OnboardingStepId[]>;
+    /**
+     * Updates the onboarding guide state to completed
+     *
+     * @returns {boolean}
+     */
+    resolveGuide: () => Promise<{
+        isResolved: boolean;
+    }>;
+}
+export declare function OnboardingGuide(props: OnboardingGuideProps): JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface OnboardingCardProps {
+    onClose?: () => void;
+}
+export declare function OnboardingCard(props: OnboardingCardProps): JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface OnboardingGuideUIProps {
+    isOnboardingVisible: boolean;
+    isFadedOut: boolean;
+    resolveGuide: () => Promise<{
+        isResolved: boolean;
+    }>;
+}
+export declare function OnboardingGuideUI(props: OnboardingGuideUIProps): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { OnboardingCardVariant } from "../types";
+interface OnboardingProgressStepperProps {
+    variant: OnboardingCardVariant;
+}
+export declare function OnboardingProgressStepper(props: OnboardingProgressStepperProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { type OnboardingCardVariant, type OnboardingFramework, type OnboardingState, type OnboardingStep, type OnboardingStepId, type OnboardingTrackFn } from "../types";
+interface OnboardingProviderProps {
+    children: ReactNode;
+    variant: OnboardingCardVariant;
+    framework: OnboardingFramework;
+    onComplete?: () => void;
+    track: OnboardingTrackFn;
+    fetchState: () => Promise<OnboardingState>;
+    toggleStep: (stepId: OnboardingStepId) => Promise<OnboardingStepId[]>;
+}
+export declare function OnboardingProvider(props: OnboardingProviderProps): JSX.Element;
+interface OnboardingContext {
+    steps: OnboardingStep[];
+    completedStepsCount: number;
+    variant: OnboardingCardVariant;
+    tutorialLink?: string;
+    isResolved?: boolean;
+    toggleStepComplete: (step: OnboardingStep) => void;
+    getStepIndex: (step: OnboardingStepId) => number;
+    isStepComplete: (step: OnboardingStep) => boolean;
+    track: OnboardingTrackFn;
+}
+declare const OnboardingContext: import("react").Context<OnboardingContext | undefined>;
+export declare const useOnboardingContext: () => OnboardingContext;
+export {};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { OnboardingStep } from "../types";
+interface OnboardingStepDialogProps {
+    isOpen: boolean;
+    step: OnboardingStep;
+    stepIndex: number;
+    isStepComplete: boolean;
+    onActionClick: () => void;
+    onClose: () => void;
+}
+export declare function OnboardingStepDialog(props: OnboardingStepDialogProps): JSX.Element;
+export {};

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

@@ -0,0 +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

@@ -0,0 +1,4 @@
+import type { OnboardingFramework, OnboardingStep } from "./types";
+export declare const onboardingSteps: OnboardingStep[];
+export declare const onboardingExperimentSteps: OnboardingStep[];
+export declare const tutorialLinks: Record<OnboardingFramework, string>;

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

@@ -0,0 +1,2 @@
+export { OnboardingGuide } from "./OnboardingGuide";
+export type { OnboardingState, OnboardingStepId } from "./types";

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { z } from "zod";
+declare const onboardingStepStatusesSchema: z.ZodObject<{
+    createProject: z.ZodBoolean;
+    createPageType: z.ZodBoolean;
+    codePage: z.ZodBoolean;
+    createSlice: z.ZodBoolean;
+    reviewAndPush: z.ZodBoolean;
+    createContent: z.ZodBoolean;
+    renderPage: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    createProject: boolean;
+    createPageType: boolean;
+    codePage: boolean;
+    createSlice: boolean;
+    reviewAndPush: boolean;
+    createContent: boolean;
+    renderPage: boolean;
+}, {
+    createProject: boolean;
+    createPageType: boolean;
+    codePage: boolean;
+    createSlice: boolean;
+    reviewAndPush: boolean;
+    createContent: boolean;
+    renderPage: boolean;
+}>;
+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 OnboardingState = {
+    completedSteps: OnboardingStepId[];
+    isResolved: boolean;
+};
+export type OnboardingCardVariant = "default" | "light" | "dark";
+export type OnboardingFramework = "next" | "nuxt" | "sveltekit" | "other";
+export type OnboardingTrackFn = (args: Record<string, string>) => void;
+export {};

package/dist/fields/FieldTextInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type TextInputProps } from "@prismicio/editor-ui";
-export declare const FieldTextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const FieldTextInput: (props: TextInputProps & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export declare const fieldInputPadding: {
     readonly input: {
         readonly inline: 4;

package/dist/fields/ImageField/Components/ImageAltControl.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 interface ImageAltControlProps {
-    id?: string;
     readOnly?: boolean;
     altText: string;
-    onValueChange: (value: string) => void;
     selected?: boolean;
+    onValueChange: (value: string) => void;
 }
 export declare function ImageAltControl(props: ImageAltControlProps): JSX.Element;
 export {};

package/dist/fields/ImageField/Components/ImageFieldCard.d.ts

@@ -3,9 +3,9 @@ import type { MediaAssetOrExternalImage } from "../../../core/MediaLibrary/hooks
 interface ImageFieldCardProps {
     isMediaDialogOpen: boolean;
     selected?: boolean;
+    children: ReactNode;
     onMediaDialogOpenChange: (open: boolean) => void;
     onMediaSelected: (media: MediaAssetOrExternalImage) => void;
-    children: ReactNode;
 }
-export declare function ImageFieldCard(props: ImageFieldCardProps): JSX.Element;
+export declare const ImageFieldCard: (props: ImageFieldCardProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export {};

package/dist/fields/ImageField/Components/NonEmptyCardContent.d.ts

@@ -2,12 +2,11 @@
 import { type ImageContent, type ImageContentView } from "@prismicio/types-internal/lib/content";
 import { type CropperImage, type ImageBlockData } from "../../../core/imageUtils";
 import { type CroppedImages } from "../CropperDialog";
-interface NonEmptyCardContentProps<ContentType extends ImageContent | ImageBlockData> {
+interface NonEmptyCardContentProps<Content extends ImageContent | ImageBlockData> {
     allContentViews: readonly (ImageContentView | undefined)[];
-    content: ContentType;
+    content: Content;
     contentView: ImageContentView | undefined;
     fieldLabel: string;
-    id: string;
     imageLabel: string[];
     initialImages: CropperImage[];
     isUpdating: boolean;
@@ -15,7 +14,7 @@ interface NonEmptyCardContentProps<ContentType extends ImageContent | ImageBlock
     readOnly: boolean;
     thumbnailName: string;
     onClear: () => void;
-    onContentChange: (content: ContentType | undefined) => void;
+    onContentChange: (content: Content | undefined) => void;
     onCropperDialogClose: (result: {
         croppedImages: CroppedImages;
         option: number;
@@ -23,5 +22,5 @@ interface NonEmptyCardContentProps<ContentType extends ImageContent | ImageBlock
     onPageChange?: (page: number) => void;
     onMediaDialogOpenChange: (open: boolean) => void;
 }
-export declare function NonEmptyCardContent<ContentType extends ImageContent | ImageBlockData>(props: NonEmptyCardContentProps<ContentType>): JSX.Element;
+export declare function NonEmptyCardContent<Content extends ImageContent | ImageBlockData>(props: NonEmptyCardContentProps<Content>): JSX.Element;
 export {};

package/dist/fields/ImageField/ImageField.d.ts

@@ -4,8 +4,7 @@ import type { Image } from "@prismicio/types-internal/lib/customtypes";
 export interface ImageFieldProps {
     content: ImageContent | undefined;
     field: Image;
-    id: string;
-    onContentChange: (content: ImageContent | undefined) => void;
     readOnly: boolean;
+    onContentChange: (content: ImageContent | undefined) => void;
 }
 export declare function ImageField(props: ImageFieldProps): JSX.Element;

package/dist/fields/ImageField/useImageField.d.ts

@@ -1,6 +1,5 @@
 import type { ImageContent } from "@prismicio/types-internal/lib/content";
 import type { Image } from "@prismicio/types-internal/lib/customtypes";
-import { type Thumbnail } from "../../core/imageUtils";
 import type { MediaAssetOrExternalImage } from "../../core/MediaLibrary/hooks/mediaLibraryData";
 import type { CroppedImages } from "./CropperDialog";
 interface useImageFieldProps {
@@ -17,8 +16,8 @@ export declare function useImageField(props: useImageFieldProps): {
     onMediaSelected: (media: MediaAssetOrExternalImage) => void;
     isUpdating: boolean;
     page: number;
-    thumbnail: Thumbnail | undefined;
-    allThumbnails: readonly Thumbnail[];
+    thumbnail: import("../../core/imageUtils").Thumbnail | undefined;
+    allThumbnails: readonly import("../../core/imageUtils").Thumbnail[];
     allContentViews: readonly [{
         origin: {
             id: string;

package/dist/fields/RichTextField/coreExtensions/Placeholder.d.ts

@@ -1,8 +1,8 @@
 import { type ExtensionPlaceholder, type NodeExtension } from "../models";
-interface PlaceholderParams {
+interface PlaceholderArgs {
     placeholderByNodeType: Record<string, ExtensionPlaceholder>;
     unfocusedPlaceholder: string | undefined;
     nodeExtensions: readonly NodeExtension[];
 }
-declare const _default: (params: PlaceholderParams) => import("@tiptap/core").Extension<import("@tiptap/extension-placeholder").PlaceholderOptions, any>;
+declare const _default: (args: PlaceholderArgs) => import("@tiptap/core").Extension<import("@tiptap/extension-placeholder").PlaceholderOptions, any>;
 export default _default;

package/dist/fields/RichTextField/extensions/Image/ImageView.d.ts

@@ -2,13 +2,15 @@
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { type NodeViewProps } from "@tiptap/react";
 import { type ImageBlockData } from "../../../../core/imageUtils";
+export interface ImageViewProps extends NodeViewProps {
+    node: ImageNode;
+}
+export declare function ImageView(props: ImageViewProps): JSX.Element;
 interface ImageNode extends ProseMirrorNode {
     attrs: {
         content: ImageBlockData | undefined;
     };
 }
-export interface ImageViewProps extends NodeViewProps {
-    node: ImageNode;
-}
-export declare function ImageView(props: ImageViewProps): JSX.Element;
+export declare const nodeWrapperClassName = "imageViewNodeWrapper";
+export declare function imageViewHeight(isEmpty: boolean): number;
 export {};

package/dist/fields/RichTextField/globalExtensions/TextDirection.d.ts

@@ -5,7 +5,7 @@ export type Direction = "ltr" | "rtl";
 export declare const leftToRight: Direction;
 export declare const rightToLeft: Direction;
 interface TextDirectionOptions {
-    supportedExtensionNames: readonly string[];
+    supportedExtensionNames: string[];
 }
 export declare const attrName = "dir";
 declare module "@tiptap/core" {