chore: update to React 19 (#332)

Author: NasgulNexus

package-lock.json

@@ -54,8 +54,8 @@
  "devDependencies": {
  "@babel/preset-env": "^7.20.2",
  "@babel/preset-typescript": "^7.18.6",
- "@commitlint/cli": "^17.0.0",
- "@commitlint/config-conventional": "^17.0.0",
+ "@commitlint/cli": "^20.1.0",
+ "@commitlint/config-conventional": "^20.0.0",
  "@gravity-ui/eslint-config": "^3.3.0",
  "@gravity-ui/prettier-config": "^1.1.0",
  "@gravity-ui/stylelint-config": "^4.0.1",
@@ -75,8 +75,8 @@
  "@testing-library/user-event": "^14.4.3",
  "@types/jest": "^29.5.0",
  "@types/lodash": "^4.14.180",
- "@types/react": "^18.0.28",
- "@types/react-dom": "^18.0.11",
+ "@types/react": "^19.0.0",
+ "@types/react-dom": "^19.0.0",
  "@types/react-is": "^17.0.3",
  "@types/uuid": "^9.0.4",
  "@vitejs/plugin-react": "^4.2.0",
@@ -99,10 +99,10 @@
  "postcss": "^8.4.19",
  "prettier": "^3.0.3",
  "randexp": "^0.5.3",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0",
  "react-final-form": "^6.5.3",
- "react-is": "^18.2.0",
+ "react-is": "^19.2.0",
  "react-monaco-editor": "^0.46.0",
  "rimraf": "5.0.5",
  "sass": "^1.57.1",
@@ -112,16 +112,16 @@
  "stylelint": "^15.10.3",
  "stylelint-scss": "^5.1.0",
  "ts-jest": "^29.0.5",
- "typescript": "^4.9.5",
+ "typescript": "^5.8.4",
  "uuid": "^9.0.1"
  },
  "peerDependencies": {
  "@gravity-ui/uikit": "^7.0.0",
  "final-form": "^4.20.2",
- "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
- "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-final-form": "^6.5.3",
- "react-is": "^16.0.0 || ^17.0.0 || ^18.0.0"
+ "react-is": "^17.0.0 || ^18.0.0 || ^19.0.0"
  },
  "nano-staged": {
  "*.{scss}": [

package.json

@@ -4,7 +4,7 @@ import noop from 'lodash/noop';
 import {Form} from 'react-final-form';
 
 import {DynamicField} from '../../src/lib/core/components/Form/DynamicField';
-import {Spec} from '../../src/lib/core/types/specs';
+import type {Spec} from '../../src/lib/core/types/specs';
 import {dynamicConfig} from '../../src/lib/kit/constants/config';
 
 export const DynamicForm = ({spec}: {spec: Spec}) => {

playwright/core/DynamicForm.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import {DynamicView as DynamicViewBase} from '../../src/lib/core/components/View/DynamicView';
-import {Spec} from '../../src/lib/core/types/specs';
-import {FormValue} from '../../src/lib/core/types/value';
+import type {Spec} from '../../src/lib/core/types/specs';
+import type {FormValue} from '../../src/lib/core/types/value';
 import {dynamicViewConfig} from '../../src/lib/kit/constants/config';
 
 export const DynamicView = ({

playwright/core/DynamicView.tsx

@@ -6,9 +6,9 @@ import type {MountOptions} from '@playwright/experimental-ct-react';
 
 import type {MountFixture, PlaywrightFixture} from './types';
 
-export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, use) => {
+export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, run) => {
  const mount = async (
- component: JSX.Element,
+ component: React.JSX.Element,
  options?: MountOptions<JsonObject> | undefined,
  style?: React.CSSProperties | undefined,
  ) => {
@@ -31,5 +31,5 @@ export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: base
  );
  };
 
- await use(mount);
+ await run(mount);
 };

playwright/core/mountFixture.tsx

@@ -1,3 +1,4 @@
+import type {MountOptions} from '@playwright/experimental-ct-react';
 import type {
  Locator,
  PageScreenshotOptions,
@@ -7,7 +8,6 @@ import type {
  PlaywrightWorkerOptions,
  TestFixture,
 } from '@playwright/test';
-import type {MountOptions} from '@playwright/experimental-ct-react';
 
 type JsonPrimitive = string | number | boolean | null;
 type JsonValue = JsonPrimitive | JsonObject | JsonArray;
@@ -17,12 +17,12 @@ type JsonObject = {[Key in string]?: JsonValue};
 
 interface MountResult extends Locator {
  unmount(): Promise<void>;
- update(component: JSX.Element): Promise<void>;
+ update(component: React.JSX.Element): Promise<void>;
 }
 
 interface ComponentFixtures {
  mount<HooksConfig extends JsonObject>(
- component: JSX.Element,
+ component: React.JSX.Element,
  options?: MountOptions<HooksConfig>,
  style?: React.CSSProperties | undefined,
  ): Promise<MountResult>;

playwright/core/types.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {FormValue, Spec} from '../../../types';
 import type {
  DynamicFormConfig,
@@ -123,7 +125,7 @@ export interface ControllerStore<
  config: DynamicFormConfig;
  tools: DynamicFormsContext['tools'];
  mutatorsStore: DynamicFormMutatorsStore;
- render: (props: FieldRenderProps<DirtyValue>) => JSX.Element | null;
+ render: (props: FieldRenderProps<DirtyValue>) => React.JSX.Element | null;
  validate: (value?: Value) => ValidateError;
  parentOnChange:
  | ((

src/lib/core/components/Form/Controller/types.ts

@@ -20,7 +20,7 @@ export const useSearch = (spec: Spec, value: FieldValue, name: string) => {
  const hidden = React.useMemo(() => isHiddenField(name), [isHiddenField, name]);
 
  const withSearch = React.useCallback(
- (children: JSX.Element | null) =>
+ (children: React.JSX.Element | null) =>
  children ? <div className={b({hidden: hidden})}>{children}</div> : null,
  [hidden],
  );

src/lib/core/components/Form/hooks/useSearch/useSearch.tsx

@@ -32,7 +32,7 @@ export type InputType<
  SpecType extends Spec<undefined, InputComponentProps, LayoutComponentProps> = Spec,
 > = (
  props: InputProps<Value, InputComponentProps, LayoutComponentProps, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type IndependentInputType<
  Value extends FieldValue,
@@ -41,7 +41,7 @@ export type IndependentInputType<
  SpecType extends Spec<undefined, InputComponentProps, LayoutComponentProps> = Spec,
 > = (
  props: IndependentInputProps<Value, InputComponentProps, LayoutComponentProps, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type InputEntity<
  Value extends FieldValue,

src/lib/core/components/Form/types/input.ts

@@ -10,7 +10,7 @@ export type LayoutProps<
  LayoutComponentProps extends Record<string, any> | undefined = undefined,
  SpecType extends Spec<undefined, InputComponentProps, LayoutComponentProps> = Spec,
 > = {
- children: React.ReactElement;
+ children: React.ReactNode;
  layoutProps?: LayoutComponentProps;
 } & Omit<InputProps<Value, InputComponentProps, LayoutComponentProps, SpecType>, 'inputProps'>;
 
@@ -21,7 +21,7 @@ export type LayoutType<
  SpecType extends Spec<undefined, InputComponentProps, LayoutComponentProps> = Spec,
 > = (
  props: LayoutProps<Value, InputComponentProps, LayoutComponentProps, SpecType>,
-) => React.ReactElement | null;
+) => React.ReactNode | Promise<React.ReactNode>;
 
 export type LayoutsMap<
  Value extends FieldValue,