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

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

@@ -1,139 +0,0 @@
-import {
-  type ChangeEventHandler,
-  type FocusEventHandler,
-  type FunctionComponent,
-  type KeyboardEventHandler,
-  type ReactNode,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import defaultTheme from './style.scss';
-
-type ThemeKeyT = 'container' | 'error' | 'errorMessage' | 'hidden' | 'label'
-  | 'textarea';
-
-type Props = {
-  disabled?: boolean;
-  error?: ReactNode;
-  label?: string;
-  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
-  placeholder?: string;
-  testId?: string;
-  theme: Theme<ThemeKeyT>;
-  value?: string;
-};
-
-const TextArea: FunctionComponent<Props> = ({
-  disabled,
-  error,
-  label,
-  onBlur,
-  onChange,
-  onKeyDown,
-  placeholder,
-  testId,
-  theme,
-  value,
-}) => {
-  const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);
-  const [height, setHeight] = useState<number | undefined>();
-
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-
-  const [localValue, setLocalValue] = useState(value ?? '');
-  if (value !== undefined && localValue !== value) setLocalValue(value);
-
-  // This resizes text area's height when its width is changed for any reason.
-  useEffect(() => {
-    const el = hiddenAreaRef.current;
-    if (!el) return undefined;
-
-    const cb = () => {
-      setHeight(el.scrollHeight);
-    };
-    const observer = new ResizeObserver(cb);
-    observer.observe(el);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  // Resizes the text area when its content is modified.
-  //
-  // NOTE: useLayoutEffect() instead of useEffect() makes difference here,
-  // as it helps to avoid visible "content/height" jumps (i.e. with just
-  // useEffect() it becomes visible how the content is modified first,
-  // and then input height is incremented, if necessary).
-  // See: https://github.com/birdofpreyru/react-utils/issues/313
-  useLayoutEffect(() => {
-    const el = hiddenAreaRef.current;
-    if (el) setHeight(el.scrollHeight);
-  }, [localValue]);
-
-  let containerClassName = theme.container;
-  if (error) containerClassName += ` ${theme.error}`;
-
-  return (
-    <div
-      className={containerClassName}
-      onFocus={() => {
-        textAreaRef.current?.focus();
-      }}
-    >
-      {label === undefined ? null : <div className={theme.label}>{label}</div>}
-      <textarea
-        className={`${theme.textarea} ${theme.hidden}`}
-
-        // This text area is hidden underneath the primary one below,
-        // and it is used for text measurements, to implement auto-scaling
-        // of the primary textarea's height.
-        readOnly
-        ref={hiddenAreaRef}
-
-        // The "-1" value of "tabIndex" removes this hidden text area from
-        // the tab-focus-chain.
-        tabIndex={-1}
-
-        // NOTE: With empty string value ("") the scrolling height of this text
-        // area is zero, thus collapsing <TextArea> height below the single line
-        // input height. To avoid it we fallback to whitespace (" ") character
-        // here.
-        value={localValue || ' '}
-      />
-      <textarea
-        className={theme.textarea}
-        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-        disabled={disabled}
-        onBlur={onBlur}
-
-        // When value is "undefined" the text area is not-managed, and we should
-        // manage it internally for the measurement / resizing functionality
-        // to work.
-        onChange={
-          value === undefined
-            ? (e) => {
-              setLocalValue(e.target.value);
-            } : onChange
-        }
-        onKeyDown={onKeyDown}
-        placeholder={placeholder}
-        ref={textAreaRef}
-        style={{ height }}
-        value={localValue}
-      />
-      {error && error !== true
-        ? <div className={theme.errorMessage}>{error}</div>
-        : null}
-    </div>
-  );
-};
-
-export default themed(TextArea, 'TextArea', defaultTheme);

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

@@ -1,28 +0,0 @@
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import defaultTheme from './theme.scss';
-
-type ThemeKeyT = 'bouncing' | 'circle' | 'container';
-
-type PropsT = {
-  theme: Theme<ThemeKeyT>;
-};
-
-/**
- * Throbber is an "action in progress" indicator, which renders
- * three bouncing circles as a simple pending activity indicator,
- * and can be further themed to a certain degree.
- * @param {object} [props] Component properties.
- * @param {ThrobberTheme} [props.theme] _Ad hoc_ theme.
- * @param {...any} [props....]
- * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
- */
-const Throbber: React.FunctionComponent<PropsT> = ({ theme }) => (
-  <span className={theme.container}>
-    <span className={theme.circle} />
-    <span className={theme.circle} />
-    <span className={theme.circle} />
-  </span>
-);
-
-export default themed(Throbber, 'Throbber', defaultTheme);

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/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/Switch/index.tsx

@@ -1,74 +0,0 @@
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import {
-  type OptionsT,
-  type ValueT,
-  optionValueName,
-} from '../common';
-
-import defaultTheme from './theme.scss';
-
-type ThemeKeyT = 'container' | 'label' | 'option' | 'options' | 'selected';
-
-type PropsT = {
-  label?: React.ReactNode;
-  onChange?: (value: ValueT) => void;
-  options?: Readonly<OptionsT<React.ReactNode>>;
-  theme: Theme<ThemeKeyT>;
-  value?: ValueT;
-};
-
-const BaseSwitch: React.FunctionComponent<PropsT> = ({
-  label,
-  onChange,
-  options,
-  theme,
-  value,
-}) => {
-  if (!options || !theme.option) throw Error('Internal error');
-
-  const optionNodes: React.ReactNode[] = [];
-  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);
-      };
-    }
-
-    optionNodes.push(
-      onPress
-        ? (
-          <div
-            className={className}
-            key={iValue}
-            onClick={onPress}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') onPress();
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            {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>
-    </div>
-  );
-};
-
-export default themed(BaseSwitch, 'Switch', defaultTheme);

package/src/shared/components/selectors/common.ts

@@ -1,57 +0,0 @@
-// The stuff common between different dropdown implementations.
-
-import type { Theme } from '@dr.pogodin/react-themes';
-
-type ThemeKeyT = 'active'
-  | 'arrow'
-  | 'container'
-  | 'dropdown'
-  | 'hiddenOption'
-  | 'label'
-  | 'option'
-  | 'select'
-
-  // TODO: This is currently only valid for (native) <Dropdown>,
-  // other kinds of selectors should be evaluated, and aligned with this
-  // feature, if appropriate.
-  | 'invalid'
-
-  // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it
-  // into a separate theme spec for that component.
-  | 'upward';
-
-export type ValueT = number | string;
-
-export type OptionT<NameT> = {
-  name?: NameT | null;
-  value: ValueT;
-};
-
-export type OptionsT<NameT> = Readonly<Array<OptionT<NameT> | ValueT>>;
-
-export type PropsT<
-  NameT,
-  OnChangeT = React.ChangeEventHandler<HTMLSelectElement>,
-> = {
-  filter?: (item: OptionT<NameT> | ValueT) => boolean;
-  label?: React.ReactNode;
-  onChange?: OnChangeT;
-  options: Readonly<OptionsT<NameT>>;
-  testId?: string;
-  theme: Theme<ThemeKeyT>;
-  value?: ValueT;
-};
-
-function isValue<T>(x: OptionT<T> | ValueT): x is ValueT {
-  const type = typeof x;
-  return type === 'number' || type === 'string';
-}
-
-/** Returns option value and name as a tuple. */
-export function optionValueName<NameT>(
-  option: OptionT<NameT> | ValueT,
-): [ValueT, NameT | ValueT] {
-  return isValue(option)
-    ? [option, option]
-    : [option.value, option.name ?? option.value];
-}

package/src/shared/components/selectors/index.ts

@@ -1,8 +0,0 @@
-export { default as CustomDropdown } from './CustomDropdown';
-export { default as Dropdown } from './NativeDropdown';
-export { default as Switch } from './Switch';
-
-export {
-  type OptionT,
-  type OptionsT,
-} from './common';

package/src/shared/utils/config.ts

@@ -1,28 +0,0 @@
-/* global document */
-
-import type CookieM from 'cookie';
-
-import { IS_CLIENT_SIDE } from './isomorphy/environment-check';
-import { requireWeak } from './webpack';
-
-// 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 @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') {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const cookie = require('cookie') as typeof CookieM;
-  config.CSRF = cookie.parse(document.cookie).csrfToken;
-}
-
-export default config;