Incorrect typings for react JsonForms component props

[bsShoham]

Describe the bug

JsonForm expected props are JsonFormsInitStateProps & JsonFormsReactProps, in which uischema type is UISchemaElement. That declaration is incorrect since it can't accept a Layout, which includes the elements field.

Expected behavior

the type should be replaced for something more inclusive and allow insertion of Layout type

Steps to reproduce the issue

1. Import JsonForms component
2. Insert required props for component
3. Add uischema prop with a value including "elements" field
4. See error

Screenshots

Both ways to type it correctly fail

The Error itself

In which browser are you experiencing the issue?

Microsoft Edge 94.0.992.38 (Official build) (64-bit)

Framework

React

RendererSet

Material

Additional context

using typescript 4.3.5 using @jsonforms/core 2.5.2 using @jsonforms/material-renderers 2.5.2 using @jsonforms/react 2.5.2

[sdirix]

Hi @bsShoham, thanks for the report. I agree that our typings are not ideal as Typescript is not smart enough to correctly identify valid inline UI Schemas.

However simply declaring your UI Schema without a type lets Typescript correctly infer its correctness, e.g. the following works fine:

const myUischema = {
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/name"
    }]
};

<JsonForms uischema={myUischema} {...otherProps}/>

If you want to type specifically then you need to construct it step by step, e.g.

import { ControlElement, Layout } from '@jsonforms/core';

const control: ControlElement = {
  "type": "Control",
  "scope": "#/properties/name"
};
const myUischema: Layout = {
  "type": "VerticalLayout",
  "elements": [
    control
  ]
};

[sdirix]

I'll close this issue for now as the typings are not incorrect. Feel free to reopen if you disagree.