chore: 🔧 merge dev to master before release (#30)

.github/workflows/build.yaml

@@ -37,7 +37,7 @@ jobs:
       - run: npm run lint
       - run: npm run checkTs
       - run: npm run test
-      - run: npm run cleanExampleApp
+      - run: npm run cleanAndSetup
       - run: npm run build
       - run: npm run test:generators
       - run: npm run lint

.github/workflows/release.yml

@@ -23,7 +23,7 @@ jobs:
       - run: npm run test:generators
       - run: npm run lint
       - run: npm run checkTs
-      - run: npm run cleanExampleApp
+      - run: npm run cleanAndSetup
       - run: npm run build
       - run: npm run test:generators
       - run: npm run lint

.versionrc.js

@@ -29,6 +29,6 @@ module.exports = {
     { type: 'style', section: internalSection, hidden: false },
   ],
   skip: {
-    commit: true,
+    changelog: true,
   },
 };

README.md

@@ -15,12 +15,14 @@ with a focus on
   <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/actions?query=workflow%3Atests">
     <img src="https://github.com/react-boilerplate/react-boilerplate-cra-template/workflows/test/badge.svg" alt="Tests Status" />
   </a>
+  <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>
-
-</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" />
@@ -31,7 +33,6 @@ with a focus on
   <a href="https://opencollective.com/react-boilerplate/">
     <img src="https://opencollective.com/react-boilerplate/sponsors/badge.svg" alt="Sponsors" />
   </a>
-  <img src="https://img.shields.io/github/license/react-boilerplate/react-boilerplate-cra-template" alt="License" />
 </div>
 
 <br />
@@ -44,29 +45,38 @@ The official [Create React App](https://github.com/facebook/create-react-app) te
 
 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)
 
 **📦 Package:** [npm](https://www.npmjs.com/package/cra-template-rb)
 
 ![version](https://img.shields.io/npm/v/cra-template-rb)
 ![version](https://img.shields.io/npm/dm/cra-template-rb)
 
-**👁️ Explore the Example Application:** [Example Application](https://react-boilerplate.github.io/react-boilerplate-cra-template/)
-
 ---
 
 ## Install & Start
 
+Create React App with the template
+
 ```shell
-# Create React App with the template
 npx create-react-app --template cra-template-rb my-app
+```
+
+Start and check our example app, if you want
 
-# Check the example app
+```shell
 cd my-app
 npm start
+```
+
+Remove the example app to start your project!
 
-# Remove the example app and start your project!
-npm run cleanExampleApp
+```shell
+npm run cleanAndSetup
 ```
 
 ## Features

docs/SUMMARY.md

@@ -30,4 +30,4 @@
 
 ## Misc
 
-- [Gotchas & Tips](misc/gotchas.md)
+- [FAQ](misc/faq.md)

docs/building-blocks/README.md

@@ -9,9 +9,8 @@ First we have to look at what is happening when react starts its life with out `
 It is one of the biggest files of the boilerplate. It contains all the global setup to make sure your app runs smoothly. Let's break its contents down:
 
 - `react-app-polyfill` is imported to enable compatibility with many browsers and cool stuff like generator functions, Promises, etc.
-- A `history` object is created, which remembers all the browsing history for your app. This is used by the ConnectedRouter to know which pages your users visit. (Very useful for analytics, by the way.)
 - 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 />`, `<ConnectedRouter />`.
+- `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 is set up via [Webpack HMR](https://webpack.js.org/guides/hot-module-replacement/) that makes all the reducers, injected sagas, components, containers, and i18n messages hot reloadable.
 - i18n internationalization support setup.
 - `<Provider />` connects your app with the redux `store`.
@@ -40,10 +39,9 @@ The store is created with the `createStore()` factory, which accepts three param
 2.  **Initial state:** The initial state of your app as determined by your reducers.
 3.  **Middleware/enhancers:** Middlewares are third party libraries which intercept each redux action dispatched to the redux store and then... do stuff. For example, if you install the [`redux-logger`](https://github.com/evgenyrodionov/redux-logger) middleware, it will listen to all the actions being dispatched to the store and print previous and next state in the browser console. It's helpful to track what happens in your app.
 
-In our application we are using two such middleware.
+In our application we are using a single middleware.
 
-1.  **Router middleware:** Keeps your routes in sync with the redux `store`.
-2.  **Redux saga:** Used for managing _side-effects_ such as dispatching actions asynchronously or accessing browser data.
+1.  **Redux saga:** Used for managing _side-effects_ such as dispatching actions asynchronously or accessing browser data.
 
 ### Redux-Toolkit
 

docs/building-blocks/css.md

@@ -61,3 +61,21 @@ _(The CSS rules are automatically vendor prefixed, so you don't have to think ab
 🧙**Tips:** Importing from `styled-components/macro` will enable some features you can [see here](https://styled-components.com/docs/tooling#babel-macro)
 
 {% endhint %}
+
+## Media queries
+
+Type-safe media queries can be complicated if you haven't mastered the typescript. Therefore we include a [media utility file](../../src/styles/media.ts) to make things easier for you.
+
+### Example Usage
+
+```ts
+import { media } from 'styles/media';
+
+const SomeDiv = styled.div`
+  display: flex;
+  ....
+    ${media.medium`
+      display: block
+  `};
+`;
+```

docs/building-blocks/routing.md

@@ -1,12 +1,10 @@
 # Routing
 
 `react-router` is the de-facto standard routing solution for react applications.
-The thing is that with redux and a single state tree, the URL is part of that
-state. `connected-react-router` takes care of synchronizing the location of our
-application with the application state.
 
-(See the [`connected-react-router` FAQ](https://github.com/supasate/connected-react-router/blob/master/FAQ.md)
-for more information)
+## 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.
 
 ## Usage
 
@@ -20,25 +18,6 @@ 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 container or component generator with 'Do you want to load resources asynchronously?' option activated.
 
-To go to a new page use the `push` function by `connected-react-router`:
-
-```ts
-import { push } from 'connected-react-router';
-
-dispatch(push('/path/to/somewhere'));
-```
-
-You can do the same thing in a saga:
-
-```ts
-import { push } from 'connected-react-router';
-import { put } from 'redux-saga/effects';
-
-export function* mySaga() {
-  yield put(push('/home'));
-}
-```
-
 ## Child Routes
 
 For example, if you have a route called `about` at `/about` and want to make a child route called `team` at `/about/our-team`, follow the example

docs/deployment/netlify.md

@@ -1,3 +1,39 @@
 # Deploy to Netlify
 
-This docs is still awaiting help 😢If you want to help with this documenation please contact to us
+### Easy 5-Step Deployment Process
+
+_Step 1:_ Create a `netlifty.toml` file in the root directory of your project and copy this code below. Edit these settings if you did not follow the boilerplate structure. More settings available here (https://docs.netlify.com/configure-builds/file-based-configuration/#sample-file)
+
+```
+[build]
+  # Directory to change to before starting a build.
+  # This is where we will look for package.json/.nvmrc/etc.
+  base = "/"
+
+  # Directory (relative to root of your repo) that contains the deploy-ready
+  # HTML files and assets generated by the build. If a base directory has
+  # been specified, include it in the publish directory path.
+  publish = "./build"
+
+  # Default build command.
+  command = "npm run build"
+
+# The following redirect is intended for use with most SPAs that handle routing internally.
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+```
+
+_Step 2:_ Commit your code and push your latest updates to a GitHub repository.
+
+_Step 3:_ Register or Login in at Netlify (https://app.netlify.com/).
+
+_Step 4:_ In your account | team page click `New site from git` then chose your repository.
+
+_Step 5:_ Click deploy.
+
+
+> Note: No need to change any setting in the last step as `netlify.toml` overwrites these settings.
+
+Now your code will be deployed automatically to netlify on every push to the default branch of your repository.🥳🥳

docs/misc/faq.md

@@ -0,0 +1,36 @@
+# 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)
+
+## Using reducers optimistically
+
+If you have containers that should be available throughout the app, like a `NavigationBar` (they aren't route specific), you need to add their respective reducers to the root reducer with the help of `combineReducers`.
+
+```ts
+// In src/store/reducers.ts
+
+...
+import { combineReducers } from '@reduxjs/toolkit';
+...
+
+import navigationBarReducer from 'containers/NavigationBar/reducer';
+
+export function createReducer(injectedReducers: InjectedReducersType = {}) {
+  const rootReducer = combineReducers({
+    navigationBar: navigationBarReducer,
+    ...injectedReducers,
+  });
+
+  return rootReducer;
+}
+```
+
+## Keeping up-to-date with the template
+
+Eventhough the template is an npm package it's not possible for you to **just update** the package, since you start CRA with this template initially. The suggested way to keep an eye on the [CHANGELOG](../../CHANGELOG.md) file. All the changes that **concerns** the template user will be displayed there, like bug fixes, documentation updates, new features etc... You can check each change's commits and file changes and see what has been changed. Then, the decision is yours if you want to apply those to your code.
+
+## Examples & Tutorials
+
+Take a look our [another 'how to' repo](https://github.com/react-boilerplate/cra-template-examples) for examples and common web app implementations & patterns

docs/quick-start.md

@@ -18,7 +18,7 @@ npm start
 **3)** When you are done examining the sample application. Clean it and start your own app!!
 
 ```shell
-npm run cleanExampleApp
+npm run cleanAndSetup
 ```
 
 {% hint style="success" %}

docs/tools/commands.md

@@ -3,11 +3,11 @@
 ## Cleaning
 
 ```Shell
-npm run cleanExampleApp
+npm run cleanAndSetup
 ```
 
 Removes the example app, replacing it with the smallest amount of boilerplate
-code necessary to start writing your app!
+code necessary to start writing your app! Also, it makes some necessary changes to your setup to give you a clean and working start
 
 {% hint style="warning" %}
 

internals/scripts/clean.ts

@@ -1,12 +1,15 @@
 import shell from 'shelljs';
 import path from 'path';
 import chalk from 'chalk';
+import replace from 'replace-in-file';
+import fs from 'fs';
+const packageJson = require('../../package.json');
 
 interface Options {}
 
 process.chdir(path.join(__dirname, '../..'));
 
-export function cleanExampleApp(opts: Options = {}) {
+export function cleanAndSetup(opts: Options = {}) {
   if (!shell.test('-e', 'internals/startingTemplate')) {
     shell.echo('The example app has already deleted.');
     shell.exit(1);
@@ -25,9 +28,33 @@ export function cleanExampleApp(opts: Options = {}) {
 
   shell.exec('npm run prettify -- src/*', { silent: true });
 
-  shell.echo(chalk.green('Example App removed. Happy Coding!!!'));
+  cleanPackageJsonFile();
+
+  shell.echo(
+    chalk.green('Example app removed and setup completed. Happy Coding!!!'),
+  );
+}
+
+function cleanPackageJsonFile() {
+  delete packageJson['eslintConfig'];
+  delete packageJson['dependencies']['replace-in-file'];
+  delete packageJson['scripts']['cleanAndSetup'];
+
+  fs.writeFileSync('./package.json', JSON.stringify(packageJson));
+  shell.exec('npm run prettify -- package.json', { silent: true });
+
+  try {
+    // Remove explanation from husky to enable it
+    replace.sync({
+      files: 'package.json',
+      from: /"husky\((.*?)\)"/g,
+      to: '"husky"',
+    });
+  } catch (error) {
+    console.error('Couldnt clean husky:', error);
+  }
 }
 
 (function () {
-  cleanExampleApp();
+  cleanAndSetup();
 })();

internals/scripts/create-changelog.script.ts

@@ -0,0 +1,24 @@
+import shell from 'shelljs';
+
+interface Options {}
+
+export function createChangeLog(opts: Options = {}) {
+  const changes1 = shell.exec(`git diff package.json`, { silent: true });
+  const changes2 = shell.exec(`git diff package-lock.json`, { silent: true });
+  if (changes1.stdout.length > 0 || changes2.stdout.length > 0) {
+    console.error('Error: Unstaged files');
+    process.exit(1);
+  }
+  shell.exec(
+    `npx standard-version --skip.commit --skip.tag --skip.changelog=0`,
+    {
+      silent: false,
+    },
+  );
+
+  // Revert the bumbped version
+  shell.exec(`git checkout -- package-lock.json`, { silent: true });
+  shell.exec(`git checkout -- package.json`, { silent: true });
+}
+
+createChangeLog();