feat: support react version 19

.circleci/config.yml

@@ -11,7 +11,7 @@ jobs:
       - checkout
       - node/install:
           install-yarn: true
-          node-version: '16.13'
+          node-version: '20'
       - run:
           name: install-deps
           command: yarn
@@ -40,7 +40,7 @@ jobs:
           at: ~/react-forms
       - node/install:
           install-yarn: true
-          node-version: '16.13'
+          node-version: '20'
       - run:
           name: Release new version
           command: |
@@ -55,7 +55,7 @@ jobs:
           at: ~/react-forms
       - node/install:
           install-yarn: true
-          node-version: '16.13'
+          node-version: '20'
       - run:
           name: Predeploy demo
           command: |

.eslintrc.json

@@ -79,7 +79,7 @@
     "no-unused-vars": "error",
     "react/no-unused-prop-types": "error",
     "react-hooks/rules-of-hooks": "error",
-    "react/prop-types": "error",
+    "react/prop-types": "off",
     "react/no-unescaped-entities": "error",
     "no-prototype-builtins": "error",
     "no-mixed-operators": "error",

package.json

@@ -31,7 +31,8 @@
     "testEnvironment": "jest-environment-jsdom",
     "verbose": true,
     "testPathIgnorePatterns": [
-      "/node_modules/"
+      "/node_modules/",
+      "packages/suir-component-mapper/"
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/config/jest.setup.js"
@@ -41,6 +42,7 @@
       "<rootDir>/packages/**/src/**/*.ts",
       "!<rootDir>/packages/**/src/**/*.d.ts",
       "!<rootDir>/packages/react-renderer-demo/**/*.js",
+      "!<rootDir>/packages/suir-component-mapper/**/*.js",
       "!<rootDir>/packages/**/dist",
       "!<rootDir>/templates/**/*.js",
       "!<rootDir>/packages/**/src/**/index.js",
@@ -76,8 +78,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.4.6",
@@ -106,9 +108,8 @@
     "ncp": "^2.0.0",
     "sass": "^1.77.8",
     "prettier": "^2.5.1",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "regenerator-runtime": "^0.13.9",
     "replace-in-file": "^6.3.2",
     "sass-loader": "^12.4.0",

packages/ant-component-mapper/package.json

@@ -31,8 +31,8 @@
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": "*",
     "antd": "^4.2.0",
-    "react": "^16.13.1 || ^17.0.2 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.2 || ^18.0.0"
+    "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@data-driven-forms/common": "*",

packages/ant-component-mapper/src/checkbox/checkbox.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Checkbox as AntCheckbox } from 'antd';
 import MultipleChoiceList from '../multiple-choice-list/multiple-choice-list';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
@@ -37,21 +36,6 @@ export const SingleCheckbox = (props) => {
   );
 };
 
-SingleCheckbox.propTypes = {
-  isReadOnly: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  label: PropTypes.node,
-  helperText: PropTypes.node,
-  description: PropTypes.node,
-  validateOnMount: PropTypes.bool,
-  FormItemProps: PropTypes.object,
-};
-
 const Checkbox = ({ options, ...props }) => (options ? <MultipleChoiceList options={options} {...props} /> : <SingleCheckbox {...props} />);
 
-Checkbox.propTypes = {
-  options: PropTypes.array,
-};
-
 export default Checkbox;

packages/ant-component-mapper/src/date-picker/date-picker.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { DatePicker as AntDatePicker } from 'antd';
 import { validationError } from '../validation-error/validation-error';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
@@ -37,17 +36,4 @@ const DatePicker = ({ placeholder = 'Select date', ...props }) => {
   );
 };
 
-DatePicker.propTypes = {
-  isReadOnly: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  placeholder: PropTypes.node,
-  isRequired: PropTypes.bool,
-  label: PropTypes.node,
-  helperText: PropTypes.node,
-  validateOnMount: PropTypes.bool,
-  locale: PropTypes.string,
-  description: PropTypes.node,
-  FormItemProps: PropTypes.object,
-};
-
 export default DatePicker;

packages/ant-component-mapper/src/field-array/field-array.js

@@ -1,6 +1,5 @@
 import React, { memo, useReducer } from 'react';
 import isEqual from 'lodash/isEqual';
-import PropTypes from 'prop-types';
 import { useFieldApi, useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
 import { Row, Col, Button, Typography, Space } from 'antd';
 import { UndoOutlined, RedoOutlined } from '@ant-design/icons';
@@ -44,20 +43,6 @@ const ArrayItem = memo(
   ({ remove: _prevRemove, ...prev }, { remove: _nextRemove, ...next }) => isEqual(prev, next)
 );
 
-ArrayItem.propTypes = {
-  name: PropTypes.string,
-  fieldIndex: PropTypes.number.isRequired,
-  fields: PropTypes.arrayOf(PropTypes.object),
-  remove: PropTypes.func.isRequired,
-  length: PropTypes.number,
-  minItems: PropTypes.number,
-  removeLabel: PropTypes.node.isRequired,
-  ArrayItemProps: PropTypes.object.isRequired,
-  FieldsContainerProps: PropTypes.object.isRequired,
-  RemoveContainerProps: PropTypes.object.isRequired,
-  RemoveButtonProps: PropTypes.object.isRequired,
-};
-
 const defaultButtonLabels = {
   add: 'ADD',
   remove: 'REMOVE',
@@ -247,32 +232,4 @@ const DynamicArray = ({ ...props }) => {
   );
 };
 
-DynamicArray.propTypes = {
-  label: PropTypes.node,
-  description: PropTypes.node,
-  fields: PropTypes.arrayOf(PropTypes.object).isRequired,
-  defaultItem: PropTypes.any,
-  minItems: PropTypes.number,
-  maxItems: PropTypes.number,
-  noItemsMessage: PropTypes.node,
-  buttonLabels: PropTypes.object,
-  // customization props
-  FormItemProps: PropTypes.object,
-  ArrayItemProps: PropTypes.object,
-  FieldsContainerProps: PropTypes.object,
-  RemoveContainerProps: PropTypes.object,
-  RemoveButtonProps: PropTypes.object,
-  FieldArrayRowProps: PropTypes.object,
-  FieldArrayRowCol: PropTypes.object,
-  FieldArrayHeaderProps: PropTypes.object,
-  FieldArrayLabelProps: PropTypes.object,
-  FieldArrayButtonsProps: PropTypes.object,
-  UndoButtonProps: PropTypes.object,
-  RedoButtonProps: PropTypes.object,
-  AddButtonProps: PropTypes.object,
-  FieldArrayDescriptionProps: PropTypes.object,
-  NoItemsMessageProps: PropTypes.object,
-  ErrorMessageProps: PropTypes.object,
-};
-
 export default DynamicArray;

packages/ant-component-mapper/src/form-group/form-group.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Form } from 'antd';
 import { validationError } from '../validation-error/';
-import { childrenPropTypes } from '@data-driven-forms/common/prop-types-templates';
 
 const FormGroup = ({ label, children, isRequired, FormItemProps, meta, validateOnMount, helperText, description, hideLabel, input }) => {
   const invalid = validationError(meta, validateOnMount);
@@ -24,19 +22,4 @@ const FormGroup = ({ label, children, isRequired, FormItemProps, meta, validateO
   );
 };
 
-FormGroup.propTypes = {
-  label: PropTypes.string,
-  children: childrenPropTypes,
-  help: PropTypes.string,
-  isRequired: PropTypes.bool,
-  invalid: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  FormItemProps: PropTypes.object,
-  meta: PropTypes.object,
-  validateOnMount: PropTypes.bool,
-  helperText: PropTypes.node,
-  description: PropTypes.node,
-  hideLabel: PropTypes.bool,
-  input: PropTypes.object,
-};
-
 export default FormGroup;

packages/ant-component-mapper/src/form-template/form-template.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button, Typography, Form as AntForm } from 'antd';
 import FormTemplate from '@data-driven-forms/common/form-template';
-import { childrenPropTypes } from '@data-driven-forms/common/prop-types-templates';
 
 const { Title, Paragraph } = Typography;
 
@@ -12,56 +10,30 @@ const Form = ({ children, onSubmit, layout = 'vertical', ...props }) => (
   </AntForm>
 );
 
-Form.propTypes = {
-  layout: PropTypes.string,
-  onSubmit: PropTypes.func,
-  children: childrenPropTypes,
-};
-
 const Description = ({ children, ...props }) => (
   <Typography {...props}>
     <Paragraph>{children}</Paragraph>
   </Typography>
 );
 
-Description.propTypes = {
-  children: childrenPropTypes,
-};
-
 const TitleComponent = ({ children, ...props }) => (
   <Typography {...props}>
     <Title level={3}>{children}</Title>
   </Typography>
 );
 
-TitleComponent.propTypes = {
-  children: childrenPropTypes,
-};
-
 const ButtonGroup = ({ children, ...props }) => (
   <div style={{ display: 'flex', justifyContent: 'flex-end' }} {...props}>
     {children}
   </div>
 );
 
-ButtonGroup.propTypes = {
-  children: childrenPropTypes,
-};
-
 const ButtonComponent = ({ label, variant, children, buttonType, ...props }) => (
   <Button {...props} type="primary" htmlType={props.type}>
     {label || children}
   </Button>
 );
 
-ButtonComponent.propTypes = {
-  children: childrenPropTypes,
-  label: PropTypes.node,
-  variant: PropTypes.string,
-  buttonType: PropTypes.string,
-  type: PropTypes.string,
-};
-
 const AntFormTemplate = ({ layout, formWrapperProps, ...props }) => (
   <FormTemplate
     FormWrapper={Form}
@@ -74,9 +46,4 @@ const AntFormTemplate = ({ layout, formWrapperProps, ...props }) => (
   />
 );
 
-AntFormTemplate.propTypes = {
-  layout: PropTypes.string,
-  formWrapperProps: PropTypes.object,
-};
-
 export default AntFormTemplate;

packages/ant-component-mapper/src/is-required/is-required.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { childrenPropTypes } from '@data-driven-forms/common/prop-types-templates';
 
 import './is-required.css';
 
@@ -12,8 +11,4 @@ const IsRequired = ({ children }) => (
   </React.Fragment>
 );
 
-IsRequired.propTypes = {
-  children: childrenPropTypes,
-};
-
 export default IsRequired;

packages/ant-component-mapper/src/multiple-choice-list/multiple-choice-list.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Checkbox as AntCheckbox } from 'antd';
-import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/multiple-choice-list';
+import MultipleChoiceListCommon from '@data-driven-forms/common/multiple-choice-list';
 import FormGroup from '../form-group';
 
 const FinalCheckbox = ({ isDisabled, label, ...props }) => (
@@ -11,11 +10,6 @@ const FinalCheckbox = ({ isDisabled, label, ...props }) => (
   </AntCheckbox>
 );
 
-FinalCheckbox.propTypes = {
-  isDisabled: PropTypes.bool,
-  label: PropTypes.node,
-};
-
 const Wrapper = ({ label, isRequired, children, meta, input, validateOnMount, helperText, description, FormItemProps }) => (
   <FormGroup
     label={label}
@@ -31,16 +25,6 @@ const Wrapper = ({ label, isRequired, children, meta, input, validateOnMount, he
   </FormGroup>
 );
 
-Wrapper.propTypes = {
-  ...wrapperProps,
-};
-
 const MultipleChoiceList = (props) => <MultipleChoiceListCommon {...props} Wrapper={Wrapper} Checkbox={FinalCheckbox} />;
 
-MultipleChoiceList.propTypes = {
-  input: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-  }),
-};
-
 export default MultipleChoiceList;

packages/ant-component-mapper/src/plain-text/plain-text.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Typography } from 'antd';
-import PropTypes from 'prop-types';
 
 const { Paragraph } = Typography;
 
@@ -14,10 +13,4 @@ const PlainText = ({ label, name, TypographyProps, ...rest }) => (
   </Typography>
 );
 
-PlainText.propTypes = {
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  TypographyProps: PropTypes.object,
-};
-
 export default PlainText;