@dr.pogodin/react-utils 1.47.0-alpha.7 → 1.47.0-alpha.8

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

@@ -1,51 +0,0 @@
-import type { ReactNode } from 'react';
-
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import baseTheme from './base-theme.scss';
-
-type ThemeKeyT = 'container' | 'leftSidePanel' | 'mainPanel' | 'rightSidePanel'
-  | 'sidePanel';
-
-type PropsT = {
-  children?: ReactNode;
-  leftSidePanelContent?: ReactNode;
-  rightSidePanelContent?: ReactNode;
-  theme: Theme<ThemeKeyT>;
-};
-
-/**
- * Simple and themeable page layout. It keeps the main content centered in
- * a column of limited width, which fills entire viewport on small screens
- * (under `$screen-md = 1024px` size). At larger screens the column keeps
- * `$screen-md` size, and it is centered at the page, surrounded by side
- * panels, where additional content can be displayed.
- *
- * **Children:** Component children are rendered as the content of main panel.
- * @param {object} [props] Component properties.
- * @param {Node} [props.leftSidePanelContent] The content for left side panel.
- * @param {Node} [props.rightSidePanelContent] The content for right side panel.
- * @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.
- * @param {...any} [props....]
- * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
- */
-const PageLayout: React.FunctionComponent<PropsT> = ({
-  children,
-  leftSidePanelContent,
-  rightSidePanelContent,
-  theme,
-}) => (
-  <div className={theme.container}>
-    <div className={[theme.sidePanel, theme.leftSidePanel].join(' ')}>
-      {leftSidePanelContent}
-    </div>
-    <div className={theme.mainPanel}>
-      {children}
-    </div>
-    <div className={[theme.sidePanel, theme.rightSidePanel].join(' ')}>
-      {rightSidePanelContent}
-    </div>
-  </div>
-);
-
-export default themed(PageLayout, 'PageLayout', baseTheme);

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/TextArea/style.scss

@@ -1,68 +0,0 @@
-@use "sass:color";
-
-*,
-.context,
-.ad.hoc {
-  &.container {
-    display: inline-flex;
-    flex-wrap: wrap;
-    margin: 0.1em;
-    position: relative;
-  }
-
-  &.label {
-    margin: 0 0.3em;
-  }
-
-  &.textarea {
-    background: white;
-    border: 1px solid gray;
-    border-radius: 0.3em;
-    box-sizing: border-box;
-    font: inherit;
-    height: 0;
-    outline: none;
-    overflow: hidden;
-    padding: 0.3em 0.3em calc(0.3em + 1px);
-    resize: none;
-    width: 100%;
-
-    &:focus {
-      border-color: blue;
-      box-shadow: 0 0 3px 1px lightblue;
-    }
-
-    &::placeholder {
-      color: gray;
-    }
-
-    &:disabled {
-      border-color: color.adjust($color: gray, $alpha: -0.66);
-      cursor: not-allowed;
-      color: color.adjust($color: gray, $alpha: -0.66);
-      user-select: none;
-    }
-  }
-
-  &.error &.textarea {
-    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%;
-  }
-
-  &.hidden {
-    // NOTE: We hide it this way, as setting "display: none" will interfere
-    // with measurements, making the hidden input height zero.
-    opacity: 0;
-    position: absolute;
-  }
-}

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

@@ -1,26 +0,0 @@
-@keyframes bouncing {
-  from { top: -0.3em; }
-  to { top: 0.3em; }
-}
-
-*,
-.context,
-.ad.hoc {
-  &.container {
-    display: inline-block;
-  }
-
-  &.circle {
-    animation: bouncing 0.4s ease-in infinite alternate;
-    background: black;
-    border-radius: 0.3em;
-    display: inline-block;
-    height: 0.6em;
-    margin: 0 0.1em;
-    position: relative;
-    width: 0.6em;
-
-    &:first-child { animation-delay: -0.2s; }
-    &:last-child { animation-delay: 0.2s; }
-  }
-}

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

@@ -1,274 +0,0 @@
-/**
- * The actual tooltip component. It is rendered outside the regular document
- * hierarchy, and with sub-components managed without React to achieve the best
- * performance during animation.
- */
-
-import {
-  type FunctionComponent,
-  type ReactNode,
-  type RefObject,
-  useImperativeHandle,
-  useRef,
-} from 'react';
-
-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.
- */
-export enum PLACEMENTS {
-  ABOVE_CURSOR = 'ABOVE_CURSOR',
-  ABOVE_ELEMENT = 'ABOVE_ELEMENT',
-  BELOW_CURSOR = 'BELOW_CURSOR',
-  BELOW_ELEMENT = 'BELOW_ELEMENT',
-}
-
-const ARROW_STYLE_DOWN = [
-  'border-bottom-color:transparent',
-  'border-left-color:transparent',
-  'border-right-color:transparent',
-].join(';');
-
-const ARROW_STYLE_UP = [
-  'border-top-color:transparent',
-  'border-left-color:transparent',
-  'border-right-color:transparent',
-].join(';');
-
-type ComponentsT = {
-  container: HTMLDivElement;
-  arrow: HTMLDivElement;
-  content: HTMLDivElement;
-};
-
-export type ThemeKeysT = 'appearance' | 'arrow' | 'content' | 'container';
-
-type TooltipThemeT = Theme<ThemeKeysT>;
-
-type TooltipRectsT = {
-  arrow: DOMRect;
-  container: DOMRect;
-};
-
-/**
- * Generates bounding client rectangles for tooltip components.
- * @ignore
- * @param tooltip DOM references to the tooltip components.
- * @param tooltip.arrow
- * @param tooltip.container
- * @return Object holding tooltip rectangles in
- *  two fields.
- */
-function calcTooltipRects(tooltip: ComponentsT): TooltipRectsT {
-  return {
-    arrow: tooltip.arrow.getBoundingClientRect(),
-    container: tooltip.container.getBoundingClientRect(),
-  };
-}
-
-/**
- * Calculates the document viewport size.
- * @ignore
- * @return {{x, y, width, height}}
- */
-function calcViewportRect() {
-  const { scrollX, scrollY } = window;
-  const { documentElement: { clientHeight, clientWidth } } = document;
-  return {
-    bottom: scrollY + clientHeight,
-    left: scrollX,
-    right: scrollX + clientWidth,
-    top: scrollY,
-  };
-}
-
-/**
- * Calculates tooltip and arrow positions for the placement just above
- * the cursor.
- * @ignore
- * @param {number} x Cursor page-x position.
- * @param {number} y Cursor page-y position.
- * @param {object} tooltipRects Bounding client rectangles of tooltip parts.
- * @param {object} tooltipRects.arrow
- * @param {object} tooltipRects.container
- * @return {object} Contains the following fields:
- *  - {number} arrowX
- *  - {number} arrowY
- *  - {number} containerX
- *  - {number} containerY
- *  - {string} baseArrowStyle
- */
-function calcPositionAboveXY(
-  x: number,
-  y: number,
-  tooltipRects: TooltipRectsT,
-) {
-  const { arrow, container } = tooltipRects;
-  return {
-    arrowX: 0.5 * (container.width - arrow.width),
-    arrowY: container.height,
-    containerX: x - container.width / 2,
-    containerY: y - container.height - arrow.height / 1.5,
-
-    // TODO: Instead of already setting the base style here, we should
-    // introduce a set of constants for arrow directions, which will help
-    // to do checks dependant on the arrow direction.
-    baseArrowStyle: ARROW_STYLE_DOWN,
-  };
-}
-
-// const HIT = {
-//   NONE: false,
-//   LEFT: 'LEFT',
-//   RIGHT: 'RIGHT',
-//   TOP: 'TOP',
-//   BOTTOM: 'BOTTOM',
-// };
-
-/**
- * Checks whether
- * @param {object} pos
- * @param {object} tooltipRects
- * @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;
-// }
-
-/**
- * Shifts tooltip horizontally to fit into the viewport, while keeping
- * the arrow pointed to the XY point.
- * @param {number} x
- * @param {number} y
- * @param {object} pos
- * @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,
-//       );
-//     }
-//   }
-// }
-
-/**
- * Sets positions of tooltip components to point the tooltip to the specified
- * page point.
- * @ignore
- * @param pageX
- * @param pageY
- * @param placement
- * @param element DOM reference to the element wrapped by the tooltip.
- * @param tooltip
- * @param tooltip.arrow DOM reference to the tooltip arrow.
- * @param tooltip.container DOM reference to the tooltip container.
- */
-function setComponentPositions(
-  pageX: number,
-  pageY: number,
-  placement: PLACEMENTS | undefined,
-  element: HTMLElement | undefined,
-  tooltip: ComponentsT,
-) {
-  const tooltipRects = calcTooltipRects(tooltip);
-  const viewportRect = calcViewportRect();
-
-  /* Default container coords: tooltip at the top. */
-  const pos = calcPositionAboveXY(pageX, pageY, tooltipRects);
-
-  if (pos.containerX < viewportRect.left + 6) {
-    pos.containerX = viewportRect.left + 6;
-    pos.arrowX = Math.max(
-      6,
-      pageX - pos.containerX - tooltipRects.arrow.width / 2,
-    );
-  } else {
-    const maxX = viewportRect.right - 6 - tooltipRects.container.width;
-    if (pos.containerX > maxX) {
-      pos.containerX = maxX;
-      pos.arrowX = Math.min(
-        tooltipRects.container.width - 6,
-        pageX - pos.containerX - tooltipRects.arrow.width / 2,
-      );
-    }
-  }
-
-  /* If tooltip has not enough space on top - make it bottom tooltip. */
-  if (pos.containerY < viewportRect.top + 6) {
-    pos.containerY += tooltipRects.container.height
-      + 2 * tooltipRects.arrow.height;
-    pos.arrowY -= tooltipRects.container.height
-      + tooltipRects.arrow.height;
-    pos.baseArrowStyle = ARROW_STYLE_UP;
-  }
-
-  const containerStyle = `left:${pos.containerX}px;top:${pos.containerY}px`;
-  tooltip.container.setAttribute('style', containerStyle);
-
-  const arrowStyle = `${pos.baseArrowStyle};left:${pos.arrowX}px;top:${pos.arrowY}px`;
-  tooltip.arrow.setAttribute('style', arrowStyle);
-}
-
-/* The Tooltip component itself. */
-const Tooltip: FunctionComponent<{
-  children?: ReactNode;
-  ref?: RefObject<unknown>;
-  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
-  // rendering cycles, and only then it can be correctly measured and positioned.
-  // Thus, when we create the <Tooltip> we have to record its target positioning
-  // details, and then apply them when it is created.
-
-  const arrowRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  const pointTo = (
-    pageX: number,
-    pageY: number,
-    placement: PLACEMENTS,
-    element: HTMLElement,
-  ) => {
-    if (!arrowRef.current || !containerRef.current || !contentRef.current) {
-      throw Error('Internal error');
-    }
-
-    setComponentPositions(pageX, pageY, placement, element, {
-      arrow: arrowRef.current,
-      container: containerRef.current,
-      content: contentRef.current,
-    });
-  };
-  useImperativeHandle(ref, () => ({ pointTo }));
-
-  return createPortal(
-    (
-      <div className={theme.container} ref={containerRef}>
-        <div className={theme.arrow} ref={arrowRef} />
-        <div className={theme.content} ref={contentRef}>{children}</div>
-      </div>
-    ),
-    document.body,
-  );
-};
-
-export default Tooltip;

package/src/shared/components/WithTooltip/default-theme.scss

@@ -1,36 +0,0 @@
-@keyframes appearance {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-*,
-.ad.hoc,
-.context {
-  &.arrow {
-    border: 0.6em solid grey;
-    pointer-events: none;
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-
-  /*
-  &.content { }
-  */
-
-  &.container {
-    background: grey;
-    border-radius: 0.3em;
-    color: white;
-    display: inline-block;
-    padding: 0 0.3em;
-    position: absolute;
-    top: 0;
-    left: 0;
-    animation: appearance 0.6s;
-  }
-
-  &.wrapper {
-    display: inline-block;
-  }
-}