openc3 5.8.1 → 5.9.0

data/templates/tool_react/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": [
+    "react-important-stuff",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@babel/eslint-parser"
+}

data/templates/tool_react/.gitignore

@@ -0,0 +1,72 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+tools
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store

data/templates/tool_react/.prettierignore

@@ -0,0 +1,8 @@
+.gitignore
+.prettierignore
+yarn.lock
+yarn-error.log
+package-lock.json
+dist
+coverage
+pnpm-lock.yaml

data/templates/tool_react/babel.config.json

@@ -0,0 +1,29 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react", 
+      {
+        "runtime": "automatic"
+      }
+    ],
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "useESModules": true,
+        "regenerator": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", {
+          "targets": "current node"
+        }]
+      ]
+    }
+  }
+}

data/templates/tool_react/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  rootDir: "src",
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.(j|t)sx?$": "babel-jest",
+  },
+  moduleNameMapper: {
+    "\\.(css)$": "identity-obj-proxy",
+    "single-spa-react/parcel": "single-spa-react/lib/cjs/parcel.cjs",
+  },
+  setupFilesAfterEnv: ["@testing-library/jest-dom"],
+};

data/templates/tool_react/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "<%= tool_name %>",
+  "scripts": {
+    "start": "webpack serve",
+    "start:standalone": "webpack serve --env standalone",
+    "build": "concurrently yarn:build:*",
+    "build:webpack": "webpack --mode=production",
+    "analyze": "webpack --mode=production --env analyze",
+    "lint": "eslint src --ext js",
+    "format": "prettier --write .",
+    "check-format": "prettier --check .",
+    "test": "cross-env BABEL_ENV=test jest",
+    "watch-tests": "cross-env BABEL_ENV=test jest --watch",
+    "prepare": "husky install",
+    "coverage": "cross-env BABEL_ENV=test jest --coverage"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/eslint-parser": "^7.15.0",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/runtime": "^7.15.3",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^14.0.0",
+    "babel-jest": "^29.5.0",
+    "concurrently": "^8.2.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.44.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react-important-stuff": "^3.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-cli": "^29.5.0",
+    "prettier": "^2.3.2",
+    "pretty-quick": "^3.1.1",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-config-single-spa-react": "^4.0.0",
+    "webpack-dev-server": "^4.0.0",
+    "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.13.6",
+    "@openc3/tool-common": "5.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "single-spa-react": "^5.1.1"
+  }
+}

data/templates/tool_react/src/openc3-tool_name.js

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import singleSpaReact from "single-spa-react";
+import Root from "./root.component";
+
+const lifecycles = singleSpaReact({
+  React,
+  ReactDOM,
+  rootComponent: Root,
+  errorBoundary(err, info, props) {
+    // Customize the root error boundary for your microfrontend here.
+    return null;
+  },
+  domElementGetter: function () {
+    let elem = document.getElementById("openc3-tool");
+    if (elem) {
+      return elem;
+    } else {
+      return new HTMLElement();
+    }
+  },
+});
+
+export const { bootstrap, mount, unmount } = lifecycles;

data/templates/tool_react/src/root.component.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { OpenC3Api } from "@openc3/tool-common/src/services/openc3-api";
+
+export default function Root(props) {
+  const [anchorEl, setAnchorEl] = React.useState();
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const sendCommand = () => {
+    let api = new OpenC3Api();
+    api.cmd("INST", "COLLECT", { TYPE: "NORMAL" }).then((response) => {
+      alert("Command Sent!");
+    });
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    sendCommand();
+  };
+
+  document.title = "<%= tool_name_display %>";
+
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <Button variant="contained" onClick={sendCommand}>
+          Send Command!
+        </Button>
+      </CardContent>
+      {createPortal(
+        <div>
+          <Button
+            id="basic-button"
+            aria-controls={open ? "basic-menu" : undefined}
+            aria-haspopup="true"
+            aria-expanded={open ? "true" : undefined}
+            onClick={handleClick}
+            variant="contained"
+            disableElevation
+          >
+            File
+          </Button>
+          <Menu
+            id="basic-menu"
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+            MenuListProps={{
+              "aria-labelledby": "basic-button",
+            }}
+          >
+            <MenuItem onClick={handleClose}>Send Command</MenuItem>
+          </Menu>
+          <div
+            style={{
+              "align-items": "center",
+              "text-align": "center",
+              width: "80%",
+              display: "inline-flex",
+              position: "relative",
+              "z-index": 0,
+              padding: "4px 16px",
+            }}
+          >
+            <div
+              style={{
+                "font-size": "1.25rem",
+                "line-height": 1.5,
+                "text-overflow": "ellipsis",
+                "white-space": "nowrap",
+                width: "100%",
+              }}
+            >
+              <%= tool_name_display %>
+            </div>
+          </div>
+        </div>,
+        document.getElementById("openc3-menu")
+      )}
+    </Card>
+  );
+}

data/templates/tool_react/src/root.component.test.js

@@ -0,0 +1,9 @@
+import { render } from "@testing-library/react";
+import Root from "./root.component";
+
+describe("Root component", () => {
+  it("should be in the document", () => {
+    const { getByText } = render(<Root name="Testapp" />);
+    expect(getByText(/Testapp is mounted!/i)).toBeInTheDocument();
+  });
+});

data/templates/tool_react/webpack.config.js

@@ -0,0 +1,27 @@
+const { merge } = require("webpack-merge");
+const singleSpaDefaults = require("webpack-config-single-spa-react");
+const path = require("path");
+
+function resolve(dir) {
+  return path.join(__dirname, "..", dir);
+}
+
+module.exports = (webpackConfigEnv, argv) => {
+  const defaultConfig = singleSpaDefaults({
+    orgName: "openc3",
+    projectName: "<%= tool_name %>",
+    webpackConfigEnv,
+    argv,
+    orgPackagesAsExternal: false,
+  });
+
+  delete defaultConfig.externals;
+
+  return merge(defaultConfig, {
+    output: {
+      path: path.resolve(__dirname, "tools/<%= tool_name %>"),
+      filename: "main.js",
+      libraryTarget: "system", // This line is in all the vue.config.js files, is it needed here?
+    },
+  });
+};