[no jira]: Fixing Flow 0.132.0 (#660)

* [no jira]: Upgrading and fixing Flow 0.132.0

* [no jira]: Flow 0.132.0 fixes

* Re-enabling flow for CI

.flowconfig

@@ -5,6 +5,7 @@
 .*/backpack-ios/.*
 .*/backpack/.*
 .*/node_modules/jsonlint/.*
+.*/node_modules/jsonlint-mod/.*
 .*/node_modules/config-chain/test/broken.json
 
 [include]

docs/src/components/DocsPageBuilder/BpkDoDont.js

@@ -20,7 +20,7 @@
 
 // Uses https://github.com/rexxars/react-markdown
 
-import React from 'react';
+import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from 'bpk-react-utils';
 import BpkText from 'bpk-component-text';
@@ -32,7 +32,9 @@ const getClassName = cssModules(STYLES);
 const DO_DONT_TYPES = ['do', 'dont'];
 
 export type Props = {
+  children: Node,
   type: string,
+  className: ?string,
 };
 
 const BpkDoDont = (props: Props) => {
@@ -56,6 +58,7 @@ const BpkDoDont = (props: Props) => {
   }
 
   return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'.
     <div className={classNames.join(' ')} {...rest}>
       <BpkText
         tagName="h4"

docs/src/components/DocsPageBuilder/BpkMarkdownRenderer.js

@@ -117,7 +117,7 @@ const BpkMarkdownRenderer = (props: Props) => {
     const { language, value, ...codeBlockRest } = codeBlockProps;
     return <BpkCodeBlock {...codeBlockRest}>{value}</BpkCodeBlock>;
   };
-
+  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'.
   return <ReactMarkdown renderers={renderers} {...rest} />;
 };
 

docs/src/components/GuidelinesBuilder/GuidelinesPageBuilder.js

@@ -149,7 +149,7 @@ GuidelinesPageBuilder.propTypes = {
   hero: PropTypes.shape({
     imageUrl: PropTypes.string.isRequired,
     heading: PropTypes.string.isRequired,
-    className: PropTypes.string.isRequired,
+    className: PropTypes.string,
   }).isRequired,
   sections: PropTypes.arrayOf(
     PropTypes.shape({

docs/src/components/HomePageCard/HomePageCard.js

@@ -58,6 +58,7 @@ const HomePageCard = (props: Props) => {
   );
 
   return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'.
     <BpkCard
       key={title}
       href={href}

docs/src/components/PageHead/PageHead.js

@@ -52,7 +52,7 @@ type Props = {
   title: string,
   blurb: string | Node,
   wrapped: boolean,
-  menu: ?Array<MenuItem>,
+  menu: Array<MenuItem>,
   className: ?string,
 };
 const PageHead = (props: Props) => {
@@ -98,4 +98,8 @@ const PageHead = (props: Props) => {
   );
 };
 
+PageHead.defaultProps = {
+  menu: [],
+};
+
 export default PageHead;

docs/src/layouts/SideNavLayout/NavList.js

@@ -44,6 +44,7 @@ const NavLink = (props: LinkPropType) => {
 
   if (route) {
     return (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'.
       <RouterNavLink
         className={getClassName('bpkdocs-side-nav-list__link')}
         activeClassName={getClassName('bpkdocs-side-nav-list__link--active')}
@@ -89,6 +90,7 @@ const NavListCategory = (props: NavListCategoryPropType) => (
           return x.tags && x.tags.indexOf(props.selectedFilter) >= 0;
         })
         .map(link => (
+          // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'.
           <NavListItem key={link.id} {...link} onClick={props.onClick} />
         ))}
     </ul>
@@ -142,6 +144,7 @@ class NavList extends Component<NavListPropTypes, NavListState> {
         />
         <ul className={getClassName('bpkdocs-side-nav-list__list')}>
           {links.map(link => (
+            // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'.
             <NavListCategory
               key={link.id}
               {...link}

docs/src/pages/BagCheckPage/BagCheckPage.js

@@ -25,9 +25,8 @@ import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './bag-check-page.scss';
 
-// $FlowFixMe
-/* eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved */
-const bookmarklet = require('!!raw-loader!uglify-loader!babel-loader!../../bag-check-bookmarklet');
+// $FlowIgnore[cannot-resolve-module] - This is valid due to how the bookmarklet is loaded
+const bookmarklet = require('!!raw-loader!uglify-loader!babel-loader!../../bag-check-bookmarklet'); /* eslint-disable-line import/no-webpack-loader-syntax, import/no-unresolved */
 
 const getClassName = cssModules(STYLES);
 

docs/src/pages/MobileScrollContainerPage/BlockExample.js

@@ -32,17 +32,12 @@ type Props = {
 };
 
 const BlockExampleItem = (props: Props) => {
-  const classNames = ['bpkdocs-block-example__item'];
-
-  if (props.alternate) {
-    classNames.push('bpkdocs-block-example__item--alternate');
-  }
-
-  return (
-    <div className={classNames.map(getClassName).join(' ')}>
-      {props.children}
-    </div>
+  const classNames = getClassName(
+    'bpkdocs-block-example__item',
+    props.alternate && 'bpkdocs-block-example__item--alternate',
   );
+
+  return <div className={classNames}>{props.children}</div>;
 };
 
 /* eslint-disable react/no-array-index-key */

docs/src/pages/ModalsPage/ModalsPage.js

@@ -80,6 +80,7 @@ class ModalContainer extends Component<Props, State> {
     return (
       <div>
         <BpkButton onClick={this.onOpen}>{buttonText}</BpkButton>
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'. */}
         <BpkModal
           id="my-modal"
           isOpen={this.state.isOpen}

docs/src/pages/NavigationStackPage/page-components.js

@@ -126,6 +126,7 @@ export const SimplePage = ({
       onClick={() =>
         pushView &&
         pushView(
+          // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'.
           <SimplePage
             index={index + 1}
             pushView={pushView}

docs/src/pages/PhoneInputPage/PhoneInputPage.js

@@ -70,6 +70,7 @@ class StoryContainer extends Component<Props, State> {
 
   render() {
     return (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'.
       <BpkPhoneInput
         id="phone-input-id"
         name="Telephone input"

docs/src/pages/WebDialogPage/DialogExamples.js

@@ -38,6 +38,7 @@ const MarginDiv = withDefaultProps(BpkText, {
   className: getClassName('bpk-docs-dialog-examples-margin-div'),
 });
 
+// $FlowFixMe[incompatible-call] - Need to check if the function `withDefaultProps` should be updated to support
 const AlignRight = withDefaultProps('div', {
   className: getClassName('bpk-docs-dialog-examples-align-right'),
 });
@@ -80,6 +81,7 @@ export class DialogContainer extends Component<
     return (
       <div>
         <BpkButton onClick={this.onOpen}>Open Dialog</BpkButton>
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'. */}
         <BpkDialog
           closeLabel="Close dialog"
           id="default-dialog"
@@ -135,6 +137,7 @@ export class NonDismissibleDialogContainer extends Component<
     return (
       <div>
         <BpkButton onClick={this.onOpen}>Open Dialog</BpkButton>
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'https://github.com/Skyscanner/backpack/blob/master/decisions/flowfixme.md'. */}
         <BpkDialog
           id="non-dissmissible-dialog"
           className="my-classname"

docs/src/pages/WebNudgersPage/NudgersPage.js

@@ -30,7 +30,7 @@ import STYLES from './nudger-page.scss';
 
 const getClassName = cssModules(STYLES);
 class NudgerContainer extends Component<
-  { buttonType: ?string },
+  { buttonType: string },
   { value: number },
 > {
   constructor() {

package.json

@@ -27,7 +27,7 @@
     "start": "npm run docs",
     "docs": "npm run submodules:pull && BPK_BUILT_AT=$( date -u +%s ) webpack-dev-server --open",
     "docs:dist": "npm run submodules:pull && npm run clean:dist && NODE_ENV=production BPK_BUILT_AT=$( date -u +%s ) webpack --progress --display=minimal --bail",
-    "test": "npm run lint && echo \"SKIPPING FLOW CHECK DUE TO CI RESOURCE CONSTRAINTS\" && npm run spellcheck && npm run jest",
+    "test": "npm run lint && npm run flow && npm run spellcheck && npm run jest",
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",