chore: 🔧 maintenance

- Updated cli commands to use only yarn
- Moved ts-node configs in tsconfig.json
- Updated package versions and fixed minor changes caused by the updates

.github/workflows/build.yaml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - run: yarn add shelljs 
       - run: yarn run create:npm-package
       - name: Upload template
@@ -26,17 +26,17 @@ jobs:
     needs: createNpmPackage
     runs-on: ubuntu-latest
     steps:
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - name: Download template
         uses: actions/download-artifact@v1
         with:
           name: cra-template-rb
           path: ../cra-template-rb # Put into the upper folder. create-react-app wants the current directory empty
       - name: Create CRA from downloaded template
-        run: npx create-react-app --template file:../cra-template-rb .
+        run: yarn create react-app --template file:../cra-template-rb .
       - run: yarn run build
       - run: yarn run test:generators
       - run: yarn run lint

.github/workflows/release.yml

@@ -10,7 +10,7 @@ jobs:
   createAndTestCRAFromNpm:
     strategy:
       matrix:
-        node-version: [14.x, 15.x, 16.x]
+        node-version: [16.x, 17.x]
 
     runs-on: ubuntu-latest
     steps:
@@ -19,7 +19,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Create CRA from npm template
-        run: npx create-react-app --template cra-template-rb .
+        run: yarn create react-app --template cra-template-rb .
       - run: yarn run build
       - run: yarn run test:generators
       - run: yarn run lint

.github/workflows/test.yaml

@@ -9,10 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - run: yarn --frozen-lockfile
       - run: yarn run test:coverage
       - name: Upload to Coveralls
@@ -23,9 +23,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 16.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 16.x
       - run: yarn --frozen-lockfile
       - run: yarn run test:internals

README.md

@@ -60,7 +60,7 @@ Start your `create-react-app` projects in seconds with the best, industry-standa
 Create React App with the template
 
 ```shell
-npx create-react-app --template cra-template-rb my-app
+yarn create react-app --template cra-template-rb my-app
 ```
 
 Start and check our example app, if you want

docs/quick-start.md

@@ -7,7 +7,7 @@ You have just **3** easy-peasy steps to do :)
 **1)** Create **CRA** app with the custom template
 
 ```shell
-npx create-react-app --template cra-template-rb my-app
+yarn create react-app --template cra-template-rb my-app
 ```
 
 **2)** Start the example application and checkout the features made ready for you.

internals/extractMessages/jest.config.js

@@ -1,9 +1,4 @@
 module.exports = {
-  globals: {
-    'ts-jest': {
-      tsConfig: 'internals/ts-node.tsconfig.json',
-    },
-  },
   testMatch: [
     '**/__tests__/**/*.+(ts|tsx|js)',
     '**/?(*.)+(spec|test).+(ts|tsx|js)',

internals/generators/plopfile.ts

@@ -11,7 +11,7 @@ export default function plop(plop: NodePlopAPI) {
   plop.setGenerator('slice', sliceGenerator);
 
   plop.setActionType('prettify', (answers, config) => {
-    const data = config.data as PrettifyCustomActionData;
+    const data = config!.data as PrettifyCustomActionData;
     shell.exec(`yarn run prettify -- "${data.path}"`, { silent: true });
     return '';
   });

internals/scripts/create-changelog.script.ts

@@ -10,7 +10,7 @@ export function createChangeLog(opts: Options = {}) {
     process.exit(1);
   }
   shell.exec(
-    `npx standard-version --skip.commit --skip.tag --skip.changelog=0`,
+    `yarn standard-version --skip.commit --skip.tag --skip.changelog=0`,
     {
       silent: false,
     },

internals/scripts/create-cra-app.script.ts

@@ -8,7 +8,7 @@ export function createCRA(opts: Options = {}) {
   shell.exec(`rm -rf ${app_name}`);
 
   const template = createNpmPackage();
-  shell.exec(`npx create-react-app ${app_name} --template file:${template}`, {
+  shell.exec(`yarn create react-app ${app_name} --template file:${template}`, {
     silent: false,
     fatal: true,
   });

internals/scripts/create-template-folder.ts

@@ -60,8 +60,6 @@ export function crateTemplateFolder(opts: Options = {}) {
   copyToTemplate('internals/startingTemplate', true);
   copyToTemplate('internals/testing', true);
 
-  copyToTemplate('internals/ts-node.tsconfig.json');
-
   copyToTemplate('.vscode', true);
   copyToTemplate('public', true);
   copyToTemplate('src', true);

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

@@ -5,10 +5,10 @@ export function HomePage() {
   return (
     <>
       <Helmet>
-        <title>Home Page</title>
+        <title>HomePage</title>
         <meta name="description" content="A Boilerplate application homepage" />
       </Helmet>
-      <span>HomePage container</span>
+      <span>My HomePage</span>
     </>
   );
 }

internals/startingTemplate/src/styles/__tests__/media.test.ts

@@ -3,7 +3,7 @@ import { css } from 'styled-components/macro';
 
 describe('media', () => {
   it('should return media query in css', () => {
-    const mediaQuery = media.small`color:red;`.join('');
+    const mediaQuery = media.small`color: red;`.join('');
     const cssVersion = css`
       @media (min-width: ${sizes.small}px) {
         color: red;

internals/startingTemplate/tsconfig.json

@@ -18,5 +18,14 @@
     "jsx": "react",
     "baseUrl": "./src"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "ts-node": {
+    "compilerOptions": {
+      "esModuleInterop": true,
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "noEmit": true,
+      "allowSyntheticDefaultImports": true
+    }
+  }
 }

internals/testing/generators/test-generators.ts

@@ -13,9 +13,10 @@ import { sliceVariations } from './sliceVariations';
 import { baseGeneratorPath } from '../../generators/paths';
 
 interface PlopGenerator extends PG {
-  runActions: <T extends string | number>(
-    props: { [P in T]: any },
-  ) => Promise<{ changes: []; failures: [] }>;
+  runActions: <T extends string | number>(props: { [P in T]: any }) => Promise<{
+    changes: [];
+    failures: [];
+  }>;
 }
 
 process.chdir(path.join(__dirname, '../../generators'));

package.json

@@ -8,8 +8,7 @@
   },
   "license": "MIT",
   "engines": {
-    "yarn": ">=1.22.10",
-    "node": ">=14.15.0"
+    "node": ">=14.x"
   },
   "bugs": {
     "url": "https://github.com/react-boilerplate/react-boilerplate-cra-template/issues"
@@ -37,28 +36,28 @@
     "test": "react-scripts test",
     "// ---TEMPLATE---": "Scripts will be also in the template",
     "start:prod": "yarn run build && serve -s build",
-    "test:generators": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/testing/generators/test-generators.ts",
+    "test:generators": "ts-node ./internals/testing/generators/test-generators.ts",
     "checkTs": "tsc --noEmit",
     "eslint": "eslint --ext js,ts,tsx",
     "lint": "yarn run eslint src",
     "lint:fix": "yarn run eslint --fix src",
     "lint:css": "stylelint src/**/*.css",
-    "generate": "cross-env TS_NODE_PROJECT='./internals/ts-node.tsconfig.json' plop --plopfile internals/generators/plopfile.ts",
-    "cleanAndSetup": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/clean.ts",
+    "generate": "plop --plopfile internals/generators/plopfile.ts",
+    "cleanAndSetup": "ts-node ./internals/scripts/clean.ts",
     "prettify": "prettier --write",
     "extract-messages": "i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js",
     "// ---TESTING TEMPLATE---": "",
     "test:internals": "yarn run test:extract-messages && yarn run test:generators",
     "test:extract-messages": "jest --config=internals/extractMessages/jest.config.js",
-    "verify-startingTemplate-changes": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/verify-startingTemplate-changes.ts",
+    "verify-startingTemplate-changes": "ts-node ./internals/scripts/verify-startingTemplate-changes.ts",
     "test:coverage": "yarn run test --watchAll=false --coverage",
     "test:cra": "yarn run create:cra-app && cd generated-cra-app && yarn run test:generators && yarn run lint && yarn run checkTs && yarn run cleanAndSetup && yarn run lint && yarn run checkTs",
     "// ---BUILDING TEMPLATE---": "",
-    "create:npm-package": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/create-npm-package.script.ts",
-    "create:cra-app": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/create-cra-app.script.ts",
+    "create:npm-package": "ts-node ./internals/scripts/create-npm-package.script.ts",
+    "create:cra-app": "ts-node ./internals/scripts/create-cra-app.script.ts",
     "// ---PUBLISHING---": "",
     "publish:github": "cross-env PUBLIC_URL='/react-boilerplate-cra-template' yarn build && gh-pages -d build",
-    "changelog": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/scripts/create-changelog.script.ts",
+    "changelog": "ts-node ./internals/scripts/create-changelog.script.ts",
     "release": "standard-version",
     "publish:npm": "yarn run create:npm-package && yarn publish .cra-template-rb --non-interactive"
   },
@@ -90,73 +89,74 @@
     }
   },
   "dependencies": {
-    "@reduxjs/toolkit": "1.6.1",
+    "@reduxjs/toolkit": "1.7.1",
     "fontfaceobserver": "2.1.0",
-    "i18next": "20.4.0",
+    "i18next": "21.6.6",
     "i18next-browser-languagedetector": "6.1.2",
     "react": "17.0.2",
-    "react-app-polyfill": "2.0.0",
+    "react-app-polyfill": "3.0.0",
     "react-dom": "17.0.2",
-    "react-helmet-async": "1.0.9",
-    "react-i18next": "11.11.4",
-    "react-redux": "7.2.4",
+    "react-helmet-async": "1.2.2",
+    "react-i18next": "11.15.3",
+    "react-is": "17.0.2",
+    "react-redux": "7.2.6",
     "react-router-dom": "5.2.0",
     "redux-injectors": "1.3.0",
     "redux-saga": "1.1.3",
-    "sanitize.css": "12.0.1",
-    "styled-components": "5.3.0",
-    "web-vitals": "2.1.0"
+    "sanitize.css": "13.0.0",
+    "styled-components": "5.3.3",
+    "web-vitals": "2.1.2"
   },
   "devDependencies": {
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
-    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "12.0.0",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "12.1.2",
     "@types/fontfaceobserver": "2.1.0",
-    "@types/jest": "26.0.23",
+    "@types/jest": "27.4.0",
     "@types/node": "14.14.31",
-    "@types/react": "17.0.19",
-    "@types/react-dom": "17.0.9",
-    "@types/react-redux": "7.1.18",
-    "@types/react-router-dom": "5.1.8",
+    "@types/react": "17.0.38",
+    "@types/react-dom": "17.0.11",
+    "@types/react-redux": "7.1.22",
+    "@types/react-router-dom": "5.3.2",
     "@types/react-test-renderer": "17.0.1",
     "@types/rimraf": "3.0.2",
-    "@types/shelljs": "0.8.9",
-    "@types/styled-components": "5.1.12",
-    "@types/testing-library__jest-dom": "5.14.1",
+    "@types/shelljs": "0.8.11",
+    "@types/styled-components": "5.1.20",
+    "@types/testing-library__jest-dom": "5.14.2",
     "@types/webpack": "5.28.0",
-    "@types/webpack-env": "1.16.2",
+    "@types/webpack-env": "1.16.3",
     "chalk": "4.1.2",
     "cross-env": "7.0.3",
     "devmoji": "2.3.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react-hooks": "4.3.0",
     "gh-pages": "3.2.3",
     "git-branch-is": "4.0.0",
-    "husky": "7.0.1",
-    "i18next-scanner": "3.0.0",
+    "husky": "7.0.4",
+    "i18next-scanner": "3.1.0",
     "inquirer": "7.3.3",
     "inquirer-directory": "2.2.0",
-    "jest-styled-components": "7.0.5",
-    "lint-staged": "11.1.2",
+    "jest-styled-components": "7.0.8",
+    "lint-staged": "12.1.7",
     "node-plop": "0.26.2",
     "plop": "2.7.4",
-    "prettier": "2.3.2",
-    "react-scripts": "4.0.3",
+    "prettier": "2.5.1",
+    "react-scripts": "5.0.0",
     "react-test-renderer": "17.0.2",
-    "replace-in-file": "6.2.0",
+    "replace-in-file": "6.3.2",
     "rimraf": "3.0.2",
-    "serve": "12.0.0",
-    "shelljs": "0.8.4",
-    "standard-version": "9.3.1",
-    "stylelint": "13.13.1",
-    "stylelint-config-recommended": "5.0.0",
+    "serve": "13.0.2",
+    "shelljs": "0.8.5",
+    "standard-version": "9.3.2",
+    "stylelint": "14.2.0",
+    "stylelint-config-recommended": "6.0.0",
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-processor-styled-components": "1.10.0",
-    "ts-jest": "26.5.6",
-    "ts-node": "10.2.1",
-    "typescript": "4.3.5"
+    "ts-jest": "27.1.3",
+    "ts-node": "10.4.0",
+    "typescript": "4.5.4"
   },
   "browserslist": {
     "production": [

src/app/__tests__/__snapshots__/index.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`<App /> should render and match the snapshot 1`] = `
         "lang": "en-US",
       }
     }
+    prioritizeSeoTags={false}
     titleTemplate="%s - React Boilerplate"
   >
     <meta

src/app/components/NavBar/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NavBar /> should match snapshot 1`] = `
-<NavBar__Wrapper>
-  <PageWrapper>
+<styled.header>
+  <styled.div>
     <Logo />
     <Nav />
-  </PageWrapper>
-</NavBar__Wrapper>
+  </styled.div>
+</styled.header>
 `;

src/app/pages/HomePage/Features/GithubRepoForm/slice/saga.ts

@@ -26,7 +26,7 @@ export function* getRepos() {
     } else {
       yield put(actions.repoError(RepoErrorType.USER_HAS_NO_REPO));
     }
-  } catch (err) {
+  } catch (err: any) {
     if (err.response?.status === 404) {
       yield put(actions.repoError(RepoErrorType.USER_NOT_FOUND));
     } else if (err.message === 'Failed to fetch') {