optimized cra templates

Author: bennobuilder

packages/cra-template-agile-typescript/package.json

@@ -17,13 +17,13 @@
     "preview": "npm pack"
   },
   "devDependencies": {
+    "@agile-ts/core": "^0.1.2",
+    "@agile-ts/react": "^0.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "@agile-ts/core": "^0.1.0",
-    "@agile-ts/react": "^0.1.0"
+    "@types/react-dom": "^17.0.3"
   },
   "publishConfig": {
     "access": "public"

packages/cra-template-agile-typescript/template.json

@@ -1,5 +1,9 @@
 {
   "package": {
+    "scripts": {
+      "prettier": "prettier --config .prettierrc --write \"**/*.{js,ts}\"",
+      "lint": "eslint --cache \"**/*.{js,jsx,ts,tsx}\""
+    },
     "dependencies": {
       "@agile-ts/core": "^0.1.2",
       "@agile-ts/react": "^0.1.2",
@@ -8,10 +12,6 @@
       "react-scripts": "^4.0.3"
     },
     "devDependencies": {
-      "@testing-library/jest-dom": "^5.11.4",
-      "@testing-library/react": "^11.1.0",
-      "@testing-library/user-event": "^12.1.10",
-      "@types/jest": "^26.0.15",
       "@types/node": "^12.0.0",
       "@types/react": "^17.0.0",
       "@types/react-dom": "^17.0.0",

packages/cra-template-agile-typescript/template/.eslintrc.js

@@ -3,14 +3,15 @@ const WARNING = 1;
 const ERROR = 2;
 
 module.exports = {
-  plugins: ['@typescript-eslint'],
   extends: ['airbnb-typescript', 'prettier'],
+  plugins: ['@typescript-eslint', 'prettier'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: ['./tsconfig.json'],
   },
   ignorePatterns: ['.eslintrc.js'], // https://stackoverflow.com/questions/63002127/parsing-error-parseroptions-project-has-been-set-for-typescript-eslint-parser
   rules: {
     'react/prop-types': OFF,
+    'import/prefer-default-export': OFF,
   },
 };

packages/cra-template-agile-typescript/template/.gitignore

@@ -5,7 +5,7 @@ import Button from './components/Button';
 
 import styles from './Stopwatch.module.css';
 
-const Stopwatch = () => {
+const Stopwatch: React.FC = () => {
   const [time, state] = useAgile([StopwatchCore.TIME, StopwatchCore.STATE]);
 
   // Restart Stopwatch when the persisted value has been loaded

packages/cra-template-agile-typescript/template/package.json

@@ -3,7 +3,7 @@ import Stopwatch from '../../components/Stopwatch';
 
 import styles from './Home.module.css';
 
-function Home() {
+const Home: React.FC = () => {
   return (
     <div className={styles.container}>
       {/* Header */}
@@ -43,6 +43,6 @@ function Home() {
       </div>
     </div>
   );
-}
+};
 
 export default Home;

packages/cra-template-agile-typescript/template/src/components/Stopwatch/index.tsx

@@ -17,11 +17,11 @@
     "preview": "npm pack"
   },
   "devDependencies": {
+    "@agile-ts/core": "^0.1.2",
+    "@agile-ts/react": "^0.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "@agile-ts/core": "^0.1.0",
-    "@agile-ts/react": "^0.1.0"
+    "react-scripts": "4.0.3"
   },
   "publishConfig": {
     "access": "public"

packages/cra-template-agile-typescript/template/src/pages/Home/index.tsx

@@ -1,17 +1,26 @@
 {
   "package": {
+    "scripts": {
+      "prettier": "prettier --config .prettierrc --write \"**/*.{js,ts}\"",
+      "lint": "eslint --cache \"**/*.{js,jsx,ts,tsx}\""
+    },
     "dependencies": {
       "@agile-ts/core": "^0.1.2",
       "@agile-ts/react": "^0.1.2",
-      "web-vitals": "^1.0.1"
+      "react": "^17.0.2",
+      "react-dom": "^17.0.2",
+      "react-scripts": "4.0.3"
     },
     "devDependencies": {
-      "@testing-library/jest-dom": "^5.11.4",
-      "@testing-library/react": "^11.1.0",
-      "@testing-library/user-event": "^12.1.10"
-    },
-    "eslintConfig": {
-      "extends": ["react-app", "react-app/jest"]
+      "eslint": "^7.31.0",
+      "eslint-config-airbnb": "^18.2.1",
+      "eslint-config-prettier": "^8.3.0",
+      "eslint-plugin-import": "^2.23.4",
+      "eslint-plugin-jsx-a11y": "^6.4.1",
+      "eslint-plugin-prettier": "^3.4.0",
+      "eslint-plugin-react": "^7.24.0",
+      "eslint-plugin-react-hooks": "^4.2.0",
+      "prettier": "^2.3.2"
     }
   }
 }

packages/cra-template-agile/package.json

@@ -0,0 +1,13 @@
+const OFF = 0;
+const WARNING = 1;
+const ERROR = 2;
+
+module.exports = {
+  extends: ['airbnb', 'airbnb/hooks', 'prettier'],
+  plugins: ['prettier'],
+  ignorePatterns: ['.eslintrc.js'],
+  rules: {
+    'react/prop-types': OFF,
+    'import/prefer-default-export': OFF,
+  },
+};