Types Reference

Complete reference of TypeScript types used in MonkeyJs.

Core Types

Tour Config

    
  type TourConfig = {
  controllerConfig: TourControllerConfig;
  tourConfig: PopoverBuilderConfig;
};

Tour Controller Config

    
  type TourControllerConfig = {
  steps: stepComponent[];
};

Step Component

    
 type stepComponent = {
  target: string;
  title: string;
  content: string;
  placement?: 'top' | 'bottom' | 'left' | 'right';
  showArrow?: boolean;
  showButtons?: boolean;
  onNext?: () => void;
  onPrevious?: () => void;
  onComplete?: () => void;
};

Property	Type	Description
target	string	CSS selector for the element to highlight.
title	string	Title displayed in the popover.
content	string	Main content or description for the step.
placement	'top' \| 'bottom' \| 'left' \| 'right'	Preferred popover position relative to the target.
showArrow	boolean	Show an arrow pointing to the target element.
showButtons	boolean	Display navigation buttons in the popover.
onNext	() => void	Callback when the "Next" button is clicked.
onPrevious	() => void	Callback when the "Previous" button is clicked.
onComplete	() => void	Callback when the tour is completed at this step.

Disclaimer: The placement property is calculated based on the current viewport size. In some cases, the popover may not appear at the exact desired location if there is not enough space to display it as specified.

UI Component Types

PopoverBuilderConfig

    
type PopoverBuilderConfig = {
    overlayConfig: OverlayBuilderConfig;
    progressBar: boolean;
    progressBarSteps: number;
    nextBtnText: string;
    prevBtnText: string;
    position: TPopoverPosition;
    offsetX: number;
    offsetY: number;
    isArrowVisible: boolean;
    isCloseBtnVisible: boolean;
  };

Property	Type	Description
overlayConfig	OverlayBuilderConfig	Configuration for the overlay appearance and behavior.
progressBar	boolean	Show a progress bar in the popover.
progressBarSteps	number	Number of steps to show in the progress bar.
nextBtnText	string	Text for the next button.
prevBtnText	string	Text for the previous button.
position	TPopoverPosition	Popover position relative to the target element.
offsetX	number	Horizontal offset for the popover.
offsetY	number	Vertical offset for the popover.
isArrowVisible	boolean	Show an arrow on the popover.
isCloseBtnVisible	boolean	Show a close button on the popover.

Note: Some properties may be optional or depend on your implementation. See the API docs for more details.

OverlayBuilderConfig

    
type OverlayBuilderConfig = {
  radius: number;
  padding: {
    top: number;
    bottom: number;
    right: number;
    left: number;
  }
}

Property	Type	Description
radius	number	Border radius for the overlay highlight.
padding	object	Padding around the overlay. See below for details.
padding.top	number	Top padding in pixels.
padding.bottom	number	Bottom padding in pixels.
padding.right	number	Right padding in pixels.
padding.left	number	Left padding in pixels.

ThemeType

    
type ThemeType = {
  fontFamily: string;
  fontSize: string;
  textColor: string;
  popoverBgColor: string;
  popoverPadding: string;
  popoverBorderRadius: string;
  popoverBoxShadow: string;
  popoverBtnPadding: string;
  overlayColor: string;
  overlayOpacity: number;
  overlayRadius: string;
  overlayPadding: string;
  overlayStrokeWidth: number;
  ovelayStrokeColor: string;
  primaryBtnBgColor: string;
  primaryBtnColor: string;
  secondaryBtnColor: string;
  secondaryBtnBgColor: string;
  baseZIndex: number;
  overlayZIndex: number;
  arrowColor: string;
};

Property	Type	Description
fontFamily	string	Font family for all tour UI text.
fontSize	string	Base font size for tour UI.
textColor	string	Text color for popover content.
popoverBgColor	string	Background color for the popover.
popoverPadding	string	Padding inside the popover.
popoverBorderRadius	string	Border radius for the popover.
popoverBoxShadow	string	Box shadow for the popover.
popoverBtnPadding	string	Padding for popover buttons.
overlayColor	string	Color of the overlay background.
overlayOpacity	number	Opacity of the overlay (0-1).
overlayRadius	string	Border radius for the overlay.
overlayPadding	string	Padding for the overlay area.
overlayStrokeWidth	number	Stroke width for overlay border.
ovelayStrokeColor	string	Stroke color for overlay border.
primaryBtnBgColor	string	Background color for primary button.
primaryBtnColor	string	Text color for primary button.
secondaryBtnColor	string	Text color for secondary button.
secondaryBtnBgColor	string	Background color for secondary button.
baseZIndex	number	Base z-index for tour elements.
overlayZIndex	number	z-index for the overlay.
arrowColor	string	Color of the popover arrow.

React Types

TourContextProps

    
type TourContextProps = {
  steps: stepComponent[];
  config: PopoverBuilderConfig;
  theme?: Partial<ThemeType>;
  children: React.ReactNode;
};

TourContextValue

    
type TourContextValue = {
  start: () => Promise<void>;
  isTourActive: boolean;
  distroy: () => void;
};

Additional Resources

For more detailed information on using these types, refer to: