flowtype components

src/components/Button/index.js

@@ -1,9 +1,24 @@
-import React from 'react';
+/* @flow */
+
+import * as React from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
 import { TRANSITION, FONT_WEIGHT, FONT_SIZE } from 'config/variables';
 
+type Props = {
+    children: React.Node,
+    className?: string,
+    onClick: () => any,
+    onMouseEnter?: () => void,
+    onMouseLeave?: () => void,
+    onFocus?: () => void,
+    isDisabled?: boolean,
+    isWhite?: boolean,
+    isWebUsb?: boolean,
+    isTransparent?: boolean,
+}
+
 const Wrapper = styled.button`
     padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')};
     border-radius: 3px;
@@ -108,8 +123,8 @@ const Wrapper = styled.button`
 
 const Button = ({
     children,
-    className,
-    onClick = () => { },
+    className = '',
+    onClick,
     onMouseEnter,
     onMouseLeave,
     onFocus,
@@ -117,7 +132,7 @@ const Button = ({
     isWhite = false,
     isWebUsb = false,
     isTransparent = false,
-}) => {
+}: Props) => {
     const newClassName = isWebUsb ? `${className} trezor-webusb-button` : className;
     return (
         <Wrapper

src/components/Checkbox/index.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
@@ -6,6 +8,12 @@ import Icon from 'components/Icon';
 import icons from 'config/icons';
 import { FONT_SIZE } from 'config/variables';
 
+type Props = {
+    onClick: (event: KeyboardEvent) => void,
+    isChecked: boolean,
+    children: string,
+}
+
 const Wrapper = styled.div`
     display: flex;
     flex-direction: row;
@@ -54,10 +62,10 @@ const Label = styled.div`
     }
 `;
 
-class Checkbox extends PureComponent {
-    handleKeyboard(e) {
-        if (e.keyCode === 32) {
-            this.props.onClick(e);
+class Checkbox extends PureComponent<Props> {
+    handleKeyboard(event: KeyboardEvent) {
+        if (event.keyCode === 32) {
+            this.props.onClick(event);
         }
     }
 
@@ -70,7 +78,7 @@ class Checkbox extends PureComponent {
         return (
             <Wrapper
                 onClick={onClick}
-                onKeyUp={e => this.handleKeyboard(e)}
+                onKeyUp={event => this.handleKeyboard(event)}
                 tabIndex={0}
             >
                 <IconWrapper isChecked={isChecked}>

src/components/Footer/index.js

@@ -11,6 +11,11 @@ import { connect } from 'react-redux';
 import colors from 'config/colors';
 import * as LogActions from 'actions/LogActions';
 
+type Props = {
+    opened: boolean,
+    toggle: () => any,
+}
+
 const Wrapper = styled.div`
     width: 100%;
     font-size: 12px;
@@ -30,7 +35,7 @@ const Copy = styled.div`
     margin-right: 20px;
 `;
 
-const Footer = ({ opened, toggle }) => (
+const Footer = ({ opened, toggle }: Props) => (
     <Wrapper>
         <Copy title={window.COMMITHASH}>&copy; {getYear(new Date())}</Copy>
         <StyledLink href="http://satoshilabs.com" target="_blank" rel="noreferrer noopener" isGreen>SatoshiLabs</StyledLink>

src/components/Icon/index.js

@@ -1,8 +1,24 @@
+/* @flow */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
 import styled, { keyframes } from 'styled-components';
 
+type Props = {
+    icon: Array<string>,
+    className?: string,
+    hoverColor?: string,
+    canAnimate?: boolean,
+    size?: number,
+    isActive?: boolean,
+    color?: string,
+    onMouseEnter?: () => void,
+    onMouseLeave?: () => void,
+    onFocus?: () => void,
+    onClick?: () => void,
+}
+
 const chooseIconAnimationType = (canAnimate, isActive) => {
     if (canAnimate) {
         if (isActive) {
@@ -58,7 +74,7 @@ const Icon = ({
     onMouseLeave,
     onFocus,
     onClick,
-}) => (
+}: Props) => (
     <SvgWrapper
         className={className}
         canAnimate={canAnimate}
@@ -101,5 +117,4 @@ Icon.propTypes = {
     onClick: PropTypes.func,
 };
 
-
 export default Icon;