copying demo add on files

README.md

@@ -0,0 +1,33 @@
+## Initial Setup
+
+Before running the application, you need to configure your hosts file with the add-on's hostname. You'll also need to create an SSL key pair for this domain.
+
+It's also recommended to install [Volta](https://volta.sh/) in order to use the correct versions of node.js and npm.
+
+1. Add `127.0.0.1       {hostname from .env}` (replace everything including the {})  to `/etc/hosts`
+2. `npm ci`
+3. **Make sure you have `openssl` installed on your computer for this step**. Generate ssl certificates with `npm run generate:ssl`. The domain name (aka hostname) is retrieved from `CONFIG_SERVER_HOST` in `.env`. 
+
+## Scripts
+
+Build the production app:
+`npm run build`
+
+Build the hot-reloading app:
+`npm run dev`
+
+Run unit tests: `npm run unit`
+
+Check types: `npm run typecheck`
+
+## Built With
+
+[Tailwindcss](https://tailwindcss.com/)
+[Vue 3](https://vuejs.org/)
+[Vite](https://vitejs.dev/)
+[Vitest](https://vitest.dev/)
+[TypeScript](https://www.typescriptlang.org/)
+
+## Shadow DOM
+
+To inject addon in it's own isolated container we can use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). To enable it you must set in .env `PANEL_USE_SHADOW_DOM=true`.

package.json

@@ -0,0 +1,71 @@
+{
+    "name": "demo-add-on-vite",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "unit": "vitest run",
+        "coverage": "vitest run --coverage",
+        "typecheck": "vue-tsc",
+        "preview": "vite preview",
+        "build": "vue-tsc --noEmit && vite build",
+        "build:watch": "vite build --watch --mode development",
+        "watch": "run-p build:watch preview",
+        "generate:ssl": "bash -c ./server-ssl/generate-ssl.sh",
+        "prepare": "bash -c ./scripts/prepare.sh && husky install",
+        "code-lint": "eslint --fix 'src/**/*.{ts,tsx,vue,js}'",
+        "lint-staged": "lint-staged"
+    },
+    "author": "ABOUT YOU",
+    "license": "proprietary",
+    "dependencies": {
+        "@scayle/add-on-utils": "^2.0.0",
+        "@scayle/components": "^1.0.2",
+        "@scayle/panel-icons": "^1.0.0",
+        "@scayle/single-spa-vue": "^2.6.2",
+        "@scayle/tailwind-base": "^1.0.2",
+        "@tanstack/vue-query": "^4.14.3",
+        "@vueuse/core": "^9.4.0",
+        "element-plus": "^2.2.20",
+        "vue": "^3.2.41",
+        "vue-router": "^4.1.6"
+    },
+    "devDependencies": {
+        "@types/node": "^18.11.9",
+        "@typescript-eslint/parser": "^5.42.0",
+        "@vitejs/plugin-vue": "^3.2.0",
+        "@vitest/coverage-c8": "^0.24.5",
+        "@vue/test-utils": "^2.2.1",
+        "autoprefixer": "^10.4.13",
+        "dom-storage": "^2.1.0",
+        "eslint": "^8.27.0",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-unicorn": "^45.0.0",
+        "eslint-plugin-vue": "^9.7.0",
+        "husky": "^8.0.1",
+        "jsdom": "^20.0.2",
+        "lint-staged": "^13.0.3",
+        "magic-string": "^0.26.7",
+        "nanoid": "^4.0.0",
+        "npm-run-all": "^4.1.5",
+        "postcss": "^8.4.18",
+        "postcss-dir-pseudo-class": "^6.0.5",
+        "postcss-logical": "^5.0.4",
+        "tailwindcss": "3.2.2",
+        "tailwindcss-logical": "3.0.0",
+        "typescript": "^4.8.4",
+        "unplugin-auto-import": "^0.11.4",
+        "unplugin-icons": "0.14.13",
+        "unplugin-vue-components": "^0.22.9",
+        "vite": "^3.2.2",
+        "vite-tsconfig-paths": "^3.5.2",
+        "vitest": "^0.24.5",
+        "vue-tsc": "^0.40.13"
+    },
+    "volta": {
+        "node": "18.12.1",
+        "npm": "8.19.3"
+    }
+}

postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+        'postcss-logical': {},
+        'postcss-dir-pseudo-class': { preserve: true }
+    }
+};

renovate.json5

@@ -0,0 +1,53 @@
+{
+    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+    "extends": [
+        "config:base"
+    ],
+    "enabledManagers": ["npm"],
+    "rangeStrategy": "bump",
+    "dependencyDashboard": false,
+    "timezone": "Europe/Berlin",
+    "gitLabIgnoreApprovals": true,
+    "patch": {
+        "prPriority": 30
+    },
+    "minor": {
+        "prPriority": 20
+    },
+    "major": {
+        "prPriority": 10
+    },
+    "prConcurrentLimit": 12,
+    "packageRules": [
+        // Minor/patch updates
+        {
+            "matchUpdateTypes": ["minor", "patch"],
+            "labels": ["renovate-minor"],
+            "prHourlyLimit": 1,
+            "schedule": ["every weekend"],
+            "rebaseWhen": "never",
+            "groupName": "all non-major dependencies",
+            "groupSlug": "all-minor-patch"
+        },
+        // Major updates
+        {
+            "matchUpdateTypes": ["major"],
+            "labels": ["renovate-major"],
+            "schedule": null,
+            "rebaseWhen": "never",
+            "prHourlyLimit": 2
+        },
+        // Auto-merge JS deps which won't affect the build (e.g. lint)
+        {
+            "matchPackagePrefixes": ["eslint", "@types"],
+            "matchPackageNames": ["@vue/test-utils", "vitest", "@typescript-eslint/parser"],
+            "automerge": true,
+            "platformAutomerge": true,
+            "labels": ["renovate-auto"],
+            "schedule": null,
+            "reviewers": [],
+            "rebaseWhen": "auto",
+            "prHourlyLimit": 2
+        },
+    ],
+}

scripts/prepare.sh

@@ -0,0 +1,10 @@
+#! /bin/bash
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+ROOT_DIR=$SCRIPT_DIR/../
+
+cd "$ROOT_DIR"
+
+if ! [ -f ".env" ]; then
+    cp .env.example .env
+fi

server-ssl/README.md

@@ -0,0 +1,3 @@
+The vite dev server looks in this folder for a default.crt and default.key file to use for https.
+
+**To generate ssl certificate run** `npm run generate:ssl`

server-ssl/default.conf

@@ -0,0 +1,4 @@
+[req]
+distinguished_name=req
+[SAN]
+subjectAltName=DNS:{{SERVER_HOST}}

server-ssl/generate-ssl.sh

@@ -0,0 +1,72 @@
+#! /bin/bash
+
+which openssl
+
+if [ "$?" -ne 0 ]; then
+    echo "You do not have openssl CLI command installed"
+    exit 1
+fi
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+ROOT_DIR=$SCRIPT_DIR/../
+
+cd "$SCRIPT_DIR"
+
+if [ -f "$ROOT_DIR"/.env ]; then
+    source "$ROOT_DIR"/.env
+fi
+
+if [ -z "$CONFIG_SERVER_HOST" ]; then
+    SERVER_HOST=demo-add-on.cloud-panel.aboutyou.test
+else
+    SERVER_HOST=$CONFIG_SERVER_HOST
+fi
+
+cp default.conf temp.conf
+
+case "$(uname -sr)" in
+   Darwin*)
+        sed -i '' "s/{{SERVER_HOST}}/$SERVER_HOST/g" temp.conf
+     ;;
+
+   *)
+        sed -i "s/{{SERVER_HOST}}/$SERVER_HOST/g" temp.conf
+     ;;
+esac
+
+openssl genrsa -out default.key 2048
+openssl req -new -x509 -key default.key -out default.crt -days 3650 -subj /CN=$SERVER_HOST -extensions SAN -config temp.conf
+
+echo "Generated certificate for: $SERVER_HOST"
+
+case "$(uname -sr)" in
+
+   Darwin*)
+        sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain default.crt
+     ;;
+
+   Linux*)
+        source /etc/os-release
+        if [ "$ID_LIKE" == "debian" ] || [ "$ID" == "ubuntu" ]; then
+            apt-get install -y ca-certificates
+            sudo cp default.crt /usr/local/share/ca-certificates/default.crt
+            sudo update-ca-certificates
+        elif [ "$ID" == "fedora" ]; then
+            trust anchor default.crt
+            update-ca-trust
+        else
+            echo "Your OS is not supported. You will have to trust your certificate by yourself"
+        fi
+     ;;
+
+   CYGWIN*|MINGW32*|MINGW*|MSYS*)
+        certutil -addstore -f "ROOT" new-root-certificate.crt
+     ;;
+
+   *)
+        echo "Your OS is not supported. You will have to trust your certificate by yourself"
+     ;;
+esac
+
+rm temp.conf
+

src/App.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="container mx-auto flex flex-col h-full">
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * External dependencies.
+ */
+import { defineComponent, onBeforeMount, onBeforeUnmount } from 'vue';
+import componentStyles from '@scayle/components/dist/style.css';
+
+/**
+ * Internal dependencies.
+ */
+import appStyles from './app.css';
+
+export default defineComponent({
+    name: 'App',
+
+    setup() {
+        const mountStyle = (styleSheet: { use: () => void } | string) => {
+            // the css is an object only when shadow dom is enabled
+            if (typeof styleSheet !== 'object') {
+                return;
+            }
+
+            styleSheet.use();
+        };
+        const unmountStyle = (styleSheet: { unuse: () => void } | string) => {
+            // the css is an object only when shadow dom is enabled
+            if (typeof styleSheet !== 'object') {
+                return;
+            }
+
+            styleSheet.unuse();
+        };
+        onBeforeMount(() => {
+            mountStyle(componentStyles);
+            mountStyle(appStyles);
+        });
+
+        onBeforeUnmount(() => {
+            unmountStyle(componentStyles);
+            unmountStyle(appStyles);
+        });
+    },
+});
+</script>

src/add-on.ts

@@ -0,0 +1,26 @@
+import { h, createApp } from 'vue';
+import type { App } from 'vue';
+
+import type { AddOnCustomProps } from '@scayle/add-on-utils';
+
+import singleSpaVue from '@scayle/single-spa-vue';
+
+import { initVuePlugins } from '@/vue-bootstrap';
+import RootApp from './App.vue';
+
+
+const vueLifecycles = singleSpaVue<AddOnCustomProps, App>({
+    createApp,
+    shadow: import.meta.env.PANEL_USE_SHADOW_DOM === 'true',
+    appOptions: {
+        render() {
+            return h(RootApp);
+        },
+        el: '#app',
+    },
+    handleInstance(instance, props) {
+        initVuePlugins(instance, { addonCustomProps: props });
+    },
+});
+
+export const { bootstrap, mount, unmount } = vueLifecycles;

src/app.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.single-spa-container {
+    height: 100%;
+    overflow: hidden;
+}
+
+.ay-input,
+.ay-input .ay-input__inner,
+.ay-input input {
+    width: 100%;
+}
+
+.ay-select,
+.ay-select .ay-popper__reference {
+    width: 100%;
+}
+
+/**
+    Temp fix until we use more than one selector
+    to style dashboard statistics icon
+    as it gets overriden by .icon
+ */
+.ay-dashboard-statistic .ay-dashboard-statistic__icon {
+    display: inline-flex;
+    height: 60px;
+    width: 60px;
+}

src/auto-imports.d.ts

@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+
+}