UI decompose (#636)

Author: NiloCK

.github/workflows/build-vue.yml renamed to .github/workflows/build-platform-ui.yml

@@ -1,13 +1,15 @@
-name: build-vue
+name: build-platform-ui
 on:
   pull_request:
     paths:
-      - 'packages/vue/**'
+      - 'packages/platform-ui/**'
       - 'packages/common/**'
       - 'packages/db/**'
-      - '.github/workflows/build-vue.yml'
+      - 'packages/common-ui/**'
+      - 'packages/courses/**'
+      - '.github/workflows/build-platform-ui.yml'
 jobs:
-  build-vue-spa:
+  build-platform-ui-spa:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -29,23 +31,12 @@ jobs:
           yarn --version
           yarn install --immutable
 
-      - name: Build common package
-        working-directory: ./packages/common
-        run: yarn build
+      - name: Setup platform-ui environment
+        run: printf "${{ secrets.VUE_ENV }}" > ./packages/platform-ui/.env.production
 
-      - name: Build db package
-        working-directory: ./packages/db
+      - name: Build all packages
         run: yarn build
 
-      - name: Setup Vue environment
-        run: printf "${{ secrets.VUE_ENV }}" > ./packages/vue/.env.production
-
-      - name: Build Vue package
-        working-directory: ./packages/vue
-        run: |
-          yarn install
-          yarn build
-
-      - name: Run Vue tests
-        working-directory: ./packages/vue
+      - name: Run platform-ui tests
+        working-directory: ./packages/platform-ui
         run: yarn test:unit

.github/workflows/courses-test.yml

@@ -0,0 +1,58 @@
+# .github/workflows/courses-test.yml
+name: Courses Package Tests
+
+on:
+  push:
+    paths:
+      - 'packages/courses/**'
+      - '.github/workflows/courses-test.yml'
+  pull_request:
+    paths:
+      - 'packages/courses/**'
+      - '.github/workflows/courses-test.yml'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build @vue-skuilder/common
+        run: |
+          cd packages/common
+          yarn build
+
+      - name: Build @vue-skuilder/db
+        run: |
+          cd packages/db
+          yarn build
+
+      - name: Build @vue-skuilder/common-ui
+        run: |
+          cd packages/common-ui
+          yarn build
+
+      - name: Build @vue-skuilder/courses
+        run: |
+          cd packages/courses
+          yarn build
+
+      - name: Run tests for @vue-skuilder/courses
+        run: |
+          cd packages/courses
+          yarn test
+
+      - name: Report test results
+        if: always()
+        run: |
+          echo "Courses package tests completed with status: ${{ job.status }}"

.github/workflows/deploy-vue.yml renamed to .github/workflows/deploy-platform-ui.yml

@@ -1,13 +1,13 @@
-name: deploy-vue
+name: deploy-platform-ui
 on:
   workflow_dispatch:
     inputs:
       reason:
-        description: 'Reason for deploying Vue app'
+        description: 'Reason for deploying platform UI app'
         required: true
         default: 'Manual deployment'
 jobs:
-  deploy-vue:
+  deploy-platform-ui:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository code
@@ -33,7 +33,7 @@ jobs:
         run: yarn install
 
       - name: Set production environment
-        run: printf "${{ secrets.VITE_ENV }}" > ./packages/vue/.env.production
+        run: printf "${{ secrets.VITE_ENV }}" > ./packages/platform-ui/.env.production
 
       - name: Build
         run: yarn build
@@ -43,7 +43,7 @@ jobs:
           BUILD_INFO="Build created on $(date) from commit ${{ github.sha }}\n"
           BUILD_INFO+="Triggered by ${{ github.actor }} via ${{ github.event_name }}\n"
           BUILD_INFO+="Reason: ${{ github.event.inputs.reason }}\n"
-          echo -e "$BUILD_INFO" > ./packages/vue/dist/buildinfo.md
+          echo -e "$BUILD_INFO" > ./packages/platform-ui/dist/buildinfo.md
 
       - name: Deploy to server
         run: |
@@ -52,7 +52,7 @@ jobs:
           echo "Creating directory version $newversion..."
           ssh ${{ secrets.DO_USERNAME }}@eduquilt.com mkdir -p /home/skuilder/dist/vue/$newversion
           echo "Syncing files to server..."
-          rsync -rl --delete ./packages/vue/dist/ ${{ secrets.DO_USERNAME }}@eduquilt.com:/home/skuilder/dist/vue/$newversion
+          rsync -rl --delete ./packages/platform-ui/dist/ ${{ secrets.DO_USERNAME }}@eduquilt.com:/home/skuilder/dist/vue/$newversion
           echo "Setting symlink to new version..."
           ssh ${{ secrets.DO_USERNAME }}@eduquilt.com ln -sfn /home/skuilder/dist/vue/$newversion /home/skuilder/www
           echo "Deployment complete to version $newversion"

.gitignore

@@ -32,7 +32,7 @@ yarn-error.log*
 vue/Caddyfile
 
 # Cyrpress build artifacts
-/packages/vue/cypress
+/packages/platform-ui/cypress
 
 # yarn 2+ files
 .yarn/*

.prompt

@@ -14,6 +14,13 @@ developed slowly as an occasional hobby / side project, and used 'in production'
 
 Much of the legacy code was written without explicit concerns for performance, security, or scale.
 
+# Current Setup:
+
+- "packageManager": "yarn@4.6.0", with yarn workspaces
+- frontend: vue 3, vuetify 3, vite, vue router 4, pinia, pouchdb
+- backend: (thin) express
+- database: couchdb
+
 # Current goals:
 
 Seeking to use the project as a vehicle to develop content for commercial, production grade systems. Seeking to iterate quickly to modernize the stack and add key features.

package.json

@@ -1,8 +1,8 @@
 {
     "name": "vue-skuilder",
     "scripts": {
-        "dev": "yarn workspace @vue-skuilder/common build && yarn workspace @vue-skuilder/db build && node scripts/dev-couchdb.js start && concurrently \"yarn dev:vue\" \"yarn dev:express\"",
-        "dev:vue": "yarn workspace @vue-skuilder/vue dev",
+        "dev": "yarn workspace @vue-skuilder/common build && yarn workspace @vue-skuilder/db build && yarn workspace @vue-skuilder/common-ui build && yarn workspace @vue-skuilder/courses build && node scripts/dev-couchdb.js start && concurrently \"yarn dev:platform-ui\" \"yarn dev:express\"",
+        "dev:platform-ui": "yarn workspace @vue-skuilder/platform-ui dev",
         "dev:express": "yarn workspace @vue-skuilder/express dev",
         "dev:couchdb": "node scripts/dev-couchdb.js start",
         "couchdb:start": "node scripts/dev-couchdb.js start",
@@ -13,7 +13,11 @@
         "test:e2e": "cypress open",
         "test:e2e:headless": "cypress run",
         "ci:e2e": "yarn dev & wait-on http://localhost:5173 && cypress run; kill $(lsof -t -i:8080); yarn couchdb:stop",
-        "build": "yarn workspace @vue-skuilder/common build && yarn workspace @vue-skuilder/db build && yarn workspace @vue-skuilder/vue build && yarn workspace @vue-skuilder/express build"
+        "build": "yarn workspace @vue-skuilder/common build && yarn workspace @vue-skuilder/db build && yarn workspace @vue-skuilder/common-ui build && yarn workspace @vue-skuilder/courses build && yarn workspace @vue-skuilder/platform-ui build && yarn workspace @vue-skuilder/express build",
+        "clean": "yarn clean:dist && yarn clean:node_modules",
+        "clean:dist": "find packages -name 'dist' -type d -exec rm -rf {} +",
+        "clean:node_modules": "find . -name 'node_modules' -type d -exec rm -rf {} +",
+        "clean:all": "yarn clean && rm -rf .pnp.* .yarn/cache .yarn/install-state.gz"
     },
     "private": true,
     "workspaces": [

packages/client/package.json

@@ -43,6 +43,6 @@
     "rollup": "^4.12.1",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.2"
+    "typescript": "~5.7.2"
   }
 }

packages/common-ui/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@vue-skuilder/common-ui",
+  "version": "0.1.0",
+  "main": "./dist/common-ui.umd.js",
+  "module": "./dist/common-ui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/common-ui.es.js",
+      "require": "./dist/common-ui.umd.js"
+    },
+    "./style": "./dist/assets/index.css",
+    "./styles": "./dist/assets/index.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && yarn build-types",
+    "build-types": "tsc --project tsconfig.types.json",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint .",
+    "test:unit": "vitest run"
+  },
+  "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.2",
+    "@mdi/font": "^7.3.67",
+    "@vue-skuilder/common": "workspace:*",
+    "@vue-skuilder/db": "workspace:*",
+    "highlight.js": "^11.0.1",
+    "marked": "^15.0.6",
+    "moment": "^2.29.4",
+    "mousetrap": "^1.6.5",
+    "pinia": "^2.3.0",
+    "vue": "^3.5.13",
+    "vuetify": "^3.7.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^14.4.0",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
+    "eslint-plugin-vue": "^9.32.0",
+    "sass": "^1.83.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.9",
+    "vitest": "^3.0.5"
+  }
+}

packages/common-ui/src/components/HeatMap.types.ts

@@ -0,0 +1,15 @@
+export interface DayData {
+  date: string;
+  count: number;
+}
+
+export interface Color {
+  h: number;
+  s: number;
+  l: number;
+}
+
+export interface ActivityRecord {
+  timeStamp: number | string;
+  [key: string]: any;
+}