chore: 🔧 maintenance

Updated package versions and fixed errors that occured

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],

.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>
 

internals/scripts/clean.ts

@@ -1,7 +1,6 @@
 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');
 
@@ -28,31 +27,24 @@ export function cleanAndSetup(opts: Options = {}) {
 
   shell.exec('yarn run prettify -- src/*', { silent: true });
 
-  cleanPackageJsonFile();
+  modifyPackageJsonFile();
 
   shell.echo(
     chalk.green('Example app removed and setup completed. Happy Coding!!!'),
   );
 }
 
-function cleanPackageJsonFile() {
+function modifyPackageJsonFile() {
   delete packageJson['eslintConfig'];
   delete packageJson['dependencies']['replace-in-file'];
   delete packageJson['scripts']['cleanAndSetup'];
 
+  packageJson['scripts']['prepare'] = 'husky install';
+
   fs.writeFileSync('./package.json', JSON.stringify(packageJson));
   shell.exec('yarn 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);
-  }
+  shell.exec('yarn install', { silent: false });
 }
 
 (function () {

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

@@ -1,7 +1,5 @@
 import shell from 'shelljs';
 import { createNpmPackage, removeNpmPackage } from './create-npm-package';
-import replace from 'replace-in-file';
-import fs from 'fs';
 
 interface Options {}
 
@@ -16,28 +14,6 @@ export function createCRA(opts: Options = {}) {
   });
 
   removeNpmPackage();
-
-  fixHuskyBug();
-}
-
-function fixHuskyBug() {
-  // husky changes directory to the example folder which we don't want
-  // https://github.com/typicode/husky#monorepos
-  // https://github.com/typicode/husky/issues/677
-  const huskyLocalPath = '.git/hooks/husky.local.sh';
-  if (!fs.existsSync(huskyLocalPath)) {
-    return;
-  }
-  const options = {
-    files: '.git/hooks/husky.local.sh',
-    from: /cd.*/g,
-    to: `cd "."`,
-  };
-  try {
-    replace.sync(options);
-  } catch (error) {
-    console.error('Error occurred:', error);
-  }
 }
 
 createCRA();

internals/scripts/create-template-folder.ts

@@ -1,16 +1,37 @@
 import shell from 'shelljs';
+import replace from 'replace-in-file';
+
 import { shellEnableAbortOnFail, shellDisableAbortOnFail } from './utils';
 
 interface Options {}
 
 export function crateTemplateFolder(opts: Options = {}) {
   const abortOnFailEnabled = shellEnableAbortOnFail();
 
-  const copyToTemplate = (path: string, isRecursive?: boolean) => {
+  const copyToTemplate = (
+    path: string,
+    isRecursive?: boolean,
+    modifyContent?: {
+      from: RegExp;
+      to: string;
+    },
+  ) => {
+    const p = `template/${path}`;
     if (isRecursive) {
-      shell.cp('-r', path, `template/${path}`);
+      shell.cp('-r', path, p);
     } else {
-      shell.cp(path, `template/${path}`);
+      shell.cp(path, p);
+    }
+    if (modifyContent) {
+      try {
+        replace.sync({
+          files: p,
+          from: modifyContent.from,
+          to: modifyContent.to,
+        });
+      } catch (error) {
+        console.error('Couldnt modify content:', error);
+      }
     }
   };
 
@@ -19,6 +40,13 @@ export function crateTemplateFolder(opts: Options = {}) {
 
   shell.mkdir('template');
 
+  // We want only pre-commit hook with custom script excluded
+  shell.mkdir('template/.husky');
+  copyToTemplate('.husky/pre-commit', false, {
+    from: /yarn verify-startingTemplate-changes/g,
+    to: '',
+  });
+
   shell.mkdir('template/internals');
   copyToTemplate('internals/generators', true);
 

internals/startingTemplate/src/locales/translations.ts

@@ -4,7 +4,8 @@ import { ConvertedToObjectType, TranslationJsonType } from './types';
  * This file is seperate from the './i18n.ts' simply to make the Hot Module Replacement work seamlessly.
  * Your components can import this file in 'messages.ts' files which would ruin the HMR if this isn't a separate module
  */
-export const translations: ConvertedToObjectType<TranslationJsonType> = {} as any;
+export const translations: ConvertedToObjectType<TranslationJsonType> =
+  {} as any;
 
 /*
  * Converts the static JSON file into an object where keys are identical