Add flow types to components; realted to #24

flow-typed/glamor.js

@@ -5,3 +5,13 @@ declare module 'glamor' {
     },
   };
 }
+
+declare module 'glamor/react' {
+  declare module.exports: {
+    createElement: any,
+    dom: any,
+    vars: any,
+    makeTheme: any,
+    propMerge: Function,
+  };
+}

src/components/Flex/Flex.js

@@ -2,12 +2,27 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import {createElement} from 'glamor/react';
 
+import type {Node} from 'react';
+
+type Props = {
+  basis: string,
+  children: Node,
+  direction: string,
+  grow: number,
+  halign: string,
+  shrink: number,
+  type: string,
+  valign: string,
+  rest: Array<any>,
+};
+
 /**
  * Convenience component for declaring a flexbox layout.
  */
@@ -21,7 +36,7 @@ const Flex = ({
   type = 'div',
   valign = 'flex-start',
   ...rest
-}) =>
+}: Props) =>
   createElement(
     type,
     {

src/components/LayoutFooter/ExternalFooterLink.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -10,7 +11,16 @@ import React from 'react';
 import {colors} from 'theme';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 
-const ExternalFooterLink = ({children, href, target, rel}) => (
+import type {Node} from 'react';
+
+type Props = {
+  children: Node,
+  href: string,
+  target?: string,
+  rel?: string,
+};
+
+const ExternalFooterLink = ({children, href, target, rel}: Props) => (
   <a
     css={{
       lineHeight: 2,

src/components/LayoutFooter/Footer.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -16,7 +17,7 @@ import {colors, media} from 'theme';
 
 import ossLogoPng from 'images/oss_logo.png';
 
-const Footer = ({layoutHasSidebar = false}) => (
+const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
   <footer
     css={{
       backgroundColor: colors.darker,

src/components/LayoutFooter/FooterLink.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -10,7 +11,15 @@ import Link from 'gatsby-link';
 import React from 'react';
 import {colors} from 'theme';
 
-const FooterLink = ({children, target, to}) => (
+import type {Node} from 'react';
+
+type Props = {
+  children: Node,
+  target?: string,
+  to: string,
+};
+
+const FooterLink = ({children, target, to}: Props) => (
   <Link
     css={{
       lineHeight: 2,

src/components/LayoutFooter/FooterNav.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -9,7 +10,15 @@
 import React from 'react';
 import {media} from 'theme';
 
-const FooterNav = ({children, title, layoutHasSidebar = false}) => (
+import type {Node} from 'react';
+
+type Props = {
+  children: Node,
+  title?: string,
+  layoutHasSidebar: boolean,
+};
+
+const FooterNav = ({children, title, layoutHasSidebar = false}: Props) => (
   <div
     css={{
       display: 'flex',

src/components/LayoutHeader/DocSearch.js

@@ -2,12 +2,17 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 import React, {Component} from 'react';
 import {colors, media} from 'theme';
 
-class DocSearch extends Component {
+type State = {
+  enabled: boolean,
+};
+
+class DocSearch extends Component<{}, State> {
   state = {
     enabled: true,
   };

src/components/LayoutHeader/Header.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -17,7 +18,7 @@ import DocSearch from './DocSearch';
 
 import logoSvg from 'icons/logo.svg';
 
-const Header = ({location}) => (
+const Header = ({location}: {location: Location}) => (
   <header
     css={{
       backgroundColor: colors.darker,

src/components/LayoutHeader/HeaderLink.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
@@ -10,7 +11,13 @@ import Link from 'gatsby-link';
 import React from 'react';
 import {colors, media} from 'theme';
 
-const HeaderLink = ({isActive, title, to}) => (
+type Props = {
+  isActive: boolean,
+  title: string,
+  to: string,
+};
+
+const HeaderLink = ({isActive, title, to}: Props) => (
   <Link css={[style, isActive && activeStyle]} to={to}>
     {title}
     {isActive && <span css={activeAfterStyle} />}

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -2,19 +2,32 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
+ * @flow
  */
 
 'use strict';
 
 import Container from 'components/Container';
-import {Component, React} from 'react';
+import React, {Component} from 'react';
 import Sidebar from 'templates/components/Sidebar';
 import {colors, media} from 'theme';
 import ChevronSvg from 'templates/components/ChevronSvg';
 
-class StickyResponsiveSidebar extends Component {
-  constructor(props, context) {
-    super(props, context);
+type State = {
+  open: boolean,
+};
+
+type Props = {
+  enableScrollSync?: boolean,
+  createLink: Function, // TODO: Add better flow type once we Flow-type createLink
+  defaultActiveSection: string,
+  location: Location,
+  sectionList: Array<Object>, // TODO: Add better flow type once we have the Section component
+};
+
+class StickyResponsiveSidebar extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
 
     this.state = {
       open: false,
@@ -23,6 +36,9 @@ class StickyResponsiveSidebar extends Component {
     this._closeNavMenu = this._closeNavMenu.bind(this);
   }
 
+  _openNavMenu: Function;
+  _closeNavMenu: Function;
+
   _openNavMenu() {
     this.setState({open: !this.state.open});
   }