Typescript via react-scripts

.gitignore

@@ -26,8 +26,8 @@ yarn-error.log*
 # Serverless directories
 .serverless
 
-# Do not use yarn
-yarn.lock
+# Do not use npm, until this is fixed https://github.com/facebook/create-react-app/issues/5259 or until a newer version of jest is released that uses babel-core 7
+package-lock.json
 
 # Storybook
 .storybook-static

package.json

@@ -10,6 +10,7 @@
     "@fortawesome/react-fontawesome": "^0.0.18",
     "@material-ui/core": "^3.1.2",
     "@material-ui/icons": "^3.0.1",
+    "@types/enzyme-adapter-react-16": "^1.0.3",
     "bootstrap-css-only": "^4.1.1",
     "classnames": "^2.2.6",
     "defer-to-connect": "^1.0.1",
@@ -20,19 +21,20 @@
     "i18next": "^11.3.2",
     "i18next-browser-languagedetector": "^2.2.0",
     "i18next-xhr-backend": "^1.5.1",
-    "jest-cli": "^20.0.4",
+    "jest-cli": "^23.6.0",
     "jest-enzyme": "^6.0.4",
     "lint-staged": "^7.0.0",
     "lodash": "^4.17.10",
     "node-fetch": "^2.2.0",
+    "node-sass": "^4.10.0",
     "nuka-carousel": "^4.2.5",
     "prettier": "^1.10.2",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-ga": "^2.5.3",
     "react-i18next": "^7.7.0",
     "react-router-dom": "^4.2.2",
-    "react-scripts-ts": "https://github.com/code-star/create-react-app-typescript.git#build",
+    "react-scripts": "^2.1.1",
     "react-scroll": "^1.7.10",
     "react-test-renderer": "^16.4.2",
     "sanitize-html": "^1.18.2",
@@ -47,17 +49,18 @@
     ]
   },
   "scripts": {
-    "start": "REACT_APP_CLOUDINARY_ID=v1541926500 REACT_APP_STAGE=dev react-scripts-ts start",
-    "build": "react-scripts-ts test --env=jsdom --coverage --bail --ci --silent -u && react-scripts-ts build",
-    "test": "react-scripts-ts test --env=jsdom --coverage --silent",
-    "test:watchAll:silent": "react-scripts-ts test --env=jsdom --watchAll --silent --verbose",
-    "test:watchAll:verbose": "react-scripts-ts test --env=jsdom --watchAll  --verbose",
-    "test:watchChanged:silent": "react-scripts-ts test --env=jsdom --watch --onlyChanged --silent --verbose",
-    "test:watchChanged:verbose": "react-scripts-ts test --env=jsdom --watch --onlyChanged  --verbose",
+    "start": "REACT_APP_CLOUDINARY_ID=v1541926500 REACT_APP_STAGE=dev react-scripts start",
+    "build": "react-scripts test --env=jsdom --coverage --bail --ci --silent -u && react-scripts build",
+    "test": "react-scripts test --env=jsdom --coverage --silent",
+    "test:watchAll:silent": "react-scripts test --env=jsdom --watchAll --silent --verbose",
+    "test:watchAll:verbose": "react-scripts test --env=jsdom --watchAll  --verbose",
+    "test:watchChanged:silent": "react-scripts test --env=jsdom --watch --onlyChanged --silent --verbose",
+    "test:watchChanged:verbose": "react-scripts test --env=jsdom --watch --onlyChanged  --verbose",
     "precommit": "lint-staged",
     "prettier": "prettier --single-quote --write --trailing-comma es5 --write ./src/**/*.{js,jsx,ts,tsx}",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -c .storybook -o .storybook-static"
+    "build-storybook": "build-storybook -c .storybook -o .storybook-static",
+    "preinstall": "node scripts/ensureYarn.js"
   },
   "browserslist": {
     "development": [
@@ -84,12 +87,13 @@
     "@storybook/react": "^4.0.0",
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.13",
-    "@types/jest": "^23.3.1",
+    "@types/jest": "^23.3.9",
     "@types/lodash": "^4.14.116",
+    "@types/node": "^10.12.10",
     "@types/nuka-carousel": "^4.2.2",
     "@types/prop-types": "^15.5.4",
-    "@types/react": "^16.4.7",
-    "@types/react-dom": "^16.0.6",
+    "@types/react": "^16.7.7",
+    "@types/react-dom": "^16.0.10",
     "@types/react-i18next": "^7.8.0",
     "@types/react-router-dom": "^4.3.0",
     "@types/react-scroll": "^1.5.3",
@@ -99,9 +103,7 @@
     "@types/storybook__react": "^3.0.9",
     "autoprefixer": "^9.3.1",
     "awesome-typescript-loader": "^5.2.0",
-    "babel-eslint": "^7.2.3",
     "babel-loader": "^8.0.0",
-    "eslint": "^4.19.1",
     "eslint-config-react-app": "^2.1.0",
     "eslint-plugin-flowtype": "^2.50.0",
     "eslint-plugin-import": "^2.14.0",
@@ -110,7 +112,7 @@
     "jest": "^23.5.0",
     "jest-fetch-mock": "^1.6.5",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
-    "ts-jest": "^22.4.6",
-    "typescript": "^3.0.1"
+    "ts-jest": "^23.10.5",
+    "typescript": "^3.1.6"
   }
 }

scripts/ensureYarn.js

@@ -0,0 +1,43 @@
+'use strict';
+
+/*
+  Based on https://github.com/ampproject/amphtml/blob/master/build-system/check-package-manager.js
+*/
+
+
+// Color formatting libraries may not be available when this script is run.
+function red(text) {return '\x1b[31m' + text + '\x1b[0m';}
+function cyan(text) {return '\x1b[36m' + text + '\x1b[0m';}
+function yellow(text) {return '\x1b[33m' + text + '\x1b[0m';}
+
+// If npm is being run, print a message and cause 'npm install' to fail.
+function ensureYarn() {
+  if (process.env.npm_execpath.indexOf('yarn') === -1) {
+    console.log(red(
+        '*** Codestar-website-react uses yarn for package management ***'), '\n');
+    console.log(yellow('To install all packages:'));
+    console.log(cyan('$'), 'yarn', '\n');
+    console.log(
+        yellow('To install a new (runtime) package to "dependencies":'));
+    console.log(cyan('$'), 'yarn add --exact [package_name@version]', '\n');
+    console.log(
+        yellow('To install a new (toolset) package to "devDependencies":'));
+    console.log(cyan('$'),
+        'yarn add --dev --exact [package_name@version]', '\n');
+    console.log(yellow('To upgrade a package:'));
+    console.log(cyan('$'), 'yarn upgrade --exact [package_name@version]', '\n');
+    console.log(yellow('To remove a package:'));
+    console.log(cyan('$'), 'yarn remove [package_name]', '\n');
+    process.exit(1);
+  }
+}
+
+function main() {
+  // Yarn is already used by default on Travis, so there is nothing more to do.
+  if (process.env.TRAVIS) {
+    return 0;
+  }
+  ensureYarn();
+}
+
+main();

src/Animations/AnimatedLogo.jsx

@@ -1,7 +1,7 @@
+import { withStyles } from '@material-ui/core/styles';
 import React, { Component } from 'react';
-import Vivus from 'vivus';
 import Snap from 'snapsvg-cjs';
-import { withStyles } from '@material-ui/core/styles';
+import Vivus from 'vivus';
 
 const styles = {
   logoOrange: {
@@ -18,7 +18,7 @@ const styles = {
 
 class AnimatedLogo extends Component {
   componentDidMount() {
-    const animation = new Vivus(
+    new Vivus(
       'logo',
       { duration: this.props.lineDuration, type: 'sync', file: '' },
       () => {

src/CaseHeader/CaseHeader.tsx

@@ -69,7 +69,7 @@ class CaseHeader extends React.Component<CaseHeaderProps> {
               {props.readMore && (
                 <div className="my-2">
                   <Button
-                    variant="raised"
+                    variant="contained"
                     onClick={props.callback}
                     className={classes.button}
                   >

src/Cases/Cases.tsx

@@ -1,28 +1,26 @@
-import * as React from 'react';
-import { Link, Element } from 'react-scroll';
-import compose from 'recompose/compose';
-import { translate } from 'react-i18next';
-
 import {
-  Typography,
-  Paper,
-  Fade,
+  Button,
   Dialog,
-  DialogContent,
   DialogActions,
-  Button,
-  withMobileDialog,
+  DialogContent,
+  Fade,
+  Paper,
   Slide,
+  Typography,
+  withMobileDialog,
 } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
-
-import Container from '../Container/Container';
+import * as React from 'react';
+import { translate } from 'react-i18next';
+import { Element, Link } from 'react-scroll';
+import compose from 'recompose/compose';
 import CaseHeader from '../CaseHeader/CaseHeader';
-import casesList from './CasesList';
+import Container from '../Container/Container';
+import InlineLogo from '../InlineLogo/InlineLogo';
 import ResponsiveImage, {
   getResponsiveImageUrl,
 } from '../ResponsiveImage/ResponsiveImage';
-import InlineLogo from '../InlineLogo/InlineLogo';
+import casesList from './CasesList';
 
 type CasesProps = any;
 type CasesState = any;
@@ -45,14 +43,17 @@ const styles: any = {
 class Cases extends React.Component<CasesProps, CasesState> {
   public orderedCases = [3, 1, 2, 5, 0, 4].map(i => casesList[i]);
 
-  public state: CasesState = this.orderedCases.reduce((accu, clientCase) => {
-    accu[clientCase.path] =
-      this.props.location.hash.slice(1) === clientCase.path &&
-      clientCase.readMore
-        ? true
-        : false;
-    return accu;
-  }, {});
+  public state: CasesState = this.orderedCases.reduce(
+    (accu: any, clientCase) => {
+      accu[clientCase.path] =
+        this.props.location.hash.slice(1) === clientCase.path &&
+        clientCase.readMore
+          ? true
+          : false;
+      return accu;
+    },
+    {}
+  );
 
   public render() {
     return (

src/EventCard/EventCard.tsx

@@ -34,7 +34,12 @@ export class EventCard extends Component<
     });
     const signUpButton =
       event.time > Date.now() ? (
-        <Button size="small" color="primary" variant="raised" href={event.link}>
+        <Button
+          size="small"
+          color="primary"
+          variant="contained"
+          href={event.link}
+        >
           {t('SIGN_UP')}
         </Button>
       ) : null;
@@ -61,6 +66,7 @@ export class EventCard extends Component<
   }
 }
 
-export default compose<IEventCardInnerProps, IEventCardOuterProps>(
-  translate(['events'], { wait: true })
-)(EventCard);
+export default compose<
+  IEventCardInnerProps & IEventCardOuterProps,
+  IEventCardOuterProps
+>(translate(['events'], { wait: true }))(EventCard);

src/Jobs/Jobs.tsx

@@ -86,7 +86,7 @@ class Jobs extends React.Component<JobsProps> {
               <p>
                 <CustomButton
                   className="mt-3"
-                  variant="raised"
+                  variant="contained"
                   component={Link}
                   to="/about"
                   color="inherit"