Add basic web UI

Note: this is based on CMSaasStarter project, which is available as MIT here https://github.com/CriticalMoments/CMSaasStarter. However, this copy is NOT being released open source/MIT.

The CM logo is owned by Chesterfield Labs, and it's inclusion here isn't giving away any rights.

.github/workflows/web_format_lint_build.yml

@@ -0,0 +1,33 @@
+name: Format Check
+
+on: [push, pull_request]
+
+jobs:
+  webui_checks:
+    name: Code Format, Lint, Typecheck, Test, and Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
+
+      - name: Move to web_ui folder
+        run: cd studio/web_ui
+
+      - name: NPM install
+        run: npm install
+
+      - name: Check Code Format
+        run: npm run format_check
+
+      - name: Linting
+        run: npm run lint
+
+      - name: Typechecking
+        run: npm run check
+
+      - name: Tests
+        run: npm run test_run
+
+      - name: SvelteKit Build
+        run: npm run build

.vscode/settings.json

@@ -1,6 +1,11 @@
 {
+  "editor.formatOnSave": true,
   "[python]": {
-    "editor.formatOnSave": true,
     "editor.defaultFormatter": "charliermarsh.ruff"
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "svelte"],
+  // Svelte, JS, TS files
+  "[javascript, typescript, svelte, json]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode",
   }
 }

studio/web_ui/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

studio/web_ui/.eslintrc.cjs

@@ -0,0 +1,41 @@
+module.exports = {
+  root: true,
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:svelte/recommended",
+    "prettier",
+  ],
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2020,
+    extraFileExtensions: [".svelte"],
+  },
+  overrides: [
+    {
+      files: ["*.svelte"],
+      parser: "svelte-eslint-parser",
+      parserOptions: {
+        parser: {
+          // Specify a parser for each lang.
+          ts: "@typescript-eslint/parser",
+          js: "espree",
+          typescript: "@typescript-eslint/parser",
+        },
+      },
+    },
+  ],
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+  rules: {
+    "no-undef": "off",
+    // no-undef has been turned off because of this:
+    // basically, it causes issues and TS does those checks so it's redundant
+    // https://typescript-eslint.io/linting/troubleshooting#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+  },
+}

studio/web_ui/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

studio/web_ui/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

studio/web_ui/.prettierignore

@@ -0,0 +1,6 @@
+**/.svelte-kit/
+**/node_modules/
+**/package-lock.json
+
+# Don't format plaintext email templates, the new lines are important
+src/lib/emails/*_text.svelte

studio/web_ui/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": false,
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}