fix: Remove usage of lodash/isArray and React.StatelessComponent

packages/core/src/testers/testers.ts

@@ -27,7 +27,6 @@ import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
 import endsWith from 'lodash/endsWith';
 import last from 'lodash/last';
-import isArray from 'lodash/isArray';
 import reduce from 'lodash/reduce';
 import toPairs from 'lodash/toPairs';
 import includes from 'lodash/includes';
@@ -483,7 +482,7 @@ const traverse = (
   pred: (obj: JsonSchema) => boolean,
   rootSchema: JsonSchema
 ): boolean => {
-  if (isArray(any)) {
+  if (Array.isArray(any)) {
     return reduce(
       any,
       (acc, el) => acc || traverse(el, pred, rootSchema),

packages/core/src/util/util.ts

@@ -24,7 +24,6 @@
 */
 
 import isEmpty from 'lodash/isEmpty';
-import isArray from 'lodash/isArray';
 import includes from 'lodash/includes';
 import find from 'lodash/find';
 import { resolveData, resolveSchema } from './resolvers';
@@ -100,7 +99,7 @@ export const deriveTypes = (jsonSchema: JsonSchema): string[] => {
   if (!isEmpty(jsonSchema.type) && typeof jsonSchema.type === 'string') {
     return [jsonSchema.type];
   }
-  if (isArray(jsonSchema.type)) {
+  if (Array.isArray(jsonSchema.type)) {
     return jsonSchema.type;
   }
   if (

packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx

@@ -34,7 +34,7 @@ import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControl
 import { materialCells, materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { JsonFormsStateProvider, StatelessRenderer } from '@jsonforms/react';
+import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 import { checkTooltip, checkTooltipTranslation } from './tooltipChecker';
 
@@ -376,10 +376,10 @@ describe('Material array control', () => {
     expect(onChangeData.data.length).toBe(1);
   });
 
-  const CellRenderer1: StatelessRenderer<DispatchCellProps> = () => (
+  const CellRenderer1: React.FC<DispatchCellProps> = () => (
     <div className='cell test 1' />
   );
-  const CellRenderer2: StatelessRenderer<DispatchCellProps> = () => (
+  const CellRenderer2: React.FC<DispatchCellProps> = () => (
     <div className='cell test 2' />
   );
 

packages/react/src/Renderer.tsx

@@ -46,9 +46,10 @@ export class RendererComponent<
  * Stateless Renderer.
  *
  * @template P type of any renderer props
+ * @deprecated Use React.FunctionComponent instead
  */
 export type StatelessRenderer<P extends RendererProps> =
-  React.StatelessComponent<P>;
+  React.FunctionComponent<P>;
 
 /**
  * Represents a Renderer, which might either be a component or a function.
@@ -57,4 +58,4 @@ export type Renderer =
   // TODO fix @typescript-eslint/ban-types
   // eslint-disable-next-line @typescript-eslint/ban-types
   | RendererComponent<RendererProps & any, {}>
-  | StatelessRenderer<RendererProps & any>;
+  | React.FunctionComponent<RendererProps & any>;

packages/react/test/renderers/JsonForms.test.tsx

@@ -50,7 +50,6 @@ import {
 } from '@jsonforms/core';
 import { isEqual } from 'lodash';
 import Enzyme, { mount, shallow } from 'enzyme';
-import type { StatelessRenderer } from '../../src/Renderer';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   JsonForms,
@@ -114,13 +113,13 @@ export const initJsonFormsStore = ({
   return createStore(reducer, initState);
 };
 
-const CustomRenderer1: StatelessRenderer<RendererProps> = () => <h1>test</h1>;
-const CustomRenderer2: StatelessRenderer<RendererProps> = () => <h2>test</h2>;
-const CustomRenderer3: StatelessRenderer<RendererProps> = () => <h3>test</h3>;
-const CellRenderer1: StatelessRenderer<DispatchCellProps> = () => (
+const CustomRenderer1: React.FC<RendererProps> = () => <h1>test</h1>;
+const CustomRenderer2: React.FC<RendererProps> = () => <h2>test</h2>;
+const CustomRenderer3: React.FC<RendererProps> = () => <h3>test</h3>;
+const CellRenderer1: React.FC<DispatchCellProps> = () => (
   <h1 className='cell test 1'>test</h1>
 );
-const CellRenderer2: StatelessRenderer<DispatchCellProps> = () => (
+const CellRenderer2: React.FC<DispatchCellProps> = () => (
   <h2 className='cell test 2'>test</h2>
 );
 
@@ -256,7 +255,7 @@ test('ids should be unique within the same form', () => {
   });
 
   const ids: string[] = [];
-  const MyCustomRenderer: StatelessRenderer<any> = (props: any) => {
+  const MyCustomRenderer: React.FC<any> = (props: any) => {
     ids.push(props.id);
     return <div>Custom</div>;
   };
@@ -432,9 +431,7 @@ test('JsonForms renderer should pick most applicable cell renderer via ownProps'
   });
   store.dispatch(registerCell(() => 50, CellRenderer1));
 
-  const ArrayRenderer: StatelessRenderer<RendererProps> = (
-    props: RendererProps
-  ) => {
+  const ArrayRenderer: React.FC<RendererProps> = (props: RendererProps) => {
     return (
       <DispatchCell
         schema={props.schema}
@@ -555,9 +552,7 @@ test('JsonForms renderer should pick schema from ownProps', () => {
 });
 
 test('JsonForms renderer should pick enabled prop from ownProps', () => {
-  const CustomRenderer4: StatelessRenderer<RendererProps> = (
-    props: RendererProps
-  ) => {
+  const CustomRenderer4: React.FC<RendererProps> = (props: RendererProps) => {
     return <h3>{`${props.enabled}`}</h3>;
   };
 
@@ -1010,7 +1005,7 @@ test('JsonForms should update if data prop is updated', () => {
 });
 
 test('JsonForms should use additionalErrors if provided', () => {
-  const CustomRendererWithError: StatelessRenderer<ControlProps> = ({
+  const CustomRendererWithError: React.FC<ControlProps> = ({
     errors,
   }: ControlProps) => {
     return <h5>{errors}</h5>;
@@ -1048,7 +1043,7 @@ test('JsonForms should use additionalErrors if provided', () => {
 });
 
 test('JsonForms should use react to additionalErrors update', () => {
-  const CustomRendererWithError: StatelessRenderer<ControlProps> = ({
+  const CustomRendererWithError: React.FC<ControlProps> = ({
     errors,
   }: ControlProps) => {
     return <h5>{errors}</h5>;

packages/vanilla-renderers/src/cells/BooleanCell.tsx

@@ -30,13 +30,10 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
-import type { StatelessComponent } from 'react';
 import type { VanillaRendererProps } from '../index';
 import { withVanillaBooleanCellProps } from '../util/index';
 
-export const BooleanCell: StatelessComponent<CellProps> = (
-  props: CellProps & VanillaRendererProps
-) => {
+export const BooleanCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
 
   return (

packages/vue-vuetify/src/controls/StringControlRenderer.vue

@@ -88,7 +88,6 @@ import {
   type RendererProps,
 } from '@jsonforms/vue';
 import every from 'lodash/every';
-import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
 import { defineComponent } from 'vue';
 import { VCombobox, VTextField } from 'vuetify/components';
@@ -123,7 +122,7 @@ const controlRenderer = defineComponent({
 
       if (
         suggestions === undefined ||
-        !isArray(suggestions) ||
+        !Array.isArray(suggestions) ||
         !every(suggestions, isString)
       ) {
         // check for incorrect data