@dr.pogodin/react-utils 1.35.3 → 1.36.0

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

@@ -2,14 +2,13 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
-const validThemeKeys = [
-  'bouncing',
-  'circle',
-  'container',
-] as const;
+type ThemeKeyT =
+  | 'bouncing'
+  | 'circle'
+  | 'container';
 
 type PropsT = {
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<ThemeKeyT>;
 };
 
 /**
@@ -29,15 +28,4 @@ const Throbber: React.FunctionComponent<PropsT> = ({ theme }) => (
   </span>
 );
 
-const ThemedThrobber = themed(
-  Throbber,
-  'Throbber',
-  validThemeKeys,
-  defaultTheme,
-);
-
-Throbber.propTypes = {
-  theme: ThemedThrobber.themeType.isRequired,
-};
-
-export default ThemedThrobber;
+export default themed(Throbber, 'Throbber', defaultTheme);

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

@@ -16,8 +16,6 @@ import {
 
 import { createPortal } from 'react-dom';
 
-import PT from 'prop-types';
-
 import type { Theme } from '@dr.pogodin/react-themes';
 
 /* Valid placements of the rendered tooltip. They will be overriden when
@@ -54,14 +52,13 @@ type HeapT = {
   lastPlacement?: PLACEMENTS | undefined;
 };
 
-export const validThemeKeys = [
-  'appearance',
-  'arrow',
-  'content',
-  'container',
-] as const;
+export type ThemeKeysT =
+  | 'appearance'
+  | 'arrow'
+  | 'content'
+  | 'container';
 
-type TooltipThemeT = Theme<typeof validThemeKeys>;
+type TooltipThemeT = Theme<ThemeKeysT>;
 
 /**
  * Creates tooltip components.
@@ -345,9 +342,4 @@ const Tooltip = forwardRef<unknown, {
   return components ? createPortal(children, components.content) : null;
 });
 
-Tooltip.propTypes = {
-  children: PT.node,
-  theme: PT.shape({}).isRequired,
-};
-
 export default Tooltip;

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

@@ -1,6 +1,5 @@
 /* global window */
 
-import PT from 'prop-types';
 import {
   type ReactNode,
   useEffect,
@@ -11,19 +10,17 @@ import {
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import Tooltip, {
+  type ThemeKeysT as TooltipThemeKeysT,
   PLACEMENTS,
-  validThemeKeys as validTooltipThemeKeys,
 } from './Tooltip';
 
 import defaultTheme from './default-theme.scss';
 
-const validThemeKeys = [...validTooltipThemeKeys, 'wrapper'] as const;
-
 type PropsT = {
   children?: ReactNode;
   placement?: PLACEMENTS;
   tip?: ReactNode;
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<'wrapper' | TooltipThemeKeysT>;
 };
 
 type TooltipRefT = {
@@ -170,18 +167,7 @@ const Wrapper: React.FunctionComponent<PropsT> = ({
   );
 };
 
-const ThemedWrapper = themed(
-  Wrapper,
-  'WithTooltip',
-  [
-    'appearance',
-    'arrow',
-    'container',
-    'content',
-    'wrapper',
-  ],
-  defaultTheme,
-);
+const ThemedWrapper = themed(Wrapper, 'WithTooltip', defaultTheme);
 
 type ExportT = typeof ThemedWrapper & {
   PLACEMENTS: typeof PLACEMENTS;
@@ -191,11 +177,4 @@ const e: ExportT = ThemedWrapper as ExportT;
 
 e.PLACEMENTS = PLACEMENTS;
 
-Wrapper.propTypes = {
-  children: PT.node,
-  placement: PT.oneOf(Object.values(PLACEMENTS)),
-  theme: ThemedWrapper.themeType.isRequired,
-  tip: PT.node,
-};
-
 export default e;

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

@@ -1,4 +1,3 @@
-import PT from 'prop-types';
 import qs from 'qs';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
@@ -8,9 +7,7 @@ import Throbber from 'components/Throbber';
 import baseTheme from './base.scss';
 import throbberTheme from './throbber.scss';
 
-const validThemeKeys = ['container', 'video'] as const;
-
-type ComponentThemeT = Theme<typeof validThemeKeys>;
+type ComponentThemeT = Theme<'container' | 'video'>;
 
 type PropsT = {
   autoplay?: boolean;
@@ -45,7 +42,7 @@ const YouTubeVideo: React.FunctionComponent<PropsT> = ({
   const queryString = srcParts[1];
   const query = queryString ? qs.parse(queryString) : {};
 
-  const videoId = query.v || url.match(/\/([a-zA-Z0-9-_]*)$/)?.[1];
+  const videoId = query.v || url?.match(/\/([a-zA-Z0-9-_]*)$/)?.[1];
   url = `https://www.youtube.com/embed/${videoId}`;
 
   delete query.v;
@@ -69,18 +66,4 @@ const YouTubeVideo: React.FunctionComponent<PropsT> = ({
   );
 };
 
-const ThemedYouTubeVideo = themed(
-  YouTubeVideo,
-  'YouTubeVideo',
-  validThemeKeys,
-  baseTheme,
-);
-
-YouTubeVideo.propTypes = {
-  autoplay: PT.bool,
-  src: PT.string.isRequired,
-  theme: ThemedYouTubeVideo.themeType.isRequired,
-  title: PT.string,
-};
-
-export default ThemedYouTubeVideo;
+export default themed(YouTubeVideo, 'YouTubeVideo', baseTheme);

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

@@ -1,4 +1,3 @@
-import PT from 'prop-types';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 
 import { BaseModal } from 'components/Modal';
@@ -9,7 +8,6 @@ import {
   type OptionT,
   type OptionsT,
   type ValueT,
-  optionsValidator,
   optionValueName,
 } from '../../common';
 
@@ -32,7 +30,7 @@ type PropsT = {
   containerStyle?: ContainerPosT;
   filter?: (item: OptionT<React.ReactNode> | ValueT) => boolean;
   optionClass: string;
-  options: OptionsT<React.ReactNode>;
+  options: Readonly<OptionsT<React.ReactNode>>;
   onCancel: () => void;
   onChange: (value: ValueT) => void;
 };
@@ -67,7 +65,7 @@ const Options = forwardRef<RefT, PropsT>(({
   const optionNodes: React.ReactNode[] = [];
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
-    if (!filter || filter(option)) {
+    if (option !== undefined && (!filter || filter(option))) {
       const [iValue, iName] = optionValueName(option);
       optionNodes.push(
         <div
@@ -116,20 +114,4 @@ const Options = forwardRef<RefT, PropsT>(({
   );
 });
 
-Options.propTypes = {
-  containerClass: PT.string.isRequired,
-
-  containerStyle: PT.shape({
-    left: PT.number.isRequired,
-    top: PT.number.isRequired,
-    width: PT.number.isRequired,
-  }),
-
-  filter: PT.func,
-  onCancel: PT.func.isRequired,
-  onChange: PT.func.isRequired,
-  optionClass: PT.string.isRequired,
-  options: optionsValidator.isRequired,
-};
-
 export default Options;

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

@@ -1,4 +1,3 @@
-import PT from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 
 import themed from '@dr.pogodin/react-themes';
@@ -7,14 +6,7 @@ import Options, { type ContainerPosT, type RefT, areEqual } from './Options';
 
 import defaultTheme from './theme.scss';
 
-import {
-  type PropsT,
-  type ValueT,
-  optionValidator,
-  optionValueName,
-  validThemeKeys,
-  valueValidator,
-} from '../common';
+import { type PropsT, type ValueT, optionValueName } from '../common';
 
 const BaseCustomDropdown: React.FunctionComponent<
 PropsT<React.ReactNode, (value: ValueT) => void>
@@ -97,7 +89,7 @@ PropsT<React.ReactNode, (value: ValueT) => void>
   let selected: React.ReactNode = <>&zwnj;</>;
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
-    if (!filter || filter(option)) {
+    if (option !== undefined && (!filter || filter(option))) {
       const [iValue, iName] = optionValueName(option);
       if (iValue === value) {
         selected = iName;
@@ -155,20 +147,4 @@ PropsT<React.ReactNode, (value: ValueT) => void>
   );
 };
 
-const ThemedCustomDropdown = themed(
-  BaseCustomDropdown,
-  'CustomDropdown',
-  validThemeKeys,
-  defaultTheme,
-);
-
-BaseCustomDropdown.propTypes = {
-  filter: PT.func,
-  label: PT.node,
-  onChange: PT.func,
-  options: PT.arrayOf(optionValidator.isRequired),
-  theme: ThemedCustomDropdown.themeType.isRequired,
-  value: valueValidator,
-};
-
-export default ThemedCustomDropdown;
+export default themed(BaseCustomDropdown, 'CustomDropdown', defaultTheme);

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

@@ -1,18 +1,10 @@
 // Implements dropdown based on the native HTML <select> element.
 
-import PT from 'prop-types';
-
 import themed from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
-import {
-  type PropsT,
-  optionValueName,
-  stringOptionsValidator,
-  validThemeKeys,
-  valueValidator,
-} from '../common';
+import { type PropsT, optionValueName } from '../common';
 
 /**
  * Implements a themeable dropdown list. Internally it is rendered with help of
@@ -48,7 +40,7 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
 
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
-    if (!filter || filter(option)) {
+    if (option !== undefined && (!filter || filter(option))) {
       const [iValue, iName] = optionValueName(option);
       isValidValue ||= iValue === value;
       optionElements.push(
@@ -92,20 +84,4 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
   );
 };
 
-const ThemedDropdown = themed(
-  Dropdown,
-  'Dropdown',
-  validThemeKeys,
-  defaultTheme,
-);
-
-Dropdown.propTypes = {
-  filter: PT.func,
-  label: PT.node,
-  onChange: PT.func,
-  options: stringOptionsValidator,
-  theme: ThemedDropdown.themeType.isRequired,
-  value: valueValidator,
-};
-
-export default ThemedDropdown;
+export default themed(Dropdown, 'Dropdown', defaultTheme);

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

@@ -1,29 +1,25 @@
-import PT from 'prop-types';
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import {
   type OptionsT,
   type ValueT,
-  optionsValidator,
   optionValueName,
-  valueValidator,
 } from '../common';
 
 import defaultTheme from './theme.scss';
 
-const validThemeKeys = [
-  'container',
-  'label',
-  'option',
-  'options',
-  'selected',
-] as const;
+type ThemeKeyT =
+  | 'container'
+  | 'label'
+  | 'option'
+  | 'options'
+  | 'selected';
 
 type PropsT = {
   label?: React.ReactNode;
   onChange?: (value: ValueT) => void;
   options?: Readonly<OptionsT<React.ReactNode>>;
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<ThemeKeyT>;
   value?: ValueT;
 };
 
@@ -38,31 +34,34 @@ const BaseSwitch: React.FunctionComponent<PropsT> = ({
 
   const optionNodes: React.ReactNode[] = [];
   for (let i = 0; i < options?.length; ++i) {
-    const [iValue, iName] = optionValueName(options[i]);
+    const option = options[i];
+    if (option !== undefined) {
+      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);
+      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}
-          onClick={onPress}
-          onKeyDown={(e) => {
-            if (onPress && e.key === 'Enter') onPress();
-          }}
-          key={iValue}
-          role="button"
-          tabIndex={0}
-        >
-          {iName}
-        </div>
-      ) : (
-        <div className={className} key={iValue}>{iName}</div>
-      ),
-    );
+      optionNodes.push(
+        onPress ? (
+          <div
+            className={className}
+            onClick={onPress}
+            onKeyDown={(e) => {
+              if (onPress && e.key === 'Enter') onPress();
+            }}
+            key={iValue}
+            role="button"
+            tabIndex={0}
+          >
+            {iName}
+          </div>
+        ) : (
+          <div className={className} key={iValue}>{iName}</div>
+        ),
+      );
+    }
   }
 
   return (
@@ -75,19 +74,4 @@ const BaseSwitch: React.FunctionComponent<PropsT> = ({
   );
 };
 
-const ThemedSwitch = themed(
-  BaseSwitch,
-  'Switch',
-  validThemeKeys,
-  defaultTheme,
-);
-
-BaseSwitch.propTypes = {
-  label: PT.node,
-  onChange: PT.func,
-  options: optionsValidator,
-  theme: ThemedSwitch.themeType.isRequired,
-  value: valueValidator,
-};
-
-export default ThemedSwitch;
+export default themed(BaseSwitch, 'Switch', defaultTheme);

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

@@ -1,37 +1,29 @@
 // The stuff common between different dropdown implementations.
 
-import PT from 'prop-types';
-
 import type { Theme } from '@dr.pogodin/react-themes';
 
-export const validThemeKeys = [
-  'active',
-  'arrow',
-  'container',
-  'dropdown',
-  'hiddenOption',
-  'label',
-  'option',
-  'select',
+type ThemeKeyT =
+  | 'active'
+  | 'arrow'
+  | 'container'
+  | 'dropdown'
+  | 'hiddenOption'
+  | 'label'
+  | 'option'
+  | 'select'
 
   // TODO: This is only valid for <CustomDropdown>, thus we need to re-factor it
   // into a separate theme spec for that component.
-  'upward',
-] as const;
+  | 'upward';
 
 export type ValueT = number | string;
 
-export const valueValidator: PT.Requireable<ValueT> = PT.oneOfType([
-  PT.number.isRequired,
-  PT.string.isRequired,
-]);
-
 export type OptionT<NameT> = {
   name?: NameT | null;
   value: ValueT;
 };
 
-export type OptionsT<NameT> = Array<OptionT<NameT> | ValueT>;
+export type OptionsT<NameT> = Readonly<Array<OptionT<NameT> | ValueT>>;
 
 export type PropsT<
   NameT,
@@ -40,35 +32,11 @@ export type PropsT<
   filter?: (item: OptionT<NameT> | ValueT) => boolean;
   label?: React.ReactNode;
   onChange?: OnChangeT;
-  options?: OptionsT<NameT>;
-  theme: Theme<typeof validThemeKeys>;
+  options?: Readonly<OptionsT<NameT>>;
+  theme: Theme<ThemeKeyT>;
   value?: ValueT;
 };
 
-export const optionValidator:
-PT.Requireable<OptionT<React.ReactNode> | ValueT> = PT.oneOfType([
-  PT.shape({
-    name: PT.node,
-    value: valueValidator.isRequired,
-  }).isRequired,
-  PT.number.isRequired,
-  PT.string.isRequired,
-]);
-
-export const optionsValidator = PT.arrayOf(optionValidator.isRequired);
-
-export const stringOptionValidator:
-PT.Requireable<OptionT<string> | ValueT> = PT.oneOfType([
-  PT.shape({
-    name: PT.string,
-    value: valueValidator.isRequired,
-  }).isRequired,
-  PT.number.isRequired,
-  PT.string.isRequired,
-]);
-
-export const stringOptionsValidator = PT.arrayOf(stringOptionValidator.isRequired);
-
 function isValue<T>(x: OptionT<T> | ValueT): x is ValueT {
   const type = typeof x;
   return type === 'number' || type === 'string';

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

@@ -5,6 +5,4 @@ export { default as Switch } from './Switch';
 export {
   type OptionT,
   type OptionsT,
-  optionValidator,
-  optionsValidator,
 } from './common';

package/src/shared/utils/globalState.ts

@@ -13,6 +13,12 @@ export type InjT = {
   ISTATE?: unknown;
 };
 
+declare global {
+  interface Window {
+    REACT_UTILS_INJECTION?: InjT;
+  }
+}
+
 export interface SsrContextT<StateT> extends SsrContext<StateT> {
   chunkGroups: ChunkGroupsT;
   chunks: string[];

package/src/shared/utils/jest/index.tsx

@@ -100,12 +100,23 @@ export function mount(scene: ReactNode): MountedSceneT {
   return res;
 }
 
-export function snapshot(element: React.ReactElement) {
+type SnapshotOptionsT = {
+  await?: Promise<void>;
+};
+
+export async function snapshot(
+  element: React.ReactElement,
+  options?: SnapshotOptionsT,
+) {
   let res: RenderResult | undefined;
-  act(() => {
+
+  const promise = act(() => {
     res = render(element);
+    return options?.await;
   });
+
   if (res === undefined) throw Error('Render failed');
+  if (options?.await) await promise;
 
   const nodes = res.asFragment().childNodes;
   expect(nodes.length > 1 ? [...nodes] : nodes[0]).toMatchSnapshot();