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

package/src/client/getInj.ts

@@ -1,51 +0,0 @@
-// Encapsulates retrieval of server-side data injection into HTML template.
-
-/* global document */
-
-// Note: this way, only required part of "node-forge": AES, and some utils,
-// is bundled into client-side code.
-import forge from 'node-forge/lib/forge';
-
-// eslint-disable-next-line import/no-unassigned-import
-import 'node-forge/lib/aes';
-
-import type { InjT } from 'utils/globalState';
-
-import { getBuildInfo } from 'utils/isomorphy/buildInfo';
-
-// Safeguard is needed here, because the server-side version of Docusaurus docs
-// is compiled (at least now) with settings suggesting it is a client-side
-// environment, but there is no document.
-let inj: InjT = {};
-
-const metaElement: HTMLMetaElement | null = typeof document === 'undefined'
-  ? null : document.querySelector('meta[itemprop="drpruinj"]');
-
-if (metaElement) {
-  metaElement.remove();
-  let data = forge.util.decode64(metaElement.content);
-
-  const { key } = getBuildInfo();
-  const d = forge.cipher.createDecipher('AES-CBC', key);
-  d.start({ iv: data.slice(0, key.length) });
-  d.update(forge.util.createBuffer(data.slice(key.length)));
-  d.finish();
-
-  data = forge.util.decodeUtf8(d.output.data);
-
-  // TODO: Double-check, if there is a safer alternative to parse it?
-  // eslint-disable-next-line no-eval
-  inj = eval(`(${data})`) as InjT;
-} else if (typeof window !== 'undefined' && window.REACT_UTILS_INJECTION) {
-  inj = window.REACT_UTILS_INJECTION;
-  delete window.REACT_UTILS_INJECTION;
-} else {
-  // Otherwise, a bunch of dependent stuff will easily fail in non-standard
-  // environments, where no client-side initialization is performed. Like tests,
-  // Docusaurus examples, etc.
-  inj = {};
-}
-
-export default function getInj(): InjT {
-  return inj;
-}

package/src/index.ts

@@ -1,73 +0,0 @@
-import 'styles/global.scss';
-
-import { webpack } from 'utils';
-
-import type * as ClientM from './client';
-import type * as ServerFactoryM from './server';
-
-// It is a safeguard against multiple instances / versions of the library
-// being loaded into environment by mistake (e.g. because of different
-// packages pinning down different exact versions of the lib, thus preventing
-// a proper dedupe and using a single common library version).
-if (global.REACT_UTILS_LIBRARY_LOADED) {
-  throw Error('React utils library is already loaded');
-} else global.REACT_UTILS_LIBRARY_LOADED = true;
-
-const server = webpack.requireWeak<typeof ServerFactoryM>('./server', __dirname);
-
-const client = server
-  ? undefined
-
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  : (require('./client') as typeof ClientM).default;
-
-export {
-  type AsyncCollectionT,
-  type AsyncCollectionLoaderT,
-  type AsyncDataEnvelopeT,
-  type AsyncDataLoaderT,
-  type ForceT,
-  type UseAsyncDataOptionsT,
-  type UseAsyncDataResT,
-  type UseGlobalStateResT,
-  type ValueOrInitializerT,
-  getGlobalState,
-  GlobalStateProvider,
-  newAsyncDataEnvelope,
-  useAsyncCollection,
-  useAsyncData,
-  useGlobalState,
-  withGlobalStateType,
-} from '@dr.pogodin/react-global-state';
-
-export * from 'components';
-
-export {
-  type BeforeRenderResT,
-  type BeforeRenderT,
-  type ConfigT,
-  type ServerSsrContext,
-  type ServerT,
-} from './server';
-
-export {
-  assertEmptyObject,
-  config,
-  Barrier,
-  Cached,
-  Emitter,
-  isomorphy,
-  getSsrContext,
-  type Listener,
-  type ObjectKey,
-  Semaphore,
-  splitComponent,
-  type Theme,
-  themed,
-  ThemeProvider,
-  time,
-  webpack,
-  withRetries,
-} from 'utils';
-
-export { client, server };

package/src/server/utils/index.ts

@@ -1,3 +0,0 @@
-// Aggregates utility modules together.
-
-export * as errors from './errors';

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

@@ -1,130 +0,0 @@
-// The <Button> component implements a standard button / button-like link.
-
-import type {
-  FunctionComponent,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  PointerEventHandler,
-  ReactNode,
-} from 'react';
-
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import Link from 'components/Link';
-
-import defaultTheme from './style.scss';
-
-type PropsT = {
-  active?: boolean;
-  children?: ReactNode;
-  disabled?: boolean;
-  enforceA?: boolean;
-  onClick?: MouseEventHandler & KeyboardEventHandler;
-  onKeyDown?: KeyboardEventHandler;
-  onKeyUp?: KeyboardEventHandler;
-  onMouseDown?: MouseEventHandler;
-  onMouseUp?: MouseEventHandler;
-  onPointerDown?: PointerEventHandler;
-  onPointerUp?: PointerEventHandler;
-  openNewTab?: boolean;
-  replace?: boolean;
-  testId?: string;
-  theme: Theme<'active' | 'button' | 'disabled'>;
-  // TODO: It needs a more precise typing of the object option.
-  to?: object | string;
-};
-
-export const BaseButton: FunctionComponent<PropsT> = ({
-  active,
-  children,
-  disabled,
-  enforceA,
-  onClick,
-  onKeyDown: onKeyDownProp,
-  onKeyUp,
-  onMouseDown,
-  onMouseUp,
-  onPointerDown,
-  onPointerUp,
-  openNewTab,
-  replace,
-  testId,
-  theme,
-  to,
-}) => {
-  let className = theme.button;
-  if (active && theme.active) className += ` ${theme.active}`;
-  if (disabled) {
-    if (theme.disabled) className += ` ${theme.disabled}`;
-    return (
-      <div
-        className={className}
-        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  let onKeyDown = onKeyDownProp;
-  if (!onKeyDown && onClick) {
-    onKeyDown = (e) => {
-      if (e.key === 'Enter') onClick(e);
-    };
-  }
-
-  if (to) {
-    return (
-      <Link
-        className={className}
-        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-        enforceA={enforceA}
-        onClick={onClick}
-
-        // TODO: For now, the `onKeyDown` handler is not passed to the <Link>,
-        // as <Link> component does not call it anyway, presumably due to
-        // the inner implementation details. We should look into supporting it:
-        // https://github.com/birdofpreyru/react-utils/issues/444
-        // onKeyDown={onKeyDown}
-
-        onKeyUp={onKeyUp}
-        onMouseDown={onMouseDown}
-        onMouseUp={onMouseUp}
-        onPointerDown={onPointerDown}
-        onPointerUp={onPointerUp}
-        openNewTab={openNewTab}
-        replace={replace}
-        to={to}
-      >
-        {children}
-      </Link>
-    );
-  }
-
-  return (
-    <div
-      className={className}
-      data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      onKeyUp={onKeyUp}
-      onMouseDown={onMouseDown}
-      onMouseUp={onMouseUp}
-      onPointerDown={onPointerDown}
-      onPointerUp={onPointerUp}
-      role="button"
-      tabIndex={0}
-    >
-      {children}
-    </div>
-  );
-};
-
-/**
- * Button component theme: a map of CSS
- * class names to append to button elements:
- * @prop {string} [active] to the root element of active button.
- * @prop {string} [button] to the root element of any button.
- * @prop {string} [disabled] to the root element of disabled button.
- */
-export default themed(BaseButton, 'Button', defaultTheme);

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

@@ -1,53 +0,0 @@
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import defaultTheme from './theme.scss';
-
-type PropT<ValueT> = {
-  checked?: ValueT;
-  disabled?: boolean;
-  label?: React.ReactNode;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  testId?: string;
-  theme: Theme<
-    | 'checkbox'
-    | 'container'
-    | 'disabled'
-    | 'indeterminate'
-    | 'label'
-  >;
-};
-
-const Checkbox = <ValueT extends boolean | 'indeterminate' = boolean>({
-  checked,
-  disabled,
-  label,
-  onChange,
-  testId,
-  theme,
-}: PropT<ValueT>) => {
-  let containerClassName = theme.container;
-  if (disabled) containerClassName += ` ${theme.disabled}`;
-
-  let checkboxClassName = theme.checkbox;
-  if (checked === 'indeterminate') checkboxClassName += ` ${theme.indeterminate}`;
-
-  return (
-    <div className={containerClassName}>
-      { label === undefined
-        ? null : <div className={theme.label}>{label}</div> }
-      <input
-        checked={checked === undefined ? undefined : checked === true}
-        className={checkboxClassName}
-        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-        disabled={disabled}
-        onChange={onChange}
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-        type="checkbox"
-      />
-    </div>
-  );
-};
-
-export default themed(Checkbox, 'Checkbox', defaultTheme);

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

@@ -1,96 +0,0 @@
-import {
-  type FunctionComponent,
-  type ReactNode,
-  type Ref,
-  useRef,
-  useState,
-} from 'react';
-
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import defaultTheme from './theme.scss';
-
-type ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'
-  | 'focused' | 'input' | 'label';
-
-type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
-  children?: ReactNode;
-  error?: ReactNode;
-  label?: React.ReactNode;
-  ref?: Ref<HTMLInputElement>;
-  testId?: string;
-  theme: Theme<ThemeKeyT>;
-};
-
-/**
- * Themeable input field, based on the standard HTML `<input>` element.
- * @param [props.label] Input label.
- * @param [props.theme] _Ad hoc_ theme.
- * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
- * @param [props...] Any other properties are passed to the underlying
- * `<input>` element.
- */
-const Input: FunctionComponent<PropsT> = ({
-  children,
-  error,
-  label,
-  ref,
-  testId,
-  theme,
-  ...rest
-}) => {
-  // NOTE: As of now, it is only updated when "theme.focused" is defined,
-  // as otherwise its value is not used.
-  const [focused, setFocused] = useState(false);
-
-  const localRef = useRef<HTMLInputElement>(null);
-
-  let containerClassName = theme.container;
-
-  // NOTE: As of now, "focused" can be true only when "theme.focused"
-  // is provided.
-  if (focused /* && theme.focused */) containerClassName += ` ${theme.focused}`;
-
-  if (!rest.value && theme.empty) containerClassName += ` ${theme.empty}`;
-
-  if (error) containerClassName += ` ${theme.error}`;
-
-  return (
-    <div
-      className={containerClassName}
-      onFocus={() => {
-        // TODO: It does not really work if a callback-style `ref` is passed in,
-        // we need a more complex logic to cover that case, but for now this serves
-        // the case we need it for.
-        if (typeof ref === 'object') ref?.current?.focus();
-        else localRef.current?.focus();
-      }}
-    >
-      {label === undefined ? null : <div className={theme.label}>{label}</div>}
-      <input
-        className={theme.input}
-        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-        ref={ref ?? localRef}
-
-        // TODO: Avoid the spreading later.
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...rest}
-
-        onBlur={theme.focused ? (e) => {
-          setFocused(false);
-          rest.onBlur?.(e);
-        } : rest.onBlur}
-        onFocus={theme.focused ? (e) => {
-          setFocused(true);
-          rest.onFocus?.(e);
-        } : rest.onFocus}
-      />
-      {error && error !== true
-        ? <div className={theme.errorMessage}>{error}</div>
-        : null}
-      {children ? <div className={theme.children}>{children}</div> : null}
-    </div>
-  );
-};
-
-export default themed(Input, 'Input', defaultTheme);

package/src/shared/components/Link.tsx

@@ -1,25 +0,0 @@
-/**
- * The Link wraps around React Router's Link component, to automatically replace
- * it by the regular <a> element when:
- * - The target reference points to another domain;
- * - User opts to open the reference in a new tab;
- * - User explicitely opts to use <a>.
- */
-
-import { type LinkProps, Link as RrLink } from 'react-router';
-
-import GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';
-
-type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & LinkProps;
-
-const Link: React.FunctionComponent<PropsT>
-  = (props) => (
-    <GenericLink
-      // TODO: Avoid the spreading later.
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      routerLinkType={RrLink}
-    />
-  );
-
-export default Link;

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

@@ -1,177 +0,0 @@
-import {
-  type CSSProperties,
-  type FunctionComponent,
-  type ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
-
-import ReactDom from 'react-dom';
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import baseTheme from './base-theme.scss';
-import S from './styles.scss';
-
-type PropsT = {
-  cancelOnScrolling?: boolean;
-  children?: ReactNode;
-  dontDisableScrolling?: boolean;
-  onCancel?: () => void;
-  overlayStyle?: CSSProperties;
-  style?: CSSProperties;
-  testId?: string;
-  testIdForOverlay?: string;
-  theme: Theme<'container' | 'overlay'>;
-
-  /** @deprecated */
-  containerStyle?: CSSProperties;
-};
-
-/**
- * The `<Modal>` component implements a simple themeable modal window, wrapped
- * into the default theme. `<BaseModal>` exposes the base non-themed component.
- * **Children:** Component children are rendered as the modal content.
- * @param {object} props Component properties. Beside props documented below,
- *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.
- * @param {function} [props.onCancel] The callback to trigger when user
- * clicks outside the modal, or presses Escape. It is expected to hide the
- * modal.
- * @param {ModalTheme} [props.theme] _Ad hoc_ theme.
- */
-const BaseModal: FunctionComponent<PropsT> = ({
-  cancelOnScrolling,
-  children,
-  containerStyle,
-  dontDisableScrolling,
-  onCancel,
-  overlayStyle,
-  style,
-  testId,
-  testIdForOverlay,
-  theme,
-}) => {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const overlayRef = useRef<HTMLDivElement | null>(null);
-
-  // Sets up modal cancellation of scrolling, if opted-in.
-  useEffect(() => {
-    if (cancelOnScrolling && onCancel) {
-      window.addEventListener('scroll', onCancel);
-      window.addEventListener('wheel', onCancel);
-    }
-    return () => {
-      if (cancelOnScrolling && onCancel) {
-        window.removeEventListener('scroll', onCancel);
-        window.removeEventListener('wheel', onCancel);
-      }
-    };
-  }, [cancelOnScrolling, onCancel]);
-
-  // Disables window scrolling, if it is not opted-out.
-  useEffect(() => {
-    if (!dontDisableScrolling) {
-      document.body.classList.add(S.scrollingDisabledByModal);
-    }
-    return () => {
-      if (!dontDisableScrolling) {
-        document.body.classList.remove(S.scrollingDisabledByModal);
-      }
-    };
-  }, [dontDisableScrolling]);
-
-  const focusLast = useMemo(() => (
-    <div
-      onFocus={() => {
-        const elems = containerRef.current!.querySelectorAll('*');
-        for (let i = elems.length - 1; i >= 0; --i) {
-          (elems[i] as HTMLElement).focus();
-          if (document.activeElement === elems[i]) return;
-        }
-        overlayRef.current?.focus();
-      }}
-      // TODO: Have a look at this later.
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex={0}
-    />
-  ), []);
-
-  return ReactDom.createPortal(
-    (
-      <div>
-        {focusLast}
-        <div
-          aria-label="Cancel"
-          className={theme.overlay}
-          data-testid={
-            process.env.NODE_ENV === 'production'
-              ? undefined : testIdForOverlay
-          }
-          onClick={(e) => {
-            if (onCancel) {
-              onCancel();
-              e.stopPropagation();
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape' && onCancel) {
-              onCancel();
-              e.stopPropagation();
-            }
-          }}
-          ref={(node) => {
-            if (node && node !== overlayRef.current) {
-              overlayRef.current = node;
-              node.focus();
-            }
-          }}
-          role="button"
-          style={overlayStyle}
-          tabIndex={0}
-        />
-        {
-          // NOTE: These rules are disabled because our intention is to keep
-          // the element non-interactive (thus not on the keyboard focus chain),
-          // and it has `onClick` handler merely to stop propagation of click
-          // events to its parent container. This is needed because, for example
-          // when the modal is wrapped into an interactive element we don't want
-          // any clicks inside the modal to bubble-up to that parent element
-          // (because visually and logically the modal dialog does not belong
-          // to its parent container, where it technically belongs from
-          // the HTML mark-up perpective).
-        }
-        <div // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-          aria-modal="true"
-          className={theme.container}
-          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-          onWheel={(event) => {
-            event.stopPropagation();
-          }}
-          ref={containerRef}
-          role="dialog"
-          style={style ?? containerStyle}
-        >
-          {children}
-        </div>
-        <div
-          onFocus={() => {
-            overlayRef.current?.focus();
-          }}
-          // TODO: Have a look at this later.
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-        />
-        {focusLast}
-      </div>
-    ),
-    document.body,
-  );
-};
-
-export default themed(BaseModal, 'Modal', baseTheme);
-
-/* Non-themed version of the Modal. */
-export { BaseModal };

package/src/shared/components/NavLink.tsx

@@ -1,18 +0,0 @@
-import { type NavLinkProps, NavLink as RrNavLink } from 'react-router';
-
-import GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';
-
-type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & NavLinkProps;
-
-const NavLink: React.FunctionComponent<PropsT>
-  = (props) => (
-    <GenericLink
-      // TODO: I guess, we better re-write it to avoid the props spreading,
-      // but no need to spend time on it right now.
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      routerLinkType={RrNavLink}
-    />
-  );
-
-export default NavLink;