@dr.pogodin/react-utils 1.47.0-alpha.1 → 1.47.0-alpha.11

package/src/server/server.ts

@@ -1,332 +0,0 @@
-/**
- * Creation of standard ExpressJS server for ReactJS apps.
- */
-
-import { sep } from 'node:path';
-import { pathToFileURL } from 'node:url';
-
-import cloneDeep from 'lodash/cloneDeep';
-import mapValues from 'lodash/mapValues';
-import pick from 'lodash/pick';
-
-import compression from 'compression';
-import cookieParser from 'cookie-parser';
-import csrf from '@dr.pogodin/csurf';
-
-import express, {
-  type Express,
-  type NextFunction,
-  type RequestHandler,
-  type Request,
-  type Response,
-} from 'express';
-
-import favicon from 'serve-favicon';
-import helmet, { type HelmetOptions } from 'helmet';
-import loggerMiddleware from 'morgan';
-import requestIp from 'request-ip';
-import { v4 as uuid } from 'uuid';
-
-import type { Compiler, Configuration } from 'webpack';
-
-import rendererFactory, {
-  type LoggerI,
-  type OptionsT as RendererOptionsT,
-} from './renderer';
-
-import {
-  CODES,
-  ERRORS,
-  getErrorForCode,
-  newError,
-} from './utils/errors';
-
-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;
-}
-
-/**
- * Default Content Security Policy settings.
- * @ignore
- */
-const defaultCspSettings = {
-  directives: mapValues(
-    helmet.contentSecurityPolicy.getDefaultDirectives(),
-
-    // 'https:' options (automatic re-write of insecure URLs to secure ones)
-    // is removed to facilitate local development with HTTP server. In cloud
-    // deployments we assume Apache or Nginx server in front of out app takes
-    // care about such re-writes.
-    (array) => (array as string[]).filter((item: string) => item !== 'https:'),
-  ),
-};
-defaultCspSettings.directives['frame-src'] = [
-  "'self'",
-
-  // YouTube domain is whitelisted to allow <YouTubeVideo> component to work
-  // out of box.
-  'https://*.youtube.com',
-];
-
-{
-  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
-// in production cloud deployments.
-delete defaultCspSettings.directives['upgrade-insecure-requests'];
-
-/**
- * @category Utilities
- * @func server/getDefaultCspSettings
- * @global
- * @desc
- * ```js
- * import { server } from '@dr.pogodin/react-utils';
- * const { getDefaultCspSettings } from '@dr.pogodin/react-utils';
- * ```
- * @return {{
- *   directives: object
- * }} A deep copy of default CSP settings object used by `react-utils`,
- * with the exception of `nonce-xxx` clause in `script-src` directive,
- * which is added dynamically for each request.
- */
-export function getDefaultCspSettings(): {
-  directives: Record<string, string[]>;
-} {
-  return cloneDeep(defaultCspSettings);
-}
-
-export type ServerT = Express & {
-  logger: LoggerI;
-};
-
-export type OptionsT = RendererOptionsT & {
-  beforeExpressJsError?:
-  (server: ServerT) => boolean | Promise<boolean>;
-
-  beforeExpressJsSetup?: (server: ServerT) => Promise<void> | void;
-  cookieSignatureSecret?: string;
-  cspSettingsHook?: (
-    defaultOptions: CspOptionsT,
-    req: Request,
-  ) => CspOptionsT;
-  devMode?: boolean;
-  httpsRedirect?: boolean;
-  onExpressJsSetup?: (server: ServerT) => Promise<void> | void;
-};
-
-export default async function factory(
-  webpackConfig: Configuration,
-  options: OptionsT,
-): Promise<ServerT> {
-  const rendererOps: RendererOptionsT = pick(options, [
-    'Application',
-    'beforeRender',
-    'favicon',
-    'logger',
-    'maxSsrRounds',
-    'noCsp',
-    'ssrTimeout',
-    'staticCacheController',
-    'staticCacheSize',
-  ]);
-  const renderer = rendererFactory(webpackConfig, rendererOps);
-  const { publicPath } = webpackConfig.output!;
-
-  const server = express() as ServerT;
-
-  if (options.beforeExpressJsSetup) {
-    await options.beforeExpressJsSetup(server);
-  }
-
-  if (options.logger) server.logger = options.logger;
-
-  if (options.httpsRedirect) {
-    server.use((req, res, next) => {
-      const schema = req.headers['x-forwarded-proto'];
-      if (schema === 'http') {
-        let url = `https://${req.headers.host}`;
-        if (req.originalUrl !== '/') url += req.originalUrl;
-        res.redirect(url);
-        return;
-      }
-      next();
-    });
-  }
-
-  server.use(compression());
-  server.use(
-    helmet({
-      contentSecurityPolicy: false,
-      crossOriginEmbedderPolicy: false,
-      crossOriginOpenerPolicy: false,
-      crossOriginResourcePolicy: false,
-    }),
-  );
-
-  if (!options.noCsp) {
-    server.use(
-      (req: Request, res: Response, next: NextFunction) => {
-        const req2 = req as RequestT;
-
-        req2.nonce = uuid();
-
-        // TODO: This is deprecated, but it is kept for now for backward
-        // compatibility. Should be removed sometime later.
-        req2.cspNonce = req2.nonce;
-
-        // The deep clone is necessary here to ensure that default value can't be
-        // mutated during request processing.
-        let cspSettings: CspOptionsT = cloneDeep(defaultCspSettings);
-        (cspSettings.directives?.['script-src'] as string[]).push(`'nonce-${req2.nonce}'`);
-        if (options.cspSettingsHook) {
-          cspSettings = options.cspSettingsHook(cspSettings, req);
-        }
-        helmet.contentSecurityPolicy(cspSettings)(req, res, next);
-      },
-    );
-  }
-
-  if (options.favicon) {
-    server.use(favicon(options.favicon));
-  }
-
-  server.use('/robots.txt', (req, res) => {
-    res.send('User-agent: *\nDisallow:');
-  });
-
-  server.use(express.json({ limit: '300kb' }));
-  server.use(express.urlencoded({ extended: false }));
-  server.use(cookieParser(options.cookieSignatureSecret));
-  server.use(requestIp.mw());
-
-  server.use(csrf({ cookie: true }));
-
-  loggerMiddleware.token(
-    'ip',
-    (req: Request & { clientIp: string }) => req.clientIp,
-  );
-  const FORMAT = ':ip > :status :method :url :response-time ms :res[content-length] :referrer :user-agent';
-  server.use(loggerMiddleware(FORMAT, {
-    stream: {
-      // TODO: This implies the logger is always set. Is it on a higher level?
-      // then mark it as always present.
-      write: options.logger!.info.bind(options.logger),
-    },
-  }));
-
-  // Note: no matter the "public path", we want the service worker, if any,
-  // to be served from the root, to have all web app pages in its scope.
-  // 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 ?? '',
-    {
-      setHeaders: (res) => res.set('Cache-Control', 'no-cache'),
-    },
-  ));
-
-  /* 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 import/no-extraneous-dependencies */
-  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;
-    }
-
-    /* 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,
-      serverSideRender: true,
-    }));
-    server.use(webpackHotMiddleware(compiler));
-  }
-  /* eslint-enable import/no-extraneous-dependencies */
-
-  server.use(publicPath as string, express.static(webpackConfig.output!.path!));
-
-  if (options.onExpressJsSetup) {
-    await options.onExpressJsSetup(server);
-  }
-  server.use(renderer);
-
-  /* Detects 404 errors, and forwards them to the error handler. */
-  server.use((req, res, next) => {
-    next(newError(ERRORS.NOT_FOUND, CODES.NOT_FOUND));
-  });
-
-  let dontAttachDefaultErrorHandler;
-  if (options.beforeExpressJsError) {
-    dontAttachDefaultErrorHandler = await options.beforeExpressJsError(server);
-  }
-
-  /* Error handler. */
-  if (!dontAttachDefaultErrorHandler) {
-    // TODO: Do we need this error handler at all? It actually seems to do
-    // what the default ExpressJS error handler does anyway, see:
-    // https://expressjs.com/en/guide/error-handling.html
-    //
-    // TODO: It is better to move the default error handler definition
-    // to a stand-alone function at top-level, but the use of options.logger
-    // prevents to do it without some extra refactoring. Should be done sometime
-    // though.
-    server.use((
-      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) {
-        next(error);
-        return;
-      }
-
-      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.toString());
-
-      let message = error.message || getErrorForCode(status);
-      if (serverSide && process.env.NODE_ENV === 'production') {
-        message = ERRORS.INTERNAL_SERVER_ERROR;
-      }
-
-      res.status(status).send(message);
-    });
-  }
-
-  return server;
-}

package/src/server/utils/errors.ts

@@ -1,122 +0,0 @@
-/**
- * @category Utilities
- * @module server/errors
- * @desc
- * ```js
- * import { server } from '@dr.pogodin/react-utils';
- * const { errors } = server;
- * ```
- * Server-side helpers for error handling.
- */
-
-import {
-  StatusCodes as CODES,
-  ReasonPhrases as ERRORS,
-  getReasonPhrase as getErrorForCode,
-} from 'http-status-codes';
-
-import type { StandardSchemaV1 } from '@standard-schema/spec';
-
-/**
- * @static
- * @const CODES
- * @desc An alias for
- * [StatusCodes object from **http-status-codes** library](https://www.npmjs.com/package/http-status-codes).
- * It is a map between HTTP status code names and corresponding numeric codes.
- * @example
- * import { server } from '@dr.pogodin/react-utils';
- * const { CODES } = server.errors;
- * console.log(CODES.BAD_REQUEST); // Prints: 400
- */
-export { CODES };
-
-/**
- * @static
- * @const ERRORS
- * @desc An alias for
- * [ReasonPhrases object from **http-status-codes** library](https://www.npmjs.com/package/http-status-codes).
- * It is a map between HTTP status code names and their pretty-printed forms.
- * @example
- * import { server } from '@dr.pogodin/react-utils';
- * const { ERRORS } = server.errors;
- * console.log(ERRORS.BAD_REQUEST); // Prints: Bad Request
- */
-export { ERRORS };
-
-/**
- * @static
- * @func getErrorForCode
- * @desc An alias for
- * [getReasonPhrase() function from **http-status-codes** library](https://www.npmjs.com/package/http-status-codes).
- * Given an HTTP code it returns the corresponding error text.
- * @param {number} code HTTP code.
- * @return {string} HTTP error text.
- * @example
- * import { server } from '@dr.pogodin/react-utils';
- * console.log(server.errors.getErrorForCode(400)); // Prints: Bad Request
- */
-export { getErrorForCode };
-
-// TODO: It could accept the status code as a constructor argument.
-class ErrorWithStatus extends Error {
-  status: number = CODES.INTERNAL_SERVER_ERROR;
-}
-
-/**
- * ```js
- * import { server } from '@dr.pogodin/react-utils';
- * const { newError } = server.errors;
- * ```
- * Creates a new `Error` object with given message, and HTTP status code
- * attached as `status` field.
- * @param {string} message Error message.
- * @param {number} [statusCode=500] HTTP status code. Defaults to 500 (Internal
- * Server Error).
- * @return {Error}
- */
-export function newError(
-  message: string,
-  statusCode = CODES.INTERNAL_SERVER_ERROR,
-): ErrorWithStatus {
-  const error = new ErrorWithStatus(message);
-  error.status = statusCode;
-  return error;
-}
-
-/**
- * Throws an error with given message and HTTP status code.
- */
-export function fail(
-  message: string,
-  statusCode: CODES = CODES.INTERNAL_SERVER_ERROR,
-): Error {
-  throw newError(message, statusCode);
-}
-
-/**
- * Validates the `value` against the given "standard" validation `schema`.
- * Resolves to the correctly typed `value`, if it has passed the validation;
- * otherwise throws an error.
- * @param value The value to validate.
- * @param schema The "standard" validation schema to use.
- * @param [message] Optional error message, to prepend the validation error
- *  message.
- * @param [statusCode=400] HTTP status code. Defaults to 400 (Bad Request).
- */
-export async function assert<T extends StandardSchemaV1>(
-  value: unknown,
-  schema: T,
-  message = '',
-  statusCode = CODES.BAD_REQUEST,
-): Promise<StandardSchemaV1.InferOutput<T>> {
-  let result = schema['~standard'].validate(value);
-  if (result instanceof Promise) result = await result;
-
-  if (result.issues) {
-    let error = JSON.stringify(result.issues, null, 2);
-    if (message) error = `${message}\n\n${error}`;
-    throw fail(error, statusCode);
-  }
-
-  return result.value;
-}

package/src/server/utils/index.ts

@@ -1,3 +0,0 @@
-// Aggregates utility modules together.
-
-export * as errors from './errors';

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

@@ -1,130 +0,0 @@
-// The <Button> component implements a standard button / button-like link.
-
-import type {
-  FunctionComponent,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  PointerEventHandler,
-  ReactNode,
-} from 'react';
-
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import Link from 'components/Link';
-
-import defaultTheme from './style.scss';
-
-type PropsT = {
-  active?: boolean;
-  children?: ReactNode;
-  disabled?: boolean;
-  enforceA?: boolean;
-  onClick?: MouseEventHandler & KeyboardEventHandler;
-  onKeyDown?: KeyboardEventHandler;
-  onKeyUp?: KeyboardEventHandler;
-  onMouseDown?: MouseEventHandler;
-  onMouseUp?: MouseEventHandler;
-  onPointerDown?: PointerEventHandler;
-  onPointerUp?: PointerEventHandler;
-  openNewTab?: boolean;
-  replace?: boolean;
-  testId?: string;
-  theme: Theme<'active' | 'button' | 'disabled'>;
-  // TODO: It needs a more precise typing of the object option.
-  to?: object | string;
-};
-
-export const BaseButton: FunctionComponent<PropsT> = ({
-  active,
-  children,
-  disabled,
-  enforceA,
-  onClick,
-  onKeyDown: onKeyDownProp,
-  onKeyUp,
-  onMouseDown,
-  onMouseUp,
-  onPointerDown,
-  onPointerUp,
-  openNewTab,
-  replace,
-  testId,
-  theme,
-  to,
-}) => {
-  let className = theme.button;
-  if (active && theme.active) className += ` ${theme.active}`;
-  if (disabled) {
-    if (theme.disabled) className += ` ${theme.disabled}`;
-    return (
-      <div
-        className={className}
-        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  let onKeyDown = onKeyDownProp;
-  if (!onKeyDown && onClick) {
-    onKeyDown = (e) => {
-      if (e.key === 'Enter') onClick(e);
-    };
-  }
-
-  if (to) {
-    return (
-      <Link
-        className={className}
-        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-        enforceA={enforceA}
-        onClick={onClick}
-
-        // TODO: For now, the `onKeyDown` handler is not passed to the <Link>,
-        // as <Link> component does not call it anyway, presumably due to
-        // the inner implementation details. We should look into supporting it:
-        // https://github.com/birdofpreyru/react-utils/issues/444
-        // onKeyDown={onKeyDown}
-
-        onKeyUp={onKeyUp}
-        onMouseDown={onMouseDown}
-        onMouseUp={onMouseUp}
-        onPointerDown={onPointerDown}
-        onPointerUp={onPointerUp}
-        openNewTab={openNewTab}
-        replace={replace}
-        to={to}
-      >
-        {children}
-      </Link>
-    );
-  }
-
-  return (
-    <div
-      className={className}
-      data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      onKeyUp={onKeyUp}
-      onMouseDown={onMouseDown}
-      onMouseUp={onMouseUp}
-      onPointerDown={onPointerDown}
-      onPointerUp={onPointerUp}
-      role="button"
-      tabIndex={0}
-    >
-      {children}
-    </div>
-  );
-};
-
-/**
- * Button component theme: a map of CSS
- * class names to append to button elements:
- * @prop {string} [active] to the root element of active button.
- * @prop {string} [button] to the root element of any button.
- * @prop {string} [disabled] to the root element of disabled button.
- */
-export default themed(BaseButton, 'Button', defaultTheme);

package/src/shared/components/Button/style.scss

@@ -1,54 +0,0 @@
-/**
- * The default button theme.
- */
-
-*,
-.context,
-.ad.hoc {
-  &.button {
-    background-image: linear-gradient(to top, lightgray, white 50%, white);
-    border: solid 1px gray;
-    border-radius: 0.3em;
-    color: inherit;
-    cursor: pointer;
-    display: inline-block;
-    font: inherit;
-    margin: 0.1em;
-    padding: 0.3em 1.2em;
-    text-align: center;
-    text-decoration: none;
-    user-select: none;
-
-    &:visited {
-      color: inherit;
-    }
-
-    &.active,
-    &:active {
-      background-image: linear-gradient(to bottom, lightgray, white 50%, white);
-      box-shadow: inset 0 1px 3px 0 lightgray;
-      border-color: gray;
-    }
-
-    &:focus {
-      box-shadow: 0 0 3px 1px lightblue;
-      border-color: blue;
-      outline: none;
-    }
-  }
-
-  /* Additional styling of disabled buttons. */
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.33;
-
-    // Note: this "cancels out" the active state styling of an active button,
-    // which is defined above, thus ensuring a click on disabled button does
-    // not alter its appearance (does not result in visual press).
-    &.active,
-    &:active {
-      background-image: linear-gradient(to top, lightgray, white 50%, white);
-      box-shadow: none;
-    }
-  }
-}

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

@@ -1,53 +0,0 @@
-import themed, { type Theme } from '@dr.pogodin/react-themes';
-
-import defaultTheme from './theme.scss';
-
-type PropT<ValueT> = {
-  checked?: ValueT;
-  disabled?: boolean;
-  label?: React.ReactNode;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  testId?: string;
-  theme: Theme<
-    | 'checkbox'
-    | 'container'
-    | 'disabled'
-    | 'indeterminate'
-    | 'label'
-  >;
-};
-
-const Checkbox = <ValueT extends boolean | 'indeterminate' = boolean>({
-  checked,
-  disabled,
-  label,
-  onChange,
-  testId,
-  theme,
-}: PropT<ValueT>) => {
-  let containerClassName = theme.container;
-  if (disabled) containerClassName += ` ${theme.disabled}`;
-
-  let checkboxClassName = theme.checkbox;
-  if (checked === 'indeterminate') checkboxClassName += ` ${theme.indeterminate}`;
-
-  return (
-    <div className={containerClassName}>
-      { 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();
-        }}
-        type="checkbox"
-      />
-    </div>
-  );
-};
-
-export default themed(Checkbox, 'Checkbox', defaultTheme);