fix build, add "demo" script in package.json

Author: vas3a

.babelrc.json

@@ -0,0 +1,7 @@
+{
+    "sourceType": "unambiguous",
+    "presets": ["@babel/preset-env", "@babel/preset-typescript", [
+        "@babel/preset-react", {"runtime": "automatic"}
+    ]],
+    "plugins": ["@babel/plugin-transform-runtime"]
+}

README.md

@@ -196,28 +196,21 @@ Each [Tool](#tools) can have its own setup requirements. Please see each tool's
 
 ## yarn Commands
 
-| Command               | Description                                                                           |
-| --------------------- | ------------------------------------------------------------------------------------- |
-| `yarn start`          | Serve dev mode build with the default config |
-| `yarn start:<dev>`    | Serve dev mode build with dev's personal config |
-| `yarn build`          | Build dev mode build with the default config and outputs static files in /builds |
-| `yarn build:prod`     | Build prod mode build with the prod config and outputs static files in /builds |
-| `yarn lint:ts`        | Run eslint against ts/x files and outputs report |
-| `yarn lint:ts:fix`    | Run eslint against ts/x files, fixes auto-fixable issues, and  outputs report |
-| `yarn lint:js`        | Run eslint against js/x files and outputs report |
-| `yarn lint:js:fix`    | Run eslint against js/x files, fixes auto-fixable issues, and  outputs report |
-| `yarn lint`           | Run eslint against js/x and ts/x files and outputs report |
-| `yarn lint:fix`       | Run eslint against js/x and ts/x files, fixes auto-fixable issues, and  outputs report |
-| `yarn test`           | Run unit tests, watching for changes and re-running per your specifications |
-| `yarn test:no-watch`  | Run unit tests once, without watching for changes or re-running |
-| `yarn cy:run`         | Run e2e tests once in local command with the site is running    |
-| `yarn cy:ci`          | Run e2e tests once by circle ci                                 |
-| `yarn report:coverage`| Generate e2e coverage report in html format                     |
-| `yarn report:coverage:text`  | Generate e2e coverage report in text format              |
-
-
-
-
+| Command                      | Description                                                                              |
+| ---------------------        | -------------------------------------------------------------------------------------    |
+| `yarn start`                 | Serve dev mode build with the default config                                             |
+| `yarn start:<dev>`           | Serve dev mode build with dev's personal config                                          |
+| `yarn build`                 | Build dev mode build with the default config and outputs static files in /build          |
+| `yarn build:prod`            | Build prod mode build with the prod config and outputs static files in /build            |
+| `yarn demo`                  | Serves the built files (by running yarn:build) for local testing                         |
+| `yarn lint`                  | Run eslint against js/x and ts/x files and outputs report                                |
+| `yarn lint:fix`              | Run eslint against js/x and ts/x files, fixes auto-fixable issues, and  outputs report   |
+| `yarn test`                  | Run unit tests, watching for changes and re-running per your specifications              |
+| `yarn test:no-watch`         | Run unit tests once, without watching for changes or re-running                          |
+| `yarn cy:run`                | Run e2e tests once in local command with the site is running                             |
+| `yarn cy:ci`                 | Run e2e tests once by circle ci                                                          |
+| `yarn report:coverage`       | Generate e2e coverage report in html format                                              |
+| `yarn report:coverage:text`  | Generate e2e coverage report in text format                                       |
 
 # Application Structure
 

craco.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const CracoCSSModules = require('craco-css-modules');
+const BabelRcPlugin = require('@jackwilsdon/craco-use-babelrc');
 
 const isProd = process.env.APPMODE === "production";
 
@@ -17,6 +18,7 @@ module.exports = {
     },
 
     plugins: [
+        { plugin: BabelRcPlugin },
         { plugin: CracoCSSModules },
     ],
 

package.json

@@ -7,6 +7,7 @@
         "dev": "yarn craco start",
         "start": "sh start.sh",
         "build": "yarn craco build",
+        "demo": "npx http-server --port 443 -a 0.0.0.0 -S -C ./ssl/rootCA.crt -K ./ssl/rootCA.key -P https://local.topcoder-dev.com? --proxy-options.secure false ./build",
         "lint": "eslint -c ./src/.eslintrc.js 'src/**/*.{ts,tsx}'",
         "lint:fix": "eslint -c ./src/.eslintrc.js 'src/**/*.{ts,tsx}' --fix",
         "test": "craco test --watchAll",
@@ -104,6 +105,7 @@
         "@babel/runtime": "^7.19.4",
         "@craco/craco": "^7.1.0",
         "@cypress/code-coverage": "^3.10.0",
+        "@jackwilsdon/craco-use-babelrc": "1.0.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
@@ -154,6 +156,7 @@
         "eslint-plugin-ordered-imports": "^0.6.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
+        "eslint-plugin-unicorn": "^46.0.0",
         "file-loader": "^6.2.0",
         "husky": "^8.0.1",
         "identity-obj-proxy": "^3.0.0",

src/apps/learn/.eslintrc.js

@@ -20,7 +20,7 @@ module.exports = {
     },
     plugins: [
         '@typescript-eslint',
-        'no-null',
+        'unicorn',
         'ordered-imports',
         'react',
         'react-hooks'
@@ -104,9 +104,10 @@ module.exports = {
             'error',
             120,
         ],
+        'no-empty': ["error", { "allowEmptyCatch": true }],
         'no-extra-boolean-cast': 'off',
         'no-nested-ternary': 'off',
-        'no-null/no-null': 'error',
+        'unicorn/no-null': 'error',
         'no-param-reassign': [
             'error',
             {

src/index.tsx

@@ -1,4 +1,4 @@
-import React, { StrictMode } from "react";
+import { StrictMode } from "react";
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from "react-router-dom";