Add frontend

app/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

app/.gitignore

@@ -0,0 +1,26 @@
+dist/
+!www/favicon.ico
+www/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env

app/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

app/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "magmise",
+  "private": true,
+  "version": "0.0.1",
+  "description": "Stencil App Starter",
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil-community/router": "^1.0.2",
+    "@stencil/core": "2.13.0",
+    "@types/jest": "^27.0.3",
+    "jest": "^27.4.5",
+    "jest-cli": "^27.4.5",
+    "puppeteer": "^10.0.0"
+  },
+  "license": "MIT"
+}

app/readme.md

@@ -0,0 +1,41 @@
+# Stencil App Starter
+
+Stencil is a compiler for building fast web apps using Web Components.
+
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.
+
+Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).
+
+## Getting Started
+
+To start a new project using Stencil, clone this repo to a new directory:
+
+```bash
+npm init stencil app
+```
+
+and run:
+
+```bash
+npm start
+```
+
+To build the app for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests once, run:
+
+```
+npm test
+```
+
+To run the unit tests and watch for file changes during development, run:
+
+```
+npm run test.watch
+```

app/src/components.d.ts

@@ -0,0 +1,50 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface AppRoot {
+    }
+    interface WebConsole {
+    }
+}
+declare global {
+    interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {
+    }
+    var HTMLAppRootElement: {
+        prototype: HTMLAppRootElement;
+        new (): HTMLAppRootElement;
+    };
+    interface HTMLWebConsoleElement extends Components.WebConsole, HTMLStencilElement {
+    }
+    var HTMLWebConsoleElement: {
+        prototype: HTMLWebConsoleElement;
+        new (): HTMLWebConsoleElement;
+    };
+    interface HTMLElementTagNameMap {
+        "app-root": HTMLAppRootElement;
+        "web-console": HTMLWebConsoleElement;
+    }
+}
+declare namespace LocalJSX {
+    interface AppRoot {
+    }
+    interface WebConsole {
+    }
+    interface IntrinsicElements {
+        "app-root": AppRoot;
+        "web-console": WebConsole;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
+            "web-console": LocalJSX.WebConsole & JSXBase.HTMLAttributes<HTMLWebConsoleElement>;
+        }
+    }
+}

app/src/components/app-root/app-root.css

@@ -0,0 +1,15 @@
+header {
+  background: #5851ff;
+  color: white;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+
+h1 {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: #fff;
+  padding: 0 12px;
+}

app/src/components/app-root/app-root.e2e.ts

@@ -0,0 +1,17 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-root', () => {
+  it('renders', async () => {
+    const page = await newE2EPage({ url: '/' });
+
+    const element = await page.find('app-root');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('renders the title', async () => {
+    const page = await newE2EPage({ url: '/' });
+
+    const element = await page.find('app-root >>> h1');
+    expect(element.textContent).toEqual('Stencil App Starter');
+  });
+});

app/src/components/app-root/app-root.tsx

@@ -0,0 +1,26 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'app-root',
+  styleUrl: 'app-root.css',
+  shadow: true,
+})
+export class AppRoot {
+  render() {
+    return (
+      <div>
+        <header>
+          <h1>Stencil App Starter</h1>
+        </header>
+
+        <main>
+          <stencil-router>
+            <stencil-route-switch scrollTopOffset={0}>
+              <stencil-route url="/" component="web-component" exact={true} />
+            </stencil-route-switch>
+          </stencil-router>
+        </main>
+      </div>
+    );
+  }
+}

app/src/components/web-console/test/web-console.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('web-console', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<web-console></web-console>');
+
+    const element = await page.find('web-console');
+    expect(element).toHaveClass('hydrated');
+  });
+});

app/src/components/web-console/test/web-console.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { WebConsole } from '../web-console';
+
+describe('web-console', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [WebConsole],
+      html: `<web-console></web-console>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <web-console>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </web-console>
+    `);
+  });
+});

app/src/components/web-console/web-console.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

app/src/components/web-console/web-console.tsx

@@ -0,0 +1,18 @@
+import { Component, Host, h } from '@stencil/core';
+
+@Component({
+  tag: 'web-console',
+  styleUrl: 'web-console.css',
+  shadow: true,
+})
+export class WebConsole {
+
+  render() {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    );
+  }
+
+}

app/src/global/app.css

@@ -0,0 +1,15 @@
+/*
+  Global App CSS
+  ----------------------
+  Use this file for styles that should be applied to all components.
+  For example, "font-family" within the "body" selector is a CSS property
+  most apps will want applied to all components.
+
+  Any global CSS variables should also be applied here.
+*/
+
+body {
+  margin: 0px;
+  padding: 0px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}

app/src/global/app.ts

@@ -0,0 +1,7 @@
+export default async () => {
+  /**
+   * The code to be executed should be placed within a default function that is
+   * exported by the global script. Ensure all of the code in the global script
+   * is wrapped in the function() that is exported.
+   */
+};

app/src/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Stencil Starter App</title>
+  <meta name="Description" content="Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil!">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
+  <meta name="theme-color" content="#16161d">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta http-equiv="x-ua-compatible" content="IE=Edge">
+
+  <script type="module" src="/build/app.esm.js"></script>
+  <script nomodule src="/build/app.js"></script>
+  <link href="/build/app.css" rel="stylesheet">
+
+  <link rel="apple-touch-icon" href="/assets/icon/icon.png">
+  <link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
+  <link rel="manifest" href="/manifest.json">
+</head>
+<body>
+
+  <app-root></app-root>
+
+</body>
+</html>

app/src/index.ts

@@ -0,0 +1,2 @@
+export { Components, JSX } from './components';
+import '@stencil-community/router';

app/src/manifest.json

@@ -0,0 +1,13 @@
+{
+  "name": "Stencil Starter",
+  "short_name": "Stencil",
+  "start_url": "/",
+  "display": "standalone",
+  "icons": [{
+    "src": "assets/icon/icon.png",
+    "sizes": "512x512",
+    "type": "image/png"
+  }],
+  "background_color": "#16161d",
+  "theme_color": "#16161d"
+}

app/stencil.config.ts

@@ -0,0 +1,17 @@
+import { Config } from '@stencil/core';
+
+// https://stenciljs.com/docs/config
+
+export const config: Config = {
+  globalStyle: 'src/global/app.css',
+  globalScript: 'src/global/app.ts',
+  taskQueue: 'async',
+  outputTargets: [
+    {
+      type: 'www',
+      // comment the following line to disable service workers in production
+      serviceWorker: null,
+      baseUrl: 'https://myapp.local/',
+    },
+  ],
+};

app/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "target": "es2017",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "jsx": "react",
+    "jsxFactory": "h"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}