@dr.pogodin/react-utils 1.42.0 → 1.42.1

package/src/server/server.ts

@@ -18,6 +18,7 @@ import csrf from '@dr.pogodin/csurf';
 import express, {
   type Express,
   type NextFunction,
+  type RequestHandler,
   type Request,
   type Response,
 } from 'express';
@@ -27,7 +28,8 @@ import helmet, { type HelmetOptions } from 'helmet';
 import loggerMiddleware from 'morgan';
 import requestIp from 'request-ip';
 import { v4 as uuid } from 'uuid';
-import { type Configuration } from 'webpack';
+
+import type { Compiler, Configuration } from 'webpack';
 
 import rendererFactory, {
   type LoggerI,
@@ -44,6 +46,7 @@ import {
 export type CspOptionsT =
 Exclude<HelmetOptions['contentSecurityPolicy'], boolean | undefined>;
 
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 interface RequestT extends Request {
   cspNonce: string;
   nonce: string;
@@ -98,7 +101,9 @@ delete defaultCspSettings.directives['upgrade-insecure-requests'];
  * with the exception of `nonce-xxx` clause in `script-src` directive,
  * which is added dynamically for each request.
  */
-export function getDefaultCspSettings() {
+export function getDefaultCspSettings(): {
+  directives: Record<string, string[]>;
+} {
   return cloneDeep(defaultCspSettings);
 }
 
@@ -107,7 +112,9 @@ export type ServerT = Express & {
 };
 
 export type OptionsT = RendererOptionsT & {
-  beforeExpressJsError?: (server: ServerT) => boolean | Promise<boolean | void> | void;
+  beforeExpressJsError?:
+  (server: ServerT) => boolean | Promise<boolean>;
+
   beforeExpressJsSetup?: (server: ServerT) => Promise<void> | void;
   cspSettingsHook?: (
     defaultOptions: CspOptionsT,
@@ -121,7 +128,7 @@ export type OptionsT = RendererOptionsT & {
 export default async function factory(
   webpackConfig: Configuration,
   options: OptionsT,
-) {
+): Promise<ServerT> {
   const rendererOps: RendererOptionsT = pick(options, [
     'Application',
     'beforeRender',
@@ -150,9 +157,10 @@ export default async function factory(
       if (schema === 'http') {
         let url = `https://${req.headers.host}`;
         if (req.originalUrl !== '/') url += req.originalUrl;
-        return res.redirect(url);
+        res.redirect(url);
+        return;
       }
-      return next();
+      next();
     });
   }
 
@@ -222,7 +230,7 @@ export default async function factory(
   // Thus, this setup to serve it. Probably, need some more configuration
   // for special cases, but this will do for now.
   server.get('/__service-worker.js', express.static(
-    webpackConfig.output?.path || '',
+    webpackConfig.output?.path ?? '',
     {
       setHeaders: (res) => res.set('Cache-Control', 'no-cache'),
     },
@@ -231,23 +239,31 @@ export default async function factory(
   /* Setup of Hot Module Reloading for development environment.
    * These dependencies are not used, nor installed for production use,
    * hence we should violate some import-related lint rules. */
-  /* eslint-disable global-require */
   /* eslint-disable import/no-extraneous-dependencies */
-  /* eslint-disable import/no-unresolved */
   if (options.devMode) {
     // This is a workaround for SASS bug:
     // https://github.com/dart-lang/sdk/issues/27979
     // which manifests itself sometimes when webpack dev middleware is used
     // (in dev mode), and app modules are imported in some unfortunate ways.
+    // TODO: Double-check, what is going on here.
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!global.location) {
       global.location = {
         href: `${pathToFileURL(process.cwd()).href}${sep}`,
       } as Location;
     }
 
-    const webpack = require('webpack');
-    const webpackDevMiddleware = require('webpack-dev-middleware');
-    const webpackHotMiddleware = require('webpack-hot-middleware');
+    /* eslint-disable @typescript-eslint/no-require-imports */
+    const webpack = require('webpack') as (ops: Configuration) => Compiler;
+
+    // TODO: Figure out the exact type for options, don't wanna waste time on it
+    // right now.
+    const webpackDevMiddleware = require('webpack-dev-middleware') as
+      (c: Compiler, ops: unknown) => RequestHandler;
+
+    const webpackHotMiddleware = require('webpack-hot-middleware') as
+      (c: Compiler) => RequestHandler;
+
     const compiler = webpack(webpackConfig);
     server.use(webpackDevMiddleware(compiler, {
       publicPath,
@@ -255,9 +271,7 @@ export default async function factory(
     }));
     server.use(webpackHotMiddleware(compiler));
   }
-  /* eslint-enable global-require */
   /* eslint-enable import/no-extraneous-dependencies */
-  /* eslint-enable import/no-unresolved */
 
   server.use(publicPath as string, express.static(webpackConfig.output!.path!));
 
@@ -287,20 +301,25 @@ export default async function factory(
     // prevents to do it without some extra refactoring. Should be done sometime
     // though.
     server.use((
-      error: any,
+      error: Error & {
+        status?: number;
+      },
       req: Request,
       res: Response,
       next: NextFunction,
     ) => {
       // TODO: This is needed to correctly handled any errors thrown after
       // sending initial response to the client.
-      if (res.headersSent) return next(error);
+      if (res.headersSent) {
+        next(error);
+        return;
+      }
 
-      const status = error.status || CODES.INTERNAL_SERVER_ERROR;
-      const serverSide = status >= CODES.INTERNAL_SERVER_ERROR;
+      const status = error.status ?? CODES.INTERNAL_SERVER_ERROR;
+      const serverSide = status >= (CODES.INTERNAL_SERVER_ERROR as number);
 
       // Log server-side errors always, client-side at debug level only.
-      options.logger!.log(serverSide ? 'error' : 'debug', error);
+      options.logger!.log(serverSide ? 'error' : 'debug', error.toString());
 
       let message = error.message || getErrorForCode(status);
       if (serverSide && process.env.NODE_ENV === 'production') {
@@ -308,7 +327,6 @@ export default async function factory(
       }
 
       res.status(status).send(message);
-      return undefined;
     });
   }
 

package/src/server/utils/errors.ts

@@ -89,7 +89,10 @@ class ErrorWithStatus extends Error {
  * Server Error).
  * @return {Error}
  */
-export function newError(message: string, statusCode = CODES.INTERNAL_SERVER_ERROR) {
+export function newError(
+  message: string,
+  statusCode = CODES.INTERNAL_SERVER_ERROR,
+): ErrorWithStatus {
   const error = new ErrorWithStatus(message);
   error.status = statusCode;
   return error;
@@ -119,11 +122,11 @@ export function fail(
  * Request).
  */
 export function assert(
-  value: any,
+  value: unknown,
   schema: joi.AnySchema,
   message = '',
   statusCode = CODES.BAD_REQUEST,
-) {
+): void {
   const { error } = schema.validate(value, { abortEarly: false });
   if (error) {
     fail(message.concat(message ? '\n' : '', error.message), statusCode);

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

@@ -1,6 +1,6 @@
 // The <Button> component implements a standard button / button-like link.
 
-import type { PointerEventHandler, ReactNode } from 'react';
+import type { FunctionComponent, PointerEventHandler, ReactNode } from 'react';
 
 import Link from 'components/Link';
 
@@ -24,8 +24,7 @@ type PropsT = {
   to?: object | string;
 };
 
-/* eslint-disable react/function-component-definition */
-export const BaseButton: React.FunctionComponent<PropsT> = ({
+export const BaseButton: FunctionComponent<PropsT> = ({
   active,
   children,
   disabled,
@@ -75,9 +74,9 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
       className={className}
       data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
       onClick={onClick}
-      onKeyDown={onClick && ((e) => {
+      onKeyDown={onClick ? (e) => {
         if (e.key === 'Enter') onClick(e);
-      })}
+      } : undefined}
       onMouseDown={onMouseDown}
       onPointerDown={onPointerDown}
       role="button"

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

@@ -9,11 +9,11 @@ type PropT<ValueT> = {
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   testId?: string;
   theme: Theme<
-  | 'checkbox'
-  | 'container'
-  | 'disabled'
-  | 'indeterminate'
-  | 'label'
+    | 'checkbox'
+    | 'container'
+    | 'disabled'
+    | 'indeterminate'
+    | 'label'
   >;
 };
 
@@ -33,14 +33,17 @@ const Checkbox = <ValueT extends boolean | 'indeterminate' = boolean>({
 
   return (
     <div className={containerClassName}>
-      { label === undefined ? null : <div className={theme.label}>{label}</div> }
+      { label === undefined
+        ? null : <div className={theme.label}>{label}</div> }
       <input
         checked={checked === undefined ? undefined : checked === true}
         className={checkboxClassName}
         data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
         disabled={disabled}
         onChange={onChange}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
         type="checkbox"
       />
     </div>

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

@@ -87,7 +87,8 @@ const GenericLink = ({
    * - 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):)/)) {
+  if (disabled || enforceA || openNewTab
+    || (to as string).match(/^(#|(https?|mailto):)/)) {
     return (
       <a
         className={className}
@@ -96,8 +97,12 @@ const GenericLink = ({
         // styled as a link.
         // disabled={disabled}
         href={to as string}
-        onClick={disabled ? (e) => e.preventDefault() : onClick}
-        onMouseDown={disabled ? (e) => e.preventDefault() : onMouseDown}
+        onClick={disabled ? (e) => {
+          e.preventDefault();
+        } : onClick}
+        onMouseDown={disabled ? (e) => {
+          e.preventDefault();
+        } : onMouseDown}
         rel="noopener noreferrer"
         styleName="link"
         target={openNewTab ? '_blank' : ''}
@@ -114,9 +119,6 @@ const GenericLink = ({
       className={className}
       discover="none"
       // disabled
-      onMouseDown={onMouseDown}
-      replace={replace}
-      to={to!}
       onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
         // Executes the user-provided event handler, if any.
         if (onClick) onClick(e);
@@ -124,7 +126,12 @@ const GenericLink = ({
         // By default, clicking the link scrolls the page to beginning.
         if (!keepScrollPosition) window.scroll(0, 0);
       }}
-      {...rest} // eslint-disable-line react/jsx-props-no-spreading
+      onMouseDown={onMouseDown}
+      replace={replace}
+      to={to}
+      // TODO: Refactor it later.
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...rest}
     >
       {children}
     </L>

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

@@ -37,7 +37,10 @@ const Input: FunctionComponent<PropsT> = ({
       className={theme.input}
       data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
       ref={ref}
-      {...rest} // eslint-disable-line react/jsx-props-no-spreading
+
+      // TODO: Avoid the spreading later.
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...rest}
     />
   </span>
 );

package/src/shared/components/Link.tsx

@@ -12,10 +12,14 @@ import GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';
 
 type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & LinkProps;
 
-const Link: React.FunctionComponent<PropsT> = (props) => (
-  /* eslint-disable react/jsx-props-no-spreading */
-  <GenericLink {...props} routerLinkType={RrLink} />
-  /* eslint-enable react/jsx-props-no-spreading */
-);
+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/MetaTags.tsx

@@ -1,3 +1,5 @@
+// TODO: Move this component to React Helmet library.
+
 import {
   type Context as ContextT,
   type FunctionComponent,
@@ -46,8 +48,12 @@ const MetaTags: FunctionComponent<PropsT> & {
   title,
   url,
 }) => {
+  // NOTE: I guess, in this very case, we should prefer title and description
+  // also to empty social title and decscription?
+  /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
   const socTitle = socialTitle || title;
   const socDesc = socialDescription || description;
+  /* eslint-enable @typescript-eslint/prefer-nullish-coalescing */
 
   const context = useMemo(() => ({
     description,
@@ -74,8 +80,8 @@ const MetaTags: FunctionComponent<PropsT> & {
       extra.push(
         <meta
           content={content}
-          name={name}
           key={`extra-meta-tag-${i}`}
+          name={name}
         />,
       );
     }
@@ -88,28 +94,28 @@ const MetaTags: FunctionComponent<PropsT> & {
         <title>
           {title}
         </title>
-        <meta name="description" content={description} />
+        <meta content={description} name="description" />
 
         {/* Twitter cards. */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={socTitle} />
-        <meta name="twitter:description" content={socDesc} />
-        { image ? <meta name="twitter:image" content={image} /> : null }
+        <meta content="summary_large_image" name="twitter:card" />
+        <meta content={socTitle} name="twitter:title" />
+        <meta content={socDesc} name="twitter:description" />
+        { image ? <meta content={image} name="twitter:image" /> : null }
         {
-          siteName ? (
-            <meta name="twitter:site" content={`@${siteName}`} />
-          ) : null
+          siteName
+            ? <meta content={`@${siteName}`} name="twitter:site" />
+            : null
         }
 
         {/* Open Graph data. */}
-        <meta name="og:title" content={socTitle} />
-        { image ? <meta name="og:image" content={image} /> : null }
-        { image ? <meta name="og:image:alt" content={socTitle} /> : null }
-        <meta name="og:description" content={socDesc} />
+        <meta content={socTitle} name="og:title" />
+        { image ? <meta content={image} name="og:image" /> : null }
+        { image ? <meta content={socTitle} name="og:image:alt" /> : null }
+        <meta content={socDesc} name="og:description" />
         {
-          siteName ? (<meta name="og:sitename" content={siteName} />) : null
+          siteName ? <meta content={siteName} name="og:sitename" /> : null
         }
-        { url ? (<meta name="og:url" content={url} />) : null }
+        { url ? <meta content={url} name="og:url" /> : null }
         {extra}
       </Helmet>
       {

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

@@ -94,13 +94,14 @@ const BaseModal: FunctionComponent<PropsT> = ({
   const focusLast = useMemo(() => (
     <div
       onFocus={() => {
-        const elems = containerRef.current?.querySelectorAll('*') as NodeListOf<HTMLElement>;
+        const elems = containerRef.current!.querySelectorAll('*');
         for (let i = elems.length - 1; i >= 0; --i) {
-          elems[i]?.focus();
+          (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}
     />
@@ -149,30 +150,30 @@ const BaseModal: FunctionComponent<PropsT> = ({
           // (because visually and logically the modal dialog does not belong
           // to its parent container, where it technically belongs from
           // the HTML mark-up perpective).
-          /* eslint-disable jsx-a11y/click-events-have-key-events,
-             jsx-a11y/no-noninteractive-element-interactions */
         }
-        <div
+        <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()}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          onWheel={(event) => {
+            event.stopPropagation();
+          }}
           ref={containerRef}
           role="dialog"
           style={style ?? containerStyle}
         >
           {children}
         </div>
-        {/* eslint-enable jsx-a11y/click-events-have-key-events,
-            jsx-a11y/no-noninteractive-element-interactions */}
         <div
           onFocus={() => {
             overlayRef.current?.focus();
           }}
-          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+          // TODO: Have a look at this later.
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
           tabIndex={0}
-          /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
         />
         {focusLast}
       </>

package/src/shared/components/NavLink.tsx

@@ -4,10 +4,15 @@ import GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';
 
 type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & NavLinkProps;
 
-const NavLink: React.FunctionComponent<PropsT> = (props) => (
-  /* eslint-disable react/jsx-props-no-spreading */
-  <GenericLink {...props} routerLinkType={RrNavLink} />
-  /* eslint-enable react/jsx-props-no-spreading */
-);
+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/TextArea/index.tsx

@@ -1,5 +1,8 @@
 import {
+  type ChangeEventHandler,
   type FocusEventHandler,
+  type FunctionComponent,
+  type KeyboardEventHandler,
   useEffect,
   useRef,
   useState,
@@ -17,14 +20,14 @@ type ThemeKeyT =
 type Props = {
   disabled?: boolean;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
   placeholder?: string;
   theme: Theme<ThemeKeyT>;
   value?: string;
 };
 
-const TextArea: React.FunctionComponent<Props> = ({
+const TextArea: FunctionComponent<Props> = ({
   disabled,
   onBlur,
   onChange,
@@ -36,7 +39,7 @@ const TextArea: React.FunctionComponent<Props> = ({
   const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 
-  const [localValue, setLocalValue] = useState(value || '');
+  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.
@@ -64,27 +67,32 @@ const TextArea: React.FunctionComponent<Props> = ({
   return (
     <div className={theme.container}>
       <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}
-        className={`${theme.textarea} ${theme.hidden}`}
         value={localValue}
       />
       <textarea
+        className={theme.textarea}
         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}
+        onChange={
+          value === undefined
+            ? (e) => {
+              setLocalValue(e.target.value);
+            } : onChange
+        }
         onKeyDown={onKeyDown}
         placeholder={placeholder}
         style={{ height }}
-        className={theme.textarea}
         value={localValue}
       />
     </div>