(Re-)Introduce Typescript to griff-react (#263) (#274)

This reverts commit 6e0bc4f.

Additionally, this migrates from nwb to rollup so that .js files get
bundled along with the .ts{,x} files during the migration.

Additionally, this removes the demo since Storybook is a *much* better
demo arena.

.clang-format

@@ -0,0 +1,3 @@
+Language:        JavaScript
+BasedOnStyle:    Google
+ColumnLimit:     80

.gitignore

@@ -1,8 +1,12 @@
 .DS_Store
 .out
+.rpt2_cache/
+/build
 /coverage
 /demo/dist
+/dist
 /node_modules
+/storybook-static
 /umd
 es/
 lib/

babel.config.js

@@ -0,0 +1,16 @@
+// babel.config.js
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    // [
+    //   '@babel/preset-env',
+    //   {
+    //     targets: {
+    //       node: 'current',
+    //     },
+    //   },
+    // ],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  roots: ['<rootDir>/tests'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.js$': 'babel-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(tsx|ts|js)?$',
+  moduleFileExtensions: ['ts', 'js', 'tsx', 'json', 'node'],
+  coverageDirectory: './coverage/',
+  collectCoverage: true,
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss)$':
+      '<rootDir>/node_modules/jest-css-modules-transform',
+  },
+};

nwb.config.js

@@ -1,7 +1,14 @@
+const path = require('path');
+
 module.exports = {
   type: 'react-component',
   npm: {
     esModules: true,
-    umd: false
-  }
-}
+    umd: false,
+  },
+  webpack: {
+    extra: {
+      entry: path.resolve('./build/src'),
+    },
+  },
+};

package.json

@@ -11,19 +11,20 @@
     "umd"
   ],
   "scripts": {
-    "clean": "nwb clean-module && nwb clean-demo",
-    "start": "nwb serve-react-demo",
-    "test": "nwb test-react",
-    "build": "nwb build",
-    "build:watch": "nodemon -w src -x 'rm .babelrc &> /dev/null; nwb build-react-component --no-demo'",
-    "test:coverage": "nwb test-react --coverage",
-    "test:watch": "nwb test-react --server",
-    "storybook": "start-storybook -p 9001 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o .out",
-    "demo:build": "nwb build-react-component src/index.js",
+    "build": "yarn clean && yarn compile && rollup -c",
+    "build:watch": "yarn rollup -w -c",
+    "clean": "rm -rf build/ es/ lib/",
+    "compile": "tsc -p .",
+    "fix": "gts fix",
     "lint": "eslint src stories",
+    "prepare": "yarn compile",
     "prepush": "yarn lint",
-    "release": "rm -f .babelrc && yarn build && node scripts/publish-release.js"
+    "pretest": "yarn compile",
+    "release": "yarn clean && yarn build && node scripts/publish-release.js",
+    "storybook": "start-storybook -p 9001 -c .storybook",
+    "storybook:build": "build-storybook -c .storybook -o .out",
+    "test": "yarn jest",
+    "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
     "bluebird": "^3.5.1",
@@ -37,21 +38,41 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-typescript": "^7.3.3",
     "@cognite/eslint-config": "^1.0.6",
     "@cognite/react-scripts": "^3.1.1",
     "@storybook/addon-actions": "^4.1.11",
     "@storybook/addon-info": "^4.1.11",
     "@storybook/react": "^4.1.11",
+    "@types/d3": "^5.7.1",
+    "@types/jest": "^24.0.11",
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.3",
+    "awesome-typescript-loader": "^5.2.1",
     "axios": "^0.17.1",
+    "babel-jest": "^24.5.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "csstype": "^2.6.3",
+    "gts": "^0.9.0",
     "husky": "^0.14.3",
+    "jest": "^24.5.0",
     "moment": "^2.19.3",
     "nodemon": "^1.17.4",
-    "nwb": "^0.21.0",
     "plotly.js": "^1.44.4",
+    "prop-types": "^15.7.2",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-plotly.js": "^2.2.0",
-    "semver": "^5.5.0"
+    "rollup": "^1.7.3",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.20.1",
+    "semver": "^5.5.0",
+    "source-map-loader": "^0.2.4",
+    "ts-jest": "^24.0.0",
+    "typescript": "^3.3.4000"
   },
   "author": "Cognite AS",
   "homepage": "https://griff.surge.sh/",

rollup.config.js

@@ -0,0 +1,29 @@
+import typescript from 'rollup-plugin-typescript2';
+import json from 'rollup-plugin-json';
+import typescriptPkg from 'typescript';
+import pkg from './package.json';
+
+export default {
+  input: 'src/index.js',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+    },
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+  plugins: [
+    typescript({
+      typescript: typescriptPkg,
+      include: ['*.js', '**/*.js', '*.ts', '**/*.ts', '*.tsx', '**/*.tsx'],
+    }),
+    json(),
+  ],
+};

src/components/ContextChart/index.js

@@ -8,7 +8,7 @@ import Annotation from '../Annotation';
 import GriffPropTypes, { annotationPropType } from '../../utils/proptypes';
 import Brush from '../Brush';
 import AxisPlacement from '../AxisPlacement';
-import multiFormat from '../../utils/multiFormat';
+import { multiFormat } from '../../utils/multiFormat';
 import Axes from '../../utils/Axes';
 import { createYScale, createXScale } from '../../utils/scale-helpers';
 import { stripPlaceholderDomain } from '../Scaler';

src/components/LineChart/index.js

@@ -16,7 +16,7 @@ import XAxis from '../XAxis';
 import AxisDisplayMode from './AxisDisplayMode';
 import AxisPlacement from '../AxisPlacement';
 import Layout from './Layout';
-import multiFormat from '../../utils/multiFormat';
+import { multiFormat } from '../../utils/multiFormat';
 import Axes from '../../utils/Axes';
 
 const propTypes = {

src/external.d.ts

@@ -0,0 +1 @@
+export type Domain = [number, number];

src/utils/boundedseries.js → src/utils/boundedseries.ts

@@ -2,4 +2,6 @@
 // There's no point in drawing pixels more than 30k pixels outside of the range
 // so this hack will work for a while.
 // Without this, when zoomed far enough in the line will disappear.
-export const boundedSeries = value => Math.min(Math.max(value, -30000), 30000);
+
+export const boundedSeries = (value: number): number =>
+  Math.min(Math.max(value, -30000), 30000);

src/utils/multiFormat.js → src/utils/multiFormat.ts

@@ -1,5 +1,7 @@
 import * as d3 from 'd3';
 
+export type DateFormatter = (date: Date) => string;
+
 const formatMillisecond = d3.timeFormat('.%L');
 const formatSecond = d3.timeFormat(':%S');
 const formatMinute = d3.timeFormat('%H:%M');
@@ -10,7 +12,7 @@ const formatMonth = d3.timeFormat('%d/%m');
 const formatYear = d3.timeFormat('%b %Y');
 
 /* eslint-disable no-nested-ternary */
-export default date =>
+export const multiFormat: DateFormatter = (date: Date): string =>
   (d3.timeSecond(date) < date
     ? formatMillisecond
     : d3.timeMinute(date) < date

src/utils/scale-helpers.ts

@@ -0,0 +1,19 @@
+import * as d3 from 'd3';
+import { ScaleContinuousNumeric } from 'd3';
+import { Domain } from '../external';
+
+export type ScalerFunction = ScaleContinuousNumeric<number, number>;
+
+export type ScalerFunctionFactory = (domain: Domain, height: number) => void;
+
+export const createYScale = (domain: Domain, height: number) =>
+  d3
+    .scaleLinear()
+    .domain(domain)
+    .range([height, 0]);
+
+export const createXScale = (domain: Domain, width: number) =>
+  d3
+    .scaleLinear()
+    .domain(domain)
+    .range([0, width]);

stories/AxisCollection.stories.js

@@ -3,9 +3,9 @@ import 'react-select/dist/react-select.css';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import moment from 'moment';
-import { AxisPlacement, DataProvider, AxisDisplayMode } from '../src';
+import { AxisPlacement, DataProvider, AxisDisplayMode } from '../build/src';
 import { staticLoader } from './loaders';
-import AxisCollection from '../src/components/AxisCollection';
+import AxisCollection from '../build/src/components/AxisCollection';
 
 const staticXDomain = [+moment().subtract(1, 'week'), +moment()];
 

stories/ContextChart.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import 'react-select/dist/react-select.css';
 import { storiesOf } from '@storybook/react';
 import moment from 'moment';
-import { AxisPlacement, ContextChart, DataProvider } from '../src';
+import { AxisPlacement, ContextChart, DataProvider } from '../build/src';
 import { staticLoader } from './loaders';
 
 const staticXDomain = [+moment().subtract(1, 'week'), +moment()];

stories/GridLines.stories.js

@@ -2,9 +2,9 @@ import React from 'react';
 import 'react-select/dist/react-select.css';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { DataProvider, LineChart } from '../src';
+import { DataProvider, LineChart } from '../build/src';
 import { staticLoader } from './loaders';
-import GridLines from '../src/components/GridLines';
+import GridLines from '../build/src/components/GridLines';
 
 const staticXDomain = [Date.now() - 1000 * 60 * 60 * 24 * 30, Date.now()];
 const CHART_HEIGHT = 500;

stories/InteractionLayer.stories.js

@@ -4,7 +4,7 @@ import moment from 'moment';
 import 'react-select/dist/react-select.css';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { DataProvider, LineChart } from '../src';
+import { DataProvider, LineChart } from '../build/src';
 import { functionLoader, staticLoader } from './loaders';
 
 const staticXDomain = [Date.now() - 1000 * 60 * 60 * 24 * 30, Date.now()];