feat: Nuxt 3 & Vue 3 (#296)

.devcontainer/Dockerfile

@@ -1,7 +1,7 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.148.0/containers/javascript-node/.devcontainer/base.Dockerfile
 
 # [Choice] Node.js version: 14, 12, 10
-ARG VARIANT="14-buster"
+ARG VARIANT="18-buster"
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.

.devcontainer/devcontainer.json

@@ -14,7 +14,8 @@
     "gruntfuggly.todo-tree",
     "eamodio.gitlens",
     "Vue.vscode-typescript-vue-plugin",
-    "Vue.volar"
+    "Vue.volar",
+    "csstools.postcss"
   ],
   "initializeCommand": "cp -n .devcontainer/.env.example .devcontainer/.env && docker-compose -f .devcontainer/docker-compose.yml pull uobtheatre-api",
   // Use 'forwardPorts' to make a list of ports inside the container available locally.

.env.example

@@ -3,4 +3,4 @@ SQUARE_APP_ID=
 SQUARE_LOC_ID=
 
 # API Base URL
-# API_BASE=
+# API_BASE=http://localhost:8000

.eslintignore

@@ -1,3 +1,2 @@
-graphql/codegen/operations.ts
-.nuxt
-static/sw.js
+graphql/codegen
+tests/unit/test.spec.example.js

.eslintrc.js

@@ -1,42 +1,17 @@
 module.exports = {
   root: true,
-  env: {
-    node: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser'
   },
-  ignorePatterns: ['tests/unit/test.spec.example.js'],
-  plugins: ['prettier', '@typescript-eslint'],
+  plugins: ['unused-imports', 'prettier'],
   extends: [
-    '@nuxtjs',
-    '@nuxtjs/eslint-config-typescript',
-    'prettier',
-    'plugin:prettier/recommended',
+    'plugin:vue/vue3-recommended',
     'plugin:nuxt/recommended',
+    'prettier'
   ],
   rules: {
-    'import/no-named-as-default': 'off',
-    'prettier/prettier': ['error', { singleQuote: true }],
-  },
-  settings: {
-    'import/resolved': {
-      node: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx'],
-      },
-    },
-  },
-  overrides: [
-    {
-      files: ['*.test.js', '*.spec.js'],
-      rules: {
-        'no-unused-expressions': 'off',
-      },
-    },
-    {
-      files: ['*.graphql'],
-      parser: '@graphql-eslint/eslint-plugin',
-      plugins: ['@graphql-eslint'],
-      rules: {
-        '@graphql-eslint/known-type-names': 'error',
-      },
-    },
-  ],
+    'unused-imports/no-unused-imports': 'error',
+    'vue/multi-word-component-names': 0
+  }
 };

.github/workflows/ci.yml

@@ -17,14 +17,14 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [14]
+        node: [18]
 
     steps:
       - name: Checkout 🛎
         uses: actions/checkout@master
 
       - name: Setup node env 🏗
-        uses: actions/setup-node@v2.3.0
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ matrix.node }}
           check-latest: true
@@ -34,7 +34,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Cache node_modules 📦
-        uses: actions/cache@v2.1.6
+        uses: actions/cache@v3.2.3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -45,8 +45,11 @@ jobs:
       - name: Install dependencies 👨🏻‍💻
         run: yarn
 
+      - name: Load GraphQL Codegen 🕸
+        run: GQL_SCHEMA=https://raw.githubusercontent.com/BristolSTA/uobtheatre-api/dev/schema.graphql yarn codegen
+
       - name: Run linter 👀
-        run: yarn lint
+        run: yarn lint:tsc && yarn lint:js
 
       - name: Load GraphQL 🕸
         run: API_BASE=https://staging.api.uobtheatre.com yarn codegen
@@ -59,16 +62,16 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [18.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@master
 
       - name: Copy Testing Env ✉
         run: cp .env.test .env
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2.3.0
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -77,7 +80,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Cache node_modules 📦
-        uses: actions/cache@v2.1.6
+        uses: actions/cache@v3.2.3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -89,7 +92,7 @@ jobs:
         name: Install Yarn Dependencies 👨🏻‍💻
 
       - name: Authenticate with GitHub Container Registry 🔒
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2.1.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -108,8 +111,8 @@ jobs:
         run: API_BASE=http://localhost:9000 yarn codegen
 
       - name: Run End-to-End Tests 🧪
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v5
+        timeout-minutes: 5
         with:
           start: yarn pretest:e2e:ci
           wait-on: 'http://localhost:3000'
-          headless: true

.gitignore

@@ -1,100 +1,28 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Cypress files
-tests/e2e/videos
-tests/e2e/screenshots
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
+# Yarn Stuff
+node_modules
 .cache
 
-# next.js build output
-.next
+# Docker Stuff
+.docker
 
-# nuxt.js build output
+# Nuxt Stuff
 .nuxt
-
-# Nuxt generate
+.nitro
+.output
+.env
 dist
 
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
-
-# Service worker
-sw.*
+# Vitest Generated Files
+coverage
 
-# macOS
-.DS_Store
+# Eslint
+.eslintcache
 
-# Vim swap files
-*.swp
+# General log files
+*.log*
 
-# Docker stuff
-.docker
+# Codegen Generated Files
+graphql/codegen/operations.ts
 
-# GQL Codegen
-graphql/codegen
+# Cypress files
+cypress

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "semi": true,
+    "trailingComma": "none",
+    "singleQuote": true,
+    "printWidth": 80
+}

.vscode/settings.json

@@ -9,14 +9,5 @@
   "path-intellisense.mappings": {
     "@": "${workspaceRoot}"
   },
-  "vetur.grammar.customBlocks": {
-    "router": "js"
-  },
-  "vetur.validation.template": false,
-  "vetur.validation.script": false,
-  "vetur.validation.style": false,
-  "vetur.format.enable": false,
-  "[javascript]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features"
-  }
+  "eslint.format.enable": true
 }

README.md

@@ -20,9 +20,8 @@ You can run `yarn lint [--fix]` to lint and fix files.
 > By default, you won't be able to test out payments via Square until you add the **sandbox** Square access token to the env file at `.devcontainer/.env` and rebuild the docker container (F1 > Rebuild Container). You will need to get these details from the webmaster.
 
 ## Hints and Tips
-* If you use the supplied Dev Containers, the API is automatically put up with the dev container on port 9000. In this way, you can access the [GraphQLi interface](localhost:9000/graphql/) and the [Django admin panel](localhost:9000/admin/). This project is setup to automatically expect the API to be running at `localhost:9000`. If it is not (or you want to use a different instance), add `API_BASE={API_URL}` into your `.env` file.
-
 
+- If you use the supplied Dev Containers, the API is automatically put up with the dev container on port 9000. In this way, you can access the [GraphQLi interface](localhost:9000/graphql/) and the [Django admin panel](localhost:9000/admin/). This project is setup to automatically expect the API to be running at `localhost:9000`. If it is not (or you want to use a different instance), add `API_BASE={API_URL}` into your `.env` file.
 
 ## Compiling and Deploying 🔨
 

app.config.ts

@@ -0,0 +1,4 @@
+export default defineAppConfig({
+  name: 'UOB Theatre',
+  supportEmail: 'support@uobtheatre.com'
+});

app.vue

@@ -0,0 +1,15 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<script setup>
+// Global title
+useHead({
+  titleTemplate: (titleChunk) =>
+    titleChunk
+      ? `${titleChunk} - UOB Theatre`
+      : 'UOB Theatre | The Home Of Bristol Student Theatre'
+});
+</script>

assets/styles/_datepicker.scss

@@ -0,0 +1,2 @@
+$dp__input_padding: 8px 12px;
+@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';

assets/styles/app.scss

@@ -1,6 +1,7 @@
-@import './tiptap';
+@import './_tiptap';
 @import './_swal';
 @import './_table';
+@import './_datepicker';
 @import './_misc';
 @import '@fortawesome/fontawesome-svg-core/styles.css';