@dr.pogodin/react-utils 1.42.0 → 1.43.0

package/src/shared/components/WithTooltip/{Tooltip.tsx → Tooltip.ts}

@@ -18,8 +18,10 @@ import { createPortal } from 'react-dom';
 
 import type { Theme } from '@dr.pogodin/react-themes';
 
-/* Valid placements of the rendered tooltip. They will be overriden when
- * necessary to fit the tooltip within the viewport. */
+/**
+ * Valid placements of the rendered tooltip. They will be overriden when
+ * necessary to fit the tooltip within the viewport.
+ */
 export enum PLACEMENTS {
   ABOVE_CURSOR = 'ABOVE_CURSOR',
   ABOVE_ELEMENT = 'ABOVE_ELEMENT',
@@ -82,7 +84,7 @@ function createTooltipComponents(theme: TooltipThemeT): ComponentsT {
   container.appendChild(content);
   document.body.appendChild(container);
 
-  return { container, arrow, content };
+  return { arrow, container, content };
 }
 
 type TooltipRectsT = {
@@ -115,10 +117,10 @@ function calcViewportRect() {
   const { scrollX, scrollY } = window;
   const { documentElement: { clientHeight, clientWidth } } = document;
   return {
+    bottom: scrollY + clientHeight,
     left: scrollX,
     right: scrollX + clientWidth,
     top: scrollY,
-    bottom: scrollY + clientHeight,
   };
 }
 
@@ -157,15 +159,13 @@ function calcPositionAboveXY(
   };
 }
 
-/*
-const HIT = {
-  NONE: false,
-  LEFT: 'LEFT',
-  RIGHT: 'RIGHT',
-  TOP: 'TOP',
-  BOTTOM: 'BOTTOM',
-};
-*/
+// const HIT = {
+//   NONE: false,
+//   LEFT: 'LEFT',
+//   RIGHT: 'RIGHT',
+//   TOP: 'TOP',
+//   BOTTOM: 'BOTTOM',
+// };
 
 /**
  * Checks whether
@@ -174,14 +174,12 @@ const HIT = {
  * @param {object} viewportRect
  * @return {HIT}
  */
-/*
-function checkViewportFit(pos, tooltipRects, viewportRect) {
-  const { containerX, containerY } = pos;
-  if (containerX < viewportRect.left + 6) return HIT.LEFT;
-  if (containerX > viewportRect.right - 6) return HIT.RIGHT;
-  return HIT.NONE;
-}
-*/
+// function checkViewportFit(pos, tooltipRects, viewportRect) {
+//   const { containerX, containerY } = pos;
+//   if (containerX < viewportRect.left + 6) return HIT.LEFT;
+//   if (containerX > viewportRect.right - 6) return HIT.RIGHT;
+//   return HIT.NONE;
+// }
 
 /**
  * Shifts tooltip horizontally to fit into the viewport, while keeping
@@ -192,23 +190,21 @@ function checkViewportFit(pos, tooltipRects, viewportRect) {
  * @param {number} pageXOffset
  * @param {number} pageXWidth
  */
-/*
-function xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {
-  if (pos.containerX < pageXOffset + 6) {
-    pos.containerX = pageXOffset + 6;
-    pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);
-  } else {
-    const maxX = pageXOffset + docRect.width - containerRect.width - 6;
-    if (containerX > maxX) {
-      containerX = maxX;
-      arrowX = Math.min(
-        containerRect.width - 6,
-        pageX - containerX - arrowRect.width / 2,
-      );
-    }
-  }
-}
-*/
+// function xPageFitCorrection(x, y, pos, pageXOffset, pageXWidth) {
+//   if (pos.containerX < pageXOffset + 6) {
+//     pos.containerX = pageXOffset + 6;
+//     pos.arrowX = Math.max(6, pageX - containerX - arrowRect.width / 2);
+//   } else {
+//     const maxX = pageXOffset + docRect.width - containerRect.width - 6;
+//     if (containerX > maxX) {
+//       containerX = maxX;
+//       arrowX = Math.min(
+//         containerRect.width - 6,
+//         pageX - containerX - arrowRect.width / 2,
+//       );
+//     }
+//   }
+// }
 
 /**
  * Sets positions of tooltip components to point the tooltip to the specified
@@ -272,7 +268,7 @@ function setComponentPositions(
 const Tooltip: FunctionComponent<{
   children?: ReactNode;
   ref?: RefObject<unknown>;
-  theme: any;
+  theme: TooltipThemeT;
 }> = ({ children, ref, theme }) => {
   // NOTE: The way it has to be implemented, for clean mounting and unmounting
   // at the client side, the <Tooltip> is fully mounted into DOM in the next

package/src/shared/components/WithTooltip/index.tsx

@@ -63,34 +63,15 @@ const Wrapper: FunctionComponent<PropsT> = ({
   const { current: heap } = useRef<HeapT>({
     lastCursorX: 0,
     lastCursorY: 0,
-    triggeredByTouch: false,
     timerId: undefined,
+    triggeredByTouch: false,
   });
   const tooltipRef = useRef<TooltipRefT>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [showTooltip, setShowTooltip] = useState(false);
 
   const updatePortalPosition = (cursorX: number, cursorY: number) => {
-    if (!showTooltip) {
-      heap.lastCursorX = cursorX;
-      heap.lastCursorY = cursorY;
-
-      // If tooltip was triggered by a touch, we delay its opening by a bit,
-      // to ensure it was not a touch-click - in the case of touch click we
-      // want to do the click, rather than show the tooltip, and the delay
-      // gives click handler a chance to abort the tooltip openning.
-      if (heap.triggeredByTouch) {
-        if (!heap.timerId) {
-          heap.timerId = setTimeout(() => {
-            heap.triggeredByTouch = false;
-            heap.timerId = undefined;
-            setShowTooltip(true);
-          }, 300);
-        }
-
-      // Otherwise we can just open the tooltip right away.
-      } else setShowTooltip(true);
-    } else {
+    if (showTooltip) {
       const wrapperRect = wrapperRef.current!.getBoundingClientRect();
       if (
         cursorX < wrapperRect.left
@@ -103,10 +84,27 @@ const Wrapper: FunctionComponent<PropsT> = ({
         tooltipRef.current.pointTo(
           cursorX + window.scrollX,
           cursorY + window.scrollY,
-          placement!,
+          placement,
           wrapperRef.current!,
         );
       }
+    } else {
+      heap.lastCursorX = cursorX;
+      heap.lastCursorY = cursorY;
+
+      // If tooltip was triggered by a touch, we delay its opening by a bit,
+      // to ensure it was not a touch-click - in the case of touch click we
+      // want to do the click, rather than show the tooltip, and the delay
+      // gives click handler a chance to abort the tooltip openning.
+      if (heap.triggeredByTouch) {
+        heap.timerId ??= setTimeout(() => {
+          heap.triggeredByTouch = false;
+          heap.timerId = undefined;
+          setShowTooltip(true);
+        }, 300);
+
+      // Otherwise we can just open the tooltip right away.
+      } else setShowTooltip(true);
     }
   };
 
@@ -121,14 +119,18 @@ const Wrapper: FunctionComponent<PropsT> = ({
         tooltipRef.current.pointTo(
           heap.lastCursorX + window.scrollX,
           heap.lastCursorY + window.scrollY,
-          placement!,
+          placement,
           wrapperRef.current!,
         );
       }
 
-      const listener = () => setShowTooltip(false);
+      const listener = () => {
+        setShowTooltip(false);
+      };
       window.addEventListener('scroll', listener);
-      return () => window.removeEventListener('scroll', listener);
+      return () => {
+        window.removeEventListener('scroll', listener);
+      };
     }
     return undefined;
   }, [
@@ -142,8 +144,6 @@ const Wrapper: FunctionComponent<PropsT> = ({
   return (
     <div
       className={theme.wrapper}
-      onMouseLeave={() => setShowTooltip(false)}
-      onMouseMove={(e) => updatePortalPosition(e.clientX, e.clientY)}
       onClick={() => {
         if (heap.timerId) {
           clearTimeout(heap.timerId);
@@ -151,6 +151,12 @@ const Wrapper: FunctionComponent<PropsT> = ({
           heap.triggeredByTouch = false;
         }
       }}
+      onMouseLeave={() => {
+        setShowTooltip(false);
+      }}
+      onMouseMove={(e) => {
+        updatePortalPosition(e.clientX, e.clientY);
+      }}
       onTouchStart={() => {
         heap.triggeredByTouch = true;
       }}
@@ -158,9 +164,9 @@ const Wrapper: FunctionComponent<PropsT> = ({
       role="presentation"
     >
       {
-        showTooltip && tip !== null ? (
-          <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>
-        ) : null
+        showTooltip && tip !== null
+          ? <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>
+          : null
       }
       {children}
     </div>

package/src/shared/components/YouTubeVideo/index.tsx

@@ -12,7 +12,7 @@ type ComponentThemeT = Theme<'container' | 'video'>;
 type PropsT = {
   autoplay?: boolean;
   src: string;
-  theme: ComponentThemeT,
+  theme: ComponentThemeT;
   title?: string;
 };
 
@@ -38,12 +38,12 @@ const YouTubeVideo: React.FunctionComponent<PropsT> = ({
   title,
 }) => {
   const srcParts = src.split('?');
-  let url = srcParts[0];
-  const queryString = srcParts[1];
+  let [url] = srcParts;
+  const [, queryString] = srcParts;
   const query = queryString ? qs.parse(queryString) : {};
 
-  const videoId = query.v || url?.match(/\/([a-zA-Z0-9-_]*)$/)?.[1];
-  url = `https://www.youtube.com/embed/${videoId}`;
+  const videoId = query.v ?? url?.match(/\/([a-zA-Z0-9-_]*)$/)?.[1];
+  url = `https://www.youtube.com/embed/${videoId as string}`;
 
   delete query.v;
   query.autoplay = autoplay ? '1' : '0';
@@ -55,7 +55,11 @@ const YouTubeVideo: React.FunctionComponent<PropsT> = ({
   return (
     <div className={theme.container}>
       <Throbber theme={throbberTheme} />
-      <iframe
+      {/* TODO: I guess, we better add the sanbox, but right now I don't have
+          time to carefully explore which restrictions should be lifted to allow
+          embed YouTube player to work... sometime later we'll take care of it */
+      }
+      <iframe // eslint-disable-line react/iframe-missing-sandbox
         allow="autoplay"
         allowFullScreen
         className={theme.video}

package/src/shared/components/selectors/CustomDropdown/Options/index.tsx

@@ -71,13 +71,13 @@ const Options: FunctionComponent<PropsT> = ({
   }), []);
 
   const optionNodes: ReactNode[] = [];
-  for (let i = 0; i < options.length; ++i) {
-    const option = options[i];
-    if (option !== undefined && (!filter || filter(option))) {
+  for (const option of options) {
+    if (!filter || filter(option)) {
       const [iValue, iName] = optionValueName(option);
       optionNodes.push(
         <div
           className={optionClass}
+          key={iValue}
           onClick={(e) => {
             onChange(iValue);
             e.stopPropagation();
@@ -88,7 +88,6 @@ const Options: FunctionComponent<PropsT> = ({
               e.stopPropagation();
             }
           }}
-          key={iValue}
           role="button"
           tabIndex={0}
         >
@@ -106,14 +105,14 @@ const Options: FunctionComponent<PropsT> = ({
       // dropdowns during the scrolling (that would need to re-position it in
       // response to the position changes of the root dropdown element).
       cancelOnScrolling
-      style={containerStyle}
       dontDisableScrolling
       onCancel={onCancel}
+      style={containerStyle}
       theme={{
         ad: '',
-        hoc: '',
         container: containerClass,
         context: '',
+        hoc: '',
         overlay: S.overlay,
       }}
     >

package/src/shared/components/selectors/CustomDropdown/index.tsx

@@ -9,7 +9,7 @@ import defaultTheme from './theme.scss';
 import { type PropsT, type ValueT, optionValueName } from '../common';
 
 const BaseCustomDropdown: React.FunctionComponent<
-PropsT<React.ReactNode, (value: ValueT) => void>
+  PropsT<React.ReactNode, (value: ValueT) => void>
 > = ({
   filter,
   label,
@@ -18,8 +18,6 @@ PropsT<React.ReactNode, (value: ValueT) => void>
   theme,
   value,
 }) => {
-  if (!options) throw Error('Internal error');
-
   const [active, setActive] = useState(false);
 
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -44,8 +42,8 @@ PropsT<React.ReactNode, (value: ValueT) => void>
         setUpward(up);
 
         const pos = up ? {
-          top: anchor.top - opsRect.height - 1,
           left: anchor.left,
+          top: anchor.top - opsRect.height - 1,
           width: anchor.width,
         } : {
           left: anchor.left,
@@ -78,8 +76,8 @@ PropsT<React.ReactNode, (value: ValueT) => void>
     // move it above, at least with the current position update via local
     // react state, and not imperatively).
     setOpsPos({
-      left: view?.width || 0,
-      top: view?.height || 0,
+      left: view?.width ?? 0,
+      top: view?.height ?? 0,
       width: rect.width,
     });
 
@@ -87,9 +85,8 @@ PropsT<React.ReactNode, (value: ValueT) => void>
   };
 
   let selected: React.ReactNode = <>&zwnj;</>;
-  for (let i = 0; i < options.length; ++i) {
-    const option = options[i];
-    if (option !== undefined && (!filter || filter(option))) {
+  for (const option of options) {
+    if (!filter || filter(option)) {
       const [iValue, iName] = optionValueName(option);
       if (iValue === value) {
         selected = iName;
@@ -101,7 +98,7 @@ PropsT<React.ReactNode, (value: ValueT) => void>
   let containerClassName = theme.container;
   if (active) containerClassName += ` ${theme.active}`;
 
-  let opsContainerClass = theme.select || '';
+  let opsContainerClass = theme.select ?? '';
   if (upward) {
     containerClassName += ` ${theme.upward}`;
     opsContainerClass += ` ${theme.upward}`;
@@ -109,9 +106,8 @@ PropsT<React.ReactNode, (value: ValueT) => void>
 
   return (
     <div className={containerClassName}>
-      {label === undefined ? null : (
-        <div className={theme.label}>{label}</div>
-      )}
+      {label === undefined ? null
+        : <div className={theme.label}>{label}</div>}
       <div
         className={theme.dropdown}
         onClick={openList}
@@ -137,7 +133,7 @@ PropsT<React.ReactNode, (value: ValueT) => void>
               setActive(false);
               if (onChange) onChange(newValue);
             }}
-            optionClass={theme.option || ''}
+            optionClass={theme.option ?? ''}
             options={options}
             ref={opsRef}
           />

package/src/shared/components/selectors/NativeDropdown/index.tsx

@@ -34,14 +34,11 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
   theme,
   value,
 }) => {
-  if (!options) throw Error('Internal error');
-
   let isValidValue = false;
   const optionElements = [];
 
-  for (let i = 0; i < options.length; ++i) {
-    const option = options[i];
-    if (option !== undefined && (!filter || filter(option))) {
+  for (const option of options) {
+    if (!filter || filter(option)) {
       const [iValue, iName] = optionValueName(option);
       isValidValue ||= iValue === value;
       optionElements.push(
@@ -58,8 +55,8 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
   // to show it as disabled.
   const hiddenOption = isValidValue ? null : (
     <option
-      disabled
       className={theme.hiddenOption}
+      disabled
       key="__reactUtilsHiddenOption"
       value={value}
     >
@@ -72,7 +69,8 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
 
   return (
     <div className={theme.container}>
-      { label === undefined ? null : <div className={theme.label}>{label}</div> }
+      { label === undefined
+        ? null : <div className={theme.label}>{label}</div> }
       <div className={theme.dropdown}>
         <select
           className={selectClassName}

package/src/shared/components/selectors/Switch/index.tsx

@@ -33,40 +33,42 @@ const BaseSwitch: React.FunctionComponent<PropsT> = ({
   if (!options || !theme.option) throw Error('Internal error');
 
   const optionNodes: React.ReactNode[] = [];
-  for (let i = 0; i < options?.length; ++i) {
-    const option = options[i];
-    if (option !== undefined) {
-      const [iValue, iName] = optionValueName(option);
+  for (const option of options) {
+    const [iValue, iName] = optionValueName(option);
 
-      let className: string = theme.option;
-      let onPress: (() => void) | undefined;
-      if (iValue === value) className += ` ${theme.selected}`;
-      else if (onChange) onPress = () => onChange(iValue);
+    let className: string = theme.option;
+    let onPress: (() => void) | undefined;
+    if (iValue === value) className += ` ${theme.selected}`;
+    else if (onChange) {
+      onPress = () => {
+        onChange(iValue);
+      };
+    }
 
-      optionNodes.push(
-        onPress ? (
+    optionNodes.push(
+      onPress
+        ? (
           <div
             className={className}
+            key={iValue}
             onClick={onPress}
             onKeyDown={(e) => {
-              if (onPress && e.key === 'Enter') onPress();
+              if (e.key === 'Enter') onPress();
             }}
-            key={iValue}
             role="button"
             tabIndex={0}
           >
             {iName}
           </div>
-        ) : (
-          <div className={className} key={iValue}>{iName}</div>
-        ),
-      );
-    }
+        )
+        : <div className={className} key={iValue}>{iName}</div>,
+    );
   }
 
   return (
     <div className={theme.container}>
       {label ? <div className={theme.label}>{label}</div> : null}
+
       <div className={theme.options}>
         {optionNodes}
       </div>

package/src/shared/utils/config.ts

@@ -1,20 +1,27 @@
 /* global document */
 
+import type CookieM from 'cookie';
+
 import { IS_CLIENT_SIDE } from './isomorphy/environment-check';
 import { requireWeak } from './webpack';
 
-const config = (
+// TODO: The internal type casting is somewhat messed up here,
+// to be corrected later.
+const config: Record<string, unknown> = (
   IS_CLIENT_SIDE
-    // eslint-disable-next-line global-require
-    ? require('client/getInj').default().CONFIG
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    ? (require('client/getInj') as {
+      default: () => Record<string, unknown>;
+    }).default().CONFIG
     : requireWeak('config')
-) || {};
+) as (Record<string, unknown> | undefined) ?? ({} as Record<string, unknown>);
 
 // The safeguard for "document" is necessary because in non-Node environments,
 // like React Native, IS_CLIENT_SIDE is "true", however "document" and a bunch
 // of other browser-world features are not available.
 if (IS_CLIENT_SIDE && typeof document !== 'undefined') {
-  const cookie = require('cookie'); // eslint-disable-line global-require
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const cookie = require('cookie') as typeof CookieM;
   config.CSRF = cookie.parse(document.cookie).csrfToken;
 }
 

package/src/shared/utils/globalState.ts

@@ -2,27 +2,30 @@ import type { Request } from 'express';
 
 import { type SsrContext, withGlobalStateType } from '@dr.pogodin/react-global-state';
 
-export type ChunkGroupsT = {
-  [chunkName: string]: string[];
-};
+/** Mapping "chunkName" > array of asset paths. */
+export type ChunkGroupsT = Record<string, string[]>;
 
 // The type of data object injected by server into generated markup.
 export type InjT = {
   CHUNK_GROUPS?: ChunkGroupsT;
-  CONFIG?: { [key: string]: any },
+  CONFIG?: Record<string, unknown>;
   ISTATE?: unknown;
 };
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface Window {
     REACT_UTILS_INJECTION?: InjT;
   }
 }
 
+// TODO: Not 100% sure now, whether it indeed can be replaced by type,
+// or do we really need it to be an interface. Keeping the interface for now.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface SsrContextT<StateT> extends SsrContext<StateT> {
   chunkGroups: ChunkGroupsT;
   chunks: string[];
-  req: Request,
+  req: Request;
   status: number;
 }
 

package/src/shared/utils/isomorphy/buildInfo.ts

@@ -31,7 +31,7 @@ if (typeof BUILD_INFO !== 'undefined') buildInfo = BUILD_INFO;
  * @param info
  * @param force
  */
-export function setBuildInfo(info?: BuildInfoT, force = false) {
+export function setBuildInfo(info?: BuildInfoT, force = false): void {
   if (buildInfo !== undefined && !force) {
     throw Error('"Build Info" is already initialized');
   }

package/src/shared/utils/isomorphy/environment-check.ts

@@ -4,7 +4,11 @@
  * `true` within client-side environment (browser), `false` at server-side.
  */
 export const IS_CLIENT_SIDE: boolean = typeof process !== 'object'
-  || !process.versions || !process.versions.node
+  // NOTE: Because in this case we assume the host environment might be partially
+  // polyfilled to emulate some Node interfaces, thus it might have global `process`
+  // object, but without `versions` sub-object inside it.
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  || !process.versions?.node
   || !!global.REACT_UTILS_FORCE_CLIENT_SIDE;
 
 /**

package/src/shared/utils/isomorphy/index.ts

@@ -12,26 +12,24 @@ function getMode() {
 /**
  * Returns `true` if development version of the code is running;
  * `false` otherwise.
- * @return {boolean}
  */
-export function isDevBuild() {
+export function isDevBuild(): boolean {
   return getMode() === 'development';
 }
 
 /**
  * Returns `true` if production build of the code is running;
  * `false` otherwise.
- * @return {boolean}
  */
-export function isProdBuild() {
+export function isProdBuild(): boolean {
   return getMode() === 'production';
 }
 
 /**
  * Returns build timestamp of the front-end JS bundle.
- * @return {string} ISO date/time string.
+ * @return ISO date/time string.
  */
-export function buildTimestamp() {
+export function buildTimestamp(): string {
   return getBuildInfo().timestamp;
 }