@numidev/react-joyride 1.0.1

package/src/types/state.ts

@@ -0,0 +1,49 @@
+import type { Actions, Lifecycle, Origin, Status } from './common';
+
+/** Methods to programmatically control the tour. */
+export type Controls = {
+  /** Close the current step and advance to the next one. */
+  close: (origin?: Origin | null) => void;
+  /** Jump to a specific step by index. */
+  go: (nextIndex: number) => void;
+  /** Get the current tour state. */
+  info: () => State;
+  /** Advance to the next step. */
+  next: (origin?: Origin | null) => void;
+  /** Open the tooltip for the current step. */
+  open: () => void;
+  /** Go back to the previous step. */
+  prev: (origin?: Origin | null) => void;
+  /** Replay the current step. Re-runs `before` and `after` hooks and re-emits step lifecycle events. */
+  replay: (origin?: Origin | null) => void;
+  /** Reset the tour. Optionally restart from the beginning. */
+  reset: (restart?: boolean) => void;
+  /** Skip the tour entirely. */
+  skip: (origin?: Extract<Origin, 'button_close' | 'button_skip'> | null) => void;
+  /** Start the tour at an optional step index. */
+  start: (nextIndex?: number) => void;
+  /** Stop the tour. Optionally advance to the next step before stopping. */
+  stop: (advance?: boolean) => void;
+};
+
+/** The internal tour state. */
+export type State = {
+  /** The action that triggered the state update. */
+  action: Actions;
+  /** Whether the tour is in controlled mode (using `stepIndex`). */
+  controlled: boolean;
+  /** The current step index. */
+  index: number;
+  /** The step's rendering phase. */
+  lifecycle: Lifecycle;
+  /** The UI element that triggered the last action. */
+  origin: Origin | null;
+  /** Whether the tour is scrolling to a target. */
+  scrolling: boolean;
+  /** The total number of steps. */
+  size: number;
+  /** The tour's current status. */
+  status: Status;
+  /** Whether the tour is blocked waiting for a `before` hook or target to appear. */
+  waiting: boolean;
+};

package/src/types/step.ts

@@ -0,0 +1,108 @@
+import type { ReactNode, RefObject } from 'react';
+
+import type { SharedProps } from '~/types/props';
+
+import type { Options, Placement, SpotlightPadding, Styles } from './common';
+import type { SetRequired, Simplify } from './utilities';
+
+/** A CSS selector string, an HTMLElement, or null. */
+export type SelectorOrElement = string | null | HTMLElement;
+
+/** A single step in the tour, provided by the user. */
+export type Step = Simplify<
+  SharedProps &
+    Partial<Options> & {
+      /**
+       * The placement of the beacon. It will use the `placement` if nothing is passed.
+       */
+      beaconPlacement?: Placement;
+      /**
+       * The tooltip's body.
+       */
+      content: ReactNode;
+      /**
+       * Additional data you can add to the step.
+       */
+      data?: any;
+      /**
+       * A unique identifier for the step.
+       */
+      id?: string;
+      /**
+       * Force the step to be fixed.
+       * @default false
+       */
+      isFixed?: boolean;
+      /**
+       * The placement of the beacon and tooltip. It will re-position itself if there's no space available.
+       * @default bottom
+       */
+      placement?: Placement | 'auto' | 'center';
+      /**
+       * An optional element to scroll to instead of the target.
+       * The spotlight and tooltip will still use `target`.
+       */
+      scrollTarget?: StepTarget;
+      /**
+       * An optional element to highlight instead of the target.
+       * The tooltip will still anchor to `target`.
+       */
+      spotlightTarget?: StepTarget;
+      /**
+       * The target for the step.
+       * It can be a CSS selector, an HTMLElement, a React ref, or a function that returns an element.
+       */
+      target: StepTarget;
+      /**
+       * The tooltip's title.
+       */
+      title?: ReactNode;
+    }
+>;
+
+/** A normalized step with all defaults applied. */
+export type StepMerged = Simplify<
+  SetRequired<
+    Step,
+    | 'arrowBase'
+    | 'arrowColor'
+    | 'arrowSize'
+    | 'arrowSpacing'
+    | 'backgroundColor'
+    | 'beaconSize'
+    | 'beaconTrigger'
+    | 'beforeTimeout'
+    | 'buttons'
+    | 'closeButtonAction'
+    | 'skipBeacon'
+    | 'dismissKeyAction'
+    | 'disableFocusTrap'
+    | 'hideOverlay'
+    | 'skipScroll'
+    | 'blockTargetInteraction'
+    | 'isFixed'
+    | 'loaderDelay'
+    | 'locale'
+    | 'offset'
+    | 'overlayClickAction'
+    | 'overlayColor'
+    | 'placement'
+    | 'primaryColor'
+    | 'scrollDuration'
+    | 'scrollOffset'
+    | 'showProgress'
+    | 'spotlightRadius'
+    | 'targetWaitTimeout'
+    | 'textColor'
+    | 'zIndex'
+  > & {
+    spotlightPadding: Required<SpotlightPadding>;
+    styles: Styles;
+  }
+>;
+
+export type StepTarget =
+  | string
+  | HTMLElement
+  | RefObject<HTMLElement | null>
+  | (() => HTMLElement | null);

package/src/types/utilities.ts

@@ -0,0 +1,26 @@
+/** Generic record type. */
+export type AnyObject<T = any> = Record<string, T>;
+
+/** Excludes arrays, functions, Map, and Set from a record type. */
+export type NarrowPlainObject<T extends Record<string, any>> = Exclude<
+  T,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  Array<unknown> | Function | Map<unknown, unknown> | Set<unknown>
+>;
+
+/** Makes all properties optional, with one level of depth for nested objects. */
+export type PartialDeep<T> = {
+  [K in keyof T]?: T[K] extends object ? Partial<T[K]> : T[K];
+};
+
+/** Generic record type with unknown values. */
+export type PlainObject<T = unknown> = Record<string, T>;
+
+/** Makes specific keys required while keeping others unchanged. */
+export type SetRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+
+/** Flattens intersection types for better IDE display. */
+export type Simplify<T> = { [K in keyof T]: T[K] } & {};
+
+/** Extracts a union of all values from an object type. */
+export type ValueOf<T> = T[keyof T];