refactor: ♻️ fixing typos, settings and concistency

based on comments of @cahna

.all-contributorsrc

@@ -29,7 +29,8 @@
       "profile": "https://github.com/receptiryaki",
       "contributions": [
         "code",
-        "ideas"
+        "ideas",
+        "design"
       ]
     }
   ],

.vscode/extensions.json

@@ -3,8 +3,6 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "msjsdiag.debugger-for-chrome",
-    "vscode-icons-team.vscode-icons",
-    "Orta.vscode-jest",
     "eg2.vscode-npm-script",
     "jpoissonnier.vscode-styled-components"
   ]

.vscode/settings.json

@@ -1,13 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "workbench.iconTheme": "vscode-icons",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2
   },
-  "typescript.updateImportsOnFileMove.enabled": "always",
-  "javascript.updateImportsOnFileMove.enabled": "always",
-  "vsicons.projectDetection.autoReload": true,
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -19,7 +15,5 @@
   },
   "[html]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "jest.autoEnable": false,
-  "jest.runAllTestsFirst": false
+  }
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Can Sahin
+Copyright (c) 2019 Maximilian Stoiber
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -125,7 +125,7 @@ But wait... there's more!
 <table>
   <tr>
     <td align="center"><a href="https://github.com/Can-Sahin"><img src="https://avatars2.githubusercontent.com/u/33245689" width="80px;" alt=""/><br /><sub><b>Can Sahin</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=Can-Sahin" title="Code">💻</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=Can-Sahin" title="Documentation">📖</a> <a href="#ideas-Can-Sahin" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/pulls?q=is%3Apr+reviewed-by%3ACan-Sahin" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=Can-Sahin" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://github.com/receptiryaki"><img src="https://avatars0.githubusercontent.com/u/3495307" width="80px;" alt=""/><br /><sub><b>Recep Tiryaki</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=receptiryaki" title="Code">💻</a> <a href="#ideas-receptiryaki" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/receptiryaki"><img src="https://avatars0.githubusercontent.com/u/3495307" width="80px;" alt=""/><br /><sub><b>Recep Tiryaki</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=receptiryaki" title="Code">💻</a> <a href="#ideas-receptiryaki" title="Ideas, Planning, & Feedback">🤔</a> <a href="#design-receptiryaki" title="Design">🎨</a></td>
   </tr>
 </table>
 
@@ -138,5 +138,5 @@ This project follows the [all-contributors](https://github.com/all-contributors/
 
 ## License
 
-This project is licensed under the MIT license, Copyright (c) 2019 Can Sahin.
+This project is licensed under the MIT license, Copyright (c) 2019 Maximilian Stoiber.
 For more information see `LICENSE.md`.

docs/README.md

@@ -8,7 +8,7 @@
 
 {% endhint %}
 
-This is a custom [create-react-app] template of [react-boilerplate]. React Boilerplate has been developing the ultimate react starter kit for many years now. On the other hand **`CRA`**(create-react-app) is currently the people's favourite choice. This template has been created to join their strengths together. **`CRA`** provides the necessary bootstrapping to start your projects but does not provide a guide on how to built it. That is where **react-boilerplate** comes in and prepares the bases with the battle-tested techniques and tools to guide you into creating state-of-the-art web applications.
+This is a custom [create-react-app] template of [react-boilerplate]. React Boilerplate has been developing the ultimate react starter kit for many years now. On the other hand **`CRA`**(create-react-app) is currently the people's favourite choice. This template has been created to join their strengths together. **`CRA`** provides the necessary bootstrapping to start your projects but does not provide a guide on how to build it. That is where **react-boilerplate** provides battle-tested techniques and tools to guide development of state-of-the-art web applications.
 
 {% hint style="warning" %}
 

docs/building-blocks/README.md

@@ -2,7 +2,7 @@
 
 In this section we are going to explain the **building blocks** of the boilerplate in details.
 
-First we have to look at what is happening when react starts its life with out `index.tsx` file.
+First we have to look at what is happening when react starts its life with `index.tsx` file.
 
 ### `src/index.tsx`:
 

docs/building-blocks/async-components.md

@@ -18,7 +18,7 @@ export const HomePage = lazyLoad(
 In this case, the app won't show anything while loading your component. You can however make it display a custom loader with:
 
 ```ts
-import React from 'react';
+import * as React from 'react';
 import { lazyLoad } from 'utils/loadable';
 
 export const HomePage = lazyLoad(() => import('./index'), {

docs/building-blocks/css.md

@@ -25,7 +25,7 @@ Below creates two styled react components (`<Title>`, `<Wrapper>`) and renders t
 as children of the `<Header>` component:
 
 ```ts
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components/macro';
 
 // Create a <Title> react component that renders an <h1> which is

docs/building-blocks/i18n.md

@@ -6,7 +6,7 @@
 
 The setup and translations are in the **`locales/`** folder. You can add more language to subfolder `de`, `en`, `fr` etc...
 
-**`i18n.ts`** is the setup file. It initiates the `i18next` with the translations. Also, we include a helper function here to help you using your translations with intellisense support in your project rather than `something.otherthing.title` kind of string based format which is **not** refactorable and error-prone. It maps your JSON translation file to javascript object, so that you can call them like, suprise, regular objects.
+**`i18n.ts`** is the setup file. It initiates the `i18next` with the translations. Also, we include a helper function here to help you using your translations with intellisense support in your project rather than `something.otherthing.title` kind of string based format which is **not** refactorable and error-prone. It maps your JSON translation file to javascript object, so that you can call them like regular objects.
 
 {% hint style="info" %}
 
@@ -31,7 +31,7 @@ Lets say your translation json is this
 Now you can get **`someItem`** translation very easily and safely with intellisense support
 
 ```ts
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { translations, LanguageKeys } from 'locales/i18n';
 
@@ -81,7 +81,7 @@ export const messages = {
 then we use `messages` in our react component
 
 ```ts
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { messages } from './messages';
 

docs/building-blocks/testing.md

@@ -20,7 +20,7 @@ text:
 #### `button.tsx`
 
 ```ts
-import React from 'react';
+import * as React from 'react';
 import CheckmarkIcon from './CheckmarkIcon';
 
 function Button(props) {
@@ -103,7 +103,7 @@ This is our test setup:
 #### `button.test.tsx`
 
 ```ts
-import React from 'react';
+import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Button from '../Button';
 
@@ -172,7 +172,7 @@ Our finished test file looks like this:
 #### `button.test.tsx`
 
 ```ts
-import React from 'react';
+import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Button from '../Button';
 

internals/generators/component/index.test.tsx.hbs

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { {{ properCase ComponentName }} } from '..';

internals/generators/component/index.tsx.hbs

@@ -6,7 +6,7 @@
 {{#if wantMemo}}
 import React, { memo } from 'react';
 {{else}}
-import React from 'react';
+import * as React from 'react';
 {{/if}}
 {{#if wantStyledComponents}}
 import styled from 'styled-components/macro';

internals/generators/container/index.test.tsx.hbs

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { render } from '@testing-library/react';
 {{#if wantSlice}}
 import { Store } from '@reduxjs/toolkit';

internals/generators/container/index.tsx.hbs

@@ -7,14 +7,13 @@
 {{#if wantMemo}}
 import React, { memo } from 'react';
 {{else}}
-import React from 'react';
+import * as React from 'react';
 {{/if}}
 {{#if wantHeaders}}
 import { Helmet } from 'react-helmet-async';
 {{/if}}
 {{#if wantTranslations}}
 import { useTranslation } from 'react-i18next';
-import { messages } from './messages';
 {{/if}}
 {{#if wantSlice}}
 import { useSelector, useDispatch } from 'react-redux';
@@ -41,6 +40,9 @@ import { select{{ properCase ComponentName }} } from './selectors';
 {{#if wantSaga}}
 import { {{ camelCase ComponentName }}Saga } from './saga';
 {{/if}}
+{{#if wantTranslations}}
+import { messages } from './messages';
+{{/if}}
 
 interface Props {}
 

internals/startingTemplate/src/app/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { createRenderer } from 'react-test-renderer/shallow';
 
 import { App } from '../index';

internals/startingTemplate/src/app/components/NotFoundPage/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components/macro';
 import { P } from './P';
 import { Helmet } from 'react-helmet-async';

internals/startingTemplate/src/app/containers/HomePage/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 
 export function HomePage() {

internals/testing/loadable.mock.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 export function ExportedFunc() {
   return <div>My lazy-loaded component</div>;