Fixes&maintenance (#64)

### Many fixes, updates and maintenances...

**Changes:**

- Synched with the `dev` of the original boilerplate
	- Fixed tree-shaking issues
	- Fixed `internal/scripts` for setup and cleaning
- Updated version to `4.1`
- Updated docs to contain typescript-only documentation
- Improved `internals/scripts/generate-templates-for-linting.js` script
- Added `babel-loader` after `ts-loader`
- Updated `README`
- Updated package versions and fixed the new versions' problems

Author: Can-Sahin

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'airbnb-typescript',
     'prettier',
     'prettier/react',
+    'prettier/@typescript-eslint'
   ],
   plugins: [
     'prettier',

.prettierrc

@@ -4,5 +4,6 @@
   "useTabs": false,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "arrowParens": "avoid"
 }

Changelog.md

@@ -84,19 +84,17 @@
 
 </div>
 
-This is the **TYPESCRIPT** implementation of the original [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate) with extra features and powers of `Typescript`
+This is the **TYPESCRIPT** implementation of the original [**react-boilerplate**](https://github.com/react-boilerplate/react-boilerplate) with extra features and powers of `Typescript`
 
 > ⚠️ Please refer to the [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate) for the details and the documentation
 
 ---
 
-Boilerplate version: `4.1`
+Boilerplate version: [**`4.1`**](https://github.com/react-boilerplate/react-boilerplate-typescript/releases)
 
-#### Brief overview of the typescript version
+## Overview
 
-- Detailed documentation: [**Typescript docs**](docs/general/typescript.md)
-
-* Typescript practices heavily depends on the guide -> <a  href="https://github.com/piotrwitek/react-redux-typescript-guide">react-typescript-guide</a>
+- For the detailed documentation: [**Typescript Docs**](docs/README.md)
 
 - Example projects built with this boilerplate `(if you are looking for advanced examples)`:
 
@@ -110,11 +108,32 @@ Boilerplate version: `4.1`
 
 ## Getting Started & Features & Documentations and More...
 
-⚠️
-Refer to the [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate)
+You can find all the documentation in the original [**react-boilerplate**](https://github.com/react-boilerplate/react-boilerplate)
+
+For the typescript related documentation: [**Typescript Docs**](docs/README.md)
+
+## Quick start
+
+1.  Make sure that you have Node.js v10.13.0 and npm v6.4.1 or above installed.
+2.  Clone this repo using `git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate-typescript.git <YOUR_PROJECT_NAME>`
+3.  Move to the appropriate directory: `cd <YOUR_PROJECT_NAME>`.<br />
+4.  Run `npm run setup` in order to install dependencies and clean the git repo.<br />
+    _At this point you can run `npm start` to see the example app at `http://localhost:3000`._
+5.  Run `npm run clean` to delete the example app.
+
+Now you're ready to rumble!
 
 ---
 
+## Ongoing Work
+
+In between [releases](https://github.com/react-boilerplate/react-boilerplate-typescript/releases), we work on the `dev` branch and rarely ever update `master`. For that reason, it sometimes look like the repo isn't actively maintained. This isn't the case, React Boilerplate is alive and kicking.
+
+Please feel free to check out:
+
+- our [`dev` branch](https://github.com/react-boilerplate/react-boilerplate-typescript/tree/dev) for the latest updates. You are always welcome to use it as the basis for your project. We only merge to `dev` projects which are fully ready.
+- our open [issues](https://github.com/react-boilerplate/react-boilerplate/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and [pull requests](https://github.com/react-boilerplate/react-boilerplate/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc) to see what we are currently working on. Suggestions and contributions are always welcome!
+
 <sub><i>Keywords: React Boilerplate, Typescript, React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, `styled-components`, redux-saga, FontFaceObserver</i></sub>
 
 ## Contributors
@@ -143,50 +162,31 @@ This project follows the [all-contributors](https://github.com/all-contributors/
 
 This project would not be possible without the support of these amazing folks. [**Become a sponsor**](https://opencollective.com/react-boilerplate) to get your company in front of thousands of engaged react developers and help us out!
 
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/0/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/0/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/1/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/1/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/2/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/2/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/3/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/3/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/4/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/4/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/5/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/5/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/6/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/6/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/7/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/7/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/8/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/8/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/bronze-sponsor/9/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/bronze-sponsor/9/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/bronze-sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/bronze-sponsor/9/avatar.svg"></a>
 
 ---
 
-<a  href="https://opencollective.com/react-boilerplate/backer/0/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/0/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/1/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/1/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/2/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/2/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/3/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/3/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/4/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/4/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/5/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/5/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/6/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/6/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/7/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/7/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/8/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/8/avatar.svg"></a>
-
-<a  href="https://opencollective.com/react-boilerplate/backer/9/website"  target="_blank"><img  src="https://opencollective.com/react-boilerplate/backer/9/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/0/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/0/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/1/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/1/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/2/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/2/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/3/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/3/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/4/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/4/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/5/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/5/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/6/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/6/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/7/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/7/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/8/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/8/avatar.svg"></a>
+<a href="https://opencollective.com/react-boilerplate/backer/9/website" target="_blank"><img src="https://opencollective.com/react-boilerplate/backer/9/avatar.svg"></a>
 
 ## License
 
 This project is licensed under the MIT license, Copyright (c) 2019 Maximilian
-
 Stoiber. For more information see `LICENSE.md`.

README.md

@@ -16,6 +16,7 @@ import { ConnectedRouter } from 'connected-react-router';
 import FontFaceObserver from 'fontfaceobserver';
 import history from 'utils/history';
 import 'sanitize.css/sanitize.css';
+import * as OfflinePluginRuntime from 'offline-plugin/runtime';
 
 // Import root app
 import App from 'containers/App';
@@ -29,10 +30,10 @@ import 'file-loader?name=.htaccess!./.htaccess';
 
 import { HelmetProvider } from 'react-helmet-async';
 
-import { translationMessages } from 'i18n';
 import configureStore from './configureStore';
 
 // Import i18n messages
+import { translationMessages } from 'i18n';
 
 // Observe loading of Open Sans (to remove open sans, remove the <link> tag in
 // the index.html file and this observer)
@@ -83,7 +84,7 @@ if (!(window as any).Intl) {
         import('intl/locale-data/jsonp/en.js'),
         import('intl/locale-data/jsonp/de.js'),
       ]),
-    ) // eslint-disable-line prettier/prettier
+    )
     .then(() => render(translationMessages))
     .catch(err => {
       throw err;
@@ -96,6 +97,5 @@ if (!(window as any).Intl) {
 // it's not most important operation and if main code fails,
 // we do not want it installed
 if (process.env.NODE_ENV === 'production') {
-  // eslint-disable-next-line global-require
-  require('offline-plugin/runtime').install();
+  OfflinePluginRuntime.install();
 }

app/app.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 function List(props: Props) {
   const ComponentToRender = props.component;
-  let content = <div /> as JSX.Element | JSX.Element[];
+  let content = (<div />) as JSX.Element | JSX.Element[];
 
   // If we have items, render them
   if (props.items) {

app/components/Header/banner.jpg

@@ -26,7 +26,7 @@ const Circle = (props: Props) => {
     left: 0;
     top: 0;
     ${props.rotate &&
-      `
+    `
       -webkit-transform: rotate(${props.rotate}deg);
       -ms-transform: rotate(${props.rotate}deg);
       transform: rotate(${props.rotate}deg);
@@ -40,7 +40,7 @@ const Circle = (props: Props) => {
       border-radius: 100%;
       animation: ${circleFadeDelay} 1.2s infinite ease-in-out both;
       ${props.delay &&
-        `
+      `
         -webkit-animation-delay: ${props.delay}s;
         animation-delay: ${props.delay}s;
       `};

app/components/List/index.tsx

@@ -10,34 +10,19 @@ const selectGlobal = (state: ApplicationRootState) => state.global;
 const selectRoute = (state: ApplicationRootState) => state.router;
 
 const makeSelectCurrentUser = () =>
-  createSelector(
-    selectGlobal,
-    globalState => globalState.currentUser,
-  );
+  createSelector(selectGlobal, globalState => globalState.currentUser);
 
 const makeSelectLoading = () =>
-  createSelector(
-    selectGlobal,
-    globalState => globalState.loading,
-  );
+  createSelector(selectGlobal, globalState => globalState.loading);
 
 const makeSelectError = () =>
-  createSelector(
-    selectGlobal,
-    globalState => globalState.error,
-  );
+  createSelector(selectGlobal, globalState => globalState.error);
 
 const makeSelectRepos = () =>
-  createSelector(
-    selectGlobal,
-    globalState => globalState.userData.repos,
-  );
+  createSelector(selectGlobal, globalState => globalState.userData.repos);
 
 const makeSelectLocation = () =>
-  createSelector(
-    selectRoute,
-    routeState => routeState.location,
-  );
+  createSelector(selectRoute, routeState => routeState.location);
 
 export {
   selectGlobal,

app/components/LoadingIndicator/Circle.tsx

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> should render and match the snapshot 1`] = `
-<ForwardRef(styled.div)>
+<styled.div>
   <Helmet
     defaultTitle="React.js Boilerplate"
     defer={true}
@@ -30,5 +30,5 @@ exports[`<App /> should render and match the snapshot 1`] = `
   </Switch>
   <Footer />
   <GlobalStyleComponent />
-</ForwardRef(styled.div)>
+</styled.div>
 `;