@matthesketh/react-guidetour 1.0.0

package/LICENSE

@@ -0,0 +1,15 @@
+This package is a modernised fork of react-joyride by Gil Barbara.
+Original source: https://github.com/gilbarbara/react-joyride
+The original MIT license is preserved below.
+
+---
+
+MIT License
+
+Copyright (c) 2015, Gil Barbara
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# @wrxck/react-guidetour
+
+React 19 guided tour component. A modernised fork of [react-joyride](https://github.com/gilbarbara/react-joyride) by Gil Barbara.
+
+## Why this fork?
+
+react-joyride v2.9.3 uses `ReactDOM.unmountComponentAtNode()` and `ReactDOM.unstable_renderSubtreeIntoContainer()`, both removed in React 19. This fork:
+
+- Converts all class components to functional components with hooks
+- Uses `createPortal` directly (no legacy React 15/16 branching)
+- Removes legacy browser detection (IE/Edge legacy)
+- Targets React 19+ only
+
+## Install
+
+```bash
+npm install @wrxck/react-guidetour
+```
+
+## Usage
+
+The API is the same as react-joyride. See the [react-joyride documentation](https://docs.react-joyride.com/) for full usage details.
+
+```tsx
+import Joyride from '@wrxck/react-guidetour';
+
+const steps = [
+  {
+    target: '.my-first-step',
+    content: 'This is my first step!',
+  },
+];
+
+function App() {
+  return <Joyride steps={steps} />;
+}
+```
+
+## Attribution
+
+Original work by [Gil Barbara](https://github.com/gilbarbara) under the MIT License.

package/dist/index.d.mts

@@ -0,0 +1,496 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, ReactNode, ElementType, MouseEventHandler, RefCallback } from 'react';
+import { Styles as Styles$1, Props as Props$1 } from 'react-floater';
+export { Props as FloaterProps } from 'react-floater';
+import { ValueOf, Simplify, SetRequired, PartialDeep } from 'type-fest';
+
+declare const ACTIONS: {
+    readonly INIT: "init";
+    readonly START: "start";
+    readonly STOP: "stop";
+    readonly RESET: "reset";
+    readonly PREV: "prev";
+    readonly NEXT: "next";
+    readonly GO: "go";
+    readonly CLOSE: "close";
+    readonly SKIP: "skip";
+    readonly UPDATE: "update";
+};
+declare const EVENTS: {
+    readonly TOUR_START: "tour:start";
+    readonly STEP_BEFORE: "step:before";
+    readonly BEACON: "beacon";
+    readonly TOOLTIP: "tooltip";
+    readonly STEP_AFTER: "step:after";
+    readonly TOUR_END: "tour:end";
+    readonly TOUR_STATUS: "tour:status";
+    readonly TARGET_NOT_FOUND: "error:target_not_found";
+    readonly ERROR: "error";
+};
+declare const LIFECYCLE: {
+    readonly INIT: "init";
+    readonly READY: "ready";
+    readonly BEACON: "beacon";
+    readonly TOOLTIP: "tooltip";
+    readonly COMPLETE: "complete";
+    readonly ERROR: "error";
+};
+declare const ORIGIN: {
+    readonly BUTTON_CLOSE: "button_close";
+    readonly BUTTON_PRIMARY: "button_primary";
+    readonly KEYBOARD: "keyboard";
+    readonly OVERLAY: "overlay";
+};
+declare const STATUS: {
+    readonly IDLE: "idle";
+    readonly READY: "ready";
+    readonly WAITING: "waiting";
+    readonly RUNNING: "running";
+    readonly PAUSED: "paused";
+    readonly SKIPPED: "skipped";
+    readonly FINISHED: "finished";
+    readonly ERROR: "error";
+};
+
+type Actions = ValueOf<typeof ACTIONS>;
+type Events = ValueOf<typeof EVENTS>;
+type Lifecycle = ValueOf<typeof LIFECYCLE>;
+type Origin = ValueOf<typeof ORIGIN>;
+type Status = ValueOf<typeof STATUS>;
+type AnyObject<T = any> = Record<string, T>;
+type NarrowPlainObject<T extends Record<string, any>> = Exclude<T, Array<unknown> | Function | Map<unknown, unknown> | Set<unknown>>;
+interface Locale {
+    /**
+     * Label for the back button.
+     * @default 'Back'
+     */
+    back?: ReactNode;
+    /**
+     * Label for the close button.
+     * @default 'Close'
+     */
+    close?: ReactNode;
+    /**
+     * Label for the last button.
+     * @default 'Last'
+     */
+    last?: ReactNode;
+    /**
+     * Label for the next button.
+     * @default 'Next'
+     */
+    next?: ReactNode;
+    /**
+     * Label for the next button with `showProgress`.
+     * Use the `{step}` and `{steps}` placeholders to display the current step and the total steps.
+     * @default 'Next (Step {step} of {steps})'
+     */
+    nextLabelWithProgress?: ReactNode;
+    /**
+     * Label for the open button.
+     * @default 'Open the dialog'
+     */
+    open?: ReactNode;
+    /**
+     * Label for the skip button.
+     * @default 'Skip'
+     */
+    skip?: ReactNode;
+}
+type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+interface Styles {
+    beacon: CSSProperties;
+    beaconInner: CSSProperties;
+    beaconOuter: CSSProperties;
+    buttonBack: CSSProperties;
+    buttonClose: CSSProperties;
+    buttonNext: CSSProperties;
+    buttonSkip: CSSProperties;
+    options: Partial<StylesOptions>;
+    overlay: CSSProperties;
+    overlayLegacy: CSSProperties;
+    overlayLegacyCenter: CSSProperties;
+    spotlight: CSSProperties;
+    spotlightLegacy: CSSProperties;
+    tooltip: CSSProperties;
+    tooltipContainer: CSSProperties;
+    tooltipContent: CSSProperties;
+    tooltipFooter: CSSProperties;
+    tooltipFooterSpacer: CSSProperties;
+    tooltipTitle: CSSProperties;
+}
+interface StylesWithFloaterStyles extends Styles {
+    floaterStyles: Styles$1;
+}
+interface StylesOptions {
+    arrowColor: string;
+    backgroundColor: string;
+    beaconSize: number;
+    overlayColor: string;
+    primaryColor: string;
+    spotlightShadow: string;
+    textColor: string;
+    width?: string | number;
+    zIndex: number;
+}
+
+type Listener = (state: State) => void;
+type PopperData = any;
+declare class Store {
+    private beaconPopper;
+    private tooltipPopper;
+    private data;
+    private listener;
+    private store;
+    constructor(options?: StoreOptions);
+    getState(): State;
+    private getNextState;
+    private getSteps;
+    private hasUpdatedState;
+    private setState;
+    addListener: (listener: Listener) => void;
+    setSteps: (steps: Array<Step>) => void;
+    getHelpers(): StoreHelpers;
+    getPopper: (name: "beacon" | "tooltip") => PopperData | null;
+    setPopper: (name: "beacon" | "tooltip", popper: PopperData) => void;
+    cleanupPoppers: () => void;
+    close: (origin?: Origin | null) => void;
+    go: (nextIndex: number) => void;
+    info: () => State;
+    next: () => void;
+    open: () => void;
+    prev: () => void;
+    reset: (restart?: boolean) => void;
+    skip: () => void;
+    start: (nextIndex?: number) => void;
+    stop: (advance?: boolean) => void;
+    update: (state: Partial<State>) => void;
+}
+type StoreInstance = ReturnType<typeof createStore>;
+declare function createStore(options?: StoreOptions): Store;
+
+type BaseProps = {
+    /**
+     * A React component to use instead the default Beacon.
+     */
+    beaconComponent?: ElementType<BeaconRenderProps>;
+    /**
+     * Disable closing the tooltip on ESC.
+     * @default false
+     */
+    disableCloseOnEsc?: boolean;
+    /**
+     * Don't show the overlay.
+     * @default false
+     */
+    disableOverlay?: boolean;
+    /**
+     * Don't close the tooltip when clicking the overlay.
+     * @default false
+     */
+    disableOverlayClose?: boolean;
+    /**
+     * Disable the fix to handle "unused" overflow parents.
+     * @default false
+     */
+    disableScrollParentFix?: boolean;
+    /**
+     * @default false
+     */
+    disableScrolling?: boolean;
+    /**
+     * Options to be passed to react-floater
+     */
+    floaterProps?: Partial<Props$1>;
+    /**
+     * Hide the Back button.
+     * @default false
+     */
+    hideBackButton?: boolean;
+    /**
+     * Hide the Close button.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * The strings used in the tooltip.
+     */
+    locale?: Locale;
+    /**
+     * @default false
+     */
+    showProgress?: boolean;
+    /**
+     * @default false
+     */
+    showSkipButton?: boolean;
+    /**
+     * @default false
+     */
+    spotlightClicks?: boolean;
+    /**
+     * The padding of the spotlight.
+     * @default 10
+     */
+    spotlightPadding?: number;
+    /**
+     * Override the styling of the Tooltip
+     */
+    styles?: PartialDeep<Styles>;
+    /**
+     * A React component to use instead the default Tooltip.
+     */
+    tooltipComponent?: ElementType<TooltipRenderProps>;
+};
+type BeaconProps = Simplify<Pick<Props, 'beaconComponent' | 'nonce'> & BeaconRenderProps & {
+    locale: Locale;
+    onClickOrHover: MouseEventHandler<HTMLElement>;
+    shouldFocus: boolean;
+    styles: Styles;
+}>;
+type BeaconRenderProps = {
+    continuous: boolean;
+    index: number;
+    isLastStep: boolean;
+    size: number;
+    step: StepMerged;
+};
+type Callback = (data: CallBackProps) => void;
+type CallBackProps = {
+    /**
+     * The action that updated the state.
+     */
+    action: Actions;
+    /**
+     * It the tour is in `controlled` mode.
+     * (using the `stepIndex` prop)
+     */
+    controlled: boolean;
+    /**
+     * The current step's index
+     */
+    index: number;
+    /**
+     *  The step's lifecycle.
+     */
+    lifecycle: Lifecycle;
+    /**
+     * The element that triggered the action (if available).
+     */
+    origin: Origin | null;
+    /**
+     * The number of steps
+     */
+    size: number;
+    /**
+     * The tour's status.
+     */
+    status: Status;
+    /**
+     * The current step's data.
+     */
+    step: Step;
+    /**
+     * The type of the event.
+     */
+    type: Events;
+};
+type OverlayProps = Simplify<StepMerged & {
+    continuous: boolean;
+    debug: boolean;
+    lifecycle: Lifecycle;
+    onClickOverlay: () => void;
+}>;
+type Props = Simplify<BaseProps & {
+    /**
+     * A function to be called when Joyride's state changes.
+     * It returns a single parameter with the state.
+     */
+    callback?: Callback;
+    /**
+     * The tour is played sequentially with the Next button.
+     * @default false
+     */
+    continuous?: boolean;
+    /**
+     * Log Joyride's actions to the console.
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info`
+     */
+    getHelpers?: (helpers: StoreHelpers) => void;
+    /**
+     * A nonce value for inline styles (Content Security Policy - CSP)
+     */
+    nonce?: string;
+    /**
+     * Run/stop the tour.
+     * @default true
+     */
+    run?: boolean;
+    /**
+     * The duration for scroll to element.
+     * @default 300
+     */
+    scrollDuration?: number;
+    /**
+     * The scroll distance from the element scrollTop value.
+     * @default 20
+     */
+    scrollOffset?: number;
+    /**
+     * Scroll the page for the first step.
+     * @default false
+     */
+    scrollToFirstStep?: boolean;
+    /**
+     * Setting a number here will turn Joyride into `controlled` mode.
+     * You'll have to keep an internal state by yourself and update it with the events in the `callback`.
+     */
+    stepIndex?: number;
+    /**
+     * The tour's steps.
+     */
+    steps: Array<Step>;
+}>;
+type State = {
+    action: Actions;
+    controlled: boolean;
+    index: number;
+    lifecycle: Lifecycle;
+    origin: Origin | null;
+    size: number;
+    status: Status;
+};
+type Step = Simplify<BaseProps & {
+    /**
+     * The tooltip's body.
+     */
+    content: ReactNode;
+    /**
+     * Additional data you can add to the step.
+     */
+    data?: any;
+    /**
+     * Don't show the Beacon before the tooltip.
+     * @default false
+     */
+    disableBeacon?: boolean;
+    /**
+     * The event to trigger the beacon.
+     * @default click
+     */
+    event?: 'click' | 'hover';
+    /**
+     * Options to be passed to react-floater
+     */
+    floaterProps?: Props$1;
+    /**
+     * Hide the tooltip's footer.
+     * @default false
+     */
+    hideFooter?: boolean;
+    /**
+     * Force the step to be fixed.
+     * @default false
+     */
+    isFixed?: boolean;
+    /**
+     * @default 10
+     */
+    offset?: number;
+    /**
+     * The placement of the beacon and tooltip. It will re-position itself if there's no space available.
+     * @default bottom
+     */
+    placement?: Placement | 'auto' | 'center';
+    /**
+     * The placement of the beacon. It will use the `placement` if nothing is passed
+     */
+    placementBeacon?: Placement;
+    /**
+     * The target for the step.
+     * It can be a CSS selector or an HTMLElement ref.
+     */
+    target: string | HTMLElement;
+    /**
+     * The tooltip's title.
+     */
+    title?: ReactNode;
+}>;
+type StepMerged = Simplify<SetRequired<Step, 'disableBeacon' | 'disableCloseOnEsc' | 'disableOverlay' | 'disableOverlayClose' | 'disableScrollParentFix' | 'disableScrolling' | 'event' | 'hideBackButton' | 'hideCloseButton' | 'hideFooter' | 'isFixed' | 'locale' | 'offset' | 'placement' | 'showProgress' | 'showSkipButton' | 'spotlightClicks' | 'spotlightPadding'> & {
+    styles: Styles;
+}>;
+type StepProps = Simplify<State & {
+    callback: Callback;
+    continuous: boolean;
+    debug: boolean;
+    helpers: StoreHelpers;
+    nonce?: string;
+    shouldScroll: boolean;
+    step: StepMerged;
+    store: StoreInstance;
+}>;
+type StoreHelpers = {
+    close: (origin?: Origin | null) => void;
+    go: (nextIndex: number) => void;
+    info: () => State;
+    next: () => void;
+    open: () => void;
+    prev: () => void;
+    reset: (restart: boolean) => void;
+    skip: () => void;
+};
+type StoreOptions = Simplify<Props & {
+    controlled: boolean;
+}>;
+type TooltipProps = {
+    continuous: boolean;
+    helpers: StoreHelpers;
+    index: number;
+    isLastStep: boolean;
+    setTooltipRef: RefCallback<HTMLElement>;
+    size: number;
+    step: StepMerged;
+};
+type TooltipRenderProps = Simplify<BeaconRenderProps & {
+    backProps: {
+        'aria-label': string;
+        'data-action': string;
+        onClick: MouseEventHandler<HTMLElement>;
+        role: string;
+        title: string;
+    };
+    closeProps: {
+        'aria-label': string;
+        'data-action': string;
+        onClick: MouseEventHandler<HTMLElement>;
+        role: string;
+        title: string;
+    };
+    primaryProps: {
+        'aria-label': string;
+        'data-action': string;
+        onClick: MouseEventHandler<HTMLElement>;
+        role: string;
+        title: string;
+    };
+    skipProps: {
+        'aria-label': string;
+        'data-action': string;
+        onClick: MouseEventHandler<HTMLElement>;
+        role: string;
+        title: string;
+    };
+    tooltipProps: {
+        'aria-modal': boolean;
+        ref: RefCallback<HTMLElement>;
+        role: string;
+    };
+}>;
+
+declare function Joyride(inputProps: Props): react_jsx_runtime.JSX.Element | null;
+
+export { ACTIONS, type Actions, type AnyObject, type BaseProps, type BeaconProps, type BeaconRenderProps, type CallBackProps, type Callback, EVENTS, type Events, LIFECYCLE, type Lifecycle, type Locale, type NarrowPlainObject, ORIGIN, type Origin, type OverlayProps, type Placement, type Props, STATUS, type State, type Status, type Step, type StepMerged, type StepProps, type StoreHelpers, type StoreOptions, type Styles, type StylesOptions, type StylesWithFloaterStyles, type TooltipProps, type TooltipRenderProps, Joyride as default };