Update imports and remove flowtypes (#49) (#54)

Co-authored-by: Elston Aw <elston@elstonayx.co>

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-flow",
     "@babel/preset-react"
   ],
   "plugins": [
@@ -20,7 +19,6 @@
     "test": {
       "presets": [
         "@babel/preset-env",
-        "@babel/preset-flow",
         "@babel/preset-react"
       ]
     }

.eslintrc.js

@@ -3,17 +3,11 @@ const path = require('path')
 module.exports = {
   extends: [
     'standard',
-    'plugin:flowtype/recommended',
     'plugin:react/recommended',
     'prettier'
   ],
   parser: 'babel-eslint',
-  settings: {
-    flowtype: {
-      onlyFilesWithFlowAnnotation: true
-    }
-  },
-  plugins: ['standard', 'flowtype', 'promise', 'import', 'react', 'jsx-a11y'],
+  plugins: ['standard', 'promise', 'import', 'react', 'jsx-a11y'],
   env: {
     mocha: true,
     node: true,
@@ -31,7 +25,8 @@ module.exports = {
     'no-useless-return': 0,
     camelcase: 0,
     'prefer-const': 1,
-    'react/prop-types': [2, { ignore: ['className'] }],
+    // TODO(elstonayx): Set prop-types rule to 2 when we migrate to TS.
+    'react/prop-types': [1, { ignore: ['className'] }],
     'no-multi-spaces': [2, { ignoreEOLComments: true }],
     'import/no-webpack-loader-syntax': 0,
     'no-use-before-define': [0],

.github/workflows/build-website.yml

@@ -2,9 +2,9 @@ name: Build Metronome
 
 on:
   push:
-    branches: [ main ]
+    branches: [ main, v1.1.x ]
   pull_request:
-    branches: [ main ]
+    branches: [ main, v1.1.x ]
 
 jobs:
   lint:

components/BaseComponent.es6.js

@@ -1,11 +1,10 @@
-/* @flow */
 import React from 'react'
 import { pick, isEqual } from 'lodash'
 
-class BaseComponent<P: Object, S: ?Object = void> extends React.Component<P, S> {
-  propsToTrack: Array<string> = []
+class BaseComponent extends React.Component {
+  propsToTrack = []
 
-  shouldComponentUpdate (nextProps: P, nextState: S) {
+  shouldComponentUpdate (nextProps, nextState) {
     if (this.propsToTrack.length === 0) {
       return true
     }

components/form/button-group/ButtonGroup.es6.js

@@ -1,18 +1,7 @@
-/* @flow */
-
 import * as React from 'react'
 import classnames from 'classnames'
-import Button from '../button/Button.es6'
-
-type ButtonType = React.Element<typeof Button>
-
-type Props = {
-  className?: string | Object,
-  vertical?: boolean,
-  children: React.ChildrenArray<ButtonType> | ButtonType
-}
 
-function ButtonGroup ({ vertical, className, children }: Props) {
+function ButtonGroup ({ vertical, className, children }) {
   return (
     <div className={classnames({
       'ds-button-group': true,

components/form/checkbox/Checkbox.es6.js

@@ -1,21 +1,10 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import type { Element } from 'react'
 
 import { Checkmark } from '../../Icons.es6.js'
 
-type Props = {|
-  label: string | Element <*>,
-  name: string,
-  checked: boolean,
-  indeterminate: boolean,
-  disabled: boolean,
-  hasError: boolean,
-  onChange: (val: boolean) => void
-|}
 
-function Checkbox ({ disabled, checked, indeterminate, label, name, onChange, hasError }: Props) {
+function Checkbox ({ disabled, checked, indeterminate, label, name, onChange, hasError }) {
   const setCheckboxRef = checkbox => {
     if (checkbox) {
       checkbox.indeterminate = indeterminate

components/form/checkbox/CheckboxSelect.es6.js

@@ -1,35 +1,18 @@
-/* @flow */
 import React from 'react'
-import type { Key } from 'react'
-import type { OptionValue } from '../option/Option.es6.js'
 import { isEqual } from 'lodash'
 
 import Checkbox from '../checkbox/Checkbox.es6.js'
 import Option from '../option/Option.es6.js'
 import Select from '../select/Select.es6.js'
 
-type SelectOption = {|
-  label: string,
-  value: OptionValue
-|}
 
-type Props = {|
-  key?: Key,
-  checked: boolean,
-  disabled: boolean,
-  label: string,
-  onChange: () => void,
-  onSelectChange: (value: number) => void,
-  selectOptions: Array<SelectOption>,
-  selectedOption: ?SelectOption
-|}
 
 /**
  * CheckboxSelect - a checkbox that when checked, reveals additional options
  * underneath in a Select component dropdown.
  */
 function CheckboxSelect ({ checked, disabled, label, onChange, onSelectChange,
-  selectOptions, selectedOption }: Props) {
+  selectOptions, selectedOption }) {
   const placeholder = selectedOption ? selectedOption.label : 'Please select'
   const options = selectOptions.map((option, index) => {
     const isActive = selectedOption ? isEqual(option.value,

components/form/datetime-picker/DatePicker.es6.js

@@ -1,18 +1,11 @@
-/* @flow */
 import React from 'react'
 import DatePicker from 'react-datepicker'
 
 import Toggle from '../toggle/Toggle.es6.js'
 import DropdownStyles from '../dropdown-styles/DropdownStyles.es6.js'
 
-type Props = {
-  label?: string,
-  onChange?: (datetime: moment$Moment) => void,
-  onChangeRaw?: (datetimeRaw: string) => void,
-  value?: ?moment$Moment
-}
 
-function B12DatePicker ({ onChange, value, label, ...rest }: Props) {
+function B12DatePicker ({ onChange, value, label, ...rest }) {
   return (
     <div className="ds-form-control-select">
       <div className="ds-control-label">

components/form/datetime-picker/DatetimePicker.es6.js

@@ -1,26 +1,13 @@
-/* @flow */
 
 import * as React from 'react'
 import moment from 'moment'
 import { debounce } from 'lodash'
 
 const UPDATE_DEBOUNCE_INTERVAL = 700
 
-type Props = {|
-  children: React.Node,
-  dateOnly: boolean,
-  fieldName?: string,
-  timeOnly: boolean,
-  updateDatetime: (datetime: string | null) => void,
-  uuid?: UUID,
-  value?: moment$Moment
-|}
-
-type State = {|
-  datetime: ?moment$Moment
-|}
-
-class DatetimePicker extends React.Component<Props, State> {
+
+
+class DatetimePicker extends React.Component {
   state = {
     datetime: this.props.value
   }
@@ -34,15 +21,15 @@ class DatetimePicker extends React.Component<Props, State> {
   // text is input into the time field, the date field's datepicker also observes a change
   // and fires its onChange event. This boolean flag is used to prevent that extra onChange
   // event from firing.
-  textInput: ?boolean
+  textInput
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps) {
     if(prevProps.value !== this.props.value) {
       this.setState({datetime: this.props.value})
     }
   }
 
-  handleChange = (datetime: moment$Moment): void => {
+  handleChange = (datetime) => {
     const { dateOnly, timeOnly, updateDatetime } = this.props
 
     if (this.textInput) {
@@ -74,7 +61,7 @@ class DatetimePicker extends React.Component<Props, State> {
   handleChangeDebounced = debounce(this.handleChange, UPDATE_DEBOUNCE_INTERVAL)
 
   // Handles update of time picker via text input
-  handleChangeRaw = (datetimeRaw: string): void => {
+  handleChangeRaw = (datetimeRaw) => {
     const datetime = this.state.datetime || moment()
     const newDatetime = moment.utc(datetimeRaw, 'h:mm A', true)
 

components/form/datetime-picker/TimePicker.es6.js

@@ -1,15 +1,8 @@
-/* @flow */
 import React from 'react'
 import DatePicker from 'react-datepicker'
 
-type Props = {
-  label?: string,
-  onChange?: (datetime: moment$Moment) => void,
-  onChangeRaw?: (datetimeRaw: string) => void,
-  value?: ?moment$Moment
-}
 
-function B12TimePicker ({ label, onChange, onChangeRaw, value, ...rest }: Props) {
+function B12TimePicker ({ label, onChange, onChangeRaw, value, ...rest }) {
   return (
     <div className="ds-form-control-wrap">
       <div className="ds-control-label">

components/form/dimension/DimensionBoolean.es6.js

@@ -1,17 +1,10 @@
-// @flow
 import React from 'react'
 
 import Checkbox from '../checkbox/Checkbox.es6.js'
 import Tooltip from './Tooltip.es6.js'
 
-type Props = {|
-  label: string,
-  help?: string,
-  value: boolean,
-  onChange: (value: boolean) => void
-|}
 
-class DimensionBoolean extends React.Component<Props> { 
+class DimensionBoolean extends React.Component { 
   render () {
     const { label, help, value, onChange } = this.props
 

components/form/dimension/DimensionGroup.es6.js

@@ -1,16 +1,6 @@
-// @flow
-
 import * as React from 'react'
 
-import DimensionInput from './DimensionInput.es6.js'
-
-type DimensionInputType = React.Element<typeof DimensionInput>
-
-type Props = {
-  children: React.ChildrenArray<DimensionInputType> | DimensionInputType
-}
-
-class DimensionGroup extends React.Component<Props> {
+class DimensionGroup extends React.Component {
   render () {
     return (
       <div className="ds-form-input-dimension__group">

components/form/dimension/DimensionInput.es6.js

@@ -1,4 +1,3 @@
-// @flow
 import React from 'react'
 import classnames from 'classnames'
 
@@ -9,21 +8,9 @@ import Select from '../select/Select.es6.js'
 import Option from '../option/Option.es6.js'
 import Tooltip from './Tooltip.es6.js'
 
-type State = {|
-  isValid: boolean
-|}
 
-type Props = {|
-  label: string,
-  help?: string,
-  value: string,
-  units: Array<string>,
-  selectedUnit: ?string,
-  fixedUnit?: string,
-  onUpdate: (value: string, unit: string) => void
-|}
 
-class DimensionInput extends React.Component<Props, State> {
+class DimensionInput extends React.Component {
   static defaultProps = {
     units: [],
     selectedUnit: ''
@@ -33,14 +20,14 @@ class DimensionInput extends React.Component<Props, State> {
     isValid: true
   }
 
-  onValueChange = (value: string) => {
+  onValueChange = (value) => {
     this.setState({
       isValid: !isEmpty(value)
     })
     this.props.onUpdate(value, this.props.selectedUnit || '')
   }
 
-  onUnitChange = (selectedUnit: string) => {
+  onUnitChange = (selectedUnit) => {
     this.props.onUpdate(this.props.value, selectedUnit)
   }
 

components/form/dimension/DimensionSelect.es6.js

@@ -1,19 +1,11 @@
-// @flow
 import React from 'react'
 
 import Select from '../select/Select.es6.js'
 import Option from '../option/Option.es6.js'
 import Tooltip from './Tooltip.es6.js'
 
-type Props = {|
-  label: string,
-  help?: string,
-  choices: Array<string>,
-  selectedChoice?: string,
-  onChange: (value: string) => void
-|}
 
-class DimensionSelect extends React.Component<Props> {
+class DimensionSelect extends React.Component {
   render () {
     const { label, selectedChoice, onChange, choices, help } = this.props
 

components/form/dimension/Tooltip.es6.js

@@ -1,14 +1,10 @@
-// @flow
 import React from 'react'
 
 import Info from '../../../components/layout/info/Info.es6.js'
 import { InfoCircle } from '../../../components/Icons.es6.js'
 
-type Props = {
-  help?: string
-}
 
-export default function Tooltip ({ help }: Props) {
+export default function Tooltip ({ help }) {
   if (!help) {
     return null
   }