Merge pull request #1747 from OpenC3/templates

Update tool templates for COSMOS 6

openc3/templates/tool_angular/package.json

@@ -18,20 +18,20 @@
     "@angular/compiler": "^18.2.6",
     "@angular/core": "^18.2.6",
     "@angular/forms": "^18.2.6",
-    "@angular/material": "18.2.10",
+    "@angular/material": "^18.2.10",
     "@angular/platform-browser": "^18.2.6",
     "@angular/platform-browser-dynamic": "^18.2.6",
     "@angular/router": "^18.2.6",
-    "@astrouxds/astro-web-components": "7.24.0",
-    "@openc3/tool-common": "5.21.0-beta0",
+    "@astrouxds/astro-web-components": "^7.24.0",
+    "@openc3/js-common": "5.21.0-beta0",
     "rxjs": "~7.8.0",
-    "single-spa": "5.9.5",
+    "single-spa": "^5.9.5",
     "single-spa-angular": "^9.2.0",
     "tslib": "^2.7.0",
-    "zone.js": "~0.15.0"
+    "zone.js": "^0.13.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "18.0.0",
+    "@angular-builders/custom-webpack": "^18.0.0",
     "@angular-devkit/build-angular": "^18.2.6",
     "@angular/cli": "~18.2.6",
     "@angular/compiler-cli": "^18.2.6",
@@ -43,6 +43,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "style-loader": "^4.0.0",
-    "typescript": "~5.6.2"
+    "typescript": "~5.5.4"
   }
 }

openc3/templates/tool_angular/src/app/app.component.html

@@ -1,13 +1,4 @@
-<!-- This menu position hack should only be necessary in the portal -->
 <style>
-::ng-deep .mat-mdc-menu-panel.myMenu {
-  background-color:white;
-  color:black;
-  position:absolute !important;
-  top:0px;
-  left:60px;
-}
-
 .mat-mdc-card {
   background: white;
 }
@@ -20,11 +11,11 @@
   </mat-card>
 
   <ng-template cdk-portal>
-    <button mat-raised-button [matMenuTriggerFor]="menu">File</button>
-    <mat-menu #menu="matMenu" class="myMenu">
-      <button mat-menu-item (click)="clickHandler()">Send Command</button>
+    <div style="display: inline-block; width: 80%; text-align: center; font-size: 32px"><%= tool_name_display %></div>
+    <button mat-raised-button [matMenuTriggerFor]="menu" style="background-color: rgb(33, 150, 243)">File</button>
+    <mat-menu #menu="matMenu" class="myMenu" style="background-color: white">
+      <button mat-menu-item (click)="clickHandler()" style="background-color: rgb(33, 150, 243)">Send Command</button>
     </mat-menu>
-    <div style="display: inline-block; width: 80%; text-align: center"><%= tool_name_display %></div>
   </ng-template>
 </div>
 

openc3/templates/tool_angular/src/app/app.component.scss

@@ -3,24 +3,16 @@
 @include mat.core();
 
 // Define a dark theme
-$dark-theme: mat.define-dark-theme((
+$dark-theme: mat.m2-define-dark-theme((
  color: (
-   primary: mat.define-palette(mat.$blue-palette),
-   accent: mat.define-palette(mat.$blue-grey-palette),
+   primary: mat.m2-define-palette(mat.$m2-blue-palette),
+   accent: mat.m2-define-palette(mat.$m2-blue-grey-palette),
  ),
   // Only include `typography` and `density` in the default dark theme.
-  typography: mat.define-typography-config(),
+  typography: mat.m2-define-typography-config(),
   density: 0,
 ));
 
-// Define a light theme
-$light-theme: mat.define-light-theme((
- color: (
-   primary: mat.define-palette(mat.$indigo-palette),
-   accent: mat.define-palette(mat.$pink-palette),
- ),
-));
-
 // Apply the dark theme by default
 @include mat.core-theme($dark-theme);
-@include mat.button-theme($dark-theme);
+@include mat.button-theme($dark-theme);

openc3/templates/tool_angular/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
 import {CdkPortal, DomPortalOutlet} from '@angular/cdk/portal';
-import { OpenC3Api } from "@openc3/tool-common/src/services/openc3-api";
+import { OpenC3Api } from "@openc3/js-common/services";
 
 @Component({
   selector: 'openc3-tool-<%= tool_name %>-root',
@@ -23,7 +23,7 @@ export class AppComponent implements  AfterViewInit, OnDestroy {
     if (elem) {
       return elem
     } else {
-      return new HTMLElement()
+      return document.createElement('span')
     }
   }
   ngAfterViewInit(): void {
@@ -34,11 +34,12 @@ export class AppComponent implements  AfterViewInit, OnDestroy {
     document.title = "<%= tool_name_display %>";
     let tool = document.querySelector('#openc3-tool');
     if (tool == null) {
-      tool = new HTMLElement()
+      tool = document.createElement('div')
     }
     let overlay = document.querySelector('.cdk-overlay-container');
     if (overlay == null) {
-      overlay = new HTMLElement()
+      overlay = document.createElement('div')
+      overlay.classList.add('cdk-overlay-container');
     }
     // Move stuff
     tool.append(overlay);

openc3/templates/tool_angular/src/app/custom-overlay-container.ts

@@ -9,9 +9,9 @@ export class AppOverlayContainer extends OverlayContainer {
 
     let elem = document.querySelector('#openc3-tool');
     if (!elem) {
-      elem = new HTMLElement();
+      elem = document.createElement('div')
     }
     elem.appendChild(container);
     this._containerElement = container;
   }
-}
+}

openc3/templates/tool_angular/src/app/openc3-api.d.ts

@@ -1 +1 @@
-declare module '@openc3/tool-common/src/services/openc3-api';
+declare module '@openc3/js-common/services';

openc3/templates/tool_angular/src/main.single-spa.ts

@@ -30,7 +30,7 @@ const lifecycles = singleSpaAngular({
     if (elem) {
       return elem
     } else {
-      return new HTMLElement()
+      return document.createElement('div')
     }
   },
 });

openc3/templates/tool_react/package.json

@@ -16,6 +16,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^6.1.1",
+    "@openc3/js-common": "5.21.0-beta0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "single-spa-react": "^5.1.4"

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

@@ -5,7 +5,7 @@ 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";
+import { OpenC3Api } from "@openc3/js-common/services";
 
 export default function Root(props) {
   const [anchorEl, setAnchorEl] = React.useState();

openc3/templates/tool_svelte/package.json

@@ -11,13 +11,14 @@
     "smui-theme": "smui-theme compile build/smui.css -i src/theme"
   },
   "dependencies": {
-    "@astrouxds/astro-web-components": "7.24.0",
-    "@openc3/tool-common": "5.21.0-beta0",
-    "@smui/button": "^7.0.0-beta.16",
-    "@smui/card": "^7.0.0-beta.16",
-    "@smui/list": "^7.0.0-beta.16",
-    "@smui/menu": "^7.0.0-beta.16",
-    "axios": "1.7.7",
+    "@astrouxds/astro-web-components": "^7.24.0",
+    "@openc3/js-common": "5.21.0-beta0",
+    "@smui/button": "^7.0.0",
+    "@smui/common": "^7.0.0",
+    "@smui/card": "^7.0.0",
+    "@smui/list": "^7.0.0",
+    "@smui/menu": "^7.0.0",
+    "axios": "^1.7.7",
     "single-spa-svelte": "^2.1.1",
     "sirv-cli": "^2.0.2",
     "svelte-portal": "^2.2.0"
@@ -40,8 +41,9 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.1.6",
     "rollup-plugin-terser": "^7.0.2",
-    "smui-theme": "^7.0.0-beta.16",
+    "smui-theme": "^7.0.0",
     "svelte": "^4.2.19",
     "svelte-jester": "^5.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

openc3/templates/tool_svelte/rollup.config.js

@@ -31,6 +31,8 @@ export default {
     resolve({
       browser: true,
       dedupe: ["svelte"],
+      exportConditions: ['default', 'module', 'import', 'svelte'],
+      extensions: ['.mjs', '.js', '.json', '.node', '.svelte'],
     }),
     commonjs(),
     postcss({

openc3/templates/tool_svelte/src/App.svelte

@@ -27,7 +27,7 @@
   import List, { Item, Separator, Text } from '@smui/list';
   import Button, { Label } from '@smui/button';
   import Card from '@smui/card';
-  import { OpenC3Api } from "./services/openc3-api";
+  import { OpenC3Api } from '@openc3/js-common/services';
 
   let menu;
 
@@ -39,4 +39,4 @@
 	}
 
   document.title = "<%= tool_name_display %>";
-</script>
+</script>