Fix flow errors due to flow-bin upgrade

- Fix flow errors
- Allow null type in custom form input matchIf

Author: raymond-lam

docs/Mods.md

@@ -92,8 +92,8 @@ declare type DataType =
   | 'boolean'
   | 'integer'
   | 'array'
-  | '*'
-  | null;
+  | 'object'
+  | 'null';
 ```
 
 `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.
@@ -152,7 +152,7 @@ declare export type CardBodyProps = {|
 
 ```react
 declare type Parameters = {|
-  [string]: string | number | boolean | Array<string | number>,
+  [string]: any,
   name: string,
   path: string,
   definitionData: { [string]: any, ... },

example/package-lock.json

@@ -1,6 +1,6 @@
 declare module '@ginkgo-bioworks/react-json-schema-form-builder' {
   declare type Parameters = {|
-    [string]: string | number | boolean | Array<string | number>,
+    [string]: any,
     name: string,
     path: string,
     definitionData: { [string]: any, ... },
@@ -21,6 +21,7 @@ declare module '@ginkgo-bioworks/react-json-schema-form-builder' {
     | 'integer'
     | 'array'
     | 'object'
+    | 'null';
 
   declare type MatchType = {|
     types: Array<DataType>,

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

@@ -59,6 +59,23 @@ describe('@ginkgo-bioworks/react-json-schema-form-builder', () => {
             field: 'customFormInput1',
           }],
         },
+        customFormInput2: {
+          displayName: 'custom form input 2',
+          defaultDataSchema: {
+            'type': 'string',
+          },
+          defaultUiSchema: {
+            'ui:field': 'customFormInput2',
+          },
+          type: 'string',
+          cardBody: (props: CardBodyProps) => <div/>,
+          modalBody: (props: CardBodyProps) => <div/>,
+          matchIf: [{
+            types: ['null'],
+            field: 'customFormInput2',
+          }],
+        },
+
       },
       tooltipDescriptions: {
         add: 'add text',

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

@@ -13,6 +13,7 @@ import { faPlusSquare } from '@fortawesome/free-solid-svg-icons';
 import FontAwesomeIcon from './FontAwesomeIcon';
 import FBRadioGroup from './radio/FBRadioGroup';
 import { getRandomId } from './utils';
+import type { Node } from 'react';
 
 const useStyles = createUseStyles({
   addDetails: {
@@ -39,7 +40,7 @@ export default function Add({
 }: {
   addElem: (choice: string) => void,
   hidden?: boolean,
-}) {
+}): Node {
   const classes = useStyles();
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [createChoice, setCreateChoice] = useState('card');

src/formBuilder/Add.js

@@ -17,6 +17,7 @@ import Add from './Add';
 import FontAwesomeIcon from './FontAwesomeIcon';
 import Tooltip from './Tooltip';
 import { getRandomId } from './utils';
+import type { Node } from 'react';
 import type { Parameters, Mods, FormInput } from './types';
 
 const useStyles = createUseStyles({
@@ -127,7 +128,7 @@ export default function Card({
   mods?: Mods,
   allFormInputs: { [string]: FormInput },
   showObjectNameInput?: boolean,
-}) {
+}): Node {
   const classes = useStyles();
   const [modalOpen, setModalOpen] = React.useState(false);
   const [elementId] = React.useState(getRandomId());

src/formBuilder/Card.js

@@ -5,6 +5,7 @@ import { Input } from 'reactstrap';
 import { createUseStyles } from 'react-jss';
 import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons';
 import FontAwesomeIcon from './FontAwesomeIcon';
+import type { Node } from 'react';
 
 const useStyles = createUseStyles({
   cardEnumOption: {
@@ -34,7 +35,7 @@ export default function CardEnumOptions({
   showNames: boolean,
   onChange: (newEnums: Array<any>, newEnumNames?: Array<string>) => void,
   type: string,
-}) {
+}): Node {
   const classes = useStyles();
 
   const possibleValues = [];

src/formBuilder/CardEnumOptions.js

@@ -11,6 +11,7 @@ import Card from './Card';
 import Section from './Section';
 import Add from './Add';
 import DEFAULT_FORM_INPUTS from './defaults/defaultFormInputs';
+import type { Node } from 'react';
 import type { Mods } from './types';
 
 export default function CardGallery({
@@ -25,18 +26,19 @@ export default function CardGallery({
   onChange: ({ [string]: any }, { [string]: any }) => void,
   mods?: Mods,
   categoryHash: { [string]: string },
-}) {
+}): Node {
   const elementNum = countElementsFromSchema({
     properties: definitionSchema,
   });
   const defaultCollapseStates = [...Array(elementNum)].map(() => false);
   const [cardOpenArray, setCardOpenArray] = React.useState(
     defaultCollapseStates,
   );
-  const allFormInputs = {
-    ...DEFAULT_FORM_INPUTS,
-    ...(mods && mods.customFormInputs),
-  };
+  const allFormInputs = Object.assign(
+    {},
+    DEFAULT_FORM_INPUTS,
+    (mods && mods.customFormInputs) || {},
+  );
   const componentArr = generateElementComponentsFromSchemas({
     schemaData: { properties: definitionSchema },
     uiSchemaData: definitionUiSchema,

src/formBuilder/CardGallery.js

@@ -13,6 +13,7 @@ import {
   subtractArray,
   getRandomId,
 } from './utils';
+import type { Node } from 'react';
 import type { Parameters, Mods, FormInput } from './types';
 import Tooltip from './Tooltip';
 
@@ -29,7 +30,7 @@ export default function CardGeneralParameterInputs({
   mods?: Mods,
   allFormInputs: { [string]: FormInput },
   showObjectNameInput?: boolean,
-}) {
+}): Node {
   const [keyState, setKeyState] = React.useState(parameters.name);
   const [titleState, setTitleState] = React.useState(parameters.title);
   const [descriptionState, setDescriptionState] = React.useState(

src/formBuilder/CardGeneralParameterInputs.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Modal, ModalHeader, Button, ModalBody, ModalFooter } from 'reactstrap';
 import { createUseStyles } from 'react-jss';
 import DependencyField from './dependencies/DependencyField';
+import type { Node } from 'react';
 import type { Parameters } from './types';
 
 const useStyles = createUseStyles({
@@ -46,7 +47,7 @@ export default function CardModal({
     parameters: Parameters,
     onChange: (newParams: Parameters) => void,
   }>,
-}) {
+}): Node {
   const classes = useStyles();
   // assign state values for parameters that should only change on hitting "Save"
   const [componentPropsState, setComponentProps] =