@matthesketh/react-guidetour 1.0.0 → 1.1.1

package/src/modules/__tests__/store.test.ts

@@ -0,0 +1,384 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import createStore from '../store';
+import { ACTIONS, LIFECYCLE, STATUS } from '~/literals';
+
+describe('Store', () => {
+  describe('initialization', () => {
+    it('creates with default state when no options', () => {
+      const store = createStore();
+      const state = store.getState();
+
+      expect(state.action).toBe(ACTIONS.INIT);
+      expect(state.controlled).toBe(false);
+      expect(state.index).toBe(0);
+      expect(state.lifecycle).toBe(LIFECYCLE.INIT);
+      expect(state.origin).toBeNull();
+      expect(state.size).toBe(0);
+      expect(state.status).toBe(STATUS.IDLE);
+    });
+
+    it('creates with READY status when steps provided', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+      expect(store.getState().status).toBe(STATUS.READY);
+      expect(store.getState().size).toBe(1);
+    });
+
+    it('creates in controlled mode when stepIndex is a number', () => {
+      const store = createStore({
+        stepIndex: 0,
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+      expect(store.getState().controlled).toBe(true);
+    });
+
+    it('sets initial index from stepIndex', () => {
+      const store = createStore({
+        stepIndex: 2,
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+          { target: '.c', content: 'C' },
+        ],
+      } as any);
+      expect(store.getState().index).toBe(2);
+    });
+  });
+
+  describe('start', () => {
+    it('transitions from READY to RUNNING', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      expect(store.getState().status).toBe(STATUS.RUNNING);
+      expect(store.getState().action).toBe(ACTIONS.START);
+    });
+
+    it('transitions to WAITING when no steps', () => {
+      const store = createStore();
+      store.start();
+      expect(store.getState().status).toBe(STATUS.WAITING);
+    });
+
+    it('starts at a specific index', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }, { target: '.b', content: 'B' }],
+      } as any);
+
+      store.start(1);
+      expect(store.getState().index).toBe(1);
+    });
+  });
+
+  describe('next', () => {
+    it('increments index', () => {
+      const store = createStore({
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+          { target: '.c', content: 'C' },
+        ],
+      } as any);
+
+      store.start();
+      expect(store.getState().index).toBe(0);
+
+      store.next();
+      expect(store.getState().index).toBe(1);
+      expect(store.getState().action).toBe(ACTIONS.NEXT);
+    });
+
+    it('does nothing when not running', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.next();
+      expect(store.getState().index).toBe(0);
+    });
+
+    it('finishes when reaching the end', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      store.next();
+      expect(store.getState().status).toBe(STATUS.FINISHED);
+    });
+  });
+
+  describe('prev', () => {
+    it('decrements index', () => {
+      const store = createStore({
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+        ],
+      } as any);
+
+      store.start(1);
+      store.prev();
+      expect(store.getState().index).toBe(0);
+      expect(store.getState().action).toBe(ACTIONS.PREV);
+    });
+
+    it('clamps at 0', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      store.prev();
+      expect(store.getState().index).toBe(0);
+    });
+  });
+
+  describe('go', () => {
+    it('jumps to specific index', () => {
+      const store = createStore({
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+          { target: '.c', content: 'C' },
+        ],
+      } as any);
+
+      store.start();
+      store.go(2);
+      expect(store.getState().index).toBe(2);
+      expect(store.getState().action).toBe(ACTIONS.GO);
+    });
+
+    it('does nothing in controlled mode', () => {
+      const store = createStore({
+        stepIndex: 0,
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+        ],
+      } as any);
+
+      store.start();
+      store.go(1);
+      expect(store.getState().index).toBe(0);
+    });
+  });
+
+  describe('close', () => {
+    it('increments index and sets CLOSE action', () => {
+      const store = createStore({
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+        ],
+      } as any);
+
+      store.start();
+      store.close();
+      expect(store.getState().action).toBe(ACTIONS.CLOSE);
+      expect(store.getState().index).toBe(1);
+    });
+
+    it('accepts an origin parameter', () => {
+      const store = createStore({
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+        ],
+      } as any);
+
+      store.start();
+      store.close('keyboard');
+      expect(store.getState().origin).toBe('keyboard');
+    });
+
+    it('does nothing when not running', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.close();
+      expect(store.getState().action).toBe(ACTIONS.INIT);
+    });
+  });
+
+  describe('skip', () => {
+    it('sets status to SKIPPED', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      store.skip();
+      expect(store.getState().status).toBe(STATUS.SKIPPED);
+      expect(store.getState().action).toBe(ACTIONS.SKIP);
+    });
+  });
+
+  describe('reset', () => {
+    it('resets index to 0 with READY status', () => {
+      const store = createStore({
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+        ],
+      } as any);
+
+      store.start();
+      store.next();
+      store.reset();
+      expect(store.getState().index).toBe(0);
+      expect(store.getState().status).toBe(STATUS.READY);
+      expect(store.getState().action).toBe(ACTIONS.RESET);
+    });
+
+    it('resets with RUNNING status when restart=true', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      store.reset(true);
+      expect(store.getState().status).toBe(STATUS.RUNNING);
+    });
+
+    it('does nothing in controlled mode', () => {
+      const store = createStore({
+        stepIndex: 0,
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      store.reset();
+      expect(store.getState().index).toBe(0);
+      expect(store.getState().status).toBe(STATUS.RUNNING);
+    });
+  });
+
+  describe('stop', () => {
+    it('pauses the tour', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      store.stop();
+      expect(store.getState().status).toBe(STATUS.PAUSED);
+      expect(store.getState().action).toBe(ACTIONS.STOP);
+    });
+
+    it('advances index when advance=true', () => {
+      const store = createStore({
+        steps: [
+          { target: '.a', content: 'A' },
+          { target: '.b', content: 'B' },
+        ],
+      } as any);
+
+      store.start();
+      store.stop(true);
+      expect(store.getState().index).toBe(1);
+    });
+
+    it('does nothing when already finished', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      store.next(); // finishes
+      store.stop();
+      expect(store.getState().status).toBe(STATUS.FINISHED);
+    });
+  });
+
+  describe('listeners', () => {
+    it('notifies listener on state changes', () => {
+      const listener = vi.fn();
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.addListener(listener);
+      store.start();
+
+      expect(listener).toHaveBeenCalledTimes(1);
+      expect(listener).toHaveBeenCalledWith(
+        expect.objectContaining({ status: STATUS.RUNNING }),
+      );
+    });
+
+    it('does not notify when state has not changed', () => {
+      const listener = vi.fn();
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.addListener(listener);
+      // Update with same state - should not notify
+      store.update({ action: ACTIONS.INIT });
+
+      // The listener may or may not be called depending on whether state actually changed
+      // The point is the store works without error
+    });
+  });
+
+  describe('setSteps', () => {
+    it('updates the size', () => {
+      const store = createStore();
+      store.setSteps([
+        { target: '.a', content: 'A' },
+        { target: '.b', content: 'B' },
+      ] as any);
+      expect(store.getState().size).toBe(2);
+    });
+
+    it('transitions from WAITING to RUNNING when steps arrive', () => {
+      const store = createStore();
+      store.start(); // WAITING since no steps
+      expect(store.getState().status).toBe(STATUS.WAITING);
+
+      store.setSteps([{ target: '.a', content: 'A' }] as any);
+      expect(store.getState().status).toBe(STATUS.RUNNING);
+    });
+  });
+
+  describe('getHelpers', () => {
+    it('returns helper functions', () => {
+      const store = createStore();
+      const helpers = store.getHelpers();
+
+      expect(typeof helpers.close).toBe('function');
+      expect(typeof helpers.go).toBe('function');
+      expect(typeof helpers.info).toBe('function');
+      expect(typeof helpers.next).toBe('function');
+      expect(typeof helpers.open).toBe('function');
+      expect(typeof helpers.prev).toBe('function');
+      expect(typeof helpers.reset).toBe('function');
+      expect(typeof helpers.skip).toBe('function');
+    });
+  });
+
+  describe('update', () => {
+    it('updates state with valid keys', () => {
+      const store = createStore({
+        steps: [{ target: '.a', content: 'A' }],
+      } as any);
+
+      store.start();
+      store.update({ lifecycle: LIFECYCLE.TOOLTIP });
+      expect(store.getState().lifecycle).toBe(LIFECYCLE.TOOLTIP);
+    });
+
+    it('throws on invalid keys', () => {
+      const store = createStore();
+      expect(() => {
+        store.update({ invalid: 'key' } as any);
+      }).toThrow('State is not valid');
+    });
+  });
+});

package/src/modules/step.ts

@@ -1,12 +1,11 @@
 import deepmerge from 'deepmerge';
 import is from 'is-lite';
 
-import { defaultFloaterProps, defaultLocale, defaultStep } from '~/defaults';
+import { defaultLocale, defaultStep } from '~/defaults';
 import getStyles from '~/styles';
 import { Props, Step, StepMerged } from '~/types';
 
-import { getElement, hasCustomScrollParent } from './dom';
-import { log, omit, pick } from './helpers';
+import { log, pick } from './helpers';
 
 function getTourProps(props: Props) {
   return pick(
@@ -17,7 +16,6 @@ function getTourProps(props: Props) {
     'disableOverlayClose',
     'disableScrolling',
     'disableScrollParentFix',
-    'floaterProps',
     'hideBackButton',
     'hideCloseButton',
     'locale',
@@ -37,38 +35,11 @@ export function getMergedStep(props: Props, currentStep?: Step): StepMerged {
   }) as StepMerged;
 
   const mergedStyles = getStyles(props, mergedStep);
-  const scrollParent = hasCustomScrollParent(
-    getElement(mergedStep.target),
-    mergedStep.disableScrollParentFix,
-  );
-  const floaterProps = deepmerge.all([
-    defaultFloaterProps,
-    props.floaterProps ?? {},
-    mergedStep.floaterProps ?? {},
-  ]) as any;
-
-  // Set react-floater props
-  floaterProps.offset = mergedStep.offset;
-  floaterProps.styles = deepmerge(floaterProps.styles ?? {}, mergedStyles.floaterStyles);
-
-  floaterProps.offset += props.spotlightPadding ?? mergedStep.spotlightPadding ?? 0;
-
-  if (mergedStep.placementBeacon && floaterProps.wrapperOptions) {
-    floaterProps.wrapperOptions.placement = mergedStep.placementBeacon;
-  }
-
-  if (scrollParent && floaterProps.modifiers?.preventOverflow) {
-    floaterProps.modifiers.preventOverflow.options = {
-      ...floaterProps.modifiers.preventOverflow.options,
-      boundary: 'window',
-    };
-  }
 
   return {
     ...mergedStep,
     locale: deepmerge.all([defaultLocale, props.locale ?? {}, mergedStep.locale || {}]),
-    floaterProps,
-    styles: omit(mergedStyles, 'floaterStyles'),
+    styles: mergedStyles,
   };
 }
 

package/src/modules/store.ts

@@ -8,7 +8,6 @@ import { hasValidKeys, objectKeys, omit } from './helpers';
 
 type StateWithContinuous = State & { continuous: boolean };
 type Listener = (state: State) => void;
-type PopperData = any;
 
 const defaultState: State = {
   action: 'init',
@@ -22,8 +21,6 @@ const defaultState: State = {
 const validKeys = objectKeys(omit(defaultState, 'controlled', 'size'));
 
 class Store {
-  private beaconPopper: PopperData | null;
-  private tooltipPopper: PopperData | null;
   private data: Map<string, any> = new Map();
   private listener: Listener | null;
   private store: Map<string, any> = new Map();
@@ -44,8 +41,6 @@ class Store {
       true,
     );
 
-    this.beaconPopper = null;
-    this.tooltipPopper = null;
     this.listener = null;
     this.setSteps(steps);
   }
@@ -160,27 +155,6 @@ class Store {
     };
   }
 
-  public getPopper = (name: 'beacon' | 'tooltip'): PopperData | null => {
-    if (name === 'beacon') {
-      return this.beaconPopper;
-    }
-
-    return this.tooltipPopper;
-  };
-
-  public setPopper = (name: 'beacon' | 'tooltip', popper: PopperData) => {
-    if (name === 'beacon') {
-      this.beaconPopper = popper;
-    } else {
-      this.tooltipPopper = popper;
-    }
-  };
-
-  public cleanupPoppers = () => {
-    this.beaconPopper = null;
-    this.tooltipPopper = null;
-  };
-
   public close = (origin: Origin | null = null) => {
     const { index, status } = this.getState();
 

package/src/styles.ts

@@ -1,7 +1,7 @@
 import deepmerge from 'deepmerge';
 
 import { hexToRGB } from './modules/helpers';
-import { Props, StepMerged, StylesOptions, StylesWithFloaterStyles } from './types';
+import { Props, StepMerged, Styles, StylesOptions } from './types';
 
 const defaultOptions = {
   arrowColor: '#fff',
@@ -33,8 +33,7 @@ const spotlight = {
 };
 
 export default function getStyles(props: Props, step: StepMerged) {
-  const { floaterProps, styles } = props;
-  const mergedFloaterProps = deepmerge(step.floaterProps ?? {}, floaterProps ?? {});
+  const { styles } = props;
   const mergedStyles = deepmerge(styles ?? {}, step.styles ?? {});
   const options = deepmerge(defaultOptions, mergedStyles.options || {}) satisfies StylesOptions;
   const hideBeacon = step.placement === 'center' || step.disableBeacon;
@@ -176,16 +175,8 @@ export default function getStyles(props: Props, step: StepMerged) {
       ...spotlight,
       boxShadow: `0 0 0 9999px ${options.overlayColor}, ${options.spotlightShadow}`,
     },
-    floaterStyles: {
-      arrow: {
-        color: mergedFloaterProps?.styles?.arrow?.color ?? options.arrowColor,
-      },
-      options: {
-        zIndex: options.zIndex + 100,
-      },
-    },
     options,
   };
 
-  return deepmerge(defaultStyles, mergedStyles) as StylesWithFloaterStyles;
+  return deepmerge(defaultStyles, mergedStyles) as Styles;
 }

package/src/types/common.ts

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode } from 'react';
-import { Styles as FloaterStyles } from 'react-floater';
 import { ValueOf } from 'type-fest';
 
 import { ACTIONS, EVENTS, LIFECYCLE, ORIGIN, STATUS } from '~/literals';
@@ -93,10 +92,6 @@ export interface Styles {
   tooltipTitle: CSSProperties;
 }
 
-export interface StylesWithFloaterStyles extends Styles {
-  floaterStyles: FloaterStyles;
-}
-
 export interface StylesOptions {
   arrowColor: string;
   backgroundColor: string;

package/src/types/components.ts

@@ -1,5 +1,4 @@
 import { ElementType, MouseEventHandler, ReactNode, RefCallback } from 'react';
-import { Props as FloaterProps } from 'react-floater';
 import { PartialDeep, SetRequired, Simplify } from 'type-fest';
 
 import type { StoreInstance } from '~/modules/store';
@@ -35,10 +34,6 @@ export type BaseProps = {
    * @default false
    */
   disableScrolling?: boolean;
-  /**
-   * Options to be passed to react-floater
-   */
-  floaterProps?: Partial<FloaterProps>;
   /**
    * Hide the Back button.
    * @default false
@@ -236,10 +231,6 @@ export type Step = Simplify<
      * @default click
      */
     event?: 'click' | 'hover';
-    /**
-     * Options to be passed to react-floater
-     */
-    floaterProps?: FloaterProps;
     /**
      * Hide the tooltip's footer.
      * @default false
@@ -379,4 +370,3 @@ export type TooltipRenderProps = Simplify<
   }
 >;
 
-export type { Props as FloaterProps } from 'react-floater';