fix: Remove flow types

.eslintrc

@@ -6,14 +6,14 @@
     "jest": true
   },
   "parser": "babel-eslint",
-  "plugins": ["babel", "react", "jest", "flowtype"],
+  "plugins": ["babel", "react", "jest"],
   "settings": {
     "react": {
       "pragma": "React",
       "version": "16"
     }
   },
-  "extends": ["plugin:flowtype/recommended", "eslint-config-prettier"],
+  "extends": ["eslint-config-prettier"],
   "rules": {
     "no-cond-assign": 2,
     "no-console": 0,
@@ -183,7 +183,5 @@
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "jest/no-focused-tests": 2,
-
-    "flowtype/space-after-type-colon": 0
   }
 }

package.json

@@ -12,7 +12,7 @@
     "test-unit": "BABEL_ENV=test jest --config ./jest.config.json",
     "test-unit-watch": "npm run test-unit -- --watch",
     "update-snapshot": "npm run test-unit -- --updateSnapshot",
-    "lint": "npm run lint-js && npm run lint-less && npm run flow && npm run lint-format",
+    "lint": "npm run lint-js && npm run lint-less && npm run lint-format",
     "lint-js": "eslint docs/src react test",
     "lint-less": "stylelint '{theme,react,docs}/**/*.less'",
     "lint-format": "prettier --check \"**/*.{js,ts,tsx,md,less,css}\"",
@@ -35,8 +35,7 @@
     "commitmsg": "commitlint --edit --extends seek",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
     "sketch-to-git": "node scripts/sketch-to-git",
-    "git-to-sketch": "node scripts/git-to-sketch",
-    "flow": "flow focus-check ."
+    "git-to-sketch": "node scripts/git-to-sketch"
   },
   "config": {
     "commitizen": {
@@ -77,7 +76,6 @@
     "babel-jest": "^21.2.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-add-react-displayname": "^0.0.4",
-    "babel-plugin-flow-react-proptypes": "^24.1.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -100,10 +98,8 @@
     "eslint": "^5.6.0",
     "eslint-config-prettier": "^4.0.0",
     "eslint-plugin-babel": "^5.2.0",
-    "eslint-plugin-flowtype": "^2.50.0",
     "eslint-plugin-jest": "^21.22.0",
     "eslint-plugin-react": "^7.11.1",
-    "flow-bin": "^0.81.0",
     "gh-pages": "^1.0.0",
     "hex-rgb": "^3.0.0",
     "html-minifier": "^3.5.6",

react/Badge/Badge.js

@@ -1,35 +1,18 @@
-// @flow
-
+/* eslint-disable react/prop-types */
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
 import omit from 'lodash/omit';
 
 import styles from './Badge.less';
 import { TONE } from '../private/tone';
 
-type Tone =
-  | 'accent'
-  | typeof TONE.CRITICAL
-  | typeof TONE.INFO
-  | typeof TONE.NEUTRAL
-  | typeof TONE.POSITIVE
-  | 'secondary';
-
-type Props = {
-  children: React$Node,
-  tone: Tone,
-  strong?: boolean
-};
-
-export default class Badge extends PureComponent<Props> {
+export default class Badge extends PureComponent {
   static displayName = 'Badge';
 
   static defaultProps = {
     tone: TONE.NEUTRAL
   };
 
-  props: Props;
-
   render() {
     const { children, tone, strong, ...restProps } = this.props;
 

react/Button/Button.js

@@ -1,21 +1,10 @@
-// @flow
+/* eslint-disable react/prop-types */
 import styles from './Button.less';
 import React from 'react';
 import { Component } from 'react';
 import classnames from 'classnames';
 import capitalize from 'lodash/capitalize';
-
-type Props = {
-  color: 'pink' | 'blue' | 'gray' | 'transparent' | 'white',
-  children: React$Node,
-  className?: string,
-  component?: string | Function,
-  ghost?: boolean,
-  loading?: boolean,
-  fullWidth?: boolean
-};
-
-export default class Button extends Component<Props> {
+export default class Button extends Component {
   static displayName = 'Button';
 
   static defaultProps = {
@@ -26,9 +15,6 @@ export default class Button extends Component<Props> {
     component: 'button'
   };
 
-  button: ?HTMLElement;
-  props: Props;
-
   render() {
     const {
       color,

react/FieldMessage/FieldMessage.js

@@ -1,4 +1,4 @@
-// @flow
+/* eslint-disable react/prop-types */
 import styles from './FieldMessage.less';
 
 import React, { Component } from 'react';
@@ -11,22 +11,7 @@ import TickCircleIcon from '../TickCircleIcon/TickCircleIcon';
 import Text from '../Text/Text';
 import { TONE } from '../private/tone';
 
-type Props = {
-  id: string,
-  invalid?: boolean,
-  help?: string,
-  helpProps?: Object,
-  valid?: boolean,
-  message: false | string | Node,
-  messageProps: {
-    critical?: boolean,
-    positive?: boolean,
-    secondary?: boolean
-  },
-  tone?: 'positive' | 'critical' | 'neutral'
-};
-
-export default class FieldMessage extends Component<Props> {
+export default class FieldMessage extends Component {
   static displayName = 'FieldMessage';
 
   static defaultProps = {

react/Highlight/Highlight.js

@@ -1,17 +1,9 @@
-// @flow
+/* eslint-disable react/prop-types */
 import styles from './Highlight.less';
 import React from 'react';
 import classnames from 'classnames';
-import { TONE } from '../private/tone';
 
-type Props = {
-  children: React$Node,
-  secondary?: boolean,
-  className?: string,
-  tone?: typeof TONE.CRITICAL
-};
-
-export default function Highlight(props: Props) {
+export default function Highlight(props) {
   const { children, secondary, tone, className, ...restProps } = props;
 
   return (

react/Loader/Loader.js

@@ -1,18 +1,9 @@
-// @flow
-
+/* eslint-disable react/prop-types */
 import React from 'react';
 import styles from './Loader.less';
 import classnames from 'classnames';
 
-export default function Loader({
-  inline,
-  small,
-  xsmall
-}: {
-  inline?: boolean,
-  small?: boolean,
-  xsmall?: boolean
-}) {
+export default function Loader({ inline, small, xsmall }) {
   return (
     <div
       className={classnames(styles.root, {

react/Pill/Pill.js

@@ -1,25 +1,15 @@
-// @flow
+/* eslint-disable react/prop-types */
 import styles from './Pill.less';
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import Text from '../Text/Text';
 import CrossIcon from '../CrossIcon/CrossIcon';
 import ScreenReaderOnly from '../ScreenReaderOnly/ScreenReaderOnly';
 
-type Props = {
-  children?: React$Node,
-  buttonType?: string,
-  text?: React$Node,
-  onClose?: Function,
-  className?: string
-};
-
-export default class Pill extends Component<Props> {
+export default class Pill extends Component {
   static displayName = 'Pill';
 
-  props: Props;
-
-  handleClose = (event: Object) => {
+  handleClose = event => {
     const { onClose } = this.props;
     if (onClose) {
       onClose(event);

react/ReadMore/ReadMore.js

@@ -1,4 +1,4 @@
-// @flow
+/* eslint-disable react/prop-types */
 import styles from './ReadMore.less';
 
 import React, { PureComponent } from 'react';
@@ -11,7 +11,7 @@ import TextLink from '../TextLink/TextLink';
 const { rowHeight, standardTypeRowSpan, interactionTypeRowSpan } = themeVars;
 const buttonHeight = rowHeight * interactionTypeRowSpan;
 
-const getMaxHeight = (maxLines?: number, maxRows?: number) => {
+const getMaxHeight = (maxLines, maxRows) => {
   if (maxLines) {
     return maxLines * rowHeight * standardTypeRowSpan;
   }
@@ -23,29 +23,14 @@ const getMaxHeight = (maxLines?: number, maxRows?: number) => {
   return 0;
 };
 
-type Props = {|
-  children: React$Element<*>,
-  maxLines?: number,
-  maxRows?: number,
-  moreLabel: string,
-  lessLabel: string,
-  backgroundComponentName: 'card' | 'body' | 'gray-lightest',
-  onShowMore?: Function,
-  onMoreButtonVisibilityChange?: Function
-|};
-type State = {|
-  showMore: boolean,
-  tooLong: boolean,
-  mounted: boolean
-|};
-class ReadMore extends PureComponent<Props, State> {
+class ReadMore extends PureComponent {
   static defaultProps = {
     moreLabel: 'More',
     lessLabel: 'Less',
     backgroundComponentName: 'card'
   };
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
 
     this.contentRef = null;
@@ -65,8 +50,6 @@ class ReadMore extends PureComponent<Props, State> {
     this.update();
   }
 
-  contentRef: ?HTMLDivElement;
-
   update = () => {
     const { maxLines, maxRows, onMoreButtonVisibilityChange } = this.props;
 
@@ -84,7 +67,7 @@ class ReadMore extends PureComponent<Props, State> {
     }
   };
 
-  setTextRef = (element: ?HTMLDivElement) => {
+  setTextRef = element => {
     this.contentRef = element;
   };
 

react/Section/Section.js

@@ -1,25 +1,8 @@
-// @flow
+/* eslint-disable react/prop-types */
 import classnames from 'classnames';
 import React from 'react';
 
 import styles from './Section.less';
-import { TONE } from '../private/tone';
-import type { Level } from '../private/level';
-
-type Props = {
-  children: any,
-  className: string,
-  header: boolean,
-  pullout: boolean,
-  slim: boolean,
-  tone:
-    | typeof TONE.POSITIVE
-    | typeof TONE.CRITICAL
-    | typeof TONE.INFO
-    | typeof TONE.HELP
-    | '',
-  level: Level | ''
-};
 
 export default function Section({
   children,
@@ -30,7 +13,7 @@ export default function Section({
   tone,
   level,
   ...restProps
-}: Props) {
+}) {
   return (
     <div
       {...restProps}