Skip to content

Commit 14945e0

Browse files
raymond-lamraymond-lam
committed
Fix several issues with the flow-libdef
Fix several issues with the flow-libdef - Remove `CardProps`, `SectionProps`, and `ElementProps`, which were vestigial and not currently being used. - Remove exactness in object definitions with indexer properties, as they are incompatible. - Export a props type for `cardBody` and `modalBody` components so that these components can be defined externally. - Use `React$ComponentType`, as `React$AbstractComponent` was incorrect.
1 parent 1516e74 commit 14945e0

File tree

3 files changed

+118
-88
lines changed

3 files changed

+118
-88
lines changed

‎docs/Plugins.md

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,52 +8,50 @@ Custom input types are encoded in exactly the same way the Default input types a
88

99
## Type Definition
1010

11-
Recall that the plugin input types are passed into `mods`, as a property called `customFormInputs`,into the `FormBuilder` (see [Usage](Usage.md)):
11+
Flow type defintions are available via [flow-typed](https://github.com/flow-typed/flow-typed).
12+
13+
Recall that the plugin input types are passed into `mods`, as a property called `customFormInputs`,into the `FormBuilder` (see [Usage](Usage.md)). The type definition is as follows:
1214

1315
```react
14-
export type Mods = {
16+
declare type Mods = {|
1517
customFormInputs?: {
16-
[string]: FormInput
18+
[string]: FormInput,
19+
...
1720
},
18-
tooltipDescriptions?: {
21+
tooltipDescriptions?: {|
1922
add?: string,
2023
cardObjectName?: string,
2124
cardDisplayName?: string,
2225
cardDescription?: string,
23-
cardInputType?: string
24-
}
25-
}
26+
cardInputType?: string,
27+
|},
28+
|};
2629
```
2730

2831
A single `FormInput` has a type definition as follows:
2932

3033
```react
31-
export type FormInput = {
34+
declare type FormInput = {|
3235
displayName: string,
3336
// given a data and ui schema, determine if the object is of this input type
3437
matchIf: Array<MatchType>,
3538
// allowed keys for ui:options
3639
possibleOptions?: Array<string>,
3740
defaultDataSchema: {
38-
[string]: any
41+
[string]: any,
42+
...
3943
},
4044
defaultUiSchema: {
41-
[string]: any
45+
[string]: any,
46+
...
4247
},
4348
// the data schema type
4449
type: DataType,
4550
// inputs on the preview card
46-
cardBody: React.AbstractComponent<{
47-
parameters: Parameters,
48-
onChange: (newParams: Parameters) => void,
49-
mods: { [string]: any }
50-
}>,
51+
cardBody: React$ComponentType<CardBodyProps>,
5152
// inputs for the modal
52-
modalBody?: React.AbstractComponent<{
53-
parameters: Parameters,
54-
onChange: (newParams: Parameters) => void
55-
}>
56-
}
53+
modalBody?: React$ComponentType<CardBodyProps>,
54+
|};
5755
```
5856

5957
The `displayName` is the full name of the desired form input. For example, **Short Answer** is the `displayName` for the `shortAnswer` form input.
@@ -68,15 +66,15 @@ The `displayName` is the full name of the desired form input. For example, **Sho
6866

6967
`type` is the Data Schema type that this input type defaults to. While a custom form input can have multiple types (would need to be defined in the `matchIf` array), this refers to the type that gets assigned immediately after a user selects this input type in the dropdown. The possible `DataType` options supported by `react-jsonschema-form` are as follows:
7068

71-
```typescript
72-
type DataType =
69+
```react
70+
declare type DataType =
7371
| 'string'
7472
| 'number'
7573
| 'boolean'
7674
| 'integer'
7775
| 'array'
7876
| '*'
79-
| null
77+
| null;
8078
```
8179

8280
`cardBody` refers to a React component that gets rendered in the card itself, when expanded. This React component gets a set of `Parameters` that provide additional information about the FormInput, such as the `title` or the `default` properties. For more information, see the *Parameters* section.
@@ -87,16 +85,15 @@ type DataType =
8785

8886
The `matchIf` array in a `FormInput` contains a series of `MatchType` objects, which represent different possible 'scenarios' that the `FormBuilder` may encounter when parsing a set of Data and UI Schema. The `MatchType` is defined as follows:
8987

90-
```typescript
91-
type MatchType = {
88+
```react
89+
declare type MatchType = {|
9290
types: Array<DataType>,
9391
widget?: string,
9492
field?: string,
95-
option?: { [string]: any },
9693
format?: string,
9794
$ref?: boolean,
98-
enum?: boolean
99-
}
95+
enum?: boolean,
96+
|};
10097
```
10198

10299
`types` refers to the set of possible input types that can register in a particular scenario.
@@ -111,20 +108,29 @@ type MatchType = {
111108

112109
`enum` is a boolean that evaluates to true if the component has a property `enum` in the Data Schema.
113110

114-
## Parameters
111+
## Component Types
112+
113+
`cardBody` and `modalBody` are components whose props have a type of `CardBodyProps`:
114+
115+
```react
116+
declare export type CardBodyProps = {|
117+
parameters: Parameters,
118+
onChange: (newParams: Parameters) => void,
119+
|};
120+
```
115121

116-
The following is a type definition for the Parameters object:
122+
`Parameters` is defined as:
117123

118124
```react
119-
export type Parameters = {
125+
declare type Parameters = {|
120126
[string]: string | number | boolean | Array<string | number>,
121127
name: string,
122128
path: string,
123-
definitionData: { [string]: any },
124-
definitionUi: { [string]: any },
129+
definitionData: { [string]: any, ... },
130+
definitionUi: { [string]: any, ... },
125131
category: string,
126-
'ui:option': { [string]: any }
127-
}
132+
'ui:option': { [string]: any, ... },
133+
|};
128134
```
129135

130136
It can hold any number of keys pointing to specific values. One common example is `parameters.default`, which stores the default value specified by the builder for this `FormInput`.

‎flow-libdef/@ginkgo-bioworks/react-json-schema-form-builder_v1.x.x/flow_v0.92.x-/react-json-schema-form-builder_v1.x.x.js

Lines changed: 19 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,17 @@
11
declare module '@ginkgo-bioworks/react-json-schema-form-builder' {
2-
declare type CardProps = {|
3-
name: string,
4-
required: boolean,
5-
dataOptions: {| [string]: any |},
6-
uiOptions: {| [string]: any |},
7-
$ref?: string,
8-
dependents?: Array<{|
9-
children: Array<string>,
10-
value?: any,
11-
|}>,
12-
dependent?: boolean,
13-
parent?: string,
14-
propType: string,
15-
neighborNames: Array<string>,
16-
|};
17-
18-
declare type SectionProps = {|
19-
name: string,
20-
required: boolean,
21-
schema: {| [string]: any |},
22-
uischema: {| [string]: any |},
23-
$ref?: string,
24-
dependents?: Array<{|
25-
children: Array<string>,
26-
value?: any,
27-
|}>,
28-
dependent?: boolean,
29-
propType: string,
30-
neighborNames: Array<string>,
31-
|};
32-
33-
declare type ElementProps = CardProps & SectionProps;
34-
352
declare type Parameters = {|
363
[string]: string | number | boolean | Array<string | number>,
374
name: string,
385
path: string,
39-
definitionData: {| [string]: any |},
40-
definitionUi: {| [string]: any |},
6+
definitionData: { [string]: any, ... },
7+
definitionUi: { [string]: any, ... },
418
category: string,
42-
'ui:option': {| [string]: any |},
9+
'ui:option': { [string]: any, ... },
10+
|};
11+
12+
declare export type CardBodyProps = {|
13+
parameters: Parameters,
14+
onChange: (newParams: Parameters) => void,
4315
|};
4416

4517
declare type DataType =
@@ -66,32 +38,28 @@ declare module '@ginkgo-bioworks/react-json-schema-form-builder' {
6638
matchIf: Array<MatchType>,
6739
// allowed keys for ui:options
6840
possibleOptions?: Array<string>,
69-
defaultDataSchema: {|
41+
defaultDataSchema: {
7042
[string]: any,
71-
|},
72-
defaultUiSchema: {|
43+
...
44+
},
45+
defaultUiSchema: {
7346
[string]: any,
74-
|},
47+
...
48+
},
7549
// the data schema type
7650
type: DataType,
7751
// inputs on the preview card
78-
cardBody: React$AbstractComponent<{|
79-
parameters: Parameters,
80-
onChange: (newParams: Parameters) => void,
81-
mods: {| [string]: any |},
82-
|}>,
52+
cardBody: React$ComponentType<CardBodyProps>,
8353
// inputs for the modal
84-
modalBody?: React$AbstractComponent<{|
85-
parameters: Parameters,
86-
onChange: (newParams: Parameters) => void,
87-
|}>,
54+
modalBody?: React$ComponentType<CardBodyProps>,
8855
|};
8956

9057
// optional properties that can add custom features to the form builder
9158
declare type Mods = {|
92-
customFormInputs?: {|
59+
customFormInputs?: {
9360
[string]: FormInput,
94-
|},
61+
...
62+
},
9563
tooltipDescriptions?: {|
9664
add?: string,
9765
cardObjectName?: string,

‎flow-libdef/@ginkgo-bioworks/react-json-schema-form-builder_v1.x.x/test_react-json-schema-form-builder_v1.x.x.js

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
FormBuilder,
66
PredefinedGallery,
77
} from '@ginkgo-bioworks/react-json-schema-form-builder';
8+
import type { CardBodyProps } from '@ginkgo-bioworks/react-json-schema-form-builder';
89
import { it, describe } from 'flow-typed-test';
910

1011
describe('@ginkgo-bioworks/react-json-schema-form-builder', () => {
@@ -20,7 +21,54 @@ describe('@ginkgo-bioworks/react-json-schema-form-builder', () => {
2021
mods: {},
2122
className: 'foo'
2223
};
23-
24+
const propsWithMods = {
25+
schema: '',
26+
uischema: '',
27+
onChange: (newSchema, newUiSchema) => {},
28+
mods: {
29+
customFormInputs: {
30+
customFormInput0: {
31+
displayName: 'custom form input 0',
32+
defaultDataSchema: {
33+
'type': 'number',
34+
},
35+
defaultUiSchema: {
36+
'ui:widget': 'customFormInput0',
37+
},
38+
type: 'number',
39+
cardBody: (props: CardBodyProps) => <div/>,
40+
modalBody: (props: CardBodyProps) => <div/>,
41+
matchIf: [{
42+
types: ['number'],
43+
widget: 'customFormInput0',
44+
}],
45+
},
46+
customFormInput1: {
47+
displayName: 'custom form input 1',
48+
defaultDataSchema: {
49+
'type': 'string',
50+
},
51+
defaultUiSchema: {
52+
'ui:field': 'customFormInput1',
53+
},
54+
type: 'string',
55+
cardBody: (props: CardBodyProps) => <div/>,
56+
modalBody: (props: CardBodyProps) => <div/>,
57+
matchIf: [{
58+
types: ['string'],
59+
field: 'customFormInput1',
60+
}],
61+
},
62+
},
63+
tooltipDescriptions: {
64+
add: 'add text',
65+
cardObjectName: 'card object name text',
66+
cardDisplayName: 'card display name text',
67+
cardDescription: 'card description text',
68+
cardInputType: 'card input type text',
69+
},
70+
},
71+
};
2472
const extraneousProps = {
2573
schema: '',
2674
uischema: '',
@@ -46,6 +94,10 @@ describe('@ginkgo-bioworks/react-json-schema-form-builder', () => {
4694
<FormBuilder {...optionalProps} />
4795
});
4896

97+
it('render the form builder with props with mods', () => {
98+
<FormBuilder {...propsWithMods} />
99+
});
100+
49101
it('form builder errors on extraneous properties passed in', () => {
50102
// $FlowExpectedError
51103
<FormBuilder {...extraneousProps} />
@@ -60,10 +112,14 @@ describe('@ginkgo-bioworks/react-json-schema-form-builder', () => {
60112
<PredefinedGallery {...props} />
61113
});
62114

63-
it('render predefined with optional props', () => {
115+
it('render predefined gallery with optional props', () => {
64116
<PredefinedGallery {...optionalProps} />
65117
});
66118

119+
it('render predefined gallery with mods in props', () => {
120+
<PredefinedGallery {...propsWithMods}/>
121+
})
122+
67123
it('predefined gallery errors on extraneous properties passed in', () => {
68124
// $FlowExpectedError
69125
<PredefinedGallery {...extraneousProps} />

0 commit comments

Comments
 (0)