refactor: Replace Flow with TypeScript

.babelrc

@@ -8,7 +8,7 @@
   ],
   "presets": [
     ["@babel/preset-env", { "modules": false }],
-    "@babel/preset-flow",
+    ["@babel/typescript", { "isTSX": true, "allExtensions": true }],
     "@babel/preset-react"
   ],
   "retainLines": true,
@@ -28,4 +28,4 @@
       "presets": ["@babel/preset-env", "@babel/preset-react"]
     }
   }
-}
+}

.eslintignore

@@ -1 +1,4 @@
-flow-typed/npm
+**/*.*
+!**/*.@(js|jsx|ts|tsx)
+**/*d.ts
+node_modules

.eslintrc.js

@@ -13,16 +13,18 @@ module.exports = {
     render: true,
     mount: true
   },
-  plugins: ['react', 'flowtype'],
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true
-    }
+    },
+    project: './tsconfig.json'
   },
+  plugins: ['react', 'prettier', '@typescript-eslint', 'flowtype'],
   extends: [
+    'plugin:@typescript-eslint/recommended',
     'prettier-standard',
     'plugin:react/recommended',
-    'plugin:flowtype/recommended'
+    'prettier/@typescript-eslint'
   ]
 }

.gitignore

@@ -57,9 +57,7 @@ typings/
 # dotenv environment variables file
 .env
 
-# Flow type definitions
-flow-typed/npm
-
 dist
+storybook-static
 
-.vscode
+.vscode

.storybook/webpack.config.js

@@ -6,14 +6,16 @@
 // When you add this file, we won't add the default configurations which is similar
 // to "React Create App". This only has babel loader to load JavaScript.
 
-const config = require('../webpack/webpack.config.client')
+const baseConfig = require('../webpack/webpack.config.client')
 
-module.exports = {
-  resolve: config.resolve,
+module.exports = ({ config }) => {
+  config.resolve.extensions.push('.ts', '.tsx')
+  config.plugins = [...baseConfig.plugins, ...config.plugins]
 
-  plugins: [...config.plugins],
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader')
+  })
 
-  module: {
-    rules: [...config.module.rules]
-  }
+  return config
 }

jest.config.js

@@ -7,12 +7,12 @@ module.exports = {
     '\\.(css)$': '<rootDir>/__mocks__/styleMock.js'
   },
   snapshotSerializers: ['enzyme-to-json/serializer'],
-  collectCoverageFrom: ['src/**/*.{js,jsx}'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
   coverageDirectory: 'coverage',
   coveragePathIgnorePatterns: [
     '/node_modules/',
-    'index.js',
-    'client.jsx',
+    'index.ts',
+    'client.tsx',
     'server-renderer.js'
   ],
   coverageReporters: ['lcov', 'text'],

jest/stubs.js → jest/stubs.ts

@@ -1,11 +1,17 @@
-export const film = {
+import { Film } from '../src/entities/film'
+
+export const film: Film = {
   id: 1,
   title: 'Film title',
-  poster_path: 'https://picsum.photos/g/300/450/?random',
-  overview: 'Film overview',
+  tagline: 'Put that cookie down',
+  vote_average: 7.5,
+  vote_count: 667,
   release_date: '2018-05-04',
-  genres: ['some genre', 'another genre'],
-  vote_average: 7.5
+  poster_path: 'https://picsum.photos/g/300/450/?random',
+  overview: 'Once upon a time...',
+  budget: 15000000,
+  revenue: 59735548,
+  genres: ['some genre', 'another genre']
 }
 
 export const films = [film]
@@ -15,7 +21,7 @@ function getRandomImageId() {
   return Math.floor(Math.random() * Math.floor(1084))
 }
 
-export function getRandomFilm(id) {
+export function getRandomFilm(id: number) {
   return {
     ...film,
     id,

jest/test-helpers.jsx → jest/test-helpers.tsx

@@ -2,16 +2,15 @@ import renderer from 'react-test-renderer'
 import { shallow } from 'enzyme'
 import { runSaga as runSagaOriginal } from 'redux-saga'
 import configureMockStore from 'redux-mock-store'
+import { AnyAction } from 'redux';
 
 /**
  * Creates test closure for snapshot testing
  * @deprecated Use itRendersCorrectlyShallow
- * @param {Function} getComponent Function returning component to test snapshot
- * @param {string} [testName='renders correctly']
  */
 export const itRendersCorrectly = (
-  getComponent,
-  testName = 'renders correctly'
+  getComponent: Function,
+  testName: string = 'renders correctly'
 ) => {
   it(testName, () => {
     const tree = renderer.create(getComponent()).toJSON()
@@ -22,12 +21,11 @@ export const itRendersCorrectly = (
 
 /**
  * Creates test closure for snapshot testing (using Enzyme shallow)
- * @param {Function} getComponent Function returning component to test snapshot
- * @param {string} [testName='renders correctly']
+ * @param getComponent Function returning component to test snapshot
  */
 export const itRendersCorrectlyShallow = (
-  getComponent,
-  testName = 'renders correctly'
+  getComponent: () => React.ReactElement,
+  testName: string = 'renders correctly'
 ) => {
   it(testName, () => {
     const wrapper = shallow(getComponent())
@@ -36,21 +34,27 @@ export const itRendersCorrectlyShallow = (
   })
 }
 
+interface ItContainsComponentParams {
+  testName?: string
+  expectedCount?: number
+  expectedProps?: {}
+}
+
 /**
  * Creates test closure to check whether component contains another component
- * @param {Function} getComponent Function returning parent component
- * @param {string} componentDisplayName Child component display name
- * @param {Object} params Optional params
- * @param {number} [params.testName=`contains ${componentDisplayName} component`]
- * @param {number} [params.expectedCount=1] Expected number of children components
- * @param {Object} params.expectedProps First child component properties map
+ * @param getComponent Function returning parent component
+ * @param componentDisplayName Child component display name
+ * @param params Optional params
+ * @param [params.testName=`contains ${componentDisplayName} component`]
+ * @param [params.expectedCount=1] Expected number of children components
+ * @param params.expectedProps First child component properties map
  */
 export const itContainsComponent = (
-  getComponent,
-  componentDisplayName,
-  { testName, expectedCount = 1, expectedProps } = {}
+  getComponent: () => React.ReactElement,
+  componentDisplayName: string,
+  { testName = `contains ${componentDisplayName} component`, expectedCount = 1, expectedProps }: ItContainsComponentParams = {}
 ) => {
-  it(testName || `contains ${componentDisplayName} component`, () => {
+  it(testName, () => {
     const wrapper = shallow(getComponent())
     const children = wrapper.find(componentDisplayName)
 
@@ -70,18 +74,18 @@ export const getMockStore = () => configureMockStore([])
  * Sets relative URL
  * @param {string} url
  */
-export const setUrl = url => {
+export const setUrl = (url: string) => {
   window.history.pushState({}, '', url)
 }
 
 /**
  * Runs saga and collects dispatched actions
  */
-export const runSaga = (saga, state = {}, arg1 = undefined) => {
-  const dispatched = []
+export const runSaga = (saga: any, state = {}, arg1: any = undefined) => {
+  const dispatched: AnyAction[] = []
   return runSagaOriginal(
     {
-      dispatch: action => dispatched.push(action),
+      dispatch: (action: AnyAction) => dispatched.push(action),
       getState: () => state
     },
     saga,