Update react 18 antd5 (#1375)

Co-authored-by: Piotr Pośpiech <[email protected]>
vazco · Oct 28, 2024 · b4458a9 · b4458a9
1 parent fff099a
commit b4458a9
Show file tree

Hide file tree

Showing 15 changed files with 423 additions and 283 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -9,10 +9,5 @@ module.exports = {
   setupFiles: ['./scripts/setupJest.ts', './scripts/setupFilterWarnings.ts'],
   setupFilesAfterEnv: ['./scripts/setupMatchers.ts'],
   testEnvironment: 'jsdom',
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    '/_[^/]*$',
-    '\\.d\\.ts$',
-    'uniforms-antd/',
-  ],
+  testPathIgnorePatterns: ['/node_modules/', '/_[^/]*$', '\\.d\\.ts$'],
 };
diff --git a/packages/uniforms-antd/__tests__/DateField.tsx b/packages/uniforms-antd/__tests__/DateField.tsx
@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import userEvent, {
   PointerEventsCheckLevel,
 } from '@testing-library/user-event';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React from 'react';
 import { renderWithZod } from 'uniforms/__suites__';
 import { DateField } from 'uniforms-antd';
@@ -11,7 +11,7 @@ import { z } from 'zod';
 const getClosestInput = (text: string) =>
   screen.getByText(text).closest('.ant-row')?.querySelector('input');
 
-describe.skip('@RTL - DateField tests', () => {
+describe('@RTL - DateField tests', () => {
   test('<DateField> - default props override', async () => {
     const pickerProps = { showTime: false, style: { background: 'red' } };
     renderWithZod({
@@ -47,9 +47,9 @@ describe.skip('@RTL - DateField tests', () => {
 
   test('<DateField> - renders a input which correctly reacts on change', async () => {
     const onChange = jest.fn();
-    const now = moment('2024-01-01 12:00:00');
+    const now = dayjs('2024-01-01 12:00:00');
     renderWithZod({
-      element: <DateField name="x" />,
+      element: <DateField name="x" needConfirm />,
       onChange,
       schema: z.object({ x: z.date() }),
     });
@@ -58,7 +58,7 @@ describe.skip('@RTL - DateField tests', () => {
     expect(input).toBeInTheDocument();
     await userEvent.click(input!);
     await userEvent.type(input!, now.format('YYYY-MM-DD HH:mm:ss'));
-    const ok = screen.getByText('Ok');
+    const ok = screen.getByText('OK');
     await userEvent.click(ok, {
       pointerEventsCheck: PointerEventsCheckLevel.Never,
     });

diff --git a/packages/uniforms-antd/__tests__/SelectField.tsx b/packages/uniforms-antd/__tests__/SelectField.tsx
@@ -4,7 +4,7 @@ import { renderWithZod } from 'uniforms/__suites__';
 import { SelectField } from 'uniforms-antd';
 import { z } from 'zod';
 
-describe.skip('@RTL - SelectField tests', () => {
+describe('@RTL - SelectField tests', () => {
   test('<SelectField> - renders a select which correctly reacts on change (array)', () => {
     const onChange = jest.fn();
 

diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts
@@ -1,7 +1,7 @@
 import * as suites from 'uniforms/__suites__';
 import * as theme from 'uniforms-antd';
 
-it.skip('exports everything', () => {
+it('exports everything', () => {
   expect(theme).toEqual({
     AutoFields: expect.any(Function),
     AutoField: expect.any(Function),
@@ -30,7 +30,7 @@ it.skip('exports everything', () => {
   });
 });
 
-describe.skip('@RTL AntD', () => {
+describe('@RTL AntD', () => {
   suites.testAutoField(theme.AutoField, {
     getDateField: screen => screen.getByRole('textbox'),
     getSelectField: screen => screen.getByRole('combobox'),
@@ -52,7 +52,10 @@ describe.skip('@RTL AntD', () => {
   });
   suites.testListItemField(theme.ListItemField);
   suites.testLongTextField(theme.LongTextField);
-  suites.testNumField(theme.NumField);
+  suites.testNumField(theme.NumField, {
+    minProperty: 'aria-valuemin',
+    maxProperty: 'aria-valuemax',
+  });
   suites.testNestField(theme.NestField);
   suites.testQuickForm(theme.QuickForm);
   // FIXME: AntD radio.group does not support HTML attributes https://github.com/ant-design/ant-design/issues/8561, added a flag to skip attributes tests.

diff --git a/packages/uniforms-antd/__tests__/wrapField.tsx b/packages/uniforms-antd/__tests__/wrapField.tsx
@@ -4,7 +4,7 @@ import { renderWithZod } from 'uniforms/__suites__';
 import { wrapField } from 'uniforms-antd';
 import { z } from 'zod';
 
-describe.skip('@RTL - wrapField tests', () => {
+describe('@RTL - wrapField tests', () => {
   describe('wrapField tests', () => {
     test('<wrapField> - renders wrapper with extra style', () => {
       const { container } = renderWithZod({

diff --git a/packages/uniforms-antd/package.json b/packages/uniforms-antd/package.json
@@ -32,8 +32,7 @@
     "src/*.tsx"
   ],
   "peerDependencies": {
-    "@ant-design/icons": "^4.0.0",
-    "antd": "^4.0.0",
+    "antd": "^5.0.0",
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0"
   },
   "dependencies": {
@@ -44,12 +43,14 @@
     "warning": "^4.0.0"
   },
   "devDependencies": {
+    "@ant-design/icons": "^5.0.0",
     "@types/invariant": "2.2.37",
     "@types/lodash": "4.17.5",
-    "@types/react": "17.0.39",
+    "@types/react": "18.3.12",
     "@types/simpl-schema": "1.12.8",
-    "moment": "2.30.1",
+    "dayjs": "^1.11.13",
     "simpl-schema": "1.13.1",
+    "rc-input-number": "^9.2.0",
     "tslib": "2.2.0",
     "typescript": "5.5.4",
     "zod": "^3.0.0"

diff --git a/packages/uniforms-antd/src/DateField.tsx b/packages/uniforms-antd/src/DateField.tsx
@@ -1,13 +1,13 @@
 import DatePicker, { DatePickerProps } from 'antd/lib/date-picker';
-import moment, { Moment } from 'moment';
+import dayjs from 'dayjs';
 import React, { Ref } from 'react';
 import { connectField, FieldProps, filterDOMProps } from 'uniforms';
 
 import wrapField from './wrapField';
 
 export type DateFieldProps = FieldProps<
-  Date | Moment,
-  DatePickerProps,
+  Date,
+  Omit<DatePickerProps, 'onReset'>,
   // FIXME: Seems like DatePickerProps doesn't contain 'showTime'.
   { inputRef?: Ref<typeof DatePicker>; showTime?: boolean }
 >;
@@ -35,7 +35,7 @@ function Date({
       ref={props.inputRef}
       showTime={showTime}
       style={style}
-      value={props.value && moment(props.value)}
+      value={props.value && dayjs(props.value)}
       {...filterDOMProps(props)}
     />,
   );

diff --git a/packages/uniforms-antd/src/ListDelField.tsx b/packages/uniforms-antd/src/ListDelField.tsx
@@ -19,7 +19,7 @@ function ListDel({
   readOnly,
   shape = 'circle',
   size = 'small',
-  type = 'ghost',
+  type = 'default',
   ...props
 }: ListDelFieldProps) {
   const nameParts = joinName(null, name);

diff --git a/packages/uniforms-antd/src/NumField.tsx b/packages/uniforms-antd/src/NumField.tsx
@@ -1,4 +1,6 @@
-import InputNumber, { InputNumberProps } from 'antd/lib/input-number';
+/// <reference types="rc-input-number" />
+
+import InputNumber, { type InputNumberProps } from 'antd/lib/input-number';
 import React, { Ref } from 'react';
 import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 
@@ -8,8 +10,7 @@ export type NumFieldProps = FieldProps<
   number,
   // FIXME: Why `onReset` fails with `wrapField`?
   Omit<InputNumberProps, 'onReset'>,
-  // FIXME: `unknown` ref; see https://github.com/vazco/uniforms/discussions/1230#discussioncomment-5158439
-  { decimal?: boolean; inputRef?: Ref<unknown> }
+  { decimal?: boolean; inputRef?: Ref<HTMLInputElement> }
 >;
 
 function Num(props: NumFieldProps) {

diff --git a/packages/uniforms-antd/src/SelectField.tsx b/packages/uniforms-antd/src/SelectField.tsx
@@ -1,7 +1,4 @@
-import CheckboxGroup, {
-  CheckboxGroupProps,
-  CheckboxValueType,
-} from 'antd/lib/checkbox/Group';
+import CheckboxGroup, { CheckboxGroupProps } from 'antd/lib/checkbox/Group';
 import { RadioGroupProps } from 'antd/lib/radio';
 import RadioGroup from 'antd/lib/radio/group';
 import SelectAntD, { SelectProps as SelectAntDProps } from 'antd/lib/select';
@@ -15,7 +12,7 @@ type CheckboxesProps = FieldProps<
   SelectFieldValue,
   CheckboxGroupProps | RadioGroupProps,
   {
-    options?: Option<CheckboxValueType>[];
+    options?: Option<string>[];
     checkboxes: true;
     inputRef?: Ref<typeof CheckboxGroup | typeof RadioGroup>;
     required?: boolean;
@@ -35,7 +32,7 @@ type SelectProps = FieldProps<
 
 // This type is needed for the `SelectFieldProps` union to be a proper subtype
 // of `Partial<GuaranteedProps<Value>>` - otherwise `connectField` goes wild.
-type SelectFieldValue = CheckboxValueType | (string | undefined)[];
+type SelectFieldValue = (string | undefined)[];
 
 export type SelectFieldProps = CheckboxesProps | SelectProps;
 
@@ -46,7 +43,6 @@ function Select(props: SelectFieldProps) {
     props,
     props.checkboxes ? (
       <span {...filteredDOMProps}>
-        {/* @ts-expect-error: Incorrect `value` type. */}
         <Group
           {...filteredDOMProps}
           disabled={props.disabled}

diff --git a/packages/uniforms-antd/src/SubmitField.tsx b/packages/uniforms-antd/src/SubmitField.tsx
@@ -4,7 +4,7 @@ import { Override, useForm } from 'uniforms';
 
 export type SubmitFieldProps = Override<
   ButtonProps,
-  { inputRef?: Ref<HTMLInputElement> }
+  { inputRef?: Ref<HTMLButtonElement> }
 >;
 
 function SubmitField({

diff --git a/packages/uniforms-antd/src/TextField.tsx b/packages/uniforms-antd/src/TextField.tsx
@@ -1,4 +1,4 @@
-import Input, { InputProps } from 'antd/lib/input';
+import Input, { InputProps, InputRef } from 'antd/lib/input';
 import React, { Ref } from 'react';
 import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 
@@ -7,7 +7,7 @@ import wrapField from './wrapField';
 export type TextFieldProps = FieldProps<
   string,
   Omit<InputProps, 'onReset'>,
-  { inputRef?: Ref<Input> }
+  { inputRef?: Ref<InputRef> }
 >;
 
 function Text(props: TextFieldProps) {

diff --git a/packages/uniforms/__suites__/NumField.tsx b/packages/uniforms/__suites__/NumField.tsx
@@ -5,7 +5,16 @@ import z from 'zod';
 
 import { renderWithZod } from './render-zod';
 
-export function testNumField(NumField: ComponentType<any>) {
+export function testNumField(
+  NumField: ComponentType<any>,
+  options?: {
+    minProperty?: string;
+    maxProperty?: string;
+  },
+) {
+  const minProperty = options?.minProperty ?? 'min';
+  const maxProperty = options?.maxProperty ?? 'max';
+
   test('<NumField> - renders an InputNumber', () => {
     renderWithZod({
       element: <NumField name="x" />,
@@ -52,15 +61,16 @@ export function testNumField(NumField: ComponentType<any>) {
       element: <NumField name="x" max={10} />,
       schema: z.object({ x: z.number() }),
     });
-    expect(screen.getByRole('spinbutton')).toHaveAttribute('max', '10');
+    expect(screen.getByRole('spinbutton')).toHaveAttribute(maxProperty, '10');
   });
 
   test('<NumField> - renders an InputNumber with correct min', () => {
     renderWithZod({
       element: <NumField name="x" min={10} />,
       schema: z.object({ x: z.number() }),
     });
-    expect(screen.getByRole('spinbutton')).toHaveAttribute('min', '10');
+
+    expect(screen.getByRole('spinbutton')).toHaveAttribute(minProperty, '10');
   });
 
   test('<NumField> - renders an InputNumber with correct name', () => {

diff --git a/packages/uniforms/__suites__/SelectField.tsx b/packages/uniforms/__suites__/SelectField.tsx
@@ -664,7 +664,7 @@ export function testSelectField(
         ),
         schema: z.object({ x: z.enum(['a', 'b']) }),
       });
-      const field = screen.getByTestId('select-field');
+      const field = screen.getAllByTestId('select-field')[0];
       expect(field).toHaveAttribute('data-x', 'x');
       expect(field).toHaveAttribute('data-z', 'z');
       expect(field).toHaveAttribute('data-y', 'y');