chore: 🔧 releasing 1.2.0

Author: Can-Sahin

.github/workflows/build.yaml

@@ -3,6 +3,7 @@ name: build
 on:
   - push
   - pull_request
+  - workflow_dispatch
 
 jobs:
   createNpmPackage:

.github/workflows/release.yml

@@ -2,14 +2,15 @@ name: release
 
 on:
   release:
-    types:
-      - created
+      types:
+        - created
+  workflow_dispatch:
 
 jobs:
   createAndTestCRAFromNpm:
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [12.x, 14.x, 15.x]
 
     runs-on: ubuntu-latest
     steps:

.github/workflows/test.yaml

@@ -2,6 +2,7 @@ name: test
 on:
   - push
   - pull_request
+  - workflow_dispatch
 
 jobs:
   test:

README.md

@@ -36,16 +36,14 @@ 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)
+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/)
+**📚 Documentation:** [Gitbook](https://cansahin.gitbook.io/react-boilerplate-cra-template/)
 
-**🎨 Check the example app:** [Boilerplate Example Application](https://react-boilerplate.github.io/react-boilerplate-cra-template/)
-
-**🚑 Collection of `'HOW TO'`s:** [Examples & Tutorials for common patterns](https://github.com/react-boilerplate/cra-template-examples)
+**🎨 Check the example app:** [Demonstrating the features](https://react-boilerplate.github.io/react-boilerplate-cra-template/)
 
 **📦 Package:** [npm](https://www.npmjs.com/package/cra-template-rb)
 
@@ -56,6 +54,8 @@ Start your `create-react-app` projects in seconds with the best, industry-standa
 
 ## Install & Start
 
+⚠️ Using [Yarn Package Manager](https://yarnpkg.com) is recommended over `npm`.
+
 Create React App with the template
 
 ```shell
@@ -72,11 +72,17 @@ yarn start
 Remove the example app to start your project!
 
 ```shell
-yarn run cleanAndSetup
+yarn cleanAndSetup
 ```
 
+---
+
 ## Features
 
+> This project is **NOT** a framework, UI component library or a design system. The only purpose of this template is to assist you starting your CRA app with a solid tool stack and development patterns. It's 100% customizable. After you start your journey and once you understand the concepts offered here you should personalize your code accordingly instead of being tied to the starter project.
+>
+> You can add or remove literally anything and use whichever library or tools you prefer.
+
 <dl>
 
   <dt>Predictable state management</dt>
@@ -115,7 +121,7 @@ But wait... there's more!
 - _Stay fast_: Profile your app's performance from the comfort of your command
   line!
 
-<sub><i>Keywords: Create React App, React Boilerplate, Custom Template, Typescript, React.js, Redux, Hot Reloading, ESNext, Babel, react-router, Offline First, ServiceWorker, `styled-components`, redux-saga, FontFaceObserver</i></sub>
+<sub><i>Keywords: Create React App, React Boilerplate, Custom Template, Typescript, React.js, Redux, Hot Reloading, ESNext, Babel, react-router, `styled-components`, redux-saga, FontFaceObserver</i></sub>
 
 ## Contributors
 

docs/SUMMARY.md

@@ -11,10 +11,11 @@
 ## Building Blocks
 
 - [Building Blocks](building-blocks/README.md)
-- [Redux & Toolkit](building-blocks/redux-toolkit.md)
-- [Reselect](building-blocks/reselect.md)
-- [Redux-Saga](building-blocks/redux-saga.md)
-- [Redux Injectors](building-blocks/redux-injectors.md)
+- [The `Slice`](building-blocks/slice/README.md)
+  - [Redux & Toolkit](building-blocks/slice/redux-toolkit.md)
+  - [Reselect](building-blocks/slice/reselect.md)
+  - [Redux-Saga](building-blocks/slice/redux-saga.md)
+  - [Redux Injectors](building-blocks/slice/redux-injectors.md)
 - [Async Components](building-blocks/async-components.md)
 - [Routing](building-blocks/routing.md)
 - [i18n Internationalization & Pluralization](building-blocks/i18n.md)

docs/building-blocks/README.md

@@ -10,8 +10,8 @@ It is one of the most important files of the boilerplate. It contains all the gl
 
 - `react-app-polyfill` is imported to enable compatibility with many browsers and cool stuff like generator functions, Promises, etc.
 - A Redux `store` is instantiated.
-- `ReactDOM.render()` not only renders the [root React component](https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/App/index.js), called `<App />`, of your application, but it renders it with `<Provider />`.
-- Hot module replacement via [Webpack HMR](https://webpack.js.org/guides/hot-module-replacement/) makes the i18n translations hot reloadable.
+- `ReactDOM.render()` not only renders the [root React component](https://github.com/react-boilerplate/react-boilerplate-cra-template/blob/master/src/app/index.tsx), called `<App />`, of your application, but it renders it with `<Provider />`.
+- Hot module replacement via [Webpack HMR](https://webpack.js.org/guides/hot-module-replacement/) makes the i18n translations hot re-loadable.
 - i18next internationalization support setup.
 - `<Provider />` connects your app with the Redux `store`.
 
@@ -79,7 +79,7 @@ Imagine that your application is fetching data in JSON format from a back-end. F
 2.  `API_SUCCESS`: Upon dispatching this, your application should show the data to the user.
 3.  `API_FAILURE`: Upon dispatching this, your application should show an error message to the user.
 
-And this is only for **_one_** API call. In a real-world scenario, one page of your application could be making tens of API calls. How do we manage all of them effectively? It essentially boils down to controlling the flow of your application. What if there was a background process that handled multiple actions simultaneously and communicated with the Redux store and React containers at the same time? Here is where `redux-saga` enters the picture.
+And this is only for **_one_** API call. In a real-world scenario, one page of your application could be making tens of API calls. How do we manage all of them effectively? It essentially boils down to controlling the flow of your application. What if there was a background process that handled multiple actions simultaneously and communicated with the Redux store and React components at the same time? Here is where `redux-saga` enters the picture.
 
 For a mental model, consider a saga like a separate thread in your application that's solely responsible for side-effects. Then `redux-saga` is a Redux middleware, which means this thread can be started, paused, and canceled from the main application with standard Redux actions. It has access to the full Redux application state, and it can dispatch Redux actions as well.
 

docs/building-blocks/async-components.md

@@ -1,6 +1,6 @@
 # Async Components
 
-To load a component asynchronously, create a `Loadable` file by hand or via component/container generators with the 'Do you want to load resources asynchronously?' option activated.
+To load a component asynchronously, create a `Loadable` file by hand or via component generator with the 'Do you want to load resources asynchronously?' option activated.
 
 This is the content of the file by default:
 

docs/building-blocks/i18n.md

@@ -73,7 +73,7 @@ import { translations } from 'locales/translations';
 import { _t } from 'utils/messages';
 
 export const messages = {
-  someItem: _t(translations.HomePage.Features.someItem, 'default value'),
+  someItem: () => _t(translations.HomePage.Features.someItem, 'default value'),
   // ...
 };
 ```
@@ -87,7 +87,7 @@ import { messages } from './messages';
 
 export function MyComponent() {
   const { t } = useTranslation();
-  return <div>{t(...messages.someItem}</div>;
+  return <div>{t(...messages.someItem()}</div>;
 }
 ```
 

docs/building-blocks/routing.md

@@ -16,7 +16,7 @@ To add a new route, simply import the `Route` component and use it standalone or
 
 Top level routes are located in `src/app/index.tsx`.
 
-If you want your route component (or any component for that matter) to be loaded asynchronously, use the container or component generator with 'Do you want to load resources asynchronously?' option activated.
+If you want your route component (or any component for that matter) to be loaded asynchronously, use the component generator with 'Do you want to load resources asynchronously?' option activated.
 
 ## Child Routes
 

docs/building-blocks/slice/README.md

@@ -0,0 +1,26 @@
+# What is a Slice?
+
+If you have read the redux-toolkit documentation you are familiar with the `slice` concept now. Here, we are taking it another step further by enriching it with `reselect` and `redux-saga`.
+
+Slice manages, encapsulates, and operates a `portion` of your application's data. For example, if you have a page that displays a user list, then you can have a slice called 'UsersPageSlice' that contains all the users in its state, also the functions to read it from the store and the functions to update the users in the list. So, in short, a slice is a redux-toolkit slice also containing the relative `reselect` and `redux-saga` operations within its folder. After all, they are all related to managing the same portion of the data.
+
+A `slice` is independent of the UI component. It can contain any kind of logic and it can be located in any folder. To follow the `folder-by-feature` pattern it is recommended to keep your `slices` closer to your component using it. But, this doesn't mean that it only belongs to that component. You can import and use that slice in whichever component you want.
+
+The next steps in the documentation describes how to use the slices with some examples.
+
+Example folder view:
+
+```
+project
+|
+├── app
+│   └── src
+│       ├── app
+│       │   ├── Homepage
+│       │   │   ├── index.tsx
+│       │   │   ├── slice => Contains the relevant stuff for Homepage data
+│       │   │   │   ├── index.ts
+│       │   │   │   ├── saga.ts
+│       │   │   │   ├── selectors.ts
+│       │   │   │   └── types.ts
+```