Merge branch 'master' of github.com:jbmilgrom/create-react-app-typesc…

…ript-demo
jbmilgrom · Aug 3, 2017 · d2bb151 · d2bb151
2 parents f24189f + 8ee3bb5
commit d2bb151
Show file tree

Hide file tree

Showing 16 changed files with 855 additions and 156 deletions.
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -0,0 +1,3 @@
+{
+  "*.{ts,tsx}": ["prettier --parser typescript --single-quote --write", "git add"]
+}
diff --git a/package.json b/package.json
@@ -14,13 +14,19 @@
   "devDependencies": {
     "@types/enzyme": "^2.8.4",
     "enzyme": "^2.9.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^4.0.2",
+    "prettier": "^1.5.3",
+    "prettier-eslint": "^6.4.2",
     "react-test-renderer": "^15.6.1",
+    "tslint-config-prettier": "^1.1.0",
     "tslint-eslint-rules": "^4.1.1"
   },
   "scripts": {
     "start": "react-scripts-ts start",
     "build": "react-scripts-ts build",
     "test": "react-scripts-ts test --env=jsdom",
-    "eject": "react-scripts-ts eject"
+    "eject": "react-scripts-ts eject",
+    "precommit": "lint-staged"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,40 +1,50 @@
-<!doctype html>
+
+<!DOCTYPE html>
+
+
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+
+
+<head>
+  <meta charset="utf-8">
+
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <meta name="theme-color"
+    content="#000000">
+
+  <!-- manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ -->
+  <link rel="manifest"
+    href="%PUBLIC_URL%/manifest.json">
+
+  <link rel="shortcut icon"
+    href="%PUBLIC_URL%/favicon.ico">
+
+  <!-- Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
+      Learn how to configure a non-root public URL by running `npm run build`. -->
+  <title>React App</title>
+</head>
+
+<body>
+
+  <noscript>You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root" />
+
+  <!-- This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
 
       To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
+      To create a production bundle, use `npm run build` or `yarn build`. -->
+</body>
+</html>
diff --git a/src/App.css b/src/App.css
@@ -19,6 +19,10 @@
 }
 
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -4,5 +4,5 @@ import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App/>, div);
+  ReactDOM.render(<App />, div);
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import './App.css';
 
-import Hello from './components/Hello';
-import MyInput from './components/MyInput';
 import Header from './components/Header';
+import Hello from './components/Hello';
 import InputError from './components/InputError';
+import MyInput from './components/MyInput';
 
 const logo = require('./logo.svg');
 const defaultName = 'Jonathan';
-const defaultEnthusiasmLevel = 4;
+const defaultEnthusiasmLevel = 7;
 const defaultErrorMessage = '';
 
 interface State {
@@ -30,43 +30,50 @@ class App extends React.Component<{}, State> {
   }
 
   handleNameChange = (nextName: string): void => {
-    this.setState({inputNameValue: nextName});
-    this.setState({name: nextName});
+    this.setState({ inputNameValue: nextName });
+    this.setState({ name: nextName });
   };
 
   handleEnthusiasmChange = (nextEnthusiasmLevel: string): void => {
-    this.setState({inputEnthusiasmValue: nextEnthusiasmLevel});
+    this.setState({ inputEnthusiasmValue: nextEnthusiasmLevel });
     this.setEnthusiasmLevel(parseInt(nextEnthusiasmLevel, 10));
   };
 
   setEnthusiasmLevel = (level: number): void => {
     const errorMessage: string = this.getEnthusiasmErrorMessage(level);
     if (!errorMessage) {
-      this.setState({enthusiasmLevel: level});
-      this.setState({enthusiasmLevelErrorMessage: defaultErrorMessage});
+      this.setState({ enthusiasmLevel: level });
+      this.setState({ enthusiasmLevelErrorMessage: defaultErrorMessage });
     } else {
-      this.setState({enthusiasmLevelErrorMessage: errorMessage});
+      this.setState({ enthusiasmLevelErrorMessage: errorMessage });
     }
   };
 
   getEnthusiasmErrorMessage(level: number): string {
     if (isNaN(level)) {
       return 'Please type in a number you goose, silly.';
     }
+    if (level > 9000) {
+      return 'it\'s over 9000!!!!!';
+    }
     if (level < 1) {
       return 'Why so serious?';
     }
     if (level > 200) {
-      return 'Calm down there buddy.';
+      return 'Clam down there buddy.';
     }
+
     return defaultErrorMessage;
   }
 
   render() {
     return (
       <div className="App">
-        <Header logo={logo}/>
-        <Hello name={this.state.name} enthusiasmLevel={this.state.enthusiasmLevel}/>
+        <Header logo={logo} />
+        <Hello
+          name={this.state.name}
+          enthusiasmLevel={this.state.enthusiasmLevel}
+        />
         <MyInput
           value={this.state.inputNameValue}
           placeholder="Name"

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -4,11 +4,11 @@ interface Props {
   logo: string;
 }
 
-function Header({logo}: Props) {
+function Header({ logo }: Props) {
   return (
     <div>
       <div className="App-header">
-        <img src={logo} className="App-logo" alt="logo"/>
+        <img src={logo} className="App-logo" alt="logo" />
         <h2>Welcome to React</h2>
       </div>
       <p className="App-intro">
@@ -18,4 +18,4 @@ function Header({logo}: Props) {
   );
 }
 
-export default Header;
+export default Header;
diff --git a/src/components/Hello.test.tsx b/src/components/Hello.test.tsx
@@ -8,30 +8,30 @@ it('renders the correct text when no enthusiasm level is given', () => {
 });
 
 it('renders the correct text when an enthusiasm level is provided', () => {
-  const hello = shallow(<Hello name="Pizza" enthusiasmLevel={5}/>);
+  const hello = shallow(<Hello name="Pizza" enthusiasmLevel={5} />);
   expect(hello.find('.greeting').text()).toEqual('Hello, Pizza!!!!!');
 });
 
 it('should throw an error for any enthusiasm <= 0', () => {
   expect(() => {
-    shallow(<Hello name="sure" enthusiasmLevel={1}/>);
+    shallow(<Hello name="sure" enthusiasmLevel={1} />);
   }).not.toThrow();
   expect(() => {
-    shallow(<Hello name="sure" enthusiasmLevel={0}/>);
+    shallow(<Hello name="sure" enthusiasmLevel={0} />);
   }).toThrow();
   expect(() => {
-    shallow(<Hello name="sure" enthusiasmLevel={-9}/>);
+    shallow(<Hello name="sure" enthusiasmLevel={-9} />);
   }).toThrow();
 });
 
 it('should throw  an error for any enthusiasm > 1000', () => {
   expect(() => {
-    shallow(<Hello name="sure" enthusiasmLevel={1000}/>);
+    shallow(<Hello name="sure" enthusiasmLevel={1000} />);
   }).not.toThrow();
   expect(() => {
-    shallow(<Hello name="sure" enthusiasmLevel={10001}/>);
+    shallow(<Hello name="sure" enthusiasmLevel={10001} />);
   }).toThrow();
   expect(() => {
-    shallow(<Hello name="sure" enthusiasmLevel={10010}/>);
+    shallow(<Hello name="sure" enthusiasmLevel={10010} />);
   }).toThrow();
-});
+});
diff --git a/src/components/Hello.tsx b/src/components/Hello.tsx
@@ -5,7 +5,7 @@ interface Props {
   enthusiasmLevel?: number;
 }
 
-function Hello({name, enthusiasmLevel = 1}: Props) {
+function Hello({ name, enthusiasmLevel = 1 }: Props) {
   if (enthusiasmLevel <= 0) {
     throw new Error('A little bit louder now.');
   }

diff --git a/src/components/InputError.tsx b/src/components/InputError.tsx
@@ -4,11 +4,13 @@ interface Props {
   children: string;
 }
 
-function InputError({children}: Props) {
+function InputError({ children }: Props) {
   children = children ? 'This is awkward: ' + children : '';
   return (
-    <div className="InputError">{children}</div>
+    <div className="InputError">
+      {children}
+    </div>
   );
 }
 
-export default InputError;
+export default InputError;
diff --git a/src/components/MyInput.tsx b/src/components/MyInput.tsx
@@ -7,7 +7,7 @@ interface Props {
   handleChange(text: string): void;
 }
 
-function MyInput({value, placeholder, handleChange}: Props) {
+function MyInput({ value, placeholder, handleChange }: Props) {
   return (
     <input
       type="text"
@@ -19,7 +19,6 @@ function MyInput({value, placeholder, handleChange}: Props) {
 }
 
 export default MyInput;
-
 // private helpers
 
 /**
@@ -28,5 +27,6 @@ export default MyInput;
  * @return {(event: React.FormEvent<HTMLInputElement>) => void}
  */
 function withHTMLInputElementValue(cb: (text: string) => void) {
-  return (event: React.FormEvent<HTMLInputElement>) => cb(event.currentTarget.value);
-}
+  return (event: React.FormEvent<HTMLInputElement>) =>
+    cb(event.currentTarget.value);
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,7 +3,4 @@ import * as ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';
 
-ReactDOM.render(
-  <App/>,
-  document.getElementById('root') as HTMLElement
-);
+ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,10 +3,7 @@
     "outDir": "build/dist",
     "module": "commonjs",
     "target": "es5",
-    "lib": [
-      "es6",
-      "dom"
-    ],
+    "lib": ["es6", "dom"],
     "sourceMap": true,
     "allowJs": true,
     "jsx": "react",
@@ -29,7 +26,5 @@
     "jest",
     "src/setupTests.ts"
   ],
-  "types": [
-    "typePatches"
-  ]
+  "types": ["typePatches"]
 }
diff --git a/tslint.json b/tslint.json
@@ -1,7 +1,8 @@
 {
   "extends": [
     "tslint-react",
-    "tslint-eslint-rules"
+    "tslint-eslint-rules",
+    "tslint-config-prettier"
   ],
   "rules": {
     "align": [