updates

2026-01-08 08:02:49 +00:00 · 2018-01-03 22:36:25 +01:00
parent ff21d15083
commit f4b5cd04a5
12 changed files with 787 additions and 541 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react", "stage-0"]
-}
+  "presets": ["env", "react", "stage-0"]
+}
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
  "singleQuote": true,
  "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "printWidth": 140
 }
--- a/@types/all/index.d.ts
+++ b/@types/all/index.d.ts
@@ -1 +1,2 @@
-declare module 'this-is-a-test-module';
+// for libraries that don't have types
+declare module 'this-is-a-test-module';
--- a/README.md
+++ b/README.md
@@ -1,17 +1,17 @@
 # Starter project for React
-
- Typescript
- React 16
- React Router 4
- Webpack 3
- Yarn
-
-Install yarn
-https://yarnpkg.com/lang/en/docs/install/
+- [Typescript](https://www.typescriptlang.org/)
+- [React 16](https://reactjs.org/)
+- [React Router 4](https://reacttraining.com/react-router/)
+- [Webpack 3](https://webpack.js.org/)
+- [Yarn](https://yarnpkg.com/lang/en/docs/install/)

 ## Commands
-
 - yarn install
- yarn run dev
+- yarn start

 http://localhost:8080
+
+## Note
+There is currently a bug with yarn not updating package.json when upgrading packages. 
+[See more here](https://github.com/yarnpkg/yarn/issues/2042#issuecomment-269601927). 
+I added the `update-latest` script in package.json for a temporary fix.
--- a/app/components/Navbar/Navbar.scss
+++ b/app/components/Navbar/Navbar.scss
@@ -2,9 +2,9 @@

 .Navbar__nav {
  height: 40px;
-  border-bottom: 1px solid $light3;
+  border-bottom: 1px solid $light1;
  display: flex;
-  background-color: $light1;
+  background-color: $gray--lighter;
 }

 .Navbar__header {
@@ -14,7 +14,7 @@
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
-  background-color: $dark2;
+  background-color: $background;
 }

 .Navbar__item {
@@ -27,15 +27,15 @@

  &:hover {
    color: $fontSecondary;
-    border-bottom: 2px solid $primaryBlue;
+    border-bottom: 2px solid $blue;
  }

  & + .Navbar__item {
-    border-left: 1px solid $light3;
+    border-left: 1px solid $gray;
  }
 }

 .Navbar__item--active {
  color: $fontSecondary;
-  border-bottom: 2px solid $primaryBlue;
+  border-bottom: 2px solid $blue;
 }
--- a/app/pages/NotFound/NotFound.tsx
+++ b/app/pages/NotFound/NotFound.tsx
@@ -12,7 +12,7 @@ export default class NotFound extends React.Component<Props, State> {
    super(props);
  }

-  render() {
+  public render(): any {
    return <div className="NotFound">404 Not Found</div>;
  }
 }
--- a/app/scss/style.scss
+++ b/app/scss/style.scss
@@ -4,7 +4,7 @@ html {

 body {
  color: $fontPrimary;
-  background-color: $light2;
+  background-color: $white;
 }

 .fa {
@@ -18,6 +18,6 @@ a {
  transition: all 0.1s linear;

  &:hover {
-    color: $primaryBlue;
+    color: $blue;
  }
 }
--- a/app/scss/variables.scss
+++ b/app/scss/variables.scss
@@ -1,21 +1,15 @@
-// colors
-$primaryBlue: #42adf4;
-$white: darken(white, 10%);
+$dark-blue: #1d2938;
+$gray: #293341;
+$gray--lighter: #3A4553;
+$blue: #258de5;
+$blue--lighter: saturate(lighten($blue, 10%), 100%);
+$green: #39ce83;
+$red: #e95779;
+$white: #fff;
+$light1: #e9eef2;

-$gray1: #2e3136;
-$gray2: #2a2d32;
-$gray3: #23262a;
-$gray4: #2e3136;
-$gray5: #282b30;
-$gray6: #1e2124;
+$background: $dark-blue;
+$foreground: #53718a;

-$light1: #fff;
-$light2: #f4f4f4;
-$light3: #e3e3e3;
-
-$dark2: #3a3f41;
-$dark1: lighten($dark2, 5%);
-$dark3: darken($dark2, 5%);
-
-$fontPrimary: darken($light3, 10%);
-$fontSecondary: darken($light3, 20%);
+$fontPrimary: lighten($gray, 50%);
+$fontSecondary: lighten($gray, 60%);
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <html>

 <head>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
 </head>

 <body>
--- a/package.json
+++ b/package.json
@@ -1,47 +1,49 @@
 {
-  "name": "todoapp",
+  "name": "react_starter",
  "version": "1.0.0",
  "description": "A seed for a simple react application with typescript.",
  "scripts": {
    "build": "webpack -p --progress --colors",
+    "dev": "webpack --progress --colors --watch",
    "c9": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --history-api-fallback",
-    "dev": "webpack-dev-server --inline --history-api-fallback",
-    "watch": "webpack --watch"
+    "start": "webpack-dev-server --inline --history-api-fallback",
+    "update-latest": "rm -rf node_modules && rm yarn.lock && ncu --upgrade --upgradeAll && yarn install"
  },
  "author": "Mitchell Gerber",
  "license": "MIT",
  "dependencies": {
-    "@types/react": "^16.0.10",
-    "@types/react-dom": "^16.0.1",
-    "@types/react-router-dom": "^4.0.2",
-    "autoprefixer": "^7.1.5",
-    "babel-core": "^6.21.0",
+    "@types/react": "^16.0.34",
+    "@types/react-dom": "^16.0.3",
+    "@types/react-router-dom": "^4.2.3",
+    "autoprefixer": "^7.2.4",
+    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-0": "^6.16.0",
-    "clean-webpack-plugin": "^0.1.14",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "3.0.1",
-    "file-loader": "^1.1.5",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "^1.1.6",
    "font-awesome": "^4.7.0",
-    "html-webpack-plugin": "^2.24.1",
-    "node-sass": "^4.5.3",
+    "html-webpack-plugin": "^2.30.1",
+    "node-sass": "^4.7.2",
    "normalize.css": "^7.0.0",
-    "postcss-loader": "^2.0.8",
-    "prettier": "^1.7.4",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-router-dom": "^4.0.0",
+    "postcss-loader": "^2.0.9",
+    "prettier": "^1.9.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-router-dom": "^4.2.2",
+    "resolve-url-loader": "^2.2.1",
    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "ts-loader": "^2.0.3",
-    "tslint": "^5.7.0",
-    "tslint-config-airbnb": "^5.3.0",
-    "typescript": "^2.2.2",
+    "style-loader": "^0.19.1",
+    "ts-loader": "^3.2.0",
+    "tslint": "^5.8.0",
+    "tslint-config-airbnb": "^5.4.2",
+    "typescript": "^2.6.2",
    "url-loader": "^0.6.2",
-    "webpack": "3.7.1",
-    "webpack-dev-server": "2.9.2"
+    "webpack": "3.10.0",
+    "webpack-dev-server": "2.9.7"
  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,70 +5,71 @@ const path = require('path');
 const webpack = require('webpack');

 module.exports = {
-    entry: {
-        app: './app/app.tsx',
-        vendor: ['react', 'react-dom']
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: '[name].[hash].js'
-    },
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js']
-    },
-    module: {
-        rules: [{
-            test: /\.(js|jsx)$/,
-            use: ['babel-loader']
-        }, {
-            test: /\.ts(x)?$/,
-            use: ['babel-loader', 'ts-loader']
-        },{
-            test: /\.scss$/,
-            use: ExtractTextPlugin.extract({
-                fallback: 'style-loader',
-                use: 'css-loader!postcss-loader!sass-loader'
-            })
-        }, {
-            test: /\.css$/,
-            use: ExtractTextPlugin.extract({
-                fallback: 'style-loader',
-                use: 'css-loader'
-            })
-        }, {
-            test: /\.svg$/,
-            use: 'url-loader?limit=65000&mimetype=image/svg+xml&name=static/[name].[hash].[ext]'
-        }, {
-            test: /\.woff$/,
-            use: 'url-loader?limit=65000&mimetype=application/font-woff&name=static/[name].[hash].[ext]'
-        }, {
-            test: /\.woff2$/,
-            use: 'url-loader?limit=65000&mimetype=application/font-woff2&name=static/[name].[hash].[ext]'
-        }, {
-            test: /\.[ot]tf$/,
-            use: 'url-loader?limit=65000&mimetype=application/octet-stream&name=static/[name].[hash].[ext]'
-        }, {
-            test: /\.eot$/,
-            use: 'url-loader?limit=65000&mimetype=application/vnd.ms-fontobject&name=static/[name].[hash].[ext]'
-        }]
-    },
-    plugins: [
-        new CleanWebpackPlugin(['dist'], {
-            verbose: true
+  entry: {
+    app: './app/app.tsx',
+    vendor: ['react', 'react-dom'],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].[hash].js',
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.ts(x)?$/,
+        use: ['babel-loader', 'ts-loader'],
+      },
+      {
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader', 'postcss-loader', 'sass-loader'],
        }),
-        new ExtractTextPlugin({
-            filename: '[name].css',
-            disable: false,
-            allChunks: true
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: ['css-loader'],
        }),
-        new HtmlWebpackPlugin({
-            filename: 'index.html',
-            template: './index.html'
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: ['vendor', 'manifest'],
-            minChunks: 'Infinity'
-        }),
-        new webpack.HotModuleReplacementPlugin(),
-    ]
+      },
+      {
+        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'static/[name].[hash].[ext]',
+            }
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(['dist'], {
+      verbose: true,
+    }),
+    new ExtractTextPlugin({
+      filename: '[name].[hash].css',
+      disable: false,
+      allChunks: true
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: './index.html',
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['vendor', 'manifest'],
+      minChunks: 'Infinity',
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+  ],
 };
--- a/yarn.lock
+++ b/yarn.lock