@dr.pogodin/react-utils 1.35.5 → 1.36.1

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,31 +1,23 @@
 // 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;
@@ -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/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();

package/src/shared/utils/splitComponent.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* global document */
 
-import PT from 'prop-types';
-
 import {
   type ComponentType,
   type ReactNode,
@@ -88,7 +86,7 @@ function getLoadedStyleSheets(): Set<string> {
   const res = new Set<string>();
   const { styleSheets } = document;
   for (let i = 0; i < styleSheets.length; ++i) {
-    const { href } = styleSheets[i];
+    const href = styleSheets[i]?.href;
     if (href) res.add(href);
   }
   return res;
@@ -118,11 +116,13 @@ export function bookStyleSheets(
 ): Promise<void> {
   const promises = [];
   const assets = chunkGroups[chunkName];
+  if (!assets) return Promise.resolve();
+
   const loadedSheets = getLoadedStyleSheets();
 
   for (let i = 0; i < assets.length; ++i) {
     const asset = assets[i];
-    if (asset.endsWith('.css')) {
+    if (asset?.endsWith('.css')) {
       const promise = bookStyleSheet(asset, loadedSheets, refCount);
       if (promise) promises.push(promise);
     }
@@ -145,12 +145,19 @@ export function freeStyleSheets(
   chunkGroups: ChunkGroupsT,
 ) {
   const assets = chunkGroups[chunkName];
+  if (!assets) return;
+
   for (let i = 0; i < assets.length; ++i) {
     const asset = assets[i];
-    if (asset.endsWith('.css')) {
+    if (asset?.endsWith('.css')) {
       const path = `${getPublicPath()}/${asset}`;
-      if (--refCounts[path] <= 0) {
-        document.head.querySelector(`link[href="${path}"]`)!.remove();
+
+      const pathRefCount = refCounts[path];
+      if (pathRefCount) {
+        if (pathRefCount <= 1) {
+          document.head.querySelector(`link[href="${path}"]`)!.remove();
+          delete refCounts[path];
+        } else refCounts[path] = pathRefCount - 1;
       }
     }
   }
@@ -243,9 +250,5 @@ export default function splitComponent<
     </Suspense>
   );
 
-  CodeSplit.propTypes = {
-    children: PT.node,
-  } as PT.WeakValidationMap<ComponentPropsT>;
-
   return CodeSplit;
 }

package/tsconfig.configs.json

@@ -1,18 +1,22 @@
 // TS configuration for configs pre-building from TS sources.
 
 {
-  "extends": "@tsconfig/recommended",
+  "extends": "./config/typescript/base.json",
   "include": [
     "config-ts-src",
   ],
   "compilerOptions": {
     "declaration": true,
-    "jsx": "react-jsx",
     "rootDir": "config-ts-src",
     "outDir": "config",
     "paths": {
       "*": ["./src/shared/*", "./src/*", "./*"]
     },
-    "strict": true
+
+    // TODO: Overriding the base config as configs are compiled into CommonJS
+    // modules, and this flag leads to the following error in that case, if set:
+    // ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.
+    // Perhaps, there is a better workaround?
+    "verbatimModuleSyntax": false
   }
 }

package/tsconfig.json

@@ -1,13 +1,11 @@
 // TS config for ESLint, editor plugins, and other tools that look-up and use
 // the default tsconfig.json file.
 {
-  // Note: Full relative paths, as some tools don't support Node module
-  // resolution mechanics.
-  "extends": "./node_modules/@tsconfig/recommended/tsconfig.json",
+  // Relative path, as some tools relying on this config do not support Node's
+  // module resolution mechanics.
+  "extends": "./config/typescript/base.json",
 
   "compilerOptions": {
-    "jsx": "react-jsx",
-
     // BEWARE: Different settings are likely to transform dynamic import()
     // statements in the code, thus breaking Webpack's code splitting.
     // See: https://davidea.st/articles/webpack-typescript-code-split-wont-work
@@ -18,10 +16,5 @@
       "*": ["./src/shared/*", "./src/*", "./*"]
     },
     "rootDirs": [".", "build/types-scss"],
-    "strict": true,
-
-    // This ensures TypeScript does not remove unused imports, which may cause
-    // troubles when we rely on some side-effects from imported modules.
-    "verbatimModuleSyntax": true,
   }
 }

package/tsconfig.types.json

@@ -1,7 +1,7 @@
 // TS config for ESLint, editor plugins, and other tools that look-up and use
 // the default tsconfig.json file.
 {
-  "extends": "@tsconfig/recommended",
+  "extends": "./config/typescript/base.json",
 
   // Keep these in case any mocks / tests are declared within "src" code tree.
   "exclude": [
@@ -16,7 +16,6 @@
   "compilerOptions": {
     "declaration": true,
     "emitDeclarationOnly": true,
-    "jsx": "react-jsx",
 
     // BEWARE: Different settings are likely to transform dynamic import()
     // statements in the code, thus breaking Webpack's code splitting.
@@ -42,10 +41,5 @@
       "utils/*": ["./src/shared/utils/*"],
     },
     "rootDirs": [".", "build/types-scss"],
-    "strict": true,
-
-    // This ensures TypeScript does not remove unused imports, which may cause
-    // troubles when we rely on some side-effects from imported modules.
-    "verbatimModuleSyntax": true,
   },
 }

package/tstyche.config.json

@@ -0,0 +1,6 @@
+{
+  "testFileMatch": [
+    "__tests__/**/*.ts",
+    "__tests__/**/*.tsx"
+  ]
+}