Updated antd theme to use new @rjsf/utils and @rjsf/validator

- Updated `package*.json` to add `@rjsf/utils` and `@rjsf/validator` to dev and peer dependencies
  - Also, Removed a bunch of packages that were never used since the conversion to `tsdx`
  - Finally, bumped most of the dev dependencies that made sense to the latest version, except for those that cause breaking tests
- Removed the `webpack.config.*.js` files since they are no longer needed since the conversion to `tsdx`
- Updated all uses of non-schema utilities methods to `@rjsf/utils` and switched to using `registry.schemaUtils.XXX()` for those schema-based utilities
- Updated the import of `getDefaultRegistry()` to be directly from `@rjsf/core`
- Modified `SelectWidget` to use the new `processSelectValue()` function from `@rjsf/utils`
- Updated the tests to change to using `RJSFSchema` rather than `JSON7Schema` and import the `validator` from `@rjsf/validator` to pass to the `Form`
  - Also updated the snapshots via the `test:update` script to deal with the little differences from the conversion

Author: heath-freenome

packages/antd/package-lock.json

@@ -9,7 +9,7 @@
     "build": "rimraf dist && tsdx build --format cjs,es,umd",
     "test": "tsdx test",
     "test:update": "tsdx test --u"
-   },
+  },
   "files": [
     "dist"
   ],
@@ -24,52 +24,37 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "^4.0.0",
-    "@rjsf/core": "^4.0.0",
+    "@rjsf/core": "^4.2.0",
+    "@rjsf/utils": "^4.2.0",
     "antd": "^4.0.0",
-    "antd-dayjs-webpack-plugin": "1.0.0",
     "dayjs": "^1.8.0",
-    "lodash": "^4.17.15",
-    "lodash-es": "^4.17.15",
     "react": ">=16"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.0.0",
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/preset-env": "^7.10.3",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.4.4",
+    "@babel/cli": "^7.18.6",
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/register": "^7.18.6",
     "@rjsf/core": "^4.2.0",
+    "@rjsf/utils": "^4.2.0",
+    "@rjsf/validator-ajv6": "^4.2.0",
     "antd": "^4.0.0",
     "atob": "^2.0.3",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.6",
-    "concurrently": "^5.1.0",
-    "cross-env": "^2.0.1",
-    "css-loader": "^3.2.0",
-    "dayjs": "^1.8.0",
-    "eslint": "^4.9.0",
-    "eslint-config-react-app": "^2.0.1",
-    "eslint-plugin-flowtype": "^2.39.1",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.4.0",
-    "jest": "24.9.0",
-    "less": "^3.10.3",
-    "less-loader": "^5.0.0",
+    "dayjs": "^1.11.3",
+    "eslint": "^8.19.0",
+    "eslint-plugin-import": "^2.26.0",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.2",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.20.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-middleware": "^3.4.0",
-    "webpack-hot-middleware": "^2.13.2"
+    "tsdx": "^0.14.1"
   },
   "repository": {
     "type": "git",
@@ -86,6 +71,9 @@
     "rjsf-antd"
   ],
   "author": "Delyan Ruskov <[email protected]>",
+  "contributors": [
+    "Heath Chiavettone <[email protected]"
+  ],
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/rjsf-team/react-jsonschema-form/issues"

packages/antd/package.json

@@ -1,4 +1,4 @@
-import { utils, withTheme } from '@rjsf/core';
+import { withTheme, getDefaultRegistry } from '@rjsf/core';
 
 import DescriptionField from './fields/DescriptionField';
 import TitleField from './fields/TitleField';
@@ -29,7 +29,6 @@ import ErrorList from './ErrorList';
 
 // import './index.less';
 
-const { getDefaultRegistry } = utils;
 const { fields, widgets } = getDefaultRegistry();
 
 export const Fields = {

packages/antd/src/index.js

@@ -1,20 +1,10 @@
 import React from 'react';
 
-import { utils } from '@rjsf/core';
+import { getUiOptions, getWidget, isFixedItems, optionsList, ITEMS_KEY } from '@rjsf/utils';
 
 import FixedArrayFieldTemplate from './FixedArrayFieldTemplate';
 import NormalArrayFieldTemplate from './NormalArrayFieldTemplate';
 
-const {
-  getUiOptions,
-  getWidget,
-  isFilesArray,
-  isFixedItems,
-  isMultiSelect,
-  optionsList,
-  retrieveSchema,
-} = utils;
-
 const ArrayFieldTemplate = ({
   DescriptionField,
   TitleField,
@@ -41,7 +31,7 @@ const ArrayFieldTemplate = ({
   title,
   uiSchema,
 }) => {
-  const { fields, rootSchema, widgets } = registry;
+  const { fields, schemaUtils, widgets } = registry;
   const { UnsupportedField } = fields;
 
   const renderFiles = () => {
@@ -71,7 +61,7 @@ const ArrayFieldTemplate = ({
   };
 
   const renderMultiSelect = () => {
-    const itemsSchema = retrieveSchema(schema.items, rootSchema, formData);
+    const itemsSchema = schemaUtils.retrieveSchema(schema.items, formData);
     const enumOptions = optionsList(itemsSchema);
     const { widget = 'select', ...options } = {
       ...getUiOptions(uiSchema),
@@ -103,7 +93,7 @@ const ArrayFieldTemplate = ({
     );
   };
 
-  if (!Object.prototype.hasOwnProperty.call(schema, 'items')) {
+  if (!(ITEMS_KEY in schema)) {
     return (
       <UnsupportedField
         idSchema={idSchema}
@@ -135,10 +125,10 @@ const ArrayFieldTemplate = ({
       />
     );
   }
-  if (isFilesArray(schema, uiSchema, rootSchema)) {
+  if (schemaUtils.isFilesArray(schema, uiSchema)) {
     return renderFiles();
   }
-  if (isMultiSelect(schema, rootSchema)) {
+  if (schemaUtils.isMultiSelect(schema)) {
     return renderMultiSelect();
   }
 

packages/antd/src/templates/ArrayFieldTemplate/index.js

@@ -1,15 +1,13 @@
 import React from 'react';
 
-import { utils } from '@rjsf/core';
+import { ADDITIONAL_PROPERTY_FLAG } from '@rjsf/utils';
 import Button from 'antd/lib/button';
 import Col from 'antd/lib/col';
 import Form from 'antd/lib/form';
 import Input from 'antd/lib/input';
 import Row from 'antd/lib/row';
 import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 
-const { ADDITIONAL_PROPERTY_FLAG } = utils;
-
 const VERTICAL_LABEL_COL = { span: 24 };
 const VERTICAL_WRAPPER_COL = { span: 24 };
 

packages/antd/src/templates/FieldTemplate/WrapIfAdditional.js

@@ -2,15 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
 
-import { utils } from '@rjsf/core';
+import { canExpand } from '@rjsf/utils';
 import Button from 'antd/lib/button';
 import Col from 'antd/lib/col';
 import Row from 'antd/lib/row';
 import { withConfigConsumer } from 'antd/lib/config-provider/context';
 import PlusCircleOutlined from '@ant-design/icons/PlusCircleOutlined';
 
-const { canExpand } = utils;
-
 const DESCRIPTION_COL_STYLE = {
   paddingBottom: '8px',
 };

packages/antd/src/templates/ObjectFieldTemplate/index.js

@@ -1,12 +1,10 @@
 import React, { useEffect, useState } from "react";
 
-import { utils } from '@rjsf/core';
+import { pad, parseDateString, toDateString } from '@rjsf/utils';
 import Button from 'antd/lib/button';
 import Col from 'antd/lib/col';
 import Row from 'antd/lib/row';
 
-const { pad, parseDateString, toDateString } = utils;
-
 const rangeOptions = (start, stop) => {
   let options = [];
   for (let i = start; i <= stop; i++) {

packages/antd/src/widgets/AltDateWidget/index.js

@@ -1,11 +1,9 @@
 /* eslint-disable no-else-return */
 import React from 'react';
 
-import { utils } from '@rjsf/core';
+import { rangeSpec } from '@rjsf/utils';
 import Slider from 'antd/lib/slider';
 
-const { rangeSpec } = utils;
-
 const RangeWidget = ({
   autofocus,
   disabled,

packages/antd/src/widgets/RangeWidget/index.js

@@ -1,48 +1,13 @@
 /* eslint-disable no-else-return */
 import React from 'react';
 
-import { utils } from '@rjsf/core';
+import { processSelectValue } from '@rjsf/utils';
 import Select from 'antd/lib/select';
 
-const { asNumber, guessType } = utils;
-
 const SELECT_STYLE = {
   width: '100%',
 };
 
-const nums = new Set(['number', 'integer']);
-
-/**
- * This is a silly limitation in the DOM where option change event values are
- * always retrieved as strings.
- */
-const processValue = (schema, value) => {
-  // "enum" is a reserved word, so only "type" and "items" can be destructured
-  const { type, items } = schema;
-
-  if (value === '') {
-    return undefined;
-  } else if (type === 'array' && items && nums.has(items.type)) {
-    return value.map(asNumber);
-  } else if (type === 'boolean') {
-    return value === 'true';
-  } else if (type === 'number') {
-    return asNumber(value);
-  }
-
-  // If type is undefined, but an enum is present, try and infer the type from
-  // the enum values
-  if (schema.enum) {
-    if (schema.enum.every((x) => guessType(x) === 'number')) {
-      return asNumber(value);
-    } else if (schema.enum.every((x) => guessType(x) === 'boolean')) {
-      return value === 'true';
-    }
-  }
-
-  return value;
-};
-
 const SelectWidget = ({
   autofocus,
   disabled,
@@ -64,11 +29,11 @@ const SelectWidget = ({
 
   const { enumOptions, enumDisabled } = options;
 
-  const handleChange = (nextValue) => onChange(processValue(schema, nextValue));
+  const handleChange = (nextValue) => onChange(processSelectValue(schema, nextValue));
 
-  const handleBlur = () => onBlur(id, processValue(schema, value));
+  const handleBlur = () => onBlur(id, processSelectValue(schema, value));
 
-  const handleFocus = () => onFocus(id, processValue(schema, value));
+  const handleFocus = () => onFocus(id, processSelectValue(schema, value));
 
   const getPopupContainer = (node) => node.parentNode;
 

packages/antd/src/widgets/SelectWidget/index.js

@@ -1,7 +1,7 @@
-import { utils } from '@rjsf/core';
+import { getSubmitButtonOptions } from '@rjsf/utils';
 import React from "react";
 import Button from 'antd/lib/button';
-const { getSubmitButtonOptions } = utils;
+
 export default ({ uiSchema }) => {
   const { submitText, norender, props: submitButtonProps }= getSubmitButtonOptions(uiSchema);
   if (norender) {return null;}

packages/antd/src/widgets/SubmitButton/SubmitButton.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import validator from '@rjsf/validator-ajv6';
 
 import '../__mocks__/matchMedia.mock';
 import Form from '../src';
@@ -15,7 +16,7 @@ describe("array fields", () => {
       }
     };
     const tree = renderer
-      .create(<Form schema={schema} />)
+      .create(<Form schema={schema} validator={validator} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -32,7 +33,7 @@ describe("array fields", () => {
       ]
     };
     const tree = renderer
-      .create(<Form schema={schema} />)
+      .create(<Form schema={schema} validator={validator} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -46,7 +47,7 @@ describe("array fields", () => {
       uniqueItems: true
     };
     const tree = renderer
-      .create(<Form schema={schema} />)
+      .create(<Form schema={schema} validator={validator} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });