chore: 🔧 merge dev for the release (#48)

README.md

@@ -18,14 +18,11 @@ with a focus on
   <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/actions?query=workflow%release">
     <img src="https://github.com/react-boilerplate/react-boilerplate-cra-template/workflows/release/badge.svg" alt="Release Status" />
   </a>
-  <a href="https://coveralls.io/github/react-boilerplate/react-boilerplate-cra-template">
-    <img src="https://coveralls.io/repos/github/react-boilerplate/react-boilerplate-cra-template/badge.svg?branch=master" alt="Coverage" />
-  </a>
 </div>
 
 <div align="center">
-  <a href="https://david-dm.org/react-boilerplate/react-boilerplate-cra-template">
-    <img src="https://david-dm.org/react-boilerplate/react-boilerplate-cra-template.svg" alt="Dependency Status" />
+  <a href="https://coveralls.io/github/react-boilerplate/react-boilerplate-cra-template">
+    <img src="https://coveralls.io/repos/github/react-boilerplate/react-boilerplate-cra-template/badge.svg?branch=master" alt="Coverage" />
   </a>
   <a href="https://opencollective.com/react-boilerplate">
     <img src="https://opencollective.com/react-boilerplate/backers/badge.svg" alt="Backers" />
@@ -41,7 +38,6 @@ with a focus on
 
 The official [Create React App](https://github.com/facebook/create-react-app) template of [React Boilerplate](https://github.com/react-boilerplate/react-boilerplate)
 ![](https://img.shields.io/github/stars/react-boilerplate/react-boilerplate?style=flat)
-![](https://img.shields.io/github/contributors/react-boilerplate/react-boilerplate)
 
 Start your `create-react-app` projects in seconds with the best, industry-standard tools and practices made ready for you.
 

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/building-blocks/redux-toolkit.md

@@ -84,7 +84,7 @@ const homepageSlice = createSlice({
  * `actions` will be used to trigger change in the state from where ever you want
  * `name` will be used to add this slice to our Redux Store
  */
-export const { actions, reducer, name: sliceKey } = githubRepoFormSlice;
+export const { actions, reducer, name: sliceKey } = homepageSlice;
 ```
 
 ### Adding the slice to your Redux Store
@@ -103,6 +103,9 @@ import { sliceKey, reducer, actions } from './slice';
 import { selectUsername } from './selectors';
 
 export function HomePage() {
+  // Used to dispatch slice actions
+  const dispatch = useDispatch();
+
   // Inject the slice to redux
   useInjectReducer({ key: sliceKey, reducer: reducer });
 
@@ -112,7 +115,7 @@ export function HomePage() {
 
   const textInputChanged = evt => {
     // Trigger the action to change the state. It accepts `string` as we declared in `slice.ts`. Fully type-safe ✅
-    actions.changeUsername(evt.target.value);
+    dispatch(actions.changeUsername(evt.target.value));
   };
   // ...
 }

docs/building-blocks/routing.md

@@ -4,7 +4,7 @@
 
 ## Why not using [connected-react-router](https://github.com/supasate/connected-react-router)?
 
-There is detailed explanation [here](https://reacttraining.com/react-router/web/guides/redux-integration/deep-integration). In short, it is not suggested to integrate route with redux, simply because it shouldn't be needed. There are other ways of navigating as explained there.
+There is detailed explanation [here](https://reacttraining.com/react-router/web/guides/deep-redux-integration). In short, it is not suggested to integrate route with redux, simply because it shouldn't be needed. There are other ways of navigating as explained there.
 
 ## Usage
 
@@ -37,4 +37,30 @@ export function AboutPage() {
 }
 ```
 
+## Routing programmatically
+
+You can use the [react-router hooks](https://reacttraining.com/react-router/web/api/Hooks) to change the route or get params etc...
+
+```ts
+import { useHistory } from 'react-router-dom';
+
+function HomeButton() {
+  let history = useHistory();
+
+  function handleClick() {
+    history.push('/home');
+  }
+
+  return (
+    <button type="button" onClick={handleClick}>
+      Go home
+    </button>
+  );
+}
+```
+
+{% hint style="info" %}
+
 You can read more in [`react-router`'s documentation](https://reacttraining.com/react-router/web/api).
+
+{% endhint %}

docs/misc/faq.md

@@ -1,8 +1,8 @@
 # FAQ
 
 - [Using global reducers instead of injecting](#load-reducers-optimistically)
-- [Keeping up-to-date with the template](keeping-up-to-date-with-the-template)
-- [Are there any examples or tutorials?](examples-and-tutorials)
+- [Keeping up-to-date with the template](#keeping-up-to-date-with-the-template)
+- [Are there any examples or tutorials?](#examples-and-tutorials)
 
 ## Using reducers optimistically
 

docs/tools/editors.md

@@ -15,3 +15,7 @@ They are highly suggested for the better the Developer Experience. Extensions ar
 - Styled Components
 
 which are the basic building blocks in the boilerplate.
+
+## Chrome Extensions
+
+For a better debugging and development experience we suggest [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en). In the boilerplate redux is configured according to it so that you can debug and monitor your state changes very easily.

internals/startingTemplate/src/app/components/NotFoundPage/P.ts

@@ -3,6 +3,6 @@ import styled from 'styled-components/macro';
 export const P = styled.p`
   font-size: 1rem;
   line-height: 1.5;
-  color: ${p => p.theme.textSecondary};
+  color: black;
   margin: 0.625rem 0 1.5rem 0;
 `;

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

@@ -36,7 +36,7 @@ const Wrapper = styled.div`
 const Title = styled.div`
   margin-top: -8vh;
   font-weight: bold;
-  color: ${p => p.theme.text};
+  color: black;
   font-size: 3.375rem;
 
   span {

internals/startingTemplate/src/locales/i18n.ts

@@ -4,7 +4,7 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
 import en from './en/translation.json';
-import { ConvertedToFunctionsType } from './types';
+import { ConvertedToObjectType } from './types';
 
 const translationsJson = {
   en: {
@@ -15,26 +15,25 @@ const translationsJson = {
 export type TranslationResource = typeof en;
 export type LanguageKey = keyof TranslationResource;
 
-export const translations: ConvertedToFunctionsType<TranslationResource> = {} as any;
+export const translations: ConvertedToObjectType<TranslationResource> = {} as any;
 
 /*
- * Converts the static JSON file into object where keys are identical
- * but values are functions that produces the same key as string.
+ * Converts the static JSON file into an object where keys are identical
+ * but values are strings concatenated according to syntax.
  * This is helpful when using the JSON file keys and still have the intellisense support
  * along with type-safety
  */
-const convertToFunctions = (obj: any, dict: {}, current?: string) => {
+const convertLanguageJsonToObject = (obj: any, dict: {}, current?: string) => {
   Object.keys(obj).forEach(key => {
     const currentLookupKey = current ? `${current}.${key}` : key;
     if (typeof obj[key] === 'object') {
       dict[key] = {};
-      convertToFunctions(obj[key], dict[key], currentLookupKey);
+      convertLanguageJsonToObject(obj[key], dict[key], currentLookupKey);
     } else {
-      dict[key] = () => currentLookupKey;
+      dict[key] = currentLookupKey;
     }
   });
 };
-
 export const i18n = i18next
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
@@ -56,5 +55,7 @@ export const i18n = i18next
         escapeValue: false, // not needed for react as it escapes by default
       },
     },
-    () => convertToFunctions(en, translations),
+    () => {
+      convertLanguageJsonToObject(en, translations);
+    },
   );

internals/startingTemplate/src/locales/types.ts

@@ -1,5 +1,3 @@
-export type ConvertedToFunctionsType<T> = {
-  [P in keyof T]: T[P] extends string
-    ? () => string
-    : ConvertedToFunctionsType<T[P]>;
+export type ConvertedToObjectType<T> = {
+  [P in keyof T]: T[P] extends string ? string : ConvertedToObjectType<T[P]>;
 };

package.json

@@ -70,7 +70,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run verify-startingTemplate-changes && npm run checkTs && lint-staged",
+      "pre-commit": "npm run checkTs && lint-staged && npm run verify-startingTemplate-changes",
       "prepare-commit-msg": "devmoji -e",
       "commit-msg": "if git-branch-is dev; then commitlint -E HUSKY_GIT_PARAMS; fi"
     }
@@ -96,7 +96,6 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.3.2",
     "fontfaceobserver": "2.1.0",
-    "history": "4.10.1",
     "i18next": "19.3.4",
     "i18next-browser-languagedetector": "4.0.2",
     "react": "16.13.0",
@@ -117,7 +116,6 @@
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1",
     "@types/fontfaceobserver": "0.0.6",
-    "@types/history": "4.7.5",
     "@types/jest": "25.1.4",
     "@types/node": "13.9.3",
     "@types/react": "16.9.25",

public/index.html

@@ -5,16 +5,13 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,14 +21,27 @@
       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>
+    <meta property="og:title" content="React Boilerplate Example App" />
+    <meta property="og:description" content="" />
+    <meta
+      property="og:image"
+      content="https://repository-images.githubusercontent.com/250347048/15514f00-8713-11ea-9f9d-796a89b5de4d"
+    />
+    <title>React Boilerplate Example App</title>
+    <meta
+      name="description"
+      content=""
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
 
     <!-- Inter Font -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
 
     <!--
       This HTML file is a template.

src/app/containers/HomePage/Features.tsx

@@ -82,9 +82,9 @@ export function Features() {
         <Feature>
           <INTLIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(translations.i18nFeature.title())} </SubTitle>
+            <SubTitle>{t(translations.i18nFeature.title)} </SubTitle>
             <P>
-              {t(translations.i18nFeature.description())}
+              {t(translations.i18nFeature.description)}
               <br />
               <small>
                 (Only some of the features below are translated to demonstrate
@@ -97,9 +97,9 @@ export function Features() {
         <Feature>
           <RouteIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(translations.routingFeature.title())}</SubTitle>
+            <SubTitle>{t(translations.routingFeature.title)}</SubTitle>
             <P>
-              {t(translations.routingFeature.description())}
+              {t(translations.routingFeature.description)}
               <br />
               <small>
                 Go to our{' '}
@@ -112,15 +112,15 @@ export function Features() {
         <Feature>
           <InstantFeedbackIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(translations.feedbackFeature.title())}</SubTitle>
-            <P>{t(translations.feedbackFeature.description())}</P>
+            <SubTitle>{t(translations.feedbackFeature.title)}</SubTitle>
+            <P>{t(translations.feedbackFeature.description)}</P>
           </Content>
         </Feature>
         <Feature>
           <ScaffoldingIcon className="feature-icon" />
           <Content>
-            <SubTitle>{t(translations.scaffoldingFeature.title())}</SubTitle>
-            <P>{t(translations.scaffoldingFeature.description())}</P>
+            <SubTitle>{t(translations.scaffoldingFeature.title)}</SubTitle>
+            <P>{t(translations.scaffoldingFeature.description)}</P>
           </Content>
         </Feature>
         <Feature>

src/app/containers/LanguageSwitch/__tests__/index.test.tsx

@@ -26,7 +26,7 @@ describe('<LanguageSwitch />', () => {
 
     let languageSwitch = renderLanguageSwitch();
     let label = languageSwitch.queryByText(
-      t(translations.i18nFeature.selectLanguage()),
+      t(translations.i18nFeature.selectLanguage),
     );
     expect(label).toBeInTheDocument();
 
@@ -35,7 +35,7 @@ describe('<LanguageSwitch />', () => {
 
     languageSwitch = renderLanguageSwitch();
     label = languageSwitch.queryByText(
-      t(translations.i18nFeature.selectLanguage()),
+      t(translations.i18nFeature.selectLanguage),
     );
     expect(label).toBeInTheDocument();
   });

src/app/containers/LanguageSwitch/index.tsx

@@ -14,7 +14,7 @@ export function LanguageSwitch() {
 
   return (
     <Wrapper>
-      <FormLabel>{t(translations.i18nFeature.selectLanguage())}</FormLabel>
+      <FormLabel>{t(translations.i18nFeature.selectLanguage)}</FormLabel>
       <Languages>
         <Radio
           id="en"

src/locales/__tests__/i18n.test.ts

@@ -8,8 +8,8 @@ describe('i18n', () => {
 
   it('should initate i18n with translations', async () => {
     const t = await i18n;
-    expect(
-      t(translations.feedbackFeature.description()).length,
-    ).toBeGreaterThan(0);
+    expect(t(translations.feedbackFeature.description).length).toBeGreaterThan(
+      0,
+    );
   });
 });