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

package/src/shared/components/Checkbox/theme.scss

@@ -1,63 +0,0 @@
-*,
-.context,
-.ad.hoc {
-  &.checkbox {
-    appearance: none;
-    background: white;
-    border: 1px solid gray;
-    border-radius: 0.3em;
-    cursor: pointer;
-    font: inherit;
-    height: 1.5em;
-    outline: none;
-    margin: 0;
-    width: 1.5em;
-
-    &:checked {
-      &::after {
-        background: black;
-        border-radius: 0.3em;
-        content: "";
-        display: block;
-        height: 1em;
-        margin: 0.2em;
-        width: 1em;
-      }
-    }
-
-    &:focus {
-      border-color: blue;
-      box-shadow: 0 0 3px 1px lightblue;
-    }
-
-    &.indeterminate {
-      &::after {
-        background: black;
-        border-radius: 0.2em;
-        content: "";
-        display: block;
-        height: 0.2em;
-        margin: 0.6em 0.2em;
-        width: 1em;
-      }
-    }
-  }
-
-  &.container {
-    align-items: center;
-    display: inline-flex;
-    margin: 0.1em;
-  }
-
-  &.label {
-    margin: 0 0.6em 0 1.5em;
-  }
-
-  &.disabled {
-    opacity: 0.33;
-
-    .checkbox {
-      cursor: not-allowed !important;
-    }
-  }
-}

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

@@ -1,141 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type {
-  Link,
-  LinkProps,
-  NavLink,
-  NavLinkProps,
-} from 'react-router';
-
-import './style.scss';
-
-type LinkT = typeof Link;
-type NavLinkT = typeof NavLink;
-
-type ToT = Parameters<typeof Link>[0]['to'];
-
-export type PropsT = {
-  children?: ReactNode;
-  className?: string;
-  disabled?: boolean;
-  enforceA?: boolean;
-  keepScrollPosition?: boolean;
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-  onMouseDown?: React.MouseEventHandler<HTMLAnchorElement>;
-  openNewTab?: boolean;
-  replace?: boolean;
-  routerLinkType: LinkT | NavLinkT;
-  to: ToT;
-};
-
-/**
- * The `<Link>` component, and almost identical `<NavLink>` component, are
- * auxiliary wrappers around
- * [React Router](https://github.com/ReactTraining/react-router)'s
- * `<Link>` and `<NavLink>` components; they help to handle external and
- * internal links in uniform manner.
- *
- * @param [props] Component properties.
- * @param [props.className] CSS classes to apply to the link.
- * @param [props.disabled] Disables the link.
- * @param [props.enforceA] `true` enforces rendering of the link as
- * a simple `<a>` element.
- * @param [props.keepScrollPosition] If `true`, and the link is
- * rendered as a React Router's component, it won't reset the viewport scrolling
- * position to the origin when clicked.
- * @param [props.onClick] Event handler to trigger upon click.
- * @param [props.onMouseDown] Event handler to trigger on MouseDown
- * event.
- * @param [props.openNewTab] If `true` the link opens in a new tab.
- * @param [props.replace] When `true`, the link will replace current
- * entry in the history stack instead of adding a new one.
- * @param [props.to] Link URL.
- * @param [props.activeClassName] **`<NavLink>`** only: CSS class(es)
- * to apply to rendered link when it is active.
- * @param [props.activeStyle] **`<NavLink>`** only: CSS styles
- * to apply to the rendered link when it is active.
- * @param [props.exact] **`<NavLink>`** only: if `true`, the active
- * class/style will only be applied if the location is matched exactly.
- * @param [props.isActive] **`<NavLink>`** only: Add extra
- * logic for determining whether the link is active. This should be used if you
- * want to do more than verify that the link’s pathname matches the current URL
- * pathname.
- * @param [props.location] **`<NavLink>`** only: `isActive` compares
- * current history location (usually the current browser URL). To compare to
- * a different location, a custom `location` can be passed.
- * @param [props.strict] **`<NavLink>`** only: . When `true`, trailing
- * slash on a location’s pathname will be taken into consideration when
- * determining if the location matches the current URL. See the `<Route strict>`
- * documentation for more information.
- */
-const GenericLink = ({
-  children,
-  className,
-  disabled,
-  enforceA,
-  keepScrollPosition,
-  onClick,
-  onMouseDown,
-  openNewTab,
-  replace,
-  routerLinkType,
-  to,
-  ...rest
-}: (LinkProps | NavLinkProps) & PropsT): ReactNode => {
-  /* Renders Link as <a> element if:
-   * - It is opted explicitely by `enforceA` prop;
-   * - It should be opened in a new tab;
-   * - It is an absolte URL (starts with http:// or https://);
-   * - It is anchor link (starts with #). */
-  if (disabled || enforceA || openNewTab
-    || (to as string).match(/^(#|(https?|mailto):)/)) {
-    return (
-      <a
-        className={className}
-        // TODO: This requires a fix: disabled is not really an attribute of <a>
-        // tag, thus for disabled option we rather should render a plain text
-        // styled as a link.
-        // disabled={disabled}
-        href={to as string}
-        onClick={disabled ? (e) => {
-          e.preventDefault();
-        } : onClick}
-        onMouseDown={disabled ? (e) => {
-          e.preventDefault();
-        } : onMouseDown}
-        rel="noopener noreferrer"
-        styleName="link"
-        target={openNewTab ? '_blank' : ''}
-      >
-        {children}
-      </a>
-    );
-  }
-
-  const L = routerLinkType;
-
-  return (
-    <L
-      className={className}
-      discover="none"
-      // disabled
-      onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-        // Executes the user-provided event handler, if any.
-        if (onClick) onClick(e);
-
-        // By default, clicking the link scrolls the page to beginning.
-        if (!keepScrollPosition) window.scroll(0, 0);
-      }}
-      onMouseDown={onMouseDown}
-      replace={replace}
-      to={to}
-      // TODO: Refactor it later.
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-    >
-      {children}
-    </L>
-  );
-};
-
-export default GenericLink;

package/src/shared/components/GenericLink/style.scss

@@ -1,3 +0,0 @@
-.link[disabled] {
-  cursor: not-allowed;
-}

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/Input/theme.scss

@@ -1,52 +0,0 @@
-*,
-.context,
-.ad.hoc {
-  &.container {
-    align-items: center;
-    display: inline-flex;
-    flex-wrap: wrap;
-    margin: 0.1em;
-    position: relative;
-  }
-
-  &.children {
-    width: 100%;
-  }
-
-  &.input {
-    border: 1px solid gray;
-    border-radius: 0.3em;
-    cursor: text;
-    font: inherit;
-    flex: 1;
-    outline: none;
-    padding: 0.3em 0.3em calc(0.3em + 1px);
-
-    &:focus {
-      border-color: blue;
-      box-shadow: 0 0 3px 1px lightblue;
-    }
-  }
-
-  &.label {
-    margin: 0 0.6em 0 1.5em;
-    pointer-events: none;
-  }
-
-  &.error &.input {
-    border-color: red;
-
-    &:focus {
-      box-shadow: 0 0 3px 1px orangered;
-    }
-  }
-
-  &.errorMessage {
-    color: red;
-    font-size: 0.8em;
-    font-style: italic;
-    padding-right: 0.6em;
-    text-align: right;
-    width: 100%;
-  }
-}

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/base-theme.scss

@@ -1,38 +0,0 @@
-@use "../../../styles/mixins" as *;
-
-*,
-.context,
-.ad.hoc {
-  &.overlay {
-    background: #eee;
-    height: 100%;
-    left: 0;
-    opacity: 0.8;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: $zIndexOfDefaultModalOverlay;
-
-    &:focus { outline: none; }
-  }
-
-  &.container {
-    background: #fff;
-    box-shadow: 0 0 14px 1px rgb(38 38 40 / 15%);
-    border-radius: 0.3em;
-    max-height: 95vh;
-    max-width: $screen-md;
-    overflow: hidden;
-    padding: 0.6em 1.2em;
-    width: 480px;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: $zIndexOfDefaultModalOverlay + 1;
-
-    @include xs-to-lg {
-      max-width: 95vw;
-    }
-  }
-}

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/Modal/styles.scss

@@ -1,3 +0,0 @@
-.scrollingDisabledByModal {
-  overflow: hidden;
-}

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;

package/src/shared/components/PageLayout/base-theme.scss

@@ -1,30 +0,0 @@
-/**
- * Base theme: symmetric 3-columns layout, with the center column occupying all
- * screen up to mid screen size. For larger screen sizes the main column is
- * limited by the mid screen size, and the free space is filled with side
- * columns on left and right.
- */
-
-@use "../../../styles/mixins" as *;
-
-*,
-.context,
-.ad.hoc {
-  &.container {
-    display: flex;
-    min-height: 100vh;
-    overflow: hidden;
-    width: 100%;
-  }
-
-  &.mainPanel {
-    overflow: hidden;
-    padding: 1.2em;
-    width: $screen-md;
-  }
-
-  &.sidePanel {
-    flex: 1;
-    overflow: hidden;
-  }
-}