@dr.pogodin/react-utils 1.43.33 → 1.44.0

package/build/types-code/server/utils/errors.d.ts

@@ -9,7 +9,7 @@
  * Server-side helpers for error handling.
  */
 import { StatusCodes as CODES, ReasonPhrases as ERRORS, getReasonPhrase as getErrorForCode } from 'http-status-codes';
-import joi from 'joi';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
 /**
  * @static
  * @const CODES
@@ -47,20 +47,6 @@ export { ERRORS };
  * console.log(server.errors.getErrorForCode(400)); // Prints: Bad Request
  */
 export { getErrorForCode };
-/**
- * @static
- * @const joi
- * @desc An alias for [Joi library](https://joi.dev/api/?v=17.4.0),
- * which provides tooling for HTTP request validation. You can use it in any
- * way you would use that library import.
- * @example
- * import { server } from '@dr.pogodin/react-utils';
- * const { joi } = server.errors;
- * const requestBodySchema = joi.object({
- *   sampleKey: joi.string().max(16).required(),
- * });
- */
-export { joi };
 declare class ErrorWithStatus extends Error {
     status: number;
 }
@@ -94,4 +80,4 @@ export declare function fail(message: string, statusCode?: CODES): Error;
  * @param [statusCode=500] HTTP status code. Defaults to 400 (Bad
  * Request).
  */
-export declare function assert(value: unknown, schema: joi.AnySchema, message?: string, statusCode?: CODES): void;
+export declare function assert<T extends StandardSchemaV1>(value: StandardSchemaV1.InferInput<T>, schema: T, message?: string, statusCode?: CODES): Promise<StandardSchemaV1.InferOutput<T>>;

package/build/types-code/shared/components/Input/index.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
-type ThemeKeyT = 'container' | 'empty' | 'input' | 'label';
+type ThemeKeyT = 'container' | 'empty' | 'focused' | 'input' | 'label';
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: React.ReactNode;
     ref?: Ref<HTMLInputElement>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.43.33",
+  "version": "1.44.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -12,7 +12,7 @@
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.7",
     "@dr.pogodin/csurf": "^1.16.5",
     "@dr.pogodin/js-utils": "^0.1.3",
-    "@dr.pogodin/react-global-state": "^0.19.3",
+    "@dr.pogodin/react-global-state": "^0.19.4",
     "@dr.pogodin/react-helmet": "^3.0.2",
     "@dr.pogodin/react-themes": "^1.9.2",
     "@jest/environment": "^30.0.5",
@@ -27,7 +27,6 @@
     "express": "^5.1.0",
     "helmet": "^8.1.0",
     "http-status-codes": "^2.3.0",
-    "joi": "^18.0.0",
     "lodash": "^4.17.21",
     "morgan": "^1.10.1",
     "node-forge": "^1.3.1",
@@ -58,6 +57,7 @@
     "@dr.pogodin/babel-preset-svgr": "^1.9.2",
     "@dr.pogodin/eslint-configs": "^0.0.11",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
+    "@standard-schema/spec": "^1.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -72,14 +72,14 @@
     "@types/morgan": "^1.9.10",
     "@types/node-forge": "^1.3.13",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^19.1.9",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@types/request-ip": "^0.0.41",
     "@types/serialize-javascript": "^5.0.4",
     "@types/serve-favicon": "^2.5.7",
     "@types/supertest": "^6.0.3",
     "@types/webpack": "^5.28.5",
-    "@types/webpack-hot-middleware": "^2.25.9",
+    "@types/webpack-hot-middleware": "^2.25.10",
     "autoprefixer": "^10.4.21",
     "babel-jest": "^30.0.5",
     "babel-loader": "^10.0.0",
@@ -91,7 +91,7 @@
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
     "memfs": "^4.36.0",
-    "mini-css-extract-plugin": "^2.9.3",
+    "mini-css-extract-plugin": "^2.9.4",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
     "postcss": "^8.5.6",
@@ -112,7 +112,7 @@
     "tstyche": "^4.3.0",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.2",
-    "webpack": "^5.101.0",
+    "webpack": "^5.101.1",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",

package/src/server/utils/errors.ts

@@ -15,7 +15,7 @@ import {
   getReasonPhrase as getErrorForCode,
 } from 'http-status-codes';
 
-import joi from 'joi';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
 
 /**
  * @static
@@ -57,21 +57,6 @@ export { ERRORS };
  */
 export { getErrorForCode };
 
-/**
- * @static
- * @const joi
- * @desc An alias for [Joi library](https://joi.dev/api/?v=17.4.0),
- * which provides tooling for HTTP request validation. You can use it in any
- * way you would use that library import.
- * @example
- * import { server } from '@dr.pogodin/react-utils';
- * const { joi } = server.errors;
- * const requestBodySchema = joi.object({
- *   sampleKey: joi.string().max(16).required(),
- * });
- */
-export { joi };
-
 // TODO: It could accept the status code as a constructor argument.
 class ErrorWithStatus extends Error {
   status: number = CODES.INTERNAL_SERVER_ERROR;
@@ -121,14 +106,20 @@ export function fail(
  * @param [statusCode=500] HTTP status code. Defaults to 400 (Bad
  * Request).
  */
-export function assert(
-  value: unknown,
-  schema: joi.AnySchema,
+export async function assert<T extends StandardSchemaV1>(
+  value: StandardSchemaV1.InferInput<T>,
+  schema: T,
   message = '',
   statusCode = CODES.BAD_REQUEST,
-): void {
-  const { error } = schema.validate(value, { abortEarly: false });
-  if (error) {
-    fail(message.concat(message ? '\n' : '', error.message), statusCode);
+): 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/shared/components/Input/index.tsx

@@ -1,10 +1,15 @@
-import { type FunctionComponent, type Ref, useRef } from 'react';
+import {
+  type FunctionComponent,
+  type Ref,
+  useRef,
+  useState,
+} from 'react';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
-type ThemeKeyT = 'container' | 'empty' | 'input' | 'label';
+type ThemeKeyT = 'container' | 'empty' | 'focused' | 'input' | 'label';
 
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
@@ -28,9 +33,18 @@ const Input: FunctionComponent<PropsT> = ({
   theme,
   ...rest
 }) => {
+  // NOTE: As of now, it is only updated when "theme.focused" is defined,
+  // as otherwise its value is not used.
+  const [focused, setFocused] = useState(false);
+
   const localRef = useRef<HTMLInputElement>(null);
 
   let containerClassName = theme.container;
+
+  // NOTE: As of now, "focused" can be true only when "theme.focused"
+  // is provided.
+  if (focused /* && theme.focused */) containerClassName += ` ${theme.focused}`;
+
   if (!rest.value && theme.empty) containerClassName += ` ${theme.empty}`;
 
   return (
@@ -53,6 +67,15 @@ const Input: FunctionComponent<PropsT> = ({
         // TODO: Avoid the spreading later.
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...rest}
+
+        onBlur={theme.focused ? (e) => {
+          setFocused(false);
+          rest.onBlur?.(e);
+        } : rest.onBlur}
+        onFocus={theme.focused ? (e) => {
+          setFocused(true);
+          rest.onFocus?.(e);
+        } : rest.onFocus}
       />
     </span>
   );