You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,17 +10,17 @@ For pull requests, go the the *Pull Request* tab on the same repo. Select the br
10
10
11
11
## Repository Structure
12
12
13
-
In this repository, the source code for the component library is in the `src` directory. Building the repository creates a new folder `dist`, hidden through `.gitignore`, that compiles out the [Flow type annotations](https://flow.org/en/docs/types/) and [JSX](https://reactjs.org/docs/introducing-jsx.html). This is necessary to publish the code onto NPM so that other developers can use the code in their own apps, agnostic to their developer environments.
13
+
In this repository, the source code for the component library is in the `src` directory. Building the repository creates a new folder `dist`, hidden through `.gitignore`, that compiles out the [Typescript type annotations](https://www.typescriptlang.org/) and [JSX](https://reactjs.org/docs/introducing-jsx.html). This is necessary to publish the code onto NPM so that other developers can use the code in their own apps, agnostic to their developer environments.
14
14
15
15
The example app being run on the [GitHub Pages site](https://ginkgobioworks.github.io/react-json-schema-form-builder/), meanwhile, has its code stored in the `example` directory. It relies on an additional set of dependencies, which are stored in the `devDependencies` within the `package.json` file.
16
16
17
-
Library definitions for [Flow type annotations](https://flow.org/en/docs/types/) are stored in `flow-libdef`, where the file structure under the `flow-typed`[best practices](https://github.com/flow-typed/flow-typed/blob/master/CONTRIBUTING.md) are followed. If any of the types in `src/formBuilder/types.js` are changed, or if the properties of the `FormBuilder` or `PredefinedGallery` are altered, then these `flow-typed` library definitions as well as the definitions in the actual `flow-typed`[repository](https://github.com/flow-typed/flow-typed) should also be changed. These library definitions are updated manually, and are currently set for major version 1 of the Form Builder. To update to library definition in the `flow-typed` repository a PR must be made on the [flow-typed repository](https://github.com/flow-typed/flow-typed).
17
+
[Type declarations](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html) are also output to the `dist` folder for both the component library and the example site. If any of the types in `src/formBuilder/types.js` are changed, or if the properties of the `FormBuilder` or `PredefinedGallery` are altered, then these declaration files will be changedon the next build.
18
18
19
19
## Testing
20
20
21
21
The `src` directory also contains testing files written for the [jest](https://jestjs.io/en/) test harness. The tests use [Enzyme](https://github.com/enzymejs/enzyme) for component and DOM manipulation and traversal. These tests are run in the CI/CD pipeline, and must pass before a branch can be merged into the 'main' branch. Changes may be needed to the test harness to accommodate new features or fixes.
22
22
23
-
The CI/CD pipeline also runs `prettier`, `eslint`, and `flow` checks which must pass before a branch can be merged into 'main'. You can run `npm run prettier` to auto-format code to pass `prettier` standards, and `npm test` to run all of these tests to ensure that they will pass in the CI/CD pipeline.
23
+
The CI/CD pipeline also runs `prettier`, `eslint` and `tsc` checks which must pass before a branch can be merged into 'main'. You can run `npm run prettier` to auto-format code to pass `prettier` standards, and `npm test` to run all of these tests to ensure that they will pass in the CI/CD pipeline.
24
24
25
25
Test coverage is [tracked in coveralls.io](https://coveralls.io/github/ginkgobioworks/react-json-schema-form-builder) to make sure that test coverage is maintained or increased as time goes on.
@@ -4,78 +4,77 @@ Mods provide for the customization of the Form Builder component, such as the de
4
4
5
5
## Type Definition
6
6
7
-
Flow type definitions are available via [flow-typed](https://github.com/flow-typed/flow-typed).
7
+
Type definitions are available via [TypeScript](https://github.com/microsoft/TypeScript).
8
8
9
9
The type definition for Mods is as follows:
10
10
11
-
```react
12
-
declare type Mods = {|
11
+
```typescript
12
+
interfaceMods{
13
13
customFormInputs?: {
14
-
[string]: FormInput,
15
-
...
16
-
},
17
-
components?: {|
18
-
add?: (properties: { [string]: any }) => void,
19
-
},
20
-
tooltipDescriptions?: {|
21
-
add?: string,
22
-
cardObjectName?: string,
23
-
cardDisplayName?: string,
24
-
cardDescription?: string,
25
-
cardInputType?: string,
26
-
cardSectionObjectName?: string,
27
-
cardSectionDisplayName?: string,
28
-
cardSectionDescription?: string,
29
-
|},
30
-
labels?: {|
31
-
formNameLabel?: string,
32
-
formDescriptionLabel?: string,
33
-
objectNameLabel?: string,
34
-
displayNameLabel?: string,
35
-
descriptionLabel?: string,
36
-
inputTypeLabel?: string,
37
-
addElementLabel?: string,
38
-
addSectionLabel?: string,
39
-
|},
40
-
showFormHead?: boolean,
41
-
deactivatedFormInputs?: Array<string>,
14
+
[key:string]:FormInputType;
15
+
};
16
+
components?: {
17
+
add?: (properties?: {
18
+
[key:string]:any;
19
+
}) =>ReactElement|ReactElement[] | [];
20
+
};
21
+
tooltipDescriptions?: {
22
+
add?:string;
23
+
cardObjectName?:string;
24
+
cardDisplayName?:string;
25
+
cardDescription?:string;
26
+
cardInputType?:string;
27
+
cardSectionObjectName?:string;
28
+
cardSectionDisplayName?:string;
29
+
cardSectionDescription?:string;
30
+
};
31
+
labels?: {
32
+
formNameLabel?:string;
33
+
formDescriptionLabel?:string;
34
+
objectNameLabel?:string;
35
+
displayNameLabel?:string;
36
+
descriptionLabel?:string;
37
+
inputTypeLabel?:string;
38
+
addElementLabel?:string;
39
+
addSectionLabel?:string;
40
+
};
41
+
showFormHead?:boolean;
42
+
deactivatedFormInputs?:Array<string>;
42
43
newElementDefaultDataOptions?: {
43
-
title: string,
44
-
type?: string,
45
-
description?: string,
46
-
$ref?: string,
47
-
default?: string,
48
-
},
49
-
newElementDefaultUiSchema?: { [string]: any },
50
-
|};
44
+
title:string;
45
+
type?:string;
46
+
description?:string;
47
+
$ref?:string;
48
+
default?:string|number;
49
+
};
50
+
newElementDefaultUiSchema?: { [key:string]:any };
51
+
}
51
52
```
52
53
53
54
`tooltipDescriptions` and `labels` describe how some of the labels and tooltips in the Form Builder are to be customized. `showFormHead` is a boolean which controls whether the top section of the Form Builder, which contains inputs for the Form Name and Form Description, are show. It is set to `true` by default.
54
55
55
-
A single `FormInput` has a type definition as follows:
56
+
A single `FormInput` has a type definition `FormInputType`as follows:
56
57
57
-
```react
58
-
declare type FormInput = {|
59
-
displayName: string,
58
+
```typescript
59
+
interfaceFormInputType {
60
+
displayName:string;
60
61
// given a data and ui schema, determine if the object is of this input type
61
-
matchIf: Array<MatchType>,
62
+
matchIf:Array<MatchType>;
62
63
// allowed keys for ui:options
63
-
possibleOptions?: Array<string>,
64
+
possibleOptions?:Array<string>;
64
65
defaultDataSchema: {
65
-
[string]: any,
66
-
...
67
-
},
66
+
[key:string]:any;
67
+
};
68
68
defaultUiSchema: {
69
-
[string]: any,
70
-
...
71
-
},
69
+
[key:string]:any;
70
+
};
72
71
// the data schema type
73
-
type: DataType,
72
+
type:DataType;
74
73
// inputs on the preview card
75
-
cardBody: React$ComponentType<CardBodyProps>,
74
+
cardBody:CardComponentType;
76
75
// inputs for the modal
77
-
modalBody?: React$ComponentType<CardBodyProps>,
78
-
|};
76
+
modalBody?:CardComponentType;
77
+
}
79
78
```
80
79
81
80
The `displayName` is the full name of the desired form input. For example, **Short Answer** is the `displayName` for the `shortAnswer` form input.
@@ -90,8 +89,8 @@ The `displayName` is the full name of the desired form input. For example, **Sho
90
89
91
90
`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:
92
91
93
-
```react
94
-
declare type DataType =
92
+
```typescript
93
+
typeDataType=
95
94
|'string'
96
95
|'number'
97
96
|'boolean'
@@ -119,15 +118,15 @@ Custom input types are encoded in exactly the same way the Default input types a
119
118
120
119
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:
121
120
122
-
```react
123
-
declare type MatchType = {|
124
-
types: Array<DataType>,
125
-
widget?: string,
126
-
field?: string,
127
-
format?: string,
128
-
$ref?: boolean,
129
-
enum?: boolean,
130
-
|};
121
+
```typescript
122
+
interfaceMatchType{
123
+
types:Array<DataType>;
124
+
widget?:string;
125
+
field?:string;
126
+
format?:string;
127
+
$ref?:boolean;
128
+
enum?:boolean;
129
+
}
131
130
```
132
131
133
132
`types` refers to the set of possible input types that can register in a particular scenario.
@@ -144,30 +143,60 @@ declare type MatchType = {|
144
143
145
144
### Component Types
146
145
147
-
`cardBody` and `modalBody` are components whose props have a type of `CardBodyProps`:
146
+
`cardBody` and `modalBody` are components whose props have a type of `CardComponentType`:
`CardComponentPropsType` is a type that describes most params passed between cards and modals.
157
+
158
+
```typescript
159
+
interfaceCardComponentPropsType {
160
+
name:string;
161
+
required?:boolean;
162
+
hideKey?:boolean;
163
+
definitionData?: { [key:string]:any };
164
+
definitionUi?: { [key:string]:any };
165
+
neighborNames?:string[];
166
+
dependents?: { children:string[]; value?:any }[];
167
+
dependent?:boolean;
168
+
parent?:string;
169
+
'ui:options'?: { [key:string]:any };
170
+
category?:string;
171
+
schema?: { [key:string]:any };
172
+
type?:string;
173
+
'ui:column'?:string;
174
+
minLength?:number;
175
+
maxLength?:number;
176
+
pattern?:string;
177
+
'ui:autofocus'?:boolean;
178
+
'ui:placeholder'?:string;
179
+
minItems?:number;
180
+
maxItems?:number;
181
+
title?:string;
182
+
$ref?:string;
183
+
format?:string;
184
+
'ui:autocomplete'?:string;
185
+
default?:string|number|boolean;
186
+
items?: { [key:string]:any };
187
+
'ui:*items'?: { [key:string]:any };
188
+
multipleOf?:number|null;
189
+
minimum?:number|null;
190
+
exclusiveMinimum?:number|null;
191
+
maximum?:number|null;
192
+
exclusiveMaximum?:number|null;
193
+
enum?: (number|string)[];
194
+
enumNames?:string[] |null;
195
+
description?:string;
196
+
}
168
197
```
169
198
170
-
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`.
199
+
It can hold any number of keys pointing to specific values. One common example is `default`, which stores the default value specified by the builder for this `FormInput`.
0 commit comments