Migrate to Nuxt 3 (#1009)

* On the way to working prototype

* A few more fixes

* Fix graphql server

* Put server again at /api

* Convert tailwind-vue config to variantjs

* Fix config

* Fix all lint errors

* Fix eslint

* Fix typescript errors

* Upgrade vue-jest

* Fix imports

* Fix tests

* Fix config of redis

* Move favicon to public folder

* Pinia is now compatible with esm

* Use layout with named slots

* Add t-nuxtlink

* Remove apollo client from transpile

* Remove vue-tailwind from transpile (no longer used)

* Remove more transpile and externals

* Use auto-imports

* More auto-imports

* Cleanup config

* Towards prototype storybook

* Working prototype

* Cleanup

* Cleanup deps

* Fix build

* Fix variantjs config

* Disable ssr for now

* Try to fix storybook

* Try to fix HMR

* Enough to forward 24xxx port?

* Use new vue3 way to wrap components

* Fix sidebar

* Remove virtual scoller for now

* Make storybook prototype work

* Add typescript info to story

* Fix typescript for story

* Fix typescript error in iframe

* Update patches to match new versions

* Clarify that port for hmr is not working

* Update to nuxt rc3

* Remove nuxt types package

* Fix issues related to tailwindcss module

* Completely remove nuxt/types

* Try to fix storybook ci

* Fix tests

* Build storybook seperatly

* Try to fix storybook

* Alias

* Add event handler

* Put graphql server again at /api

* Add note about takeover mode

* Fix storybook imports

* Simple data table as start

* Fix ts

* Add storybook style

* Remove unused storybook iframe

* Update lock file

* Add padding to input

* Try to add alias

* Fix ttable import

* Add storybook stories for all components

* Fix table import

* Fix more controls

* Add t-table synonym

* Add styleing to table

* Fix style

* Cleanup nuxt config

* Add remark in storybook modue that this is unfinished work

* Fix style

.github/workflows/ci.yml

@@ -87,13 +87,20 @@ jobs:
       - name: Run tests
         run: yarn test --ci --coverage
 
+      - name: Build Storybook
+        run: |
+          yarn nuxi generate
+          yarn storybook:build
+          cp .output/public/_storybook/external-iframe/index.html storybook-static/iframe.html
+          cp -r .output/public/_nuxt storybook-static
+
       - name: Publish and test Storybook
         uses: chromaui/action@v1
         with:
           projectToken: 'b3787adf2fa5'
-          buildScriptName: storybook:build
           # Don't wait until Chroma verified the build (for this we have the Github check)
           exitOnceUploaded: true
+          storybookBuildDir: storybook-static
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3.1.0

.gitignore

@@ -143,7 +143,7 @@ storybook-static/
 # End of https://www.toptal.com/developers/gitignore/api/vscode,nuxtjs,node
 
 # Automatically generated files
-api/graphql.ts
+server/graphql.ts
 apollo/gql.ts
 apollo/graphql.ts
 apollo/index.ts

.gitpod.yml

@@ -35,17 +35,19 @@ tasks:
       DATABASE_URL: postgresql://gitpod@localhost/jabrefonline
 
 vscode:
+  # Add handy VS Code extensions: https://www.gitpod.io/docs/ides-and-editors/vscode-extensions
   extensions:
+    - johnsoncodehk.volar
     - dbaeumer.vscode-eslint
-    - github.copilot
-    - streetsidesoftware.code-spell-checker
-    - github.vscode-pull-request-github
+    - gitHub.copilot
     - eamodio.gitlens
-    - graphql.vscode-graphql
+    - graphQL.vscode-graphql
     - orta.vscode-jest
     - esbenp.prettier-vscode
     - prisma.prisma
     - bradlc.vscode-tailwindcss
+    - streetsidesoftware.code-spell-checker
+    - github.vscode-pull-request-github
     - Vue.volar
     - antfu.goto-alias
 
@@ -63,3 +65,7 @@ ports:
   # Prisma Studio
   - port: 5555
     onOpen: open-preview
+  # HMR websocket https://github.com/nuxt/framework/issues/1796#issuecomment-1111618663
+  # Still needs to be configured manually :(
+  - port: 24678 
+    onOpen: open-preview

.vscode/settings.json

@@ -13,7 +13,6 @@
     "tsyringe",
     "upsert"
   ],
-  "vetur.experimental.templateInterpolationService": true,
   "[jsonc]": {
     "editor.formatOnSave": true
   },

README.md

@@ -86,7 +86,7 @@ An up-to-date version of all Storybook components can be found [online](https://
 - `store` contains Vuex Store files. [Nuxt documentation](https://nuxtjs.org/guide/vuex-store).
 
 ## Recommended VS Code and Browser extensions
-- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur): Add syntax highlighting and other tooling for Vue. 
+- [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar): Add syntax highlighting and other tooling for Vue. It is also recommended to activate the [takeover mode](https://vuejs.org/guide/typescript/overview.html#takeover-mode).
 - [Prisma](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma): Add syntax highlighting, formatting, jump-to-definition and linting for Prisma Schema files. 
 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Format code and enforces consistent style.
 - [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig): Override user/workspace VS Code settings with the provided settings in `.editorconfig`.

components/DetailPane.vue

@@ -21,14 +21,16 @@
           <FontAwesomeIcon icon="times" />
         </t-button>
         <slot>
-          <document-editor :document-id="selectedDocumentId"></document-editor>
+          <document-editor
+            v-if="selectedDocumentId"
+            :document-id="selectedDocumentId"
+          ></document-editor>
         </slot>
       </div>
     </transition>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
 import { useUiStore } from './../store'
 
 export default defineComponent({

components/DocumentEditor.vue

@@ -111,7 +111,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
 import { useResult, useQuery } from '@vue/apollo-composable'
 import Tags from './tagify.vue'
 import { gql } from '~/apollo'

components/DocumentEditorHeader.vue

@@ -4,8 +4,6 @@
   </p>
 </template>
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-
 export default defineComponent({
   props: { heading: { type: String, default: '' } },
 })

components/DocumentEditorInput.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
 export default defineComponent({
   props: {
     value: {

components/DocumentView.vue

@@ -105,13 +105,7 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  PropType,
-  ref,
-  computed,
-  toRefs,
-} from '@vue/composition-api'
+import type { PropType } from 'vue'
 import { gql, DocumentType } from '~/apollo'
 import { useUiStore } from '~/store'
 

components/HorizontalRule.vue

@@ -6,7 +6,6 @@
   />
 </template>
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
 export default defineComponent({
   props: {
     content: {

components/JabRefLogo.stories.ts

@@ -1,11 +1,12 @@
+import { Meta, Story } from '@storybook/vue3'
 import JabRefLogo from './JabrefLogo.vue'
 
 export default {
   title: 'JabRef Logo',
   component: JabRefLogo,
-}
+} as Meta
 
-export const Default = () => ({
+export const Default: Story = () => ({
   components: { JabRefLogo },
   template: '<JabRefLogo />',
 })

components/NavBar.vue

@@ -121,8 +121,6 @@
 
 <script lang="ts">
 import { useApolloClient, useMutation } from '@vue/apollo-composable'
-import { defineComponent, ref, watch } from '@vue/composition-api'
-import { useRouter } from '#app'
 import { gql } from '~/apollo'
 import { useUiStore } from '~/store'
 import { cacheCurrentUser } from '~/apollo/cache'
@@ -145,12 +143,12 @@ export default defineComponent({
         },
       }
     )
-    const router = useRouter()
+
     onDone(() => {
       // Reset graphql cache
       void resolveClient().clearStore()
 
-      void router.push({ name: 'index' })
+      void navigateTo({ name: 'index' })
     })
 
     const uiStore = useUiStore()

components/PasswordInput.vue

@@ -2,8 +2,7 @@
   <div class="relative">
     <t-input
       ref="input"
-      v-model="password"
-      :class="[classes]"
+      v-bind="$attrs"
       :type="showHiddenPassword ? 'password' : 'text'"
       x-model="password"
     />
@@ -20,29 +19,11 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api'
-
 export default defineComponent({
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-    classes: {
-      type: [Object, Array, String],
-      default: '',
-    },
-  },
-  setup(props, { emit }) {
+  setup() {
     const showHiddenPassword = ref(true)
 
-    const password = computed({
-      get: () => props.value,
-      set: (value): void => emit('input', value),
-    })
-
     return {
-      password,
       showHiddenPassword,
     }
   },

components/SideBar.vue

@@ -48,7 +48,10 @@
 
       <BaseTree
         v-if="groups"
-        :tree-data="groups"
+        :tree-data="
+          // @ts-ignore -- issue with BaseTree not being generic
+          groups as any
+        "
         children-key="children"
         :gap="7"
         class="groupsTree"
@@ -93,12 +96,11 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
 import { useResult, useQuery } from '@vue/apollo-composable'
-import { BaseTree } from '@he-tree/vue2'
+import { BaseTree } from '@he-tree/vue3'
 import { gql } from '~/apollo'
 import { useUiStore } from '~/store'
-import '@he-tree/vue2/dist/he-tree-vue2.css'
+import '@he-tree/vue3/dist/he-tree-vue3.css'
 
 export default defineComponent({
   components: {

components/TTable.vue

@@ -0,0 +1,54 @@
+<!-- Simle table, needed as long as variantjs doesn't provide one https://github.com/variantjs/vue/issues/26 -->
+<template>
+  <table :class="tableClass">
+    <thead>
+      <tr>
+        <th
+          v-for="header in headers"
+          :key="header"
+          :class="headerClass"
+        >
+          {{ header }}
+        </th>
+      </tr>
+    </thead>
+    <tbody :class="tbodyClass">
+      <tr
+        v-for="(row, index) in data"
+        :key="index"
+      >
+        <td
+          v-for="cell in row"
+          :key="cell"
+          :class="tdClass"
+        >
+          {{ cell }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script lang="ts" setup>
+interface Props {
+  headers?: string[]
+  data?: any[]
+  variant?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  headers: () => [],
+  data: () => [],
+  variant: '',
+})
+
+let tableClass =
+  'min-w-full divide-y divide-gray-100 shadow-sm border-gray-200 border'
+const headerClass = 'px-3 py-2 font-semibold text-left bg-gray-100 border-b'
+let tbodyClass = 'bg-white divide-y divide-gray-100'
+let tdClass = 'px-3 py-2 whitespace-no-wrap'
+if (props.variant === 'plain') {
+  tableClass = ''
+  tbodyClass = 'bg-transparent'
+  tdClass = 'px-3 py-1 whitespace-no-wrap'
+}
+</script>

components/t-alert.stories.ts

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/vue'
-import { TAlert } from 'vue-tailwind/dist/components'
+import { Story, Meta } from '@storybook/vue3'
+import { TAlert } from '@variantjs/vue'
 
 export default {
   component: TAlert,

components/t-button.stories.ts

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/vue'
-import { TButton } from 'vue-tailwind/dist/components'
+import { Story, Meta } from '@storybook/vue3'
+import { TButton } from '@variantjs/vue'
 
 export default {
   component: TButton,

components/t-checkbox.stories.ts

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/vue'
-import { TCheckbox } from 'vue-tailwind/dist/components'
+import { Story, Meta } from '@storybook/vue3'
+import { TCheckbox } from '@variantjs/vue'
 
 export default {
   component: TCheckbox,

components/t-dropdown.stories.ts

@@ -1,5 +1,5 @@
-import { Story, Meta } from '@storybook/vue'
-import { TDropdown } from 'vue-tailwind/dist/components'
+import { Story, Meta } from '@storybook/vue3'
+import { TDropdown } from '@variantjs/vue'
 
 export default {
   component: TDropdown,