feat(marketplace): add separate package and move some entities in it (#1283)

* feat(marketplace): add separate package and move some entities in it

* feat(marketplace): refactor release notes and list

* feat(marketplace): refactor showing a package

* chore: fix install progress

* chore: fix angular.json

* chore: properly share stream

frontend/projects/shared/ng-package.json

@@ -1,6 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/shared",
+  "assets": ["styles"],
   "lib": {
     "entryFile": "src/public-api.ts"
   }

frontend/projects/shared/package.json

@@ -4,6 +4,7 @@
   "peerDependencies": {
     "@angular/common": "^13.2.0",
     "@angular/core": "^13.2.0",
+    "@ionic/angular": "^6.0.3",
     "@start9labs/emver": "^0.1.5"
   },
   "dependencies": {

frontend/projects/shared/src/directives/element/element.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, ElementRef, Inject } from '@angular/core'
+
+@Directive({
+  selector: '[elementRef]',
+  exportAs: 'elementRef',
+})
+export class ElementDirective<T extends Element> extends ElementRef<T> {
+  constructor(@Inject(ElementRef) { nativeElement }: ElementRef<T>) {
+    super(nativeElement)
+  }
+}

frontend/projects/shared/src/directives/element/element.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core'
+
+import { ElementDirective } from './element.directive'
+
+@NgModule({
+  declarations: [ElementDirective],
+  exports: [ElementDirective],
+})
+export class ElementModule {}

frontend/projects/shared/src/public-api.ts

@@ -5,6 +5,9 @@
 export * from './components/text-spinner/text-spinner.component.module'
 export * from './components/text-spinner/text-spinner.component'
 
+export * from './directives/element/element.directive'
+export * from './directives/element/element.module'
+
 export * from './pipes/emver/emver.module'
 export * from './pipes/emver/emver.pipe'
 export * from './pipes/markdown/markdown.module'
@@ -17,11 +20,13 @@ export * from './pipes/unit-conversion/unit-conversion.pipe'
 
 export * from './services/destroy.service'
 export * from './services/emver.service'
+export * from './services/error-toast.service'
 
 export * from './types/dependent-info'
 export * from './types/install-progress'
 export * from './types/package-state'
 export * from './types/progress-data'
+export * from './types/url'
 export * from './types/workspace-config'
 
 export * from './util/misc.util'

frontend/projects/shared/src/services/error-toast.service.ts

@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core'
+import { IonicSafeString, ToastController } from '@ionic/angular'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ErrorToastService {
+  private toast: HTMLIonToastElement
+
+  constructor(private readonly toastCtrl: ToastController) {}
+
+  async present(e: { message: string }, link?: string): Promise<void> {
+    console.error(e)
+
+    if (this.toast) return
+
+    this.toast = await this.toastCtrl.create({
+      header: 'Error',
+      message: getErrorMessage(e, link),
+      duration: 0,
+      position: 'top',
+      cssClass: 'error-toast',
+      buttons: [
+        {
+          side: 'end',
+          icon: 'close',
+          handler: () => {
+            this.dismiss()
+          },
+        },
+      ],
+    })
+    await this.toast.present()
+  }
+
+  async dismiss(): Promise<void> {
+    if (this.toast) {
+      await this.toast.dismiss()
+      this.toast = undefined
+    }
+  }
+}
+
+export function getErrorMessage(
+  { message }: { message: string },
+  link?: string,
+): string | IonicSafeString {
+  if (!message) {
+    message = 'Unknown Error.'
+    link = 'https://start9.com/latest/support/FAQ'
+  }
+
+  if (link) {
+    return new IonicSafeString(
+      `${message}<br /><br /><a href=${link} target="_blank" rel="noreferrer" style="color: white;">Get Help</a>`,
+    )
+  }
+
+  return message
+}

frontend/projects/shared/src/types/url.ts

@@ -0,0 +1 @@
+export type Url = string

frontend/projects/shared/src/util/misc.util.ts

@@ -56,8 +56,7 @@ export function isObject(val: any): boolean {
 }
 
 export function isEmptyObject(obj: object): boolean {
-  if (obj === undefined) return true
-  return !Object.keys(obj).length
+  return obj === undefined || !Object.keys(obj).length
 }
 
 export function pauseFor(ms: number): Promise<void> {

frontend/projects/shared/styles/global.scss

@@ -0,0 +1,26 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import "~@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "~@ionic/angular/css/normalize.css";
+@import "~@ionic/angular/css/structure.css";
+@import "~@ionic/angular/css/typography.css";
+@import '~@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import "~@ionic/angular/css/padding.css";
+@import "~@ionic/angular/css/float-elements.css";
+@import "~@ionic/angular/css/text-alignment.css";
+@import "~@ionic/angular/css/text-transformation.css";
+@import "~@ionic/angular/css/flex-utils.css";

frontend/projects/shared/styles/shared.scss

@@ -0,0 +1,85 @@
+ion-input {
+  caret-color: gray;
+}
+
+ion-modal::part(content) {
+  position: absolute;
+  height: 90% !important;
+  top: 5%;
+  width: 90% !important;
+  left: 5%;
+  display: block;
+
+  border-radius: 6px;
+  border: 2px solid rgba(255, 255, 255, 0.03);
+  box-shadow: 0 0 70px 70px black;
+}
+
+@media (min-width: 1000px) {
+  ion-modal::part(content) {
+    position: absolute;
+    height: 80% !important;
+    top: 10%;
+    width: 50% !important;
+    left: 25%;
+  }
+}
+
+.alertlike-modal {
+  &::part(content) {
+    max-height: 380px !important;
+    top: 25% !important;
+    width: 90% !important;
+    left: 5% !important;
+    --box-shadow: none !important;
+  }
+}
+
+@media (min-width: 1000px) {
+  .alertlike-modal {
+    &::part(content) {
+      width: 60% !important;
+      left: 20% !important;
+    }
+  }
+}
+
+.item-interactive {
+  --highlight-background: var(--ion-color-light) !important;
+}
+
+.hidden-scrollbar {
+  overflow: auto;
+  white-space: nowrap;
+  height: 60px;
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.divider {
+  background: linear-gradient(
+    90deg,
+    var(--ion-color-light) 0,
+    var(--ion-color-dark) 50%,
+    var(--ion-color-light) 100%
+  );
+  height: 1px;
+}
+
+.loading-dots:after {
+  content: '...';
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  animation: ellipsis-dot 1s infinite 0.3s;
+  animation-fill-mode: forwards;
+  width: 1em;
+}

frontend/projects/shared/styles/variables.scss

@@ -0,0 +1,88 @@
+// Ionic Variables and Theming. For more info, please see:
+// http://ionicframework.com/docs/theming/
+
+/** Ionic CSS Variables **/
+:root {
+  --ion-color-primary: #0075e1;
+  --ion-color-primary-rgb: 66,140,255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255,255,255;
+  --ion-color-primary-shade: #3a7be0;
+  --ion-color-primary-tint: #5598ff;
+
+  --ion-color-secondary: #50c8ff;
+  --ion-color-secondary-rgb: 80,200,255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255,255,255;
+  --ion-color-secondary-shade: #46b0e0;
+  --ion-color-secondary-tint: #62ceff;
+
+  --ion-color-tertiary: #6a64ff;
+  --ion-color-tertiary-rgb: 106,100,255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255,255,255;
+  --ion-color-tertiary-shade: #5d58e0;
+  --ion-color-tertiary-tint: #7974ff;
+
+  --ion-color-success: #2fdf75;
+  --ion-color-success-rgb: 47,223,117;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0,0,0;
+  --ion-color-success-shade: #29c467;
+  --ion-color-success-tint: #44e283;
+
+  --ion-color-warning: #ffd534;
+  --ion-color-warning-rgb: 255,213,52;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0,0,0;
+  --ion-color-warning-shade: #e0bb2e;
+  --ion-color-warning-tint: #ffd948;
+
+  --ion-color-danger: #ff4961;
+  --ion-color-danger-rgb: 255,73,97;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255,255,255;
+  --ion-color-danger-shade: #e04055;
+  --ion-color-danger-tint: #ff5b71;
+
+  --ion-color-light: #181818;
+  --ion-color-light-rgb: 24,24,24;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 0,0,0;
+  --ion-color-light-shade: #000000;
+  --ion-color-light-tint: #000000;
+
+  --ion-color-medium: #222428;
+  --ion-color-medium-rgb: 34,36,40;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255,255,255;
+  --ion-color-medium-shade: #1e2023;
+  --ion-color-medium-tint: #383a3e;
+
+  --ion-color-dark: #e0e0e0;
+  --ion-color-dark-rgb: 224,224,224;
+  --ion-color-dark-contrast: #000000;
+  --ion-color-dark-contrast-rgb: 0,0,0;
+  --ion-color-dark-shade: #bfbfbf;
+  --ion-color-dark-tint: #d8d8d8;
+
+  --ion-color-step-50: #1e1e1e;
+  --ion-color-step-100: #2a2a2a;
+  --ion-color-step-150: #363636;
+  --ion-color-step-200: #414141;
+  --ion-color-step-250: #4d4d4d;
+  --ion-color-step-300: #595959;
+  --ion-color-step-350: #656565;
+  --ion-color-step-400: #717171;
+  --ion-color-step-450: #7d7d7d;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #949494;
+  --ion-color-step-600: #a0a0a0;
+  --ion-color-step-650: #acacac;
+  --ion-color-step-700: #b8b8b8;
+  --ion-color-step-750: #c4c4c4;
+  --ion-color-step-800: #d0d0d0;
+  --ion-color-step-850: #dbdbdb;
+  --ion-color-step-900: #e7e7e7;
+  --ion-color-step-950: #f3f3f3;
+}