Merge branch 'main' into ux/make-package-name-selectable

Author: Adebesin-Cell

CONTRIBUTING.md

@@ -409,10 +409,10 @@ describe('featureName', () => {
 
 ### Component accessibility tests
 
-All new components should have a basic accessibility test in `test/nuxt/components.spec.ts`. These tests use [axe-core](https://github.com/dequelabs/axe-core) to catch common accessibility violations.
+All Vue components should have accessibility tests in `test/nuxt/a11y.spec.ts`. These tests use [axe-core](https://github.com/dequelabs/axe-core) to catch common accessibility violations and run in a real browser environment via Playwright.
 
 ```typescript
-import MyComponent from '~/components/MyComponent.vue'
+import { MyComponent } from '#components'
 
 describe('MyComponent', () => {
   it('should have no accessibility violations', async () => {
@@ -429,6 +429,8 @@ describe('MyComponent', () => {
 
 The `runAxe` helper handles DOM isolation and disables page-level rules that don't apply to isolated component testing.
 
+A coverage test in `test/unit/a11y-component-coverage.spec.ts` ensures all components are either tested or explicitly skipped with justification. When you add a new component, this test will fail until you add accessibility tests for it.
+
 > [!IMPORTANT]
 > Just because axe-core doesn't find any obvious issues, it does not mean a component is accessible. Please do additional checks and use best practices.
 

app/components/AuthButton.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { CheckNameResult } from '~/utils/package-name'
 import { checkPackageName } from '~/utils/package-name'
 
 const props = defineProps<{
@@ -16,25 +15,34 @@ const {
   refreshState,
 } = useConnector()
 
-// Fetch name availability when modal opens
-const checkResult = shallowRef<CheckNameResult | null>(null)
-
-const isChecking = shallowRef(false)
 const isPublishing = shallowRef(false)
-const publishError = shallowRef<string | null>(null)
 const publishSuccess = shallowRef(false)
+const publishError = shallowRef<string | null>(null)
 
-async function checkAvailability() {
-  isChecking.value = true
-  publishError.value = null
-  try {
-    checkResult.value = await checkPackageName(props.packageName)
-  } catch (err) {
-    publishError.value = err instanceof Error ? err.message : $t('claim.modal.failed_to_check')
-  } finally {
-    isChecking.value = false
-  }
-}
+const {
+  data: checkResult,
+  refresh: checkAvailability,
+  status,
+  error: checkError,
+} = useAsyncData(
+  (_nuxtApp, { signal }) => {
+    return checkPackageName(props.packageName, { signal })
+  },
+  { default: () => null, immediate: false },
+)
+
+const isChecking = computed(() => {
+  return status.value === 'pending'
+})
+
+const mergedError = computed(() => {
+  return (
+    publishError.value ??
+    (checkError.value instanceof Error
+      ? checkError.value.message
+      : $t('claim.modal.failed_to_check'))
+  )
+})
 
 const connectorModal = useModal('connector-modal')
 
@@ -92,7 +100,6 @@ const dialogRef = ref<HTMLDialogElement>()
 
 function open() {
   // Reset state and check availability each time modal is opened
-  checkResult.value = null
   publishError.value = null
   publishSuccess.value = false
   checkAvailability()
@@ -287,11 +294,11 @@ const previewPackageJson = computed(() => {
 
       <!-- Error message -->
       <div
-        v-if="publishError"
+        v-if="mergedError"
         role="alert"
         class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
       >
-        {{ publishError }}
+        {{ mergedError }}
       </div>
 
       <!-- Actions -->
@@ -369,17 +376,17 @@ const previewPackageJson = computed(() => {
     </div>
 
     <!-- Error state -->
-    <div v-else-if="publishError" class="space-y-4">
+    <div v-else-if="mergedError" class="space-y-4">
       <div
         role="alert"
         class="p-3 text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-md"
       >
-        {{ publishError }}
+        {{ mergedError }}
       </div>
       <button
         type="button"
         class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-        @click="checkAvailability"
+        @click="() => checkAvailability()"
       >
         {{ $t('common.retry') }}
       </button>

app/components/ClaimPackageModal.vue

@@ -79,15 +79,15 @@ const sortedOptionalDependencies = computed(() => {
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
-          class="flex items-center justify-start py-1 text-sm gap-2"
+          class="flex items-center justify-between py-1 text-sm gap-2"
         >
           <NuxtLink
             :to="{ name: 'package', params: { package: dep.split('/') } }"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
+            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
           >
             {{ dep }}
           </NuxtLink>
-          <span class="flex items-center gap-1">
+          <span class="flex items-center gap-1 max-w-[40%]">
             <span
               v-if="outdatedDeps[dep]"
               class="shrink-0"
@@ -97,7 +97,6 @@ const sortedOptionalDependencies = computed(() => {
             >
               <span class="i-carbon:warning-alt w-3 h-3 block" />
             </span>
-            <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
             <NuxtLink
               v-if="getVulnerableDepInfo(dep)"
               :to="{
@@ -174,9 +173,9 @@ const sortedOptionalDependencies = computed(() => {
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
-          class="flex items-center justify-start py-1 text-sm gap-2"
+          class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
-          <div class="flex items-center gap-2 min-w-0">
+          <div class="flex items-center gap-1 min-w-0 flex-1">
             <NuxtLink
               :to="{
                 name: 'package',
@@ -194,13 +193,12 @@ const sortedOptionalDependencies = computed(() => {
               {{ $t('package.dependencies.optional') }}
             </span>
           </div>
-          <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <NuxtLink
             :to="{
               name: 'package',
               params: { package: [...peer.name.split('/'), 'v', peer.version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
+            class="font-mono text-xs text-fg-subtle max-w-[40%] truncate"
             :title="peer.version"
           >
             {{ peer.version }}
@@ -241,21 +239,20 @@ const sortedOptionalDependencies = computed(() => {
             optionalDepsExpanded ? undefined : 10,
           )"
           :key="dep"
-          class="flex items-center justify-start py-1 text-sm gap-2"
+          class="flex items-center justify-between py-1 text-sm gap-2"
         >
           <NuxtLink
             :to="{ name: 'package', params: { package: dep.split('/') } }"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
+            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
           >
             {{ dep }}
           </NuxtLink>
-          <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <NuxtLink
             :to="{
               name: 'package',
               params: { package: [...dep.split('/'), 'v', version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate"
+            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
             :title="version"
           >
             {{ version }}

app/components/PackageDependencies.vue

@@ -19,9 +19,26 @@ const rootEl = shallowRef<HTMLElement | null>(null)
 
 const { width } = useElementSize(rootEl)
 
+const chartKey = ref(0)
+
+let chartRemountTimeoutId: ReturnType<typeof setTimeout> | null = null
+
 onMounted(() => {
   rootEl.value = document.documentElement
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
+
+  // If the chart is painted too early, built-in auto-sizing does not adapt to the final container size
+  chartRemountTimeoutId = setTimeout(() => {
+    chartKey.value += 1
+    chartRemountTimeoutId = null
+  }, 10)
+})
+
+onBeforeUnmount(() => {
+  if (chartRemountTimeoutId !== null) {
+    clearTimeout(chartRemountTimeoutId)
+    chartRemountTimeoutId = null
+  }
 })
 
 const { colors } = useCssVariables(
@@ -543,6 +560,7 @@ const config = computed(() => {
         show: false, // As long as a single package is displayed
       },
       tooltip: {
+        teleportTo: '#chart-modal',
         borderColor: 'transparent',
         backdropFilter: false,
         backgroundColor: 'transparent',
@@ -687,7 +705,12 @@ const config = computed(() => {
     </div>
 
     <ClientOnly v-if="inModal && chartData.dataset">
-      <VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
+      <VueUiXy
+        :dataset="chartData.dataset"
+        :config="config"
+        class="[direction:ltr]"
+        :key="chartKey"
+      >
         <template #menuIcon="{ isOpen }">
           <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
           <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />

app/components/PackageDownloadAnalytics.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SkillListItem } from '#shared/types'
+
+defineProps<{
+  skills: SkillListItem[]
+  packageName: string
+  version?: string
+}>()
+
+const skillsModal = useModal('skills-modal')
+</script>
+
+<template>
+  <section v-if="skills.length" id="skills" class="scroll-mt-20">
+    <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
+      {{ $t('package.skills.title') }}
+    </h2>
+    <button
+      type="button"
+      class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+      @click="skillsModal.open()"
+    >
+      <span class="i-custom:agent-skills w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
+      <span class="text-fg-muted">{{
+        $t('package.skills.skills_available', { count: skills.length }, skills.length)
+      }}</span>
+    </button>
+  </section>
+</template>