@numidev/react-joyride 1.0.1

package/src/modules/dom.ts

@@ -0,0 +1,359 @@
+import scroll from 'scroll';
+import scrollParent from 'scrollparent';
+
+import { LIFECYCLE } from '~/literals';
+
+import type { Lifecycle, StepMerged, StepTarget } from '~/types';
+
+interface NeedsScrollingOptions {
+  isFirstStep: boolean;
+  scrollToFirstStep: boolean;
+  step: StepMerged;
+  target: HTMLElement | null;
+  targetLifecycle?: Lifecycle;
+}
+
+export function canUseDOM() {
+  return !!(typeof window !== 'undefined' && window.document?.createElement);
+}
+
+/**
+ * Get the absolute document-relative offset of an element by walking up the offsetParent chain.
+ */
+export function getAbsoluteOffset(element: HTMLElement): { left: number; top: number } {
+  let top = 0;
+  let left = 0;
+  let current: HTMLElement | null = element;
+
+  while (current) {
+    top += current.offsetTop;
+    left += current.offsetLeft;
+    current = current.offsetParent as HTMLElement | null;
+  }
+
+  return { left, top };
+}
+
+/**
+ * Find the bounding client rect
+ */
+export function getClientRect(element: HTMLElement | null) {
+  if (!element) {
+    return null;
+  }
+
+  return element.getBoundingClientRect();
+}
+
+/**
+ * Helper function to get the browser-normalized "document height"
+ */
+export function getDocumentHeight(median = false): number {
+  const { body, documentElement } = document;
+
+  if (!body || !documentElement) {
+    return 0;
+  }
+
+  if (median) {
+    const heights = [
+      body.scrollHeight,
+      body.offsetHeight,
+      documentElement.clientHeight,
+      documentElement.scrollHeight,
+      documentElement.offsetHeight,
+    ].sort((a, b) => a - b);
+    const middle = Math.floor(heights.length / 2);
+
+    if (heights.length % 2 === 0) {
+      return (heights[middle - 1] + heights[middle]) / 2;
+    }
+
+    return heights[middle];
+  }
+
+  return Math.max(
+    body.scrollHeight,
+    body.offsetHeight,
+    documentElement.clientHeight,
+    documentElement.scrollHeight,
+    documentElement.offsetHeight,
+  );
+}
+
+/**
+ * Find and return the target DOM element based on a step's 'target'.
+ */
+export function getElement(element?: StepTarget): HTMLElement | null {
+  if (!element) {
+    return null;
+  }
+
+  if (typeof element === 'function') {
+    try {
+      return element();
+    } catch (error: any) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+
+      return null;
+    }
+  }
+
+  if (typeof element === 'object' && 'current' in element) {
+    return element.current;
+  }
+
+  if (typeof element === 'string') {
+    try {
+      return document.querySelector(element);
+    } catch (error: any) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+
+      return null;
+    }
+  }
+
+  return element;
+}
+
+/**
+ * Find and return the target DOM element based on a step's 'target'.
+ */
+export function getElementPosition(
+  element: HTMLElement | null,
+  offset: number,
+  isFixed?: boolean,
+): number {
+  const elementRect = getClientRect(element);
+  const parent = getScrollParent(element);
+  const hasScrollParent = parent ? !parent.isSameNode(scrollDocument()) : false;
+  const isFixedTarget = isFixed ?? hasPosition(element);
+  let parentTop = 0;
+  let top = elementRect?.top ?? 0;
+
+  if (hasScrollParent && isFixedTarget) {
+    top = elementRect?.top ?? 0;
+  } else if (parent instanceof HTMLElement) {
+    parentTop = parent.scrollTop;
+
+    if (!hasScrollParent && !isFixedTarget) {
+      top += parentTop;
+    }
+
+    if (!parent.isSameNode(scrollDocument())) {
+      top += scrollDocument().scrollTop;
+    }
+  }
+
+  return Math.floor(top - offset);
+}
+
+/**
+ * Get the scroll parent of an element.
+ * If the detected parent doesn't actually scroll, fall back to the document.
+ */
+export function getScrollParent(element: HTMLElement | null, forListener?: boolean) {
+  if (!element) {
+    return scrollDocument();
+  }
+
+  const parent = scrollParent(element) as HTMLElement;
+
+  if (parent) {
+    if (parent.isSameNode(scrollDocument())) {
+      if (forListener) {
+        return document;
+      }
+
+      return scrollDocument();
+    }
+
+    const hasScrolling = parent.scrollHeight > parent.offsetHeight;
+
+    if (!hasScrolling) {
+      return scrollDocument();
+    }
+  }
+
+  return parent;
+}
+
+export function getScrollTargetToCenter(element: Element): number {
+  const rect = element.getBoundingClientRect();
+  const documentElement = scrollDocument();
+  const containerCenter = rect.top + rect.height / 2;
+  const viewportCenter = window.innerHeight / 2;
+
+  return Math.max(0, documentElement.scrollTop + containerCenter - viewportCenter);
+}
+
+/**
+ * Get the scrollTop position
+ */
+export function getScrollTo(element: HTMLElement | null, offset: number): number {
+  if (!element) {
+    return 0;
+  }
+
+  const parentElement = scrollParent(element) ?? (scrollDocument() as HTMLElement);
+  const scrollMarginTop = parseFloat(getComputedStyle(element).scrollMarginTop) || 0;
+
+  const parentRect = getClientRect(parentElement);
+  const parentScrollTop = parentElement.scrollTop ?? 0;
+
+  const { offsetTop = 0, scrollTop = 0 } = parentElement;
+  let top = element.getBoundingClientRect().top + scrollTop;
+
+  if (!!offsetTop && (hasCustomScrollParent(element) || hasCustomOffsetParent(element))) {
+    const elementRect = element.getBoundingClientRect();
+    const elementTopInContainer = elementRect.top - (parentRect?.top ?? 0);
+    const elementBottomInContainer = elementTopInContainer + elementRect.height;
+    const containerHeight = parentElement.clientHeight;
+    const margin = containerHeight * 0.2;
+
+    // eslint-disable-next-line unicorn/prefer-ternary
+    if (elementTopInContainer >= margin && elementBottomInContainer <= containerHeight - margin) {
+      top = parentScrollTop;
+    } else {
+      top = elementTopInContainer + parentScrollTop;
+    }
+  }
+
+  const output = Math.floor(top - offset - scrollMarginTop);
+
+  return output < 0 ? 0 : output;
+}
+
+/**
+ * Check if the element has custom offset parent
+ */
+export function hasCustomOffsetParent(element: HTMLElement): boolean {
+  return element.offsetParent !== document.body;
+}
+
+/**
+ * Check if the element has custom scroll parent
+ */
+export function hasCustomScrollParent(element: HTMLElement | null): boolean {
+  if (!element) {
+    return false;
+  }
+
+  const parent = getScrollParent(element);
+
+  return parent ? !parent.isSameNode(scrollDocument()) : false;
+}
+
+/**
+ * Check if an element has fixed/sticky position
+ */
+export function hasPosition(el: Element | Node | null, type: string = 'fixed'): boolean {
+  if (!el || !(el instanceof Element)) {
+    return false;
+  }
+
+  const { nodeName } = el;
+
+  if (nodeName === 'BODY' || nodeName === 'HTML') {
+    return false;
+  }
+
+  if (getComputedStyle(el).position === type) {
+    return true;
+  }
+
+  if (!el.parentNode) {
+    return false;
+  }
+
+  return hasPosition(el.parentNode, type);
+}
+
+/**
+ * Check if the element is visible
+ */
+export function isElementVisible(element: HTMLElement): boolean {
+  if (!element) {
+    return false;
+  }
+
+  let parentElement: HTMLElement | null = element;
+
+  while (parentElement) {
+    if (parentElement === document.body) {
+      break;
+    }
+
+    if (parentElement instanceof HTMLElement) {
+      const { display, visibility } = getComputedStyle(parentElement);
+
+      if (display === 'none' || visibility === 'hidden') {
+        return false;
+      }
+    }
+
+    parentElement = parentElement.parentElement ?? null;
+  }
+
+  return true;
+}
+
+export function needsScrolling(options: NeedsScrollingOptions): boolean {
+  const { isFirstStep, scrollToFirstStep, step, target, targetLifecycle } = options;
+
+  if (
+    step.skipScroll ||
+    (isFirstStep && !scrollToFirstStep && targetLifecycle !== LIFECYCLE.TOOLTIP) ||
+    step.placement === 'center'
+  ) {
+    return false;
+  }
+
+  const parent = (target?.isConnected ? getScrollParent(target) : scrollDocument()) as Element;
+  const isCustomScrollParent = parent ? !parent.isSameNode(scrollDocument()) : false;
+
+  if ((step.isFixed || hasPosition(target)) && !isCustomScrollParent) {
+    return false;
+  }
+
+  return parent.scrollHeight > parent.clientHeight;
+}
+
+export function scrollDocument(): Element | HTMLElement {
+  return document.scrollingElement ?? document.documentElement;
+}
+
+/**
+ * Scroll to position
+ */
+export function scrollTo(
+  value: number,
+  options: { duration?: number; element: Element | HTMLElement },
+): { cancel: () => void; promise: Promise<void> } {
+  const { duration, element } = options;
+
+  let cancel: () => void = () => {};
+
+  const promise = new Promise<void>(resolve => {
+    const { scrollTop } = element;
+
+    const limit = value > scrollTop ? value - scrollTop : scrollTop - value;
+
+    cancel = scroll.top(
+      element as HTMLElement,
+      value,
+      { duration: limit < 100 ? 50 : duration },
+      () => {
+        resolve();
+      },
+    );
+  });
+
+  return { cancel, promise };
+}

package/src/modules/helpers.tsx

@@ -0,0 +1,230 @@
+import { cloneElement, type FC, isValidElement, type ReactElement, type ReactNode } from 'react';
+import innerText from 'react-innertext';
+import deepmergeFactory from '@fastify/deepmerge';
+import is from 'is-lite';
+
+import type { AnyObject, NarrowPlainObject, PlainObject, Simplify } from '~/types';
+
+type RemoveType<TObject, TExclude = undefined> = {
+  [Key in keyof TObject as TObject[Key] extends TExclude ? never : Key]: TObject[Key];
+};
+
+interface GetReactNodeTextOptions {
+  defaultValue?: any;
+  step?: number;
+  steps?: number;
+}
+
+/**
+ * Remove properties with undefined value from an object
+ */
+export function cleanUpObject<T extends PlainObject>(input: T) {
+  const output: Record<string, unknown> = {};
+
+  for (const key in input) {
+    if (input[key] !== undefined) {
+      output[key] = input[key];
+    }
+  }
+
+  return output as RemoveType<T>;
+}
+
+export function deepMerge<T extends object>(...objects: object[]): T {
+  return deepmergeFactory({
+    all: true,
+    isMergeableObject: (value): value is object =>
+      !(!is.plainObject(value) || isValidElement(value)),
+  })(...objects) as T;
+}
+
+/**
+ * Get Object type
+ */
+export function getObjectType(value: unknown): string {
+  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
+}
+
+export function getReactNodeText(input: ReactNode, options: GetReactNodeTextOptions = {}): string {
+  const { defaultValue, step, steps } = options;
+  let text = innerText(input);
+
+  if (!text) {
+    if (
+      isValidElement(input) &&
+      !Object.values(input.props as Record<string, unknown>).length &&
+      getObjectType(input.type) === 'function'
+    ) {
+      try {
+        const component = (input.type as FC)({}) as ReactNode;
+
+        text = getReactNodeText(component, options);
+      } catch {
+        text = innerText(defaultValue);
+      }
+    } else {
+      text = innerText(defaultValue);
+    }
+  } else if ((text.includes('{current}') || text.includes('{total}')) && step && steps) {
+    text = text.replace('{current}', step.toString()).replace('{total}', steps.toString());
+  }
+
+  return text;
+}
+
+/**
+ * Log method calls if debug is enabled
+ */
+export function log(debug: boolean, scope: string, title: string, ...data: unknown[]): void {
+  if (!debug) {
+    return;
+  }
+
+  const now = new Date();
+  const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}.${String(now.getMilliseconds()).padStart(3, '0')}`;
+
+  // eslint-disable-next-line no-console
+  console.log(
+    `${scope} %c${title}%c ${time}`,
+    'font-weight: bold',
+    'color: gray; font-weight: normal',
+    ...data,
+  );
+}
+
+/**
+ * Merges the defaultProps with literal values with the incoming props, removing undefined values from it that would override the defaultProps.
+ * The result is a type-safe object with the defaultProps as required properties.
+ */
+export function mergeProps<TDefaultProps extends PlainObject<any>, TProps extends PlainObject<any>>(
+  defaultProps: TDefaultProps,
+  props: TProps,
+) {
+  const cleanProps = cleanUpObject(props);
+
+  return { ...defaultProps, ...cleanProps } as unknown as Simplify<
+    TProps & Required<Pick<TProps, keyof TDefaultProps & string>>
+  >;
+}
+
+/**
+ * A function that does nothing.
+ */
+export function noop() {
+  return undefined;
+}
+
+/**
+ * Type-safe Object.keys()
+ */
+export function objectKeys<T extends AnyObject>(input: T) {
+  return Object.keys(input) as Array<keyof T>;
+}
+
+/**
+ * Remove properties from an object
+ */
+export function omit<T extends Record<string, any>, K extends keyof T>(
+  input: NarrowPlainObject<T>,
+  ...filter: K[]
+) {
+  if (!is.plainObject(input)) {
+    throw new TypeError('Expected an object');
+  }
+
+  const output: any = {};
+
+  for (const key in input) {
+    /* istanbul ignore else */
+    if ({}.hasOwnProperty.call(input, key) && !filter.includes(key as unknown as K)) {
+      output[key] = input[key];
+    }
+  }
+
+  return output as Omit<T, K>;
+}
+
+/**
+ * Select properties from an object
+ */
+export function pick<T extends Record<string, any>, K extends keyof T>(
+  input: NarrowPlainObject<T>,
+  ...filter: K[]
+) {
+  if (!is.plainObject(input)) {
+    throw new TypeError('Expected an object');
+  }
+
+  if (!filter.length) {
+    return input;
+  }
+
+  const output: any = {};
+
+  for (const key in input) {
+    /* istanbul ignore else */
+    if ({}.hasOwnProperty.call(input, key) && filter.includes(key as unknown as K)) {
+      output[key] = input[key];
+    }
+  }
+
+  return output as Pick<T, K>;
+}
+
+export function replaceLocaleContent(input: ReactNode, step: number, steps: number): ReactNode {
+  const replacer = (text: string) =>
+    text.replace('{current}', String(step)).replace('{total}', String(steps));
+
+  if (getObjectType(input) === 'string') {
+    return replacer(input as string);
+  }
+
+  if (!isValidElement(input)) {
+    return input;
+  }
+
+  const { children } = input.props as { children?: ReactNode };
+
+  if (is.string(children) && children.includes('{current}')) {
+    return cloneElement(input as ReactElement<{ children?: ReactNode }>, {
+      children: replacer(children),
+    });
+  }
+
+  if (Array.isArray(children)) {
+    return cloneElement(input as ReactElement<{ children?: ReactNode }>, {
+      children: children.map((child: ReactNode) => {
+        if (typeof child === 'string') {
+          return replacer(child);
+        }
+
+        return replaceLocaleContent(child, step, steps);
+      }),
+    });
+  }
+
+  if (is.function(input.type) && !Object.values(input.props as Record<string, unknown>).length) {
+    try {
+      const component = (input.type as FC)({}) as ReactNode;
+
+      return replaceLocaleContent(component, step, steps);
+    } catch {
+      return input;
+    }
+  }
+
+  return input;
+}
+
+/**
+ * Sort object keys
+ */
+export function sortObjectKeys<T extends PlainObject>(input: T) {
+  return objectKeys(input)
+    .sort()
+    .reduce((acc, key) => {
+      acc[key] = input[key];
+
+      return acc;
+    }, {} as T);
+}