feat: init workspace for vue webapp

.github/workflows/webapp.yml

@@ -0,0 +1,77 @@
+name: Webapp
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main, stable]
+    paths:
+      - .github/workflows/webapp.yml
+      - webapp/**
+
+  pull_request:
+    branches: [main, stable]
+    paths:
+      - .github/workflows/webapp.yml
+      - webapp/**
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  eslint-lint:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "yarn"
+          cache-dependency-path: "webapp/yarn.lock"
+      - name: Install packages
+        run: yarn install --frozen-lockfile
+        working-directory: webapp
+      - name: Lint
+        run: yarn lint
+        working-directory: webapp
+
+  cypress-test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "yarn"
+          cache-dependency-path: "webapp/yarn.lock"
+      - name: Install packages
+        run: yarn install --frozen-lockfile
+        working-directory: webapp
+      - name: Run tests with Cypress
+        run: yarn cypress:run
+        working-directory: webapp
+
+  test-build:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: "yarn"
+          cache-dependency-path: "webapp/yarn.lock"
+      - name: Install packages
+        run: yarn install --frozen-lockfile
+        working-directory: webapp
+      - name: Build
+        run: yarn build
+        working-directory: webapp

.pre-commit-config.yaml

@@ -33,7 +33,7 @@ repos:
     hooks:
       - id: prettier
         files: \.(md|mdx|yml|yaml|js|jsx|ts|tsx|json|css)$
-        exclude: ^legacy/public(?!/js/airtime)
+        exclude: (^legacy/public(?!/js/airtime)|^webapp/package.json)
 
   - repo: https://github.com/asottile/pyupgrade
     rev: v3.4.0
@@ -63,7 +63,7 @@ repos:
     hooks:
       - id: codespell
         args: [--ignore-words=.codespellignore]
-        exclude: (^api/schema.yml|^legacy.*|yarn\.lock)$
+        exclude: (^api/schema.yml|^legacy.*|yarn\.lock|.json$)$
 
   - repo: local
     hooks:

webapp/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

webapp/.eslintignore

@@ -0,0 +1,26 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.eslintrc.js
+src/vite-env.d.ts

webapp/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:vue/vue3-essential",
+        "plugin:@typescript-eslint/recommended",
+    ],
+    ignorePatterns: [],
+    overrides: [],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+    },
+    plugins: ["vue", "@typescript-eslint"],
+    // rules: {
+    //     quotes: ["error", "single"],
+    //     "array-bracket-spacing": ["error", "never"],
+    //     "array-bracket-newline": ["error", "never"],
+    //     "no-mixed-spaces-and-tabs": "error",
+    //     "no-trailing-spaces": "error",
+    //     indent: ["error", 2],
+    // },
+}

webapp/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

webapp/.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+public
+// src/locale
+package.json

webapp/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": false
+}

webapp/README.md

@@ -0,0 +1,44 @@
+# Libretime Vue UI Development
+
+## Project setup
+
+We use yarn for package management for this Node.js project. If you don't have yarn, install it with
+
+```
+npm i -g yarn
+```
+
+## Project commands
+
+```
+# install all packages
+yarn
+
+# start dev environment
+yarn dev
+
+# build
+yarn build
+
+# run Eslint
+yarn lint
+
+# run Prettier, writing formatting changes to files
+npx prettier -w src
+
+# run tests with Cypress
+yarn cypress:run
+```
+
+## Translation files
+
+Ultimately, Weblate will be set up to translate strings in the new UI; for now, generated `.json` files are available in `src/locale`. The `.json` translations are decoupled from Weblate, and so Weblate updates will not update this part of the repo. These are just provided for development purposes.
+
+## MPA file structure
+
+This folder is split up into multiple apps.
+
+-   Main: `index.html` endpoint, `/` in the browser
+-   About: `src/about/index.html` endpoint, `/src/about` in the browser
+
+Once built into static pages, the URL paths will be the same as the folder structure mentioned above. Both apps can use the same plugins, components, translations, etc., they just have different endpoints so we can statically build them separately.

webapp/about/App.vue

@@ -0,0 +1,11 @@
+<template>
+    <v-app>
+        <v-main>
+            <about />
+        </v-main>
+    </v-app>
+</template>
+
+<script setup lang="ts">
+import About from "../src/views/About.vue"
+</script>

webapp/about/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vuetify 3</title>
+    </head>
+
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/about/main.ts"></script>
+    </body>
+</html>

webapp/about/main.ts

@@ -0,0 +1,20 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Components
+import App from "./App.vue"
+
+// Composables
+import { createApp } from "vue"
+
+// Plugins
+import { registerPlugins } from "../src/plugins/index"
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount("#app")

webapp/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress"
+
+export default defineConfig({
+    e2e: {
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+        },
+    },
+    video: false,
+})

webapp/cypress/e2e/hello.cy.ts

@@ -0,0 +1,9 @@
+describe("template spec", () => {
+    it("passes", () => {
+        cy.visit("https://example.cypress.io")
+
+        cy.contains("type").click()
+
+        cy.url().should("include", "/commands/actions")
+    })
+})

webapp/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "hello@cypress.io",
+    "body": "Fixtures are a great way to mock data for responses to routes"
+}

webapp/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

webapp/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands"
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

webapp/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vuetify 3</title>
+    </head>
+
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>