From 36beba7a9b49b0216ffb6164e70c263462bda885 Mon Sep 17 00:00:00 2001 From: tricinel Date: Fri, 13 Oct 2017 10:48:09 +0200 Subject: [PATCH 1/4] Switch to flow types; wip --- src/components/Header/Header.js | 5 +++- .../MarkdownHeader/MarkdownHeader.js | 8 ++--- src/components/MarkdownPage/MarkdownPage.js | 29 ++++++++----------- .../TitleAndMetaTags/TitleAndMetaTags.js | 10 ++++++- src/templates/components/ChevronSvg/index.js | 9 +++++- .../components/ExternalLinkSvg/index.js | 2 +- 6 files changed, 36 insertions(+), 27 deletions(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 75ac9531..1314d725 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -2,6 +2,7 @@ * Copyright (c) 2013-present, Facebook, Inc. * * @emails react-core + * @flow */ 'use strict'; @@ -9,7 +10,9 @@ import React from 'react'; import {colors, fonts} from 'theme'; -const Header = ({children}) => ( +import type {Node} from 'react'; + +const Header = ({children}: {children: Node}) => (

( +const MarkdownHeader = ({title}: {title: string}) => (

( ); -MarkdownHeader.propTypes = { - title: PropTypes.string.isRequired, -}; - export default MarkdownHeader; diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index c71a90f4..85d82b49 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -2,6 +2,7 @@ * Copyright (c) 2013-present, Facebook, Inc. * * @emails react-core + * @flow */ 'use strict'; @@ -10,7 +11,6 @@ import Container from 'components/Container'; import Flex from 'components/Flex'; import MarkdownHeader from 'components/MarkdownHeader'; import NavigationFooter from 'templates/components/NavigationFooter'; -import PropTypes from 'prop-types'; import React from 'react'; import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar'; import TitleAndMetaTags from 'components/TitleAndMetaTags'; @@ -20,7 +20,7 @@ import {sharedStyles} from 'theme'; import createOgUrl from 'utils/createOgUrl'; const MarkdownPage = ({ - authors, + authors = [], createLink, date, enableScrollSync, @@ -29,6 +29,16 @@ const MarkdownPage = ({ markdownRemark, sectionList, titlePostfix = '', +}: { + authors: Array, + createLink: Function, + date: string, + enableScrollSync: boolean, + ogDescription: string, + location: Object, + markdownRemark: Object, + sectionList: Array, + titlePostfix: string, }) => { const hasAuthors = authors.length > 0; const titlePrefix = markdownRemark.frontmatter.title || ''; @@ -122,19 +132,4 @@ const MarkdownPage = ({ ); }; -MarkdownPage.defaultProps = { - authors: [], -}; - -// TODO Better types -MarkdownPage.propTypes = { - authors: PropTypes.array.isRequired, - createLink: PropTypes.func.isRequired, - date: PropTypes.string, - enableScrollSync: PropTypes.bool, - location: PropTypes.object.isRequired, - markdownRemark: PropTypes.object.isRequired, - sectionList: PropTypes.array.isRequired, -}; - export default MarkdownPage; diff --git a/src/components/TitleAndMetaTags/TitleAndMetaTags.js b/src/components/TitleAndMetaTags/TitleAndMetaTags.js index e764a1c8..c8d0acb5 100644 --- a/src/components/TitleAndMetaTags/TitleAndMetaTags.js +++ b/src/components/TitleAndMetaTags/TitleAndMetaTags.js @@ -11,7 +11,15 @@ import React from 'react'; const defaultDescription = 'A JavaScript library for building user interfaces'; -const TitleAndMetaTags = ({title, ogDescription, ogUrl}) => { +const TitleAndMetaTags = ({ + title, + ogDescription, + ogUrl, +}: { + title: string, + ogDescription: string, + ogUrl: string, +}) => { return ( diff --git a/src/templates/components/ChevronSvg/index.js b/src/templates/components/ChevronSvg/index.js index 0ad82db3..0be8be29 100644 --- a/src/templates/components/ChevronSvg/index.js +++ b/src/templates/components/ChevronSvg/index.js @@ -2,13 +2,20 @@ * Copyright (c) 2013-present, Facebook, Inc. * * @emails react-core + * @flow */ 'use strict'; import React from 'react'; -const ChevronSvg = ({size = 10, cssProps = {}}) => ( +const ChevronSvg = ({ + size = 10, + cssProps = {}, +}: { + size: number, + cssProps: Object, +}) => ( ( +const ExternalLinkSvg = ({cssProps = {}}: {cssProps: Object}) => ( Date: Tue, 17 Oct 2017 10:15:20 +0200 Subject: [PATCH 2/4] Add react-helmet flow type stub --- flow-typed/react-helmet.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 flow-typed/react-helmet.js diff --git a/flow-typed/react-helmet.js b/flow-typed/react-helmet.js new file mode 100644 index 00000000..a614e9ad --- /dev/null +++ b/flow-typed/react-helmet.js @@ -0,0 +1,3 @@ +declare module 'react-helmet' { + declare module.exports: any; +} From 9daf248d21ebfe3f15ed9d408c37f9bb21dec530 Mon Sep 17 00:00:00 2001 From: tricinel Date: Tue, 17 Oct 2017 10:16:00 +0200 Subject: [PATCH 3/4] Move types to separate declaration; related to #24 --- src/components/MarkdownPage/MarkdownPage.js | 24 ++++++++++--------- .../TitleAndMetaTags/TitleAndMetaTags.js | 11 ++++----- src/templates/components/ChevronSvg/index.js | 9 ++++--- 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index 85d82b49..ef166397 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -19,6 +19,18 @@ import toCommaSeparatedList from 'utils/toCommaSeparatedList'; import {sharedStyles} from 'theme'; import createOgUrl from 'utils/createOgUrl'; +type Props = { + authors: Array, + createLink: Function, + date?: string, + enableScrollSync?: boolean, + ogDescription: string, + location: Object, + markdownRemark: Object, + sectionList: Array, + titlePostfix: string, +}; + const MarkdownPage = ({ authors = [], createLink, @@ -29,17 +41,7 @@ const MarkdownPage = ({ markdownRemark, sectionList, titlePostfix = '', -}: { - authors: Array, - createLink: Function, - date: string, - enableScrollSync: boolean, - ogDescription: string, - location: Object, - markdownRemark: Object, - sectionList: Array, - titlePostfix: string, -}) => { +}: Props) => { const hasAuthors = authors.length > 0; const titlePrefix = markdownRemark.frontmatter.title || ''; diff --git a/src/components/TitleAndMetaTags/TitleAndMetaTags.js b/src/components/TitleAndMetaTags/TitleAndMetaTags.js index c8d0acb5..5d985060 100644 --- a/src/components/TitleAndMetaTags/TitleAndMetaTags.js +++ b/src/components/TitleAndMetaTags/TitleAndMetaTags.js @@ -2,6 +2,7 @@ * Copyright (c) 2013-present, Facebook, Inc. * * @emails react-core + * @flow */ 'use strict'; @@ -11,15 +12,13 @@ import React from 'react'; const defaultDescription = 'A JavaScript library for building user interfaces'; -const TitleAndMetaTags = ({ - title, - ogDescription, - ogUrl, -}: { +type Props = { title: string, ogDescription: string, ogUrl: string, -}) => { +}; + +const TitleAndMetaTags = ({title, ogDescription, ogUrl}: Props) => { return ( diff --git a/src/templates/components/ChevronSvg/index.js b/src/templates/components/ChevronSvg/index.js index 0be8be29..1e2e77e0 100644 --- a/src/templates/components/ChevronSvg/index.js +++ b/src/templates/components/ChevronSvg/index.js @@ -9,13 +9,12 @@ import React from 'react'; -const ChevronSvg = ({ - size = 10, - cssProps = {}, -}: { +type Props = { size: number, cssProps: Object, -}) => ( +}; + +const ChevronSvg = ({size = 10, cssProps = {}}: Props) => ( Date: Fri, 20 Oct 2017 18:07:44 +0200 Subject: [PATCH 4/4] Add Todo notes and better flow types --- src/components/MarkdownPage/MarkdownPage.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js index ef166397..b43b8e09 100644 --- a/src/components/MarkdownPage/MarkdownPage.js +++ b/src/components/MarkdownPage/MarkdownPage.js @@ -19,15 +19,17 @@ import toCommaSeparatedList from 'utils/toCommaSeparatedList'; import {sharedStyles} from 'theme'; import createOgUrl from 'utils/createOgUrl'; +import type {Node} from 'types'; + type Props = { authors: Array, - createLink: Function, + createLink: Function, // TODO: Add better flow type once we Flow-type createLink date?: string, enableScrollSync?: boolean, ogDescription: string, - location: Object, - markdownRemark: Object, - sectionList: Array, + location: Location, + markdownRemark: Node, + sectionList: Array, // TODO: Add better flow type once we have the Section component titlePostfix: string, };