Merge aaf3e9d into ca4f3af

.eslintignore

@@ -0,0 +1,7 @@
+config
+coverage
+dist
+docs
+other
+scripts
+stories

.npmignore

@@ -29,3 +29,4 @@ config
 scripts
 stories
 todos
+__tests__

.nvmrc

@@ -1 +1 @@
-v8.11.3
+v8.11.4

.storybook/.babelrc

@@ -1,4 +1,18 @@
 {
-  "presets": ["es2015", "react", "stage-1"],
-  "plugins": ["emotion"]
+  "presets": ["es2015", "flow", "react", "stage-1"],
+  "plugins": ["emotion", "transform-class-properties"],
+  "env": {
+    "development": {
+      "presets": ["es2015", "flow", "react", "stage-1"],
+      "plugins": ["emotion", "transform-class-properties", "inline-svg"]
+    },
+    "production": {
+      "plugins": [
+        "emotion",
+        "transform-flow-strip-types",
+        "transform-class-properties",
+        "inline-svg"
+      ]
+    }
+  }
 }

.storybook/config.js

@@ -1,19 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+import { configure } from '@storybook/react'
+import '../src/styles/blue.scss'
 
-import React from 'react'
-import { addDecorator, configure } from '@storybook/react'
-// import { setOptions } from '@storybook/addon-options'
-
-const Docs = props => {
-  return <div>{props.story()}</div>
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.(js|ts|tsx)$/)
+function loadStories() {
+  req.keys().forEach(filename => req(filename))
 }
 
-// setOptions({
-//   name: 'Blue',
-//   url: 'https://github.com/helpscout/blue',
-//   showDownPanel: false,
-// })
-
-addDecorator(story => <Docs story={story} />)
-
-configure(() => require('../stories'), module)
+configure(loadStories, module)

.storybook/webpack.config.js

@@ -1,54 +1,36 @@
-// you can use this file to add your custom webpack plugins, loaders and anything you like.
-// This is just the basic way to add additional webpack configurations.
-// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
-
-// IMPORTANT
-// 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 path = require('path')
 const paths = require('../config/paths')
 const harvester = require('seed-harvester')
 const includePaths = harvester(['./src/scss'])
 
-module.exports = {
-  plugins: [
-    // your custom plugins
-  ],
-  module: {
-    rules: [
-      // Process JS with Babel.
+module.exports = (baseConfig, env, config) => {
+  // Typescript
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('awesome-typescript-loader'),
+  })
+  config.resolve.extensions.push('.ts', '.tsx')
+
+  // SCSS
+  config.module.rules.push({
+    test: /\.scss$/,
+    include: paths.appSrc,
+    use: [
       {
-        test: /\.(js|jsx)$/,
-        include: paths.appSrc,
-        loader: require.resolve('babel-loader'),
-        options: {
-          cacheDirectory: true,
-        },
+        loader: 'style-loader',
       },
-      // Sass
       {
-        test: /\.scss$/,
-        include: paths.appSrc,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              includePaths,
-            },
-          },
-        ],
+        loader: 'css-loader',
       },
-      // SVG
       {
-        test: /\.svg$/,
-        loader: 'raw-loader',
+        loader: 'sass-loader',
+        options: {
+          includePaths,
+        },
       },
     ],
-  },
+  })
+  config.resolve.extensions.push('.scss')
+
+  return config
 }

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "flowtype.flow-for-vscode",
     "esbenp.prettier-vscode",
     "jpoissonnier.vscode-styled-components"
   ]

config/jest/setupTests.js

@@ -0,0 +1,7 @@
+beforeEach(() => {
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb())
+})
+
+afterEach(() => {
+  window.requestAnimationFrame.mockRestore()
+})

config/paths.js

@@ -1,5 +1,3 @@
-'use strict'
-
 const path = require('path')
 const fs = require('fs')
 const url = require('url')
@@ -11,7 +9,7 @@ const resolveApp = relativePath => path.resolve(appDirectory, relativePath)
 
 const envPublicUrl = process.env.PUBLIC_URL
 
-function ensureSlash (path, needsSlash) {
+function ensureSlash(path, needsSlash) {
   const hasSlash = path.endsWith('/')
   if (hasSlash && !needsSlash) {
     return path.substr(path, path.length - 1)
@@ -31,7 +29,7 @@ const getPublicUrl = appPackageJson =>
 // single-page apps that may serve index.html for nested URLs like /todos/42.
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-function getServedPath (appPackageJson) {
+function getServedPath(appPackageJson) {
   const publicUrl = getPublicUrl(appPackageJson)
   const servedUrl =
     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/')
@@ -47,10 +45,11 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
+  storiesSrc: resolveApp('stories'),
   testAcceptanceSrc: resolveApp('test/acceptance'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
-  servedPath: getServedPath(resolveApp('package.json'))
+  servedPath: getServedPath(resolveApp('package.json')),
 }

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   collectCoverageFrom: [
-    'src/**/*.{js,jsx}',
+    'src/**/*.{js,jsx,ts,tsx}',
     '!src/**/?(*.)types.{js,jsx}',
     '!src/**/?(*.)helpers.{js,jsx}',
     '!src/**/?(*.)testHelpers.{js,jsx}',
@@ -10,9 +10,10 @@ module.exports = {
     '!src/components/Input/utils.{js,jsx}',
     '!src/components/Popper/**/*.{js,jsx}',
     '!src/tests/helpers/**/*.{js,jsx}',
-    '!src/utilities/browser.{js,jsx}',
+    '!src/utilities/browser.{js,jsx,ts}',
     '!src/utilities/react-router/**/*.{js,jsx}',
     '!src/utilities/smoothScroll.{js,jsx}',
+    '!src/utilities/closest.ts',
     '!src/utilities/index.{js,jsx}',
     '!src/utilities/log.{js,jsx}',
     '!src/styles/includePaths.js',
@@ -26,20 +27,23 @@ module.exports = {
     '<rootDir>/config/polyfills.js',
     '<rootDir>/config/jsdomPolyfills.js',
   ],
+  setupTestFrameworkScriptFile: '<rootDir>/config/jest/setupTests.js',
   testMatch: [
     '<rootDir>/src/**/__tests__/**/*.js?(x)',
     '<rootDir>/src/**/?(*.)(spec|test).js?(x)',
+    '<rootDir>/src/**/?(*.)(spec|test).ts?(x)',
   ],
   testEnvironment: 'node',
   testURL: 'http://localhost',
   transform: {
     '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.(ts|tsx)$': 'ts-jest',
     '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
     '^(?!.*\\.(js|jsx|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
   },
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
   },
-  moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx'],
+  moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'ts', 'tsx'],
 }