@dr.pogodin/react-utils 1.47.0-alpha.1 → 1.47.0-alpha.11

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

@@ -1,186 +0,0 @@
-/* global window */
-
-import {
-  type FunctionComponent,
-  type ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import Tooltip, {
-  type ThemeKeysT as TooltipThemeKeysT,
-  PLACEMENTS,
-} from './Tooltip';
-
-import defaultTheme from './default-theme.scss';
-
-type PropsT = {
-  children?: ReactNode;
-  placement?: PLACEMENTS;
-  tip?: ReactNode;
-  theme: Theme<'wrapper' | TooltipThemeKeysT>;
-};
-
-type TooltipRefT = {
-  pointTo: (
-    x: number,
-    y: number,
-    placement: PLACEMENTS,
-    wrapperRef: HTMLDivElement,
-  ) => void;
-};
-
-type HeapT = {
-  lastCursorX: number;
-  lastCursorY: number;
-  triggeredByTouch: boolean;
-  timerId?: NodeJS.Timeout;
-};
-
-/**
- * Implements a simple to use and themeable tooltip component, _e.g._
- * ```js
- * <WithTooltip tip="This is example tooltip.">
- *   <p>Hover to see the tooltip.</p>
- * </WithTooltip>
- * ```
- * **Children:** Children are rendered in the place of `<WithTooltip>`,
- * and when hovered the tooltip is shown. By default the wrapper itself is
- * `<div>` block with `display: inline-block`.
- * @param tip &ndash; Anything React is able to render,
- * _e.g._ a tooltip text. This will be the tooltip content.
- * @param {WithTooltipTheme} props.theme _Ad hoc_ theme.
- */
-const Wrapper: FunctionComponent<PropsT> = ({
-  children,
-  placement = PLACEMENTS.ABOVE_CURSOR,
-  tip,
-  theme,
-}) => {
-  const { current: heap } = useRef<HeapT>({
-    lastCursorX: 0,
-    lastCursorY: 0,
-    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) {
-      const wrapperRect = wrapperRef.current!.getBoundingClientRect();
-      if (
-        cursorX < wrapperRect.left
-        || cursorX > wrapperRect.right
-        || cursorY < wrapperRect.top
-        || cursorY > wrapperRect.bottom
-      ) {
-        setShowTooltip(false);
-      } else if (tooltipRef.current) {
-        tooltipRef.current.pointTo(
-          cursorX + window.scrollX,
-          cursorY + window.scrollY,
-          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);
-    }
-  };
-
-  useEffect(() => {
-    if (showTooltip && tip !== null) {
-      // This is necessary to ensure that even when a single mouse event
-      // arrives to a tool-tipped component, the tooltip is correctly positioned
-      // once opened (because similar call above does not have effect until
-      // the tooltip is fully mounted, and that is delayed to future rendering
-      // cycle due to the implementation).
-      if (tooltipRef.current) {
-        tooltipRef.current.pointTo(
-          heap.lastCursorX + window.scrollX,
-          heap.lastCursorY + window.scrollY,
-          placement,
-          wrapperRef.current!,
-        );
-      }
-
-      const listener = () => {
-        setShowTooltip(false);
-      };
-      window.addEventListener('scroll', listener);
-      return () => {
-        window.removeEventListener('scroll', listener);
-      };
-    }
-    return undefined;
-  }, [
-    heap.lastCursorX,
-    heap.lastCursorY,
-    placement,
-    showTooltip,
-    tip,
-  ]);
-
-  return (
-    <div
-      className={theme.wrapper}
-      onClick={() => {
-        if (heap.timerId) {
-          clearTimeout(heap.timerId);
-          heap.timerId = undefined;
-          heap.triggeredByTouch = false;
-        }
-      }}
-      onMouseLeave={() => {
-        setShowTooltip(false);
-      }}
-      onMouseMove={(e) => {
-        updatePortalPosition(e.clientX, e.clientY);
-      }}
-      onTouchStart={() => {
-        heap.triggeredByTouch = true;
-      }}
-      ref={wrapperRef}
-      role="presentation"
-    >
-      {
-        showTooltip && tip !== null
-          ? <Tooltip ref={tooltipRef} theme={theme}>{tip}</Tooltip>
-          : null
-      }
-      {children}
-    </div>
-  );
-};
-
-const ThemedWrapper = themed(Wrapper, 'WithTooltip', defaultTheme);
-
-type ExportT = typeof ThemedWrapper & {
-  PLACEMENTS: typeof PLACEMENTS;
-};
-
-const e: ExportT = ThemedWrapper as ExportT;
-
-e.PLACEMENTS = PLACEMENTS;
-
-export default e;

package/src/shared/components/YouTubeVideo/base.scss

@@ -1,15 +0,0 @@
-*,
-.context,
-.ad.hoc {
-  .container {
-    aspect-ratio: 16 / 9;
-    background: whitesmoke;
-    position: relative;
-  }
-
-  .video {
-    height: 100%;
-    position: absolute;
-    width: 100%;
-  }
-}

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

@@ -1,73 +0,0 @@
-import qs from 'qs';
-
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import Throbber from 'components/Throbber';
-
-import baseTheme from './base.scss';
-import throbberTheme from './throbber.scss';
-
-type ComponentThemeT = Theme<'container' | 'video'>;
-
-type PropsT = {
-  autoplay?: boolean;
-  src: string;
-  theme: ComponentThemeT;
-  title?: string;
-};
-
-/**
- * A component for embeding a YouTube video.
- * @param [props] Component properties.
- * @param [props.autoplay] If `true` the video will start to play
- * automatically once loaded.
- * @param [props.src] URL of the video to play. Can be in any of
- * the following formats, and keeps any additional query parameters understood
- * by the YouTube IFrame player:
- * - `https://www.youtube.com/watch?v=NdF6Rmt6Ado`
- * - `https://youtu.be/NdF6Rmt6Ado`
- * - `https://www.youtube.com/embed/NdF6Rmt6Ado`
- * @param [props.theme] _Ad hoc_ theme.
- * @param [props.title] The `title` attribute to add to the player
- * IFrame.
- */
-const YouTubeVideo: React.FunctionComponent<PropsT> = ({
-  autoplay,
-  src,
-  theme,
-  title,
-}) => {
-  const srcParts = src.split('?');
-  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 as string}`;
-
-  delete query.v;
-  query.autoplay = autoplay ? '1' : '0';
-  url += `?${qs.stringify(query)}`;
-
-  // TODO: https://developers.google.com/youtube/player_parameters
-  // More query parameters can be exposed via the component props.
-
-  return (
-    <div className={theme.container}>
-      <Throbber theme={throbberTheme} />
-      {/* 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}
-        src={url}
-        title={title}
-      />
-    </div>
-  );
-};
-
-export default themed(YouTubeVideo, 'YouTubeVideo', baseTheme);

package/src/shared/components/YouTubeVideo/throbber.scss

@@ -1,11 +0,0 @@
-*,
-.context,
-.ad.hoc {
-  .container {
-    position: absolute;
-    text-align: center;
-    top: 40%;
-    transform: translateY(50%);
-    width: 100%;
-  }
-}

package/src/shared/components/index.ts

@@ -1,20 +0,0 @@
-/**
- * Just an aggregation of all exported components into a single module.
- */
-
-export { MetaTags } from '@dr.pogodin/react-helmet';
-
-export * from 'components/selectors';
-
-export { default as Button, BaseButton } from 'components/Button';
-export { default as Checkbox } from 'components/Checkbox';
-export { default as Input } from 'components/Input';
-export { default as Link } from 'components/Link';
-export { default as PageLayout } from 'components/PageLayout';
-export { default as Modal, BaseModal } from 'components/Modal';
-export { default as NavLink } from 'components/NavLink';
-export { default as Throbber } from 'components/Throbber';
-export { default as WithTooltip } from 'components/WithTooltip';
-export { default as YouTubeVideo } from 'components/YouTubeVideo';
-
-export { default as TextArea } from './TextArea';

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

@@ -1,124 +0,0 @@
-import {
-  type FunctionComponent,
-  type ReactNode,
-  type RefObject,
-  useImperativeHandle,
-  useRef,
-} from 'react';
-
-import { BaseModal } from 'components/Modal';
-
-import {
-  type OptionT,
-  type OptionsT,
-  type ValueT,
-  optionValueName,
-} from '../../common';
-
-import S from './style.scss';
-
-export type ContainerPosT = {
-  left: number;
-  top: number;
-  width: number;
-};
-
-export function areEqual(a?: ContainerPosT, b?: ContainerPosT): boolean {
-  return a?.left === b?.left && a?.top === b?.top && a?.width === b?.width;
-}
-
-export type RefT = {
-  measure: () => DOMRect | undefined;
-};
-
-type PropsT = {
-  containerClass: string;
-  containerStyle?: ContainerPosT;
-  filter?: (item: OptionT<ReactNode> | ValueT) => boolean;
-  optionClass: string;
-  options: Readonly<OptionsT<ReactNode>>;
-  onCancel: () => void;
-  onChange: (value: ValueT) => void;
-  ref?: RefObject<RefT | null>;
-};
-
-const Options: FunctionComponent<PropsT> = ({
-  containerClass,
-  containerStyle,
-  filter,
-  onCancel,
-  onChange,
-  optionClass,
-  options,
-  ref,
-}) => {
-  const opsRef = useRef<HTMLDivElement>(null);
-
-  useImperativeHandle(ref, () => ({
-    measure: () => {
-      const e = opsRef.current?.parentElement;
-      if (!e) return undefined;
-
-      const rect = opsRef.current!.getBoundingClientRect();
-      const style = window.getComputedStyle(e);
-      const mBottom = parseFloat(style.marginBottom);
-      const mTop = parseFloat(style.marginTop);
-
-      rect.height += mBottom + mTop;
-
-      return rect;
-    },
-  }), []);
-
-  const optionNodes: ReactNode[] = [];
-  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();
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              onChange(iValue);
-              e.stopPropagation();
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
-          {iName}
-        </div>,
-      );
-    }
-  }
-
-  return (
-    <BaseModal
-      // Closes the dropdown (cancels the selection) on any page scrolling attempt.
-      // This is the same native <select> elements do on scrolling, and at least for
-      // now we have no reason to deal with complications needed to support open
-      // dropdowns during the scrolling (that would need to re-position it in
-      // response to the position changes of the root dropdown element).
-      cancelOnScrolling
-      dontDisableScrolling
-      onCancel={onCancel}
-      style={containerStyle}
-      theme={{
-        ad: '',
-        container: containerClass,
-        context: '',
-        hoc: '',
-        overlay: S.overlay,
-      }}
-    >
-      <div ref={opsRef}>{optionNodes}</div>
-    </BaseModal>
-  );
-};
-
-export default Options;

package/src/shared/components/selectors/CustomDropdown/Options/style.scss

@@ -1,6 +0,0 @@
-.overlay {
-  inset: 0;
-  opacity: 0.2;
-  position: fixed;
-  z-index: 1000;
-}

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

@@ -1,146 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import themed from '@dr.pogodin/react-themes';
-
-import { type PropsT, type ValueT, optionValueName } from '../common';
-
-import Options, { type ContainerPosT, type RefT, areEqual } from './Options';
-
-import defaultTheme from './theme.scss';
-
-const BaseCustomDropdown: React.FunctionComponent<
-  PropsT<React.ReactNode, (value: ValueT) => void>
-> = ({
-  filter,
-  label,
-  onChange,
-  options,
-  theme,
-  value,
-}) => {
-  const [active, setActive] = useState(false);
-
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const opsRef = useRef<RefT>(null);
-
-  const [opsPos, setOpsPos] = useState<ContainerPosT>();
-  const [upward, setUpward] = useState(false);
-
-  useEffect(() => {
-    if (!active) return undefined;
-
-    let id: number;
-    const cb = () => {
-      const anchor = dropdownRef.current?.getBoundingClientRect();
-      const opsRect = opsRef.current?.measure();
-      if (anchor && opsRect) {
-        const fitsDown = anchor.bottom + opsRect.height
-          < (window.visualViewport?.height ?? 0);
-        const fitsUp = anchor.top - opsRect.height > 0;
-
-        const up = !fitsDown && fitsUp;
-        setUpward(up);
-
-        const pos = up ? {
-          left: anchor.left,
-          top: anchor.top - opsRect.height - 1,
-          width: anchor.width,
-        } : {
-          left: anchor.left,
-          top: anchor.bottom,
-          width: anchor.width,
-        };
-
-        setOpsPos((now) => (areEqual(now, pos) ? now : pos));
-      }
-      id = requestAnimationFrame(cb);
-    };
-    requestAnimationFrame(cb);
-
-    return () => {
-      cancelAnimationFrame(id);
-    };
-  }, [active]);
-
-  const openList = (
-    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
-  ) => {
-    const view = window.visualViewport;
-    const rect = dropdownRef.current!.getBoundingClientRect();
-    setActive(true);
-
-    // NOTE: This first opens the dropdown off-screen, where it is measured
-    // by an effect declared above, and then positioned below, or above
-    // the original dropdown element, depending where it fits best
-    // (if we first open it downward, it would flick if we immediately
-    // 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,
-      width: rect.width,
-    });
-
-    e.stopPropagation();
-  };
-
-  let selected: React.ReactNode = <>&zwnj;</>;
-  for (const option of options) {
-    if (!filter || filter(option)) {
-      const [iValue, iName] = optionValueName(option);
-      if (iValue === value) {
-        selected = iName;
-        break;
-      }
-    }
-  }
-
-  let containerClassName = theme.container;
-  if (active) containerClassName += ` ${theme.active}`;
-
-  let opsContainerClass = theme.select ?? '';
-  if (upward) {
-    containerClassName += ` ${theme.upward}`;
-    opsContainerClass += ` ${theme.upward}`;
-  }
-
-  return (
-    <div className={containerClassName}>
-      {label === undefined ? null
-        : <div className={theme.label}>{label}</div>}
-      <div
-        className={theme.dropdown}
-        onClick={openList}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') openList(e);
-        }}
-        ref={dropdownRef}
-        role="listbox"
-        tabIndex={0}
-      >
-        {selected}
-        <div className={theme.arrow} />
-      </div>
-      {
-        active ? (
-          <Options
-            containerClass={opsContainerClass}
-            containerStyle={opsPos}
-            onCancel={() => {
-              setActive(false);
-            }}
-            onChange={(newValue) => {
-              setActive(false);
-              if (onChange) onChange(newValue);
-            }}
-            optionClass={theme.option ?? ''}
-            options={options}
-            ref={opsRef}
-          />
-        ) : null
-      }
-    </div>
-  );
-};
-
-export default themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);

package/src/shared/components/selectors/CustomDropdown/theme.scss

@@ -1,118 +0,0 @@
-$border: 1px solid gray;
-
-*,
-.context,
-.ad.hoc {
-  // The outermost dropdown container, holding together the label (if any),
-  // and the select element with arrow. Note, that the dropdown option list,
-  // when opened, exists completely outside the dropdown DOM hierarchy, and
-  // is aligned into the correct position by JS.
-  &.container {
-    align-items: center;
-    display: inline-flex;
-    margin: 0.1em;
-    position: relative;
-  }
-
-  // Styling of default label next to the dropdown (has no effect on custom
-  // non-string label node, if provided).
-  &.label {
-    margin: 0 0.6em 0 1.2em;
-  }
-
-  &.dropdown {
-    border: $border;
-    border-radius: 0.3em;
-    cursor: pointer;
-    min-width: 200px;
-    outline: none;
-    padding: 0.3em 3.0em 0.3em 0.6em;
-    position: relative;
-    user-select: none;
-
-    &:focus {
-      border-color: blue;
-      box-shadow: 0 0 3px 1px lightblue;
-    }
-  }
-
-  &.option {
-    cursor: pointer;
-    outline: none ;
-    padding: 0 0.6em;
-
-    &:focus {
-      background: royalblue;
-      color: white;
-    }
-
-    &:hover {
-      background: royalblue;
-      color: white;
-    }
-  }
-
-  &.select {
-    background: white;
-    border: $border;
-    border-radius: 0 0 0.3em 0.3em;
-    border-top: none;
-    box-shadow: 0 6px 12px 3px lightgray;
-    position: fixed;
-    z-index: 1001;
-  }
-
-  &.arrow {
-    background-image: linear-gradient(to top, lightgray, white 50%, white);
-    border-left: $border;
-    border-radius: 0 0.3em 0.3em 0;
-    bottom: 0;
-    padding: 0.3em 0.6em;
-    position: absolute;
-    right: 0;
-    top: 0;
-
-    &::after {
-      content: '▼';
-    }
-  }
-
-  &.active {
-    .arrow {
-      border-radius: 0 0.3em 0 0;
-    }
-
-    .dropdown {
-      border-color: blue;
-      border-radius: 0.3em 0.3em 0 0;
-    }
-  }
-
-  &.upward {
-    &.active {
-      // NOTE: Here StyleLint complains about order & specifity of selectors in
-      // the compiled CSS, but it should have no effect on the actual styling.
-      // stylelint-disable no-descending-specificity
-      .arrow {
-        border-radius: 0 0 0.3em;
-      }
-
-      .dropdown {
-        border-radius: 0 0 0.3em 0.3em;
-      }
-      // stylelint-enable no-descending-specificity
-    }
-
-    &.select {
-      border-bottom: none;
-      border-top: $border;
-      border-radius: 0.3em 0.3em 0 0;
-
-      // NOTE: Here a normal (downward) shadow would weirdly cast over
-      // the dropdown element, and other ways to cast the shadow result in
-      // "upward" shadow, which is also weird. Thus, better no shadow at all
-      // for the upward-opened dropdown.
-      box-shadow: none;
-    }
-  }
-}