@fbaconversio/onborda

import { Transition } from "framer-motion"; import { defaultBreakpoints } from "../Onborda"; export interface OnbordaProviderProps { /** The children elements to be rendered inside the OnbordaProvider component */ children: React.ReactNode; /** An array of tours, each containing multiple steps */ tours: Tour[]; /** Active Tour */ activeTour?: string; /** Initial isOnbordaVisible state */ defaultIsOnbordaVisible?: boolean; } export interface OnbordaContextType { /** array of tours */ tours: Tour[]; /** current step index */ currentStep: number; /** current tour name */ currentTour: string | null; /** current tour steps */ currentTourSteps: Step[]; /** function to set the current step */ setCurrentStep: (step: number | string, delay?: number) => void; /** function to close Onborda */ closeOnborda: () => void; /** function to start Onborda */ startOnborda: (tourName: string, visible?: boolean, step?: number | string) => void; /** flag to check if Onborda is visible */ isOnbordaVisible: boolean; /** function to set the visibility of Onborda */ setOnbordaVisible: (visible: boolean) => void; /** default completed steps */ completedSteps: Set<number>; /** setstate function to set the completed steps */ setCompletedSteps: React.Dispatch<React.SetStateAction<Set<number>>>; /** flag to check if the step is changing, can be used to prevent multiple clicks on the same step by disabling the button for instance */ isStepChanging: boolean; /** function to set the step changing */ setIsStepChanging: (isStepChanging: boolean) => void; } export type Breakpoint = keyof typeof defaultBreakpoints | "default"; export type Side = "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom"; export type ExtendedBreakpoint = Breakpoint | (string & {}); export type ExtendedSide = Side | (string & {}); export interface Step { /** The unique identifier for the step */ id?: string; /** The title of the step */ title?: string; /** The content to be displayed in the step */ content: React.ReactNode; /** The icon to be displayed in the step */ icon?: React.ReactNode | string | null; /** The CSS selector for the element to highlight. Takes precedence over customQuerySelector if both are provided. */ selector?: string; /** A custom function to query the target element. Ignored if selector is provided. */ customQuerySelector?: () => Element | null; /** The CSS selector for the element to click on the next step. */ clickElementOnNext?: string; /** The CSS selector for the element to click on the previous step. */ clickElementOnPrev?: string; /** The CSS selector for the element to click on when the step is unset with the setStep function. */ clickElementOnUnset?: string; /** The CSS selector for the element to click on when the step is set with the setStep function. */ clickElementOnSet?: string; /** The side where the step should be displayed for each breakpoint, setting the default will apply to all breakpoints, setting a specific breakpoint will override the default */ side?: Partial<Record<ExtendedBreakpoint, ExtendedSide>>; /** Flag to show or hide the controls */ showControls?: boolean; /** Padding around the pointer */ pointerPadding?: number; /** Radius of the pointer */ pointerRadius?: number; /** Flag to make the step interactable */ interactable?: boolean; /** Conditions to be met before the next step can be triggered. Function is bound to on observer on the focused element, or observerSelector element if set. */ isCompleteConditions?: (element: Element | null) => boolean; /** Selector for Element/s that an observer is attached to listen for changes. Upon each observation, isCompleteConditions is triggered. */ observerSelector?: string; /** Override the scroll container for the step with a custom CSS selector. If not set, scroll will be calculated based on the viewport. Only used if tour.scrollContainer is set. */ scrollContainerOveride?: string; /** The route for this step */ route?: string; /** The route to navigate to for the next step */ /** @deprecated Use `route` instead */ nextRoute?: string; /** The route to navigate to for the previous step */ /** @deprecated Use `route` instead */ prevRoute?: string; /** Callback function to be called when the step is completed */ onComplete?: (tour: Tour) => Promise<void>; /** Any additional data for custom use */ [key: string]: any; } export interface Tour { /** The tour ID */ tour: string; /** Tour Title */ title?: string; /** Tour Description */ description?: string; /** An array of steps in the tour */ steps: Step[]; /** Complete Callback */ onComplete?: (tour: Tour) => void; /** Tour can be dismissed. */ dismissible?: boolean; /** Any additional data for custom use */ [key: string]: any; /** Initial completed steps state of the tour. an async function called on tour started. Can be a Server Action e.g. Promise.all([]) on API calls. */ initialCompletedStepsState?: () => Promise<boolean[]>; /** If the tour is in a scroll container, set the CSS selector of the scroll container. If not set, scroll will be calculated based on the viewport. */ scrollContainer?: string; } export interface OnbordaProps { /** The children elements to be rendered inside the Onborda component */ children: React.ReactNode; /** An array of tours, each containing multiple steps */ /** @deprecated Use `OnbordaProvider.tours` instead */ steps?: Tour[]; /** Flag to show or hide the Onborda component */ /** @deprecated Use `OnbordaProvider.defaultIsOnbordaVisible` instead */ showOnborda?: boolean; /** RGB value for the shadow color */ shadowRgb?: string; /** Opacity value for the shadow */ shadowOpacity?: string; /** Transition settings for the card component */ cardTransition?: Transition; /** Custom card component to be used in the Onborda */ cardComponent?: React.ComponentType<CardComponentProps>; /** Custom tour component to be used in the Onborda */ tourComponent?: React.ComponentType<TourComponentProps>; /** * Breakpoints for the Onborda. * @default * { * xs: 480, * sm: 640, * md: 768, * lg: 1024, * xl: 1280, * "2xl": 1536, * "3xl": 1920 * } */ breakpoints?: Partial<Record<Breakpoint, number>> & { [key: string]: number; }; /** Extend the default sides of the Onborda with custom CSS. * @example * { * customSide: { * transform: "translate(-50%, 0)", * left: "50%", * bottom: "100%", * marginBottom: "25px", * }, * } * * and then use it in the side prop in the step: * { * side: { * default: "customSide", * }, * } */ extendSides?: { [key: string]: React.CSSProperties; }; /** Flag to enable or disable debug mode */ debug?: boolean; /** Timeout value for the observer when observing for the target element */ observerTimeout?: number; } export interface CardComponentProps { /** The current step object containing details of the step */ step: Step; /** The current tour object containing details of the tour */ tour: Tour; /** All tours */ tours: Tour[]; /** The index of the current step */ currentStep: number; /** The total number of steps in the tour */ totalSteps: number; /** Function to set the current step by step index or step.id */ setStep: (step: number | string) => void; /** Function to navigate to the next step */ nextStep: () => void; /** Function to navigate to the previous step */ prevStep: () => void; /** Function to close the Onborda */ closeOnborda: () => void; /** Function to set the tour visibility */ setOnbordaVisible: (visible: boolean) => void; /** The arrow element to be displayed in the card */ arrow: JSX.Element; /** Array of completed steps */ completedSteps: (string | number)[]; /** Is waiting for Route change */ pendingRouteChange: boolean; } export interface TourComponentProps { /** The current tour name */ currentTour: string | null; /** The index of the current step */ currentStep: number; /** The current Tour object containing details of the tour */ tour: Tour; /** Function to set the current step by step index or step.id */ setStep: (step: number | string) => void; /** Array of completed steps */ completedSteps: (string | number)[]; /** Function to close the Onborda */ closeOnborda: () => void; }