Merge pull request #1041 from dpc-sdp/feature/update-nuxt

Update Nuxt to 3.11.2
dpc-sdp · May 1, 2024 · d974549 · d974549
2 parents 6fd9ead + f2dcf7f
commit d974549
Show file tree

Hide file tree

Showing 56 changed files with 9,693 additions and 5,908 deletions.
diff --git a/.github/workflows/components.yml b/.github/workflows/components.yml
@@ -51,7 +51,7 @@ jobs:
           node-version: 18
           cache: 'pnpm'
       - name: Cypress component tests
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           working-directory: packages/ripple-ui-core
           install: false
@@ -75,7 +75,7 @@ jobs:
           cache: 'pnpm'
 
       - name: Cypress component tests
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           working-directory: packages/ripple-ui-forms
           install: false

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -16,8 +16,6 @@ jobs:
           node-version: 18
           cache: 'pnpm'
       - name: Install Dependencies
-        env:
-          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
         run: pnpm install --frozen-lockfile
       - run: pnpm run lint
       - run: pnpm run test:unit
diff --git a/.github/workflows/nuxt.yml b/.github/workflows/nuxt.yml
@@ -58,7 +58,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Cypress Integration (e2e) tests
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           TZ: 'Australia/Melbourne'

diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,36 +5,25 @@
   "version": "0.2.0",
   "compounds": [
     {
-      "name": "fullstack: Nuxt & Chrome",
-      "configurations": ["server: Nuxt", "client: Chrome"]
+      "name": "fullstack: nuxt",
+      "configurations": ["server: nuxt", "client: chrome"]
     }
   ],
   "configurations": [
     {
-      "name": "CLI",
-      "type": "node",
-      "request": "launch",
-      "cwd": "${workspaceFolder}",
-      "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["-F", "@dpc-sdp/nuxt-ripple-cli", "nuxt-ripple", "init"],
-      "console": "integratedTerminal"
-    },
-    {
-      "name": "client: Chrome",
-      "request": "launch",
       "type": "chrome",
+      "request": "launch",
+      "name": "client: chrome",
       "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}/examples/nuxt-app",
-      "preLaunchTask": "Sleep Delay"
+      "webRoot": "${workspaceFolder}"
     },
     {
-      "name": "server: Nuxt",
       "type": "node",
       "request": "launch",
-      "cwd": "${workspaceFolder}/examples/nuxt-app",
-      "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["-F", "nuxt-app", "dev"],
-      "console": "integratedTerminal"
+      "name": "server: nuxt",
+      "outputCapture": "std",
+      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
+      "args": ["dev", "examples/nuxt-app"]
     }
   ]
 }
diff --git a/docs/components/content/DocsContentNavigation.vue b/docs/components/content/DocsContentNavigation.vue
@@ -50,5 +50,6 @@ const processedNav = navigation?.map((level1Item) => {
 
 .docs-section-link {
   margin-top: var(--rpl-sp-3);
+  color: var(--rpl-clr-black);
 }
 </style>
diff --git a/docs/components/content/DocsExample.vue b/docs/components/content/DocsExample.vue
@@ -175,6 +175,7 @@ watch(targetIsVisible, (visible, wasVisible) => {
   width: 1px;
   min-width: 100%;
   height: 100px;
+  border: none;
 }
 
 .with-padding .docs-example-body {

diff --git a/docs/components/content/Prose/ProseH2.vue b/docs/components/content/Prose/ProseH2.vue
@@ -0,0 +1,36 @@
+<template>
+  <h2 class="rpl-type-h2 docs-h2" :id="id">
+    <a v-if="id && generate" :href="`#${id}`">
+      <span class="docs-h2--hash">#</span>
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings?.anchorLinks?.h2)
+</script>
+
+<style scoped>
+.docs-h2 a {
+  text-decoration: none;
+  color: var(--rpl-clr-black);
+  position: relative;
+  &:hover .docs-h2--hash {
+    display: block;
+  }
+}
+.docs-h2--hash {
+  color: var(--rpl-clr-neutral-200);
+  font-size: 0.75em;
+  left: -1em;
+  position: absolute;
+  display: none;
+}
+</style>
diff --git a/docs/components/content/Prose/ProseH3.vue b/docs/components/content/Prose/ProseH3.vue
@@ -0,0 +1,36 @@
+<template>
+  <h2 class="rpl-type-h3 docs-h3" :id="id">
+    <a v-if="id && generate" :href="`#${id}`">
+      <span class="docs-h3--hash">#</span>
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings?.anchorLinks?.h2)
+</script>
+
+<style scoped>
+.docs-h3 a {
+  text-decoration: none;
+  color: var(--rpl-clr-black);
+  position: relative;
+  &:hover .docs-h3--hash {
+    display: block;
+  }
+}
+.docs-h3--hash {
+  color: var(--rpl-clr-neutral-200);
+  font-size: 0.75em;
+  left: -1em;
+  position: absolute;
+  display: none;
+}
+</style>
diff --git a/docs/components/content/Prose/ProseH4.vue b/docs/components/content/Prose/ProseH4.vue
@@ -0,0 +1,9 @@
+<template>
+  <h4 class="rpl-type-h4 docs-h4" :id="id">
+    <slot />
+  </h4>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id?: string }>()
+</script>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -8,9 +8,7 @@ export default defineNuxtConfig({
     '@dpc-sdp/ripple-ui-core/nuxt',
     '@dpc-sdp/ripple-ui-forms/nuxt',
     '@nuxt/content',
-    '@nuxthq/studio',
-    '@nuxtjs/tailwindcss',
-    '@nuxtlabs/github-module'
+    '@nuxthq/studio'
   ],
   github: {
     repo: 'dpc-sdp/ripple-framework'
@@ -38,5 +36,16 @@ export default defineNuxtConfig({
     prerender: {
       ignore: ['/storybook']
     }
+  },
+  // A change in nuxt 3.8.0 means we were getting errors whenever a type was imported without the 'type' keyword
+  // This is a temporary workaround until we can fix all the types
+  // TODO: Add 'type' keyword to all type imports
+  // https://github.com/nuxt/nuxt/releases/tag/v3.8.0
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        verbatimModuleSyntax: false
+      }
+    }
   }
 })
diff --git a/docs/package.json b/docs/package.json
@@ -10,24 +10,20 @@
     "generate": "pnpm build:docs-storybook && nuxt generate",
     "preview": "nuxt preview"
   },
-  "devDependencies": {
-    "@iconify/vue": "^4.1.0",
-    "@nuxt/content": "^2.7.0",
-    "@nuxt/kit": "^3.3.2",
-    "@nuxthq/studio": "^1.0.0",
-    "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.6.4",
-    "@nuxtlabs/github-module": "^1.6.2",
-    "@tailwindcss/typography": "^0.5.7",
-    "@types/iframe-resizer": "^3.5.9",
-    "nuxt-component-meta": "^0.5.1"
-  },
   "dependencies": {
     "@dpc-sdp/ripple-ui-core": "workspace:*",
     "@dpc-sdp/ripple-ui-forms": "workspace:*",
     "@dpc-sdp/stylelint-config-ripple": "workspace:*",
     "@modyfi/vite-plugin-yaml": "^1.0.4",
+    "@nuxt/content": "^2.12.0",
     "highlight.js": "^11.7.0",
-    "iframe-resizer": "^4.3.6"
+    "iframe-resizer": "^4.3.6",
+    "nuxt": "^3.10.0"
+  },
+  "devDependencies": {
+    "@iconify/vue": "^4.1.0",
+    "@nuxt/content": "^2.12.0",
+    "@nuxthq/studio": "^1.0.0",
+    "@types/iframe-resizer": "^3.5.9"
   }
 }
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
diff --git a/examples/nuxt-app/nuxt.config.ts b/examples/nuxt-app/nuxt.config.ts
@@ -27,5 +27,10 @@ export default defineNuxtConfig({
     '@dpc-sdp/ripple-tide-media',
     '@dpc-sdp/ripple-tide-news',
     '@dpc-sdp/ripple-tide-search'
-  ]
+  ],
+  // Nuxt devtools
+  sourcemap: true,
+  devtools: {
+    enabled: true
+  }
 })