Add Storybook smoketest to GitHub CI (#520)

* Add Storybook smoketest to GitHub CI

* Reorganize files to accomodate Nuxt component discovery and exclude `.types` files from it

* Fix linting issues

.github/workflows/ci.yml

@@ -45,3 +45,6 @@ jobs:
 
       - name: Run tests
         run: pnpm i18n:get-translations && pnpm test:unit
+
+      - name: Run Storybook smoke-test
+        run: pnpm storybook -- --ci --smoke-test

nuxt.config.js

@@ -127,7 +127,7 @@ export default {
   },
   components: {
     dirs: [
-      '~/components',
+      { path: '~/components', ignore: '**/*.types.js' },
       '~/components/ContentReport',
       '~/components/Filters',
       '~/components/ImageDetails',
@@ -136,7 +136,6 @@ export default {
       '~/components/VMetaSearch',
       '~/components/MediaTag',
       '~/components/Skeleton',
-      '~/components/VPopover',
     ],
   },
   plugins: [

src/components/VModal/VModalContent.vue

@@ -40,7 +40,7 @@
 <script>
 import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
-import { VTeleport } from '~/components/VTeleport'
+import VTeleport from '~/components/VTeleport/VTeleport'
 import { useDialogContent } from '~/composables/use-dialog-content'
 import { warn } from '~/utils/warn'
 import VButton from '~/components/VButton.vue'

src/components/VModal/VModalTarget.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-import { VTeleportTarget } from '~/components/VTeleport'
+import VTeleportTarget from '~/components/VTeleport/VTeleportTarget'
 
 export default defineComponent({
   name: 'VModalTarget',

src/components/VTeleport/README.md

@@ -0,0 +1,3 @@
+# VTeleport and VTeleportTarget
+
+Directly based on code from https://gist.github.com/Alan-Liang/a847559433919ecb53dff217ed9708bb

src/components/VTeleport/VTeleport.vue

@@ -0,0 +1,23 @@
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { targets } from './meta/targets'
+
+export default defineComponent({
+  name: 'VTeleport',
+  props: {
+    to: { type: String, required: true },
+  },
+  mounted() {
+    if (!(this.to in targets))
+      throw new Error(`VTeleport: non-existent target ${this.to}`)
+    targets[this.to].children.push(this)
+  },
+  beforeDestroy() {
+    if (!(this.to in targets))
+      throw new Error(`VTeleport: non-existent target ${this.to} on unmount`)
+    const children = targets[this.to].children
+    children.splice(children.indexOf(this), 1)
+  },
+  render: (h) => h('span'),
+})
+</script>

src/components/VTeleport/VTeleportTarget.vue

@@ -0,0 +1,27 @@
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { targets } from './meta/targets'
+
+export default defineComponent({
+  name: 'VTeleportTarget',
+  props: {
+    name: { type: String, required: true },
+  },
+  data: () => ({ children: [] }),
+  created() {
+    if (this.name in targets)
+      throw new Error(`VTeleportTarget: duplicate name ${this.name}`)
+    targets[this.name] = this
+  },
+  beforeDestroy() {
+    delete targets[this.name]
+    if (this.children.length > 0)
+      throw new Error(
+        `VTeleportTarget: ${this.name} beforeDestroy but still has children mounted`
+      )
+  },
+  render(h) {
+    return h('div', this.children.map((vm) => vm.$slots.default || []).flat())
+  },
+})
+</script>

src/components/VTeleport/meta/targets.js

@@ -0,0 +1,11 @@
+/* eslint-disable unicorn/filename-case */
+/**
+ * Disable this rule for this file until there's a way to disable it more generally
+ * for everything inside of the `meta` folders.
+ *
+ * @see https://github.com/sindresorhus/eslint-plugin-unicorn/issues/686
+ */
+/**
+ * @type {Record<string, import('vue').Component>}
+ */
+export const targets = {}