chore: 🔧 releasing 1.2.1

Author: Can-Sahin

.all-contributorsrc

@@ -41,6 +41,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "lourensdev",
+      "name": "Lourens de Villiers",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5746141?v=4",
+      "profile": "https://github.com/lourensdev",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 8,

.eslintrc.js

@@ -6,7 +6,7 @@ const prettierOptions = JSON.parse(
 );
 
 module.exports = {
-  extends: ['react-app', 'prettier', 'prettier/react'],
+  extends: ['react-app', 'prettier'],
   plugins: ['prettier'],
   rules: {
     'prettier/prettier': ['error', prettierOptions],

.gitignore

@@ -20,3 +20,4 @@ yarn-error.log*
 generated-cra-app
 .cra-template-rb
 template
+.eslintcache

.husky/commit-msg

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+if yarn git-branch-is dev;
+then yarn commitlint --edit $1;
+fi

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn checkTs
+yarn lint-staged
+yarn verify-startingTemplate-changes

.husky/prepare-commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn devmoji -e

README.md

@@ -37,14 +37,15 @@ with a focus on
 ---
 
 The official [Create React App](https://github.com/facebook/create-react-app) template of the `discontinued` [React Boilerplate](https://github.com/react-boilerplate/react-boilerplate)
-![](https://img.shields.io/github/stars/react-boilerplate/react-boilerplate?style=flat)
 
 Start your `create-react-app` projects in seconds with the best, industry-standard tools and practices made ready for you.
 
 **📚 Documentation:** [Gitbook](https://cansahin.gitbook.io/react-boilerplate-cra-template/)
 
 **🎨 Check the example app:** [Demonstrating the features](https://react-boilerplate.github.io/react-boilerplate-cra-template/)
 
+**📂 Browse in VS Code:** [![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/react-boilerplate/react-boilerplate-cra-template)
+
 **📦 Package:** [npm](https://www.npmjs.com/package/cra-template-rb)
 
 ![version](https://img.shields.io/npm/v/cra-template-rb)
@@ -133,6 +134,7 @@ But wait... there's more!
     <td align="center"><a href="https://github.com/Can-Sahin"><img src="https://avatars2.githubusercontent.com/u/33245689?s=80" 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?s=80" 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>
     <td align="center"><a href="https://github.com/mogsdad"><img src="https://avatars3.githubusercontent.com/u/1707731?s=80" width="80px;" alt=""/><br /><sub><b>David Bingham</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=mogsdad" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/lourensdev"><img src="https://avatars.githubusercontent.com/u/5746141?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Lourens de Villiers</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=lourensdev" title="Documentation">📖</a></td>
   </tr>
 </table>
 

docs/building-blocks/async-components.md

@@ -18,12 +18,17 @@ 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 * as React from 'react';
+import React from 'react';
 import { lazyLoad } from 'utils/loadable';
 
-export const HomePage = lazyLoad(() => import('./index'), {
-  fallback: <div>Loading...</div>,
-});
+export const HomePage = lazyLoad(
+  () => import('./index'),
+  module => module.HomePage,
+  {
+    fallback: <div>Loading...</div>,
+  }
+);
 ```
 
+Make sure to rename your `Loadable.ts` file to `Loadable.tsx`.
 This feature is built into the boilerplate using React's `lazy` and `Suspense` features.

docs/building-blocks/i18n.md

@@ -42,7 +42,7 @@ export function MyComponent() {
     i18n.changeLanguage(language);
   };
   // The nested objects are intellisense supported ✅
-  return <div>{t(translations.HomePage.Features.someItem}</div>;
+  return <div>{t(translations.HomePage.Features.someItem)}</div>;
 }
 ```
 

docs/misc/faq.md

@@ -15,7 +15,7 @@ If you have components that should be available throughout the app, like a `Navi
 import { combineReducers } from '@reduxjs/toolkit';
 ...
 
-import { reducer } from 'components/NavigationBar/slice';
+import { reducer as navigationBarReducer } from 'components/NavigationBar/slice';
 
 export function createReducer(injectedReducers: InjectedReducersType = {}) {
   const rootReducer = combineReducers({