@dr.pogodin/react-utils 1.35.3 → 1.36.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.35.3",
+  "version": "1.36.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,12 +8,12 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.1",
+    "@babel/runtime": "^7.24.7",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.2",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.12",
     "@dr.pogodin/react-global-state": "^0.14.2",
-    "@dr.pogodin/react-themes": "^1.6.2",
+    "@dr.pogodin/react-themes": "^1.7.0",
     "@jest/environment": "^29.7.0",
     "axios": "^1.7.2",
     "commander": "^12.1.0",
@@ -26,11 +26,10 @@
     "express": "^4.19.2",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
-    "joi": "^17.13.1",
+    "joi": "^17.13.3",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
-    "prop-types": "^15.8.1",
     "qs": "^6.12.1",
     "raf": "^3.4.1",
     "react": "^18.3.1",
@@ -42,20 +41,20 @@
     "serialize-javascript": "^6.0.2",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
-    "uuid": "^9.0.1",
+    "uuid": "^10.0.0",
     "winston": "^3.13.0"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.24.6",
-    "@babel/core": "^7.24.6",
-    "@babel/eslint-parser": "^7.24.6",
-    "@babel/eslint-plugin": "^7.24.6",
-    "@babel/node": "^7.24.6",
-    "@babel/plugin-transform-runtime": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
+    "@babel/cli": "^7.24.7",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/eslint-plugin": "^7.24.7",
+    "@babel/node": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
@@ -71,7 +70,7 @@
     "@types/csurf": "^1.11.5",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.4",
+    "@types/lodash": "^4.17.5",
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
@@ -82,7 +81,7 @@
     "@types/serialize-javascript": "^5.0.4",
     "@types/serve-favicon": "^2.5.7",
     "@types/supertest": "^6.0.2",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
     "@types/webpack": "^5.28.5",
     "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
@@ -96,14 +95,14 @@
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.5.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "memfs": "^4.9.2",
+    "memfs": "^4.9.3",
     "mini-css-extract-plugin": "^2.9.0",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
@@ -114,17 +113,18 @@
     "react-refresh": "^0.14.2",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.77.4",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "sitemap": "^8.0.0",
     "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "supertest": "^7.0.0",
     "tsc-alias": "^1.8.10",
+    "tstyche": "^2.0.0",
     "typed-scss-modules": "^8.0.1",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^7.12.0",
-    "webpack": "^5.91.0",
+    "typescript": "^5.5.2",
+    "typescript-eslint": "^7.13.1",
+    "webpack": "^5.92.1",
     "webpack-dev-middleware": "^7.2.1",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^5.10.0",
@@ -200,7 +200,8 @@
     "jest:2": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=2/4",
     "jest:3": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=3/4",
     "jest:4": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=4/4",
-    "jest": "npm run jest:1 && npm run jest:2 && npm run jest:3 && npm run jest:4",
+    "jest:types": "tstyche",
+    "jest": "npm run jest:types && npm run jest:1 && npm run jest:2 && npm run jest:3 && npm run jest:4",
     "lint": "npm run lint:code && npm run lint:scss",
     "lint:code": "eslint --ext .js,.jsx,.ts,.tsx .",
     "lint:scss": "stylelint -- **/*.{css,scss}",

package/src/client/getInj.ts

@@ -31,6 +31,9 @@ if (metaElement) {
 
   data = forge.util.decodeUtf8(d.output.data);
   inj = eval(`(${data})`); // eslint-disable-line no-eval
+} 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,
@@ -41,12 +44,3 @@ if (metaElement) {
 export default function getInj(): InjT {
   return inj;
 }
-
-/**
- * Allows to set a custom injection object instance,
- * for server-less scenarios, for example, where it is not auto-injected
- * into generated pages from the server side.
- */
-export function setInj(value: InjT) {
-  inj = value;
-}

package/src/client/index.tsx

@@ -8,15 +8,13 @@ import { GlobalStateProvider } from '@dr.pogodin/react-global-state';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
-import getInj, { setInj } from './getInj';
+import getInj from './getInj';
 
 type OptionsT = {
   dontHydrate?: boolean;
   initialState?: any;
 };
 
-export { setInj };
-
 /**
  * Prepares and launches the app at client side.
  * @param Application Root application component

package/src/index.ts

@@ -6,18 +6,9 @@ import type ServerT from './server';
 
 const server = webpack.requireWeak('./server', __dirname) as (typeof ServerT) | null;
 
-// TODO: Should be done in a cleaner way, but technically it is fine
-// for this scenario.
-// eslint-disable-next-line import/no-mutable-exports
-let client = server ? undefined : require('./client');
-
-if (client) {
-  client.default.setInj = client.setInj;
-  client = client.default;
-}
+const client = server ? undefined : require('./client').default;
 
 export { default as api } from 'axios';
-export * as PT from 'prop-types';
 
 export {
   type AsyncCollectionLoaderT,

package/src/server/Cache.ts

@@ -1,25 +1,21 @@
+type CachedItemT<DatumT> = {
+  data: DatumT;
+  size: number;
+  timestamp: number;
+};
+
 /**
  * Implements the static cache.
  */
 export default class Cache<DatumT> {
-  private: {
-    items: {
-      [key: string]: {
-        data: DatumT;
-        size: number;
-        timestamp: number;
-      }
-    };
-    maxSize: number;
-    size: number;
-  };
+  private items: Record<string, CachedItemT<DatumT>> = {};
+
+  private maxSize: number;
+
+  private size = 0;
 
   constructor(maxSize: number) {
-    this.private = {
-      items: {},
-      maxSize,
-      size: 0,
-    };
+    this.maxSize = maxSize;
   }
 
   /**
@@ -37,7 +33,7 @@ export default class Cache<DatumT> {
     key: string;
     maxage?: number;
   }): DatumT | null {
-    const item = this.private.items[key];
+    const item = this.items[key];
     return item && Date.now() - item.timestamp < maxage ? item.data : null;
   }
 
@@ -49,19 +45,24 @@ export default class Cache<DatumT> {
    * @param size Byte size of the item.
    */
   add(data: DatumT, key: string, size: number) {
-    const p = this.private;
-    const old = p.items[key];
-    if (old) p.size -= old.size;
-    p.items[key] = { data, size, timestamp: Date.now() };
-    p.size += size;
-    if (p.size > p.maxSize) {
-      const items = Object.entries(p.items);
-      items.sort((a, b) => a[1].timestamp - b[1].timestamp);
-      for (let i = 0; i < items.length; ++i) {
-        const [itemKey, item] = items[i];
-        delete p.items[itemKey];
-        p.size -= item.size;
-        if (p.size < p.maxSize / 2) break;
+    const cached = this.items[key];
+    if (cached) this.size -= cached.size;
+
+    this.items[key] = { data, size, timestamp: Date.now() };
+    this.size += size;
+
+    if (this.size > this.maxSize) {
+      const entries = Object.entries(this.items);
+      entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
+
+      for (let i = 0; i < entries.length; ++i) {
+        const entry = entries[i];
+        if (entry) {
+          const [itemKey, item] = entry;
+          delete this.items[itemKey];
+          this.size -= item.size;
+          if (this.size < this.maxSize / 2) break;
+        }
       }
     }
   }

package/src/server/renderer.tsx

@@ -159,10 +159,13 @@ export function isBrotliAcceptable(req: Request) {
   if (acceptable) {
     const ops = acceptable.split(',');
     for (let i = 0; i < ops.length; ++i) {
-      const [type, priority] = ops[i].trim().split(';q=');
-      if ((type === '*' || type === 'br')
-      && (!priority || parseFloat(priority) > 0)) {
-        return true;
+      const op = ops[i];
+      if (op) {
+        const [type, priority] = op.trim().split(';q=');
+        if ((type === '*' || type === 'br')
+        && (!priority || parseFloat(priority) > 0)) {
+          return true;
+        }
       }
     }
   }
@@ -193,7 +196,7 @@ function groupExtraScripts(scripts: Array<string | ScriptT> = []) {
     const script = scripts[i];
     if (isString(script)) {
       if (script) res[SCRIPT_LOCATIONS.DEFAULT] += script;
-    } else if (script.code) {
+    } else if (script?.code) {
       if (res[script.location] !== undefined) {
         res[script.location] += script.code;
       } else throw Error(`Invalid location "${script.location}"`);

package/src/server/server.ts

@@ -71,7 +71,12 @@ defaultCspSettings.directives['frame-src'] = [
   // out of box.
   'https://*.youtube.com',
 ];
-defaultCspSettings.directives['script-src'].push("'unsafe-eval'");
+
+{
+  const directives = defaultCspSettings.directives['script-src'];
+  if (directives) directives.push("'unsafe-eval'");
+  else defaultCspSettings.directives['script-src'] = ["'unsafe-eval'"];
+}
 
 // No need for automatic re-writes via Content Security Policy settings:
 // the forefront Apache or Nginx server is supposed to take care of this

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

@@ -1,6 +1,5 @@
 // The <Button> component implements a standard button / button-like link.
 
-import PT from 'prop-types';
 import { type ReactNode } from 'react';
 
 import Link from 'components/Link';
@@ -9,8 +8,6 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './style.scss';
 
-const validThemeKeys = ['active', 'button', 'disabled'] as const;
-
 type PropsT = {
   active?: boolean;
   children?: ReactNode;
@@ -20,7 +17,7 @@ type PropsT = {
   onMouseDown?: React.MouseEventHandler;
   openNewTab?: boolean;
   replace?: boolean;
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<'active' | 'button' | 'disabled'>;
   // TODO: It needs a more precise typing of the object option.
   to?: object | string;
 };
@@ -87,19 +84,4 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
  * @prop {string} [button] to the root element of any button.
  * @prop {string} [disabled] to the root element of disabled button.
  */
-const ThemedButton = themed(BaseButton, 'Button', validThemeKeys, defaultTheme);
-
-BaseButton.propTypes = {
-  active: PT.bool,
-  children: PT.node,
-  disabled: PT.bool,
-  enforceA: PT.bool,
-  onClick: PT.func,
-  onMouseDown: PT.func,
-  openNewTab: PT.bool,
-  replace: PT.bool,
-  theme: ThemedButton.themeType.isRequired,
-  to: PT.oneOfType([PT.object, PT.string]),
-};
-
-export default ThemedButton;
+export default themed(BaseButton, 'Button', defaultTheme);

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

@@ -1,16 +1,12 @@
-import PT from 'prop-types';
-
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
-const validThemeKeys = ['checkbox', 'container', 'label'] as const;
-
 type PropT = {
   checked?: boolean;
   label?: React.ReactNode;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<'checkbox' | 'container' | 'label'>;
 };
 
 const Checkbox: React.FunctionComponent<PropT> = ({
@@ -31,35 +27,4 @@ const Checkbox: React.FunctionComponent<PropT> = ({
   </div>
 );
 
-/**
- * Checkbox component theme: a map of
- * CSS classes to append to its elements:
- * @prop [checkbox] to the underlying checkbox `<input>` element.
- * @prop [container] to the root checkbox element.
- * @prop [label] to the checkbox label element.
- */
-const ThemedCheckbox = themed(
-  Checkbox,
-  'Checkbox',
-  validThemeKeys,
-  defaultTheme,
-);
-
-/**
- * The `<Checkbox>` component implements themeable checkboxes.
- * @param [props] Component properties.
- * @param [props.checked] Checkbox value.
- * @param [props.label] Checkbox label.
- * @param [props.onChange] State change handler.
- * @param [props.theme] _Ad hoc_ theme.
- * @param [props....]
- * [Other properties of themeable components](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties).
- */
-Checkbox.propTypes = {
-  checked: PT.bool,
-  label: PT.node,
-  onChange: PT.func,
-  theme: ThemedCheckbox.themeType.isRequired,
-};
-
-export default ThemedCheckbox;
+export default themed(Checkbox, 'Checkbox', defaultTheme);

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

@@ -1,6 +1,5 @@
 /* global window */
 
-import PT from 'prop-types';
 import { type ReactNode } from 'react';
 
 import { type Link, type NavLink } from 'react-router-dom';
@@ -127,18 +126,4 @@ const GenericLink: React.FunctionComponent<PropsT> = ({
   );
 };
 
-GenericLink.propTypes = {
-  children: PT.node,
-  className: PT.string,
-  disabled: PT.bool,
-  enforceA: PT.bool,
-  keepScrollPosition: PT.bool,
-  onClick: PT.func,
-  onMouseDown: PT.func,
-  openNewTab: PT.bool,
-  replace: PT.bool,
-  routerLinkType: PT.elementType.isRequired,
-  to: PT.oneOfType([PT.object, PT.string]),
-};
-
 export default GenericLink;

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

@@ -1,19 +1,17 @@
-import PT from 'prop-types';
 import { forwardRef } from 'react';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
-const validThemeKeys = [
-  'container',
-  'input',
-  'label',
-] as const;
+type ThemeKeyT =
+  | 'container'
+  | 'input'
+  | 'label';
 
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<ThemeKeyT>;
 };
 
 /**
@@ -43,11 +41,4 @@ const Input = forwardRef<HTMLInputElement, PropsT>((
   </span>
 ));
 
-const ThemedInput = themed(Input, 'Input', validThemeKeys, defaultTheme);
-
-Input.propTypes = {
-  label: PT.node,
-  theme: ThemedInput.themeType.isRequired,
-};
-
-export default ThemedInput;
+export default themed(Input, 'Input', defaultTheme);

package/src/shared/components/MetaTags.tsx

@@ -1,4 +1,3 @@
-import PT from 'prop-types';
 import { type ReactNode, createContext, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
 
@@ -147,15 +146,4 @@ const MetaTags: React.FunctionComponent<PropsT> & {
 
 MetaTags.Context = Context;
 
-MetaTags.propTypes = {
-  children: PT.node,
-  description: PT.string.isRequired,
-  image: PT.string,
-  siteName: PT.string,
-  socialDescription: PT.string,
-  socialTitle: PT.string,
-  title: PT.string.isRequired,
-  url: PT.string,
-};
-
 export default MetaTags;

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

@@ -9,21 +9,18 @@ import {
 } from 'react';
 
 import ReactDom from 'react-dom';
-import PT from 'prop-types';
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import baseTheme from './base-theme.scss';
 import S from './styles.scss';
 
-const validThemeKeys = ['container', 'overlay'] as const;
-
 type PropsT = {
   cancelOnScrolling?: boolean;
   children?: ReactNode;
   containerStyle?: React.CSSProperties;
   dontDisableScrolling?: boolean;
   onCancel?: () => void;
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<'container' | 'overlay'>;
 };
 
 /**
@@ -89,7 +86,7 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
       onFocus={() => {
         const elems = containerRef.current?.querySelectorAll('*') as NodeListOf<HTMLElement>;
         for (let i = elems.length - 1; i >= 0; --i) {
-          elems[i].focus();
+          elems[i]?.focus();
           if (document.activeElement === elems[i]) return;
         }
         overlayRef.current?.focus();
@@ -169,23 +166,7 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
   ) : null;
 };
 
-const ThemedModal = themed(
-  BaseModal,
-  'Modal',
-  validThemeKeys,
-  baseTheme,
-);
-
-BaseModal.propTypes = {
-  cancelOnScrolling: PT.bool,
-  children: PT.node,
-  containerStyle: PT.shape({}),
-  dontDisableScrolling: PT.bool,
-  onCancel: PT.func,
-  theme: ThemedModal.themeType.isRequired,
-};
-
-export default ThemedModal;
+export default themed(BaseModal, 'Modal', baseTheme);
 
 /* Non-themed version of the Modal. */
 export { BaseModal };

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

@@ -1,23 +1,21 @@
-import PT from 'prop-types';
 import type { ReactNode } from 'react';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import baseTheme from './base-theme.scss';
 
-const validThemeKeys = [
-  'container',
-  'leftSidePanel',
-  'mainPanel',
-  'rightSidePanel',
-  'sidePanel',
-] as const;
+type ThemeKeyT =
+  | 'container'
+  | 'leftSidePanel'
+  | 'mainPanel'
+  | 'rightSidePanel'
+  | 'sidePanel';
 
 type PropsT = {
   children?: ReactNode;
   leftSidePanelContent?: ReactNode;
   rightSidePanelContent?: ReactNode;
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<ThemeKeyT>;
 };
 
 /**
@@ -54,18 +52,4 @@ const PageLayout: React.FunctionComponent<PropsT> = ({
   </div>
 );
 
-const ThemedPageLayout = themed(
-  PageLayout,
-  'PageLayout',
-  validThemeKeys,
-  baseTheme,
-);
-
-PageLayout.propTypes = {
-  children: PT.node,
-  leftSidePanelContent: PT.node,
-  rightSidePanelContent: PT.node,
-  theme: ThemedPageLayout.themeType.isRequired,
-};
-
-export default ThemedPageLayout;
+export default themed(PageLayout, 'PageLayout', baseTheme);

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

@@ -1,22 +1,20 @@
 import { useEffect, useRef, useState } from 'react';
-import PT from 'prop-types';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './style.scss';
 
-const validThemeKeys = [
-  'container',
-  'hidden',
-  'textarea',
-] as const;
+type ThemeKeyT =
+  | 'container'
+  | 'hidden'
+  | 'textarea';
 
 type Props = {
   disabled?: boolean;
   onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
   placeholder?: string;
-  theme: Theme<typeof validThemeKeys>;
+  theme: Theme<ThemeKeyT>;
   value?: string;
 };
 
@@ -85,20 +83,4 @@ const TextArea: React.FunctionComponent<Props> = ({
   );
 };
 
-const ThemedTextArea = themed(
-  TextArea,
-  'TextArea',
-  validThemeKeys,
-  defaultTheme,
-);
-
-TextArea.propTypes = {
-  disabled: PT.bool,
-  onChange: PT.func,
-  onKeyDown: PT.func,
-  placeholder: PT.string,
-  theme: ThemedTextArea.themeType.isRequired,
-  value: PT.string,
-};
-
-export default ThemedTextArea;
+export default themed(TextArea, 'TextArea', defaultTheme);