feat(react): update to react 18

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app", "react-app/jest"]
+}

.github/workflows/main.yml

@@ -0,0 +1,19 @@
+name: Test AOE Technology Radar
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 'lts/*'
+    - run: yarn
+    - run: yarn lint
+    - run: yarn build
+    - run: git diff --quiet || (echo 'workspace is dirty after rebuilding' ; git diff ; exit 1)

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+/.yarn
 
 # testing
 /coverage

README.md

@@ -6,52 +6,52 @@ The repository is now found here: https://github.com/AOEpeople/techradar
 
 The AOE Tech radar is deployed here: https://www.aoe.com/techradar/index.html
 
-## Usage for your own radar?
+## Create your own radar
 The generator is free to use under Open Source License - in fact there are already some other Radars published based on our Radar and there are also Contributions back.
 
 However, please be aware:
 
 - It would be nice to mention in radar that the generator is based on this repository.
 - Also, when you want to reuse the CSS and Styling: Change the font (it is a licensed font) and the colors (It using AOE CI)
 
-## Use and build the radar
-> Set the environment variable `PUBLIC_URL` properly. For more information see [Host the application under a sub path](#host-the-application-under-a-sub-path)
-
-Add the tech radar as a dependency
+### Use and build the radar
+Create a new yarn3 project and add the tech radar as a dependency
 ```
-yarn add aoe_technology_radar
+npm i aoe_technology_radar
 ```
 
 Build the radar
 ```
-yarn aoe_technology_radar-buildRadar
+npx aoe_technology_radar-buildRadar
 ```
 
-Generate json file based on md files
+Generate the `rd.json` file containing the radar data
 ```
-yarn aoe_technology_radar-generateJson
+npx aoe_technology_radar-generateJson
 ```
 
 Serve
 ```
+cd build
 python3 -m http.server 8080
 ```
 
-Then open here: http://localhost:8080/build
+Then open here: http://localhost:8080/
 
 ### Run a prepared static version
-To have a better SEO ranking, you can generate a html file for every page.
+
+To have a better SEO ranking or deploy to S3, you can generate a html file for every page.
 
 Requirements
 * Build the radar
-* Generate the json file
+* Generate the `rd.json` file
 
 ```
-yarn aoe_technology_radar-createStaticFiles
+npx aoe_technology_radar-createStaticFiles
 ```
 
-## Usage
-For a new Technology Radar release, create a folder of the release date (YYYY-MM-DD) under `/radar`.
+## Authoring Techradar contents
+For a new Technology Radar release, create a folder of the release date (YYYY-MM-DD) under `./radar`.
 
 In each release folder create a folder for every quadrant and place the items there.
 
@@ -100,19 +100,19 @@ You can customize the following parts of the tech radar.
 Set the environment variable `REACT_APP_RADAR_NAME`. The default is "AOE Technology Radar".
 
 ### Host the application under a sub path
-To host the application under a sub path, set the environment variable `PUBLIC_URL`, e.g. "/techradar". The default is "/build".
+To host the application under a sub path, set the environment variable `PUBLIC_URL`, e.g. "/techradar". The default is "/".
 
 ### Change the favicon
-To change the favicon, create a public folder in your application and put your `favicon.ico` in it.
+To change the favicon, create a folder named `public` and put your `favicon.ico` in it.
 
 ### Change the logo
-To change the logo, create a public folder in your application and put your `logo.svg` in it.
+To change the logo, create a folder named `public` and put your `logo.svg` in it.
 
 For reference have a look at [public/logo.svg](./public/logo.svg).
 
 ### Change the date format
 By default the Date format used in the app is `"MMMM YYYY"`.
-You can change this by editing the config file as shown below.
+You can change this by editing the `config.js` file as shown below.
 Please be sure you are entering a valid [moment.js format string](https://momentjs.com/docs/#/displaying/format).
 
 ```json
@@ -125,7 +125,6 @@ Please be sure you are entering a valid [moment.js format string](https://moment
 For reference have a look at [public/logo.svg](./public/logo.svg).
 
 ### Edit from published radar
-
 You can activate the `editLink` feature which will display a small edit button next to a technology which let's you jump directly to a gitlab / github / etc. edit page:
 
 ```json
@@ -287,19 +286,14 @@ To add a help page, create a public folder in your application and put a `messag
 > For more information see the source code of the [Messages Context](./src/context/MessagesContext/index.tsx).
 
 ## Development
-For local development you need a `rd.json` in the public folder. You can use [rd_example.json](./rd_example.json).
-
-For several customizations you need a `messages.json` in the public folder. You can use [messages_example.json](./messages_example.json).
-
-Then simply start the dev server
-
+Then simply start the dev server:
 ```
-yarn start
+npm run start
 ```
 
 ### Change scripts
 If you change one of the scripts in the scripts' folder, you have to compile them to JavaScript.
 
-Therefore, run `yarn build:scripts` and commit the results in dist_scripts.
+Therefore, run `npm run build:scripts` and commit the results in dist_scripts.
 
 To make it more robust the script will be executed on commit.

dist_scripts/scripts/buildRadar.js

@@ -2,7 +2,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -36,7 +40,7 @@ fs.removeSync(paths.templateNodeModules);
 fs.ensureSymlinkSync(paths.appNodeModules, paths.templateNodeModules);
 var runCommand = function (command) {
     return new Promise(function (resolve, reject) {
-        var executedCommand = child_process_1.spawn(command, {
+        var executedCommand = (0, child_process_1.spawn)(command, {
             stdio: "inherit",
             shell: true,
         });
@@ -60,10 +64,11 @@ var buildTemplate = function () {
     var packageManager = fs.existsSync(paths.appYarnLock) ? "yarn" : "npm";
     fs.emptyDirSync(paths.templateBuild);
     process.chdir(paths.template);
-    return runCommand(packageManager + " run build");
+    return runCommand("".concat(packageManager, " run build"));
 };
 buildTemplate().then(function () {
     fs.copySync(paths.templateBuild, paths.appBuild);
+    fs.ensureDirSync(paths.appPublic);
     fs.copySync(paths.appPublic, paths.appBuild);
-    console.log(paths.appBuild + " was created and can be deployed.");
+    console.log("".concat(paths.appBuild, " was created and can be deployed."));
 });

dist_scripts/scripts/createStaticFiles.js

@@ -55,22 +55,22 @@ process.on("unhandledRejection", function (err) {
             case 0:
                 _a.trys.push([0, 2, , 3]);
                 console.log("starting static");
-                return [4 /*yield*/, radar_1.createRadar()];
+                return [4 /*yield*/, (0, radar_1.createRadar)()];
             case 1:
                 radar = _a.sent();
-                fs_1.copyFileSync("build/index.html", "build/overview.html");
-                fs_1.copyFileSync("build/index.html", "build/help-and-about-tech-radar.html");
-                rawConf = fs_1.readFileSync("build/config.json", "utf-8");
+                (0, fs_1.copyFileSync)("build/index.html", "build/overview.html");
+                (0, fs_1.copyFileSync)("build/index.html", "build/help-and-about-tech-radar.html");
+                rawConf = (0, fs_1.readFileSync)("build/config.json", "utf-8");
                 config = JSON.parse(rawConf);
                 Object.keys(config.quadrants).forEach(function (quadrant) {
-                    var destFolder = "build/" + quadrant;
-                    fs_1.copyFileSync("build/index.html", destFolder + ".html");
-                    if (!fs_1.existsSync(destFolder)) {
-                        fs_1.mkdirSync(destFolder);
+                    var destFolder = "build/".concat(quadrant);
+                    (0, fs_1.copyFileSync)("build/index.html", "".concat(destFolder, ".html"));
+                    if (!(0, fs_1.existsSync)(destFolder)) {
+                        (0, fs_1.mkdirSync)(destFolder);
                     }
                 });
                 radar.items.forEach(function (item) {
-                    fs_1.copyFileSync("build/index.html", "build/" + item.quadrant + "/" + item.name + ".html");
+                    (0, fs_1.copyFileSync)("build/index.html", "build/".concat(item.quadrant, "/").concat(item.name, ".html"));
                 });
                 console.log("created static files.");
                 return [3 /*break*/, 3];

dist_scripts/scripts/generateJson.js

@@ -2,7 +2,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -96,7 +100,7 @@ var generateJson = function () { return __awaiter(void 0, void 0, void 0, functi
 }); };
 generateJson()
     .then(function () {
-    console.log(paths.appRdJson + " created.");
+    console.log("".concat(paths.appRdJson, " created."));
 })
     .catch(function (err) {
     if (err && err.message) {

dist_scripts/scripts/generateJson/file.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -18,10 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.save = exports.getAllMarkdownFiles = exports.buildPath = exports.jsPath = exports.faviconPath = exports.stylesPath = exports.radarPath = exports.relativePath = void 0;
@@ -41,39 +49,39 @@ var radarPath = function () {
     for (var _i = 0; _i < arguments.length; _i++) {
         pathInSrc[_i] = arguments[_i];
     }
-    return exports.relativePath.apply(void 0, __spreadArray(["radar"], pathInSrc));
+    return exports.relativePath.apply(void 0, __spreadArray(["radar"], pathInSrc, false));
 };
 exports.radarPath = radarPath;
 var stylesPath = function () {
     var pathInSrc = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         pathInSrc[_i] = arguments[_i];
     }
-    return exports.relativePath.apply(void 0, __spreadArray(["styles"], pathInSrc));
+    return exports.relativePath.apply(void 0, __spreadArray(["styles"], pathInSrc, false));
 };
 exports.stylesPath = stylesPath;
 var faviconPath = function () {
     var pathInSrc = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         pathInSrc[_i] = arguments[_i];
     }
-    return exports.relativePath.apply(void 0, __spreadArray(["assets/favicon.ico"], pathInSrc));
+    return exports.relativePath.apply(void 0, __spreadArray(["assets/favicon.ico"], pathInSrc, false));
 };
 exports.faviconPath = faviconPath;
 var jsPath = function () {
     var pathInSrc = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         pathInSrc[_i] = arguments[_i];
     }
-    return exports.relativePath.apply(void 0, __spreadArray(["js"], pathInSrc));
+    return exports.relativePath.apply(void 0, __spreadArray(["js"], pathInSrc, false));
 };
 exports.jsPath = jsPath;
 var buildPath = function () {
     var pathInDist = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         pathInDist[_i] = arguments[_i];
     }
-    return exports.relativePath.apply(void 0, __spreadArray(["build"], pathInDist));
+    return exports.relativePath.apply(void 0, __spreadArray(["build"], pathInDist, false));
 };
 exports.buildPath = buildPath;
 var getAllMarkdownFiles = function (folder) {
@@ -82,7 +90,7 @@ var getAllMarkdownFiles = function (folder) {
 exports.getAllMarkdownFiles = getAllMarkdownFiles;
 var getAllFiles = function (folder, predicate) {
     return new Promise(function (resolve, reject) {
-        var walker = walk_1.walk(folder, { followLinks: false });
+        var walker = (0, walk_1.walk)(folder, { followLinks: false });
         var files = [];
         walker.on("file", function (root, fileStat, next) {
             if (predicate(fileStat.name)) {
@@ -106,6 +114,6 @@ var getAllFiles = function (folder, predicate) {
 };
 var isMarkdownFile = function (name) { return name.match(/\.md$/) !== null; };
 var save = function (data, fileName) {
-    return fs_extra_1.outputFile(exports.buildPath(fileName), data);
+    return (0, fs_extra_1.outputFile)((0, exports.buildPath)(fileName), data);
 };
 exports.save = save;