@numidev/react-joyride 1.0.1

package/src/components/Loader.tsx

@@ -0,0 +1,80 @@
+import { type CSSProperties, useEffect } from 'react';
+
+import { noop } from '~/modules/helpers';
+
+import type { LoaderRenderProps, Props, Simplify } from '~/types';
+
+type LoaderProps = Simplify<Pick<Props, 'nonce'> & LoaderRenderProps>;
+
+const spinnerStyles: CSSProperties = {
+  animation: 'joyride-loader-spin 1s linear infinite',
+  border: '5px solid rgba(0, 0, 0, 0.1)',
+  borderRadius: '50%',
+  borderTopColor: '#555',
+};
+
+export default function JoyrideLoader({ nonce, step }: LoaderProps) {
+  const { loaderComponent } = step;
+
+  const hasLoaderComponent = Boolean(loaderComponent);
+
+  useEffect(() => {
+    if (hasLoaderComponent) {
+      return noop;
+    }
+
+    if (document.getElementById('joyride-loader-animation')) {
+      return noop;
+    }
+
+    const style = document.createElement('style');
+
+    style.id = 'joyride-loader-animation';
+
+    if (nonce) {
+      style.setAttribute('nonce', nonce);
+    }
+
+    style.appendChild(
+      document.createTextNode(`
+        @keyframes joyride-loader-spin {
+          to { transform: rotate(360deg); }
+        }
+      `),
+    );
+
+    document.head.appendChild(style);
+
+    return () => {
+      const insertedStyle = document.getElementById('joyride-loader-animation');
+
+      if (insertedStyle?.parentNode) {
+        insertedStyle.parentNode.removeChild(insertedStyle);
+      }
+    };
+  }, [hasLoaderComponent, nonce]);
+
+  if (loaderComponent === null) {
+    return null;
+  }
+
+  const { height, width, ...loaderStyle } = step.styles.loader;
+
+  let content;
+
+  if (loaderComponent) {
+    const CustomLoader = loaderComponent;
+
+    content = <CustomLoader step={step} />;
+  } else {
+    content = (
+      <div style={{ ...spinnerStyles, height, width, borderTopColor: step.primaryColor }} />
+    );
+  }
+
+  return (
+    <div className="react-joyride__loader" data-testid="loader" style={loaderStyle}>
+      {content}
+    </div>
+  );
+}

package/src/components/Overlay.tsx

@@ -0,0 +1,167 @@
+import { type CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
+import { useWindowSize } from '@gilbarbara/hooks';
+
+import useTargetPosition from '~/hooks/useTargetPosition';
+import { LIFECYCLE } from '~/literals';
+import { getAbsoluteOffset, getDocumentHeight, getElement } from '~/modules/dom';
+import { generateOverlayPath, generateSpotlightPath } from '~/modules/svg';
+
+import type { Lifecycle, Simplify, StepMerged } from '~/types';
+
+export type OverlayProps = Simplify<
+  StepMerged & {
+    continuous: boolean;
+    lifecycle: Lifecycle;
+    onClickOverlay: () => void;
+    portalElement?: HTMLElement | null;
+    scrolling: boolean;
+    waiting: boolean;
+  }
+>;
+
+const hiddenLifecycles: Lifecycle[] = [LIFECYCLE.BEACON_BEFORE, LIFECYCLE.BEACON];
+
+export default function JoyrideOverlay(props: OverlayProps) {
+  const {
+    blockTargetInteraction,
+    continuous,
+    hideOverlay,
+    lifecycle,
+    onClickOverlay,
+    overlayClickAction,
+    placement,
+    portalElement,
+    scrolling,
+    spotlightPadding,
+    spotlightRadius,
+    spotlightTarget,
+    styles,
+    target,
+    waiting,
+  } = props;
+  const windowSize = useWindowSize();
+  const targetRect = useTargetPosition(
+    spotlightTarget ?? target,
+    spotlightPadding,
+    scrolling || waiting,
+  );
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const showSpotlight =
+    (lifecycle === LIFECYCLE.TOOLTIP || lifecycle === LIFECYCLE.TOOLTIP_BEFORE) &&
+    placement !== 'center';
+  const [spotlightReady, setSpotlightReady] = useState(false);
+
+  const container = portalElement ? (overlayRef.current?.offsetParent as HTMLElement | null) : null;
+  const overlayWidth = container?.clientWidth ?? windowSize.width;
+  const overlayHeight = container?.clientHeight ?? getDocumentHeight() ?? windowSize.height;
+
+  const overlayColor = (styles.overlay?.backgroundColor ?? 'rgba(0, 0, 0, 0.5)') as string;
+
+  const overlayStyles = useMemo(() => {
+    const { backgroundColor: _bg, mixBlendMode: _mbm, ...rest } = styles.overlay;
+
+    return {
+      height: overlayHeight,
+      pointerEvents: 'none',
+      ...rest,
+    } as CSSProperties;
+  }, [overlayHeight, styles.overlay]);
+
+  const showCutout = showSpotlight && !scrolling && !waiting;
+
+  useEffect(() => {
+    if (showCutout) {
+      requestAnimationFrame(() => setSpotlightReady(true));
+    } else {
+      setSpotlightReady(false);
+    }
+  }, [showCutout]);
+
+  const isHiddenInContinuous = continuous && hiddenLifecycles.includes(lifecycle);
+  const isHiddenInNonContinuous = !continuous && lifecycle !== LIFECYCLE.TOOLTIP;
+
+  if (hideOverlay || (!waiting && (isHiddenInContinuous || isHiddenInNonContinuous))) {
+    return null;
+  }
+
+  // When using a custom portal, compute spotlight in layout space (offsetTop/offsetLeft/offsetWidth/offsetHeight)
+  // because targetRect uses getBoundingClientRect() which is viewport-relative and doesn't match the SVG's layout space.
+  let coverPath = '';
+
+  if (showCutout) {
+    if (portalElement && container) {
+      const targetEl = getElement(spotlightTarget ?? target);
+
+      if (targetEl) {
+        const targetOffset = getAbsoluteOffset(targetEl);
+        const containerOffset = getAbsoluteOffset(container);
+
+        coverPath = generateSpotlightPath(
+          targetOffset.left - containerOffset.left - spotlightPadding.left,
+          targetOffset.top - containerOffset.top - spotlightPadding.top,
+          targetEl.offsetWidth + spotlightPadding.left + spotlightPadding.right,
+          targetEl.offsetHeight + spotlightPadding.top + spotlightPadding.bottom,
+          spotlightRadius,
+        );
+      }
+    } else {
+      coverPath = generateSpotlightPath(
+        targetRect.left,
+        targetRect.top,
+        targetRect.width,
+        targetRect.height,
+        spotlightRadius,
+      );
+    }
+  }
+
+  const path = generateOverlayPath(overlayWidth, overlayHeight, coverPath);
+
+  return (
+    <div
+      ref={overlayRef}
+      aria-hidden="true"
+      className="react-joyride__overlay"
+      data-testid="overlay"
+      style={overlayStyles}
+    >
+      <svg
+        className="react-joyride__spotlight"
+        data-testid="spotlight"
+        style={{
+          height: overlayHeight,
+          left: 0,
+          position: targetRect.isFixed ? 'fixed' : 'absolute',
+          top: 0,
+          width: overlayWidth,
+        }}
+      >
+        <path
+          d={path}
+          fill={overlayColor}
+          fillRule="evenodd"
+          onClick={onClickOverlay}
+          style={{
+            cursor: overlayClickAction ? 'pointer' : 'default',
+            pointerEvents: 'auto',
+          }}
+        />
+        {coverPath && (
+          <path
+            d={coverPath}
+            fill={overlayColor}
+            style={{
+              opacity: spotlightReady ? 0 : 1,
+              pointerEvents: blockTargetInteraction ? 'auto' : 'none',
+              transition: 'opacity 0.2s',
+            }}
+          />
+        )}
+        {coverPath && Object.keys(styles.spotlight).length > 0 && (
+          <path d={coverPath} fill="none" style={{ pointerEvents: 'none' }} {...styles.spotlight} />
+        )}
+      </svg>
+    </div>
+  );
+}

package/src/components/Portal.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+interface Props {
+  children: ReactNode;
+  element: HTMLElement | null;
+}
+
+export default function JoyridePortal(props: Props) {
+  const { children, element } = props;
+
+  if (!element) {
+    return null;
+  }
+
+  return createPortal(children, element);
+}

package/src/components/Step.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import is from 'is-lite';
+
+import useFocusTrap from '~/hooks/useFocusTrap';
+import { LIFECYCLE } from '~/literals';
+import { getElement } from '~/modules/dom';
+import { validateStep } from '~/modules/step';
+import type { StoreState } from '~/modules/store';
+
+import type { Controls, PositionData, Simplify, StepMerged } from '~/types';
+
+import Floater from './Floater';
+
+type StepProps = Simplify<
+  StoreState & {
+    continuous: boolean;
+    controls: Controls;
+    debug: boolean;
+    nonce?: string;
+    portalElement: HTMLElement | null;
+    setPositionData: (name: 'beacon' | 'tooltip', data: PositionData) => void;
+    shouldScroll: boolean;
+    step: StepMerged;
+    updateState: (state: Partial<StoreState>) => void;
+  }
+>;
+
+export default function JoyrideStep(props: StepProps) {
+  const {
+    continuous,
+    controls,
+    index,
+    lifecycle,
+    nonce,
+    portalElement,
+    setPositionData,
+    shouldScroll,
+    size,
+    step,
+    updateState,
+  } = props;
+  const [tooltipElement, setTooltipElement] = useState<HTMLElement | null>(null);
+
+  useFocusTrap(step.disableFocusTrap ? null : tooltipElement, '[data-action=primary]');
+
+  const target = getElement(step.target);
+  const open = lifecycle === LIFECYCLE.TOOLTIP;
+
+  if (!validateStep(step) || !is.domElement(target)) {
+    return null;
+  }
+
+  return (
+    <Floater
+      key={`JoyrideStep-${index}`}
+      continuous={continuous}
+      controls={controls}
+      index={index}
+      lifecycle={lifecycle}
+      nonce={nonce}
+      open={open}
+      portalElement={portalElement}
+      setPositionData={setPositionData}
+      setTooltipRef={setTooltipElement}
+      shouldScroll={shouldScroll}
+      size={size}
+      step={step}
+      target={target}
+      updateState={updateState}
+    />
+  );
+}

package/src/components/Tooltip/CloseButton.tsx

@@ -0,0 +1,29 @@
+import type { CSSProperties } from 'react';
+
+interface Props {
+  styles: CSSProperties;
+}
+
+export default function JoyrideTooltipCloseButton({ styles, ...props }: Props) {
+  const { color, height, width, ...style } = styles;
+
+  return (
+    <button style={style} type="button" {...props}>
+      <svg
+        height={typeof height === 'number' ? `${height}px` : height}
+        preserveAspectRatio="xMidYMid"
+        version="1.1"
+        viewBox="0 0 18 18"
+        width={typeof width === 'number' ? `${width}px` : width}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g>
+          <path
+            d="M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z"
+            fill={color}
+          />
+        </g>
+      </svg>
+    </button>
+  );
+}

package/src/components/Tooltip/DefaultTooltip.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from 'react';
+
+import { getReactNodeText } from '~/modules/helpers';
+
+import type { TooltipRenderProps } from '~/types';
+
+import CloseButton from './CloseButton';
+
+export default function JoyrideDefaultTooltip(props: TooltipRenderProps) {
+  const { backProps, closeProps, index, isLastStep, primaryProps, skipProps, step, tooltipProps } =
+    props;
+  const { buttons, content, styles, title } = step;
+  const buttonElements: Record<string, ReactNode> = {};
+
+  if (buttons.includes('primary')) {
+    buttonElements.primary = (
+      <button
+        data-testid="button-primary"
+        style={styles.buttonPrimary}
+        type="button"
+        {...primaryProps}
+      />
+    );
+  }
+
+  if (buttons.includes('skip') && !isLastStep) {
+    buttonElements.skip = (
+      <button
+        aria-live="off"
+        data-testid="button-skip"
+        style={styles.buttonSkip}
+        type="button"
+        {...skipProps}
+      />
+    );
+  }
+
+  if (buttons.includes('back') && index > 0) {
+    buttonElements.back = (
+      <button data-testid="button-back" style={styles.buttonBack} type="button" {...backProps} />
+    );
+  }
+
+  buttonElements.close = buttons.includes('close') && (
+    <CloseButton data-testid="button-close" styles={styles.buttonClose} {...closeProps} />
+  );
+
+  const ariaProps = title
+    ? { 'aria-labelledby': 'joyride-tooltip-title', 'aria-describedby': 'joyride-tooltip-content' }
+    : { 'aria-label': getReactNodeText(content), 'aria-describedby': 'joyride-tooltip-content' };
+
+  return (
+    <div
+      key="JoyrideTooltip"
+      className="react-joyride__tooltip"
+      data-joyride-step={index}
+      {...(step.id && { 'data-joyride-id': step.id })}
+      style={styles.tooltip}
+      {...tooltipProps}
+      {...ariaProps}
+    >
+      <div style={styles.tooltipContainer}>
+        {title && (
+          <h4 id="joyride-tooltip-title" style={styles.tooltipTitle}>
+            {title}
+          </h4>
+        )}
+        <div id="joyride-tooltip-content" style={styles.tooltipContent}>
+          {content}
+        </div>
+      </div>
+      {buttons.some(b => b === 'back' || b === 'primary' || b === 'skip') && (
+        <div style={styles.tooltipFooter}>
+          <div style={styles.tooltipFooterSpacer}>{buttonElements.skip}</div>
+          {buttonElements.back}
+          {buttonElements.primary}
+        </div>
+      )}
+      {buttonElements.close}
+    </div>
+  );
+}

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,163 @@
+import type { MouseEvent } from 'react';
+
+import { ORIGIN } from '~/literals';
+import { getReactNodeText, replaceLocaleContent } from '~/modules/helpers';
+
+import type { Controls, StepMerged } from '~/types';
+
+import DefaultTooltip from './DefaultTooltip';
+
+interface TooltipProps {
+  continuous: boolean;
+  controls: Controls;
+  index: number;
+  isLastStep: boolean;
+  size: number;
+  step: StepMerged;
+}
+
+export default function Tooltip(props: TooltipProps) {
+  const { continuous, controls, index, isLastStep, size, step } = props;
+
+  const handleClickBack = (event: MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+
+    controls.prev(ORIGIN.BUTTON_BACK);
+  };
+
+  const handleClickClose = (event: MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+
+    if (step.closeButtonAction === 'skip') {
+      controls.skip(ORIGIN.BUTTON_CLOSE);
+    } else if (step.closeButtonAction === 'replay') {
+      controls.replay(ORIGIN.BUTTON_CLOSE);
+    } else {
+      controls.close(ORIGIN.BUTTON_CLOSE);
+    }
+  };
+
+  const handleClickPrimary = (event: MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+
+    if (!continuous) {
+      controls.close(ORIGIN.BUTTON_PRIMARY);
+
+      return;
+    }
+
+    controls.next(ORIGIN.BUTTON_PRIMARY);
+  };
+
+  const handleClickSkip = (event: MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+
+    controls.skip(ORIGIN.BUTTON_SKIP);
+  };
+
+  const getElementsProps = () => {
+    const { back, close, last, next, nextWithProgress, skip } = step.locale;
+
+    const backText = getReactNodeText(back);
+    const closeText = getReactNodeText(close);
+    const lastText = getReactNodeText(last);
+    const nextText = getReactNodeText(next);
+    const skipText = getReactNodeText(skip);
+
+    let primary = close;
+    let primaryText = closeText;
+
+    if (continuous) {
+      primary = next;
+      primaryText = nextText;
+
+      if (step.showProgress && !isLastStep) {
+        const labelWithProgress = getReactNodeText(nextWithProgress, {
+          step: index + 1,
+          steps: size,
+        });
+
+        primary = replaceLocaleContent(nextWithProgress, index + 1, size);
+        primaryText = labelWithProgress;
+      }
+
+      if (isLastStep) {
+        primary = last;
+        primaryText = lastText;
+      }
+    }
+
+    return {
+      backProps: {
+        'aria-label': backText,
+        children: back,
+        'data-action': 'back',
+        onClick: handleClickBack,
+        role: 'button',
+        title: backText,
+      },
+      closeProps: {
+        'aria-label': closeText,
+        children: close,
+        'data-action': 'close',
+        onClick: handleClickClose,
+        role: 'button',
+        title: closeText,
+      },
+      primaryProps: {
+        'aria-label': primaryText,
+        children: primary,
+        'data-action': 'primary',
+        onClick: handleClickPrimary,
+        role: 'button',
+        title: primaryText,
+      },
+      skipProps: {
+        'aria-label': skipText,
+        children: skip,
+        'data-action': 'skip',
+        onClick: handleClickSkip,
+        role: 'button',
+        title: skipText,
+      },
+      tooltipProps: {
+        'aria-modal': true,
+        role: 'alertdialog',
+      },
+    };
+  };
+
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  const { arrowComponent, beaconComponent, tooltipComponent, ...stepProps } = step;
+  let component;
+
+  if (tooltipComponent) {
+    const TooltipComponent = tooltipComponent;
+
+    component = (
+      <TooltipComponent
+        {...getElementsProps()}
+        continuous={continuous}
+        controls={controls}
+        index={index}
+        isLastStep={isLastStep}
+        size={size}
+        step={stepProps}
+      />
+    );
+  } else {
+    component = (
+      <DefaultTooltip
+        {...getElementsProps()}
+        continuous={continuous}
+        controls={controls}
+        index={index}
+        isLastStep={isLastStep}
+        size={size}
+        step={stepProps}
+      />
+    );
+  }
+
+  return component;
+}